@nikala-ui/core 0.11.0 → 0.12.0

package/src/registry/components/ui/scroll-area.tsx

@@ -7,7 +7,8 @@ import {
   type JSX,
   type Accessor,
 } from "solid-js";
-import { createScrollPosition, createElementSize } from "@nikala-ui/hooks";
+import { createScrollPosition } from "@/hooks/create-scroll-position";
+import { createElementSize } from "@/hooks/create-resize-observer";
 import { cn } from "@/lib/cn";
 
 export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -50,9 +51,11 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
     const scrollWidth = viewportRef.scrollWidth;
     const clientWidth = viewportRef.clientWidth;
 
+    // Track available lengths (considering 4px track padding)
     const trackHeight = verticalTrackRef ? verticalTrackRef.clientHeight - 4 : clientHeight - 4;
     const trackWidth = horizontalTrackRef ? horizontalTrackRef.clientWidth - 4 : clientWidth - 4;
 
+    // Vertical thumb metrics
     if (scrollHeight > clientHeight && clientHeight > 0) {
       const vRatio = clientHeight / scrollHeight;
       const calculatedHeight = Math.max(vRatio * trackHeight, 20);
@@ -64,6 +67,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
       setThumbHeight(0);
     }
 
+    // Horizontal thumb metrics
     if (scrollWidth > clientWidth && clientWidth > 0) {
       const hRatio = clientWidth / scrollWidth;
       const calculatedWidth = Math.max(hRatio * trackWidth, 20);
@@ -84,6 +88,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
     updateThumbMetrics();
   });
 
+  // Enable mouse drag on Vertical Thumb
   const handleVerticalThumbPointerDown = (e: PointerEvent) => {
     if (!viewportRef || !verticalTrackRef) return;
     e.preventDefault();
@@ -115,6 +120,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
     window.addEventListener("pointerup", onPointerUp);
   };
 
+  // Enable mouse drag on Horizontal Thumb
   const handleHorizontalThumbPointerDown = (e: PointerEvent) => {
     if (!viewportRef || !horizontalTrackRef) return;
     e.preventDefault();
@@ -146,6 +152,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
     window.addEventListener("pointerup", onPointerUp);
   };
 
