@nikala-ui/docs 0.12.0

package/dist/registry/scroll-area.json

@@ -0,0 +1,21 @@
+{
+  "name": "scroll-area",
+  "title": "Scroll Area",
+  "description": "Augments native scroll functionality with custom styled scrollbars and reactive scroll tracking.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "create-scroll-position",
+    "create-resize-observer"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area.tsx",
+      "content": "import {\n  createSignal,\n  createEffect,\n  onCleanup,\n  splitProps,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { createScrollPosition } from \"@/hooks/create-scroll-position\";\nimport { createElementSize } from \"@/hooks/create-resize-observer\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n  scrollHideDelay?: number;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport const ScrollArea: Component<ScrollAreaProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"orientation\",\n    \"scrollHideDelay\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const orientation = () => local.orientation || \"vertical\";\n  let viewportRef: HTMLDivElement | undefined;\n  let verticalTrackRef: HTMLDivElement | undefined;\n  let horizontalTrackRef: HTMLDivElement | undefined;\n\n  const scrollPos = createScrollPosition({\n    target: () => viewportRef,\n  });\n\n  const viewportSize = createElementSize(() => viewportRef);\n\n  const [thumbHeight, setThumbHeight] = createSignal(0);\n  const [thumbTop, setThumbTop] = createSignal(0);\n  const [thumbWidth, setThumbWidth] = createSignal(0);\n  const [thumbLeft, setThumbLeft] = createSignal(0);\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  const updateThumbMetrics = () => {\n    if (!viewportRef) return;\n\n    const scrollHeight = viewportRef.scrollHeight;\n    const clientHeight = viewportRef.clientHeight;\n    const scrollWidth = viewportRef.scrollWidth;\n    const clientWidth = viewportRef.clientWidth;\n\n    // Track available lengths (considering 4px track padding)\n    const trackHeight = verticalTrackRef ? verticalTrackRef.clientHeight - 4 : clientHeight - 4;\n    const trackWidth = horizontalTrackRef ? horizontalTrackRef.clientWidth - 4 : clientWidth - 4;\n\n    // Vertical thumb metrics\n    if (scrollHeight > clientHeight && clientHeight > 0) {\n      const vRatio = clientHeight / scrollHeight;\n      const calculatedHeight = Math.max(vRatio * trackHeight, 20);\n      const maxTop = trackHeight - calculatedHeight;\n      const topPct = scrollPos.y() / (scrollHeight - clientHeight);\n      setThumbHeight(calculatedHeight);\n      setThumbTop(topPct * maxTop);\n    } else {\n      setThumbHeight(0);\n    }\n\n    // Horizontal thumb metrics\n    if (scrollWidth > clientWidth && clientWidth > 0) {\n      const hRatio = clientWidth / scrollWidth;\n      const calculatedWidth = Math.max(hRatio * trackWidth, 20);\n      const maxLeft = trackWidth - calculatedWidth;\n      const leftPct = scrollPos.x() / (scrollWidth - clientWidth);\n      setThumbWidth(calculatedWidth);\n      setThumbLeft(leftPct * maxLeft);\n    } else {\n      setThumbWidth(0);\n    }\n  };\n\n  createEffect(() => {\n    viewportSize.width();\n    viewportSize.height();\n    scrollPos.x();\n    scrollPos.y();\n    updateThumbMetrics();\n  });\n\n  // Enable mouse drag on Vertical Thumb\n  const handleVerticalThumbPointerDown = (e: PointerEvent) => {\n    if (!viewportRef || !verticalTrackRef) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    setIsDragging(true);\n    const startY = e.clientY;\n    const startScrollTop = viewportRef.scrollTop;\n    const scrollHeight = viewportRef.scrollHeight;\n    const clientHeight = viewportRef.clientHeight;\n    const trackHeight = verticalTrackRef.clientHeight - 4;\n\n    const maxScrollTop = scrollHeight - clientHeight;\n    const maxThumbTop = trackHeight - thumbHeight();\n    const ratio = maxThumbTop > 0 ? maxScrollTop / maxThumbTop : 0;\n\n    const onPointerMove = (moveEvent: PointerEvent) => {\n      const deltaY = moveEvent.clientY - startY;\n      viewportRef!.scrollTop = Math.max(0, Math.min(maxScrollTop, startScrollTop + deltaY * ratio));\n    };\n\n    const onPointerUp = () => {\n      setIsDragging(false);\n      window.removeEventListener(\"pointermove\", onPointerMove);\n      window.removeEventListener(\"pointerup\", onPointerUp);\n    };\n\n    window.addEventListener(\"pointermove\", onPointerMove);\n    window.addEventListener(\"pointerup\", onPointerUp);\n  };\n\n  // Enable mouse drag on Horizontal Thumb\n  const handleHorizontalThumbPointerDown = (e: PointerEvent) => {\n    if (!viewportRef || !horizontalTrackRef) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    setIsDragging(true);\n    const startX = e.clientX;\n    const startScrollLeft = viewportRef.scrollLeft;\n    const scrollWidth = viewportRef.scrollWidth;\n    const clientWidth = viewportRef.clientWidth;\n    const trackWidth = horizontalTrackRef.clientWidth - 4;\n\n    const maxScrollLeft = scrollWidth - clientWidth;\n    const maxThumbLeft = trackWidth - thumbWidth();\n    const ratio = maxThumbLeft > 0 ? maxScrollLeft / maxThumbLeft : 0;\n\n    const onPointerMove = (moveEvent: PointerEvent) => {\n      const deltaX = moveEvent.clientX - startX;\n      viewportRef!.scrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + deltaX * ratio));\n    };\n\n    const onPointerUp = () => {\n      setIsDragging(false);\n      window.removeEventListener(\"pointermove\", onPointerMove);\n      window.removeEventListener(\"pointerup\", onPointerUp);\n    };\n\n    window.addEventListener(\"pointermove\", onPointerMove);\n    window.addEventListener(\"pointerup\", onPointerUp);\n  };\n\n  // Convert vertical mouse wheel into horizontal scroll proportionally\n  const handleWheel = (e: WheelEvent) => {\n    if (orientation() === \"horizontal\" && viewportRef) {\n      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {\n        e.preventDefault();\n        viewportRef.scrollLeft += e.deltaY;\n      }\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"relative overflow-hidden group/scroll-area\", local.class)}\n      onWheel={handleWheel}\n      {...rest}\n    >\n      {/* Scroll Viewport Container */}\n      <div\n        ref={viewportRef}\n        class=\"h-full w-full max-h-[inherit] overflow-auto scrollbar-none rounded-[inherit]\"\n        style={{\n          \"scrollbar-width\": \"none\",\n          \"-ms-overflow-style\": \"none\",\n        }}\n      >\n        {local.children}\n      </div>\n\n      {/* Vertical Scrollbar Track & Thumb */}\n      {(orientation() === \"vertical\" || orientation() === \"both\") && thumbHeight() > 0 && (\n        <div\n          ref={verticalTrackRef}\n          class={cn(\n            \"absolute right-0 top-0 bottom-0 w-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none\",\n            scrollPos.isScrolling() || isDragging()\n              ? \"opacity-100\"\n              : \"opacity-0 group-hover/scroll-area:opacity-100\"\n          )}\n        >\n          <div\n            class=\"w-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto\"\n            style={{\n              height: `${thumbHeight()}px`,\n              transform: `translateY(${thumbTop()}px)`,\n            }}\n            onPointerDown={handleVerticalThumbPointerDown}\n          />\n        </div>\n      )}\n\n      {/* Horizontal Scrollbar Track & Thumb */}\n      {(orientation() === \"horizontal\" || orientation() === \"both\") && thumbWidth() > 0 && (\n        <div\n          ref={horizontalTrackRef}\n          class={cn(\n            \"absolute bottom-0 left-0 right-0 h-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none\",\n            scrollPos.isScrolling() || isDragging()\n              ? \"opacity-100\"\n              : \"opacity-0 group-hover/scroll-area:opacity-100\"\n          )}\n        >\n          <div\n            class=\"h-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto\"\n            style={{\n              width: `${thumbWidth()}px`,\n              transform: `translateX(${thumbLeft()}px)`,\n            }}\n            onPointerDown={handleHorizontalThumbPointerDown}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/section-heading.json

@@ -0,0 +1,21 @@
+{
+  "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"
+  ],
+  "files": [
+    {
+      "path": "ui/section-heading.tsx",
+      "content": "import {\n  splitProps,\n  Show,\n  type JSX,\n  type Component,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/cn\";\n\nconst headingVariants = cva(\"tracking-tight\", {\n  variants: {\n    variant: {\n      page: \"text-3xl sm:text-4xl font-bold\",\n      section: \"text-2xl font-semibold border-b border-border/50 pb-2\",\n      compact: \"text-base font-semibold\",\n    },\n  },\n  defaultVariants: {\n    variant: \"section\",\n  },\n});\n\nconst descriptionVariants = cva(\"text-muted-foreground leading-relaxed\", {\n  variants: {\n    variant: {\n      page: \"text-lg\",\n      section: \"text-sm\",\n      compact: \"text-xs\",\n    },\n  },\n  defaultVariants: {\n    variant: \"section\",\n  },\n});\n\nexport interface SectionHeadingProps\n  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\">,\n    VariantProps<typeof headingVariants> {\n  /** Heading text content */\n  title: string;\n  /** Optional badge label displayed next to the title */\n  badge?: string;\n  /** Badge style variant */\n  badgeVariant?: \"default\" | \"secondary\" | \"outline\" | \"destructive\";\n  /** Optional subtitle or explanatory note below the title */\n  description?: string;\n  class?: string;\n}\n\n/**\n * Reusable heading block with title, optional badge, and description.\n * Supports \"page\" (h1), \"section\" (h2 with divider), and \"compact\" (h3) variants.\n */\nexport const SectionHeading: Component<SectionHeadingProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"title\",\n    \"badge\",\n    \"badgeVariant\",\n    \"description\",\n    \"variant\",\n    \"class\",\n  ]);\n\n  const v = () => local.variant || \"section\";\n\n  return (\n    <div class={cn(\"space-y-2\", local.class)} {...rest}>\n      <div class={cn(\"flex items-center gap-2\", v() === \"section\" && \"w-full\")}>\n        <Show when={v() === \"page\"}>\n          <h1 class={headingVariants({ variant: v() })}>\n            {local.title}\n          </h1>\n        </Show>\n\n        <Show when={v() === \"section\"}>\n          <h2 class={cn(\"w-full\", headingVariants({ variant: v() }))}>\n            {local.title}\n          </h2>\n        </Show>\n\n        <Show when={v() === \"compact\"}>\n          <h3 class={headingVariants({ variant: v() })}>\n            {local.title}\n          </h3>\n        </Show>\n\n        <Show when={local.badge}>\n          <Badge\n            variant={local.badgeVariant || \"outline\"}\n            class={cn(\n              \"select-none\",\n              v() === \"page\" ? \"text-xs\" : \"font-mono text-[10px] py-0 px-1.5 font-medium\"\n            )}\n          >\n            {local.badge}\n          </Badge>\n        </Show>\n      </div>\n\n      <Show when={local.description}>\n        <p class={descriptionVariants({ variant: v() })}>\n          {local.description}\n        </p>\n      </Show>\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/select.json

@@ -0,0 +1,22 @@
+{
+  "name": "select",
+  "title": "Select",
+  "description": "Displays a list of options for the user to pick from, built on Kobalte primitives.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@kobalte/core"
+  ],
+  "registryDependencies": [
+    "scroll-area",
+    "create-click-outside"
+  ],
+  "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 \"@/hooks/create-click-outside\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\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 max-h-60\",\n          local.class\n        )}\n        {...rest}\n      >\n        <ScrollArea class=\"max-h-60 w-full\">\n          <SelectPrimitive.Listbox class=\"p-1 outline-none\" />\n        </ScrollArea>\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/dist/registry/separator.json

@@ -0,0 +1,17 @@
+{
+  "name": "separator",
+  "title": "Separator",
+  "description": "Visually or semantically separates content horizontally or vertically.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Orientation of the separator line */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Whether the element is purely visual or semantic for screen readers */\n  decorative?: boolean;\n  class?: string;\n}\n\n/**\n * Nikala UI Separator component used to divide content visually or semantically.\n */\nexport const Separator: Component<SeparatorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"orientation\",\n    \"decorative\",\n    \"class\",\n  ]);\n\n  const orientation = () => local.orientation || \"horizontal\";\n  const isDecorative = () => local.decorative ?? true;\n\n  return (\n    <div\n      role={isDecorative() ? \"none\" : \"separator\"}\n      aria-orientation={isDecorative() ? undefined : orientation()}\n      class={cn(\n        \"shrink-0 bg-border\",\n        orientation() === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/sheet.json

@@ -0,0 +1,22 @@
+{
+  "name": "sheet",
+  "title": "Sheet / Drawer",
+  "description": "Extends the dialog component to display content that slides in from screen edges.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "@kobalte/core"
+  ],
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.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 { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-solid\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/cn\";\n\n// Global CSS Keyframe Animations specifically designed for Kobalte animationend DOM events\nconst sheetStyles = `\n@keyframes sheet-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }\n@keyframes sheet-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }\n@keyframes sheet-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }\n@keyframes sheet-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }\n@keyframes sheet-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }\n@keyframes sheet-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }\n@keyframes sheet-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }\n@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }\n@keyframes sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes sheet-fade-out { from { opacity: 1; } to { opacity: 0; } }\n`;\n\n/**\n * CVA variants for CSS keyframe slide animations across 4 edges.\n */\nexport const sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-card p-6 text-card-foreground shadow-lg\",\n  {\n    variants: {\n      side: {\n        left: \"fixed top-0 bottom-0 left-0 w-3/4 border-r border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-left_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-left_300ms_ease-in-out]\",\n        right: \"fixed top-0 bottom-0 right-0 w-3/4 border-l border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-right_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-right_300ms_ease-in-out]\",\n        top: \"fixed top-0 left-0 right-0 border-b border-border data-[expanded]:animate-[sheet-slide-in-top_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-top_300ms_ease-in-out]\",\n        bottom: \"fixed bottom-0 left-0 right-0 border-t border-border data-[expanded]:animate-[sheet-slide-in-bottom_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-bottom_300ms_ease-in-out]\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n);\n\nexport type SheetRootProps = DialogPrimitive.DialogRootProps;\n\nexport const Sheet: Component<SheetRootProps> = (props) => {\n  return <DialogPrimitive.Root {...props} />;\n};\n\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.CloseButton;\n\nexport interface SheetOverlayProps<T extends ValidComponent = \"div\"> {\n  /** Whether to apply background blur effect or keep transparent (default: true) */\n  blur?: boolean;\n  class?: string;\n}\n\n/**\n * Backdrop overlay wrapper with fade-in and fade-out animations.\n */\nexport const SheetOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SheetOverlayProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SheetOverlayProps, [\"class\", \"blur\"]);\n\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 data-[expanded]:animate-[sheet-fade-in_300ms_ease-in-out] data-[closed]:animate-[sheet-fade-out_300ms_ease-in-out]\",\n        local.blur !== false ? \"bg-black/80 backdrop-blur-sm\" : \"bg-transparent\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SheetContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> &\n  VariantProps<typeof sheetVariants> & {\n    /** Direction from which the sheet slides out: top, bottom, left, right */\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    /** Whether to display the top-right close (X) button (default: true) */\n    showCloseButton?: boolean;\n    /** Whether clicking outside closes the sheet (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 sheet container with smooth CSS keyframe slide animations.\n */\nexport const SheetContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SheetContentProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SheetContentProps, [\n    \"side\",\n    \"showCloseButton\",\n    \"closeOnOutsideClick\",\n    \"blur\",\n    \"class\",\n    \"children\",\n    \"onPointerDownOutside\",\n    \"onInteractOutside\",\n  ]);\n\n  const side = () => local.side || \"right\";\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      <style>{sheetStyles}</style>\n      <SheetOverlay blur={local.blur} />\n      <DialogPrimitive.Content\n        onPointerDownOutside={handlePointerDownOutside}\n        onInteractOutside={handleInteractOutside}\n        class={cn(sheetVariants({ side: side() }), \"p-0\", local.class)}\n        {...(rest as any)}\n      >\n        <ScrollArea class=\"h-full w-full\">\n          <div class=\"p-6 space-y-4\">\n            {local.children}\n          </div>\n        </ScrollArea>\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 cursor-pointer z-50\">\n            <X class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Close</span>\n          </DialogPrimitive.CloseButton>\n        </Show>\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport interface SheetHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SheetHeader: Component<SheetHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"flex flex-col space-y-2 text-center sm:text-left\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface SheetFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SheetFooter: Component<SheetFooterProps> = (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 SheetTitleProps<T extends ValidComponent = \"h2\"> =\n  DialogPrimitive.DialogTitleProps<T> & {\n    class?: string;\n  };\n\nexport const SheetTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, SheetTitleProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SheetTitleProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold text-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SheetDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string;\n  };\n\nexport const SheetDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, SheetDescriptionProps<T>>\n) => {\n  const [local, rest] = splitProps(props as SheetDescriptionProps, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/sidebar.json

@@ -0,0 +1,24 @@
+{
+  "name": "sidebar",
+  "title": "Sidebar",
+  "description": "A composable, collapsible, and accessible application sidebar navigation suite with icon mode, mobile drawer, and keyboard shortcuts.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "lucide-solid"
+  ],
+  "registryDependencies": [
+    "tooltip",
+    "skeleton",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "import {\n  createContext,\n  createSignal,\n  createMemo,\n  createEffect,\n  useContext,\n  splitProps,\n  onMount,\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 { PanelLeft, PanelRight } from \"lucide-solid\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Constants --- */\nconst SIDEBAR_COOKIE_NAME = \"nikala_sidebar_state\";\nconst SIDEBAR_WIDTH = \"17rem\";\nconst SIDEBAR_WIDTH_ICON = \"3.5rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\n/* --- 1. Context & Types --- */\nexport type SidebarState = \"expanded\" | \"collapsed\";\nexport type SidebarSide = \"left\" | \"right\";\n\nexport interface SidebarContextValue {\n  state: Accessor<SidebarState>;\n  open: Accessor<boolean>;\n  setOpen: (open: boolean) => void;\n  openMobile: Accessor<boolean>;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: Accessor<boolean>;\n  toggleSidebar: () => void;\n  side: Accessor<SidebarSide>;\n  setSide: (side: SidebarSide) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>();\n\nconst fallbackSidebarContext: SidebarContextValue = {\n  state: () => \"expanded\",\n  open: () => true,\n  setOpen: () => {},\n  openMobile: () => false,\n  setOpenMobile: () => {},\n  isMobile: () => false,\n  toggleSidebar: () => {},\n  side: () => \"left\",\n  setSide: () => {},\n};\n\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  return context ?? fallbackSidebarContext;\n}\n\n/* --- 2. SidebarProvider --- */\nexport interface SidebarProviderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  defaultOpen?: boolean;\n  open?: Accessor<boolean>;\n  onOpenChange?: (open: boolean) => void;\n  side?: SidebarSide;\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\nexport const SidebarProvider: ParentComponent<SidebarProviderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"defaultOpen\",\n    \"open\",\n    \"onOpenChange\",\n    \"side\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [internalOpen, setInternalOpen] = createSignal<boolean>(local.defaultOpen ?? true);\n  const [openMobile, setOpenMobile] = createSignal<boolean>(false);\n  const [isMobile, setIsMobile] = createSignal<boolean>(false);\n  const [side, setSide] = createSignal<SidebarSide>(local.side ?? \"left\");\n\n  createEffect(() => {\n    if (local.side) {\n      setSide(local.side);\n    }\n  });\n\n  const open = () => (local.open !== undefined ? local.open() : internalOpen());\n\n  const setOpen = (value: boolean) => {\n    if (local.open === undefined) {\n      setInternalOpen(value);\n    }\n    local.onOpenChange?.(value);\n\n    if (typeof document !== \"undefined\") {\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;\n    }\n  };\n\n  const toggleSidebar = () => {\n    setOpen(!open());\n  };\n\n  const state = createMemo<SidebarState>(() => (open() ? \"expanded\" : \"collapsed\"));\n\n  onMount(() => {\n    if (typeof window === \"undefined\") return;\n\n    const checkMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n\n    checkMobile();\n    window.addEventListener(\"resize\", checkMobile, { passive: true });\n\n    // Keyboard shortcut (⌘B / Ctrl+B)\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (\n        (e.metaKey || e.ctrlKey) &&\n        e.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&\n        !e.defaultPrevented\n      ) {\n        e.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    onCleanup(() => {\n      window.removeEventListener(\"resize\", checkMobile);\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    });\n  });\n\n  const contextValue: SidebarContextValue = {\n    state,\n    open,\n    setOpen,\n    openMobile,\n    setOpenMobile,\n    isMobile,\n    toggleSidebar,\n    side,\n    setSide,\n  };\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          ...(typeof local.style === \"object\" ? local.style : {}),\n        } as JSX.CSSProperties}\n        class={cn(\n          \"group/sidebar-wrapper relative flex w-full max-w-full\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n\n/* --- 3. Sidebar Root --- */\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  side?: SidebarSide;\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  class?: string;\n}\n\nexport const Sidebar: ParentComponent<SidebarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"side\",\n    \"variant\",\n    \"collapsible\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const side = () => local.side ?? sidebar.side();\n  const variant = () => local.variant ?? \"sidebar\";\n  const collapsible = () => local.collapsible ?? \"icon\";\n\n  createEffect(() => {\n    if (local.side) {\n      sidebar.setSide(local.side);\n    }\n  });\n\n  const isCollapsed = () => sidebar.state() === \"collapsed\" && collapsible() !== \"none\";\n\n  return (\n    <div\n      data-state={isCollapsed() ? \"collapsed\" : \"expanded\"}\n      data-collapsible={isCollapsed() ? collapsible() : \"\"}\n      data-variant={variant()}\n      data-side={side()}\n      class={cn(\n        \"group relative flex flex-col bg-card text-card-foreground transition-[width,opacity] duration-200 ease-in-out shrink-0\",\n        !isCollapsed()\n          ? \"w-[var(--sidebar-width,17rem)]\"\n          : collapsible() === \"icon\"\n          ? \"w-[var(--sidebar-width-icon,3.5rem)]\"\n          : \"w-0 overflow-hidden opacity-0 border-none\",\n        // Side borders\n        variant() === \"sidebar\" && (side() === \"left\" ? \"border-r border-border\" : \"border-l border-border\"),\n        // Floating variant\n        variant() === \"floating\" && \"m-2 rounded-lg border border-border shadow-md\",\n        // Inset variant\n        variant() === \"inset\" && \"m-2 rounded-lg border border-border/80 bg-card shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col overflow-hidden\"\n      >\n        {local.children}\n      </div>\n    </div>\n  );\n};\n\n/* --- 4. SidebarTrigger --- */\nexport interface SidebarTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarTrigger: Component<SidebarTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"onClick\"]);\n  const { toggleSidebar, side } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Toggle Sidebar\"\n      onClick={(e) => {\n        if (typeof local.onClick === \"function\") {\n          local.onClick(e);\n        }\n        toggleSidebar();\n      }}\n      class={cn(\n        \"inline-flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-foreground hover:bg-muted focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring cursor-pointer transition-colors shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={side() === \"right\"} fallback={<PanelLeft class=\"size-4\" />}>\n        <PanelRight class=\"size-4\" />\n      </Show>\n      <span class=\"sr-only\">Toggle Sidebar</span>\n    </button>\n  );\n};\n\n/* --- 5. SidebarRail --- */\nexport interface SidebarRailProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarRail: Component<SidebarRailProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar Rail\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      class={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex cursor-w-resize\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\n/* --- 6. SidebarInset --- */\nexport interface SidebarInsetProps extends JSX.HTMLAttributes<HTMLElement> {\n  class?: string;\n}\n\nexport const SidebarInset: ParentComponent<SidebarInsetProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <main\n      class={cn(\n        \"relative flex min-h-0 flex-1 flex-col bg-background\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </main>\n  );\n};\n\n/* --- 7. Sidebar Structural Sections --- */\nexport interface SidebarSectionProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarHeader: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"header\"\n      class={cn(\"flex flex-col gap-2 p-3 border-b border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarFooter: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"footer\"\n      class={cn(\"flex flex-col gap-2 p-3 mt-auto border-t border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarSeparator: Component<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <Separator\n      data-sidebar=\"separator\"\n      class={cn(\"mx-2 w-auto bg-border/50 my-1 group-data-[collapsible=icon]:mx-1\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const SidebarContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"content\"\n      class={cn(\n        \"flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2 group-data-[collapsible=icon]:p-1 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:items-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 8. Sidebar Groups --- */\nexport const SidebarGroup: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group\"\n      class={cn(\"relative flex w-full min-w-0 flex-col p-1 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarGroupLabel: ParentComponent<SidebarGroupLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-label\"\n      class={cn(\n        \"flex h-7 shrink-0 items-center rounded-md px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground outline-hidden transition-all duration-200 ease-linear group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarGroupAction: ParentComponent<SidebarGroupActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"group-action\"\n      class={cn(\n        \"absolute right-3 top-3 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport const SidebarGroupContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-content\"\n      class={cn(\"w-full text-sm\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 9. Sidebar Menu --- */\nexport interface SidebarMenuProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenu: ParentComponent<SidebarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu\"\n      class={cn(\"flex w-full min-w-0 flex-col gap-1 list-none p-0 m-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport interface SidebarMenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  class?: string;\n}\n\nexport const SidebarMenuItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li\n      data-sidebar=\"menu-item\"\n      class={cn(\"group/menu-item relative flex w-full justify-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </li>\n  );\n};\n\n/* --- 10. SidebarMenuButton --- */\nexport const sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-sm font-medium outline-hidden ring-sidebar-ring transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 active:bg-muted disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-muted data-[active=true]:font-semibold data-[active=true]:text-foreground group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span]:hidden cursor-pointer select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-muted hover:text-foreground\",\n        outline: \"bg-background shadow-2xs hover:bg-muted hover:text-foreground border border-border\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-10 text-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface SidebarMenuButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof sidebarMenuButtonVariants> {\n  isActive?: boolean;\n  tooltip?: string;\n  class?: string;\n}\n\nexport const SidebarMenuButton: ParentComponent<SidebarMenuButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"isActive\",\n    \"tooltip\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const isCollapsed = () => sidebar.state() === \"collapsed\";\n  const tooltipPlacement = () => (sidebar.side() === \"right\" ? \"left\" : \"right\");\n\n  const buttonElement = () => (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-button\"\n      data-size={local.size}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        sidebarMenuButtonVariants({ variant: local.variant, size: local.size }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n\n  return (\n    <Show\n      when={local.tooltip && isCollapsed() && !sidebar.isMobile()}\n      fallback={buttonElement()}\n    >\n      <Tooltip placement={tooltipPlacement()} gutter={8} openDelay={100}>\n        <TooltipTrigger as=\"div\" class=\"w-full flex items-center justify-center\">\n          {buttonElement()}\n        </TooltipTrigger>\n        <TooltipContent>\n          {local.tooltip}\n        </TooltipContent>\n      </Tooltip>\n    </Show>\n  );\n};\n\n/* --- 11. SidebarMenuAction & Badge --- */\nexport interface SidebarMenuActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  showOnHover?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuAction: ParentComponent<SidebarMenuActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showOnHover\", \"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-action\"\n      class={cn(\n        \"absolute right-1 top-1.5 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.showOnHover && \"opacity-0 group-hover/menu-item:opacity-100 transition-opacity\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport interface SidebarMenuBadgeProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarMenuBadge: ParentComponent<SidebarMenuBadgeProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-badge\"\n      class={cn(\n        \"pointer-events-none absolute right-1.5 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1.5 text-[11px] font-medium tabular-nums bg-muted text-muted-foreground group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarMenuSkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  showIcon?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showIcon\", \"class\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-skeleton\"\n      class={cn(\"flex h-8 items-center gap-2 rounded-md px-2 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center\", local.class)}\n      {...rest}\n    >\n      <Show when={local.showIcon ?? true}>\n        <Skeleton class=\"size-4 rounded-md shrink-0\" />\n      </Show>\n      <Skeleton class=\"h-4 flex-1 max-w-[80%] group-data-[collapsible=icon]:hidden\" />\n    </div>\n  );\n};\n\n/* --- 12. Nested Submenus --- */\nexport interface SidebarMenuSubProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenuSub: ParentComponent<SidebarMenuSubProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu-sub\"\n      class={cn(\n        \"mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border/60 px-2.5 py-0.5 list-none group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport const SidebarMenuSubItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li class={cn(\"relative\", local.class)} {...rest}>\n      {local.children}\n    </li>\n  );\n};\n\nexport interface SidebarMenuSubButtonProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  isActive?: boolean;\n  size?: \"sm\" | \"md\";\n  class?: string;\n}\n\nexport const SidebarMenuSubButton: ParentComponent<SidebarMenuSubButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"isActive\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <a\n      data-sidebar=\"menu-sub-button\"\n      data-size={local.size ?? \"md\"}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-xs text-muted-foreground outline-hidden hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring data-[active=true]:bg-muted data-[active=true]:font-medium data-[active=true]:text-foreground\",\n        local.size === \"sm\" && \"text-[11px]\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/skeleton.json

@@ -0,0 +1,17 @@
+{
+  "name": "skeleton",
+  "title": "Skeleton",
+  "description": "Renders an animated pulse loading placeholder for content loading states.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "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-accent\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/slider.json

@@ -0,0 +1,18 @@
+{
+  "name": "slider",
+  "title": "Slider",
+  "description": "Numeric range selection slider supporting single/dual thumbs, custom steps, vertical orientation, and formatted value labels, built on Kobalte primitives.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "ui/slider.tsx",
+      "content": "import { splitProps, type JSX, type ValidComponent } from \"solid-js\";\nimport * as SliderPrimitive from \"@kobalte/core/slider\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SliderRootProps<T extends ValidComponent = \"div\"> =\n  SliderPrimitive.SliderRootProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Root Slider component built on Kobalte primitives.\n */\nexport const Slider = <T extends ValidComponent = \"div\">(\n  props: SliderRootProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderRootProps, [\"class\", \"children\"]);\n\n  return (\n    <SliderPrimitive.Root\n      class={cn(\n        \"relative flex w-full touch-none select-none flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:items-center\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      {local.children}\n    </SliderPrimitive.Root>\n  );\n};\n\nexport type SliderTrackProps<T extends ValidComponent = \"div\"> =\n  SliderPrimitive.SliderTrackProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Slider track containing the active range fill and thumbs.\n */\nexport const SliderTrack = <T extends ValidComponent = \"div\">(\n  props: SliderTrackProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderTrackProps, [\"class\", \"children\"]);\n\n  return (\n    <SliderPrimitive.Track\n      class={cn(\n        \"relative h-2 w-full flex items-center rounded-lg bg-secondary cursor-pointer data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-center\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <SliderFill />\n      {local.children}\n    </SliderPrimitive.Track>\n  );\n};\n\nexport type SliderFillProps<T extends ValidComponent = \"div\"> =\n  SliderPrimitive.SliderFillProps<T> & {\n    class?: string;\n  };\n\n/**\n * Active range indicator fill inside SliderTrack.\n */\nexport const SliderFill = <T extends ValidComponent = \"div\">(\n  props: SliderFillProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderFillProps, [\"class\"]);\n\n  return (\n    <SliderPrimitive.Fill\n      class={cn(\n        \"absolute rounded-lg bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n        local.class\n      )}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SliderThumbProps<T extends ValidComponent = \"span\"> =\n  SliderPrimitive.SliderThumbProps<T> & {\n    class?: string;\n    children?: JSX.Element;\n  };\n\n/**\n * Draggable thumb handle for selecting slider values.\n * Positioned centered on Kobalte offset coordinates using -translate-x-1/2 -translate-y-1/2.\n */\nexport const SliderThumb = <T extends ValidComponent = \"span\">(\n  props: SliderThumbProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderThumbProps, [\"class\", \"children\"]);\n\n  return (\n    <SliderPrimitive.Thumb\n      class={cn(\n        \"block h-5 w-5 rounded-lg border-2 border-primary bg-background shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing z-10 data-[orientation=horizontal]:translate-x-0 data-[orientation=horizontal]:translate-y-0 data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-0\",\n        local.class\n      )}\n      {...(rest as any)}\n    >\n      <SliderPrimitive.Input />\n      {local.children}\n    </SliderPrimitive.Thumb>\n  );\n};\n\nexport type SliderLabelProps<T extends ValidComponent = \"label\"> =\n  SliderPrimitive.SliderLabelProps<T> & {\n    class?: string;\n  };\n\n/**\n * Accessible label for the Slider component.\n */\nexport const SliderLabel = <T extends ValidComponent = \"label\">(\n  props: SliderLabelProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderLabelProps, [\"class\"]);\n\n  return (\n    <SliderPrimitive.Label\n      class={cn(\"text-sm font-medium leading-none text-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n\nexport type SliderValueLabelProps<T extends ValidComponent = \"output\"> =\n  SliderPrimitive.SliderValueLabelProps<T> & {\n    class?: string;\n  };\n\n/**\n * Displays current formatted value label for single or dual thumbs.\n */\nexport const SliderValueLabel = <T extends ValidComponent = \"output\">(\n  props: SliderValueLabelProps<T>\n) => {\n  const [local, rest] = splitProps(props as SliderValueLabelProps, [\"class\"]);\n\n  return (\n    <SliderPrimitive.ValueLabel\n      class={cn(\"text-sm font-medium text-muted-foreground\", local.class)}\n      {...(rest as any)}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/spinner.json

@@ -0,0 +1,18 @@
+{
+  "name": "spinner",
+  "title": "Spinner",
+  "description": "An accessible animated loading indicator for asynchronous UI states.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/spinner.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\nexport const spinnerVariants = cva(\n  \"inline-block animate-spin rounded-lg border-2 border-current border-r-transparent text-primary\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3\",\n        default: \"size-4\",\n        lg: \"size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"role\">,\n    VariantProps<typeof spinnerVariants> {\n  /** Accessible text announced while the spinner is active. */\n  label?: string;\n  class?: string;\n}\n\n/** A compact, accessible loading indicator for async UI states. */\nexport const Spinner: Component<SpinnerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"size\", \"label\", \"class\"]);\n\n  return (\n    <span\n      role=\"status\"\n      aria-label={local.label || \"Loading\"}\n      class={cn(spinnerVariants({ size: local.size }), local.class)}\n      {...rest}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/stat.json

@@ -0,0 +1,19 @@
+{
+  "name": "stat",
+  "title": "Stat",
+  "description": "Display key performance indicators, statistics, financial data, and metrics with trends and icons.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "lucide-solid"
+  ],
+  "files": [
+    {
+      "path": "ui/stat.tsx",
+      "content": "import {\n  splitProps,\n  type JSX,\n  type ParentComponent,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { TrendingUp, TrendingDown, Minus } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- 1. Stat Group (Container Grid) --- */\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  columns?: 1 | 2 | 3 | 4 | 5;\n}\n\nexport const StatGroup: ParentComponent<StatGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"columns\", \"children\"]);\n\n  const columnClass = () => {\n    switch (local.columns) {\n      case 1:\n        return \"grid-cols-1\";\n      case 2:\n        return \"grid-cols-1 sm:grid-cols-2\";\n      case 3:\n        return \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\";\n      case 5:\n        return \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5\";\n      case 4:\n      default:\n        return \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\";\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"grid gap-4 sm:gap-5 w-full\", columnClass(), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 2. Stat Root Card --- */\nexport const statVariants = cva(\n  \"relative flex flex-col justify-between rounded-lg transition-all duration-200\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-border bg-card text-card-foreground p-4 sm:p-5 shadow-2xs space-y-2\",\n        flat: \"bg-muted/40 text-foreground p-4 sm:p-5 space-y-2\",\n        bordered: \"border-2 border-border bg-background text-foreground p-4 sm:p-5 space-y-2\",\n        ghost: \"bg-transparent text-foreground p-2 space-y-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface StatProps\n  extends JSX.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof statVariants> {\n  class?: string;\n}\n\nexport const Stat: ParentComponent<StatProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"variant\", \"children\"]);\n\n  return (\n    <div\n      class={cn(statVariants({ variant: local.variant }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 3. Stat Header (Top Row) --- */\nexport interface StatHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const StatHeader: ParentComponent<StatHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\"flex items-center justify-between gap-2\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 4. Stat Label / Title --- */\nexport interface StatLabelProps extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\nexport const StatLabel: ParentComponent<StatLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <p\n      class={cn(\n        \"text-xs sm:text-sm font-medium text-muted-foreground leading-tight tracking-tight\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </p>\n  );\n};\n\n/* --- 5. Stat Icon Wrapper --- */\nexport interface StatIconProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const StatIcon: ParentComponent<StatIconProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex size-4 sm:size-4.5 shrink-0 items-center justify-center text-muted-foreground\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 6. Stat Value (Big Number) --- */\nexport interface StatValueProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const StatValue: ParentComponent<StatValueProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"text-2xl sm:text-3xl font-bold tracking-tight text-foreground flex items-baseline gap-1 my-0.5\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 7. Stat Unit / Currency (Prefix or Suffix) --- */\nexport interface StatUnitProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  class?: string;\n}\n\nexport const StatUnit: ParentComponent<StatUnitProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <span\n      class={cn(\"text-lg sm:text-xl font-semibold text-muted-foreground self-baseline\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </span>\n  );\n};\n\n/* --- 8. Stat Trend (Growth / Decline Indicator - No Background) --- */\nexport const statTrendVariants = cva(\n  \"inline-flex items-center gap-1 text-xs font-semibold select-none shrink-0 tracking-tight\",\n  {\n    variants: {\n      type: {\n        up: \"text-emerald-600 dark:text-emerald-400\",\n        down: \"text-red-600 dark:text-red-400\",\n        neutral: \"text-muted-foreground\",\n      },\n    },\n    defaultVariants: {\n      type: \"up\",\n    },\n  }\n);\n\nexport interface StatTrendProps\n  extends JSX.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statTrendVariants> {\n  class?: string;\n  hideIcon?: boolean;\n}\n\nexport const StatTrend: ParentComponent<StatTrendProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"type\", \"hideIcon\", \"children\"]);\n\n  const Icon = () => {\n    if (local.hideIcon) return null;\n    if (local.type === \"down\") return <TrendingDown class=\"size-3.5 stroke-[2.5]\" />;\n    if (local.type === \"neutral\") return <Minus class=\"size-3.5 stroke-[2.5]\" />;\n    return <TrendingUp class=\"size-3.5 stroke-[2.5]\" />;\n  };\n\n  return (\n    <span\n      class={cn(statTrendVariants({ type: local.type }), local.class)}\n      {...rest}\n    >\n      <Icon />\n      <span>{local.children}</span>\n    </span>\n  );\n};\n\n/* --- 9. Stat Help Text / Bottom Row (Between Alignment) --- */\nexport interface StatHelpTextProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const StatHelpText: ParentComponent<StatHelpTextProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex items-center justify-between gap-2 text-xs text-muted-foreground pt-1\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/status.json

@@ -0,0 +1,18 @@
+{
+  "name": "status",
+  "title": "Status",
+  "description": "A compact semantic status indicator with a color dot and label.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/status.tsx",
+      "content": "import { Show, splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\nexport const statusVariants = cva(\n  \"inline-flex items-center gap-2 text-sm font-medium text-foreground\",\n  {\n    variants: {\n      variant: {\n        neutral: \"text-muted-foreground\",\n        success: \"text-emerald-700 dark:text-emerald-400\",\n        warning: \"text-amber-700 dark:text-amber-400\",\n        error: \"text-destructive\",\n        info: \"text-blue-700 dark:text-blue-400\",\n      },\n      size: {\n        sm: \"text-xs gap-1.5\",\n        default: \"text-sm gap-2\",\n      },\n      bordered: {\n        true: \"rounded-md border px-2 py-1\",\n        false: \"\",\n      },\n      borderVariant: {\n        neutral: \"border-muted-foreground/30\",\n        success: \"border-emerald-500/30\",\n        warning: \"border-amber-500/30\",\n        error: \"border-destructive/30\",\n        info: \"border-blue-500/30\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"default\",\n      bordered: false,\n      borderVariant: \"neutral\",\n    },\n  }\n);\n\nexport const statusDotVariants = cva(\"size-2 shrink-0 rounded-lg\", {\n  variants: {\n    variant: {\n      neutral: \"bg-muted-foreground\",\n      success: \"bg-emerald-500\",\n      warning: \"bg-amber-500\",\n      error: \"bg-destructive\",\n      info: \"bg-blue-500\",\n    },\n    size: {\n      sm: \"size-1.5\",\n      default: \"size-2\",\n    },\n    animation: {\n      none: \"\",\n      pulse: \"animate-pulse\",\n      ping: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"neutral\",\n    size: \"default\",\n    animation: \"none\",\n  },\n});\n\nexport interface StatusProps\n  extends JSX.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusVariants> {\n  class?: string;\n  animation?: \"none\" | \"pulse\" | \"ping\";\n}\n\n/** A compact status indicator combining a semantic color dot and label. */\nexport const Status: Component<StatusProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"animation\",\n    \"bordered\",\n  ]);\n\n  return (\n    <span\n      role=\"status\"\n      class={cn(\n        statusVariants({\n          variant: local.variant,\n          size: local.size,\n          bordered: local.bordered,\n          borderVariant: local.variant,\n        }),\n        local.class\n      )}\n      {...rest}\n    >\n      <span class=\"relative flex shrink-0\" aria-hidden=\"true\">\n        <Show when={local.animation === \"ping\"}>\n          <span\n            class={cn(\n              \"absolute inline-flex size-full animate-ping rounded-lg opacity-75\",\n              statusDotVariants({ variant: local.variant, size: local.size })\n            )}\n          />\n        </Show>\n        <span\n          class={cn(\n            statusDotVariants({\n              variant: local.variant,\n              size: local.size,\n              animation: local.animation === \"ping\" ? \"none\" : local.animation,\n            })\n          )}\n        />\n      </span>\n      {local.children}\n    </span>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/steps.json

@@ -0,0 +1,20 @@
+{
+  "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"
+  ],
+  "files": [
+    {
+      "path": "ui/steps.tsx",
+      "content": "import {\n  createContext,\n  useContext,\n  splitProps,\n  Show,\n  type JSX,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Badge, type BadgeProps } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/cn\";\n\nexport type StepVariant =\n  | \"default\"\n  | \"primary\"\n  | \"info\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"secondary\"\n  | \"outline\"\n  | \"destructive\"\n  | \"purple\";\n\nfunction toBadgeVariant(variant?: StepVariant): NonNullable<BadgeProps[\"variant\"]> {\n  switch (variant) {\n    case \"primary\":\n      return \"default\";\n    case \"danger\":\n      return \"destructive\";\n    case \"default\":\n      return \"outline\";\n    case \"info\":\n      return \"info\";\n    case \"success\":\n      return \"success\";\n    case \"warning\":\n      return \"warning\";\n    case \"secondary\":\n      return \"secondary\";\n    default:\n      return \"outline\";\n  }\n}\nexport type StepOrientation = \"horizontal\" | \"vertical\";\n\ninterface StepsContextValue {\n  variant?: StepVariant;\n  orientation?: () => StepOrientation;\n}\n\nconst StepsContext = createContext<StepsContextValue>();\n\nexport interface StepsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Layout orientation: vertical (default) or horizontal */\n  orientation?: StepOrientation;\n  /** Default color variant for all steps in this container */\n  variant?: StepVariant;\n  class?: string;\n}\n\n/**\n * Multi-step instruction and stepper container supporting vertical and horizontal layouts.\n */\nexport const Steps: ParentComponent<StepsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"orientation\", \"variant\", \"class\", \"children\"]);\n\n  const orientation = () => local.orientation || \"vertical\";\n\n  return (\n    <StepsContext.Provider value={{ variant: local.variant, orientation }}>\n      <div\n        class={cn(\n          \"relative my-6 [counter-reset:step]\",\n          orientation() === \"horizontal\"\n            ? \"flex flex-row items-start justify-between w-full\"\n            : \"ml-4 border-l border-border/80 pl-8 space-y-8\",\n          local.class\n        )}\n        {...rest}\n      >\n        {/* Single continuous horizontal rail in parent container */}\n        <Show when={orientation() === \"horizontal\"}>\n          <div class=\"absolute left-8 right-8 top-3.5 h-0.5 bg-border/80 z-0\" />\n        </Show>\n\n        {local.children}\n      </div>\n    </StepsContext.Provider>\n  );\n};\n\nexport interface StepProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Optional custom step number, icon, or label to override automatic CSS counter */\n  step?: string | number | JSX.Element;\n  /** Optional step title rendered at the top of the step */\n  title?: string;\n  /** Step color variant */\n  variant?: StepVariant;\n  class?: string;\n}\n\nexport const Step: ParentComponent<StepProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"step\", \"title\", \"variant\", \"class\", \"children\"]);\n  const context = useContext(StepsContext);\n\n  const effectiveVariant = () => local.variant || context?.variant || \"default\";\n  const isHorizontal = () => context?.orientation?.() === \"horizontal\";\n\n  return (\n    <Show\n      when={isHorizontal()}\n      fallback={\n        <div class={cn(\"relative\", local.class)} {...rest}>\n          {/* Numbered Step Badge with geometric center on left vertical border line */}\n          <Badge\n            variant={toBadgeVariant(effectiveVariant())}\n            class={cn(\n              \"absolute -left-[2.875rem] top-0 size-7 p-0 flex items-center justify-center rounded-lg font-mono text-xs font-semibold shadow-2xs select-none\",\n              !local.step && \"[counter-increment:step] before:content-[counter(step)]\"\n            )}\n          >\n            <Show when={local.step}>\n              {local.step}\n            </Show>\n          </Badge>\n\n          {/* Step Title Header */}\n          <Show when={local.title}>\n            <h4 class=\"font-semibold text-base tracking-tight text-foreground mb-2\">\n              {local.title}\n            </h4>\n          </Show>\n\n          {/* Step Body Content */}\n          <div class=\"text-sm leading-relaxed text-muted-foreground space-y-3\">\n            {local.children}\n          </div>\n        </div>\n      }\n    >\n      <div class={cn(\"flex-1 flex flex-col items-center text-center relative z-10 px-2\", local.class)} {...rest}>\n        {/* Step Badge sitting on top of continuous parent rail */}\n        <Badge\n          variant={toBadgeVariant(effectiveVariant())}\n          class={cn(\n            \"mb-2.5 size-7 p-0 flex items-center justify-center rounded-lg font-mono text-xs font-semibold shadow-2xs select-none\",\n            !local.step && \"[counter-increment:step] before:content-[counter(step)]\"\n          )}\n        >\n          <Show when={local.step}>\n            {local.step}\n          </Show>\n        </Badge>\n\n        {/* Step Title Header */}\n        <Show when={local.title}>\n          <h4 class=\"font-semibold text-sm tracking-tight text-foreground mb-1\">\n            {local.title}\n          </h4>\n        </Show>\n\n        {/* Step Body Content */}\n        <div class=\"text-xs leading-relaxed text-muted-foreground\">\n          {local.children}\n        </div>\n      </div>\n    </Show>\n  );\n};\n\nexport interface StepTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {\n  class?: string;\n}\n\nexport const StepTitle: ParentComponent<StepTitleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <h4\n      class={cn(\"font-semibold text-base tracking-tight text-foreground mb-2\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </h4>\n  );\n};\n\nexport interface StepDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\nexport const StepDescription: ParentComponent<StepDescriptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n  return (\n    <div class={cn(\"text-sm leading-relaxed text-muted-foreground\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/switch.json

@@ -0,0 +1,20 @@
+{
+  "name": "switch",
+  "title": "Switch",
+  "description": "A control that allows the user to toggle between checked and unchecked states.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "create-controllable-signal"
+  ],
+  "files": [
+    {
+      "path": "ui/switch.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { createControllableSignal } from \"@/hooks/create-controllable-signal\";\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/dist/registry/table-of-contents.json

@@ -0,0 +1,23 @@
+{
+  "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"
+  ],
+  "files": [
+    {
+      "path": "ui/table-of-contents.tsx",
+      "content": "// src/components/ui/table-of-contents.tsx\nimport {\n  splitProps,\n  createSignal,\n  createEffect,\n  onMount,\n  onCleanup,\n  For,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { List, ListHeader, ListItem } from \"@/components/ui/list\";\nimport { cn } from \"@/lib/cn\";\nimport { createScrollPosition } from \"@/hooks/create-scroll-position\";\n\nexport interface TocItem {\n  id: string;\n  text: string;\n  depth: number;\n}\n\nexport interface TableOfContentsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  items: TocItem[];\n  title?: string | false;\n  activeId?: string;\n  onItemClick?: (id: string) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI TableOfContents Component.\n * Pure composition of ScrollArea, ListHeader, List, and ListItem with active ScrollSpy tracking.\n */\nexport const TableOfContents: Component<TableOfContentsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"items\",\n    \"title\",\n    \"activeId\",\n    \"onItemClick\",\n    \"class\",\n  ]);\n\n  const [activeId, setActiveId] = createSignal<string>(local.activeId || \"\");\n  const scrollPosition = createScrollPosition();\n\n  onMount(() => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n    const headings = (local.items || [])\n      .map((item) => document.getElementById(item.id))\n      .filter((element): element is HTMLElement => Boolean(element));\n\n    const updateActiveHeading = () => {\n      if (headings.length === 0) return;\n\n      const atPageBottom = scrollPosition.isAtBottom();\n      if (atPageBottom) {\n        setActiveId(headings[headings.length - 1].id);\n        return;\n      }\n\n      const heading = [...headings]\n        .reverse()\n        .find((element) => element.getBoundingClientRect().top <= 120);\n\n      setActiveId(heading?.id || headings[0].id);\n    };\n\n    createEffect(() => {\n      scrollPosition.y();\n      scrollPosition.isAtBottom();\n      updateActiveHeading();\n    });\n\n    window.addEventListener(\"resize\", updateActiveHeading);\n    onCleanup(() => window.removeEventListener(\"resize\", updateActiveHeading));\n  });\n\n  const handleClick = (e: MouseEvent, id: string) => {\n    if (typeof document !== \"undefined\") {\n      const el = document.getElementById(id);\n      if (el) {\n        e.preventDefault();\n        el.scrollIntoView({ behavior: \"smooth\" });\n        setActiveId(id);\n        if (typeof window !== \"undefined\") {\n          window.history.pushState(null, \"\", `#${id}`);\n        }\n      }\n    }\n    local.onItemClick?.(id);\n  };\n\n  return (\n    <ScrollArea class={cn(\"h-full py-2\", local.class)} {...rest}>\n      <Show when={local.title !== false}>\n        <ListHeader\n          title={typeof local.title === \"string\" ? local.title : \"On this page\"}\n          class=\"px-3 pb-1\"\n        />\n      </Show>\n\n      <List class=\"gap-0.5 p-1\">\n        <For each={local.items}>\n          {(item) => (\n            <ListItem\n              title={item.text}\n              href={`#${item.id}`}\n              active={activeId() === item.id}\n              size=\"sm\"\n              hoverVariant=\"muted\"\n              class={cn(\n                \"text-xs transition-colors py-1 h-auto min-h-0\",\n                item.depth === 3 && \"pl-5 text-muted-foreground/80\",\n                item.depth > 3 && \"pl-7 text-muted-foreground/60\",\n                activeId() === item.id\n                  ? \"text-primary font-medium bg-primary/10\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n              onClick={(e: MouseEvent) => handleClick(e, item.id)}\n            />\n          )}\n        </For>\n      </List>\n    </ScrollArea>\n  );\n};\n\nexport const Toc = TableOfContents;\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/table.json

@@ -0,0 +1,17 @@
+{
+  "name": "table",
+  "title": "Table",
+  "description": "A responsive and accessible data table component with headers, rows, cells, and footer summaries.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {\n  class?: string;\n}\n\n/**\n * Root Table container component wrapped in a responsive scroll container.\n */\nexport const Table: Component<TableProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div class=\"relative w-full overflow-auto\">\n      <table\n        class={cn(\"w-full caption-bottom text-sm\", local.class)}\n        {...rest}\n      />\n    </div>\n  );\n};\n\nexport interface TableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Header section wrapper for the Table component.\n */\nexport const TableHeader: Component<TableHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <thead\n      class={cn(\"[&_tr]:border-b border-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Main body section wrapper for the Table component.\n */\nexport const TableBody: Component<TableBodyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tbody\n      class={cn(\"[&_tr:last-child]:border-0\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableFooterProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Footer section wrapper for the Table component.\n */\nexport const TableFooter: Component<TableFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tfoot\n      class={cn(\n        \"border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {\n  class?: string;\n}\n\n/**\n * Table row component with hover highlight states.\n */\nexport const TableRow: Component<TableRowProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tr\n      class={cn(\n        \"border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableHeadProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  class?: string;\n}\n\n/**\n * Header cell component for table columns.\n */\nexport const TableHead: Component<TableHeadProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <th\n      class={cn(\n        \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  class?: string;\n}\n\n/**\n * Standard data cell component for table rows.\n */\nexport const TableCell: Component<TableCellProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <td\n      class={cn(\n        \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableCaptionProps extends JSX.HTMLAttributes<HTMLTableCaptionElement> {\n  class?: string;\n}\n\n/**\n * Accessible table caption for describing table contents.\n */\nexport const TableCaption: Component<TableCaptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <caption\n      class={cn(\"mt-4 text-xs text-muted-foreground pb-2\", local.class)}\n      {...rest}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/tabs.json

@@ -0,0 +1,20 @@
+{
+  "name": "tabs",
+  "title": "Tabs",
+  "description": "A set of layered sections of content displayed one at a time.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "create-controllable-signal"
+  ],
+  "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 \"@/hooks/create-controllable-signal\";\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"
+    }
+  ]
+}

package/dist/registry/textarea.json

@@ -0,0 +1,17 @@
+{
+  "name": "textarea",
+  "title": "Textarea",
+  "description": "A multi-line text input field with responsive focus styles.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/textarea.tsx",
+      "content": "// src/components/ui/textarea.tsx\nimport {\n  createSignal,\n  splitProps,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface TextareaProps\n  extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Uncontrolled initial default value */\n  defaultValue?: string | number;\n  /** Maximum allowed character limit */\n  maxLength?: number;\n  /** Whether to show live character count badge */\n  showCount?: boolean;\n  class?: string;\n}\n\n/**\n * Nikala UI Textarea component with optional live character counter and limit indicators.\n */\nexport const Textarea: Component<TextareaProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"maxLength\",\n    \"showCount\",\n    \"value\",\n    \"defaultValue\",\n    \"onInput\",\n    \"class\",\n  ]);\n\n  /* Internal reactive signal for character count tracking */\n  const [currentValue, setCurrentValue] = createSignal<string>(\n    String(local.value || local.defaultValue || \"\")\n  );\n\n  const handleInput: JSX.EventHandlerUnion<HTMLTextAreaElement, InputEvent> = (\n    e\n  ) => {\n    setCurrentValue(e.currentTarget.value);\n    if (typeof local.onInput === \"function\") {\n      (local.onInput as (e: InputEvent) => void)(e);\n    }\n  };\n\n  const count = () => currentValue().length;\n  const isAtLimit = () =>\n    local.maxLength !== undefined && count() >= local.maxLength;\n\n  return (\n    <div class=\"relative flex flex-col w-full\">\n      <textarea\n        value={local.value !== undefined ? String(local.value) : currentValue()}\n        maxLength={local.maxLength}\n        onInput={handleInput}\n        class={cn(\n          \"flex min-h-20 w-full rounded-md border border-input bg-muted px-3 py-2 text-base shadow-2xs transition-colors 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      {/* Dynamic Character Counter */}\n      <Show when={local.showCount ?? Boolean(local.maxLength)}>\n        <div\n          class={cn(\n            \"mt-1 text-right text-[11px] font-mono transition-colors select-none\",\n            isAtLimit() ? \"text-rose-500 font-bold\" : \"text-muted-foreground\"\n          )}\n        >\n          <span>{count()}</span>\n          <Show when={local.maxLength}>\n            <span> / {local.maxLength}</span>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}