saha-ui 1.4.0 → 1.6.0

package/README.md

@@ -27,7 +27,7 @@
 
 ## ✨ Features
 
-- 🎨 **29 Modern Components** - Button, ButtonGroup, Alert, Badge, Breadcrumb, Card, Chip, Divider, Accordion, Avatar, AvatarGroup, Tooltip, Link, List, Timeline, Tree, Image, Carousel, Steps, Table, Rating, Progress, Popover, PlayButton, Skeleton, Pagination, DatePicker, Tab, Input
+- 🎨 **35 Modern Components** - Button, ButtonGroup, Alert, Badge, Breadcrumb, Card, Chip, Divider, Accordion, Avatar, AvatarGroup, Tooltip, Link, List, Timeline, Tree, Image, Carousel, Steps, Table, Rating, Progress, Popover, PlayButton, FloatingActionButton, Radio, Switch, Checkbox, CheckboxGroup, Select, Skeleton, Pagination, DatePicker, Tab, Input
 - 🌓 **Dark Mode** - Seamless theme switching with full dark mode support
 - 🔮 **Glass Morphism** - Beautiful backdrop blur effects across components
 - 🎯 **Type-Safe** - Full TypeScript support with comprehensive prop types
@@ -139,43 +139,50 @@ import { cn } from "saha-ui/lib/utils";
 
 ### Overview
 
-| Component       | Description                                                              | Status | CVA |
-| --------------- | ------------------------------------------------------------------------ | ------ | --- |
-| **Button**      | Action buttons with 9 variants and 4 sizes                               | ✅     | ✅  |
-| **ButtonGroup** | Grouped buttons with horizontal/vertical layouts                         | ✅     | ✅  |
-| **Alert**       | Notification messages with 5 variants × 4 statuses                       | ✅     | ✅  |
-| **Badge**       | Status indicators and labels with 9 variants                             | ✅     | ✅  |
-| **Breadcrumb**  | Navigation trail with 5 variants, 4 separators, and collapsing           | ✅     | ✅  |
-| **Card**        | Container with 5 variants and sub-components                             | ✅     | ✅  |
-| **Chip**        | Interactive tags with 5 variants, deletable, and avatars                 | ✅     | ✅  |
-| **Divider**     | Content separator with 5 variants and label support                      | ✅     | ✅  |
-| **Accordion**   | Collapsible content with 5 behavior modes                                | ✅     | ✅  |
-| **Avatar**      | User profile images with status indicators                               | ✅     | ✅  |
-| **AvatarGroup** | Grouped avatars with overlap and count                                   | ✅     | ✅  |
-| **Tooltip**     | Contextual hints with 9 variants, 4 triggers, and interactive mode       | ✅     | ✅  |
-| **Link**        | Smart links with 9 variants and icon support                             | ✅     | ✅  |
-| **List**        | Modern lists with 5 variants and icon support                            | ✅     | ✅  |
-| **Timeline**    | Chronological events with 4 variants, positions, and statuses            | ✅     | ✅  |
-| **Tree**        | Hierarchical data with 4 variants, icons, and expand/collapse            | ✅     | ✅  |
-| **Image**       | Advanced image with lazy loading                                         | ✅     | ✅  |
-| **Carousel**    | Image slider with 4 transition effects                                   | ✅     | ✅  |
-| **Steps**       | Progress indicator with 4 variants, horizontal/vertical layouts          | ✅     | ✅  |
-| **Table**       | Data table with sorting, selection, 5 variants, and responsive           | ✅     | ✅  |
-| **Rating**      | Star rating with 6 variants, 4 sizes, multiple icons, half stars         | ✅     | ✅  |
-| **Progress**    | Progress bar with 9 variants, 5 sizes, animations, striped               | ✅     | ✅  |
-| **Popover**     | Rich content popover with 11 variants, 12 positions, 4 triggers          | ✅     | ✅  |
-| **PlayButton**  | Animated play/pause button with 9 variants, 4 sizes, smooth transitions  | ✅     | ✅  |
-| **Skeleton**    | Loading placeholder with 5 variants, 4 shapes, customizable animations   | ✅     | ✅  |
-| **Pagination**  | Page navigation with 5 variants, 3 sizes, ellipsis, customizable labels  | ✅     | ✅  |
-| **DatePicker**  | Calendar date picker with 5 variants, 3 sizes, date restrictions         | ✅     | ✅  |
-| **Tab**         | Tab navigation with 14 variants, 3 sizes, icons, badges, disabled states | ✅     | ✅  |
-| **Input**       | Text input with 10 variants, 4 sizes, icons, validation, all input types | ✅     | ✅  |
+| Component                | Description                                                              | Status | CVA |
+| ------------------------ | ------------------------------------------------------------------------ | ------ | --- |
+| **Button**               | Action buttons with 9 variants and 4 sizes                               | ✅     | ✅  |
+| **ButtonGroup**          | Grouped buttons with horizontal/vertical layouts                         | ✅     | ✅  |
+| **Alert**                | Notification messages with 5 variants × 4 statuses                       | ✅     | ✅  |
+| **Badge**                | Status indicators and labels with 9 variants                             | ✅     | ✅  |
+| **Breadcrumb**           | Navigation trail with 5 variants, 4 separators, and collapsing           | ✅     | ✅  |
+| **Card**                 | Container with 5 variants and sub-components                             | ✅     | ✅  |
+| **Chip**                 | Interactive tags with 5 variants, deletable, and avatars                 | ✅     | ✅  |
+| **Divider**              | Content separator with 5 variants and label support                      | ✅     | ✅  |
+| **Accordion**            | Collapsible content with 5 behavior modes                                | ✅     | ✅  |
+| **Avatar**               | User profile images with status indicators                               | ✅     | ✅  |
+| **AvatarGroup**          | Grouped avatars with overlap and count                                   | ✅     | ✅  |
+| **Tooltip**              | Contextual hints with 9 variants, 4 triggers, and interactive mode       | ✅     | ✅  |
+| **Link**                 | Smart links with 9 variants and icon support                             | ✅     | ✅  |
+| **List**                 | Modern lists with 5 variants and icon support                            | ✅     | ✅  |
+| **Timeline**             | Chronological events with 4 variants, positions, and statuses            | ✅     | ✅  |
+| **Tree**                 | Hierarchical data with 4 variants, icons, and expand/collapse            | ✅     | ✅  |
+| **Image**                | Advanced image with lazy loading                                         | ✅     | ✅  |
+| **Carousel**             | Image slider with 4 transition effects                                   | ✅     | ✅  |
+| **Steps**                | Progress indicator with 4 variants, horizontal/vertical layouts          | ✅     | ✅  |
+| **Table**                | Data table with sorting, selection, 5 variants, and responsive           | ✅     | ✅  |
+| **Rating**               | Star rating with 6 variants, 4 sizes, multiple icons, half stars         | ✅     | ✅  |
+| **Progress**             | Progress bar with 9 variants, 5 sizes, animations, striped               | ✅     | ✅  |
+| **Popover**              | Rich content popover with 11 variants, 12 positions, 4 triggers          | ✅     | ✅  |
+| **PlayButton**           | Animated play/pause button with 9 variants, 4 sizes, smooth transitions  | ✅     | ✅  |
+| **FloatingActionButton** | Modern FAB with 9 variants, 4 sizes, positions, extended mode            | ✅     | ✅  |
+| **Radio**                | Radio button with 7 variants, 3 sizes, RadioGroup, descriptions          | ✅     | ✅  |
+| **Switch**               | Toggle switch with 7 variants, 3 sizes, icons, loading state             | ✅     | ✅  |
+| **Checkbox**             | Checkbox with 7 variants, 3 sizes, indeterminate, card mode, icons       | ✅     | ✅  |
+| **CheckboxGroup**        | Grouped checkboxes with layouts, validation, card grid, custom children  | ✅     | ✅  |
+| **Select**               | Advanced dropdown with search, multi-select, icons, avatars, grouping    | ✅     | ✅  |
+| **Skeleton**             | Loading placeholder with 5 variants, 4 shapes, customizable animations   | ✅     | ✅  |
+| **Spinner**              | Loading spinner with 10 variants, 6 sizes, 4 animations, fullscreen mode | ✅     | ✅  |
+| **Pagination**           | Page navigation with 5 variants, 3 sizes, ellipsis, customizable labels  | ✅     | ✅  |
+| **DatePicker**           | Calendar date picker with 5 variants, 3 sizes, date restrictions         | ✅     | ✅  |
+| **Tab**                  | Tab navigation with 14 variants, 3 sizes, icons, badges, disabled states | ✅     | ✅  |
+| **Input**                | Text input with 10 variants, 4 sizes, icons, validation, all input types | ✅     | ✅  |
 
 ---
 
 ## ⚡ Quick Examples
 
