@nikala-ui/core 0.11.0 → 0.12.1

package/registry/form-message.json

@@ -4,12 +4,13 @@
   "description": "Validation message helper connected to createForm errors and touched state.",
   "type": "registry:ui",
   "registryDependencies": [
-    "field"
+    "field",
+    "create-form"
   ],
   "files": [
     {
       "path": "ui/form-message.tsx",
-      "content": "import { Show, splitProps, type JSX } from \"solid-js\";\nimport type { CreateFormReturn } from \"@nikala-ui/hooks\";\nimport { FieldError, type FieldErrorProps } from \"./field\";\n\ntype FormState<T extends Record<string, any>> = Pick<\n  CreateFormReturn<T>,\n  \"errors\" | \"touched\"\n>;\n\nexport interface FormMessageProps<\n  T extends Record<string, any>,\n  K extends keyof T,\n> extends Omit<FieldErrorProps, \"children\"> {\n  form: FormState<T>;\n  name: K;\n  /** Show the message even before the field has been touched. */\n  showUntouched?: boolean;\n}\n\n/** Displays a field's validation error from createForm when it should be visible. */\nexport function FormMessage<\n  T extends Record<string, any>,\n  K extends keyof T,\n>(props: FormMessageProps<T, K>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"form\", \"name\", \"showUntouched\", \"class\"]);\n  const error = () => local.form.errors()[local.name] as string | undefined;\n  const touched = () => local.form.touched()[local.name] === true;\n\n  return (\n    <Show when={error() && (local.showUntouched || touched())}>\n      <FieldError class={local.class} {...rest}>\n        {error()}\n      </FieldError>\n    </Show>\n  );\n}\n",
+      "content": "import { Show, splitProps, type JSX } from \"solid-js\";\nimport type { CreateFormReturn } from \"@/hooks/create-form\";\nimport { FieldError, type FieldErrorProps } from \"@/components/ui/field\";\n\ntype FormState<T extends Record<string, any>> = Pick<\n  CreateFormReturn<T>,\n  \"errors\" | \"touched\"\n>;\n\nexport interface FormMessageProps<\n  T extends Record<string, any>,\n  K extends keyof T,\n> extends Omit<FieldErrorProps, \"children\"> {\n  form: FormState<T>;\n  name: K;\n  /** Show the message even before the field has been touched. */\n  showUntouched?: boolean;\n}\n\n/** Displays a field's validation error from createForm when it should be visible. */\nexport function FormMessage<\n  T extends Record<string, any>,\n  K extends keyof T,\n>(props: FormMessageProps<T, K>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"form\", \"name\", \"showUntouched\", \"class\"]);\n  const error = () => local.form.errors()[local.name] as string | undefined;\n  const touched = () => local.form.touched()[local.name] === true;\n\n  return (\n    <Show when={error() && (local.showUntouched || touched())}>\n      <FieldError class={local.class} {...rest}>\n        {error()}\n      </FieldError>\n    </Show>\n  );\n}\n",
       "type": "registry:ui"
     }
   ]

package/registry/icon-button.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/icon-button.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface IconButtonProps\n  extends Omit<ButtonProps, \"size\" | \"children\"> {\n  /** Accessible label for the icon-only button. */\n  label: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  children?: JSX.Element;\n}\n\n/** An accessible square button intended for a single icon action. */\nexport const IconButton: Component<IconButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"label\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <Button\n      size=\"icon\"\n      aria-label={local.label}\n      class={cn(\n        {\n          \"size-8\": local.size === \"sm\",\n          \"size-9\": !local.size || local.size === \"default\",\n          \"size-10\": local.size === \"lg\",\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Button>\n  );\n};\n",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { Button, type ButtonProps } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface IconButtonProps\n  extends Omit<ButtonProps, \"size\" | \"children\"> {\n  /** Accessible label for the icon-only button. */\n  label: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  children?: JSX.Element;\n}\n\n/** An accessible square button intended for a single icon action. */\nexport const IconButton: Component<IconButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"label\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <Button\n      size=\"icon\"\n      aria-label={local.label}\n      class={cn(\n        {\n          \"size-8\": local.size === \"sm\",\n          \"size-9\": !local.size || local.size === \"default\",\n          \"size-10\": local.size === \"lg\",\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Button>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/index.json

@@ -21,6 +21,20 @@
       "class-variance-authority"
     ]
   },
+  {
+    "name": "api-table",
+    "title": "API Table",
+    "description": "A structured, clean API reference table component for documenting props, options, and events.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "table",
+      "section-heading"
+    ]
+  },
   {
     "name": "aspect-ratio",
     "title": "Aspect Ratio",
@@ -112,6 +126,18 @@
       "spinner"
     ]
   },
+  {
+    "name": "callout",
+    "title": "Callout",
+    "description": "A semantic callout and alert block with status variants, icons, and titles for documentation and notices.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority",
+      "lucide-solid"
+    ]
+  },
   {
     "name": "card",
     "title": "Card",
@@ -130,6 +156,41 @@
     "dependencies": [
       "clsx",
       "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "create-controllable-signal"
+    ]
+  },
+  {
+    "name": "code-block",
+    "title": "Code Block",
+    "description": "A code block container with filename header, language indicator, and interactive copy to clipboard button.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid",
+      "shiki"
+    ],
+    "registryDependencies": [
+      "button",
+      "badge",
+      "tooltip",
+      "tabs",
+      "create-clipboard"
+    ]
+  },
+  {
+    "name": "code-group",
+    "title": "Code Group",
+    "description": "A compound tabbed code container for organizing multiple files, languages, and snippets built on Tabs.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "tabs"
     ]
   },
   {
@@ -173,7 +234,37 @@
       "kbd",
       "input-group",
       "list",
-      "scroll-area"
+      "scroll-area",
+      "create-keybindings"
+    ]
+  },
+  {
+    "name": "component-viewer",
+    "title": "Component Viewer",
+    "description": "An interactive preview canvas and code viewer container with responsive viewports, canvas grid, and AI prompts.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "tabs",
+      "button",
+      "tooltip",
+      "code-block",
+      "create-clipboard"
+    ]
+  },
+  {
+    "name": "container",
+    "title": "Container",
+    "description": "A responsive layout container constraining maximum width with semantic padding tokens.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority"
     ]
   },
   {
@@ -218,7 +309,8 @@
       "@kobalte/core"
     ],
     "registryDependencies": [
-      "scroll-area"
+      "scroll-area",
+      "create-click-outside"
     ]
   },
   {
@@ -258,6 +350,20 @@
       "label"
     ]
   },
+  {
+    "name": "file-tree",
+    "title": "File Tree",
+    "description": "An interactive hierarchical directory file tree component built on Collapsible.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "collapsible"
+    ]
+  },
   {
     "name": "footer",
     "title": "Footer",
@@ -275,7 +381,8 @@
     "description": "Validation message helper connected to createForm errors and touched state.",
     "type": "registry:ui",
     "registryDependencies": [
-      "field"
+      "field",
+      "create-form"
     ]
   },
   {
@@ -455,6 +562,37 @@
       "create-long-press"
     ]
   },