+  // Convert vertical mouse wheel into horizontal scroll proportionally
   const handleWheel = (e: WheelEvent) => {
     if (orientation() === "horizontal" && viewportRef) {
       if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
@@ -161,9 +168,10 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
       onWheel={handleWheel}
       {...rest}
     >
+      {/* Scroll Viewport Container */}
       <div
         ref={viewportRef}
-        class="h-full w-full overflow-auto scrollbar-none rounded-[inherit]"
+        class="h-full w-full max-h-[inherit] overflow-auto scrollbar-none rounded-[inherit]"
         style={{
           "scrollbar-width": "none",
           "-ms-overflow-style": "none",
@@ -172,6 +180,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
         {local.children}
       </div>
 
+      {/* Vertical Scrollbar Track & Thumb */}
       {(orientation() === "vertical" || orientation() === "both") && thumbHeight() > 0 && (
         <div
           ref={verticalTrackRef}
@@ -193,6 +202,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
         </div>
       )}
 
+      {/* Horizontal Scrollbar Track & Thumb */}
       {(orientation() === "horizontal" || orientation() === "both") && thumbWidth() > 0 && (
         <div
           ref={horizontalTrackRef}

package/src/registry/components/ui/section-heading.tsx

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

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

@@ -1,20 +1,24 @@
-import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
 import * as SelectPrimitive from "@kobalte/core/select";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { createClickOutside } from "@nikala-ui/hooks";
-import { ScrollArea } from "./scroll-area";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
 export type SelectRootProps<Option = any, OptGroup = any, T extends ValidComponent = "div"> =
-  SelectPrimitive.SelectRootProps<Option, OptGroup, T>;
+  SelectPrimitive.SelectRootProps<Option, OptGroup, T> & {
+    class?: string;
+  };
 
 /**
- * Root Select component wrapper built on Kobalte primitives.
+ * Root Select component built on top of Kobalte headless primitives.
  */
 export const Select = <Option = any, OptGroup = any, T extends ValidComponent = "div">(
-  props: SelectRootProps<Option, OptGroup, T>
+  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>
 ) => {
-  return <SelectPrimitive.Root {...props} />;
+  const [local, rest] = splitProps(props as SelectRootProps, ["class"]);
+
+  return <SelectPrimitive.Root class={cn("relative w-full", local.class)} {...(rest as any)} />;
 };
 
 export type SelectTriggerProps<T extends ValidComponent = "button"> =
@@ -136,23 +140,16 @@ export const SelectItem = <T extends ValidComponent = "li">(
   return (
     <SelectPrimitive.Item
       class={cn(
-        "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 data-[disabled]:opacity-50 text-foreground",
+        "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",
         local.class
       )}
       {...rest}
     >
-      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator
-          as="svg"
-          class="h-4 w-4"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
+      <SelectPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
+        </svg>
+      </SelectPrimitive.ItemIndicator>
       <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
     </SelectPrimitive.Item>
   );

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

@@ -3,7 +3,7 @@ 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 { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
 // Global CSS Keyframe Animations specifically designed for Kobalte animationend DOM events
@@ -15,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; } }
 `;
@@ -28,12 +28,10 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        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]",
+        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]",
       },
     },
     defaultVariants: {
@@ -42,20 +40,23 @@ export const sheetVariants = cva(
   }
 );
 
-export const Sheet = DialogPrimitive.Root;
+export type SheetRootProps = DialogPrimitive.DialogRootProps;
+
+export const Sheet: Component<SheetRootProps> = (props) => {
+  return <DialogPrimitive.Root {...props} />;
+};
+
 export const SheetTrigger = DialogPrimitive.Trigger;
 export const SheetClose = DialogPrimitive.CloseButton;
-export const SheetPortal = DialogPrimitive.Portal;
 
-export type SheetOverlayProps<T extends ValidComponent = "div"> =
-  DialogPrimitive.DialogOverlayProps<T> & {
-    /** Whether to apply backdrop blur (default: true) */
-    blur?: boolean;
-    class?: string;
-  };
+export interface SheetOverlayProps<T extends ValidComponent = "div"> {
+  /** Whether to apply background blur effect or keep transparent (default: true) */
+  blur?: boolean;
+  class?: string;
+}
 
 /**
- * Fullscreen dark backdrop with fade keyframe animation.
+ * Backdrop overlay wrapper with fade-in and fade-out animations.
  */
 export const SheetOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, SheetOverlayProps<T>>
@@ -65,8 +66,8 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "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",
+        "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",
         local.class
       )}
       {...(rest as any)}
@@ -76,28 +77,32 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
 
 export type SheetContentProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogContentProps<T> &
-    VariantProps<typeof sheetVariants> & {
-      side?: "top" | "bottom" | "left" | "right";
-      showCloseButton?: boolean;
-      closeOnOutsideClick?: boolean;
-      blur?: boolean;
-      class?: string;
-      children?: JSX.Element;
-    };
+  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;
+  };
 
 /**
- * Slide-out panel container with ScrollArea and animation support.
+ * Main sheet container with smooth CSS keyframe slide animations.
  */
 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",
   ]);
@@ -123,7 +128,7 @@ export const SheetContent = <T extends ValidComponent = "div">(
   };
 
   return (
-    <SheetPortal>
+    <DialogPrimitive.Portal>
       <style>{sheetStyles}</style>
       <SheetOverlay blur={local.blur} />
       <DialogPrimitive.Content
@@ -144,7 +149,7 @@ export const SheetContent = <T extends ValidComponent = "div">(
           </DialogPrimitive.CloseButton>
         </Show>
       </DialogPrimitive.Content>
-    </SheetPortal>
+    </DialogPrimitive.Portal>
   );
 };
 
@@ -172,44 +177,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 pt-4", local.class)}
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
       {...rest}
     />
   );
 };
 
-export interface SheetTitleProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type SheetTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
 
-export const SheetTitle: Component<SheetTitleProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+export const SheetTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, SheetTitleProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetTitleProps, ["class"]);
 
   return (
     <DialogPrimitive.Title
       class={cn("text-lg font-semibold text-foreground", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DialogPrimitive.Title>
+      {...(rest as any)}
+    />
   );
 };
 
-export interface SheetDescriptionProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type SheetDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
 
-export const SheetDescription: Component<SheetDescriptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+export const SheetDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, SheetDescriptionProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetDescriptionProps, ["class"]);
 
   return (
     <DialogPrimitive.Description
       class={cn("text-sm text-muted-foreground", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DialogPrimitive.Description>
+      {...(rest as any)}
+    />
   );
 };

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

@@ -15,9 +15,9 @@ import {
 } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeft, PanelRight } from "lucide-solid";
-import { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
-import { Skeleton } from "./skeleton";
-import { Separator } from "./separator";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/cn";
 
 /* --- Constants --- */
@@ -211,7 +211,7 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
       data-variant={variant()}
       data-side={side()}
       class={cn(
-        "group relative flex flex-col bg-card text-card-foreground transition-all duration-200 ease-in-out shrink-0",
+        "group relative flex flex-col bg-card text-card-foreground transition-[width,opacity] duration-200 ease-in-out shrink-0",
         !isCollapsed()
           ? "w-[var(--sidebar-width,17rem)]"
           : collapsible() === "icon"

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

@@ -106,11 +106,13 @@ export const Status: Component<StatusProps> = (props) => {
           />
         </Show>
         <span
-          class={statusDotVariants({
-            variant: local.variant,
-            size: local.size,
-            animation: local.animation === "ping" ? "none" : local.animation,
-          })}
+          class={cn(
+            statusDotVariants({
+              variant: local.variant,
+              size: local.size,
+              animation: local.animation === "ping" ? "none" : local.animation,
+            })
+          )}
         />
       </span>
       {local.children}