-Here are simple examples for all 29 components to get you started quickly:
+Here are simple examples for all 32 components to get you started quickly:
 
 ### Button
 
@@ -202,10 +209,9 @@ import { ButtonGroup, Button } from "saha-ui";
 ```tsx
 import { Alert } from "saha-ui";
 
-<Alert status="success">Operation completed successfully!</Alert>
-<Alert status="error" variant="filled" dismissible>
-  Error occurred!
-</Alert>
+<Alert status="success" message="Operation completed successfully!" />
+<Alert status="danger" variant="solid" message="Error occurred!" closeable />
+<Alert status="warning" variant="glass" title="Warning" message="Please review before proceeding." />
 ```
 
 ### Badge
@@ -221,16 +227,34 @@ import { Badge } from "saha-ui";
 ### Breadcrumb
 
 ```tsx
-import { Breadcrumb } from "saha-ui";
-
-const items = [
-  { label: 'Home', href: '/' },
-  { label: 'Products', href: '/products' },
-  { label: 'Details', href: '/products/123' }
-];
+import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from "saha-ui";
 
-<Breadcrumb items={items} />
-<Breadcrumb items={items} variant="pills" separator="arrow" />
+// Basic breadcrumb
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem isCurrentPage>Details</BreadcrumbItem>
+</Breadcrumb>
+
+// With variants and separator types
+<Breadcrumb variant="pills" separator="arrow">
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem isCurrentPage>Electronics</BreadcrumbItem>
+</Breadcrumb>
+
+// Other separator options: "chevron" (default), "slash", "dot", "arrow"
+<Breadcrumb variant="glass" separator="slash">
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem isCurrentPage>API</BreadcrumbItem>
+</Breadcrumb>
 ```
 
 ### Card
@@ -251,13 +275,26 @@ import { Card, CardHeader, CardTitle, CardContent } from "saha-ui";
 ```tsx
 import { Chip } from "saha-ui";
 
-<Chip color="primary">JavaScript</Chip>
-<Chip deletable onDelete={() => console.log('deleted')}>
+// Basic chips with variants
+<Chip variant="filled" color="primary">JavaScript</Chip>
+<Chip variant="outlined" color="secondary">TypeScript</Chip>
+<Chip variant="soft" color="success">React</Chip>
+<Chip variant="glass" color="primary">Saha UI</Chip>
+
+// Deletable chip
+<Chip deletable onDelete={() => console.log('deleted')} color="error">
   Remove me
 </Chip>
-<Chip clickable onClick={() => alert('clicked')}>
+
+// Clickable chip
+<Chip clickable onClick={() => alert('clicked')} color="info">
   Click me
 </Chip>
+
+// With avatars
+<Chip avatar={<Avatar name="JD" size="xs" />} color="primary">
+  John Doe
+</Chip>
 ```
 
 ### Divider
@@ -274,21 +311,26 @@ import { Divider } from "saha-ui";
 ### Accordion
 
 ```tsx
-import { Accordion } from "saha-ui";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "saha-ui";
 
-const items = [
-  {
-    title: 'Section 1',
-    content: 'Content for section 1'
-  },
-  {
-    title: 'Section 2',
-    content: 'Content for section 2'
-  }
-];
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section 1</AccordionTrigger>
+    <AccordionContent>Content for section 1</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Section 2</AccordionTrigger>
+    <AccordionContent>Content for section 2</AccordionContent>
+  </AccordionItem>
+</Accordion>
 
-<Accordion items={items} />
-<Accordion items={items} variant="bordered" defaultOpen={[0]} />
+// Multiple items open at once
+<Accordion type="multiple" variant="glass">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section 1</AccordionTrigger>
+    <AccordionContent>Content here</AccordionContent>
+  </AccordionItem>
+</Accordion>
 ```
 
 ### Avatar
@@ -317,26 +359,32 @@ import { AvatarGroup, Avatar } from "saha-ui";
 ### Tooltip
 
 ```tsx
-import { Tooltip } from "saha-ui";
+import { Tooltip, TooltipTrigger, TooltipContent } from "saha-ui";
 
 // Basic tooltip
-<Tooltip content="This is a tooltip">
-  <Button>Hover me</Button>
+<Tooltip>
+  <TooltipTrigger>
+    <Button>Hover me</Button>
+  </TooltipTrigger>
+  <TooltipContent>This is a tooltip</TooltipContent>
 </Tooltip>
 
 // With variant and position
-<Tooltip content="Success message!" variant="success" position="right">
-  <Badge variant="success">Active</Badge>
+<Tooltip variant="success" position="right">
+  <TooltipTrigger>
+    <Badge variant="success">Active</Badge>
+  </TooltipTrigger>
+  <TooltipContent>Success message!</TooltipContent>
 </Tooltip>
 
 // Interactive tooltip with click trigger
-<Tooltip
-  content={<div>Click <a href="#">here</a> for more</div>}
-  interactive={true}
-  trigger="click"
-  variant="glass"
->
-  <Button>Click Me</Button>
+<Tooltip interactive trigger="click" variant="glass">
+  <TooltipTrigger>
+    <Button>Click Me</Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <div>Click <a href="#">here</a> for more</div>
+  </TooltipContent>
 </Tooltip>
 ```
 
