@reeverdev/ui-cli 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,100 @@
+# @reeverdev/ui-cli
+
+> CLI tool for Reever UI component library - Add components to your project shadcn-style
+
+[![npm version](https://img.shields.io/npm/v/@reeverdev/ui-cli.svg)](https://www.npmjs.com/package/@reeverdev/ui-cli)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Installation
+
+```bash
+npm install -g @reeverdev/ui-cli
+# or use with npx
+npx @reeverdev/ui-cli <command>
+```
+
+---
+
+## Commands
+
+### Initialize Project
+
+```bash
+npx @reeverdev/ui-cli init
+```
+
+Sets up Reever UI in your project:
+- Creates `reever.config.json` configuration file
+- Configures component output directory
+- Sets up Tailwind CSS integration
+
+### Add Components
+
+```bash
+# Add specific components
+npx @reeverdev/ui-cli add button dialog card
+
+# Add all components
+npx @reeverdev/ui-cli add --all
+```
+
+### List Components
+
+```bash
+npx @reeverdev/ui-cli list
+```
+
+Shows all available components in the registry.
+
+### Show Differences
+
+```bash
+npx @reeverdev/ui-cli diff
+```
+
+Compares local components with the registry and shows differences.
+
+---
+
+## Configuration
+
+After running `init`, a `reever.config.json` file is created:
+
+```json
+{
+  "componentDir": "./src/components/ui",
+  "tailwind": {
+    "config": "./tailwind.config.ts",
+    "css": "./src/app/globals.css"
+  }
+}
+```
+
+---
+
+## Available Components
+
+| Category | Components |
+|----------|------------|
+| **Core** | Button, Input, Textarea, Label, Badge, Alert, Separator, Skeleton, Spinner |
+| **Layout** | Card, Avatar, Accordion, Collapsible, Drawer, Table, Sidebar |
+| **Form** | Checkbox, Switch, Select, Radio Group, Toggle, Slider, Rating |
+| **Navigation** | Tabs, Breadcrumb, Navigation Menu, Pagination, Command |
+| **Overlay** | Dialog, Alert Dialog, Dropdown Menu, Context Menu, Tooltip, Popover, Sheet |
+| **Feedback** | Progress, Toast |
+| **Date & Time** | Calendar, Date Picker |
+
+---
+
+## Related
+
+- [@reeverdev/ui](https://www.npmjs.com/package/@reeverdev/ui) - Main component library
+- [GitHub Repository](https://github.com/reeverdev/ui)
+
+---
+
+## License
+
+MIT

package/dist/index.js

@@ -21,8 +21,10 @@ var require_package = __commonJS({
       homepage: "https://reever.dev",
       workspaces: [
         "packages/*",
-        "apps/*",
-        "tooling/*"
+        "docs/*",
+        "tooling/*",
+        "integrations/*",
+        "examples/*"
       ],
       scripts: {
         build: "turbo build",
@@ -43,10 +45,10 @@ var require_package = __commonJS({
         turbo: "^2.5.4",
         typescript: "^5.9.3"
       },
-      packageManager: "pnpm@9.15.0",
       engines: {
         node: ">=18.0.0"
-      }
+      },
+      packageManager: "npm@10.8.2"
     };
   }
 });
@@ -172,200 +174,735 @@ import prompts2 from "prompts";
 
 // registry.ts
 var CATEGORIES = [
-  "Core",
   "Form",
-  "Navigation",
   "Data Display",
+  "Navigation",
   "Overlay",
   "Feedback",
   "Layout",
-  "Animation",
-  "Mobile"
+  "Motion",
+  "Utility",
+  "Rich"
 ];
 var COMPONENTS = {
+  // ============ FORM COMPONENTS ============
   button: {
     name: "Button",
-    description: "Primary action button with variants",
-    category: "Core",
-    code: `// Button component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Button, buttonVariants } from "reever-ui";
-`,
-    dependencies: ["class-variance-authority"]
+    description: "Interactive button with variants, sizes, colors, and loading state",
+    category: "Form",
+    code: `import { Button } from "@reeverdev/ui";
+
+// Usage
+<Button variant="solid" color="primary">Click me</Button>
+<Button variant="bordered" isLoading>Loading...</Button>
+<Button startContent={<Icon />}>With Icon</Button>
+`
   },
   input: {
     name: "Input",
-    description: "Text input field",
-    category: "Core",
-    code: `// Input component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Input } from "reever-ui";
+    description: "Text input field with validation and adornments",
+    category: "Form",
+    code: `import { Input } from "@reeverdev/ui";
+
+// Usage
+<Input placeholder="Enter text..." />
+<Input type="email" isRequired isInvalid={hasError} />
+<Input startContent={<SearchIcon />} />
 `
   },
-  card: {
-    name: "Card",
-    description: "Container card component",
-    category: "Core",
-    code: `// Card component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "reever-ui";
+  textarea: {
+    name: "Textarea",
+    description: "Multi-line text input with auto-resize",
+    category: "Form",
+    code: `import { Textarea } from "@reeverdev/ui";
+
+// Usage
+<Textarea placeholder="Enter description..." rows={4} />
+<Textarea autoResize minRows={2} maxRows={10} />
 `
   },
-  dialog: {
-    name: "Dialog",
-    description: "Modal dialog",
-    category: "Overlay",
-    code: `// Dialog component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-dialog"]
+  checkbox: {
+    name: "Checkbox",
+    description: "Checkbox input with indeterminate state",
+    category: "Form",
+    code: `import { Checkbox } from "@reeverdev/ui";
+
+// Usage
+<Checkbox checked={checked} onCheckedChange={setChecked}>
+  Accept terms
+</Checkbox>
+<Checkbox indeterminate>Select all</Checkbox>
+`
+  },
+  "radio-group": {
+    name: "RadioGroup",
+    description: "Radio button group for single selection",
+    category: "Form",
+    code: `import { RadioGroup, RadioGroupItem } from "@reeverdev/ui";
+
+// Usage
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroupItem value="option1">Option 1</RadioGroupItem>
+  <RadioGroupItem value="option2">Option 2</RadioGroupItem>
+</RadioGroup>
+`
   },
   select: {
     name: "Select",
-    description: "Dropdown select",
+    description: "Dropdown select with search support",
     category: "Form",
-    code: `// Select component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-select"]
+    code: `import { Select, SelectItem } from "@reeverdev/ui";
+
+// Usage
+<Select value={value} onValueChange={setValue} placeholder="Select...">
+  <SelectItem value="1">Option 1</SelectItem>
+  <SelectItem value="2">Option 2</SelectItem>
+</Select>
+`
   },
-  tabs: {
-    name: "Tabs",
-    description: "Tabbed content",
-    category: "Navigation",
-    code: `// Tabs component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-tabs"]
+  switch: {
+    name: "Switch",
+    description: "Toggle switch for boolean values",
+    category: "Form",
+    code: `import { Switch } from "@reeverdev/ui";
+
+// Usage
+<Switch checked={enabled} onCheckedChange={setEnabled} />
+<Switch color="success">Enable notifications</Switch>
+`
   },
-  toast: {
-    name: "Toast",
-    description: "Toast notifications",
-    category: "Feedback",
-    code: `// Toast component - run 'npm install reever-ui' and import from 'reever-ui'
-export { toast, Toaster } from "reever-ui";
-`,
-    dependencies: ["sonner"]
+  slider: {
+    name: "Slider",
+    description: "Range slider for numeric values",
+    category: "Form",
+    code: `import { Slider } from "@reeverdev/ui";
+
+// Usage
+<Slider value={[50]} onValueChange={setValue} max={100} />
+<Slider value={[20, 80]} onValueChange={setRange} /> // Range
+`
   },
-  table: {
-    name: "Table",
-    description: "Data table",
-    category: "Data Display",
-    code: `// Table component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "reever-ui";
+  "date-picker": {
+    name: "DatePicker",
+    description: "Calendar-based date selection",
+    category: "Form",
+    code: `import { DatePicker } from "@reeverdev/ui";
+
+// Usage
+<DatePicker value={date} onChange={setDate} />
+<DatePicker minDate={new Date()} placeholder="Select date" />
+`
+  },
+  "color-picker": {
+    name: "ColorPicker",
+    description: "Color selection with HEX, RGB, HSL formats",
+    category: "Form",
+    code: `import { ColorPicker } from "@reeverdev/ui";
+
+// Usage
+<ColorPicker value={color} onChange={setColor} />
+<ColorPicker format="rgb" showAlpha />
+`
+  },
+  "file-upload": {
+    name: "FileUpload",
+    description: "File upload with drag-and-drop",
+    category: "Form",
+    code: `import { FileUpload } from "@reeverdev/ui";
+
+// Usage
+<FileUpload accept="image/*" onUpload={handleUpload} />
+<FileUpload multiple maxSize={5 * 1024 * 1024} />
+`
+  },
+  "input-otp": {
+    name: "InputOTP",
+    description: "One-time password input",
+    category: "Form",
+    code: `import { InputOTP } from "@reeverdev/ui";
+
+// Usage
+<InputOTP length={6} value={otp} onChange={setOtp} />
 `
   },
-  form: {
-    name: "Form",
-    description: "Form wrapper with validation",
+  "password-input": {
+    name: "PasswordInput",
+    description: "Password input with show/hide toggle",
     category: "Form",
-    code: `// Form component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "reever-ui";
+    code: `import { PasswordInput } from "@reeverdev/ui";
+
+// Usage
+<PasswordInput value={password} onChange={setPassword} />
+<PasswordInput showStrength />
 `
   },
+  "signature-pad": {
+    name: "SignaturePad",
+    description: "Canvas-based signature input with export",
+    category: "Form",
+    code: `import { SignaturePad } from "@reeverdev/ui";
+
+// Usage
+<SignaturePad showControls onExport={(dataUrl) => console.log(dataUrl)} />
+<SignaturePad strokeColor="#000" strokeWidth={2} />
+`
+  },
+  // ============ DATA DISPLAY ============
   avatar: {
     name: "Avatar",
-    description: "User avatar",
+    description: "User avatar with fallback",
     category: "Data Display",
-    code: `// Avatar component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Avatar, AvatarImage, AvatarFallback } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-avatar"]
+    code: `import { Avatar, AvatarGroup } from "@reeverdev/ui";
+
+// Usage
+<Avatar src="/avatar.jpg" fallback="JD" size="md" />
+<AvatarGroup max={3}>
+  <Avatar src="/1.jpg" />
+  <Avatar src="/2.jpg" />
+</AvatarGroup>
+`
   },
   badge: {
     name: "Badge",
-    description: "Status badge",
-    category: "Core",
-    code: `// Badge component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Badge, badgeVariants } from "reever-ui";
-`,
-    dependencies: ["class-variance-authority"]
+    description: "Status badge indicator",
+    category: "Data Display",
+    code: `import { Badge } from "@reeverdev/ui";
+
+// Usage
+<Badge color="success">Active</Badge>
+<Badge variant="bordered" color="warning">Pending</Badge>
+`
   },
-  checkbox: {
-    name: "Checkbox",
-    description: "Checkbox input",
-    category: "Form",
-    code: `// Checkbox component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Checkbox } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-checkbox"]
+  chip: {
+    name: "Chip",
+    description: "Compact element for tags and filters",
+    category: "Data Display",
+    code: `import { Chip } from "@reeverdev/ui";
+
+// Usage
+<Chip color="primary">React</Chip>
+<Chip onClose={handleClose} isCloseable>Removable</Chip>
+`
   },
-  dropdown: {
-    name: "DropdownMenu",
-    description: "Dropdown menu",
+  card: {
+    name: "Card",
+    description: "Container card with header, body, footer",
+    category: "Data Display",
+    code: `import { Card, CardHeader, CardBody, CardFooter } from "@reeverdev/ui";
+
+// Usage
+<Card>
+  <CardHeader>Title</CardHeader>
+  <CardBody>Content goes here</CardBody>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+`
+  },
+  table: {
+    name: "Table",
+    description: "Data table with sorting and selection",
+    category: "Data Display",
+    code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@reeverdev/ui";
+
+// Usage
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Email</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+`
+  },
+  calendar: {
+    name: "Calendar",
+    description: "Calendar display for date selection",
+    category: "Data Display",
+    code: `import { Calendar } from "@reeverdev/ui";
+
+// Usage
+<Calendar value={date} onChange={setDate} />
+<Calendar minDate={new Date()} maxDate={maxDate} />
+`
+  },
+  "heatmap-calendar": {
+    name: "HeatmapCalendar",
+    description: "GitHub-style contribution heatmap",
+    category: "Data Display",
+    code: `import { HeatmapCalendar } from "@reeverdev/ui";
+
+// Usage
+<HeatmapCalendar data={contributions} />
+`
+  },
+  timeline: {
+    name: "Timeline",
+    description: "Vertical timeline for events",
+    category: "Data Display",
+    code: `import { Timeline, TimelineItem } from "@reeverdev/ui";
+
+// Usage
+<Timeline>
+  <TimelineItem>Event 1</TimelineItem>
+  <TimelineItem>Event 2</TimelineItem>
+</Timeline>
+`
+  },
+  rating: {
+    name: "Rating",
+    description: "Star rating input",
+    category: "Data Display",
+    code: `import { Rating } from "@reeverdev/ui";
+
+// Usage
+<Rating value={4} onChange={setRating} max={5} />
+<Rating isReadOnly value={4.5} />
+`
+  },
+  code: {
+    name: "Code",
+    description: "Syntax highlighted code display",
+    category: "Data Display",
+    code: `import { Code, Snippet } from "@reeverdev/ui";
+
+// Usage
+<Code language="typescript">const x = 1;</Code>
+<Snippet>npm install @reeverdev/ui</Snippet>
+`
+  },
+  user: {
+    name: "User",
+    description: "User display with avatar and info",
+    category: "Data Display",
+    code: `import { User } from "@reeverdev/ui";
+
+// Usage
+<User name="John Doe" description="Developer" avatarSrc="/avatar.jpg" />
+`
+  },
+  // ============ NAVIGATION ============
+  navbar: {
+    name: "Navbar",
+    description: "Responsive navigation bar",
+    category: "Navigation",
+    code: `import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@reeverdev/ui";
+
+// Usage
+<Navbar>
+  <NavbarBrand>Logo</NavbarBrand>
+  <NavbarContent>
+    <NavbarItem>Home</NavbarItem>
+    <NavbarItem>About</NavbarItem>
+  </NavbarContent>
+</Navbar>
+`
+  },
+  sidebar: {
+    name: "Sidebar",
+    description: "Collapsible sidebar navigation",
+    category: "Navigation",
+    code: `import { Sidebar, SidebarItem } from "@reeverdev/ui";
+
+// Usage
+<Sidebar>
+  <SidebarItem icon={<Home />}>Dashboard</SidebarItem>
+  <SidebarItem icon={<Settings />}>Settings</SidebarItem>
+</Sidebar>
+`
+  },
+  breadcrumb: {
+    name: "Breadcrumb",
+    description: "Breadcrumb navigation trail",
+    category: "Navigation",
+    code: `import { Breadcrumb, BreadcrumbItem } from "@reeverdev/ui";
+
+// Usage
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
+  <BreadcrumbItem>Current</BreadcrumbItem>
+</Breadcrumb>
+`
+  },
+  pagination: {
+    name: "Pagination",
+    description: "Page navigation with numbers",
+    category: "Navigation",
+    code: `import { Pagination } from "@reeverdev/ui";
+
+// Usage
+<Pagination total={100} page={page} onChange={setPage} />
+<Pagination total={50} siblings={2} />
+`
+  },
+  tabs: {
+    name: "Tabs",
+    description: "Tabbed interface for views",
+    category: "Navigation",
+    code: `import { Tabs, TabsList, TabsTrigger, TabsContent } from "@reeverdev/ui";
+
+// Usage
+<Tabs value={tab} onValueChange={setTab}>
+  <TabsList>
+    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content 1</TabsContent>
+  <TabsContent value="tab2">Content 2</TabsContent>
+</Tabs>
+`
+  },
+  steps: {
+    name: "Steps",
+    description: "Step indicator for processes",
+    category: "Navigation",
+    code: `import { Steps, Step } from "@reeverdev/ui";
+
+// Usage
+<Steps current={1}>
+  <Step title="Step 1" description="First step" />
+  <Step title="Step 2" description="Second step" />
+  <Step title="Step 3" description="Final step" />
+</Steps>
+`
+  },
+  // ============ OVERLAY ============
+  modal: {
+    name: "Modal",
+    description: "Modal dialog with customizable size",
     category: "Overlay",
-    code: `// DropdownMenu component - run 'npm install reever-ui' and import from 'reever-ui'
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-dropdown-menu"]
+    code: `import { Modal, ModalHeader, ModalBody, ModalFooter, ModalTitle } from "@reeverdev/ui";
+
+// Usage
+<Modal open={open} onOpenChange={setOpen}>
+  <ModalHeader>
+    <ModalTitle>Title</ModalTitle>
+  </ModalHeader>
+  <ModalBody>Content</ModalBody>
+  <ModalFooter>
+    <Button>Close</Button>
+  </ModalFooter>
+</Modal>
+`
+  },
+  "confirm-dialog": {
+    name: "ConfirmDialog",
+    description: "Confirmation dialog for destructive actions",
+    category: "Overlay",
+    code: `import { ConfirmDialog, Button } from "@reeverdev/ui";
+
+// Usage
+<ConfirmDialog
+  trigger={<Button color="danger">Delete</Button>}
+  title="Delete Item"
+  description="This action cannot be undone."
+  onConfirm={() => handleDelete()}
+/>
+
+// Variants: danger, warning, info
+<ConfirmDialog variant="warning" title="Archive?" confirmText="Archive" />
+`
+  },
+  drawer: {
+    name: "Drawer",
+    description: "Slide-out panel from any edge",
+    category: "Overlay",
+    code: `import { Drawer, DrawerContent } from "@reeverdev/ui";
+
+// Usage
+<Drawer open={open} onOpenChange={setOpen} side="right">
+  <DrawerContent>
+    <h2>Drawer Content</h2>
+  </DrawerContent>
+</Drawer>
+`
   },
   popover: {
     name: "Popover",
-    description: "Popover overlay",
+    description: "Floating content panel",
     category: "Overlay",
-    code: `// Popover component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Popover, PopoverTrigger, PopoverContent } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-popover"]
+    code: `import { Popover, PopoverTrigger, PopoverContent } from "@reeverdev/ui";
+
+// Usage
+<Popover>
+  <PopoverTrigger>
+    <Button>Open</Button>
+  </PopoverTrigger>
+  <PopoverContent>
+    Popover content here
+  </PopoverContent>
+</Popover>
+`
   },
   tooltip: {
     name: "Tooltip",
-    description: "Tooltip overlay",
+    description: "Informational popup on hover",
     category: "Overlay",
-    code: `// Tooltip component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-tooltip"]
+    code: `import { Tooltip, TooltipTrigger, TooltipContent } from "@reeverdev/ui";
+
+// Usage
+<Tooltip>
+  <TooltipTrigger>
+    <Button>Hover me</Button>
+  </TooltipTrigger>
+  <TooltipContent>Tooltip text</TooltipContent>
+</Tooltip>
+`
   },
-  slider: {
-    name: "Slider",
-    description: "Range slider",
-    category: "Form",
-    code: `// Slider component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Slider } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-slider"]
+  dropdown: {
+    name: "Dropdown",
+    description: "Dropdown menu with items",
+    category: "Overlay",
+    code: `import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@reeverdev/ui";
+
+// Usage
+<Dropdown>
+  <DropdownTrigger>
+    <Button>Menu</Button>
+  </DropdownTrigger>
+  <DropdownContent>
+    <DropdownItem>Edit</DropdownItem>
+    <DropdownItem>Delete</DropdownItem>
+  </DropdownContent>
+</Dropdown>
+`
   },
-  switch: {
-    name: "Switch",
-    description: "Toggle switch",
-    category: "Form",
-    code: `// Switch component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Switch } from "reever-ui";
+  "context-menu": {
+    name: "ContextMenu",
+    description: "Right-click context menu",
+    category: "Overlay",
+    code: `import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@reeverdev/ui";
+
+// Usage
+<ContextMenu>
+  <ContextMenuTrigger>
+    <div>Right click here</div>
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Copy</ContextMenuItem>
+    <ContextMenuItem>Paste</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+`
+  },
+  command: {
+    name: "Command",
+    description: "Command palette with search",
+    category: "Overlay",
+    code: `import { Command, CommandInput, CommandList, CommandItem } from "@reeverdev/ui";
+
+// Usage
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandList>
+    <CommandItem>Dashboard</CommandItem>
+    <CommandItem>Settings</CommandItem>
+  </CommandList>
+</Command>
+`
+  },
+  // ============ FEEDBACK ============
+  alert: {
+    name: "Alert",
+    description: "Static alert message",
+    category: "Feedback",
+    code: `import { Alert, AlertTitle, AlertDescription } from "@reeverdev/ui";
+
+// Usage
+<Alert variant="success">
+  <AlertTitle>Success!</AlertTitle>
+  <AlertDescription>Operation completed.</AlertDescription>
+</Alert>
+`
+  },
+  toast: {
+    name: "Toast",
+    description: "Temporary notification",
+    category: "Feedback",
+    code: `import { toast, Toaster } from "@reeverdev/ui";
+
+// Add Toaster to your app root
+<Toaster />
+
+// Usage
+toast.success("Saved successfully!");
+toast.error("Something went wrong");
+toast.info("New update available");
 `,
-    dependencies: ["@radix-ui/react-switch"]
+    dependencies: ["sonner"]
   },
   progress: {
     name: "Progress",
-    description: "Progress bar",
+    description: "Linear progress bar",
     category: "Feedback",
-    code: `// Progress component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Progress } from "reever-ui";
-`,
-    dependencies: ["@radix-ui/react-progress"]
+    code: `import { Progress, CircularProgress } from "@reeverdev/ui";
+
+// Usage
+<Progress value={75} max={100} />
+<CircularProgress value={60} showValue />
+`
+  },
+  spinner: {
+    name: "Spinner",
+    description: "Loading spinner",
+    category: "Feedback",
+    code: `import { Spinner } from "@reeverdev/ui";
+
+// Usage
+<Spinner size="md" />
+<Spinner color="primary" />
+`
   },
   skeleton: {
     name: "Skeleton",
-    description: "Loading skeleton",
+    description: "Loading placeholder",
     category: "Feedback",
-    code: `// Skeleton component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Skeleton } from "reever-ui";
+    code: `import { Skeleton } from "@reeverdev/ui";
+
+// Usage
+<Skeleton className="w-full h-4" />
+<Skeleton isLoaded={!loading}>
+  <div>Content</div>
+</Skeleton>
+`
+  },
+  // ============ LAYOUT ============
+  accordion: {
+    name: "Accordion",
+    description: "Collapsible content sections",
+    category: "Layout",
+    code: `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@reeverdev/ui";
+
+// Usage
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section 1</AccordionTrigger>
+    <AccordionContent>Content 1</AccordionContent>
+  </AccordionItem>
+</Accordion>
+`
+  },
+  resizable: {
+    name: "Resizable",
+    description: "Resizable panel layout",
+    category: "Layout",
+    code: `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@reeverdev/ui";
+
+// Usage
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel>Left</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Right</ResizablePanel>
+</ResizablePanelGroup>
 `
   },
   separator: {
     name: "Separator",
-    description: "Visual separator",
-    category: "Core",
-    code: `// Separator component - run 'npm install reever-ui' and import from 'reever-ui'
-export { Separator } from "reever-ui";
+    description: "Visual divider",
+    category: "Layout",
+    code: `import { Separator } from "@reeverdev/ui";
+
+// Usage
+<Separator />
+<Separator orientation="vertical" />
+`
+  },
+  "scroll-area": {
+    name: "ScrollArea",
+    description: "Custom scrollbar container",
+    category: "Layout",
+    code: `import { ScrollArea } from "@reeverdev/ui";
+
+// Usage
+<ScrollArea className="h-[200px]">
+  <div>Long content...</div>
+</ScrollArea>
+`
+  },
+  // ============ UTILITY ============
+  kbd: {
+    name: "Kbd",
+    description: "Keyboard key indicator",
+    category: "Utility",
+    code: `import { Kbd } from "@reeverdev/ui";
+
+// Usage
+<Kbd>\u2318</Kbd> + <Kbd>K</Kbd>
+`
+  },
+  "skip-link": {
+    name: "SkipLink",
+    description: "Accessibility skip link (WCAG 2.4.1)",
+    category: "Utility",
+    code: `import { SkipLink } from "@reeverdev/ui";
+
+// Usage - place at the beginning of your layout
+<SkipLink href="#main-content">Skip to main content</SkipLink>
+
+// Target element
+<main id="main-content">...</main>
+`
+  },
+  "qr-code": {
+    name: "QRCode",
+    description: "QR code generator",
+    category: "Utility",
+    code: `import { QRCode } from "@reeverdev/ui";
+
+// Usage
+<QRCode value="https://reever.app" size={200} />
+`
+  },
+  // ============ RICH COMPONENTS ============
+  carousel: {
+    name: "Carousel",
+    description: "Image/content carousel",
+    category: "Rich",
+    code: `import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@reeverdev/ui";
+
+// Usage
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>Slide 1</CarouselItem>
+    <CarouselItem>Slide 2</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+`,
+    dependencies: ["embla-carousel-react"]
+  },
+  charts: {
+    name: "Charts",
+    description: "Data visualization charts",
+    category: "Rich",
+    code: `import { LineChart, BarChart, PieChart } from "@reeverdev/ui";
+
+// Usage
+<LineChart data={data}>
+  <Line dataKey="value" />
+  <XAxis dataKey="name" />
+</LineChart>
 `,
-    dependencies: ["@radix-ui/react-separator"]
+    dependencies: ["recharts"]
   }
 };
 function getComponent(name) {
-  return COMPONENTS[name];
+  return COMPONENTS[name.toLowerCase()];
 }
 function getComponentDependencies(name) {
-  const component = COMPONENTS[name];
+  const component = COMPONENTS[name.toLowerCase()];
   if (!component) return [];
-  return component.componentDependencies || [];
+  return component.dependencies || [];
 }
 
 // commands/add.ts

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@reeverdev/ui-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CLI tool for Reever UI component library",
   "type": "module",
   "bin": {
     "reever-ui": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup index.ts --format esm",