@nikala-ui/core 0.9.11 → 0.10.0

package/src/registry/components/ui/theme-toggle.tsx

@@ -121,10 +121,11 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
         }
       >
         {/* Max Mode: Full Theme Customizer Panel */}
-        <DropdownMenuContent class="w-64 p-3">
-          <DropdownMenuLabel class="px-0 pt-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            Theme Mode
-          </DropdownMenuLabel>
+        <DropdownMenuContent class="w-64">
+          <div class="p-2 space-y-2">
+            <DropdownMenuLabel class="px-0 pt-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Theme Mode
+            </DropdownMenuLabel>
           <div class="grid grid-cols-3 gap-1 my-1.5">
             <Button
               variant={theme() === "light" ? "default" : "outline"}
@@ -193,6 +194,7 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
               )}
             </For>
           </div>
+          </div>
         </DropdownMenuContent>
       </Show>
     </DropdownMenu>

package/src/registry/components/ui/toggle.tsx

@@ -0,0 +1,101 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { ToggleButton as KobalteToggle } from "@kobalte/core/toggle-button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3 min-w-9",
+        sm: "h-8 px-2 text-xs min-w-8",
+        lg: "h-10 px-3 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ToggleProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleVariants> {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const Toggle: Component<ToggleProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "pressed",
+    "defaultPressed",
+    "onPressedChange",
+    "disabled",
+    "onChange",
+  ]);
+
+  return (
+    <KobalteToggle
+      isPressed={local.pressed}
+      defaultIsPressed={local.defaultPressed}
+      onChange={local.onPressedChange}
+      disabled={local.disabled}
+      class={cn(
+        toggleVariants({ variant: local.variant, size: local.size }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </KobalteToggle>
+  );
+};
+
+export interface ToggleGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: any) => void;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ToggleGroup: Component<ToggleGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "type",
+    "value",
+    "defaultValue",
+    "onChange",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-center gap-1 rounded-md border border-border/40 p-1 bg-background",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/src/registry/metadata.ts

@@ -14,12 +14,50 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Button",
     description: "An interactive button component with variant and size options.",
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["spinner"],
   },
   input: {
     title: "Input",
     description: "A standard text input field with styling variants.",
     dependencies: ["clsx", "tailwind-merge"],
   },
+  spinner: {
+    title: "Spinner",
+    description: "An accessible animated loading indicator for asynchronous UI states.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  empty: {
+    title: "Empty",
+    description: "A compound empty-state layout for collections, search results, and initial application states.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  status: {
+    title: "Status",
+    description: "A compact semantic status indicator with a color dot and label.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  "icon-button": {
+    title: "Icon Button",
+    description: "An accessible square button intended for a single icon action.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["button"],
+  },
+  form: {
+    title: "Form",
+    description: "A semantic form layout wrapper designed to work with the createForm hook.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  "form-message": {
+    title: "Form Message",
+    description: "Validation message helper connected to createForm errors and touched state.",
+    registryDependencies: ["field"],
+  },
+  field: {
+    title: "Field",
+    description: "A consistent form field layout for labels, descriptions, and validation errors.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["label"],
+  },
   card: {
     title: "Card",
     description: "A versatile container component with header, content, and footer sections.",
@@ -74,11 +112,13 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Select",
     description: "Displays a list of options for the user to pick from, built on Kobalte primitives.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+    registryDependencies: ["scroll-area"],
   },
   combobox: {
     title: "Combobox",
     description: "Searchable autocomplete dropdown with single/multi-selection tags, avatars, group headers, and customizable clear controls.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+    registryDependencies: ["scroll-area"],
   },
   tabs: {
     title: "Tabs",
@@ -104,16 +144,19 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Dialog",
     description: "A modal window overlaying the main content, built on Kobalte primitives with blur and outside-click options.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+    registryDependencies: ["scroll-area"],
   },
   sheet: {
     title: "Sheet / Drawer",
     description: "Extends the dialog component to display content that slides in from screen edges.",
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "@kobalte/core"],
+    registryDependencies: ["scroll-area"],
   },
   "dropdown-menu": {
     title: "Dropdown Menu",
     description: "Displays a menu to the user—such as a set of actions or functions—triggered by a button or avatar.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+    registryDependencies: ["scroll-area"],
   },
   "theme-manager": {
     title: "Theme Manager",
@@ -152,7 +195,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
       "lucide-solid",
       "@kobalte/core",
     ],
-    registryDependencies: ["kbd", "input-group", "list"],
+    registryDependencies: ["kbd", "input-group", "list", "scroll-area"],
   },
   toast: {
     title: "Toast / Sonner",
@@ -179,6 +222,45 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     description: "Numeric range selection slider supporting single/dual thumbs, custom steps, vertical orientation, and formatted value labels, built on Kobalte primitives.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
   },
+  collapsible: {
+    title: "Collapsible",
+    description: "An interactive component that expands and collapses content panels with smooth height animations, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  "aspect-ratio": {
+    title: "Aspect Ratio",
+    description: "Displays content within a specific aspect ratio using CSS aspect-ratio while preventing layout shifts.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  toggle: {
+    title: "Toggle",
+    description: "A two-state interactive button component built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  "number-input": {
+    title: "Number Input",
+    description: "A numeric stepper input component supporting min, max, step, negative values, and long-press auto-repeat, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core", "lucide-solid"],
+    registryDependencies: ["input", "button", "create-long-press"],
+  },
+  "context-menu": {
+    title: "Context Menu",
+    description: "Displays a contextual popup menu triggered by right-clicking target areas, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+    registryDependencies: ["separator", "kbd", "create-click-outside", "scroll-area"],
+  },
+  resizable: {
+    title: "Resizable",
+    description: "Accessible resizable panel layout component supporting drag-to-resize handles.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["create-resize-observer"],
+  },
+  "scroll-area": {
+    title: "Scroll Area",
+    description: "Augments native scroll functionality with custom styled scrollbars and reactive scroll tracking.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["create-scroll-position", "create-resize-observer"],
+  },
   "pin-input": {
     title: "Pin Input",
     description: "Interactive multi-slot PIN/OTP input component for SMS and 2FA authentication verification codes.",
@@ -355,4 +437,4 @@ export const HOOK_METADATA: Record<string, ComponentMeta> = {
     title: "createScrollIntoView",
     description: "SolidJS reactive primitive for scrolling a target element into view smooth or auto behavior",
   },
-};
+};