@@ -355,54 +403,73 @@ import { Link } from "saha-ui";
 ### List
 
 ```tsx
-import { List } from "saha-ui";
+import { List, ListItem } from "saha-ui";
+import { CheckCircle } from "lucide-react";
 
-const items = [
-  { id: 1, content: 'First item' },
-  { id: 2, content: 'Second item' },
-  { id: 3, content: 'Third item' }
-];
+<List variant="bordered">
+  <ListItem>First item</ListItem>
+  <ListItem>Second item</ListItem>
+  <ListItem>Third item</ListItem>
+</List>
 
-<List items={items} />
-<List items={items} variant="bordered" />
+// With icons
+<List variant="cards">
+  <ListItem icon={<CheckCircle size={18} />}>Completed task</ListItem>
+  <ListItem icon={<CheckCircle size={18} />}>Another task</ListItem>
+</List>
 ```
 
 ### Timeline
 
 ```tsx
-import { Timeline } from "saha-ui";
+import { Timeline, TimelineItem } from "saha-ui";
 import { Rocket, Package, Check } from "lucide-react";
 
-const events = [
-  { id: 1, title: 'Project Started', description: 'Initial setup', time: '2 hours ago', icon: Rocket },
-  { id: 2, title: 'Development', description: 'Building features', time: '1 hour ago', icon: Package, status: 'primary' as const },
-  { id: 3, title: 'Completed', description: 'Ready to deploy', time: 'Just now', icon: Check, status: 'success' as const }
-];
+<Timeline variant="gradient">
+  <TimelineItem
+    icon={<Rocket size={18} />}
+    title="Project Started"
+    description="Initial setup"
+    time="2 hours ago"
+  />
+  <TimelineItem
+    icon={<Package size={18} />}
+    title="Development"
+    description="Building features"
+    time="1 hour ago"
+    status="primary"
+  />
+  <TimelineItem
+    icon={<Check size={18} />}
+    title="Completed"
+    description="Ready to deploy"
+    time="Just now"
+    status="success"
+  />
+</Timeline>
 
-<Timeline items={events} />
-<Timeline items={events} variant="gradient" position="alternate" />
+// Alternate positioning
+<Timeline position="alternate">
+  <TimelineItem title="Event 1" />
+  <TimelineItem title="Event 2" />
+</Timeline>
 ```
 
 ### Tree
 
 ```tsx
-import { Tree } from "saha-ui";
+import { Tree, TreeItem } from "saha-ui";
 import { Folder, File } from "lucide-react";
 
-const nodes = [
-  {
-    id: 1,
-    label: 'src',
-    icon: <Folder size={16} />,
-    children: [
-      { id: 2, label: 'components', icon: <Folder size={16} /> },
-      { id: 3, label: 'App.tsx', icon: <File size={16} /> }
-    ]
-  }
-];
-
-<Tree nodes={nodes} />
-<Tree nodes={nodes} variant="glass" onNodeClick={(id) => console.log(id)} />
+<Tree variant="glass">
+  <TreeItem label="src" icon={<Folder size={16} />}>
+    <TreeItem label="components" icon={<Folder size={16} />}>
+      <TreeItem label="Button.tsx" icon={<File size={16} />} />
+      <TreeItem label="Card.tsx" icon={<File size={16} />} />
+    </TreeItem>
+    <TreeItem label="App.tsx" icon={<File size={16} />} />
+  </TreeItem>
+</Tree>;
 ```
 
 ### Image
@@ -428,51 +495,92 @@ import { Image } from "saha-ui";
 ### Carousel
 
 ```tsx
-import { Carousel } from "saha-ui";
-
-const images = [
-  { src: '/image1.jpg', alt: 'Image 1' },
-  { src: '/image2.jpg', alt: 'Image 2' },
-  { src: '/image3.jpg', alt: 'Image 3' }
-];
-
-<Carousel images={images} />
-<Carousel images={images} effect="fade" autoplay />
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "saha-ui";
+
+<Carousel autoplay autoplayInterval={3000}>
+  <CarouselContent>
+    <CarouselItem>
+      <img src="/image1.jpg" alt="Slide 1" />
+    </CarouselItem>
+    <CarouselItem>
+      <img src="/image2.jpg" alt="Slide 2" />
+    </CarouselItem>
+    <CarouselItem>
+      <img src="/image3.jpg" alt="Slide 3" />
+    </CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+
+// With variants
+<Carousel variant="glass" autoplay>
+  <CarouselContent>
+    {/* Your carousel items */}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
 ```
 
 ### Steps
 
 ```tsx
-import { Steps } from "saha-ui";
+import { Steps, StepsItem } from "saha-ui";
+import { User, CreditCard, Check } from "lucide-react";
 
-const steps = [
-  { id: 1, title: 'Account', description: 'Create your account' },
-  { id: 2, title: 'Profile', description: 'Fill in your details' },
-  { id: 3, title: 'Complete', description: 'You're all set!' }
-];
+<Steps defaultValue={2}>
+  <StepsItem value={1} title="Account" description="Create your account" />
+  <StepsItem value={2} title="Profile" description="Fill in your details" />
+  <StepsItem value={3} title="Complete" description="You're all set!" />
+</Steps>
+
+// With icons
+<Steps defaultValue={2} variant="glass">
+  <StepsItem value={1} title="Info" icon={<User className="w-5 h-5" />} />
+  <StepsItem value={2} title="Payment" icon={<CreditCard className="w-5 h-5" />} />
+  <StepsItem value={3} title="Done" icon={<Check className="w-5 h-5" />} />
+</Steps>
 
-<Steps steps={steps} current={1} />
-<Steps steps={steps} current={1} variant="glass" orientation="vertical" />
+// Vertical orientation
+<Steps orientation="vertical" defaultValue={1}>
+  <StepsItem value={1} title="Step 1" status="completed" />
+  <StepsItem value={2} title="Step 2" status="current" />
+  <StepsItem value={3} title="Step 3" status="pending" />
+</Steps>
 ```
 
 ### Table
 
 ```tsx
-import { Table } from "saha-ui";
-
-const columns = [
-  { id: 'name', header: 'Name', accessor: 'name', sortable: true },
-  { id: 'email', header: 'Email', accessor: 'email' },
-  { id: 'role', header: 'Role', accessor: 'role' }
-];
-
-const data = [
-  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin' },
-  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User' }
-];
-
-<Table columns={columns} data={data} sortable />
-<Table columns={columns} data={data} variant="glass" selectable />
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "saha-ui";
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Email</TableHead>
+      <TableHead>Role</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Alice Johnson</TableCell>
+      <TableCell>alice@example.com</TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Bob Smith</TableCell>
+      <TableCell>bob@example.com</TableCell>
+      <TableCell>Developer</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+
+// With variants
+<Table variant="bordered" hoverable>
+  {/* Table content */}
+</Table>
 ```
 
 ### Rating
