[Toolkit] Improve descriptions of Shadcn components

src/Toolkit/kits/shadcn/docs/components/Alert.md

@@ -1,6 +1,6 @@
 # Alert
 
-Displays a callout for user attention.
+A notification component that displays important messages with an icon, title, and description.
 
 ```twig {"preview":true}
 <twig:Alert class="max-w-lg">
@@ -44,4 +44,4 @@ Displays a callout for user attention.
         Your session has expired. Please log in again.
     </twig:Alert:Description>
 </twig:Alert>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/AspectRatio.md

@@ -1,11 +1,11 @@
 # AspectRatio
 
-The AspectRatio component is a component that allows you to display an element with a specific aspect ratio.
+A container that maintains a specific width-to-height ratio for its content.
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
-    <img 
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+    <img
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
         alt="Landscape photograph by Tobias Tullius"
         class="h-full w-full rounded-md object-cover"
     />
@@ -26,8 +26,8 @@ The AspectRatio component is a component that allows you to display an element w
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
-    <img 
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+    <img
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
         alt="Landscape photograph by Tobias Tullius"
         class="h-full w-full rounded-md object-cover"
     />
@@ -38,8 +38,8 @@ The AspectRatio component is a component that allows you to display an element w
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">
-    <img 
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+    <img
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
         alt="Landscape photograph by Tobias Tullius"
         class="h-full w-full rounded-md object-cover"
     />

src/Toolkit/kits/shadcn/docs/components/Avatar.md

@@ -1,6 +1,6 @@
 # Avatar
 
-A component for displaying user profile images with a fallback for when the image is not available.
+A circular element that displays a user's profile image or initials as a fallback.
 
 ```twig {"preview":true}
 <twig:Avatar>
@@ -53,4 +53,4 @@ A component for displaying user profile images with a fallback for when the imag
         <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
     </twig:Avatar>
 </div>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/Badge.md

@@ -1,6 +1,6 @@
 # Badge
 
-A component for displaying short pieces of information, such as counts, labels, or status indicators.
+A small element that displays status, counts, or labels with optional icons.
 
 ```twig {"preview":true}
 <twig:Badge>Badge</twig:Badge>
@@ -53,4 +53,4 @@ A component for displaying short pieces of information, such as counts, labels,
     <twig:ux:icon name="lucide:check" class="mr-1 h-3 w-3" />
     Verified
 </twig:Badge>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/Breadcrumb.md

@@ -1,6 +1,6 @@
 # Breadcrumb
 
-A navigation component that displays the current page's location within a website's hierarchy.
+A navigation element that shows the current page's location in the site hierarchy with clickable links.
 
 ```twig {"preview":true}
 <twig:Breadcrumb>

src/Toolkit/kits/shadcn/docs/components/Button.md

@@ -1,6 +1,6 @@
 # Button
 
-A button component that can be used to trigger actions or events.
+A clickable element that triggers actions or events, supporting various styles and states.
 
 ```twig {"preview":true}
 <twig:Button>
@@ -30,58 +30,58 @@ A button component that can be used to trigger actions or events.
 
 ```twig {"preview":true}
 <twig:Button>Button</twig:Button>
-``` 
+```
 
 ### Secondary
 
 ```twig {"preview":true}
 <twig:Button variant="outline">Outline</twig:Button>
-``` 
+```
 
 ### Destructive
 
 ```twig {"preview":true}
 <twig:Button variant="destructive">Destructive</twig:Button>
-``` 
+```
 
 ### Outline
 
 ```twig {"preview":true}
 <twig:Button variant="outline">Outline</twig:Button>
-``` 
+```
 
 ### Ghost
 
 ```twig {"preview":true}
 <twig:Button variant="ghost">Ghost</twig:Button>
-``` 
+```
 
 ### Link
 
 ```twig {"preview":true}
 <twig:Button variant="link">Link</twig:Button>
-``` 
+```
 
 ### Icon
 
 ```twig {"preview":true}
 <twig:Button variant="outline" size="icon">
     <twig:ux:icon name="lucide:chevron-right" />
 </twig:Button>
