@nikala-ui/docs 0.12.0

package/dist/vendor/core-src/registry/components/ui/scroll-area.tsx

@@ -0,0 +1,228 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+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> {
+  orientation?: "vertical" | "horizontal" | "both";
+  scrollHideDelay?: number;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ScrollArea: Component<ScrollAreaProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "scrollHideDelay",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation || "vertical";
+  let viewportRef: HTMLDivElement | undefined;
+  let verticalTrackRef: HTMLDivElement | undefined;
+  let horizontalTrackRef: HTMLDivElement | undefined;
+
+  const scrollPos = createScrollPosition({
+    target: () => viewportRef,
+  });
+
+  const viewportSize = createElementSize(() => viewportRef);
+
+  const [thumbHeight, setThumbHeight] = createSignal(0);
+  const [thumbTop, setThumbTop] = createSignal(0);
+  const [thumbWidth, setThumbWidth] = createSignal(0);
+  const [thumbLeft, setThumbLeft] = createSignal(0);
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  const updateThumbMetrics = () => {
+    if (!viewportRef) return;
+
+    const scrollHeight = viewportRef.scrollHeight;
+    const clientHeight = viewportRef.clientHeight;
+    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);
+      const maxTop = trackHeight - calculatedHeight;
+      const topPct = scrollPos.y() / (scrollHeight - clientHeight);
+      setThumbHeight(calculatedHeight);
+      setThumbTop(topPct * maxTop);
+    } else {
+      setThumbHeight(0);
+    }
+
+    // Horizontal thumb metrics
+    if (scrollWidth > clientWidth && clientWidth > 0) {
+      const hRatio = clientWidth / scrollWidth;
+      const calculatedWidth = Math.max(hRatio * trackWidth, 20);
+      const maxLeft = trackWidth - calculatedWidth;
+      const leftPct = scrollPos.x() / (scrollWidth - clientWidth);
+      setThumbWidth(calculatedWidth);
+      setThumbLeft(leftPct * maxLeft);
+    } else {
+      setThumbWidth(0);
+    }
+  };
+
+  createEffect(() => {
+    viewportSize.width();
+    viewportSize.height();
+    scrollPos.x();
+    scrollPos.y();
+    updateThumbMetrics();
+  });
+
+  // Enable mouse drag on Vertical Thumb
+  const handleVerticalThumbPointerDown = (e: PointerEvent) => {
+    if (!viewportRef || !verticalTrackRef) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    const startY = e.clientY;
+    const startScrollTop = viewportRef.scrollTop;
+    const scrollHeight = viewportRef.scrollHeight;
+    const clientHeight = viewportRef.clientHeight;
+    const trackHeight = verticalTrackRef.clientHeight - 4;
+
+    const maxScrollTop = scrollHeight - clientHeight;
+    const maxThumbTop = trackHeight - thumbHeight();
+    const ratio = maxThumbTop > 0 ? maxScrollTop / maxThumbTop : 0;
+
+    const onPointerMove = (moveEvent: PointerEvent) => {
+      const deltaY = moveEvent.clientY - startY;
+      viewportRef!.scrollTop = Math.max(0, Math.min(maxScrollTop, startScrollTop + deltaY * ratio));
+    };
+
+    const onPointerUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  // Enable mouse drag on Horizontal Thumb
+  const handleHorizontalThumbPointerDown = (e: PointerEvent) => {
+    if (!viewportRef || !horizontalTrackRef) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    const startX = e.clientX;
+    const startScrollLeft = viewportRef.scrollLeft;
+    const scrollWidth = viewportRef.scrollWidth;
+    const clientWidth = viewportRef.clientWidth;
+    const trackWidth = horizontalTrackRef.clientWidth - 4;
+
+    const maxScrollLeft = scrollWidth - clientWidth;
+    const maxThumbLeft = trackWidth - thumbWidth();
+    const ratio = maxThumbLeft > 0 ? maxScrollLeft / maxThumbLeft : 0;
+
+    const onPointerMove = (moveEvent: PointerEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      viewportRef!.scrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + deltaX * ratio));
+    };
+
+    const onPointerUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    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)) {
+        e.preventDefault();
+        viewportRef.scrollLeft += e.deltaY;
+      }
+    }
+  };
+
+  return (
+    <div
+      class={cn("relative overflow-hidden group/scroll-area", local.class)}
+      onWheel={handleWheel}
+      {...rest}
+    >
+      {/* Scroll Viewport Container */}
+      <div
+        ref={viewportRef}
+        class="h-full w-full max-h-[inherit] overflow-auto scrollbar-none rounded-[inherit]"
+        style={{
+          "scrollbar-width": "none",
+          "-ms-overflow-style": "none",
+        }}
+      >
+        {local.children}
+      </div>
+
+      {/* Vertical Scrollbar Track & Thumb */}
+      {(orientation() === "vertical" || orientation() === "both") && thumbHeight() > 0 && (
+        <div
+          ref={verticalTrackRef}
+          class={cn(
+            "absolute right-0 top-0 bottom-0 w-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none",
+            scrollPos.isScrolling() || isDragging()
+              ? "opacity-100"
+              : "opacity-0 group-hover/scroll-area:opacity-100"
+          )}
+        >
+          <div
+            class="w-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            style={{
+              height: `${thumbHeight()}px`,
+              transform: `translateY(${thumbTop()}px)`,
+            }}
+            onPointerDown={handleVerticalThumbPointerDown}
+          />
+        </div>
+      )}
+
+      {/* Horizontal Scrollbar Track & Thumb */}
+      {(orientation() === "horizontal" || orientation() === "both") && thumbWidth() > 0 && (
+        <div
+          ref={horizontalTrackRef}
+          class={cn(
+            "absolute bottom-0 left-0 right-0 h-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none",
+            scrollPos.isScrolling() || isDragging()
+              ? "opacity-100"
+              : "opacity-0 group-hover/scroll-area:opacity-100"
+          )}
+        >
+          <div
+            class="h-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            style={{
+              width: `${thumbWidth()}px`,
+              transform: `translateX(${thumbLeft()}px)`,
+            }}
+            onPointerDown={handleHorizontalThumbPointerDown}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/dist/vendor/core-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/dist/vendor/core-src/registry/components/ui/select.tsx