@@ -535,6 +643,214 @@ import { PlayButton } from "saha-ui";
 />
 ```
 
+### FloatingActionButton
+
+```tsx
+import { FloatingActionButton } from "saha-ui";
+import { Plus } from "lucide-react";
+
+<FloatingActionButton
+  variant="primary"
+  position="bottom-right"
+  label="Create New"
+  onClick={() => console.log("FAB clicked!")}
+>
+  <Plus size={24} />
+</FloatingActionButton>;
+
+{
+  /* Extended FAB */
+}
+<FloatingActionButton
+  variant="accent"
+  position="bottom-left"
+  label="Add Item"
+  extended
+>
+  <Plus size={20} />
+</FloatingActionButton>;
+```
+
+### Radio
+
+```tsx
+import { Radio, RadioGroup } from "saha-ui";
+
+{
+  /* Basic Radio */
+}
+<Radio label="Option 1" value="option1" />;
+
+{
+  /* Radio with description */
+}
+<Radio
+  label="Pro Plan"
+  description="Advanced features for teams"
+  value="pro"
+/>;
+
+{
+  /* RadioGroup */
+}
+<RadioGroup
+  name="plan"
+  label="Choose Your Plan"
+  value={selectedPlan}
+  onChange={setSelectedPlan}
+  options={[
+    { label: "Free", value: "free" },
+    { label: "Pro", value: "pro" },
+    { label: "Enterprise", value: "enterprise" },
+  ]}
+/>;
+
+{
+  /* Advanced: Card Style with Icons & Badges */
+}
+<RadioGroup name="pricing" card>
+  <Radio
+    value="pro"
+    label="Professional"
+    description="For growing businesses"
+    icon={<Rocket />}
+    badge="Popular"
+    recommended
+  />
+</RadioGroup>;
+```
+
+### Switch
+
+```tsx
+import { Switch } from "saha-ui";
+
+{
+  /* Basic Switch */
+}
+<Switch label="Enable Notifications" />;
+
+{
+  /* With icons */
+}
+<Switch
+  label="Dark Mode"
+  description="Toggle dark theme"
+  onIcon={<Moon />}
+  offIcon={<Sun />}
+/>;
+
+{
+  /* With loading state */
+}
+<Switch label="Auto-save" loading />;
+```
+
+### Checkbox
+
+```tsx
+import { Checkbox } from "saha-ui";
+
+// Basic checkbox
+<Checkbox label="Accept terms" />
+
+// With description
+<Checkbox
+  label="Marketing emails"
+  description="Receive promotional content"
+/>
+
+// Indeterminate state
+<Checkbox indeterminate label="Select all" />
+
+// With custom icon
+<Checkbox icon={<Star />} label="Favorite" variant="warning" />
+
+// Card mode
+<Checkbox
+  card
+  label="Premium Plan"
+  description="$29/month"
+  icon={<Crown />}
+  badge="Popular"
+/>
+```
+
+### CheckboxGroup
+
+```tsx
+import { CheckboxGroup } from "saha-ui";
+
+// Basic group
+<CheckboxGroup
+  label="Select interests"
+  options={[
+    { value: "coding", label: "Coding" },
+    { value: "design", label: "Design" },
+    { value: "marketing", label: "Marketing" },
+  ]}
+/>
+
+// Horizontal layout
+<CheckboxGroup
+  direction="horizontal"
+  options={[
+    { value: "notifications", label: "Email Notifications" },
+    { value: "newsletter", label: "Newsletter" },
+  ]}
+/>
+
+// Card layout with icons
+<CheckboxGroup
+  card
+  label="Choose features"
+  options={[
+    { value: "basic", label: "Basic Support", icon: <Star />, badge: "Free" },
+    { value: "premium", label: "Premium", icon: <Crown />, badge: "$29/mo", recommended: true },
+  ]}
+/>
+```
+
+### Select
+
+```tsx
+import { Select } from "saha-ui";
+
+// Basic select
+<Select
+  label="Country"
+  placeholder="Select your country"
+  options={[
+    { value: "us", label: "United States" },
+    { value: "uk", label: "United Kingdom" },
+    { value: "ca", label: "Canada" },
+  ]}
+/>
+
+// Multi-select with search
+<Select
+  label="Skills"
+  placeholder="Select your skills"
+  options={[
+    { value: "react", label: "React", icon: <Code /> },
+    { value: "vue", label: "Vue.js", icon: <Code /> },
+  ]}
+  multiple
+  searchable
+  clearable
+/>
+
+// With avatars
+<Select
+  label="Assign to"
+  placeholder="Select team member"
+  options={[
+    { value: "alice", label: "Alice", avatar: "/avatar1.jpg" },
+    { value: "bob", label: "Bob", avatar: "/avatar2.jpg" },
+  ]}
+/>
+```
+
 ### Skeleton
 
 ```tsx
@@ -547,6 +863,53 @@ import { Skeleton } from "saha-ui";
 <Skeleton shape="circle" width="48px" height="48px" variant="pulse" />
 ```
 
+### Spinner
+
+```tsx
+import { Spinner } from "saha-ui";
+
+// Basic usage
+<Spinner />
+
+// With variants and sizes
+<Spinner variant="success" size="lg" label="Loading..." />
+
+// Different spinner types (15 types available!)
+<Spinner type="ring" variant="primary" size="lg" />
+<Spinner type="orbit" variant="gradient" size="xl" />
+<Spinner type="flower" variant="success" size="lg" />
+<Spinner type="infinity" variant="primary" size="2xl" />
+<Spinner type="wave" variant="info" size="md" />
+<Spinner type="spiral" variant="accent" size="lg" />
+
+// Fullscreen overlay
+<Spinner variant="gradient" animation="pulse" fullscreen />
+
+// With custom logo/icon
+<Spinner
+  variant="primary"
+  size="xl"
+  logo="/your-logo.png"
+  logoSize="md"
+  label="Loading..."
+/>
+
+// With custom component
+<Spinner
+  type="orbit"
+  variant="success"
+  size="xl"
+  logo={<YourCustomIcon />}
+  logoSize="lg"
+/>
+
+// In buttons
+<Button variant="primary" disabled>
+  <Spinner type="bounce" size="sm" variant="default" />
+  Loading...
+</Button>
+```
+
 ### Pagination
 
 ```tsx