+  {
+    "name": "package-manager-tabs",
+    "title": "Package Manager Tabs",
+    "description": "An interactive command tab bar supporting customizable package managers (bun, pnpm, npm, yarn, deno, bunx, npx) with copy functionality.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "button",
+      "tooltip",
+      "tabs",
+      "create-clipboard"
+    ]
+  },
+  {
+    "name": "pager",
+    "title": "Pager",
+    "description": "Previous and next article navigation links with card previews for documentation and blog layouts.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "card"
+    ]
+  },
   {
     "name": "pagination",
     "title": "Pagination",
@@ -490,6 +628,9 @@
       "tailwind-merge",
       "@kobalte/core",
       "lucide-solid"
+    ],
+    "registryDependencies": [
+      "create-click-outside"
     ]
   },
   {
@@ -556,6 +697,39 @@
       "rating"
     ]
   },
+  {
+    "name": "rich-text-editor",
+    "title": "Rich Text Editor",
+    "description": "A full-featured WYSIWYG rich text editor with toolbar, bubble formatting, tables, task lists, and image uploads built on Tiptap.",
+    "type": "registry:ui",
+    "dependencies": [
+      "@tiptap/core",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link",
+      "@tiptap/extension-image",
+      "@tiptap/extension-placeholder",
+      "@tiptap/extension-task-list",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-table",
+      "@tiptap/extension-table-row",
+      "@tiptap/extension-table-cell",
+      "@tiptap/extension-table-header",
+      "@tiptap/extension-underline",
+      "@tiptap/extension-text-align",
+      "@tiptap/extension-highlight",
+      "@tiptap/extension-character-count",
+      "@tiptap/extension-subscript",
+      "@tiptap/extension-superscript",
+      "@tiptap/extension-typography",
+      "tiptap-markdown",
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "create-tiptap-editor"
+    ]
+  },
   {
     "name": "scroll-area",
     "title": "Scroll Area",
@@ -570,6 +744,20 @@
       "create-resize-observer"
     ]
   },
+  {
+    "name": "section-heading",
+    "title": "Section Heading",
+    "description": "A reusable heading block with title, optional badge, and description. Supports page and section variants.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority"
+    ],
+    "registryDependencies": [
+      "badge"
+    ]
+  },
   {
     "name": "select",
     "title": "Select",
@@ -581,7 +769,8 @@
       "@kobalte/core"
     ],
     "registryDependencies": [
-      "scroll-area"
+      "scroll-area",
+      "create-click-outside"
     ]
   },
   {
@@ -681,6 +870,19 @@
       "class-variance-authority"
     ]
   },
+  {
+    "name": "steps",
+    "title": "Steps",
+    "description": "A vertical multi-step instruction container with connecting progress line and numbered step indicators.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "badge"
+    ]
+  },
   {
     "name": "switch",
     "title": "Switch",
@@ -689,6 +891,25 @@
     "dependencies": [
       "clsx",
       "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "create-controllable-signal"
+    ]
+  },
+  {
+    "name": "table-of-contents",
+    "title": "Table of Contents",
+    "description": "An accessible heading navigation tree with ScrollSpy tracking and smooth scrolling, composed of ScrollArea and List.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority"
+    ],
+    "registryDependencies": [
+      "scroll-area",
+      "list",
+      "create-scroll-position"
     ]
   },
   {
@@ -709,6 +930,9 @@
     "dependencies": [
       "clsx",
       "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "create-controllable-signal"
     ]
   },
   {
@@ -734,7 +958,8 @@
     ],
     "registryDependencies": [
       "button",
-      "dropdown-menu"
+      "dropdown-menu",
+      "create-color-mode"
     ]
   },
   {
@@ -748,6 +973,42 @@
       "class-variance-authority"
     ]
   },
+  {
+    "name": "titlebar-tabs",
+    "title": "Titlebar Tabs",
+    "description": "Native draggable tab bar integrated directly inside desktop titlebars for multi-document applications.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "button",
+      "tooltip",
+      "create-document-tabs"
+    ]
+  },
+  {
+    "name": "titlebar",
+    "title": "Titlebar",
+    "description": "A native-feeling custom titlebar for frameless desktop windows supporting macOS Traffic Lights and Windows 11 controls.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "titlebar-tabs",
+      "button",
+      "tooltip",
+      "create-tauri-window",
+      "create-document-tabs"
+    ]
+  },
   {
     "name": "toast",
     "title": "Toast / Sonner",
@@ -797,6 +1058,25 @@
       "@kobalte/core"
     ]
   },
+  {
+    "name": "updater-modal",
+    "title": "Updater Modal",
+    "description": "An automated application auto-updater dialog for Tauri v2 with release notes preview, download progress bar, and relaunch actions.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "dialog",
+      "button",
+      "badge",
+      "progress",
+      "alert",
+      "create-app-updater"
+    ]
+  },
   {
     "name": "forgot-password-01",
     "title": "Forgot Password 01 — Account Recovery Flow",
@@ -1154,5 +1434,56 @@
     "title": "createChatScroll",
     "description": "SolidJS reactive primitive for automated chat container scrolling with manual scroll-up detection",
     "type": "registry:hook"
+  },
+  {
+    "name": "create-tauri-window",
+    "title": "createTauriWindow",
+    "description": "SolidJS reactive primitive for interacting with and controlling Tauri v2 application window states",
+    "type": "registry:hook"
+  },
+  {
+    "name": "create-global-shortcut",
+    "title": "createGlobalShortcut",
+    "description": "SolidJS reactive primitive for registering OS-level global keyboard shortcuts via Tauri v2 plugin",
+    "type": "registry:hook"
+  },
+  {
+    "name": "create-app-updater",
+    "title": "createAppUpdater",
+    "description": "SolidJS reactive primitive for controlling and observing Tauri v2 application updates",
+    "type": "registry:hook"
+  },
+  {
+    "name": "create-document-tabs",
+    "title": "createDocumentTabs",
+    "description": "SolidJS reactive primitive for managing multi-document tabs, editor buffers, and browser tab stacks with adjacent activation and pinned state",
+    "type": "registry:hook"
+  },
+  {
+    "name": "create-tiptap-editor",
+    "title": "createTiptapEditor",
+    "description": "Fine-grained reactive SolidJS primitive for managing Tiptap rich text editor instances, signals, and formatting commands.",
+    "type": "registry:hook",
+    "dependencies": [
+      "@tiptap/core",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link",
+      "@tiptap/extension-image",
+      "@tiptap/extension-placeholder",
+      "@tiptap/extension-task-list",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-table",
+      "@tiptap/extension-table-row",
+      "@tiptap/extension-table-cell",
+      "@tiptap/extension-table-header",
+      "@tiptap/extension-underline",
+      "@tiptap/extension-text-align",
+      "@tiptap/extension-highlight",
+      "@tiptap/extension-character-count",
+      "@tiptap/extension-subscript",
+      "@tiptap/extension-superscript",
+      "@tiptap/extension-typography",
+      "tiptap-markdown"
+    ]
   }
 ]

