@nikala-ui/core 0.9.11 → 0.9.12

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

@@ -2,6 +2,8 @@ import { splitProps, type Component, type JSX, type ValidComponent, Show } from
 import * as DialogPrimitive from "@kobalte/core/dialog";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-solid";
+import { ScrollArea } from "./scroll-area";
 import { cn } from "@/lib/cn";
 
 // Global CSS Keyframe Animations specifically designed for Kobalte animationend DOM events
@@ -13,7 +15,7 @@ const sheetStyles = `
 @keyframes sheet-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
 @keyframes sheet-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
 @keyframes sheet-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
-@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
+@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(-100%); } }
 @keyframes sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }
 @keyframes sheet-fade-out { from { opacity: 1; } to { opacity: 0; } }
 `;
@@ -26,10 +28,12 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        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]",
-        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]",
-        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]",
-        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]",
+        top: "inset-x-0 top-0 border-b data-[expanded]:animate-[sheet-slide-in-top_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-top_300ms_ease-in-out]",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[expanded]:animate-[sheet-slide-in-bottom_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-bottom_300ms_ease-in-out]",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r 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]",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l 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]",
       },
     },
     defaultVariants: {
@@ -38,23 +42,20 @@ export const sheetVariants = cva(
   }
 );
 
-export type SheetRootProps = DialogPrimitive.DialogRootProps;
-
-export const Sheet: Component<SheetRootProps> = (props) => {
-  return <DialogPrimitive.Root {...props} />;
-};
-
+export const Sheet = DialogPrimitive.Root;
 export const SheetTrigger = DialogPrimitive.Trigger;
 export const SheetClose = DialogPrimitive.CloseButton;
+export const SheetPortal = DialogPrimitive.Portal;
 
-export interface SheetOverlayProps<T extends ValidComponent = "div"> {
-  /** Whether to apply background blur effect or keep transparent (default: true) */
-  blur?: boolean;
-  class?: string;
-}
+export type SheetOverlayProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogOverlayProps<T> & {
+    /** Whether to apply backdrop blur (default: true) */
+    blur?: boolean;
+    class?: string;
+  };
 
 /**
- * Backdrop overlay wrapper with fade-in and fade-out animations.
+ * Fullscreen dark backdrop with fade keyframe animation.
  */
 export const SheetOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, SheetOverlayProps<T>>
@@ -64,8 +65,8 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "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]",
-        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-transparent",
+        "fixed inset-0 z-50 transition-all duration-200 data-[expanded]:animate-[sheet-fade-in_300ms_ease-in-out] data-[closed]:animate-[sheet-fade-out_300ms_ease-in-out]",
+        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-black/80",
         local.class
       )}
       {...(rest as any)}
@@ -75,32 +76,28 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
 
 export type SheetContentProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogContentProps<T> &
-  VariantProps<typeof sheetVariants> & {
-    /** Direction from which the sheet slides out: top, bottom, left, right */
-    side?: "top" | "bottom" | "left" | "right";
-    /** Whether to display the top-right close (X) button (default: true) */
-    showCloseButton?: boolean;
-    /** Whether clicking outside closes the sheet (default: true) */
-    closeOnOutsideClick?: boolean;
-    /** Whether to apply background backdrop blur (default: true) */
-    blur?: boolean;
-    class?: string;
-    children?: JSX.Element;
-  };
+    VariantProps<typeof sheetVariants> & {
+      side?: "top" | "bottom" | "left" | "right";
+      showCloseButton?: boolean;
+      closeOnOutsideClick?: boolean;
+      blur?: boolean;
+      class?: string;
+      children?: JSX.Element;
+    };
 
 /**
- * Main sheet container with smooth CSS keyframe slide animations.
+ * Slide-out panel container with ScrollArea and animation support.
  */
 export const SheetContent = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, SheetContentProps<T>>
 ) => {
   const [local, rest] = splitProps(props as SheetContentProps, [
+    "class",
+    "children",
     "side",
     "showCloseButton",
     "closeOnOutsideClick",
     "blur",
-    "class",
-    "children",
     "onPointerDownOutside",
     "onInteractOutside",
   ]);
@@ -126,26 +123,28 @@ export const SheetContent = <T extends ValidComponent = "div">(
   };
 
   return (
-    <DialogPrimitive.Portal>
+    <SheetPortal>
       <style>{sheetStyles}</style>
       <SheetOverlay blur={local.blur} />
       <DialogPrimitive.Content
         onPointerDownOutside={handlePointerDownOutside}
         onInteractOutside={handleInteractOutside}
-        class={cn(sheetVariants({ side: side() }), local.class)}
+        class={cn(sheetVariants({ side: side() }), "p-0", local.class)}
         {...(rest as any)}
       >
-        {local.children}
+        <ScrollArea class="h-full w-full">
+          <div class="p-6 space-y-4">
+            {local.children}
+          </div>
+        </ScrollArea>
         <Show when={local.showCloseButton !== false}>
-          <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">
-            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
+          <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">
+            <X class="h-4 w-4" />
             <span class="sr-only">Close</span>
           </DialogPrimitive.CloseButton>
         </Show>
       </DialogPrimitive.Content>
-    </DialogPrimitive.Portal>
+    </SheetPortal>
   );
 };
 
@@ -173,44 +172,44 @@ export const SheetFooter: Component<SheetFooterProps> = (props) => {
 
   return (
     <div
-      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4", local.class)}
       {...rest}
     />
   );
 };
 
-export type SheetTitleProps<T extends ValidComponent = "h2"> =
-  DialogPrimitive.DialogTitleProps<T> & {
-    class?: string;
-  };
+export interface SheetTitleProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-export const SheetTitle = <T extends ValidComponent = "h2">(
-  props: PolymorphicProps<T, SheetTitleProps<T>>
-) => {
-  const [local, rest] = splitProps(props as SheetTitleProps, ["class"]);
+export const SheetTitle: Component<SheetTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Title
       class={cn("text-lg font-semibold text-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Title>
   );
 };
 
-export type SheetDescriptionProps<T extends ValidComponent = "p"> =
-  DialogPrimitive.DialogDescriptionProps<T> & {
-    class?: string;
-  };
+export interface SheetDescriptionProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-export const SheetDescription = <T extends ValidComponent = "p">(
-  props: PolymorphicProps<T, SheetDescriptionProps<T>>
-) => {
-  const [local, rest] = splitProps(props as SheetDescriptionProps, ["class"]);
+export const SheetDescription: Component<SheetDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Description
       class={cn("text-sm text-muted-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Description>
   );
 };

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

@@ -74,11 +74,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 +106,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 +157,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 +184,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.",