@@ -564,33 +927,51 @@ import { Pagination } from "saha-ui";
 ```tsx
 import { DatePicker } from "saha-ui";
 
-<DatePicker value={date} onChange={(date) => setDate(date)} />
+// Single date picker
+<DatePicker
+  value={{ startDate: date, endDate: date }}
+  onChange={(value) => setDate(value)}
+  asSingle
+  placeholder="Select date"
+/>
 
-<DatePicker variant="primary" size="lg" placeholder="Pick a date" />
+// Date range picker
+<DatePicker
+  value={{ startDate: null, endDate: null }}
+  onChange={(value) => setRange(value)}
+  placeholder="Select date range"
+/>
 
-<DatePicker minDate={new Date()} maxDate={futureDate} />
+// With variants and restrictions
+<DatePicker
+  variant="primary"
+  minDate={new Date()}
+  maxDate={futureDate}
+  asSingle
+/>
 ```
 
 ### Tab
 
 ```tsx
-import { Tab } from "saha-ui";
-
-const tabs = [
-  { label: "Profile", value: "profile" },
-  { label: "Settings", value: "settings" },
-];
-
-<Tab tabs={tabs} value={activeTab} onChange={setActiveTab} />
-
-<Tab tabs={tabs} variant="primary" size="lg" fullWidth />
-
-<Tab
-  tabs={[
-    { label: "Home", value: "home", icon: <HomeIcon /> },
-    { label: "Messages", value: "messages", badge: "5" },
-  ]}
-/>
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "saha-ui";
+
+<Tabs defaultValue="profile">
+  <TabsList>
+    <TabsTrigger value="profile">Profile</TabsTrigger>
+    <TabsTrigger value="settings">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="profile">Profile content</TabsContent>
+  <TabsContent value="settings">Settings content</TabsContent>
+</Tabs>
+
+// With variants and sizes
+<Tabs defaultValue="home" variant="primary" size="lg">
+  <TabsList>
+    <TabsTrigger value="home">Home</TabsTrigger>
+    <TabsTrigger value="messages">Messages</TabsTrigger>
+  </TabsList>
+</Tabs>
 ```
 
 ### Input
@@ -1555,22 +1936,21 @@ Display multiple avatars with overlap and count indicator.
 **Sizes:** `xs` `sm` `md` `lg` `xl` `2xl`
 
 ```tsx
-import { AvatarGroup } from "saha-ui";
+import { AvatarGroup, Avatar } from "saha-ui";
 
 <AvatarGroup
-  avatars={[
-    { src: "/user1.jpg", alt: "User 1" },
-    { src: "/user2.jpg", alt: "User 2" },
-    { src: "/user3.jpg", alt: "User 3" },
-    { src: "/user4.jpg", alt: "User 4" },
-  ]}
   max={3}
   size="md"
   variant="stack"
   gap={false}
   withRing={false}
   showCount
-/>;
+>
+  <Avatar src="/user1.jpg" alt="User 1" />
+  <Avatar src="/user2.jpg" alt="User 2" />
+  <Avatar src="/user3.jpg" alt="User 3" />
+  <Avatar src="/user4.jpg" alt="User 4" />
+</AvatarGroup>;
 ```
 
 **Features:**