package/registry/navbar.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "ui/navbar.tsx",
-      "content": "import {\n  createContext,\n  createSignal,\n  useContext,\n  splitProps,\n  Show,\n  type JSX,\n  type ParentComponent,\n  type Component,\n  type Accessor,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Menu, X } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Navbar Context --- */\ninterface NavbarContextValue {\n  isOpen: Accessor<boolean>;\n  setIsOpen: (open: boolean) => void;\n  toggleMobileMenu: () => void;\n}\n\nconst NavbarContext = createContext<NavbarContextValue>();\n\nexport function useNavbar() {\n  const context = useContext(NavbarContext);\n  if (!context) {\n    throw new Error(\"useNavbar must be used within a <Navbar /> component\");\n  }\n  return context;\n}\n\n/* --- Root Navbar --- */\nexport const navbarVariants = cva(\n  \"w-full transition-all duration-200 z-40\",\n  {\n    variants: {\n      variant: {\n        default: \"border-b border-border/60 bg-background/80 backdrop-blur-md\",\n        floating: \"my-3 rounded-lg border border-border/80 bg-background/90 backdrop-blur-md shadow-sm\",\n        bordered: \"border-b border-border bg-background\",\n        transparent: \"bg-transparent border-transparent\",\n      },\n      isSticky: {\n        true: \"sticky top-0\",\n        false: \"relative\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      isSticky: true,\n    },\n  }\n);\n\nexport interface NavbarProps\n  extends JSX.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof navbarVariants> {\n  maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport const Navbar: ParentComponent<NavbarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"variant\",\n    \"isSticky\",\n    \"maxWidth\",\n    \"open\",\n    \"onOpenChange\",\n    \"children\",\n  ]);\n\n  const [internalOpen, setInternalOpen] = createSignal(false);\n  const isOpen = () => (local.open !== undefined ? local.open : internalOpen());\n\n  const setIsOpen = (open: boolean) => {\n    if (local.open === undefined) {\n      setInternalOpen(open);\n    }\n    local.onOpenChange?.(open);\n  };\n\n  const toggleMobileMenu = () => setIsOpen(!isOpen());\n\n  const maxWidthClass = () => {\n    switch (local.maxWidth) {\n      case \"sm\":\n        return \"max-w-screen-sm\";\n      case \"md\":\n        return \"max-w-screen-md\";\n      case \"lg\":\n        return \"max-w-screen-lg\";\n      case \"xl\":\n        return \"max-w-screen-xl\";\n      case \"full\":\n        return \"max-w-full\";\n      case \"2xl\":\n      default:\n        return \"max-w-screen-2xl\";\n    }\n  };\n\n  return (\n    <NavbarContext.Provider value={{ isOpen, setIsOpen, toggleMobileMenu }}>\n      <header\n        class={cn(\n          navbarVariants({\n            variant: local.variant,\n            isSticky: local.isSticky,\n          }),\n          local.variant === \"floating\" && cn(\"mx-auto\", maxWidthClass()),\n          local.class\n        )}\n        {...rest}\n      >\n        <div class={cn(\"w-full\", local.variant !== \"floating\" && cn(\"mx-auto\", maxWidthClass()))}>\n          {local.children}\n        </div>\n      </header>\n    </NavbarContext.Provider>\n  );\n};\n\n/* --- Navbar Container (Top Flex Row) --- */\nexport interface NavbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarContainer: ParentComponent<NavbarContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex h-14 md:h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-3 w-full\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Brand / Logo Container --- */\nexport interface NavbarBrandProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n}\n\nexport const NavbarBrand: ParentComponent<NavbarBrandProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <a\n      class={cn(\n        \"flex items-center gap-2 font-bold text-foreground transition-opacity hover:opacity-90 cursor-pointer shrink-0\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n\n/* --- Navbar Content / Section --- */\nexport const navbarContentVariants = cva(\"flex items-center gap-1 sm:gap-2 h-full\", {\n  variants: {\n    justify: {\n      start: \"justify-start flex-1\",\n      center: \"justify-center flex-1\",\n      end: \"justify-end flex-1\",\n    },\n  },\n  defaultVariants: {\n    justify: \"center\",\n  },\n});\n\nexport interface NavbarContentProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof navbarContentVariants> {\n  class?: string;\n  hideOnMobile?: boolean;\n}\n\nexport const NavbarContent: ParentComponent<NavbarContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"justify\", \"hideOnMobile\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        navbarContentVariants({ justify: local.justify }),\n        local.hideOnMobile !== false && \"hidden md:flex\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Item --- */\nexport interface NavbarItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  isActive?: boolean;\n}\n\nexport const NavbarItem: ParentComponent<NavbarItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"isActive\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex items-center h-full text-sm font-medium\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={local.isActive}>\n        <div class=\"absolute -bottom-px left-0 right-0 h-0.5 bg-primary rounded-lg z-10\" />\n      </Show>\n    </div>\n  );\n};\n\n/* --- Navbar Link --- */\nexport const navbarLinkVariants = cva(\n  \"inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors cursor-pointer select-none focus-visible:outline-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n        active:\n          \"text-foreground font-semibold bg-muted/80\",\n        ghost:\n          \"text-foreground hover:text-primary\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface NavbarLinkProps\n  extends JSX.AnchorHTMLAttributes<HTMLAnchorElement>,\n    VariantProps<typeof navbarLinkVariants> {\n  class?: string;\n  isActive?: boolean;\n}\n\nexport const NavbarLink: ParentComponent<NavbarLinkProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"variant\", \"isActive\", \"children\"]);\n\n  return (\n    <a\n      class={cn(\n        navbarLinkVariants({\n          variant: local.isActive ? \"active\" : local.variant,\n        }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n\n/* --- Navbar Actions Container --- */\nexport interface NavbarActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarActions: ParentComponent<NavbarActionsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div class={cn(\"flex items-center gap-2 shrink-0\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Mobile Toggle Button --- */\nexport interface NavbarMobileToggleProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const NavbarMobileToggle: Component<NavbarMobileToggleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  const { isOpen, toggleMobileMenu } = useNavbar();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={toggleMobileMenu}\n      aria-label=\"Toggle navigation menu\"\n      aria-expanded={isOpen()}\n      class={cn(\n        \"inline-flex md:hidden size-8 items-center justify-center rounded-md border border-border/60 bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring shrink-0\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={isOpen()} fallback={<Menu class=\"size-4\" />}>\n        <X class=\"size-4\" />\n      </Show>\n    </button>\n  );\n};\n\n/* --- Navbar Mobile Menu Container --- */\nexport interface NavbarMobileMenuProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarMobileMenu: ParentComponent<NavbarMobileMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const { isOpen } = useNavbar();\n\n  return (\n    <Show when={isOpen()}>\n      <div\n        class={cn(\n          \"md:hidden w-full border-t border-border/60 bg-background/95 backdrop-blur-lg px-4 py-3 space-y-1 shadow-md transition-all\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n\n/* --- Navbar Mobile Item & Link --- */\nexport interface NavbarMobileLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n  isActive?: boolean;\n}\n\nexport const NavbarMobileLink: ParentComponent<NavbarMobileLinkProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"isActive\", \"children\"]);\n  const { setIsOpen } = useNavbar();\n\n  return (\n    <a\n      onClick={() => setIsOpen(false)}\n      class={cn(\n        \"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer\",\n        local.isActive\n          ? \"bg-primary text-primary-foreground font-semibold shadow-2xs\"\n          : \"text-muted-foreground hover:bg-muted/80 hover:text-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n",
+      "content": "import {\n  createContext,\n  createSignal,\n  useContext,\n  splitProps,\n  Show,\n  type JSX,\n  type ParentComponent,\n  type Component,\n  type Accessor,\n  type ValidComponent,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Menu, X } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Navbar Context --- */\ninterface NavbarContextValue {\n  isOpen: Accessor<boolean>;\n  setIsOpen: (open: boolean) => void;\n  toggleMobileMenu: () => void;\n}\n\nconst NavbarContext = createContext<NavbarContextValue>();\n\nexport function useNavbar() {\n  const context = useContext(NavbarContext);\n  if (!context) {\n    throw new Error(\"useNavbar must be used within a <Navbar /> component\");\n  }\n  return context;\n}\n\n/* --- Root Navbar --- */\nexport const navbarVariants = cva(\n  \"w-full transition-all duration-200 z-40\",\n  {\n    variants: {\n      variant: {\n        default: \"border-b border-border/60 bg-background/80 backdrop-blur-md\",\n        floating: \"my-3 rounded-lg border border-border/80 bg-background/90 backdrop-blur-md shadow-sm\",\n        bordered: \"border-b border-border bg-background\",\n        transparent: \"bg-transparent border-transparent\",\n      },\n      isSticky: {\n        true: \"sticky top-0\",\n        false: \"relative\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      isSticky: true,\n    },\n  }\n);\n\nexport interface NavbarProps\n  extends JSX.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof navbarVariants> {\n  maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport const Navbar: ParentComponent<NavbarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"variant\",\n    \"isSticky\",\n    \"maxWidth\",\n    \"open\",\n    \"onOpenChange\",\n    \"children\",\n  ]);\n\n  const [internalOpen, setInternalOpen] = createSignal(false);\n  const isOpen = () => (local.open !== undefined ? local.open : internalOpen());\n\n  const setIsOpen = (open: boolean) => {\n    if (local.open === undefined) {\n      setInternalOpen(open);\n    }\n    local.onOpenChange?.(open);\n  };\n\n  const toggleMobileMenu = () => setIsOpen(!isOpen());\n\n  const maxWidthClass = () => {\n    switch (local.maxWidth) {\n      case \"sm\":\n        return \"max-w-screen-sm\";\n      case \"md\":\n        return \"max-w-screen-md\";\n      case \"lg\":\n        return \"max-w-screen-lg\";\n      case \"xl\":\n        return \"max-w-screen-xl\";\n      case \"full\":\n        return \"max-w-full\";\n      case \"2xl\":\n      default:\n        return \"max-w-screen-2xl\";\n    }\n  };\n\n  return (\n    <NavbarContext.Provider value={{ isOpen, setIsOpen, toggleMobileMenu }}>\n      <header\n        class={cn(\n          navbarVariants({\n            variant: local.variant,\n            isSticky: local.isSticky,\n          }),\n          local.variant === \"floating\" && cn(\"mx-auto\", maxWidthClass()),\n          local.class\n        )}\n        {...rest}\n      >\n        <div class={cn(\"w-full\", local.variant !== \"floating\" && cn(\"mx-auto\", maxWidthClass()))}>\n          {local.children}\n        </div>\n      </header>\n    </NavbarContext.Provider>\n  );\n};\n\n/* --- Navbar Container (Top Flex Row) --- */\nexport interface NavbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarContainer: ParentComponent<NavbarContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex h-14 md:h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-3 w-full\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Brand / Logo Container --- */\nexport interface NavbarBrandProps<T extends ValidComponent = \"a\"> extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n  as?: T;\n  href?: string;\n}\n\nexport const NavbarBrand = <T extends ValidComponent = \"a\">(props: NavbarBrandProps<T>) => {\n  const [local, rest] = splitProps(props as NavbarBrandProps, [\"class\", \"as\", \"children\"]);\n\n  return (\n    <Dynamic\n      component={local.as || \"a\"}\n      class={cn(\n        \"flex items-center gap-2 font-bold text-foreground transition-opacity hover:opacity-90 cursor-pointer shrink-0\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n};\n\n/* --- Navbar Content / Section --- */\nexport const navbarContentVariants = cva(\"flex items-center gap-1 sm:gap-2 h-full\", {\n  variants: {\n    justify: {\n      start: \"justify-start flex-1\",\n      center: \"justify-center flex-1\",\n      end: \"justify-end flex-1\",\n    },\n  },\n  defaultVariants: {\n    justify: \"center\",\n  },\n});\n\nexport interface NavbarContentProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof navbarContentVariants> {\n  class?: string;\n  hideOnMobile?: boolean;\n}\n\nexport const NavbarContent: ParentComponent<NavbarContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"justify\", \"hideOnMobile\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        navbarContentVariants({ justify: local.justify }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Item --- */\nexport interface NavbarItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  isActive?: boolean;\n}\n\nexport const NavbarItem: ParentComponent<NavbarItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"isActive\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"relative flex items-center h-full text-sm font-medium\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={local.isActive}>\n        <div class=\"absolute -bottom-px left-0 right-0 h-0.5 bg-primary rounded-lg z-10\" />\n      </Show>\n    </div>\n  );\n};\n\n/* --- Navbar Link --- */\nexport const navbarLinkVariants = cva(\n  \"inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors cursor-pointer select-none focus-visible:outline-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n        active:\n          \"text-foreground font-semibold bg-muted/80\",\n        ghost:\n          \"text-foreground hover:text-primary\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface NavbarLinkProps<T extends ValidComponent = \"a\">\n  extends JSX.AnchorHTMLAttributes<HTMLAnchorElement>,\n    VariantProps<typeof navbarLinkVariants> {\n  class?: string;\n  isActive?: boolean;\n  as?: T;\n  href?: string;\n}\n\nexport const NavbarLink = <T extends ValidComponent = \"a\">(props: NavbarLinkProps<T>) => {\n  const [local, rest] = splitProps(props as NavbarLinkProps, [\"class\", \"variant\", \"isActive\", \"as\", \"children\"]);\n\n  return (\n    <Dynamic\n      component={local.as || \"a\"}\n      class={cn(\n        navbarLinkVariants({\n          variant: local.isActive ? \"active\" : local.variant,\n        }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n};\n\n/* --- Navbar Actions Container --- */\nexport interface NavbarActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarActions: ParentComponent<NavbarActionsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div class={cn(\"flex items-center gap-2 shrink-0\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\n/* --- Navbar Mobile Toggle Button --- */\nexport interface NavbarMobileToggleProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const NavbarMobileToggle: Component<NavbarMobileToggleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  const { isOpen, toggleMobileMenu } = useNavbar();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={toggleMobileMenu}\n      aria-label=\"Toggle navigation menu\"\n      aria-expanded={isOpen()}\n      class={cn(\n        \"inline-flex md:hidden size-8 items-center justify-center rounded-md border border-border/60 bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring shrink-0\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={isOpen()} fallback={<Menu class=\"size-4\" />}>\n        <X class=\"size-4\" />\n      </Show>\n    </button>\n  );\n};\n\n/* --- Navbar Mobile Menu Container --- */\nexport interface NavbarMobileMenuProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavbarMobileMenu: ParentComponent<NavbarMobileMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const { isOpen } = useNavbar();\n\n  return (\n    <Show when={isOpen()}>\n      <div\n        class={cn(\n          \"md:hidden w-full border-t border-border/60 bg-background/95 backdrop-blur-lg px-4 py-3 space-y-1 shadow-md transition-all\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n\n/* --- Navbar Mobile Item & Link --- */\nexport interface NavbarMobileLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n  isActive?: boolean;\n}\n\nexport const NavbarMobileLink: ParentComponent<NavbarMobileLinkProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"isActive\", \"children\"]);\n  const { setIsOpen } = useNavbar();\n\n  return (\n    <a\n      onClick={() => setIsOpen(false)}\n      class={cn(\n        \"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer\",\n        local.isActive\n          ? \"bg-primary text-primary-foreground font-semibold shadow-2xs\"\n          : \"text-muted-foreground hover:bg-muted/80 hover:text-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/navigation-menu.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "content": "import {\n  createContext,\n  createSignal,\n  useContext,\n  splitProps,\n  onCleanup,\n  type Component,\n  type JSX,\n  type ParentComponent,\n  type Accessor,\n  Show,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createClickOutside } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\nimport { ChevronDown } from \"lucide-solid\";\n\n/* --- Context Definition --- */\ninterface NavigationMenuContextValue {\n  activeValue: Accessor<string | null>;\n  setActiveValue: (value: string | null) => void;\n  onItemMouseEnter: (value: string) => void;\n  onItemMouseLeave: () => void;\n  delayMs: Accessor<number>;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue>();\n\nexport function useNavigationMenu() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"useNavigationMenu must be used within a <NavigationMenu />\");\n  }\n  return context;\n}\n\n/* --- 1. NavigationMenu Root --- */\nexport interface NavigationMenuProps extends JSX.HTMLAttributes<HTMLElement> {\n  class?: string;\n  delayMs?: number;\n  value?: string | null;\n  onValueChange?: (value: string | null) => void;\n}\n\nexport const NavigationMenu: ParentComponent<NavigationMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"delayMs\", \"value\", \"onValueChange\", \"children\"]);\n\n  const [internalValue, setInternalValue] = createSignal<string | null>(local.value ?? null);\n  const activeValue = () => (local.value !== undefined ? local.value : internalValue());\n\n  const setActiveValue = (val: string | null) => {\n    if (local.value === undefined) {\n      setInternalValue(val);\n    }\n    local.onValueChange?.(val);\n  };\n\n  let rootRef!: HTMLElement;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const delay = () => local.delayMs ?? 150;\n\n  const onItemMouseEnter = (val: string) => {\n    clearTimeout(timer);\n    const ms = delay();\n    if (ms <= 0) {\n      setActiveValue(val);\n    } else {\n      timer = setTimeout(() => {\n        setActiveValue(val);\n      }, ms);\n    }\n  };\n\n  const onItemMouseLeave = () => {\n    clearTimeout(timer);\n    const ms = delay();\n    timer = setTimeout(() => {\n      setActiveValue(null);\n    }, Math.max(50, ms));\n  };\n\n  createClickOutside({\n    target: () => rootRef,\n    onInteractOutside: () => {\n      setActiveValue(null);\n    },\n  });\n\n  onCleanup(() => {\n    clearTimeout(timer);\n  });\n\n  const contextValue: NavigationMenuContextValue = {\n    activeValue,\n    setActiveValue,\n    onItemMouseEnter,\n    onItemMouseLeave,\n    delayMs: delay,\n  };\n\n  return (\n    <NavigationMenuContext.Provider value={contextValue}>\n      <nav\n        ref={rootRef}\n        aria-label=\"Main Navigation\"\n        class={cn(\"relative z-10 flex max-w-max flex-1 items-center justify-center\", local.class)}\n        {...rest}\n      >\n        {local.children}\n      </nav>\n    </NavigationMenuContext.Provider>\n  );\n};\n\n/* --- 2. NavigationMenuList --- */\nexport interface NavigationMenuListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const NavigationMenuList: ParentComponent<NavigationMenuListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      class={cn(\n        \"group flex flex-1 list-none items-center justify-center space-x-1 p-1\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\n/* --- 3. NavigationMenuItem Context & Component --- */\ninterface NavigationMenuItemContextValue {\n  value: string;\n  isOpen: Accessor<boolean>;\n}\n\nconst NavigationMenuItemContext = createContext<NavigationMenuItemContextValue>();\n\nfunction useNavigationMenuItem() {\n  const context = useContext(NavigationMenuItemContext);\n  if (!context) {\n    throw new Error(\"useNavigationMenuItem must be used within a <NavigationMenuItem />\");\n  }\n  return context;\n}\n\nexport interface NavigationMenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  value?: string;\n  class?: string;\n}\n\nlet itemCounter = 0;\n\nexport const NavigationMenuItem: ParentComponent<NavigationMenuItemProps> = (props) => {\n  const itemId = props.value ?? `nav-item-${++itemCounter}`;\n  const [local, rest] = splitProps(props, [\"class\", \"value\", \"children\"]);\n  const rootContext = useNavigationMenu();\n\n  const isOpen = () => rootContext.activeValue() === itemId;\n\n  const itemContext: NavigationMenuItemContextValue = {\n    value: itemId,\n    isOpen,\n  };\n\n  return (\n    <NavigationMenuItemContext.Provider value={itemContext}>\n      <li\n        class={cn(\"relative\", local.class)}\n        onMouseEnter={() => rootContext.onItemMouseEnter(itemId)}\n        onMouseLeave={() => rootContext.onItemMouseLeave()}\n        {...rest}\n      >\n        {local.children}\n      </li>\n    </NavigationMenuItemContext.Provider>\n  );\n};\n\n/* --- 4. Trigger Style Helper --- */\nexport const navigationMenuTriggerVariants = cva(\n  \"group inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none gap-1\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground\",\n        filled:\n          \"bg-muted/60 text-foreground hover:bg-muted border border-border/40 data-[state=open]:bg-muted\",\n        ghost:\n          \"bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/60\",\n        outline:\n          \"border border-border bg-background hover:bg-accent hover:text-accent-foreground shadow-2xs data-[state=open]:bg-accent\",\n      },\n      size: {\n        default: \"h-9 px-3 text-sm\",\n        sm: \"h-8 px-2.5 text-xs\",\n        lg: \"h-10 px-4 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport function navigationMenuTriggerStyle(\n  variants?: VariantProps<typeof navigationMenuTriggerVariants>\n) {\n  return navigationMenuTriggerVariants(variants);\n}\n\n/* --- 5. NavigationMenuTrigger --- */\nexport interface NavigationMenuTriggerProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof navigationMenuTriggerVariants> {\n  class?: string;\n  hideChevron?: boolean;\n}\n\nexport const NavigationMenuTrigger: ParentComponent<NavigationMenuTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"variant\", \"size\", \"hideChevron\", \"children\"]);\n  const rootContext = useNavigationMenu();\n  const itemContext = useNavigationMenuItem();\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (itemContext.isOpen()) {\n      rootContext.setActiveValue(null);\n    } else {\n      rootContext.setActiveValue(itemContext.value);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      aria-expanded={itemContext.isOpen()}\n      data-state={itemContext.isOpen() ? \"open\" : \"closed\"}\n      onClick={handleClick}\n      class={cn(\n        navigationMenuTriggerVariants({ variant: local.variant, size: local.size }),\n        \"gap-1.5\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideChevron}>\n        <ChevronDown\n          class={cn(\n            \"size-3.5 text-muted-foreground transition-transform duration-200\",\n            itemContext.isOpen() && \"rotate-180 text-foreground\"\n          )}\n          aria-hidden=\"true\"\n        />\n      </Show>\n    </button>\n  );\n};\n\n/* --- 6. NavigationMenuContent (Mega Menu Flyout) --- */\nexport interface NavigationMenuContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuContent: ParentComponent<NavigationMenuContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const itemContext = useNavigationMenuItem();\n\n  return (\n    <Show when={itemContext.isOpen()}>\n      <div\n        data-state={itemContext.isOpen() ? \"open\" : \"closed\"}\n        class={cn(\n          \"absolute left-0 top-full mt-1.5 w-auto rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden z-50\",\n          \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 duration-200\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n\n/* --- 7. NavigationMenuLink --- */\nexport interface NavigationMenuLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n  active?: boolean;\n}\n\nexport const NavigationMenuLink: ParentComponent<NavigationMenuLinkProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"active\", \"children\"]);\n\n  return (\n    <a\n      data-active={local.active ? \"\" : undefined}\n      class={cn(\n        \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        local.active && \"bg-accent/60 text-accent-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n\n/* --- 8. NavigationMenuViewport --- */\nexport interface NavigationMenuViewportProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuViewport: Component<NavigationMenuViewportProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div class=\"absolute left-0 top-full flex justify-center\">\n      <div\n        class={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg transition-all\",\n          local.class\n        )}\n        {...rest}\n      />\n    </div>\n  );\n};\n\n/* --- 9. NavigationMenuIndicator --- */\nexport interface NavigationMenuIndicatorProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuIndicator: Component<NavigationMenuIndicatorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden transition-[width,transform] duration-200\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-xs bg-border shadow-md\" />\n    </div>\n  );\n};\n",
+      "content": "import {\n  createContext,\n  createSignal,\n  useContext,\n  splitProps,\n  onCleanup,\n  type Component,\n  type JSX,\n  type ParentComponent,\n  type Accessor,\n  Show,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createClickOutside } from \"@/hooks/create-click-outside\";\nimport { cn } from \"@/lib/cn\";\nimport { ChevronDown } from \"lucide-solid\";\n\n/* --- Context Definition --- */\ninterface NavigationMenuContextValue {\n  activeValue: Accessor<string | null>;\n  setActiveValue: (value: string | null) => void;\n  onItemMouseEnter: (value: string) => void;\n  onItemMouseLeave: () => void;\n  delayMs: Accessor<number>;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue>();\n\nfunction useNavigationMenu() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"useNavigationMenu must be used within a <NavigationMenu />\");\n  }\n  return context;\n}\n\n/* --- 1. NavigationMenu Root --- */\nexport interface NavigationMenuProps extends JSX.HTMLAttributes<HTMLElement> {\n  class?: string;\n  delayMs?: number;\n  value?: string | null;\n  onValueChange?: (value: string | null) => void;\n}\n\nexport const NavigationMenu: ParentComponent<NavigationMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"delayMs\", \"value\", \"onValueChange\", \"children\"]);\n\n  const [internalValue, setInternalValue] = createSignal<string | null>(local.value ?? null);\n  const activeValue = () => (local.value !== undefined ? local.value : internalValue());\n\n  const setActiveValue = (val: string | null) => {\n    if (local.value === undefined) {\n      setInternalValue(val);\n    }\n    local.onValueChange?.(val);\n  };\n\n  let rootRef!: HTMLElement;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const delay = () => local.delayMs ?? 150;\n\n  const onItemMouseEnter = (val: string) => {\n    clearTimeout(timer);\n    const ms = delay();\n    if (ms <= 0) {\n      setActiveValue(val);\n    } else {\n      timer = setTimeout(() => {\n        setActiveValue(val);\n      }, ms);\n    }\n  };\n\n  const onItemMouseLeave = () => {\n    clearTimeout(timer);\n    const ms = delay();\n    timer = setTimeout(() => {\n      setActiveValue(null);\n    }, Math.max(50, ms));\n  };\n\n  createClickOutside({\n    target: () => rootRef,\n    onInteractOutside: () => {\n      setActiveValue(null);\n    },\n  });\n\n  onCleanup(() => {\n    clearTimeout(timer);\n  });\n\n  const contextValue: NavigationMenuContextValue = {\n    activeValue,\n    setActiveValue,\n    onItemMouseEnter,\n    onItemMouseLeave,\n    delayMs: delay,\n  };\n\n  return (\n    <NavigationMenuContext.Provider value={contextValue}>\n      <nav\n        ref={rootRef}\n        aria-label=\"Main Navigation\"\n        class={cn(\"relative z-10 flex max-w-max flex-1 items-center justify-center\", local.class)}\n        {...rest}\n      >\n        {local.children}\n      </nav>\n    </NavigationMenuContext.Provider>\n  );\n};\n\n/* --- 2. NavigationMenuList --- */\nexport interface NavigationMenuListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const NavigationMenuList: ParentComponent<NavigationMenuListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      class={cn(\n        \"group flex flex-1 list-none items-center justify-center space-x-1 p-1\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\n/* --- 3. NavigationMenuItem Context & Component --- */\ninterface NavigationMenuItemContextValue {\n  value: string;\n  isOpen: Accessor<boolean>;\n}\n\nconst NavigationMenuItemContext = createContext<NavigationMenuItemContextValue>();\n\nfunction useNavigationMenuItem() {\n  const context = useContext(NavigationMenuItemContext);\n  if (!context) {\n    throw new Error(\"useNavigationMenuItem must be used within a <NavigationMenuItem />\");\n  }\n  return context;\n}\n\nexport interface NavigationMenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  value?: string;\n  class?: string;\n}\n\nlet itemCounter = 0;\n\nexport const NavigationMenuItem: ParentComponent<NavigationMenuItemProps> = (props) => {\n  const itemId = props.value ?? `nav-item-${++itemCounter}`;\n  const [local, rest] = splitProps(props, [\"class\", \"value\", \"children\"]);\n  const rootContext = useNavigationMenu();\n\n  const isOpen = () => rootContext.activeValue() === itemId;\n\n  const itemContext: NavigationMenuItemContextValue = {\n    value: itemId,\n    isOpen,\n  };\n\n  return (\n    <NavigationMenuItemContext.Provider value={itemContext}>\n      <li\n        class={cn(\"relative\", local.class)}\n        onMouseEnter={() => rootContext.onItemMouseEnter(itemId)}\n        onMouseLeave={() => rootContext.onItemMouseLeave()}\n        {...rest}\n      >\n        {local.children}\n      </li>\n    </NavigationMenuItemContext.Provider>\n  );\n};\n\n/* --- 4. Trigger Style Helper --- */\nexport const navigationMenuTriggerVariants = cva(\n  \"group inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none gap-1\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground\",\n        filled:\n          \"bg-muted/60 text-foreground hover:bg-muted border border-border/40 data-[state=open]:bg-muted\",\n        ghost:\n          \"bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/60\",\n        outline:\n          \"border border-border bg-background hover:bg-accent hover:text-accent-foreground shadow-2xs data-[state=open]:bg-accent\",\n      },\n      size: {\n        default: \"h-9 px-3 text-sm\",\n        sm: \"h-8 px-2.5 text-xs\",\n        lg: \"h-10 px-4 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport function navigationMenuTriggerStyle(\n  variants?: VariantProps<typeof navigationMenuTriggerVariants>\n) {\n  return navigationMenuTriggerVariants(variants);\n}\n\n/* --- 5. NavigationMenuTrigger --- */\nexport interface NavigationMenuTriggerProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof navigationMenuTriggerVariants> {\n  class?: string;\n  hideChevron?: boolean;\n}\n\nexport const NavigationMenuTrigger: ParentComponent<NavigationMenuTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"variant\", \"size\", \"hideChevron\", \"children\"]);\n  const rootContext = useNavigationMenu();\n  const itemContext = useNavigationMenuItem();\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (itemContext.isOpen()) {\n      rootContext.setActiveValue(null);\n    } else {\n      rootContext.setActiveValue(itemContext.value);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      aria-expanded={itemContext.isOpen()}\n      data-state={itemContext.isOpen() ? \"open\" : \"closed\"}\n      onClick={handleClick}\n      class={cn(\n        navigationMenuTriggerVariants({ variant: local.variant, size: local.size }),\n        \"gap-1.5\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideChevron}>\n        <ChevronDown\n          class={cn(\n            \"size-3.5 text-muted-foreground transition-transform duration-200\",\n            itemContext.isOpen() && \"rotate-180 text-foreground\"\n          )}\n          aria-hidden=\"true\"\n        />\n      </Show>\n    </button>\n  );\n};\n\n/* --- 6. NavigationMenuContent (Mega Menu Flyout) --- */\nexport interface NavigationMenuContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuContent: ParentComponent<NavigationMenuContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  const itemContext = useNavigationMenuItem();\n\n  return (\n    <Show when={itemContext.isOpen()}>\n      <div\n        data-state={itemContext.isOpen() ? \"open\" : \"closed\"}\n        class={cn(\n          \"absolute left-0 top-full mt-1.5 w-auto rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden z-50\",\n          \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 duration-200\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n\n/* --- 7. NavigationMenuLink --- */\nexport interface NavigationMenuLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  class?: string;\n  active?: boolean;\n}\n\nexport const NavigationMenuLink: ParentComponent<NavigationMenuLinkProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"active\", \"children\"]);\n\n  return (\n    <a\n      data-active={local.active ? \"\" : undefined}\n      class={cn(\n        \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        local.active && \"bg-accent/60 text-accent-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n\n/* --- 8. NavigationMenuViewport --- */\nexport interface NavigationMenuViewportProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuViewport: Component<NavigationMenuViewportProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div class=\"absolute left-0 top-full flex justify-center\">\n      <div\n        class={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg transition-all\",\n          local.class\n        )}\n        {...rest}\n      />\n    </div>\n  );\n};\n\n/* --- 9. NavigationMenuIndicator --- */\nexport interface NavigationMenuIndicatorProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const NavigationMenuIndicator: Component<NavigationMenuIndicatorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden transition-[width,transform] duration-200\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-xs bg-border shadow-md\" />\n    </div>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/number-input.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "ui/number-input.tsx",
-      "content": "import { createSignal, onCleanup, splitProps, type Component, type JSX } from \"solid-js\";\nimport { NumberField as KobalteNumberField } from \"@kobalte/core/number-field\";\nimport { Plus, Minus } from \"lucide-solid\";\nimport { Input } from \"./input\";\nimport { Button } from \"./button\";\nimport { createLongPress } from \"@nikala-ui/hooks\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface NumberInputProps {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  step?: number;\n  allowNegative?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  class?: string;\n  id?: string;\n}\n\nexport const NumberInput: Component<NumberInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"defaultValue\",\n    \"onValueChange\",\n    \"minValue\",\n    \"maxValue\",\n    \"step\",\n    \"allowNegative\",\n    \"disabled\",\n    \"readOnly\",\n    \"class\",\n    \"id\",\n  ]);\n\n  const [internalVal, setInternalVal] = createSignal<number>(\n    local.value !== undefined\n      ? local.value\n      : local.defaultValue !== undefined\n      ? local.defaultValue\n      : 0\n  );\n\n  let autoRepeatInterval: ReturnType<typeof setInterval> | undefined;\n\n  const currentVal = () => (local.value !== undefined ? local.value : internalVal());\n\n  const effectiveMin = () => {\n    if (local.minValue !== undefined) return local.minValue;\n    return local.allowNegative ? -Infinity : 0;\n  };\n\n  const effectiveMax = () => {\n    if (local.maxValue !== undefined) return local.maxValue;\n    return Infinity;\n  };\n\n  const handleValueChange = (val: number) => {\n    if (isNaN(val)) return;\n    const clamped = Math.max(effectiveMin(), Math.min(effectiveMax(), val));\n    setInternalVal(clamped);\n    local.onValueChange?.(clamped);\n  };\n\n  const stopAutoRepeat = () => {\n    if (autoRepeatInterval) {\n      clearInterval(autoRepeatInterval);\n      autoRepeatInterval = undefined;\n    }\n  };\n\n  const startAutoRepeat = (direction: 1 | -1) => {\n    if (local.disabled || local.readOnly) return;\n    stopAutoRepeat();\n    const stepAmount = local.step || 1;\n    autoRepeatInterval = setInterval(() => {\n      handleValueChange(currentVal() + direction * stepAmount);\n    }, 75);\n  };\n\n  /* Nikala UI createLongPress hook for Increment Trigger */\n  const incrementLongPress = createLongPress(\n    () => {\n      startAutoRepeat(1);\n    },\n    {\n      threshold: 300,\n      onCancel: stopAutoRepeat,\n    }\n  );\n\n  /* Nikala UI createLongPress hook for Decrement Trigger */\n  const decrementLongPress = createLongPress(\n    () => {\n      startAutoRepeat(-1);\n    },\n    {\n      threshold: 300,\n      onCancel: stopAutoRepeat,\n    }\n  );\n\n  onCleanup(() => stopAutoRepeat());\n\n  return (\n    <KobalteNumberField\n      value={currentVal()}\n      onRawValueChange={handleValueChange}\n      minValue={effectiveMin()}\n      maxValue={effectiveMax()}\n      step={local.step || 1}\n      disabled={local.disabled}\n      readOnly={local.readOnly}\n      id={local.id}\n      class={cn(\"relative flex items-center max-w-[160px]\", local.class)}\n      {...rest}\n    >\n      <KobalteNumberField.Input\n        as={Input}\n        class=\"pr-16 text-center font-mono focus-visible:ring-1\"\n      />\n\n      <div class=\"absolute right-1 flex items-center gap-0.5\">\n        <KobalteNumberField.DecrementTrigger\n          as={Button}\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none\"\n          aria-label=\"Decrement value\"\n          {...decrementLongPress.props}\n        >\n          <Minus class=\"h-3.5 w-3.5\" />\n        </KobalteNumberField.DecrementTrigger>\n\n        <KobalteNumberField.IncrementTrigger\n          as={Button}\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none\"\n          aria-label=\"Increment value\"\n          {...incrementLongPress.props}\n        >\n          <Plus class=\"h-3.5 w-3.5\" />\n        </KobalteNumberField.IncrementTrigger>\n      </div>\n    </KobalteNumberField>\n  );\n};\n",
+      "content": "import { createSignal, onCleanup, splitProps, type Component, type JSX } from \"solid-js\";\nimport { NumberField as KobalteNumberField } from \"@kobalte/core/number-field\";\nimport { Plus, Minus } from \"lucide-solid\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { createLongPress } from \"@/hooks/create-long-press\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface NumberInputProps {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  step?: number;\n  allowNegative?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  class?: string;\n  id?: string;\n}\n\nexport const NumberInput: Component<NumberInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"defaultValue\",\n    \"onValueChange\",\n    \"minValue\",\n    \"maxValue\",\n    \"step\",\n    \"allowNegative\",\n    \"disabled\",\n    \"readOnly\",\n    \"class\",\n    \"id\",\n  ]);\n\n  const [internalVal, setInternalVal] = createSignal<number>(\n    local.value !== undefined\n      ? local.value\n      : local.defaultValue !== undefined\n      ? local.defaultValue\n      : 0\n  );\n\n  let autoRepeatInterval: ReturnType<typeof setInterval> | undefined;\n\n  const currentVal = () => (local.value !== undefined ? local.value : internalVal());\n\n  const effectiveMin = () => {\n    if (local.minValue !== undefined) return local.minValue;\n    return local.allowNegative ? -Infinity : 0;\n  };\n\n  const effectiveMax = () => {\n    if (local.maxValue !== undefined) return local.maxValue;\n    return Infinity;\n  };\n\n  const handleValueChange = (val: number) => {\n    if (isNaN(val)) return;\n    const clamped = Math.max(effectiveMin(), Math.min(effectiveMax(), val));\n    setInternalVal(clamped);\n    local.onValueChange?.(clamped);\n  };\n\n  const stopAutoRepeat = () => {\n    if (autoRepeatInterval) {\n      clearInterval(autoRepeatInterval);\n      autoRepeatInterval = undefined;\n    }\n  };\n\n  const startAutoRepeat = (direction: 1 | -1) => {\n    if (local.disabled || local.readOnly) return;\n    stopAutoRepeat();\n    const stepAmount = local.step || 1;\n    autoRepeatInterval = setInterval(() => {\n      handleValueChange(currentVal() + direction * stepAmount);\n    }, 75);\n  };\n\n  /* Nikala UI createLongPress hook for Increment Trigger */\n  const incrementLongPress = createLongPress(\n    () => {\n      startAutoRepeat(1);\n    },\n    {\n      threshold: 300,\n      onCancel: stopAutoRepeat,\n    }\n  );\n\n  /* Nikala UI createLongPress hook for Decrement Trigger */\n  const decrementLongPress = createLongPress(\n    () => {\n      startAutoRepeat(-1);\n    },\n    {\n      threshold: 300,\n      onCancel: stopAutoRepeat,\n    }\n  );\n\n  onCleanup(() => stopAutoRepeat());\n\n  return (\n    <KobalteNumberField\n      value={currentVal()}\n      onRawValueChange={handleValueChange}\n      minValue={effectiveMin()}\n      maxValue={effectiveMax()}\n      step={local.step || 1}\n      disabled={local.disabled}\n      readOnly={local.readOnly}\n      id={local.id}\n      class={cn(\"relative flex items-center max-w-[160px]\", local.class)}\n      {...rest}\n    >\n      <KobalteNumberField.Input\n        as={Input}\n        class=\"pr-16 text-center font-mono focus-visible:ring-1\"\n      />\n\n      <div class=\"absolute right-1 flex items-center gap-0.5\">\n        <KobalteNumberField.DecrementTrigger\n          as={Button}\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none\"\n          aria-label=\"Decrement value\"\n          {...decrementLongPress.props}\n        >\n          <Minus class=\"h-3.5 w-3.5\" />\n        </KobalteNumberField.DecrementTrigger>\n\n        <KobalteNumberField.IncrementTrigger\n          as={Button}\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none\"\n          aria-label=\"Increment value\"\n          {...incrementLongPress.props}\n        >\n          <Plus class=\"h-3.5 w-3.5\" />\n        </KobalteNumberField.IncrementTrigger>\n      </div>\n    </KobalteNumberField>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]