feat: button docmentaion finished

docs/www/__registry__/index.tsx

@@ -11,7 +11,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/DuckButton")),
       source: "",
-      files: ["registry/default/ui/DuckButton"],
+      files: ["registry/default/ui/DuckButton.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []

docs/www/components/variantsSwitcher.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/cn'
-import { DuckButton } from '@/registry/default/ui/DuckButton'
+import { DuckButton } from '@/registry/default/ui'
 import {
   Input,
   Label,

docs/www/content/docs/components/Button.mdx

@@ -1,6 +1,7 @@
 ---
 title: DuckButton
-description: The DuckButton component provides a versatile and customizable button element, ideal for various UI needs. It supports keyboard shortcuts, tooltips, and advanced styling options.
+description: The DuckButton component is a highly customizable and versatile button component that can be integrated into various parts of your React application. It supports icons, labels, commands, and various styling options, making it adaptable to different use cases.
+
 featured: true
 component: true
 ---
@@ -64,14 +65,9 @@ import { Inbox } from 'lucide-react';
 
 ```tsx
 <DuckButton
-  button={{
-    icon: Inbox,
-    title: 'Inbox',
-    label: '5',
-    variant: 'default',
-    size: 'default',
-    // ..etc
-  }}
+  icon={Inbox}
+  title={'Inbox'}
+  label={'4'}
 />
 ```
 
@@ -84,16 +80,13 @@ import { buttonVariants } from "@/components/Ui"
 ```
 
 ```tsx
-<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>
+<Link className={buttonVariants({ variant: "outline" })}>Click me</Link>
 ```
 
 Alternatively, you can set the `asChild` parameter and nest the link component.
 
 ```tsx
-<Button
-  button={{
-    asChild: true,
-  }}
+<Button asChild>
   <Link href="/login">Login</Link>
 </Button>
 ```
@@ -107,3 +100,64 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 ### Advanced
 
 <ComponentPreview name="DuckButtonAdvancedDemo" description="Advanced button" />
+
+
+
+## DuckButtonProps
+
+The `DuckButtonProps` interface defines the properties that can be passed to the `DuckButton` component.
+
+### Parameters
+
+| Parameter        | Type                                                  | Description                                                                                       |
+| ---------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `asChild`        | `boolean` (optional)                                  | Determines if the button should be rendered as a child element, useful for custom wrappers.        |
+| `isCollapsed`    | `boolean` (optional)                                  | Indicates if the button is in a collapsed state, potentially affecting its visibility or content.  |
+| `icon`           | `LucideIcon` (optional)                               | The icon to display within the button.                                                            |
+| `label`          | `string` (optional)                                   | The text label to display on the button.                                                          |
+| `command`        | [`CommandType`](#commandtype) (optional)              | Configuration for keyboard shortcuts, including key, label, and action.                           |
+| `delayDuration`  | `number` (optional)                                   | The delay duration (in milliseconds) before executing the button's action or command.             |
+| `variant`        | [`Variant`](#variant) (optional)                      | Defines the visual style of the button (e.g., `default`, `destructive`, `outline`, etc.).          |
+| `size`           | [`Size`](#size) (optional)                            | Defines the size of the button (e.g., `default`, `sm`, `lg`, `icon`).                             |
+
+## CommandType
+
+The `CommandType` interface defines the properties for configuring keyboard shortcuts and actions associated with the button.
+
+### Fields
+
+| Field     | Type                                  | Description                                                        |
+| --------- | ------------------------------------- | ------------------------------------------------------------------ |
+| `label`   | `string`                              | The label to display for the command.                              |
+| `key`     | `string`                              | The keyboard shortcut key associated with the command.             |
+| `state`   | `unknown` (optional)                  | Optional state data to pass with the command.                      |
+| `action`  | `<T>(arg?: T) => void` (optional)     | The function to execute when the command is triggered.             |
+
+## Variants
+
+The `variant` property allows you to define the visual style of the button. It is derived from the `buttonVariants` utility.
+
+### Variant Options
+
+| Variant       | Description                                                                 |
+| ------------- | --------------------------------------------------------------------------- |
+| `default`     | The default button style.                                                   |
+| `destructive` | A style used to indicate a destructive action, such as delete or remove.    |
+| `outline`     | A button with an outlined border and transparent background.                |
+| `secondary`   | A secondary style, typically used for less prominent actions.               |
+| `ghost`       | A button with a transparent background, typically used for subtle actions.  |
+| `link`        | A button styled as a hyperlink.                                             |
+
+## Sizes
+
+The `size` property allows you to define the size of the button. It is also derived from the `buttonVariants` utility.
+
+### Size Options
+
+| Size     | Description                                                                |
+| -------- | -------------------------------------------------------------------------- |
+| `default`| The default button size.                                                   |
+| `sm`     | A small button size, suitable for compact spaces.                          |
+| `lg`     | A large button size, suitable for more prominent actions.                  |
+| `icon`   | A button size optimized for displaying icons without labels.               |
+

docs/www/content/docs/installation/next.mdx

@@ -39,7 +39,7 @@ Here's how I configure Inter for Next.js:
 
 **1. Import the font in the root layout:**
 
-```js showLineNumbers title=app/layout.tsx {2,5-8,16-17}
+```js showLineNumbers title=app/layout.tsx {2,6-9,16-19}
 import "@/styles/globals.css"
 import { Inter as FontSans } from "next/font/google"
 
@@ -140,27 +140,22 @@ Here's how I structure my Next.js apps. You can use this as a reference:
 You can now start adding components to your project.
 
 ```bash
-npx shadcn-ui@latest add duck-button
+npx duck-ui@latest add button
 ```
 
 The command above will add the `DuckButton` component to your project. You can then import it like this:
 
-```tsx {1,7-16} showLineNumbers
+```tsx {1,7-11} showLineNumbers
 import { DuckButton } from "@/components/ui"
 import { Inbox } from 'lucide-react'
 
 export default function Home() {
   return (
     <div>
       <DuckButton
-        button={{
-          icon: Inbox,
-          title: 'Inbox',
-          label: '5',
-          variant: 'primary',
-          size: 'default',
-          onClick: () => alert('Inbox button clicked!'),
-        }}
+        icon={Inbox}
+        title={'Inbox'}
+        label={'4'}
       />
     </div>
   )

docs/www/content/docs/installation/vite.mdx

@@ -121,27 +121,22 @@ Are you using React Server Components? › no / yes (no)
 You can now start adding components to your project.
 
 ```bash
-npx duck-ui@latest add duck-button
+npx duck-ui@latest add button
 ```
 
 The command above will add the `DuckButton` component to your project. You can then import it like this:
 
-```tsx {1,7-16} showLineNumbers
+```tsx {1,7-11} showLineNumbers
 import { DuckButton } from "@/components/ui"
 import { Inbox } from 'lucide-react'
 
 export default function Home() {
   return (
     <div>
       <DuckButton
-        button={{
-          icon: Inbox,
-          title: 'Inbox',
-          label: '5',
-          variant: 'primary',
-          size: 'default',
-          onClick: () => alert('Inbox button clicked!'),
-        }}
+        icon={Inbox}
+        title={'Inbox'}
+        label={'4'}
       />
     </div>
   )

docs/www/public/registry/index.json

@@ -2,10 +2,10 @@
   {
     "name": "DuckButton",
     "dependencies": [
-      "@radix-ui/react-accordion"
+      "@radix-ui/react-slot"
     ],
     "files": [
-      "ui/DuckButton"
+      "ui/DuckButton.tsx"
     ],
     "type": "components:ui"
   }

docs/www/public/registry/styles/default/DuckButton.json

@@ -1,12 +1,12 @@
 {
   "name": "DuckButton",
   "dependencies": [
-    "@radix-ui/react-accordion"
+    "@radix-ui/react-slot"
   ],
   "files": [
     {
       "name": "DuckButton.tsx",
-      "content": "import React from 'react'\nimport { cn } from '@/lib'\nimport { Slot } from '@radix-ui/react-slot'\nimport { CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui'\nimport { DuckButtonProps } from './DuckButton.types'\nimport { buttonVariants } from './DuckButton.local'\n\nconst DuckButton = React.forwardRef<HTMLButtonElement, DuckButtonProps>(\n  ({ button, delayDuration = 0, command }: DuckButtonProps, ref: React.ForwardedRef<HTMLButtonElement> | undefined) => {\n    const { asChild, isCollapsed, size, variant, className, label, title, icon, ...props } = button\n    const Component = asChild ? Slot : 'button'\n\n    // Handle keyboard shortcuts\n    React.useEffect(() => {\n      if (command?.key) {\n        const handleKeyDown = (e: KeyboardEvent) => {\n          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            command.action && command.action()\n          }\n        }\n\n        document.addEventListener('keydown', handleKeyDown)\n        return () => document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [command])\n\n    return (\n      <Tooltip delayDuration={delayDuration}>\n        <TooltipTrigger asChild>\n          <Component\n            ref={ref}\n            className={cn(\n              buttonVariants({\n                variant: variant || 'ghost',\n                size: isCollapsed ? 'icon' : 'default',\n                className: cn(!isCollapsed && 'flex items-center gap-2 justify-start w-[250px] h-[40px]', className),\n              }),\n            )}\n            {...props}\n          >\n            {button.icon && <button.icon className=\"w-[1.15rem] h-[1.15rem]\" />}\n            {!isCollapsed && title && <span className=\"text-[.9rem]\">{title}</span>}\n            {!isCollapsed && command && <CommandShortcut className=\"text-[.8rem]\">{command.label}</CommandShortcut>}\n            {!isCollapsed && label && <span className=\"ml-auto text-[.9rem]\">{label}</span>}\n          </Component>\n        </TooltipTrigger>\n        {isCollapsed && (title || label) && (\n          <TooltipContent\n            side=\"right\"\n            className=\"flex items-center gap-4 z-50 justify-start\"\n          >\n            {title}\n            {command && <CommandShortcut className=\"text-[.9rem]\">{command.label}</CommandShortcut>}\n            {label && <span className=\"ml-auto text-muted-foreground\">{label}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    )\n  },\n)\n\nDuckButton.displayName = 'DuckButton'\n\nexport { DuckButton }\n"
+      "content": "import React from 'react'\nimport { cn } from '@/lib'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport { VariantProps } from 'class-variance-authority'\nimport { LucideIcon } from 'lucide-react'\nimport { Badge, CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui'\n\nexport interface DuckButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n  isCollapsed?: boolean\n  icon?: LucideIcon\n  label?: string\n  route?: string\n  command?: CommandType\n  delayDuration?: number\n}\n\nexport type CommandType = {\n  label: string\n  key: string\n  state?: unknown\n  action?: <T>(arg?: T) => void\n}\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nconst DuckButton = React.forwardRef<HTMLButtonElement, DuckButtonProps>(\n  (\n    {\n      asChild,\n      isCollapsed = false,\n      size = 'default',\n      variant = 'default',\n      title,\n      className,\n      label,\n      children,\n      icon: Icon,\n      delayDuration = 0,\n      command,\n      ...props\n    }: DuckButtonProps,\n    ref: React.ForwardedRef<HTMLButtonElement> | undefined,\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    // Handle keyboard shortcuts\n    React.useEffect(() => {\n      if (command?.key) {\n        const handleKeyDown = (e: KeyboardEvent) => {\n          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            command.action && command.action()\n          }\n        }\n\n        document.addEventListener('keydown', handleKeyDown)\n        return () => document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [command])\n\n    console.log(size)\n\n    return (\n      <Tooltip delayDuration={delayDuration}>\n        <TooltipTrigger asChild>\n          <Component\n            ref={ref}\n            className={cn(\n              buttonVariants({\n                variant: variant || 'ghost',\n                size: size ? size : isCollapsed ? 'icon' : 'default',\n                className: cn(\n                  !isCollapsed && 'flex items-center gap-2 justify-start w-[220px] h-[40px]',\n                  !isCollapsed && size === 'icon' && 'px-4',\n                  className,\n                ),\n              }),\n            )}\n            {...props}\n          >\n            {!!Icon && <Icon className=\"w-[1.15rem] h-[1.15rem]\" />}\n            {!isCollapsed && (children || title) && <span className=\"text-[.9rem]\">{children || title}</span>}\n            {!isCollapsed && command && <CommandShortcut className=\"text-[.8rem]\">{command.label}</CommandShortcut>}\n            {!isCollapsed && label && <span className=\"ml-auto text-[.9rem]\">{label}</span>}\n          </Component>\n        </TooltipTrigger>\n        {isCollapsed && (title || label) && (\n          <TooltipContent\n            side=\"right\"\n            className=\"flex items-center gap-4 z-50 justify-start\"\n          >\n            {title}\n            {command && (\n              <CommandShortcut className=\"text-[.8rem]\">\n                <Badge className=\"p-0 px-2\">{command.label}</Badge>\n              </CommandShortcut>\n            )}\n            {label && <span className=\"ml-auto text-muted-foreground text-[.9rem]\">{label}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    )\n  },\n)\nDuckButton.displayName = 'DuckButton'\n\nexport { DuckButton, buttonVariants }\n"
     }
   ],
   "type": "components:ui"