@@ -1593,62 +1973,63 @@ Contextual hints and information with smart positioning, multiple trigger types,
 **Triggers:** `hover` `click` `focus` `manual`
 
 ```tsx
-import { Tooltip } from "saha-ui";
+import { Tooltip, TooltipTrigger, TooltipContent } from "saha-ui";
 
 // Basic tooltip
-<Tooltip
-  content="This is helpful information"
-  position="top"
-  variant="glass"
->
-  <Button>Hover me</Button>
+<Tooltip position="top" variant="glass">
+  <TooltipTrigger>
+    <Button>Hover me</Button>
+  </TooltipTrigger>
+  <TooltipContent>This is helpful information</TooltipContent>
 </Tooltip>
 
 // Status tooltips
-<Tooltip content="All systems operational" variant="success">
-  <Badge variant="success">Active</Badge>
+<Tooltip variant="success">
+  <TooltipTrigger>
+    <Badge variant="success">Active</Badge>
+  </TooltipTrigger>
+  <TooltipContent>All systems operational</TooltipContent>
 </Tooltip>
 
-<Tooltip content="Warning: Check this!" variant="warning" position="right">
-  <span className="cursor-help">⚠</span>
+<Tooltip variant="warning" position="right">
+  <TooltipTrigger>
+    <span className="cursor-help">⚠</span>
+  </TooltipTrigger>
+  <TooltipContent>Warning: Check this!</TooltipContent>
 </Tooltip>
 
 // Interactive tooltip with click trigger
-<Tooltip
-  content={
+<Tooltip interactive trigger="click" variant="glass" maxWidth="200px">
+  <TooltipTrigger>
+    <Button>Click for Options</Button>
+  </TooltipTrigger>
+  <TooltipContent>
     <div className="space-y-2">
       <p className="font-semibold">Interactive Content</p>
       <Button size="sm">Click Me</Button>
     </div>
-  }
-  interactive={true}
-  trigger="click"
-  variant="glass"
-  maxWidth="200px"
->
-  <Button>Click for Options</Button>
+  </TooltipContent>
 </Tooltip>
 
 // Controlled tooltip
 const [open, setOpen] = useState(false);
-<Tooltip
-  content="Controlled tooltip"
-  open={open}
-  onOpenChange={setOpen}
-  trigger="manual"
->
-  <Button onClick={() => setOpen(!open)}>Toggle</Button>
+<Tooltip open={open} onOpenChange={setOpen} trigger="manual">
+  <TooltipTrigger>
+    <Button onClick={() => setOpen(!open)}>Toggle</Button>
+  </TooltipTrigger>
+  <TooltipContent>Controlled tooltip</TooltipContent>
 </Tooltip>
 
 // Help icon tooltips
 <div className="flex items-center gap-2">
   <span>Username</span>
-  <Tooltip
-    content="Enter your unique username (3-20 characters)"
-    variant="info"
-    size="sm"
-  >
-    <span className="cursor-help text-muted-foreground">ⓘ</span>
+  <Tooltip variant="info" size="sm">
+    <TooltipTrigger>
+      <span className="cursor-help text-muted-foreground">ⓘ</span>
+    </TooltipTrigger>
+    <TooltipContent>
+      Enter your unique username (3-20 characters)
+    </TooltipContent>
   </Tooltip>
 </div>
 
@@ -3260,6 +3641,366 @@ const [playing, setPlaying] = useState(false);
 
 ---
 
+### FloatingActionButton
+
+A modern floating action button (FAB) with beautiful visual effects, multiple positioning options, and extended label support.
+
+**Basic Usage:**
+
+```tsx
+import { FloatingActionButton } from "saha-ui";
+import { Plus, MessageCircle, Send } from "lucide-react";
+
+// Basic FAB (using children)
+<FloatingActionButton
+  variant="primary"
+  position="bottom-right"
+  label="Create New"
+>
+  <Plus size={24} />
+</FloatingActionButton>
+
+// Extended FAB
+<FloatingActionButton
+  variant="accent"
+  label="Send Message"
+  extended
+>
+  <Send size={20} />
+</FloatingActionButton>
+
+// Different positions
+<FloatingActionButton position="bottom-left" label="Messages">
+  <MessageCircle />
+</FloatingActionButton>
+
+<FloatingActionButton position="top-right" label="Add">
+  <Plus />
+</FloatingActionButton>
+
+// Sizes
+<FloatingActionButton size="sm">
+  <Plus size={16} />
+</FloatingActionButton>
+
+<FloatingActionButton size="lg">
+  <Plus size={24} />
+</FloatingActionButton>
+
+// Custom offset
+<FloatingActionButton offset={{ x: 20, y: 20 }} icon={<Plus />} />
+```
+
+**Features:**
+
+- 🎨 9 visual variants with gradients
+- 📍 4 screen positions + custom offset
+- 📐 4 size options
+- 🏷️ Label tooltip on hover
+- 📝 Extended mode with inline label
+- 💫 Scale & rotation animations
+- 🌈 Color-matched shadows
+- ♿ Fully accessible
+
+---
+
+### Radio
+
+Modern radio buttons with beautiful animations and a powerful RadioGroup component.
+
+**Basic Usage:**
+
+```tsx
+import { Radio, RadioGroup } from "saha-ui";
+
+// Basic Radio
+<Radio label="Option 1" value="option1" name="choice" />
+
+// Radio with description
+<Radio
+  label="Pro Plan"
+  description="Advanced features for growing businesses"
+  value="pro"
+  name="plan"
+/>
+
+// RadioGroup (Controlled)
+const [selected, setSelected] = useState("pro");
+
+<RadioGroup
+  name="plan"
+  label="Choose Your Plan"
+  value={selected}
+  onChange={setSelected}
+  options={[
+    { label: "Free", value: "free", description: "$0/month" },
+    { label: "Pro", value: "pro", description: "$29/month" },
+    { label: "Enterprise", value: "enterprise", description: "Custom" },
+  ]}
+/>
+```
+
+**Variants:**
+
+```tsx
+// Color variants
+<Radio variant="primary" label="Primary" />
+<Radio variant="secondary" label="Secondary" />
+<Radio variant="accent" label="Accent" />
+<Radio variant="success" label="Success" />
+<Radio variant="warning" label="Warning" />
+<Radio variant="error" label="Error" />
+```
+
+**Sizes:**
+
+```tsx
+<Radio size="sm" label="Small" />
+<Radio size="md" label="Medium" />
+<Radio size="lg" label="Large" />
+```
+
+**RadioGroup with Children:**
+
+```tsx
+<RadioGroup name="custom" value={value} onChange={setValue}>
+  <Radio label="Option 1" value="1" />
+  <Radio label="Option 2" value="2" />
+  <Radio label="Option 3" value="3" />
+</RadioGroup>
+```
+
+**Horizontal Layout:**
+
+```tsx
+<RadioGroup
+  name="color"
+  direction="horizontal"
+  value={color}
+  onChange={setColor}
+  options={[
+    { label: "Blue", value: "blue" },
+    { label: "Green", value: "green" },
+    { label: "Red", value: "red" },
+  ]}
+/>
+```
+
+**With Validation:**
+
+```tsx
+<RadioGroup
+  name="terms"
+  label="Terms and Conditions"
+  error="You must accept the terms to continue"
+  variant="error"
+>
+  <Radio label="I accept" value="accept" />
+  <Radio label="I decline" value="decline" />
+</RadioGroup>
+```
+
+**Advanced Features:**
+
+```tsx
+// Card Style Radio with Icons & Badges
+<RadioGroup name="pricing" card>
+  <Radio
+    value="free"
+    label="Free"
+    description="Perfect for getting started"
+    icon={<Package />}
+    badge="Free"
+  />
+  <Radio
+    value="pro"
+    label="Professional"
+    description="For growing businesses"
+    icon={<Rocket />}
+    badge="Popular"
+    recommended
+  />
+  <Radio
+    value="enterprise"
+    label="Enterprise"
+    description="For large organizations"
+    icon={<Crown />}
+    badge="Custom"
+  />
+</RadioGroup>
+
+// Standard Radio with Icons
+<Radio
+  value="cloud"
+  label="Cloud Storage"
+  description="Store files securely"
+  icon={<Cloud />}
+  badge="Recommended"
+/>
+
+// With Images (Card Mode)
+<Radio
+  card
+  value="plan-a"
+  label="Plan A"
+  image="/path/to/image.jpg"
+/>
+```
+
+**Features:**
+
+- 🎨 7 color variants
+- 📐 3 size options
+- 🎴 Card layout mode
+- 🎯 Icon support
+- 🏷️ Badge system
+- ⭐ Recommended flag
+- �️ Image support
+- �📝 Label descriptions
+- 🔄 Controlled & uncontrolled modes
+- 🗂️ RadioGroup component
+- 📍 Horizontal & vertical layouts
+- 🎭 Hover effects
+- ✅ Built-in validation
+- 💫 Smooth animations
+- 🌈 Color-matched shadows
+- ♿ Fully accessible
+
+See [ADVANCED_RADIO_FEATURES.md](./ADVANCED_RADIO_FEATURES.md) for detailed documentation.
+
+---
+
+### Switch
+
+Modern toggle switch with beautiful animations, icons, and loading states.
+
+**Basic Usage:**
+
+```tsx
+import { Switch } from "saha-ui";
+
+// Basic Switch
+<Switch label="Enable Notifications" />
+
+// With description
+<Switch
+  label="Dark Mode"
+  description="Toggle between light and dark themes"
+/>
+
+// Controlled Switch
+const [enabled, setEnabled] = useState(false);
+
+<Switch
+  label="Auto-save"
+  checked={enabled}
+  onCheckedChange={setEnabled}
+/>
+```
+
+**Variants:**
+
+```tsx
+// Color variants
+<Switch variant="primary" label="Primary" />
+<Switch variant="secondary" label="Secondary" />
+<Switch variant="accent" label="Accent" />
+<Switch variant="success" label="Success" />
+<Switch variant="warning" label="Warning" />
+<Switch variant="error" label="Error" />
+```
+
+**Sizes:**
+
+```tsx
+<Switch size="sm" label="Small" />
+<Switch size="md" label="Medium" />
+<Switch size="lg" label="Large" />
+```
+
+**With Icons:**
+
+```tsx
+<Switch
+  label="Dark Mode"
+  onIcon={<Moon className="w-3 h-3" />}
+  offIcon={<Sun className="w-3 h-3" />}
+/>
+
+<Switch
+  label="Wi-Fi"
+  onIcon={<Wifi className="w-3 h-3" />}
+  offIcon={<X className="w-3 h-3" />}
+/>
+```
+
+**Loading State:**
+
+```tsx
+<Switch label="Processing..." loading />;
+
+// Async toggle
+const handleAsyncToggle = async (checked: boolean) => {
+  setLoading(true);
+  await saveSettings(checked);
+  setLoading(false);
+};
+
+<Switch
+  label="Auto-save"
+  checked={autoSave}
+  onCheckedChange={handleAsyncToggle}
+  loading={loading}
+/>;
+```
+
+**With Badges:**
+
+```tsx
+<Switch label="Beta Features" badge="Beta" />
+<Switch label="Premium Mode" badge="Pro" variant="accent" />
+```
+
+**Label Position:**
+
+```tsx
+<Switch label="Label on Right" labelPosition="right" />
+<Switch label="Label on Left" labelPosition="left" />
+```
+
+**With Validation:**
+
+```tsx
+<Switch
+  label="Accept Terms"
+  error="You must accept the terms to continue"
+  variant="error"
+/>
+
+<Switch
+  label="Newsletter"
+  helperText="You can unsubscribe at any time"
+/>
+```
+
+**Features:**
+
+- 🎨 7 color variants
+- 📐 3 size options
+- 🎯 Icon support (on/off states)
+- ⏳ Loading state
+- 🏷️ Badge system
+- 📝 Label descriptions
+- 🔄 Controlled & uncontrolled modes
+- 📍 Label position (left/right)
+- ✅ Built-in validation
+- 💫 Smooth animations
+- 🌈 Color-matched shadows
+- ♿ Fully accessible
+- ⌨️ Keyboard navigation
+
+---
+
 ### Skeleton
 
 Loading placeholder component with smooth animations and multiple visual styles.
@@ -3379,6 +4120,267 @@ import { Skeleton } from "saha-ui";
 
 ---
 
+### Spinner
+
+Modern loading spinner with multiple variants, animations, and fullscreen overlay support.
+
+**Basic Usage:**
+
+```tsx
+import { Spinner } from "saha-ui";
+
+// Basic spinner
+<Spinner />
+
+// With label
+<Spinner variant="primary" label="Loading..." />
+
+// Custom size and variant
+<Spinner variant="success" size="lg" label="Processing..." />
+```
+
+**Variants:**
+
+```tsx
+// 10 beautiful variants
+<Spinner variant="default" />
+<Spinner variant="primary" />
+<Spinner variant="secondary" />
+<Spinner variant="accent" />
+<Spinner variant="info" />
+<Spinner variant="success" />
+<Spinner variant="warning" />
+<Spinner variant="error" />
+<Spinner variant="glass" />
+<Spinner variant="gradient" />
+```
+
+**Sizes:**
+
+```tsx
+<Spinner size="xs" />    // 16px
+<Spinner size="sm" />    // 24px
+<Spinner size="md" />    // 40px (default)
+<Spinner size="lg" />    // 64px
+<Spinner size="xl" />    // 96px
+<Spinner size="2xl" />   // 128px
+```
+
+**Spinner Types (15 unique designs!):**
+
+```tsx
+// Classic Types
+<Spinner type="ring" />      // Classic circular border (default)
+<Spinner type="dots" />      // Rotating dots in circle
+<Spinner type="dashed" />    // Dashed ring border
+<Spinner type="bars" />      // Rotating bars/lines
+<Spinner type="dotRing" />   // Complete circle of dots
+
+// Creative & Unique Types ✨
+<Spinner type="orbit" />     // Multi-orbit planetary system
+<Spinner type="pulse" />     // Expanding concentric circles
+<Spinner type="square" />    // Rotating square corners
+<Spinner type="triangle" />  // Triangular rotating pattern
+<Spinner type="wave" />      // Sequential bouncing bars
+<Spinner type="spiral" />    // Expanding spiral pattern
+<Spinner type="infinity" />  // Infinity symbol (∞) path
+<Spinner type="flower" />    // Flower petal pattern
+<Spinner type="grid" />      // 3×3 pulsing grid
+<Spinner type="bounce" />    // Classic bouncing dots
+```
+
+**Animation Types:**
+
+```tsx
+<Spinner animation="spin" />    // Continuous rotation (default)
+<Spinner animation="pulse" />   // Scale pulsing
+<Spinner animation="bounce" />  // Bouncing effect
+<Spinner animation="ping" />    // Ping ripple effect
+```
+
+**Thickness:**
+
+```tsx
+<Spinner thickness="thin" />     // 2px border
+<Spinner thickness="default" />  // 4px border
+<Spinner thickness="thick" />    // 6px border
+```
+
+**Speed Control:**
+
+```tsx
+<Spinner speed={0.5} />  // Slower
+<Spinner speed={1} />    // Normal (default)
+<Spinner speed={2} />    // Faster
+<Spinner speed={3} />    // Very fast
+```
+
+**Fullscreen Overlay:**
+
+```tsx
+// Full screen loading overlay
+<Spinner
+  fullscreen
+  variant="gradient"
+  size="2xl"
+  label="Loading application..."
+/>
+```
+
+**In Buttons:**
+
+```tsx
+// Disabled button with loading spinner
+<Button variant="primary" disabled>
+  <Spinner size="sm" variant="default" />
+  Loading...
+</Button>
+
+<Button variant="success" disabled>
+  <Spinner size="sm" variant="default" />
+  Saving...
+</Button>
+```
+
+**In Cards:**
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Loading Data</CardTitle>
+  </CardHeader>
+  <CardContent className="flex items-center justify-center py-8">
+    <Spinner variant="primary" label="Fetching data..." />
+  </CardContent>
+</Card>
+```
+
+**With Custom Logo/Icon:**
+
+```tsx
+// Image URL
+<Spinner
+  variant="primary"
+  size="xl"
+  logo="/your-logo.png"
+  logoSize="md"
+  label="Loading..."
+/>
+
+// Custom React component
+<Spinner
+  variant="success"
+  size="xl"
+  logo={
+    <div className="w-full h-full flex items-center justify-center bg-success/10 rounded-full">
+      <span className="text-2xl font-bold text-success">S</span>
+    </div>
+  }
+  logoSize="lg"
+/>
+
+// SVG Icon
+<Spinner
+  variant="gradient"
+  size="2xl"
+  logo={<YourSvgIcon />}
+  logoSize="md"
+  label="Building..."
+/>
+```
+
+**Logo Sizes:**
+
+```tsx
+<Spinner logo="/logo.png" logoSize="xs" />   // 25% of spinner size
+<Spinner logo="/logo.png" logoSize="sm" />   // 35% of spinner size
+<Spinner logo="/logo.png" logoSize="md" />   // 50% of spinner size (default)
+<Spinner logo="/logo.png" logoSize="lg" />   // 65% of spinner size
+<Spinner logo="/logo.png" logoSize="xl" />   // 80% of spinner size
+```
+
+**Real-world Examples:**
+
+```tsx
+// Form submission
+<Button type="submit" disabled={isSubmitting}>
+  {isSubmitting && <Spinner size="sm" variant="default" />}
+  {isSubmitting ? "Submitting..." : "Submit"}
+</Button>;
+
+// Brand loading with logo
+<Spinner
+  fullscreen
+  variant="gradient"
+  size="2xl"
+  logo="/brand-logo.png"
+  logoSize="lg"
+  label="Loading your app..."
+/>;
+
+// Page loading
+{
+  isLoading && (
+    <Spinner
+      fullscreen
+      variant="primary"
+      size="xl"
+      label="Loading content..."
+    />
+  );
+}
+
+// Inline loading
+<div className="flex items-center gap-3">
+  <Spinner size="sm" variant="info" />
+  <span>Syncing data...</span>
+</div>;
+
+// Conditional rendering
+{
+  isFetching ? (
+    <Spinner variant="success" label="Loading items..." />
+  ) : (
+    <ItemsList items={items} />
+  );
+}
+```
+
+**Variants:** `default` `primary` `secondary` `accent` `info` `success` `warning` `error` `glass` `gradient`  
+**Sizes:** `xs` `sm` `md` `lg` `xl` `2xl`  
+**Types:** `ring` `dots` `dashed` `bars` `dotRing` `orbit` `pulse` `square` `triangle` `wave` `spiral` `infinity` `flower` `grid` `bounce`  
+**Animations:** `spin` `pulse` `bounce` `ping`  
+**Thickness:** `thin` `default` `thick`  
+**Logo Sizes:** `xs` `sm` `md` `lg` `xl`
+
+**Features:**
+
+- 🎨 10 stunning variants with shadows and effects
+- 🎯 **15 unique spinner types** - from classic to creative designs
+- 📏 6 size options from xs (16px) to 2xl (128px)
+- 🎭 4 different animation types
+- ⚡ Customizable animation speed (0.5x to 3x+)
+- 🎯 Optional loading labels
+- 🖼️ Fullscreen overlay mode with backdrop
+- 🔲 3 thickness options
+- 🌈 Gradient variant with multi-color effects
+- 💎 Glass variant with backdrop blur
+- 🖼️ **Custom logo/icon support** (image URL or React component)
+- 📐 5 logo size options for perfect fit
+- 🎨 Logo positioned in center with spinner animation around it
+- 🌌 **Creative types**: Orbit, Spiral, Infinity, Flower, Wave patterns
+- 🔄 All 15 types work with all 10 variants (150 combinations!)
+- ⚡ Mathematical precision for perfect centering
+- 🎪 **Unique designs**: Grid, Triangle, Pulse, Square, Bounce
+- 🌓 Theme-aware styling
+- ♿ Accessibility with proper ARIA attributes
+- 💫 Smooth CSS animations (GPU-accelerated)
+- 📱 Responsive and flexible
+- 🎛️ Works great in buttons, cards, and overlays
+- 🎨 **900+ possible configurations** (types × variants × sizes)
+
+---
+
 ### Pagination
 
 Comprehensive pagination component for navigating through large datasets.