-``` 
+```
 
 ### With Icon
 
 ```twig {"preview":true}
 <twig:Button>
     <twig:ux:icon name="lucide:mail" /> Login with Email
 </twig:Button>
-``` 
+```
 
 ### Loading
 
 ```twig {"preview":true}
 <twig:Button disabled>
     <twig:ux:icon name="lucide:loader-2" class="animate-spin" /> Please wait
 </twig:Button>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/Card.md

@@ -1,6 +1,6 @@
 # Card
 
-A container component for displaying content in a clear, structured format with optional header, content, and footer sections.
+A container that groups related content and actions into a box with optional header, content, and footer sections.
 
 ```twig {"preview":true,"height":"300px"}
 <twig:Card class="w-[350px]">
@@ -71,14 +71,14 @@ A container component for displaying content in a clear, structured format with
                         {{ notification.description }}
                     </p>
                 </div>
-            </div>  
+            </div>
         {%- endfor -%}
     </twig:Card:Content>
     <twig:Card:Footer>
         <twig:Button class="w-full">
-            <twig:ux:icon name="lucide:check" /> 
+            <twig:ux:icon name="lucide:check" />
             Mark all as read
         </twig:Button>
     </twig:Card:Footer>
 </twig:Card>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/Input.md

@@ -1,6 +1,6 @@
 # Input
 
-A form input component for text, email, password, and other input types.
+A form control that allows users to enter text, numbers, or select files.
 
 ```twig {"preview":true}
 <twig:Input type="email" placeholder="Email" class="max-w-sm" />

src/Toolkit/kits/shadcn/docs/components/Label.md

@@ -1,6 +1,6 @@
 # Label
 
-A component for labeling form elements and other content.
+A text element that identifies form controls and other content.
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">

src/Toolkit/kits/shadcn/docs/components/Pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-A component for navigating through paginated content with page numbers and navigation controls.
+A navigation component that displays page numbers and controls for moving between pages.
 
 ```twig {"preview":true}
 <twig:Pagination>

src/Toolkit/kits/shadcn/docs/components/Progress.md

@@ -1,6 +1,6 @@
 # Progress
 
-A component for displaying progress of a task or operation.
+A visual indicator that shows the completion status of a task or operation.
 
 ```twig {"preview":true}
 <twig:Progress value="33" />

src/Toolkit/kits/shadcn/docs/components/Select.md

@@ -1,6 +1,6 @@
 # Select
 
-A form component for selecting an option from a dropdown list.
+A dropdown control that allows users to choose from a list of options.
 
 ```twig {"preview":true}
 <twig:Select class="max-w-sm">

src/Toolkit/kits/shadcn/docs/components/Separator.md

@@ -1,6 +1,6 @@
 # Separator
 
-A component for creating visual separators between content.
+A visual divider that creates space between content elements, available in horizontal and vertical orientations.
 
 ```twig {"preview":true}
 <div class="max-w-sm">

src/Toolkit/kits/shadcn/docs/components/Skeleton.md

@@ -1,6 +1,6 @@
 # Skeleton
 
-A component for displaying a loading state with a placeholder animation.
+A placeholder element that displays a loading state with an animated background.
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-4">

src/Toolkit/kits/shadcn/docs/components/Switch.md

@@ -1,6 +1,6 @@
 # Switch
 
-A toggle switch component for boolean input.
+A toggle control that switches between on and off states.
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">

src/Toolkit/kits/shadcn/docs/components/Table.md

@@ -1,6 +1,6 @@
 # Table
 
-A component for displaying structured data in rows and columns with support for headers, captions, and customizable styling.
+A structured grid element that organizes data into rows and columns, supporting headers, captions, and footers.
 
 ```twig {"preview":true,"height":"400px"}
 {%- set invoices = [
@@ -80,4 +80,4 @@ A component for displaying structured data in rows and columns with support for
         </twig:Table:Row>
     </twig:Table:Footer>
 </twig:Table>
-``` 
+```

src/Toolkit/kits/shadcn/docs/components/Textarea.md

@@ -1,6 +1,6 @@
 # Textarea
 
-A multi-line text input component for longer text content.
+A form control for entering multiple lines of text.
 
 ```twig {"preview":true}
 <twig:Textarea placeholder="Type your message here." class="max-w-sm" />