@nikala-ui/core 0.9.9 → 0.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,

package/registry/accordion.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "content": "import { splitProps, type JSX, type ValidComponent } from \"solid-js\";\nimport * as AccordionPrimitive from \"@kobalte/core/accordion\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { cn } from \"@/lib/cn\";\n\nexport type AccordionRootProps<T extends ValidComponent = \"div\"> = Omit<\n  AccordionPrimitive.AccordionRootProps<T>,\n  \"value\" | \"defaultValue\"\n> & {\n  /** Accordion mode: \"single\" allows one open item, \"multiple\" allows many */\n  type?: \"single\" | \"multiple\";\n  /** Controlled value (single string or array of strings) */\n  value?: string | string[];\n  /** Default initial value (single string or array of strings) */\n  defaultValue?: string | string[];\n  class?: string;\n};\n\n/**\n * Root Accordion component built on top of Kobalte headless primitives.\n */\nexport const Accordion = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionRootProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionRootProps, [\n    \"class\",\n    \"type\",\n    \"multiple\",\n    \"value\",\n    \"defaultValue\",\n  ]);\n\n  // Support both `type=\"multiple\"` and `multiple={true}`\n  const isMultiple = () => local.multiple ?? local.type === \"multiple\";\n\n  return (\n    <AccordionPrimitive.Root\n      multiple={isMultiple()}\n      value={local.value}\n      defaultValue={local.defaultValue}\n      class={cn(\"w-full divide-y divide-border\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type AccordionItemProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionItemProps<T> & {\n    class?: string;\n    value: string;\n  };\n\n/**\n * Individual Accordion section item wrapper.\n */\nexport const AccordionItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionItemProps, [\"class\"]);\n\n  return (\n    <AccordionPrimitive.Item\n      class={cn(\"border-b border-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport type AccordionTriggerProps<T extends ValidComponent = \"button\"> =\n  AccordionPrimitive.AccordionTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Header trigger button toggling the expansion of an AccordionItem.\n */\nexport const AccordionTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, AccordionTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionTriggerProps, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180 cursor-pointer text-foreground\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <svg\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n};\n\nexport type AccordionContentProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionContentProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Collapsible content panel revealed when the associated AccordionItem is open.\n */\nexport const AccordionContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionContentProps, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.Content\n      class={cn(\n        \"overflow-hidden text-sm text-muted-foreground transition-all\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"pb-4 pt-0\">{local.children}</div>\n    </AccordionPrimitive.Content>\n  );\n};",
+      "content": "import { splitProps, type JSX, type ValidComponent } from \"solid-js\";\nimport * as AccordionPrimitive from \"@kobalte/core/accordion\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { cn } from \"@/lib/cn\";\n\nexport type AccordionRootProps<T extends ValidComponent = \"div\"> = Omit<\n  AccordionPrimitive.AccordionRootProps<T>,\n  \"value\" | \"defaultValue\"\n> & {\n  /** Accordion mode: \"single\" allows one open item, \"multiple\" allows many */\n  type?: \"single\" | \"multiple\";\n  /** Controlled value (single string or array of strings) */\n  value?: string | string[];\n  /** Default initial value (single string or array of strings) */\n  defaultValue?: string | string[];\n  class?: string;\n};\n\n/**\n * Root Accordion component built on top of Kobalte headless primitives.\n */\nexport const Accordion = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionRootProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionRootProps, [\n    \"class\",\n    \"type\",\n    \"multiple\",\n  ]);\n\n  // Support both `type=\"multiple\"` and `multiple={true}`\n  const isMultiple = () => local.multiple ?? local.type === \"multiple\";\n\n  return (\n    <AccordionPrimitive.Root\n      multiple={isMultiple()}\n      class={cn(\"w-full divide-y divide-border\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type AccordionItemProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionItemProps<T> & {\n    class?: string;\n    value: string;\n  };\n\n/**\n * Individual Accordion section item wrapper.\n */\nexport const AccordionItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionItemProps, [\"class\"]);\n\n  return (\n    <AccordionPrimitive.Item\n      class={cn(\"border-b border-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport type AccordionTriggerProps<T extends ValidComponent = \"button\"> =\n  AccordionPrimitive.AccordionTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Header trigger button toggling the expansion of an AccordionItem.\n */\nexport const AccordionTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, AccordionTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionTriggerProps, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180 cursor-pointer text-foreground\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <svg\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n};\n\nexport type AccordionContentProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionContentProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Collapsible content panel revealed when the associated AccordionItem is open.\n */\nexport const AccordionContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as AccordionContentProps, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.Content\n      class={cn(\n        \"overflow-hidden text-sm text-muted-foreground transition-all\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"pb-4 pt-0\">{local.children}</div>\n    </AccordionPrimitive.Content>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/avatar.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/avatar.tsx",
-      "content": "import {\n  createSignal,\n  createEffect,\n  Show,\n  splitProps,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Root Avatar container component.\n */\nexport const Avatar: Component<AvatarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border bg-muted\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface AvatarImageProps\n  extends JSX.ImgHTMLAttributes<HTMLImageElement> {\n  class?: string;\n}\n\n/**\n * Image element for the Avatar component with background status loader.\n */\nexport const AvatarImage: Component<AvatarImageProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"onLoad\",\n    \"onError\",\n  ]);\n  const [status, setStatus] = createSignal<\"loading\" | \"loaded\" | \"error\">(\n    \"loading\"\n  );\n\n  /* Pre-test image loading in background JS to prevent native broken icon flashes */\n  createEffect(() => {\n    const src = local.src;\n    if (!src) {\n      setStatus(\"error\");\n      return;\n    }\n\n    const img = new Image();\n    img.src = src;\n    img.onload = () => setStatus(\"loaded\");\n    img.onerror = () => setStatus(\"error\");\n  });\n\n  const handleLoad: JSX.EventHandlerUnion<HTMLImageElement, Event> = (e) => {\n    setStatus(\"loaded\");\n    if (typeof local.onLoad === \"function\") {\n      (local.onLoad as (e: Event) => void)(e);\n    }\n  };\n\n  const handleError: JSX.EventHandlerUnion<HTMLImageElement, Event> = (e) => {\n    setStatus(\"error\");\n    if (typeof local.onError === \"function\") {\n      (local.onError as (e: Event) => void)(e);\n    }\n  };\n\n  return (\n    <Show when={status() === \"loaded\"}>\n      <img\n        src={local.src}\n        alt={local.alt}\n        class={cn(\"aspect-square h-full w-full object-cover\", local.class)}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...rest}\n      />\n    </Show>\n  );\n};\n\nexport interface AvatarFallbackProps\n  extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Fallback container for rendering initials or icons when avatar image is missing/broken.\n */\nexport const AvatarFallback: Component<AvatarFallbackProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex h-full w-full items-center justify-center bg-muted text-sm font-medium text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "content": "import {\n  createSignal,\n  createEffect,\n  Show,\n  splitProps,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Root Avatar container component.\n */\nexport const Avatar: Component<AvatarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-lg border border-border bg-muted\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface AvatarImageProps\n  extends JSX.ImgHTMLAttributes<HTMLImageElement> {\n  class?: string;\n}\n\n/**\n * Image element for the Avatar component with background status loader.\n */\nexport const AvatarImage: Component<AvatarImageProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"onLoad\",\n    \"onError\",\n  ]);\n  const [status, setStatus] = createSignal<\"loading\" | \"loaded\" | \"error\">(\n    \"loading\"\n  );\n\n  /* Pre-test image loading in background JS to prevent native broken icon flashes */\n  createEffect(() => {\n    const src = local.src;\n    if (!src) {\n      setStatus(\"error\");\n      return;\n    }\n\n    const img = new Image();\n    img.src = src;\n    img.onload = () => setStatus(\"loaded\");\n    img.onerror = () => setStatus(\"error\");\n  });\n\n  const handleLoad: JSX.EventHandlerUnion<HTMLImageElement, Event> = (e) => {\n    setStatus(\"loaded\");\n    if (typeof local.onLoad === \"function\") {\n      (local.onLoad as (e: Event) => void)(e);\n    }\n  };\n\n  const handleError: JSX.EventHandlerUnion<HTMLImageElement, Event> = (e) => {\n    setStatus(\"error\");\n    if (typeof local.onError === \"function\") {\n      (local.onError as (e: Event) => void)(e);\n    }\n  };\n\n  return (\n    <Show when={status() === \"loaded\"}>\n      <img\n        src={local.src}\n        alt={local.alt}\n        class={cn(\"aspect-square h-full w-full object-cover\", local.class)}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...rest}\n      />\n    </Show>\n  );\n};\n\nexport interface AvatarFallbackProps\n  extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Fallback container for rendering initials or icons when avatar image is missing/broken.\n */\nexport const AvatarFallback: Component<AvatarFallbackProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex h-full w-full items-center justify-center bg-muted text-sm font-medium text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/badge.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/badge.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Class variance authority configuration for badge styling variants.\n */\nexport const badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline:\n          \"text-foreground border-border\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Badge component extending standard HTML div attributes.\n */\nexport interface BadgeProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  class?: string;\n}\n\n/**\n * Nikala UI Badge component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Badge: Component<BadgeProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity\n  const [local, rest] = splitProps(props, [\"variant\", \"class\", \"children\"]);\n\n  return (\n    <div class={cn(badgeVariants({ variant: local.variant }), local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Class variance authority configuration for badge styling variants.\n */\nexport const badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline:\n          \"text-foreground border-border\",\n        success:\n          \"border-transparent bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90\",\n        warning:\n          \"border-transparent bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90\",\n        info:\n          \"border-transparent bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Badge component extending standard HTML div attributes.\n */\nexport interface BadgeProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  class?: string;\n}\n\n/**\n * Nikala UI Badge component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Badge: Component<BadgeProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity\n  const [local, rest] = splitProps(props, [\"variant\", \"class\", \"children\"]);\n\n  return (\n    <div class={cn(badgeVariants({ variant: local.variant }), local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/button.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Class variance authority configuration for button styling variants and sizes.\n */\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Button component extending standard HTML button attributes.\n */\nexport interface ButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  class?: string;\n}\n\n/**\n * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Button: Component<ButtonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\"variant\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <button\n      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Class variance authority configuration for button styling variants and sizes.\n */\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-primary/50\",\n        destructive:\n          \"bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"*:bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90\",\n        warning: \"*:bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90\",\n        info: \"*:bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90\",\n      },\n      size: {\n        xs: \"h-6 rounded-md px-2 text-xs\",\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Button component extending standard HTML button attributes.\n */\nexport interface ButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  class?: string;\n}\n\n/**\n * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Button: Component<ButtonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\"variant\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <button\n      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/checkbox.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "content": "import { splitProps, Show, type Component, type JSX } from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface CheckboxProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Uncontrolled default checked state */\n  defaultChecked?: boolean;\n  /** Event handler triggered when checked state changes */\n  onChange?: (checked: boolean) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI Checkbox component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Checkbox: Component<CheckboxProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"checked\",\n    \"defaultChecked\",\n    \"onChange\",\n    \"disabled\",\n    \"class\",\n    \"onClick\",\n  ]);\n\n  const [isChecked, setIsChecked] = createControllableSignal({\n    value: () => local.checked,\n    defaultValue: local.defaultChecked ?? false,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const toggle = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    setIsChecked(!isChecked());\n\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={Boolean(isChecked())}\n      data-state={isChecked() ? \"checked\" : \"unchecked\"}\n      disabled={local.disabled}\n      onClick={toggle}\n      class={cn(\n        \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center transition-colors\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={isChecked()}>\n        <svg\n          class=\"h-3.5 w-3.5 fill-none stroke-current stroke-[3]\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M5 13l4 4L19 7\"\n          />\n        </svg>\n      </Show>\n    </button>\n  );\n};",
+      "content": "import { splitProps, Show, type Component, type JSX } from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface CheckboxProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Uncontrolled default checked state */\n  defaultChecked?: boolean;\n  /** Event handler triggered when checked state changes */\n  onChange?: (checked: boolean) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI Checkbox component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Checkbox: Component<CheckboxProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"checked\",\n    \"defaultChecked\",\n    \"onChange\",\n    \"disabled\",\n    \"class\",\n    \"onClick\",\n  ]);\n\n  const [isChecked, setIsChecked] = createControllableSignal({\n    value: () => local.checked,\n    defaultValue: local.defaultChecked ?? false,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const toggle = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    setIsChecked(!isChecked());\n\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={isChecked()}\n      data-state={isChecked() ? \"checked\" : \"unchecked\"}\n      disabled={local.disabled}\n      onClick={toggle}\n      class={cn(\n        \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center transition-colors\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={isChecked()}>\n        <svg\n          class=\"h-3.5 w-3.5 fill-none stroke-current stroke-[3]\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M5 13l4 4L19 7\"\n          />\n        </svg>\n      </Show>\n    </button>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/command.json

@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "import {\n  createContext,\n  useContext,\n  createSignal,\n  onMount,\n  onCleanup,\n  Show,\n  splitProps,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { Dialog } from \"@kobalte/core/dialog\";\nimport { Search, ArrowUp, ArrowDown, CornerDownLeft } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\nimport { Kbd, KbdGroup } from \"../ui/kbd\";\nimport { InputGroup, InputGroupInput, InputGroupAddon } from \"../ui/input-group\";\nimport { List, ListGroup, ListHeader, ListItem, type ListItemProps } from \"../ui/list\";\n\n/* --- Command Context State --- */\ninterface CommandContextValue {\n  search: Accessor<string>;\n  setSearch: (value: string) => void;\n}\n\nconst CommandContext = createContext<CommandContextValue>();\n\nexport const useCommand = () => {\n  const ctx = useContext(CommandContext);\n  if (!ctx) {\n    throw new Error(\"useCommand must be used within a <Command />\");\n  }\n  return ctx;\n};\n\n/* --- Root Command Container --- */\nexport interface CommandProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const Command: Component<CommandProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const [search, setSearch] = createSignal(\"\");\n\n  return (\n    <CommandContext.Provider value={{ search, setSearch }}>\n      <div\n        class={cn(\n          \"flex flex-col w-full h-full rounded-lg bg-popover text-popover-foreground overflow-hidden border border-border shadow-md\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </CommandContext.Provider>\n  );\n};\n\n/* --- Command Dialog (Modal) --- */\nexport interface CommandDialogProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  enableHotkey?: boolean;\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport const CommandDialog: Component<CommandDialogProps> = (props) => {\n  const [internalOpen, setInternalOpen] = createSignal(false);\n\n  const isOpen = () => (props.open !== undefined ? props.open : internalOpen());\n  const setOpen = (val: boolean) => {\n    if (props.open === undefined) setInternalOpen(val);\n    if (typeof props.onOpenChange === \"function\") props.onOpenChange(val);\n  };\n\n  /* Listen for global Ctrl+K / Cmd+K hotkeys */\n  onMount(() => {\n    if (props.enableHotkey !== false) {\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"k\") {\n          e.preventDefault();\n          setOpen(!isOpen());\n        }\n      };\n      window.addEventListener(\"keydown\", handleKeyDown);\n      onCleanup(() => window.removeEventListener(\"keydown\", handleKeyDown));\n    }\n  });\n\n  return (\n    <Dialog open={isOpen()} onOpenChange={setOpen}>\n      <Dialog.Portal>\n        <Dialog.Overlay class=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\" />\n        <div class=\"fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4\">\n          <Dialog.Content class=\"w-full max-w-xl rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95\">\n            <Command class={props.class}>{props.children}</Command>\n          </Dialog.Content>\n        </div>\n      </Dialog.Portal>\n    </Dialog>\n  );\n};\n\n/* --- Command Input --- */\nexport interface CommandInputProps\n  extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\nexport const CommandInput: Component<CommandInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"value\", \"onInput\"]);\n  const { search, setSearch } = useCommand();\n\n  return (\n    <InputGroup class=\"border-0 border-b border-border rounded-none bg-transparent px-3 py-1 shadow-none focus-within:ring-0 focus-within:border-border\">\n      <InputGroupAddon align=\"inline-start\">\n        <Search class=\"w-4 h-4 text-muted-foreground\" />\n      </InputGroupAddon>\n\n      <InputGroupInput\n        value={search()}\n        onInput={(e) => {\n          setSearch(e.currentTarget.value);\n          if (typeof local.onInput === \"function\") {\n            local.onInput(e);\n          }\n        }}\n        placeholder=\"Type a command or search...\"\n        class=\"h-11 text-base sm:text-sm font-medium\"\n        {...rest}\n      />\n    </InputGroup>\n  );\n};\n\n/* --- Command List Container --- */\nexport interface CommandListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandList: Component<CommandListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\"max-h-[330px] overflow-y-auto p-1.5 scrollbar-thin\", local.class)}\n      {...rest}\n    >\n      <List>{local.children}</List>\n    </div>\n  );\n};\n\n/* --- Command Empty Block --- */\nexport interface CommandEmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandEmpty: Component<CommandEmptyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const { search } = useCommand();\n\n  return (\n    <Show when={search().trim().length > 0}>\n      <div\n        class={cn(\n          \"py-8 text-center text-sm text-muted-foreground font-medium select-none\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children || `No results found for \"${search()}\".`}\n      </div>\n    </Show>\n  );\n};\n\n/* --- Command Group --- */\nexport interface CommandGroupProps {\n  heading: string;\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport const CommandGroup: Component<CommandGroupProps> = (props) => {\n  return (\n    <ListGroup class={props.class}>\n      <ListHeader title={props.heading} />\n      {props.children}\n    </ListGroup>\n  );\n};\n\n/* --- Command Item --- */\nexport interface CommandItemProps extends ListItemProps {\n  keywords?: string[];\n  onSelect?: () => void;\n}\n\nexport const CommandItem: Component<CommandItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"title\",\n    \"subtitle\",\n    \"keywords\",\n    \"onSelect\",\n    \"onClick\",\n    \"class\",\n  ]);\n  const { search } = useCommand();\n\n  /* Auto fuzzy-filter item based on search query */\n  const matchesSearch = () => {\n    const query = search().toLowerCase().trim();\n    if (!query) return true;\n\n    const titleMatch = local.title?.toLowerCase().includes(query);\n    const subtitleMatch = local.subtitle?.toLowerCase().includes(query);\n    const keywordMatch = local.keywords?.some((k) =>\n      k.toLowerCase().includes(query)\n    );\n\n    return Boolean(titleMatch || subtitleMatch || keywordMatch);\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    if (typeof local.onSelect === \"function\") {\n      local.onSelect();\n    }\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e as any);\n    }\n  };\n\n  return (\n    <Show when={matchesSearch()}>\n      <ListItem\n        title={local.title}\n        subtitle={local.subtitle}\n        onClick={handleClick}\n        class={local.class}\n        {...rest}\n      />\n    </Show>\n  );\n};\n\n/* --- Command Footer --- */\nexport interface CommandFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandFooter: Component<CommandFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex items-center justify-between border-t border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <KbdGroup>\n            <Kbd size=\"sm\"><ArrowUp class=\"w-2.5 h-2.5\" /></Kbd>\n            <Kbd size=\"sm\"><ArrowDown class=\"w-2.5 h-2.5\" /></Kbd>\n          </KbdGroup>\n          <span>Navigate</span>\n        </span>\n\n        <span class=\"flex items-center gap-1\">\n          <Kbd size=\"sm\"><CornerDownLeft class=\"w-2.5 h-2.5\" /></Kbd>\n          <span>Select</span>\n        </span>\n      </div>\n\n      <span class=\"flex items-center gap-1\">\n        <Kbd size=\"sm\">Esc</Kbd>\n        <span>Close</span>\n      </span>\n    </div>\n  );\n};",
+      "content": "import {\n  createContext,\n  useContext,\n  createSignal,\n  onCleanup,\n  Show,\n  splitProps,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { createKeybindings } from \"@nikala-ui/hooks\";\nimport { Dialog } from \"@kobalte/core/dialog\";\nimport { Search, ArrowUp, ArrowDown, CornerDownLeft } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\nimport { Kbd, KbdGroup } from \"../ui/kbd\";\nimport { InputGroup, InputGroupInput, InputGroupAddon } from \"../ui/input-group\";\nimport { List, ListGroup, ListHeader, ListItem, type ListItemProps } from \"../ui/list\";\n\n/* --- Command Context State --- */\ninterface CommandContextValue {\n  search: Accessor<string>;\n  setSearch: (value: string) => void;\n}\n\nconst CommandContext = createContext<CommandContextValue>();\n\nexport const useCommand = () => {\n  const ctx = useContext(CommandContext);\n  if (!ctx) {\n    throw new Error(\"useCommand must be used within a <Command />\");\n  }\n  return ctx;\n};\n\n/* --- Root Command Container --- */\nexport interface CommandProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const Command: Component<CommandProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const [search, setSearch] = createSignal(\"\");\n\n  return (\n    <CommandContext.Provider value={{ search, setSearch }}>\n      <div\n        class={cn(\n          \"flex flex-col w-full h-full rounded-lg bg-popover text-popover-foreground overflow-hidden border border-border shadow-md\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </CommandContext.Provider>\n  );\n};\n\n/* --- Command Dialog (Modal) --- */\nexport interface CommandDialogProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  enableHotkey?: boolean;\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport const CommandDialog: Component<CommandDialogProps> = (props) => {\n  const [internalOpen, setInternalOpen] = createSignal(false);\n\n  const isOpen = () => (props.open !== undefined ? props.open : internalOpen());\n  const setOpen = (val: boolean) => {\n    if (props.open === undefined) setInternalOpen(val);\n    if (typeof props.onOpenChange === \"function\") props.onOpenChange(val);\n  };\n\n  /* Listen for global Ctrl+K / Cmd+K hotkeys */\n  createKeybindings(\n    [\n      {\n        key: [\"meta+k\", \"ctrl+k\"],\n        handler: () => setOpen(!isOpen()),\n        preventDefault: true,\n      },\n    ],\n    {\n      enabled: () => props.enableHotkey !== false,\n    }\n  );\n\n  return (\n    <Dialog open={isOpen()} onOpenChange={setOpen}>\n      <Dialog.Portal>\n        <Dialog.Overlay class=\"fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\" />\n        <div class=\"fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4\">\n          <Dialog.Content class=\"w-full max-w-xl rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl outline-none data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95\">\n            <Command class={props.class}>{props.children}</Command>\n          </Dialog.Content>\n        </div>\n      </Dialog.Portal>\n    </Dialog>\n  );\n};\n\n/* --- Command Input --- */\nexport interface CommandInputProps\n  extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\nexport const CommandInput: Component<CommandInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"value\", \"onInput\"]);\n  const { search, setSearch } = useCommand();\n\n  return (\n    <InputGroup class=\"border-0 border-b border-border rounded-none bg-transparent px-3 py-1 shadow-none focus-within:ring-0 focus-within:border-border\">\n      <InputGroupAddon align=\"inline-start\">\n        <Search class=\"w-4 h-4 text-muted-foreground\" />\n      </InputGroupAddon>\n\n      <InputGroupInput\n        value={search()}\n        onInput={(e) => {\n          setSearch(e.currentTarget.value);\n          if (typeof local.onInput === \"function\") {\n            local.onInput(e);\n          }\n        }}\n        placeholder=\"Type a command or search...\"\n        class=\"h-11 text-base sm:text-sm font-medium\"\n        {...rest}\n      />\n    </InputGroup>\n  );\n};\n\n/* --- Command List Container --- */\nexport interface CommandListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandList: Component<CommandListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\"max-h-82.5 overflow-y-auto p-1.5 scrollbar-thin\", local.class)}\n      {...rest}\n    >\n      <List>{local.children}</List>\n    </div>\n  );\n};\n\n/* --- Command Empty Block --- */\nexport interface CommandEmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandEmpty: Component<CommandEmptyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const { search } = useCommand();\n\n  return (\n    <Show when={search().trim().length > 0}>\n      <div\n        class={cn(\n          \"py-8 text-center text-sm text-muted-foreground font-medium select-none\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children || `No results found for \"${search()}\".`}\n      </div>\n    </Show>\n  );\n};\n\n/* --- Command Group --- */\nexport interface CommandGroupProps {\n  heading: string;\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport const CommandGroup: Component<CommandGroupProps> = (props) => {\n  return (\n    <ListGroup class={props.class}>\n      <ListHeader title={props.heading} />\n      {props.children}\n    </ListGroup>\n  );\n};\n\n/* --- Command Item --- */\nexport interface CommandItemProps extends ListItemProps {\n  keywords?: string[];\n  onSelect?: () => void;\n}\n\nexport const CommandItem: Component<CommandItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"title\",\n    \"subtitle\",\n    \"keywords\",\n    \"onSelect\",\n    \"onClick\",\n    \"class\",\n  ]);\n  const { search } = useCommand();\n\n  /* Auto fuzzy-filter item based on search query */\n  const matchesSearch = () => {\n    const query = search().toLowerCase().trim();\n    if (!query) return true;\n\n    const titleMatch = local.title?.toLowerCase().includes(query);\n    const subtitleMatch = local.subtitle?.toLowerCase().includes(query);\n    const keywordMatch = local.keywords?.some((k) =>\n      k.toLowerCase().includes(query)\n    );\n\n    return Boolean(titleMatch || subtitleMatch || keywordMatch);\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    if (typeof local.onSelect === \"function\") {\n      local.onSelect();\n    }\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e as any);\n    }\n  };\n\n  return (\n    <Show when={matchesSearch()}>\n      <ListItem\n        title={local.title}\n        subtitle={local.subtitle}\n        onClick={handleClick}\n        class={local.class}\n        {...rest}\n      />\n    </Show>\n  );\n};\n\n/* --- Command Footer --- */\nexport interface CommandFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const CommandFooter: Component<CommandFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex items-center justify-between border-t border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <KbdGroup>\n            <Kbd size=\"sm\"><ArrowUp class=\"w-2.5 h-2.5\" /></Kbd>\n            <Kbd size=\"sm\"><ArrowDown class=\"w-2.5 h-2.5\" /></Kbd>\n          </KbdGroup>\n          <span>Navigate</span>\n        </span>\n\n        <span class=\"flex items-center gap-1\">\n          <Kbd size=\"sm\"><CornerDownLeft class=\"w-2.5 h-2.5\" /></Kbd>\n          <span>Select</span>\n        </span>\n      </div>\n\n      <span class=\"flex items-center gap-1\">\n        <Kbd size=\"sm\">Esc</Kbd>\n        <span>Close</span>\n      </span>\n    </div>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/dialog.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "content": "import { splitProps, type Component, type JSX, type ValidComponent, Show } from \"solid-js\";\nimport * as DialogPrimitive from \"@kobalte/core/dialog\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { cn } from \"@/lib/cn\";\n\nexport type DialogRootProps = DialogPrimitive.DialogRootProps;\n\n/**\n * Root Dialog component managing modal open state.\n */\nexport const Dialog: Component<DialogRootProps> = (props) => {\n  return <DialogPrimitive.Root {...props} />;\n};\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport type DialogOverlayProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogOverlayProps<T> & {\n    /** Whether to apply background blur effect (default: true) */\n    blur?: boolean;\n    class?: string;\n  };\n\n/**\n * Backdrop overlay wrapper with optional backdrop blur styling.\n */\nexport const DialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogOverlayProps, [\"class\", \"blur\"]);\n\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-black/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        local.blur !== false && \"backdrop-blur-sm\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DialogContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> & {\n    /** Whether to show the top-right close (X) button (default: true) */\n    showCloseButton?: boolean;\n    /** Whether clicking outside closes the dialog (default: true) */\n    closeOnOutsideClick?: boolean;\n    /** Whether to apply background backdrop blur (default: true) */\n    blur?: boolean;\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Main dialog popup window housing header, content, and footer.\n */\nexport const DialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogContentProps, [\n    \"class\",\n    \"children\",\n    \"showCloseButton\",\n    \"closeOnOutsideClick\",\n    \"blur\",\n    \"onPointerDownOutside\",\n    \"onInteractOutside\",\n  ]);\n\n  const handlePointerDownOutside = (e: Event) => {\n    if (local.closeOnOutsideClick === false) {\n      e.preventDefault();\n    }\n    if (typeof local.onPointerDownOutside === \"function\") {\n      local.onPointerDownOutside(e as any);\n    }\n  };\n\n  const handleInteractOutside = (e: Event) => {\n    if (local.closeOnOutsideClick === false) {\n      e.preventDefault();\n    }\n    if (typeof local.onInteractOutside === \"function\") {\n      local.onInteractOutside(e as any);\n    }\n  };\n\n  return (\n    <DialogPrimitive.Portal>\n      {/* Forward blur prop to DialogOverlay */}\n      <DialogOverlay blur={local.blur} />\n      <DialogPrimitive.Content\n        onPointerDownOutside={handlePointerDownOutside}\n        onInteractOutside={handleInteractOutside}\n        class={cn(\n          \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground\",\n          local.class\n        )}\n        {...(rest as any)}\n      >\n        {local.children}\n        <Show when={local.showCloseButton !== false}>\n          <DialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground cursor-pointer\">\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n            <span class=\"sr-only\">Close</span>\n          </DialogPrimitive.CloseButton>\n        </Show>\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Dialog top header container.\n */\nexport const DialogHeader: Component<DialogHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Dialog bottom action buttons area.\n */\nexport const DialogFooter: Component<DialogFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport type DialogTitleProps<T extends ValidComponent = \"h2\"> =\n  DialogPrimitive.DialogTitleProps<T> & {\n    class?: string;\n  };\n\n/**\n * Dialog title heading.\n */\nexport const DialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogTitleProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold leading-none tracking-tight text-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string;\n  };\n\n/**\n * Dialog subtitle or description text.\n */\nexport const DialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogDescriptionProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport const DialogClose = DialogPrimitive.CloseButton;",
+      "content": "import { splitProps, type Component, type JSX, type ValidComponent, Show } from \"solid-js\";\nimport * as DialogPrimitive from \"@kobalte/core/dialog\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { cn } from \"@/lib/cn\";\n\nexport type DialogRootProps = DialogPrimitive.DialogRootProps;\n\n/**\n * Root Dialog component managing modal open state.\n */\nexport const Dialog: Component<DialogRootProps> = (props) => {\n  return <DialogPrimitive.Root {...props} />;\n};\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport type DialogOverlayProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogOverlayProps<T> & {\n    /** Whether to apply background blur effect (default: true) */\n    blur?: boolean;\n    class?: string;\n  };\n\n/**\n * Backdrop overlay wrapper with optional backdrop blur styling.\n */\nexport const DialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogOverlayProps, [\"class\", \"blur\"]);\n\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        local.blur !== false && \"backdrop-blur-sm\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DialogContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> & {\n    /** Whether to show the top-right close (X) button (default: true) */\n    showCloseButton?: boolean;\n    /** Whether clicking outside closes the dialog (default: true) */\n    closeOnOutsideClick?: boolean;\n    /** Whether to apply background backdrop blur (default: true) */\n    blur?: boolean;\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Main dialog popup window housing header, content, and footer.\n */\nexport const DialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogContentProps, [\n    \"class\",\n    \"children\",\n    \"showCloseButton\",\n    \"closeOnOutsideClick\",\n    \"blur\",\n    \"onPointerDownOutside\",\n    \"onInteractOutside\",\n  ]);\n\n  const handlePointerDownOutside = (e: Event) => {\n    if (local.closeOnOutsideClick === false) {\n      e.preventDefault();\n    }\n    if (typeof local.onPointerDownOutside === \"function\") {\n      local.onPointerDownOutside(e as any);\n    }\n  };\n\n  const handleInteractOutside = (e: Event) => {\n    if (local.closeOnOutsideClick === false) {\n      e.preventDefault();\n    }\n    if (typeof local.onInteractOutside === \"function\") {\n      local.onInteractOutside(e as any);\n    }\n  };\n\n  return (\n    <DialogPrimitive.Portal>\n      {/* Forward blur prop to DialogOverlay */}\n      <DialogOverlay blur={local.blur} />\n      <DialogPrimitive.Content\n        onPointerDownOutside={handlePointerDownOutside}\n        onInteractOutside={handleInteractOutside}\n        class={cn(\n          \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-lg duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground\",\n          local.class\n        )}\n        {...(rest as any)}\n      >\n        {local.children}\n        <Show when={local.showCloseButton !== false}>\n          <DialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-expanded:bg-accent data-expanded:text-muted-foreground cursor-pointer\">\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n            <span class=\"sr-only\">Close</span>\n          </DialogPrimitive.CloseButton>\n        </Show>\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Dialog top header container.\n */\nexport const DialogHeader: Component<DialogHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Dialog bottom action buttons area.\n */\nexport const DialogFooter: Component<DialogFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport type DialogTitleProps<T extends ValidComponent = \"h2\"> =\n  DialogPrimitive.DialogTitleProps<T> & {\n    class?: string;\n  };\n\n/**\n * Dialog title heading.\n */\nexport const DialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogTitleProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold leading-none tracking-tight text-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string;\n  };\n\n/**\n * Dialog subtitle or description text.\n */\nexport const DialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DialogDescriptionProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport const DialogClose = DialogPrimitive.CloseButton;",
       "type": "registry:ui"
     }
   ]