@@ -4044,24 +5046,24 @@ import { Mail, Lock, Search, User } from "lucide-react";
 
 **Props:**
 
-| Prop                  | Type          | Default     | Description                              |
-| --------------------- | ------------- | ----------- | ---------------------------------------- |
-| `variant`             | `InputVariant`| `'outline'` | Visual variant                           |
-| `size`                | `InputSize`   | `'md'`      | Size variant                             |
-| `type`                | `InputType`   | `'text'`    | HTML input type (excludes file)          |
-| `label`               | `string`      | `undefined` | Label text for the input                 |
-| `helperText`          | `string`      | `undefined` | Helper text below input                  |
-| `error`               | `string`      | `undefined` | Error message (overrides helperText)     |
-| `startIcon`           | `ReactNode`   | `undefined` | Icon on the left side                    |
-| `endIcon`             | `ReactNode`   | `undefined` | Icon on the right side                   |
-| `showCounter`         | `boolean`     | `false`     | Show character counter (needs maxLength) |
-| `required`            | `boolean`     | `false`     | Mark field as required                   |
-| `fullWidth`           | `boolean`     | `false`     | Full width styling                       |
-| `containerClassName`  | `string`      | `undefined` | Custom className for container           |
-| `labelClassName`      | `string`      | `undefined` | Custom className for label               |
-| `disabled`            | `boolean`     | `false`     | Disable the input                        |
-| `maxLength`           | `number`      | `undefined` | Maximum character length                 |
-| `...props`            | `InputHTMLAttributes` | - | All standard input attributes            |
+| Prop                 | Type                  | Default     | Description                              |
+| -------------------- | --------------------- | ----------- | ---------------------------------------- |
+| `variant`            | `InputVariant`        | `'outline'` | Visual variant                           |
+| `size`               | `InputSize`           | `'md'`      | Size variant                             |
+| `type`               | `InputType`           | `'text'`    | HTML input type (excludes file)          |
+| `label`              | `string`              | `undefined` | Label text for the input                 |
+| `helperText`         | `string`              | `undefined` | Helper text below input                  |
+| `error`              | `string`              | `undefined` | Error message (overrides helperText)     |
+| `startIcon`          | `ReactNode`           | `undefined` | Icon on the left side                    |
+| `endIcon`            | `ReactNode`           | `undefined` | Icon on the right side                   |
+| `showCounter`        | `boolean`             | `false`     | Show character counter (needs maxLength) |
+| `required`           | `boolean`             | `false`     | Mark field as required                   |
+| `fullWidth`          | `boolean`             | `false`     | Full width styling                       |
+| `containerClassName` | `string`              | `undefined` | Custom className for container           |
+| `labelClassName`     | `string`              | `undefined` | Custom className for label               |
+| `disabled`           | `boolean`             | `false`     | Disable the input                        |
+| `maxLength`          | `number`              | `undefined` | Maximum character length                 |
+| `...props`           | `InputHTMLAttributes` | -           | All standard input attributes            |
 
 **Features:**