@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,198 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  Show,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { cn } from "@/lib/cn";
+
+export type StepVariant =
+  | "default"
+  | "primary"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "secondary"
+  | "outline"
+  | "destructive"
+  | "purple";
+
+function toBadgeVariant(variant?: StepVariant): NonNullable<BadgeProps["variant"]> {
+  switch (variant) {
+    case "primary":
+      return "default";
+    case "danger":
+      return "destructive";
+    case "default":
+      return "outline";
+    case "info":
+      return "info";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "secondary":
+      return "secondary";
+    default:
+      return "outline";
+  }
+}
+export type StepOrientation = "horizontal" | "vertical";
+
+interface StepsContextValue {
+  variant?: StepVariant;
+  orientation?: () => StepOrientation;
+}
+
+const StepsContext = createContext<StepsContextValue>();
+
+export interface StepsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Layout orientation: vertical (default) or horizontal */
+  orientation?: StepOrientation;
+  /** Default color variant for all steps in this container */
+  variant?: StepVariant;
+  class?: string;
+}
+
+/**
+ * Multi-step instruction and stepper container supporting vertical and horizontal layouts.
+ */
+export const Steps: ParentComponent<StepsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["orientation", "variant", "class", "children"]);
+
+  const orientation = () => local.orientation || "vertical";
+
+  return (
+    <StepsContext.Provider value={{ variant: local.variant, orientation }}>
+      <div
+        class={cn(
+          "relative my-6 [counter-reset:step]",
+          orientation() === "horizontal"
+            ? "flex flex-row items-start justify-between w-full"
+            : "ml-4 border-l border-border/80 pl-8 space-y-8",
+          local.class
+        )}
+        {...rest}
+      >
+        {/* Single continuous horizontal rail in parent container */}
+        <Show when={orientation() === "horizontal"}>
+          <div class="absolute left-8 right-8 top-3.5 h-0.5 bg-border/80 z-0" />
+        </Show>
+
+        {local.children}
+      </div>
+    </StepsContext.Provider>
+  );
+};
+
+export interface StepProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Optional custom step number, icon, or label to override automatic CSS counter */
+  step?: string | number | JSX.Element;
+  /** Optional step title rendered at the top of the step */
+  title?: string;
+  /** Step color variant */
+  variant?: StepVariant;
+  class?: string;
+}
+
+export const Step: ParentComponent<StepProps> = (props) => {
+  const [local, rest] = splitProps(props, ["step", "title", "variant", "class", "children"]);
+  const context = useContext(StepsContext);
+
+  const effectiveVariant = () => local.variant || context?.variant || "default";
+  const isHorizontal = () => context?.orientation?.() === "horizontal";
+
+  return (
+    <Show
+      when={isHorizontal()}
+      fallback={
+        <div class={cn("relative", local.class)} {...rest}>
+          {/* Numbered Step Badge with geometric center on left vertical border line */}
+          <Badge
+            variant={toBadgeVariant(effectiveVariant())}
+            class={cn(
+              "absolute -left-[2.875rem] top-0 size-7 p-0 flex items-center justify-center rounded-lg font-mono text-xs font-semibold shadow-2xs select-none",
+              !local.step && "[counter-increment:step] before:content-[counter(step)]"
+            )}
+          >
+            <Show when={local.step}>
+              {local.step}
+            </Show>
+          </Badge>
+
+          {/* Step Title Header */}
+          <Show when={local.title}>
+            <h4 class="font-semibold text-base tracking-tight text-foreground mb-2">
+              {local.title}
+            </h4>
+          </Show>
+
+          {/* Step Body Content */}
+          <div class="text-sm leading-relaxed text-muted-foreground space-y-3">
+            {local.children}
+          </div>
+        </div>
+      }
+    >
+      <div class={cn("flex-1 flex flex-col items-center text-center relative z-10 px-2", local.class)} {...rest}>
+        {/* Step Badge sitting on top of continuous parent rail */}
+        <Badge
+          variant={toBadgeVariant(effectiveVariant())}
+          class={cn(
+            "mb-2.5 size-7 p-0 flex items-center justify-center rounded-lg font-mono text-xs font-semibold shadow-2xs select-none",
+            !local.step && "[counter-increment:step] before:content-[counter(step)]"
+          )}
+        >
+          <Show when={local.step}>
+            {local.step}
+          </Show>
+        </Badge>
+
+        {/* Step Title Header */}
+        <Show when={local.title}>
+          <h4 class="font-semibold text-sm tracking-tight text-foreground mb-1">
+            {local.title}
+          </h4>
+        </Show>
+
+        {/* Step Body Content */}
+        <div class="text-xs leading-relaxed text-muted-foreground">
+          {local.children}
+        </div>
+      </div>
+    </Show>
+  );
+};
+
+export interface StepTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const StepTitle: ParentComponent<StepTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <h4
+      class={cn("font-semibold text-base tracking-tight text-foreground mb-2", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </h4>
+  );
+};
+
+export interface StepDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const StepDescription: ParentComponent<StepDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div class={cn("text-sm leading-relaxed text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
+import { cn } from "@/lib/cn";
+
+export interface SwitchProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Uncontrolled default checked state */
+  defaultChecked?: boolean;
+  /** Event handler triggered when toggle state changes */
+  onChange?: (checked: boolean) => void;
+  class?: string;
+}
+
+/**
+ * Nikala UI Switch component for boolean toggle inputs built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Switch: Component<SwitchProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "disabled",
+    "class",
+    "onClick",
+  ]);
+
+  const [isChecked, setIsChecked] = createControllableSignal({
+    value: () => local.checked,
+    defaultValue: local.defaultChecked ?? false,
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const toggle = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+    setIsChecked(!isChecked());
+
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isChecked()}
+      data-state={isChecked() ? "checked" : "unchecked"}
+      disabled={local.disabled}
+      onClick={toggle}
+      class={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+        local.class
+      )}
+      {...rest}
+    >
+      <span
+        data-state={isChecked() ? "checked" : "unchecked"}
+        class={cn(
+          "pointer-events-none block h-4 w-4 rounded-sm bg-primary-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </button>
+  );
+};

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