@@ -0,0 +1,156 @@
+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 "@/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> & {
+    class?: string;
+  };
+
+/**
+ * Root Select component built on top of Kobalte headless primitives.
+ */
+export const Select = <Option = any, OptGroup = any, T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>
+) => {
+  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"> =
+  SelectPrimitive.SelectTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Trigger button opening the Select options list.
+ */
+export const SelectTrigger = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, SelectTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectTriggerProps, ["class", "children"]);
+
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        "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",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <SelectPrimitive.Icon
+        as="svg"
+        class="h-4 w-4 opacity-50 transition-transform"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+};
+
+export type SelectValueProps<Option, T extends ValidComponent = "span"> =
+  SelectPrimitive.SelectValueProps<Option, T> & {
+    class?: string;
+  };
+
+/**
+ * Renders the currently selected option text or placeholder.
+ */
+export const SelectValue = <Option = any, T extends ValidComponent = "span">(
+  props: PolymorphicProps<T, SelectValueProps<Option, T>>
+) => {
+  const [local, rest] = splitProps(props as SelectValueProps<Option>, ["class"]);
+
+  return (
+    <SelectPrimitive.Value
+      class={cn("block truncate", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SelectContentProps<T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectContentProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Portaled overlay container rendering the listbox options.
+ */
+export const SelectContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectContentProps, ["class"]);
+  let contentRef: HTMLElement | undefined;
+
+  createClickOutside({
+    target: () => contentRef,
+    onInteractOutside: (e) => {
+      if (typeof (props as any).onInteractOutside === "function") {
+        (props as any).onInteractOutside(e);
+      }
+    },
+  });
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={(el) => {
+          contentRef = el;
+          if (typeof (props as any).ref === "function") (props as any).ref(el);
+        }}
+        class={cn(
+          "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",
+          local.class
+        )}
+        {...rest}
+      >
+        <ScrollArea class="max-h-60 w-full">
+          <SelectPrimitive.Listbox class="p-1 outline-none" />
+        </ScrollArea>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+};
+
+export type SelectItemProps<T extends ValidComponent = "li"> =
+  SelectPrimitive.SelectItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Individual option item choice inside SelectContent.
+ */
+export const SelectItem = <T extends ValidComponent = "li">(
+  props: PolymorphicProps<T, SelectItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectItemProps, ["class", "children"]);
+
+  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",
+        local.class
+      )}
+      {...rest}
+    >
+      <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" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
+    </SelectPrimitive.Item>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/separator.tsx

@@ -0,0 +1,37 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Orientation of the separator line */
+  orientation?: "horizontal" | "vertical";
+  /** Whether the element is purely visual or semantic for screen readers */
+  decorative?: boolean;
+  class?: string;
+}
+
+/**
+ * Nikala UI Separator component used to divide content visually or semantically.
+ */
+export const Separator: Component<SeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "decorative",
+    "class",
+  ]);
+
+  const orientation = () => local.orientation || "horizontal";
+  const isDecorative = () => local.decorative ?? true;
+
+  return (
+    <div
+      role={isDecorative() ? "none" : "separator"}
+      aria-orientation={isDecorative() ? undefined : orientation()}
+      class={cn(
+        "shrink-0 bg-border",
+        orientation() === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};