@nikala-ui/folio 0.13.0

package/dist/vendor/docs-src/components/ui/pager.tsx

@@ -0,0 +1,102 @@
+import { splitProps, Show, children, type Component, type JSX } from "solid-js";
+import { ChevronLeft, ChevronRight } from "lucide-solid";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { cn } from "@/lib/cn";
+
+export interface PagerItem {
+  title: string;
+  href: string;
+}
+
+export interface PagerLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string;
+  href: string;
+  type: "prev" | "next";
+  class?: string;
+}
+
+/**
+ * Individual Next or Previous page navigation card.
+ */
+export const PagerLink: Component<PagerLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["title", "href", "type", "class"]);
+
+  const isNext = () => local.type === "next";
+
+  return (
+    <a
+      href={local.href}
+      class={cn(
+        "group block rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        isNext() && "sm:col-start-2",
+        local.class
+      )}
+      {...rest}
+    >
+      <Card class="h-full transition-all group-hover:bg-accent/40 group-hover:shadow-2xs">
+        <CardHeader class={cn("p-4 flex flex-col space-y-1.5", isNext() && "items-end text-right")}>
+          <CardDescription class="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+            <Show when={!isNext()}>
+              <ChevronLeft class="size-3.5 transition-transform group-hover:-translate-x-0.5" />
+              <span>Previous</span>
+            </Show>
+            <Show when={isNext()}>
+              <span>Next</span>
+              <ChevronRight class="size-3.5 transition-transform group-hover:translate-x-0.5" />
+            </Show>
+          </CardDescription>
+          <CardTitle class="text-sm font-semibold tracking-tight group-hover:text-primary transition-colors line-clamp-1">
+            {local.title}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    </a>
+  );
+};
+
+export interface PagerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Previous documentation page item */
+  prev?: PagerItem | null;
+  /** Next documentation page item */
+  next?: PagerItem | null;
+  class?: string;
+}
+
+/**
+ * Documentation Next / Previous article navigation block composed of Nikala UI Card primitives.
+ */
+export const Pager: Component<PagerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["prev", "next", "class", "children"]);
+  const resolved = children(() => local.children);
+
+  return (
+    <div
+      class={cn("grid grid-cols-1 gap-4 sm:grid-cols-2 mt-10 pt-6 border-t border-border", local.class)}
+      {...rest}
+    >
+      <Show
+        when={resolved()}
+        fallback={
+          <>
+            <Show
+              when={local.prev}
+              fallback={<span class="hidden sm:block" />}
+            >
+              <PagerLink type="prev" title={local.prev!.title} href={local.prev!.href} />
+            </Show>
+            <Show when={local.next}>
+              <PagerLink type="next" title={local.next!.title} href={local.next!.href} />
+            </Show>
+          </>
+        }
+      >
+        {resolved()}
+      </Show>
+    </div>
+  );
+};

package/dist/vendor/docs-src/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/docs-src/components/ui/section-heading.tsx

@@ -0,0 +1,115 @@
+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;
+  /** Optional action rendered alongside the heading */
+  actions?: JSX.Element;
+  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",
+    "actions",
+    "variant",
+    "class",
+  ]);
+
+  const v = () => local.variant || "section";
+
+  return (
+    <div class={cn("space-y-2", local.class)} {...rest}>
+      <div class={cn("flex items-center justify-between gap-2", v() === "section" && "w-full")}>
+        <div class="flex min-w-0 items-center gap-2">
+          <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.actions}>{local.actions}</Show>
+      </div>
+
+      <Show when={local.description}>
+        <p class={descriptionVariants({ variant: v() })}>
+          {local.description}
+        </p>
+      </Show>
+    </div>
+  );
+};

package/dist/vendor/docs-src/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}
+    />
+  );
+};