package/registry/dropdown-menu.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "content": "import { splitProps, type Component, type JSX, type ValidComponent } from \"solid-js\";\nimport * as DropdownMenuPrimitive from \"@kobalte/core/dropdown-menu\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport type DropdownMenuRootProps = Omit<\n  DropdownMenuPrimitive.DropdownMenuRootProps,\n  \"placement\"\n> & {\n  placement?:\n    | \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"right\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left\"\n    | \"left-start\"\n    | \"left-end\";\n};\n\nexport const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {\n  return <DropdownMenuPrimitive.Root {...props} />;\n};\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n    inset?: boolean;\n  };\n\nexport const DropdownMenuSubTrigger = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSubTriggerProps, [\"class\", \"children\", \"inset\"]);\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      class={cn(\n        \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent text-foreground\",\n        local.inset && \"pl-8\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      {local.children}\n      <svg class=\"ml-auto h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n      </svg>\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n};\n\nexport type DropdownMenuSubContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuSubContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSubContentProps, [\"class\"]);\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        class={cn(\n          \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n          local.class\n        )}\n        {...(rest as any)}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n\nexport type DropdownMenuContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuContentProps, [\"class\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof (props as any).onInteractOutside === \"function\") {\n        (props as any).onInteractOutside(e);\n      }\n    },\n  });\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n          local.class\n        )}\n        {...(rest as any)}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n\nexport type DropdownMenuItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {\n    class?: string;\n    inset?: boolean;\n    variant?: \"default\" | \"destructive\";\n  };\n\nexport const DropdownMenuItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuItemProps, [\n    \"class\",\n    \"inset\",\n    \"variant\",\n  ]);\n\n  return (\n    <DropdownMenuPrimitive.Item\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        local.inset && \"pl-8\",\n        local.variant === \"destructive\" &&\n        \"text-destructive focus:bg-destructive/15 focus:text-destructive\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DropdownMenuCheckboxItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\nexport const DropdownMenuCheckboxItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [\"class\", \"children\"]);\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <svg class=\"h-4 w-4 fill-none stroke-current stroke-2\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n          </svg>\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {local.children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport type DropdownMenuRadioItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\nexport const DropdownMenuRadioItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuRadioItemProps, [\"class\", \"children\"]);\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <span class=\"h-2 w-2 rounded-full bg-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {local.children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n};\n\nexport interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  inset?: boolean;\n}\n\nexport const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"inset\"]);\n\n  return (\n    <div\n      class={cn(\n        \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n        local.inset && \"pl-8\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport type DropdownMenuSeparatorProps<T extends ValidComponent = \"hr\"> =\n  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuSeparator = <T extends ValidComponent = \"hr\">(\n  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, [\"class\"]);\n\n  return (\n    <DropdownMenuPrimitive.Separator\n      class={cn(\"-mx-1 my-1 h-px bg-border\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  class?: string;\n}\n\nexport const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX, type ValidComponent } from \"solid-js\";\nimport * as DropdownMenuPrimitive from \"@kobalte/core/dropdown-menu\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport type DropdownMenuRootProps = Omit<\n  DropdownMenuPrimitive.DropdownMenuRootProps,\n  \"placement\"\n> & {\n  placement?:\n    | \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"right\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left\"\n    | \"left-start\"\n    | \"left-end\";\n};\n\nexport const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {\n  return <DropdownMenuPrimitive.Root {...props} />;\n};\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n    inset?: boolean;\n  };\n\nexport const DropdownMenuSubTrigger = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSubTriggerProps, [\"class\", \"children\", \"inset\"]);\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      class={cn(\n        \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent text-foreground\",\n        local.inset && \"pl-8\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      {local.children}\n      <svg class=\"ml-auto h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n      </svg>\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n};\n\nexport type DropdownMenuSubContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuSubContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSubContentProps, [\"class\"]);\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        class={cn(\n          \"z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n          local.class\n        )}\n        {...(rest as any)}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n\nexport type DropdownMenuContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuContentProps, [\"class\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof (props as any).onInteractOutside === \"function\") {\n        (props as any).onInteractOutside(e);\n      }\n    },\n  });\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"z-50 min-w-32 mt-1 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n          local.class\n        )}\n        {...(rest as any)}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n\nexport type DropdownMenuItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {\n    class?: string;\n    inset?: boolean;\n    variant?: \"default\" | \"destructive\";\n  };\n\nexport const DropdownMenuItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuItemProps, [\n    \"class\",\n    \"inset\",\n    \"variant\",\n  ]);\n\n  return (\n    <DropdownMenuPrimitive.Item\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        local.inset && \"pl-8\",\n        local.variant === \"destructive\" &&\n        \"text-destructive focus:bg-destructive/15 focus:text-destructive\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type DropdownMenuCheckboxItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\nexport const DropdownMenuCheckboxItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [\"class\", \"children\"]);\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <svg class=\"h-4 w-4 fill-none stroke-current stroke-2\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n          </svg>\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {local.children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport type DropdownMenuRadioItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\nexport const DropdownMenuRadioItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuRadioItemProps, [\"class\", \"children\"]);\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      class={cn(\n        \"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <span class=\"h-2 w-2 rounded-full bg-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {local.children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n};\n\nexport interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  inset?: boolean;\n}\n\nexport const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"inset\"]);\n\n  return (\n    <div\n      class={cn(\n        \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n        local.inset && \"pl-8\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport type DropdownMenuSeparatorProps<T extends ValidComponent = \"hr\"> =\n  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {\n    class?: string;\n  };\n\nexport const DropdownMenuSeparator = <T extends ValidComponent = \"hr\">(\n  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>\n) => {\n  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, [\"class\"]);\n\n  return (\n    <DropdownMenuPrimitive.Separator\n      class={cn(\"-mx-1 my-1 h-px bg-border\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  class?: string;\n}\n\nexport const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/index.json

@@ -194,6 +194,16 @@
       "@kobalte/core"
     ]
   },
