@nikala-ui/folio 0.13.0

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

@@ -0,0 +1,24 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Skeleton component for rendering animated pulse loading placeholders.
+ */
+export const Skeleton: Component<SkeletonProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "animate-pulse rounded-md bg-accent",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,41 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const spinnerVariants = cva(
+  "inline-block animate-spin rounded-lg border-2 border-current border-r-transparent text-primary",
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        default: "size-4",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface SpinnerProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "role">,
+    VariantProps<typeof spinnerVariants> {
+  /** Accessible text announced while the spinner is active. */
+  label?: string;
+  class?: string;
+}
+
+/** A compact, accessible loading indicator for async UI states. */
+export const Spinner: Component<SpinnerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "label", "class"]);
+
+  return (
+    <span
+      role="status"
+      aria-label={local.label || "Loading"}
+      class={cn(spinnerVariants({ size: local.size }), local.class)}
+      {...rest}
+    />
+  );
+};

package/dist/vendor/docs-src/components/ui/table-of-contents.tsx

@@ -0,0 +1,131 @@
+// src/components/ui/table-of-contents.tsx
+import {
+  splitProps,
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+  For,
+  Show,
+  type Component,
+  type JSX,
+} from "solid-js";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { List, ListHeader, ListItem } from "@/components/ui/list";
+import { cn } from "@/lib/cn";
+import { createScrollPosition } from "@/hooks/create-scroll-position";
+
+export interface TocItem {
+  id: string;
+  text: string;
+  depth: number;
+}
+
+export interface TableOfContentsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> {
+  items: TocItem[];
+  title?: string | false;
+  activeId?: string;
+  onItemClick?: (id: string) => void;
+  class?: string;
+}
+
+/**
+ * Nikala UI TableOfContents Component.
+ * Pure composition of ScrollArea, ListHeader, List, and ListItem with active ScrollSpy tracking.
+ */
+export const TableOfContents: Component<TableOfContentsProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "items",
+    "title",
+    "activeId",
+    "onItemClick",
+    "class",
+  ]);
+
+  const [activeId, setActiveId] = createSignal<string>(local.activeId || "");
+  const scrollPosition = createScrollPosition();
+
+  onMount(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+
+    const headings = (local.items || [])
+      .map((item) => document.getElementById(item.id))
+      .filter((element): element is HTMLElement => Boolean(element));
+
+    const updateActiveHeading = () => {
+      if (headings.length === 0) return;
+
+      const atPageBottom = scrollPosition.isAtBottom();
+      if (atPageBottom) {
+        setActiveId(headings[headings.length - 1].id);
+        return;
+      }
+
+      const heading = [...headings]
+        .reverse()
+        .find((element) => element.getBoundingClientRect().top <= 120);
+
+      setActiveId(heading?.id || headings[0].id);
+    };
+
+    createEffect(() => {
+      scrollPosition.y();
+      scrollPosition.isAtBottom();
+      updateActiveHeading();
+    });
+
+    window.addEventListener("resize", updateActiveHeading);
+    onCleanup(() => window.removeEventListener("resize", updateActiveHeading));
+  });
+
+  const handleClick = (e: MouseEvent, id: string) => {
+    if (typeof document !== "undefined") {
+      const el = document.getElementById(id);
+      if (el) {
+        e.preventDefault();
+        el.scrollIntoView({ behavior: "smooth" });
+        setActiveId(id);
+        if (typeof window !== "undefined") {
+          window.history.pushState(null, "", `#${id}`);
+        }
+      }
+    }
+    local.onItemClick?.(id);
+  };
+
+  return (
+    <ScrollArea class={cn("h-full py-2", local.class)} {...rest}>
+      <Show when={local.title !== false}>
+        <ListHeader
+          title={typeof local.title === "string" ? local.title : "On this page"}
+          class="px-3 pb-1"
+        />
+      </Show>
+
+      <List class="gap-0.5 p-1">
+        <For each={local.items}>
+          {(item) => (
+            <ListItem
+              title={item.text}
+              href={`#${item.id}`}
+              active={activeId() === item.id}
+              size="sm"
+              hoverVariant="muted"
+              class={cn(
+                "text-xs transition-colors py-1 h-auto min-h-0",
+                item.depth === 3 && "pl-5 text-muted-foreground/80",
+                item.depth > 3 && "pl-7 text-muted-foreground/60",
+                activeId() === item.id
+                  ? "text-primary font-medium bg-primary/10"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+              onClick={(e: MouseEvent) => handleClick(e, item.id)}
+            />
+          )}
+        </For>
+      </List>
+    </ScrollArea>
+  );
+};
+
+export const Toc = TableOfContents;

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

@@ -0,0 +1,160 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  class?: string;
+}
+
+/**
+ * Root Table container component wrapped in a responsive scroll container.
+ */
+export const Table: Component<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class="relative w-full overflow-auto">
+      <table
+        class={cn("w-full caption-bottom text-sm", local.class)}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export interface TableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Header section wrapper for the Table component.
+ */
+export const TableHeader: Component<TableHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <thead
+      class={cn("[&_tr]:border-b border-border", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Main body section wrapper for the Table component.
+ */
+export const TableBody: Component<TableBodyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tbody
+      class={cn("[&_tr:last-child]:border-0", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableFooterProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Footer section wrapper for the Table component.
+ */
+export const TableFooter: Component<TableFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tfoot
+      class={cn(
+        "border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {
+  class?: string;
+}
+
+/**
+ * Table row component with hover highlight states.
+ */
+export const TableRow: Component<TableRowProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tr
+      class={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableHeadProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Header cell component for table columns.
+ */
+export const TableHead: Component<TableHeadProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <th
+      class={cn(
+        "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Standard data cell component for table rows.
+ */
+export const TableCell: Component<TableCellProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <td
+      class={cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCaptionProps extends JSX.HTMLAttributes<HTMLTableCaptionElement> {
+  class?: string;
+}
+
+/**
+ * Accessible table caption for describing table contents.
+ */
+export const TableCaption: Component<TableCaptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <caption
+      class={cn("mt-4 text-xs text-muted-foreground pb-2", local.class)}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,204 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
+import { cn } from "@/lib/cn";
+
+interface TabsContextValue {
+  value: Accessor<string | undefined>;
+  setValue: (value: string) => void;
+  orientation: Accessor<"horizontal" | "vertical">;
+}
+
+const TabsContext = createContext<TabsContextValue>();
+
+export interface TabsProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Controlled active tab value */
+  value?: string;
+  /** Uncontrolled default active tab value */
+  defaultValue?: string;
+  /** Callback fired when active tab changes */
+  onChange?: (value: string) => void;
+  /** Layout orientation of tab triggers and content */
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+}
+
+/**
+ * Root Tabs container component managing active tab context state and orientation.
+ */
+export const Tabs: Component<TabsProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "orientation",
+    "class",
+    "children",
+  ]);
+
+  const [currentValue, setCurrentValue] = createControllableSignal<string>({
+    value: () => local.value,
+    defaultValue: local.defaultValue,
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const orientation = () => local.orientation || "horizontal";
+
+  const contextValue: TabsContextValue = {
+    value: currentValue,
+    setValue: (val: string) => setCurrentValue(val),
+    orientation,
+  };
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <div
+        data-orientation={orientation()}
+        class={cn(
+          "w-full",
+          orientation() === "vertical" ? "flex flex-row gap-4" : "flex flex-col gap-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </TabsContext.Provider>
+  );
+};
+
+export interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Container wrapper for Tab triggers.
+ */
+export const TabsList: Component<TabsListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const context = useContext(TabsContext);
+
+  const isVertical = () => context?.orientation() === "vertical";
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation={context?.orientation() || "horizontal"}
+      class={cn(
+        "inline-flex rounded-lg bg-muted p-1 text-muted-foreground",
+        isVertical()
+          ? "flex-col h-auto w-auto items-stretch justify-start"
+          : "h-9 items-center justify-center",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+export interface TabsTriggerProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Unique value identifier for this tab */
+  value: string;
+  class?: string;
+}
+
+/**
+ * Tab button trigger to activate a specific tab panel.
+ */
+export const TabsTrigger: Component<TabsTriggerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "disabled",
+    "class",
+    "children",
+    "onClick",
+  ]);
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("TabsTrigger must be used within a Tabs component");
+  }
+
+  const isSelected = () => context.value() === local.value;
+  const isVertical = () => context.orientation() === "vertical";
+
+  const handleClick = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+    context.setValue(local.value);
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected()}
+      data-state={isSelected() ? "active" : "inactive"}
+      data-orientation={context.orientation()}
+      disabled={local.disabled}
+      onClick={handleClick}
+      class={cn(
+        "inline-flex items-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-accent data-[state=active]:border data-[state=active]:border-border data-[state=active]:text-foreground data-[state=active]:shadow-sm cursor-pointer",
+        isVertical() ? "justify-start py-1.5" : "justify-center",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};
+
+export interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Value matching the corresponding tab trigger */
+  value: string;
+  class?: string;
+}
+
+/**
+ * Content panel revealed when the associated tab is active.
+ */
+export const TabsContent: Component<TabsContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "children"]);
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("TabsContent must be used within a Tabs component");
+  }
+
+  const isSelected = () => context.value() === local.value;
+  const isVertical = () => context.orientation() === "vertical";
+
+  return (
+    <Show when={isSelected()}>
+      <div
+        role="tabpanel"
+        data-state={isSelected() ? "active" : "inactive"}
+        data-orientation={context.orientation()}
+        class={cn(
+          "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          isVertical() ? "flex-1 mt-0" : "mt-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </Show>
+  );
+};