@nikala-ui/core 0.11.0 → 0.12.0

package/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/src/registry/components/ui/switch.tsx

@@ -1,5 +1,5 @@
 import { splitProps, type Component, type JSX } from "solid-js";
-import { createControllableSignal } from "@nikala-ui/hooks";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
 import { cn } from "@/lib/cn";
 
 export interface SwitchProps

package/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/src/registry/components/ui/tabs.tsx

@@ -7,7 +7,7 @@ import {
   type JSX,
   type Accessor,
 } from "solid-js";
-import { createControllableSignal } from "@nikala-ui/hooks";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
 import { cn } from "@/lib/cn";
 
 interface TabsContextValue {