+  {
+    "name": "logo",
+    "title": "Logo",
+    "description": "logo component.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
   {
     "name": "popover",
     "title": "Popover",

package/registry/input-group.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "ui/input-group.tsx",
-      "content": "// src/components/ui/input-group.tsx\nimport { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Main InputGroup Wrapper --- */\nexport interface InputGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const InputGroup: Component<InputGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex w-full items-center rounded-md border border-input bg-background text-sm shadow-2xs transition-colors focus-within:border-primary focus-within:ring-1 focus-within:ring-primary\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- InputGroup Addon (Prefix / Suffix) --- */\nexport const addonVariants = cva(\n  \"flex items-center shrink-0 text-muted-foreground select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 pr-1\",\n        \"inline-end\": \"order-last pr-3 pl-1 gap-1\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n);\n\nexport interface InputGroupAddonProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof addonVariants> {\n  class?: string;\n}\n\nexport const InputGroupAddon: Component<InputGroupAddonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"align\", \"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(addonVariants({ align: local.align }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- InputGroup Native Input --- */\nexport interface InputGroupInputProps\n  extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\nexport const InputGroupInput: Component<InputGroupInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <input\n      class={cn(\n        \"flex h-9 w-full flex-1 border-0 bg-transparent px-2.5 py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "content": "// src/components/ui/input-group.tsx\nimport { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Main InputGroup Wrapper --- */\nexport interface InputGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const InputGroup: Component<InputGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex w-full items-center rounded-md border border-input bg-muted text-sm shadow-2xs transition-colors focus-within:border-primary focus-within:ring-1 focus-within:ring-primary\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- InputGroup Addon (Prefix / Suffix) --- */\nexport const addonVariants = cva(\n  \"flex items-center shrink-0 text-muted-foreground select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 pr-1\",\n        \"inline-end\": \"order-last pr-3 pl-1 gap-1\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n);\n\nexport interface InputGroupAddonProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof addonVariants> {\n  class?: string;\n}\n\nexport const InputGroupAddon: Component<InputGroupAddonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"align\", \"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(addonVariants({ align: local.align }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- InputGroup Native Input --- */\nexport interface InputGroupInputProps\n  extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\nexport const InputGroupInput: Component<InputGroupInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <input\n      class={cn(\n        \"flex h-9 w-full flex-1 border-0 px-2.5 py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/input.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/input.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Props interface for the Input component extending standard HTML input attributes.\n */\nexport interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\n/**\n * Nikala UI Input component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Input: Component<InputProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\"class\", \"type\"]);\n\n  return (\n    <input\n      type={local.type || \"text\"}\n      class={cn(\n        \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Props interface for the Input component extending standard HTML input attributes.\n */\nexport interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {\n  class?: string;\n}\n\n/**\n * Nikala UI Input component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Input: Component<InputProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\"class\", \"type\"]);\n\n  return (\n    <input\n      type={local.type || \"text\"}\n      class={cn(\n        \"flex h-9 w-full rounded-md border border-input bg-muted px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/list.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/list.tsx",
-      "content": "// src/components/ui/list.tsx\nimport {\n  splitProps,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronRight } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- List Container --- */\nexport interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const List: Component<ListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <div role=\"list\" class={cn(\"flex flex-col gap-1 w-full p-1\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- List Group Container --- */\nexport interface ListGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const ListGroup: Component<ListGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <div class={cn(\"flex flex-col gap-1 w-full my-1\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- List Group Header --- */\nexport interface ListHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  class?: string;\n}\n\nexport const ListHeader: Component<ListHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"title\", \"class\"]);\n  return (\n    <div\n      class={cn(\n        \"px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.title}\n    </div>\n  );\n};\n\n/* --- List Item Variants --- */\nexport const listItemVariants = cva(\n  \"group relative flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors outline-none cursor-pointer select-none disabled:pointer-events-none disabled:opacity-50 transform duration-150 ease-in-out\",\n  {\n    variants: {\n      hoverVariant: {\n        default:\n          \"hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        accent:\n          \"hover:bg-accent/80 hover:text-accent-foreground data-highlighted:bg-accent/80\",\n        primary:\n          \"hover:bg-primary/10 hover:text-primary data-highlighted:bg-primary/10 data-highlighted:text-primary\",\n        muted:\n          \"hover:bg-muted hover:text-foreground data-highlighted:bg-muted\",\n      },\n      size: {\n        sm: \"px-2.5 py-1.5 text-xs\",\n        md: \"px-3 py-2 text-sm\",\n        lg: \"px-4 py-3 text-base\",\n      },\n      active: {\n        true: \"bg-accent text-accent-foreground font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      hoverVariant: \"default\",\n      size: \"md\",\n      active: false,\n    },\n  }\n);\n\nexport interface ListItemProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof listItemVariants> {\n  title?: string;\n  subtitle?: string;\n  avatar?: string;\n  avatarFallback?: string;\n  icon?: Component<{ class?: string }>;\n  shortcut?: string;\n  showChevron?: boolean;\n  href?: string;\n  disabled?: boolean;\n  active?: boolean;\n  class?: string;\n}\n\n/**\n * Nikala UI ListItem Component.\n */\nexport const ListItem: Component<ListItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"title\",\n    \"subtitle\",\n    \"avatar\",\n    \"avatarFallback\",\n    \"icon\",\n    \"shortcut\",\n    \"showChevron\",\n    \"href\",\n    \"disabled\",\n    \"active\",\n    \"hoverVariant\",\n    \"size\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const content = () => (\n    <>\n      {/* Left Visual: Icon, Avatar, or Image */}\n      <div class=\"flex items-center gap-2.5 min-w-0\">\n        <Show when={local.avatar}>\n          <img\n            src={local.avatar}\n            alt={local.title || \"Avatar\"}\n            class=\"w-6 h-6 rounded-full object-cover shrink-0 border border-border\"\n          />\n        </Show>\n\n        <Show when={!local.avatar && local.avatarFallback}>\n          <span class=\"w-6 h-6 rounded-full bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center shrink-0 uppercase\">\n            {local.avatarFallback}\n          </span>\n        </Show>\n\n        <Show when={!local.avatar && !local.avatarFallback && local.icon}>\n          <span class=\"shrink-0 text-muted-foreground group-hover:text-foreground transition-colors\">\n            <Dynamic component={local.icon} class=\"w-4 h-4\" />\n          </span>\n        </Show>\n\n        {/* Main Text Content */}\n        <div class=\"flex flex-col min-w-0 text-left\">\n          <Show when={local.title}>\n            <span class=\"truncate font-medium leading-none\">\n              {local.title}\n            </span>\n          </Show>\n          <Show when={local.subtitle}>\n            <span class=\"truncate text-xs text-muted-foreground font-normal mt-1\">\n              {local.subtitle}\n            </span>\n          </Show>\n          {local.children}\n        </div>\n      </div>\n\n      {/* Right Visual: Shortcut Badge & Trailing Chevron */}\n      <div class=\"flex items-center gap-2 shrink-0\">\n        <Show when={local.shortcut}>\n          <kbd class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground\">\n            {local.shortcut}\n          </kbd>\n        </Show>\n\n        <Show when={local.showChevron}>\n          <ChevronRight class=\"w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors\" />\n        </Show>\n      </div>\n    </>\n  );\n\n  const itemClasses = () =>\n    cn(\n      listItemVariants({\n        hoverVariant: local.hoverVariant,\n        size: local.size,\n        active: local.active,\n      }),\n      local.class\n    );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <div\n          role=\"listitem\"\n          class={itemClasses()}\n          aria-disabled={local.disabled}\n          {...rest}\n        >\n          {content()}\n        </div>\n      }\n    >\n      <a\n        role=\"listitem\"\n        href={local.href}\n        class={itemClasses()}\n        aria-disabled={local.disabled}\n        {...(rest as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n};",
+      "content": "// src/components/ui/list.tsx\nimport {\n  splitProps,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronRight } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- List Container --- */\nexport interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const List: Component<ListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <div role=\"list\" class={cn(\"flex flex-col gap-1 w-full p-1\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- List Group Container --- */\nexport interface ListGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const ListGroup: Component<ListGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <div class={cn(\"flex flex-col gap-1 w-full\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- List Group Header --- */\nexport interface ListHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  class?: string;\n}\n\nexport const ListHeader: Component<ListHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"title\", \"class\"]);\n  return (\n    <div\n      class={cn(\n        \"px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.title}\n    </div>\n  );\n};\n\n/* --- List Item Variants --- */\nexport const listItemVariants = cva(\n  \"group relative flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors outline-none cursor-pointer select-none disabled:pointer-events-none disabled:opacity-50 transform duration-150 ease-in-out\",\n  {\n    variants: {\n      hoverVariant: {\n        default:\n          \"hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        accent:\n          \"hover:bg-accent/80 hover:text-accent-foreground data-highlighted:bg-accent/80\",\n        primary:\n          \"hover:bg-primary/10 hover:text-primary data-highlighted:bg-primary/10 data-highlighted:text-primary\",\n        muted:\n          \"hover:bg-muted hover:text-foreground data-highlighted:bg-muted\",\n      },\n      size: {\n        sm: \"px-2.5 py-1.5 text-xs\",\n        md: \"px-3 py-2 text-sm\",\n        lg: \"px-4 py-3 text-base\",\n      },\n      active: {\n        true: \"bg-accent text-accent-foreground font-semibold\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      hoverVariant: \"default\",\n      size: \"md\",\n      active: false,\n    },\n  }\n);\n\nexport interface ListItemProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof listItemVariants> {\n  title?: string;\n  subtitle?: string;\n  avatar?: string;\n  avatarFallback?: string;\n  icon?: Component<{ class?: string }>;\n  shortcut?: string;\n  showChevron?: boolean;\n  href?: string;\n  disabled?: boolean;\n  active?: boolean;\n  class?: string;\n}\n\n/**\n * Nikala UI ListItem Component.\n */\nexport const ListItem: Component<ListItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"title\",\n    \"subtitle\",\n    \"avatar\",\n    \"avatarFallback\",\n    \"icon\",\n    \"shortcut\",\n    \"showChevron\",\n    \"href\",\n    \"disabled\",\n    \"active\",\n    \"hoverVariant\",\n    \"size\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const content = () => (\n    <>\n      {/* Left Visual: Icon, Avatar, or Image */}\n      <div class=\"flex items-center gap-2.5 min-w-0\">\n        <Show when={local.avatar}>\n          <img\n            src={local.avatar}\n            alt={local.title || \"Avatar\"}\n            class=\"w-10 h-10 rounded-lg object-cover shrink-0 border border-border\"\n          />\n        </Show>\n\n        <Show when={!local.avatar && local.avatarFallback}>\n          <span class=\"w-10 h-10 rounded-lg bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center shrink-0 uppercase\">\n            {local.avatarFallback}\n          </span>\n        </Show>\n\n        <Show when={!local.avatar && !local.avatarFallback && local.icon}>\n          <span class=\"shrink-0 text-muted-foreground group-hover:text-foreground transition-colors\">\n            <Dynamic component={local.icon} class=\"w-4 h-4\" />\n          </span>\n        </Show>\n\n        {/* Main Text Content */}\n        <div class=\"flex flex-col min-w-0 text-left\">\n          <Show when={local.title}>\n            <span class=\"truncate font-medium leading-none\">\n              {local.title}\n            </span>\n          </Show>\n          <Show when={local.subtitle}>\n            <span class=\"truncate text-xs opacity-50 font-normal mt-1\">\n              {local.subtitle}\n            </span>\n          </Show>\n          {local.children}\n        </div>\n      </div>\n\n      {/* Right Visual: Shortcut Badge & Trailing Chevron */}\n      <div class=\"flex items-center gap-2 shrink-0\">\n        <Show when={local.shortcut}>\n          <kbd class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground\">\n            {local.shortcut}\n          </kbd>\n        </Show>\n\n        <Show when={local.showChevron}>\n          <ChevronRight class=\"w-4 h-4 text-muted-foreground transition-colors\" />\n        </Show>\n      </div>\n    </>\n  );\n\n  const itemClasses = () =>\n    cn(\n      listItemVariants({\n        hoverVariant: local.hoverVariant,\n        size: local.size,\n        active: local.active,\n      }),\n      local.class\n    );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <div\n          role=\"listitem\"\n          class={itemClasses()}\n          aria-disabled={local.disabled}\n          {...rest}\n        >\n          {content()}\n        </div>\n      }\n    >\n      <a\n        role=\"listitem\"\n        href={local.href}\n        class={itemClasses()}\n        aria-disabled={local.disabled}\n        {...(rest as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/logo.json

@@ -0,0 +1,17 @@
+{
+  "name": "logo",
+  "title": "Logo",
+  "description": "logo component.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/logo.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface LogoProps extends JSX.SvgSVGAttributes<SVGSVGElement> {\n  class?: string;\n}\n\n/**\n * Official Nikala UI Logo Component with dynamic contrast stroke and accent fill.\n */\nexport const Logo: Component<LogoProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <svg\n      viewBox=\"0 0 223 223\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class={cn(\"h-7 w-7 shrink-0 select-none\", local.class)}\n      {...rest}\n    >\n      <g clip-path=\"url(#nikala-logo-clip0)\">\n        {/* Background Box with Dynamic Theme Accent */}\n        <path\n          d=\"M0 10C0 4.47716 4.47715 0 10 0H213C218.523 0 223 4.47715 223 10V213C223 218.523 218.523 223 213 223H10C4.47716 223 0 218.523 0 213V10Z\"\n          fill=\"currentColor\"\n          class=\"text-primary\"\n        />\n        <g clip-path=\"url(#nikala-logo-clip1)\">\n          {/* Paintbrush Vector Paths Adapting to --primary-foreground */}\n          <path\n            d=\"M304.406 364.173C303.147 366.03 301.738 366.903 299.847 368.109C299.093 368.594 298.339 369.08 297.563 369.58C296.746 370.096 295.929 370.613 295.087 371.145C294.245 371.684 293.402 372.224 292.56 372.764C290.346 374.183 288.127 375.594 285.907 377.003C283.642 378.443 281.381 379.891 279.119 381.338C274.684 384.175 270.243 387.003 265.799 389.826C263.196 387.86 261.543 385.492 259.734 382.813C257.432 379.465 255.089 376.207 252.52 373.055C249.122 368.864 246.081 364.457 243.017 360.02C240.337 356.141 237.507 352.385 234.645 348.639C233.944 347.722 233.244 346.804 232.544 345.886C232.19 345.421 231.836 344.956 231.471 344.477C228.856 341.031 226.35 337.519 223.876 333.97C222.068 331.395 220.171 328.922 218.188 326.48C214.782 322.267 211.726 317.844 208.65 313.389C205.969 309.51 203.14 305.755 200.277 302.009C199.577 301.091 198.877 300.173 198.177 299.255C197.823 298.79 197.468 298.326 197.103 297.847C194.79 294.798 192.553 291.706 190.364 288.567C188.267 285.56 186.094 282.644 183.786 279.794C179.935 275.035 176.476 270.016 173.005 264.978C176.445 262.305 179.941 259.802 183.612 257.457C184.099 257.143 184.587 256.829 185.089 256.505C186.679 255.481 188.271 254.461 189.863 253.441C190.975 252.726 192.086 252.011 193.197 251.296C196.106 249.425 199.016 247.557 201.927 245.689C204.903 243.779 207.878 241.866 210.853 239.953C216.678 236.208 222.505 232.466 228.333 228.726C230.86 230.623 232.252 232.791 233.788 235.512C234.053 235.974 234.319 236.435 234.592 236.911C236.235 239.797 237.775 242.723 239.261 245.694C241.392 249.953 243.79 254.007 246.245 258.083C248.04 261.081 249.715 264.098 251.272 267.229C253.667 272.041 256.413 276.612 259.173 281.219C261.596 285.264 263.845 289.394 266.071 293.549C266.617 294.566 267.163 295.584 267.709 296.601C267.986 297.115 268.262 297.63 268.547 298.161C270.366 301.528 272.256 304.843 274.208 308.135C276.068 311.27 277.812 314.435 279.438 317.698C281.864 322.542 284.628 327.154 287.41 331.798C289.839 335.853 292.092 339.995 294.328 344.159C294.597 344.658 294.866 345.158 295.143 345.673C295.7 346.71 296.256 347.748 296.81 348.786C298.15 351.28 299.518 353.74 300.998 356.154C301.259 356.583 301.519 357.012 301.788 357.454C302.503 358.619 303.23 359.775 303.958 360.931C304.8 362.85 304.8 362.85 304.406 364.173Z\"\n            fill=\"var(--primary-foreground, #ffffff)\"\n          />\n          <path\n            d=\"M147.908 159.434C143.029 162.624 138.255 165.222 132.524 166.53C131.568 166.759 131.568 166.759 130.593 166.992C117.641 169.419 104.681 165.652 93.8424 158.557C84.6301 151.709 78.5873 142.443 75.2903 131.528C75.0234 130.675 75.0234 130.675 74.7511 129.804C72.9741 122.986 73.9008 115.665 74.4194 108.713C75.7267 91.1539 72.9686 78.0313 62.8484 63.365C61.808 61.5353 61.808 61.5353 62.2756 59.3756C74.2777 52.1095 87.8993 50.9005 101.359 53.9904C102.212 54.1829 103.066 54.3753 103.945 54.5736C110.197 56.0433 115.833 57.7788 121.484 60.8918C121.926 61.1331 122.368 61.3745 122.823 61.6232C141.727 72.123 158.382 89.1592 164.804 110.159C170.072 129.189 164.608 147.982 147.908 159.434Z\"\n            fill=\"var(--primary-foreground, #ffffff)\"\n          />\n          <path\n            d=\"M224.945 222.724C223.467 224.948 221.157 226.154 218.937 227.554C218.142 228.066 218.142 228.067 217.331 228.589C215.58 229.716 213.822 230.833 212.065 231.95C210.849 232.73 209.634 233.51 208.418 234.291C205.22 236.344 202.016 238.389 198.811 240.432C195.542 242.519 192.277 244.613 189.012 246.706C182.605 250.813 176.192 254.911 169.776 259.003C163.425 254.055 159.038 246.461 154.501 239.887C151.859 236.063 149.162 232.301 146.129 228.777C140.59 220.962 138.709 211.47 139.907 202.042C141.806 192.774 145.937 185.415 153.125 179.281C153.821 178.654 154.516 178.028 155.232 177.382C161.199 173.349 167.362 171.636 174.492 171.096C175.187 171.029 175.187 171.029 175.896 170.961C185.36 171.183 194.837 174.7 201.562 181.385C202.406 182.334 203.235 183.298 204.044 184.277C204.596 184.933 204.596 184.933 205.159 185.602C207.879 189.006 209.907 192.696 211.94 196.538C212.966 198.458 213.996 200.376 215.027 202.293C215.301 202.803 215.574 203.312 215.856 203.837C218.216 208.207 220.709 212.489 223.254 216.754C225.579 220.827 225.579 220.827 224.945 222.724Z\"\n            fill=\"var(--primary-foreground, #ffffff)\"\n          />\n          <path\n            d=\"M346.445 469.84C341.579 473.016 337.792 473.996 331.992 473.069C323.666 471.041 319.697 464.544 315.142 457.786C314.41 456.773 313.671 455.764 312.923 454.762C312.555 454.269 312.187 453.775 311.808 453.267C310.744 451.858 309.676 450.454 308.605 449.052C304.588 443.792 300.674 438.482 296.873 433.064C294.268 429.365 291.554 425.754 288.807 422.16C288.108 421.244 287.41 420.328 286.711 419.412C286.181 418.717 286.181 418.717 285.639 418.007C283.312 414.94 281.064 411.828 278.863 408.669C275.954 404.511 272.86 400.557 269.591 396.676C270.596 393.987 272.077 392.99 274.463 391.469C275.568 390.758 275.568 390.758 276.694 390.032C277.891 389.276 277.891 389.276 279.111 388.505C279.926 387.983 280.74 387.461 281.58 386.923C283.742 385.538 285.909 384.16 288.077 382.784C290.29 381.378 292.498 379.965 294.707 378.552C299.039 375.782 303.376 373.02 307.716 370.264C310.189 371.73 310.549 372.854 311.779 375.43C313.714 379.343 315.815 383.09 318.072 386.826C320.626 391.064 322.954 395.349 325.158 399.782C326.672 402.673 328.329 405.458 330.013 408.252C332.566 412.491 334.894 416.776 337.098 421.209C338.613 424.099 340.27 426.884 341.953 429.678C344.974 434.704 347.722 439.785 350.305 445.052C350.628 445.646 350.95 446.239 351.282 446.851C355.467 454.895 353.749 464.19 346.445 469.84Z\"\n            fill=\"var(--primary-foreground, #ffffff)\"\n          />\n          <path\n            d=\"M175.175 164.461C174.611 164.495 174.047 164.529 173.466 164.565C161.822 165.517 151.451 170.117 143.632 178.98C141.188 182.058 138.963 185.278 136.798 188.557C134.916 187.16 133.636 185.817 132.364 183.853C132.04 183.352 131.717 182.852 131.383 182.336C131.053 181.817 130.724 181.297 130.384 180.762C130.043 180.241 129.703 179.719 129.351 179.182C129.031 178.682 128.711 178.182 128.381 177.668C128.089 177.211 127.796 176.755 127.495 176.285C126.898 175.109 126.898 175.109 127.21 173.669C127.885 173.594 127.885 173.594 128.573 173.517C144.325 171.353 156.368 162.585 166.151 150.449C168.977 152.315 170.506 155.002 172.283 157.806C172.597 158.285 172.911 158.765 173.234 159.26C175.527 162.839 175.527 162.839 175.175 164.461Z\"\n            fill=\"var(--primary-foreground, #ffffff)\"\n          />\n        </g>\n      </g>\n      <defs>\n        <clipPath id=\"nikala-logo-clip0\">\n          <rect width=\"223\" height=\"223\" rx=\"10\" fill=\"white\" />\n        </clipPath>\n        <clipPath id=\"nikala-logo-clip1\">\n          <rect\n            width=\"377.121\"\n            height=\"377.121\"\n            fill=\"white\"\n            transform=\"translate(431.932 116.81) rotate(102.218)\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/popover.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "ui/popover.tsx",
-      "content": "import { splitProps, type Component, type ComponentProps } from \"solid-js\";\nimport { Popover as KobaltePopover } from \"@kobalte/core/popover\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { X } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\nexport const Popover = KobaltePopover;\n\nexport const PopoverTrigger = KobaltePopover.Trigger;\n\nexport const PopoverArrow: Component<ComponentProps<typeof KobaltePopover.Arrow>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Arrow\n      class={cn(\"fill-popover stroke-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverContent: Component<ComponentProps<typeof KobaltePopover.Content>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\", \"onInteractOutside\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof local.onInteractOutside === \"function\") {\n        local.onInteractOutside(e as any);\n      }\n    },\n  });\n\n  return (\n    <KobaltePopover.Portal>\n      <KobaltePopover.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </KobaltePopover.Content>\n    </KobaltePopover.Portal>\n  );\n};\n\nexport const PopoverTitle: Component<ComponentProps<typeof KobaltePopover.Title>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Title\n      class={cn(\"text-sm font-semibold text-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverDescription: Component<ComponentProps<typeof KobaltePopover.Description>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverCloseButton: Component<ComponentProps<typeof KobaltePopover.CloseButton>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <KobaltePopover.CloseButton\n      class={cn(\n        \"absolute right-2 top-2 rounded-md p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children || <X class=\"h-4 w-4 text-muted-foreground\" />}\n    </KobaltePopover.CloseButton>\n  );\n};",
+      "content": "import { splitProps, type Component, type ComponentProps } from \"solid-js\";\nimport { Popover as KobaltePopover } from \"@kobalte/core/popover\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { X } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\nexport const Popover = KobaltePopover;\n\nexport const PopoverTrigger = KobaltePopover.Trigger;\n\nexport const PopoverArrow: Component<ComponentProps<typeof KobaltePopover.Arrow>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Arrow\n      class={cn(\"fill-popover stroke-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverContent: Component<ComponentProps<typeof KobaltePopover.Content>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\", \"onInteractOutside\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof local.onInteractOutside === \"function\") {\n        local.onInteractOutside(e as any);\n      }\n    },\n  });\n\n  return (\n    <KobaltePopover.Portal>\n      <KobaltePopover.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </KobaltePopover.Content>\n    </KobaltePopover.Portal>\n  );\n};\n\nexport const PopoverTitle: Component<ComponentProps<typeof KobaltePopover.Title>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Title\n      class={cn(\"text-sm font-semibold text-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverDescription: Component<ComponentProps<typeof KobaltePopover.Description>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobaltePopover.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverCloseButton: Component<ComponentProps<typeof KobaltePopover.CloseButton>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <KobaltePopover.CloseButton\n      class={cn(\n        \"absolute right-2 top-2 rounded-md p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children || <X class=\"h-4 w-4 text-muted-foreground\" />}\n    </KobaltePopover.CloseButton>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/progress.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/progress.tsx",
-      "content": "import { splitProps, Show, type Component, type JSX } from \"solid-js\";\nimport { Progress as KobalteProgress } from \"@kobalte/core/progress\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ProgressProps\n  extends Omit<\n    JSX.HTMLAttributes<HTMLDivElement>,\n    \"value\" | \"aria-valuenow\" | \"aria-valuemin\" | \"aria-valuemax\"\n  > {\n  /** The current numeric progress value. */\n  value?: number;\n  /** Minimum progress value. Defaults to 0. */\n  minValue?: number;\n  /** Maximum progress value. Defaults to 100. */\n  maxValue?: number;\n  /** Label text for accessibility and screen readers. */\n  getValueLabel?: (params: { value: number; max: number }) => string;\n  /** Custom label element to display above or beside progress bar. */\n  label?: JSX.Element;\n  /** Optional custom class for root container. */\n  class?: string;\n  /** Optional custom class for indicator fill bar. */\n  indicatorClass?: string;\n}\n\n/**\n * Nikala UI Progress component for showing task completion status or media timeline positions.\n */\nexport const Progress: Component<ProgressProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"getValueLabel\",\n    \"label\",\n    \"class\",\n    \"indicatorClass\",\n  ]);\n\n  return (\n    <KobalteProgress\n      value={local.value ?? 0}\n      minValue={local.minValue ?? 0}\n      maxValue={local.maxValue ?? 100}\n      getValueLabel={local.getValueLabel}\n      class={cn(\"flex w-full flex-col gap-1.5\", local.class)}\n      {...rest}\n    >\n      <Show when={local.label}>\n        <div class=\"flex justify-between text-xs font-medium text-muted-foreground\">\n          <KobalteProgress.Label>{local.label}</KobalteProgress.Label>\n          <KobalteProgress.ValueLabel class=\"font-mono text-foreground\" />\n        </div>\n      </Show>\n\n      <KobalteProgress.Track class=\"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\">\n        <KobalteProgress.Fill\n          class={cn(\n            \"h-full w-[var(--kb-progress-fill-width)] bg-primary transition-all duration-300 ease-in-out\",\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  );\n};\n",
+      "content": "import { splitProps, Show, type Component, type JSX } from \"solid-js\";\nimport { Progress as KobalteProgress } from \"@kobalte/core/progress\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ProgressProps\n  extends Omit<\n    JSX.HTMLAttributes<HTMLDivElement>,\n    \"value\" | \"aria-valuenow\" | \"aria-valuemin\" | \"aria-valuemax\"\n  > {\n  /** The current numeric progress value. */\n  value?: number;\n  /** Minimum progress value. Defaults to 0. */\n  minValue?: number;\n  /** Maximum progress value. Defaults to 100. */\n  maxValue?: number;\n  /** Label text for accessibility and screen readers. */\n  getValueLabel?: (params: { value: number; max: number }) => string;\n  /** Custom label element to display above or beside progress bar. */\n  label?: JSX.Element;\n  /** Optional custom class for root container. */\n  class?: string;\n  /** Optional custom class for indicator fill bar. */\n  indicatorClass?: string;\n}\n\n/**\n * Nikala UI Progress component for showing task completion status or media timeline positions.\n */\nexport const Progress: Component<ProgressProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"getValueLabel\",\n    \"label\",\n    \"class\",\n    \"indicatorClass\",\n  ]);\n\n  return (\n    <KobalteProgress\n      value={local.value ?? 0}\n      minValue={local.minValue ?? 0}\n      maxValue={local.maxValue ?? 100}\n      getValueLabel={local.getValueLabel}\n      class={cn(\"flex w-full flex-col gap-1.5\", local.class)}\n      {...rest}\n    >\n      <Show when={local.label}>\n        <div class=\"flex justify-between text-xs font-medium text-muted-foreground\">\n          <KobalteProgress.Label>{local.label}</KobalteProgress.Label>\n          <KobalteProgress.ValueLabel class=\"font-mono text-foreground\" />\n        </div>\n      </Show>\n\n      <KobalteProgress.Track class=\"relative h-2 w-full overflow-hidden rounded-lg bg-primary/20\">\n        <KobalteProgress.Fill\n          class={cn(\n            \"h-full w-(--kb-progress-fill-width) bg-primary transition-all duration-300 ease-in-out\",\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/select.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/select.tsx",
-      "content": "import { splitProps, type JSX, type ValidComponent } from \"solid-js\";\nimport * as SelectPrimitive from \"@kobalte/core/select\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SelectRootProps<Option = any, OptGroup = any, T extends ValidComponent = \"div\"> =\n  SelectPrimitive.SelectRootProps<Option, OptGroup, T> & {\n    class?: string;\n  };\n\n/**\n * Root Select component built on top of Kobalte headless primitives.\n */\nexport const Select = <Option = any, OptGroup = any, T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>\n) => {\n  const [local, rest] = splitProps(props as SelectRootProps, [\"class\"]);\n\n  return <SelectPrimitive.Root class={cn(\"relative w-full\", local.class)} {...(rest as any)} />;\n};\n\nexport type SelectTriggerProps<T extends ValidComponent = \"button\"> =\n  SelectPrimitive.SelectTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Trigger button opening the Select options list.\n */\nexport const SelectTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, SelectTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectTriggerProps, [\"class\", \"children\"]);\n\n  return (\n    <SelectPrimitive.Trigger\n      class={cn(\n        \"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer text-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <SelectPrimitive.Icon\n        as=\"svg\"\n        class=\"h-4 w-4 opacity-50 transition-transform\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport type SelectValueProps<Option, T extends ValidComponent = \"span\"> =\n  SelectPrimitive.SelectValueProps<Option, T> & {\n    class?: string;\n  };\n\n/**\n * Renders the currently selected option text or placeholder.\n */\nexport const SelectValue = <Option = any, T extends ValidComponent = \"span\">(\n  props: PolymorphicProps<T, SelectValueProps<Option, T>>\n) => {\n  const [local, rest] = splitProps(props as SelectValueProps<Option>, [\"class\"]);\n\n  return (\n    <SelectPrimitive.Value\n      class={cn(\"block truncate\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SelectContentProps<T extends ValidComponent = \"div\"> =\n  SelectPrimitive.SelectContentProps<T> & {\n    class?: string;\n  };\n\n/**\n * Portaled overlay container rendering the listbox options.\n */\nexport const SelectContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SelectContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectContentProps, [\"class\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof (props as any).onInteractOutside === \"function\") {\n        (props as any).onInteractOutside(e);\n      }\n    },\n  });\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80\",\n          local.class\n        )}\n        {...rest}\n      >\n        <SelectPrimitive.Listbox class=\"p-1 outline-none\" />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport type SelectItemProps<T extends ValidComponent = \"li\"> =\n  SelectPrimitive.SelectItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Individual option item choice inside SelectContent.\n */\nexport const SelectItem = <T extends ValidComponent = \"li\">(\n  props: PolymorphicProps<T, SelectItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectItemProps, [\"class\", \"children\"]);\n\n  return (\n    <SelectPrimitive.Item\n      class={cn(\n        \"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      <SelectPrimitive.ItemIndicator class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <svg class=\"h-4 w-4 fill-none stroke-current stroke-2\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>\n    </SelectPrimitive.Item>\n  );\n};",
+      "content": "import { splitProps, type JSX, type ValidComponent } from \"solid-js\";\nimport * as SelectPrimitive from \"@kobalte/core/select\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SelectRootProps<Option = any, OptGroup = any, T extends ValidComponent = \"div\"> =\n  SelectPrimitive.SelectRootProps<Option, OptGroup, T> & {\n    class?: string;\n  };\n\n/**\n * Root Select component built on top of Kobalte headless primitives.\n */\nexport const Select = <Option = any, OptGroup = any, T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>\n) => {\n  const [local, rest] = splitProps(props as SelectRootProps, [\"class\"]);\n\n  return <SelectPrimitive.Root class={cn(\"relative w-full\", local.class)} {...(rest as any)} />;\n};\n\nexport type SelectTriggerProps<T extends ValidComponent = \"button\"> =\n  SelectPrimitive.SelectTriggerProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Trigger button opening the Select options list.\n */\nexport const SelectTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, SelectTriggerProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectTriggerProps, [\"class\", \"children\"]);\n\n  return (\n    <SelectPrimitive.Trigger\n      class={cn(\n        \"flex h-9 w-full items-center justify-between rounded-md border border-input bg-muted px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer text-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <SelectPrimitive.Icon\n        as=\"svg\"\n        class=\"h-4 w-4 opacity-50 transition-transform\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport type SelectValueProps<Option, T extends ValidComponent = \"span\"> =\n  SelectPrimitive.SelectValueProps<Option, T> & {\n    class?: string;\n  };\n\n/**\n * Renders the currently selected option text or placeholder.\n */\nexport const SelectValue = <Option = any, T extends ValidComponent = \"span\">(\n  props: PolymorphicProps<T, SelectValueProps<Option, T>>\n) => {\n  const [local, rest] = splitProps(props as SelectValueProps<Option>, [\"class\"]);\n\n  return (\n    <SelectPrimitive.Value\n      class={cn(\"block truncate\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SelectContentProps<T extends ValidComponent = \"div\"> =\n  SelectPrimitive.SelectContentProps<T> & {\n    class?: string;\n  };\n\n/**\n * Portaled overlay container rendering the listbox options.\n */\nexport const SelectContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SelectContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectContentProps, [\"class\"]);\n  let contentRef: HTMLElement | undefined;\n\n  createClickOutside({\n    target: () => contentRef,\n    onInteractOutside: (e) => {\n      if (typeof (props as any).onInteractOutside === \"function\") {\n        (props as any).onInteractOutside(e);\n      }\n    },\n  });\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={(el) => {\n          contentRef = el;\n          if (typeof (props as any).ref === \"function\") (props as any).ref(el);\n        }}\n        class={cn(\n          \"relative z-50 min-w-8rem overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80\",\n          local.class\n        )}\n        {...rest}\n      >\n        <SelectPrimitive.Listbox class=\"p-1 outline-none\" />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport type SelectItemProps<T extends ValidComponent = \"li\"> =\n  SelectPrimitive.SelectItemProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Individual option item choice inside SelectContent.\n */\nexport const SelectItem = <T extends ValidComponent = \"li\">(\n  props: PolymorphicProps<T, SelectItemProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SelectItemProps, [\"class\", \"children\"]);\n\n  return (\n    <SelectPrimitive.Item\n      class={cn(\n        \"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      <SelectPrimitive.ItemIndicator class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <svg class=\"h-4 w-4 fill-none stroke-current stroke-2\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>\n    </SelectPrimitive.Item>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/skeleton.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/skeleton.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Nikala UI Skeleton component for rendering animated pulse loading placeholders.\n */\nexport const Skeleton: Component<SkeletonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"animate-pulse rounded-md bg-muted\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Nikala UI Skeleton component for rendering animated pulse loading placeholders.\n */\nexport const Skeleton: Component<SkeletonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"animate-pulse rounded-md bg-accent\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/switch.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/switch.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SwitchProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Uncontrolled default checked state */\n  defaultChecked?: boolean;\n  /** Event handler triggered when toggle state changes */\n  onChange?: (checked: boolean) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI Switch component for boolean toggle inputs built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Switch: Component<SwitchProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"checked\",\n    \"defaultChecked\",\n    \"onChange\",\n    \"disabled\",\n    \"class\",\n    \"onClick\",\n  ]);\n\n  const [isChecked, setIsChecked] = createControllableSignal({\n    value: () => local.checked,\n    defaultValue: local.defaultChecked ?? false,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const toggle = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    setIsChecked(!isChecked());\n\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={Boolean(isChecked())}\n      data-state={isChecked() ? \"checked\" : \"unchecked\"}\n      disabled={local.disabled}\n      onClick={toggle}\n      class={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n        local.class\n      )}\n      {...rest}\n    >\n      <span\n        data-state={isChecked() ? \"checked\" : \"unchecked\"}\n        class={cn(\n          \"pointer-events-none block h-4 w-4 rounded-sm bg-primary-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </button>\n  );\n};",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SwitchProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Uncontrolled default checked state */\n  defaultChecked?: boolean;\n  /** Event handler triggered when toggle state changes */\n  onChange?: (checked: boolean) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI Switch component for boolean toggle inputs built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Switch: Component<SwitchProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"checked\",\n    \"defaultChecked\",\n    \"onChange\",\n    \"disabled\",\n    \"class\",\n    \"onClick\",\n  ]);\n\n  const [isChecked, setIsChecked] = createControllableSignal({\n    value: () => local.checked,\n    defaultValue: local.defaultChecked ?? false,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const toggle = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    setIsChecked(!isChecked());\n\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={isChecked()}\n      data-state={isChecked() ? \"checked\" : \"unchecked\"}\n      disabled={local.disabled}\n      onClick={toggle}\n      class={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted\",\n        local.class\n      )}\n      {...rest}\n    >\n      <span\n        data-state={isChecked() ? \"checked\" : \"unchecked\"}\n        class={cn(\n          \"pointer-events-none block h-4 w-4 rounded-sm bg-primary-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </button>\n  );\n};",
       "type": "registry:ui"
     }
   ]

package/registry/tabs.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/tabs.tsx",
-      "content": "import {\n  createContext,\n  useContext,\n  splitProps,\n  Show,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\ninterface TabsContextValue {\n  value: Accessor<string | undefined>;\n  setValue: (value: string) => void;\n  orientation: Accessor<\"horizontal\" | \"vertical\">;\n}\n\nconst TabsContext = createContext<TabsContextValue>();\n\nexport interface TabsProps\n  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Controlled active tab value */\n  value?: string;\n  /** Uncontrolled default active tab value */\n  defaultValue?: string;\n  /** Callback fired when active tab changes */\n  onChange?: (value: string) => void;\n  /** Layout orientation of tab triggers and content */\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n}\n\n/**\n * Root Tabs container component managing active tab context state and orientation.\n */\nexport const Tabs: Component<TabsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"orientation\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const [currentValue, setCurrentValue] = createControllableSignal<string>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const orientation = () => local.orientation || \"horizontal\";\n\n  const contextValue: TabsContextValue = {\n    value: currentValue,\n    setValue: (val: string) => setCurrentValue(val),\n    orientation,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        data-orientation={orientation()}\n        class={cn(\n          \"w-full\",\n          orientation() === \"vertical\" ? \"flex flex-row gap-4\" : \"flex flex-col gap-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nexport interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Container wrapper for Tab triggers.\n */\nexport const TabsList: Component<TabsListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const context = useContext(TabsContext);\n\n  const isVertical = () => context?.orientation() === \"vertical\";\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-orientation={context?.orientation() || \"horizontal\"}\n      class={cn(\n        \"inline-flex rounded-lg bg-muted p-1 text-muted-foreground\",\n        isVertical()\n          ? \"flex-col h-auto w-auto items-stretch justify-start\"\n          : \"h-9 items-center justify-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface TabsTriggerProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Unique value identifier for this tab */\n  value: string;\n  class?: string;\n}\n\n/**\n * Tab button trigger to activate a specific tab panel.\n */\nexport const TabsTrigger: Component<TabsTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"disabled\",\n    \"class\",\n    \"children\",\n    \"onClick\",\n  ]);\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error(\"TabsTrigger must be used within a Tabs component\");\n  }\n\n  const isSelected = () => context.value() === local.value;\n  const isVertical = () => context.orientation() === \"vertical\";\n\n  const handleClick = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    context.setValue(local.value);\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isSelected()}\n      data-state={isSelected() ? \"active\" : \"inactive\"}\n      data-orientation={context.orientation()}\n      disabled={local.disabled}\n      onClick={handleClick}\n      class={cn(\n        \"inline-flex items-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm cursor-pointer\",\n        isVertical() ? \"justify-start py-1.5\" : \"justify-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Value matching the corresponding tab trigger */\n  value: string;\n  class?: string;\n}\n\n/**\n * Content panel revealed when the associated tab is active.\n */\nexport const TabsContent: Component<TabsContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"class\", \"children\"]);\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error(\"TabsContent must be used within a Tabs component\");\n  }\n\n  const isSelected = () => context.value() === local.value;\n  const isVertical = () => context.orientation() === \"vertical\";\n\n  return (\n    <Show when={isSelected()}>\n      <div\n        role=\"tabpanel\"\n        data-state={isSelected() ? \"active\" : \"inactive\"}\n        data-orientation={context.orientation()}\n        class={cn(\n          \"ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          isVertical() ? \"flex-1 mt-0\" : \"mt-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};",
+      "content": "import {\n  createContext,\n  useContext,\n  splitProps,\n  Show,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { createControllableSignal } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\ninterface TabsContextValue {\n  value: Accessor<string | undefined>;\n  setValue: (value: string) => void;\n  orientation: Accessor<\"horizontal\" | \"vertical\">;\n}\n\nconst TabsContext = createContext<TabsContextValue>();\n\nexport interface TabsProps\n  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Controlled active tab value */\n  value?: string;\n  /** Uncontrolled default active tab value */\n  defaultValue?: string;\n  /** Callback fired when active tab changes */\n  onChange?: (value: string) => void;\n  /** Layout orientation of tab triggers and content */\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n}\n\n/**\n * Root Tabs container component managing active tab context state and orientation.\n */\nexport const Tabs: Component<TabsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"orientation\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const [currentValue, setCurrentValue] = createControllableSignal<string>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const orientation = () => local.orientation || \"horizontal\";\n\n  const contextValue: TabsContextValue = {\n    value: currentValue,\n    setValue: (val: string) => setCurrentValue(val),\n    orientation,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        data-orientation={orientation()}\n        class={cn(\n          \"w-full\",\n          orientation() === \"vertical\" ? \"flex flex-row gap-4\" : \"flex flex-col gap-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nexport interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Container wrapper for Tab triggers.\n */\nexport const TabsList: Component<TabsListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const context = useContext(TabsContext);\n\n  const isVertical = () => context?.orientation() === \"vertical\";\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-orientation={context?.orientation() || \"horizontal\"}\n      class={cn(\n        \"inline-flex rounded-lg bg-muted p-1 text-muted-foreground\",\n        isVertical()\n          ? \"flex-col h-auto w-auto items-stretch justify-start\"\n          : \"h-9 items-center justify-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface TabsTriggerProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /** Unique value identifier for this tab */\n  value: string;\n  class?: string;\n}\n\n/**\n * Tab button trigger to activate a specific tab panel.\n */\nexport const TabsTrigger: Component<TabsTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"disabled\",\n    \"class\",\n    \"children\",\n    \"onClick\",\n  ]);\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error(\"TabsTrigger must be used within a Tabs component\");\n  }\n\n  const isSelected = () => context.value() === local.value;\n  const isVertical = () => context.orientation() === \"vertical\";\n\n  const handleClick = (\n    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }\n  ) => {\n    if (local.disabled) return;\n    context.setValue(local.value);\n    if (typeof local.onClick === \"function\") {\n      local.onClick(e);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isSelected()}\n      data-state={isSelected() ? \"active\" : \"inactive\"}\n      data-orientation={context.orientation()}\n      disabled={local.disabled}\n      onClick={handleClick}\n      class={cn(\n        \"inline-flex items-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-accent data-[state=active]:border data-[state=active]:border-border data-[state=active]:text-foreground data-[state=active]:shadow-sm cursor-pointer\",\n        isVertical() ? \"justify-start py-1.5\" : \"justify-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Value matching the corresponding tab trigger */\n  value: string;\n  class?: string;\n}\n\n/**\n * Content panel revealed when the associated tab is active.\n */\nexport const TabsContent: Component<TabsContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"class\", \"children\"]);\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error(\"TabsContent must be used within a Tabs component\");\n  }\n\n  const isSelected = () => context.value() === local.value;\n  const isVertical = () => context.orientation() === \"vertical\";\n\n  return (\n    <Show when={isSelected()}>\n      <div\n        role=\"tabpanel\"\n        data-state={isSelected() ? \"active\" : \"inactive\"}\n        data-orientation={context.orientation()}\n        class={cn(\n          \"ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          isVertical() ? \"flex-1 mt-0\" : \"mt-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};",
       "type": "registry:ui"
     }
   ]