@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-QF6UWWDY.js

@@ -0,0 +1,125 @@
+"use client";
+
+// src/components/spec-playground/locate-json-path.ts
+function parseJsonPath(path) {
+  const segments = [];
+  const re = /\[(\d+)\]|([^.[\]/]+)/g;
+  let match;
+  while ((match = re.exec(path)) !== null) {
+    if (match[1] !== void 0) segments.push(Number(match[1]));
+    else if (match[2] !== void 0 && match[2] !== "$") {
+      const key = match[2];
+      segments.push(/^\d+$/.test(key) ? Number(key) : key);
+    }
+  }
+  return segments;
+}
+var Scanner = class {
+  constructor(text, target) {
+    this.text = text;
+    this.target = target;
+  }
+  text;
+  target;
+  i = 0;
+  /** Offset of the deepest matched prefix, and how many segments it matched. */
+  best = { offset: 0, depth: 0 };
+  ws() {
+    while (this.i < this.text.length && /\s/.test(this.text[this.i])) this.i++;
+  }
+  string() {
+    const start = this.i;
+    this.i++;
+    while (this.i < this.text.length && this.text[this.i] !== '"') {
+      if (this.text[this.i] === "\\") this.i++;
+      this.i++;
+    }
+    this.i++;
+    return JSON.parse(this.text.slice(start, this.i));
+  }
+  value(depth, onPath) {
+    this.ws();
+    const ch = this.text[this.i];
+    if (ch === "{") return this.object(depth, onPath);
+    if (ch === "[") return this.array(depth, onPath);
+    if (ch === '"') return void this.string();
+    while (this.i < this.text.length && !/[,\]}\s]/.test(this.text[this.i])) this.i++;
+  }
+  mark(depth, offset) {
+    if (depth > this.best.depth) this.best = { offset, depth };
+  }
+  object(depth, onPath) {
+    this.i++;
+    for (; ; ) {
+      this.ws();
+      if (this.text[this.i] === "}") return void this.i++;
+      const keyStart = this.i;
+      const key = this.string();
+      const hit = onPath && this.target[depth] === key;
+      if (hit) this.mark(depth + 1, keyStart);
+      this.ws();
+      this.i++;
+      this.value(depth + 1, hit);
+      this.ws();
+      if (this.text[this.i] === ",") this.i++;
+      else if (this.text[this.i] === "}") return void this.i++;
+      else throw new Error("malformed");
+    }
+  }
+  array(depth, onPath) {
+    this.i++;
+    let index = 0;
+    for (; ; ) {
+      this.ws();
+      if (this.text[this.i] === "]") return void this.i++;
+      const hit = onPath && this.target[depth] === index;
+      if (hit) this.mark(depth + 1, this.i);
+      this.value(depth + 1, hit);
+      this.ws();
+      index++;
+      if (this.text[this.i] === ",") this.i++;
+      else if (this.text[this.i] === "]") return void this.i++;
+      else throw new Error("malformed");
+    }
+  }
+};
+function lineOfOffset(text, offset) {
+  let line = 1;
+  for (let i = 0; i < offset && i < text.length; i++) if (text[i] === "\n") line++;
+  return line;
+}
+function offsetOfLine(text, line) {
+  let current = 1;
+  for (let i = 0; i < text.length; i++) {
+    if (current === line) return i;
+    if (text[i] === "\n") current++;
+  }
+  return current === line ? text.length : 0;
+}
+function locateJsonPath(text, path) {
+  const scanner = new Scanner(text, parseJsonPath(path));
+  try {
+    scanner.ws();
+    const rootOffset = scanner.i;
+    scanner.value(0, true);
+    return lineOfOffset(text, scanner.best.depth > 0 ? scanner.best.offset : rootOffset);
+  } catch {
+    return void 0;
+  }
+}
+function lineOfParseError(text, message) {
+  const lineCol = /line (\d+) column \d+/.exec(message);
+  if (lineCol) return Number(lineCol[1]);
+  const position = /position (\d+)/.exec(message);
+  if (position) return lineOfOffset(text, Number(position[1]));
+  return void 0;
+}
+
+export {
+  parseJsonPath,
+  lineOfOffset,
+  offsetOfLine,
+  locateJsonPath,
+  lineOfParseError
+};
+//# sourceMappingURL=chunk-QF6UWWDY.js.map

package/dist/chunk-QF6UWWDY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/spec-playground/locate-json-path.ts"],"sourcesContent":["/**\n * Map a validator's error `path` onto a line of the JSON text it came from, so clicking an\n * error can put the caret there. Paths are JSON-path-like and tolerant of both house styles:\n * `root.children[2].props.variant` (A2UI) and `$.tiles[3].layout.w` (DashboardSpec).\n *\n * The scanner is deliberately small: it walks well-formed JSON, recording where each key or\n * array element starts, and returns the DEEPEST prefix of the path that exists — a\n * `missing` prop's path points at a key that is not there, so its owning object is the best\n * place to land. Malformed text returns `undefined` (the caller shows the error without a line).\n */\n\ntype Segment = string | number;\n\n/** Split `$.a.b[2].c` / `root.children[0]` / `a/b/0` into segments. */\nexport function parseJsonPath(path: string): Segment[] {\n  const segments: Segment[] = [];\n  const re = /\\[(\\d+)\\]|([^.[\\]/]+)/g;\n  let match: RegExpExecArray | null;\n  while ((match = re.exec(path)) !== null) {\n    if (match[1] !== undefined) segments.push(Number(match[1]));\n    else if (match[2] !== undefined && match[2] !== \"$\") {\n      const key = match[2];\n      segments.push(/^\\d+$/.test(key) ? Number(key) : key);\n    }\n  }\n  return segments;\n}\n\nclass Scanner {\n  i = 0;\n  constructor(\n    readonly text: string,\n    readonly target: Segment[],\n  ) {}\n  /** Offset of the deepest matched prefix, and how many segments it matched. */\n  best = { offset: 0, depth: 0 };\n\n  ws() {\n    while (this.i < this.text.length && /\\s/.test(this.text[this.i]!)) this.i++;\n  }\n\n  string(): string {\n    const start = this.i;\n    this.i++; // opening quote\n    while (this.i < this.text.length && this.text[this.i] !== '\"') {\n      if (this.text[this.i] === \"\\\\\") this.i++;\n      this.i++;\n    }\n    this.i++; // closing quote\n    return JSON.parse(this.text.slice(start, this.i)) as string;\n  }\n\n  value(depth: number, onPath: boolean) {\n    this.ws();\n    const ch = this.text[this.i];\n    if (ch === \"{\") return this.object(depth, onPath);\n    if (ch === \"[\") return this.array(depth, onPath);\n    if (ch === '\"') return void this.string();\n    while (this.i < this.text.length && !/[,\\]}\\s]/.test(this.text[this.i]!)) this.i++;\n  }\n\n  private mark(depth: number, offset: number) {\n    if (depth > this.best.depth) this.best = { offset, depth };\n  }\n\n  object(depth: number, onPath: boolean) {\n    this.i++; // {\n    for (;;) {\n      this.ws();\n      if (this.text[this.i] === \"}\") return void this.i++;\n      const keyStart = this.i;\n      const key = this.string();\n      const hit = onPath && this.target[depth] === key;\n      if (hit) this.mark(depth + 1, keyStart);\n      this.ws();\n      this.i++; // :\n      this.value(depth + 1, hit);\n      this.ws();\n      if (this.text[this.i] === \",\") this.i++;\n      else if (this.text[this.i] === \"}\") return void this.i++;\n      else throw new Error(\"malformed\");\n    }\n  }\n\n  array(depth: number, onPath: boolean) {\n    this.i++; // [\n    let index = 0;\n    for (;;) {\n      this.ws();\n      if (this.text[this.i] === \"]\") return void this.i++;\n      const hit = onPath && this.target[depth] === index;\n      if (hit) this.mark(depth + 1, this.i);\n      this.value(depth + 1, hit);\n      this.ws();\n      index++;\n      if (this.text[this.i] === \",\") this.i++;\n      else if (this.text[this.i] === \"]\") return void this.i++;\n      else throw new Error(\"malformed\");\n    }\n  }\n}\n\n/** 1-based line of `offset` in `text`. */\nexport function lineOfOffset(text: string, offset: number): number {\n  let line = 1;\n  for (let i = 0; i < offset && i < text.length; i++) if (text[i] === \"\\n\") line++;\n  return line;\n}\n\n/** 0-based offset where 1-based `line` starts in `text`. */\nexport function offsetOfLine(text: string, line: number): number {\n  let current = 1;\n  for (let i = 0; i < text.length; i++) {\n    if (current === line) return i;\n    if (text[i] === \"\\n\") current++;\n  }\n  return current === line ? text.length : 0;\n}\n\n/**\n * The 1-based line in `text` that best matches `path` — the deepest existing prefix, the\n * document root's line when nothing below it matches — or `undefined` for text that is not\n * well-formed JSON.\n */\nexport function locateJsonPath(text: string, path: string): number | undefined {\n  const scanner = new Scanner(text, parseJsonPath(path));\n  try {\n    scanner.ws();\n    const rootOffset = scanner.i;\n    scanner.value(0, true);\n    return lineOfOffset(text, scanner.best.depth > 0 ? scanner.best.offset : rootOffset);\n  } catch {\n    return undefined;\n  }\n}\n\n/** The line a `JSON.parse` error message points at (`position 42`, `line 3 column 5`), if any. */\nexport function lineOfParseError(text: string, message: string): number | undefined {\n  const lineCol = /line (\\d+) column \\d+/.exec(message);\n  if (lineCol) return Number(lineCol[1]);\n  const position = /position (\\d+)/.exec(message);\n  if (position) return lineOfOffset(text, Number(position[1]));\n  return undefined;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-QGX37P5L.js

@@ -0,0 +1,24 @@
+"use client";
+import {
+  StatePanel
+} from "./chunk-BLNXHETI.js";
+
+// src/components/loading-state/loading-state.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+function LoadingState({ label = "Loading\u2026", size = "md", className }) {
+  return /* @__PURE__ */ jsx(
+    StatePanel,
+    {
+      kind: "loading",
+      loadingLabel: typeof label === "string" ? label : void 0,
+      size,
+      className
+    }
+  );
+}
+
+export {
+  LoadingState
+};
+//# sourceMappingURL=chunk-QGX37P5L.js.map

package/dist/chunk-QGX37P5L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/loading-state/loading-state.tsx"],"sourcesContent":["/**\n * @deprecated Use `StatePanel kind=\"loading\"` from `@elabs-ai/components-ui` instead.\n * This wrapper is kept for back-compat and will be removed in a future release.\n */\nimport { type ReactNode } from \"react\";\nimport { StatePanel } from \"../state-panel/state-panel\";\n\nexport interface LoadingStateProps {\n  /** Accessible status label. Defaults to \"Loading…\". */\n  label?: ReactNode;\n  /** Visual size of the spinner. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** @deprecated Use `<StatePanel kind=\"loading\" />` instead. */\nexport function LoadingState({ label = \"Loading…\", size = \"md\", className }: LoadingStateProps) {\n  return (\n    <StatePanel\n      kind=\"loading\"\n      loadingLabel={typeof label === \"string\" ? label : undefined}\n      size={size}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,OAA+B;AAc3B;AAFG,SAAS,aAAa,EAAE,QAAQ,iBAAY,OAAO,MAAM,UAAU,GAAsB;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAc,OAAO,UAAU,WAAW,QAAQ;AAAA,MAClD;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-QNEOO22E.js

@@ -0,0 +1,75 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/progress/progress.tsx
+import { forwardRef } from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var progressIndicatorVariants = cva("size-full flex-1 transition-transform", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var Progress = forwardRef(
+  function Progress2({ className, value, variant, marker, markerLabel, "aria-valuetext": ariaValuetext, ...props }, ref) {
+    const hasMarker = typeof marker === "number" && Number.isFinite(marker);
+    const clampedMarker = hasMarker ? Math.min(100, Math.max(0, marker)) : void 0;
+    const resolvedValuetext = ariaValuetext ?? (hasMarker && markerLabel && typeof value === "number" ? `${Math.round(value)}%, ${markerLabel}` : void 0);
+    const root = /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      {
+        ref,
+        "data-slot": "progress",
+        value,
+        "aria-valuetext": resolvedValuetext,
+        className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            "data-slot": "progress-indicator",
+            className: progressIndicatorVariants({ variant }),
+            style: { transform: `translateX(-${100 - (value || 0)}%)` }
+          }
+        )
+      }
+    );
+    if (!hasMarker) {
+      return root;
+    }
+    return (
+      // Root keeps `overflow-hidden` (clips the indicator fill, unchanged
+      // above); the tick lives OUTSIDE it as a sibling so it is never
+      // clipped. The wrapper mirrors `className` so it matches the track's
+      // own box exactly (width/height/flex sizing), which is what the
+      // tick's `insetInlineStart` percentage is measured against.
+      /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+        root,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": markerLabel ? void 0 : "true",
+            className: "pointer-events-none absolute -top-0.5 -bottom-0.5 w-0.5 bg-foreground",
+            "data-slot": "progress-marker",
+            style: { insetInlineStart: `${clampedMarker}%` }
+          }
+        )
+      ] })
+    );
+  }
+);
+
+export {
+  progressIndicatorVariants,
+  Progress
+};
+//# sourceMappingURL=chunk-QNEOO22E.js.map

package/dist/chunk-QNEOO22E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Tone vocabulary reused from `StatusBadge`/`Alert` (success/warning/destructive\n * on semantic tokens, #358) rather than reinvented. `default` keeps the fill\n * byte-identical (`bg-primary`) when `variant` is unset.\n */\nexport const progressIndicatorVariants = cva(\"size-full flex-1 transition-transform\", {\n  variants: {\n    variant: {\n      default: \"bg-primary\",\n      success: \"bg-success\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\nexport interface ProgressProps\n  extends\n    ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressIndicatorVariants> {\n  /**\n   * Reference point (0–100, same scale as `value`) — e.g. an \"expected by\n   * today\" pace or a target — rendered as a thin vertical tick on the track.\n   * Unset (default) renders no tick and leaves the DOM/layout byte-identical\n   * to a marker-less `Progress`.\n   */\n  marker?: number;\n  /**\n   * What `marker` represents (already localized by the caller — e.g.\n   * `\"expected 70% by today\"`). When set, it is appended to the progress\n   * bar's accessible value text so assistive tech hears the reference point\n   * alongside the value; a caller-supplied `aria-valuetext` always wins over\n   * this composition. When `marker` is set but `markerLabel` is not, the\n   * tick is purely decorative and `aria-valuetext` is left untouched — this\n   * component never invents its own English copy (i18n-strings).\n   */\n  markerLabel?: string;\n}\n\n/**\n * Color must not be the only signal a guardrail tripped: set `aria-valuetext`\n * (e.g. `\"Exceeded — 120 of 100\"`) alongside a non-`default` `variant` — it\n * passes straight through to the underlying `role=\"progressbar\"` element via\n * `...props` (Radix's `ProgressPrimitive.Root` already supports it).\n */\nexport const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(\n  function Progress(\n    { className, value, variant, marker, markerLabel, \"aria-valuetext\": ariaValuetext, ...props },\n    ref,\n  ) {\n    const hasMarker = typeof marker === \"number\" && Number.isFinite(marker);\n    const clampedMarker = hasMarker ? Math.min(100, Math.max(0, marker as number)) : undefined;\n    // No invented English glue words (i18n-strings) — just the numeric value\n    // plus the caller's own, already-localized `markerLabel`. A caller's own\n    // `aria-valuetext` always wins and is never overwritten.\n    const resolvedValuetext =\n      ariaValuetext ??\n      (hasMarker && markerLabel && typeof value === \"number\"\n        ? `${Math.round(value)}%, ${markerLabel}`\n        : undefined);\n\n    const root = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        data-slot=\"progress\"\n        value={value}\n        aria-valuetext={resolvedValuetext}\n        className={cn(\"relative h-2 w-full overflow-hidden rounded-full bg-muted\", className)}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={progressIndicatorVariants({ variant })}\n          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    );\n\n    if (!hasMarker) {\n      return root;\n    }\n\n    return (\n      // Root keeps `overflow-hidden` (clips the indicator fill, unchanged\n      // above); the tick lives OUTSIDE it as a sibling so it is never\n      // clipped. The wrapper mirrors `className` so it matches the track's\n      // own box exactly (width/height/flex sizing), which is what the\n      // tick's `insetInlineStart` percentage is measured against.\n      <div className={cn(\"relative\", className)}>\n        {root}\n        <span\n          aria-hidden={markerLabel ? undefined : \"true\"}\n          className=\"pointer-events-none absolute -top-0.5 -bottom-0.5 w-0.5 bg-foreground\"\n          data-slot=\"progress-marker\"\n          style={{ insetInlineStart: `${clampedMarker}%` }}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AA0E/B,cAkBF,YAlBE;AAlED,IAAM,4BAA4B,IAAI,yCAAyC;AAAA,EACpF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC;AA+BM,IAAM,WAAW;AAAA,EACtB,SAASA,UACP,EAAE,WAAW,OAAO,SAAS,QAAQ,aAAa,kBAAkB,eAAe,GAAG,MAAM,GAC5F,KACA;AACA,UAAM,YAAY,OAAO,WAAW,YAAY,OAAO,SAAS,MAAM;AACtE,UAAM,gBAAgB,YAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAgB,CAAC,IAAI;AAIjF,UAAM,oBACJ,kBACC,aAAa,eAAe,OAAO,UAAU,WAC1C,GAAG,KAAK,MAAM,KAAK,CAAC,MAAM,WAAW,KACrC;AAEN,UAAM,OACJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,kBAAgB;AAAA,QAChB,WAAW,GAAG,6DAA6D,SAAS;AAAA,QACnF,GAAG;AAAA,QAEJ;AAAA,UAAmB;AAAA,UAAlB;AAAA,YACC,aAAU;AAAA,YACV,WAAW,0BAA0B,EAAE,QAAQ,CAAC;AAAA,YAChD,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,QAC5D;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAME,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACrC;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,cAAc,SAAY;AAAA,YACvC,WAAU;AAAA,YACV,aAAU;AAAA,YACV,OAAO,EAAE,kBAAkB,GAAG,aAAa,IAAI;AAAA;AAAA,QACjD;AAAA,SACF;AAAA;AAAA,EAEJ;AACF;","names":["Progress"]}

package/dist/chunk-QODOFLHL.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-QODOFLHL.js.map

package/dist/chunk-QODOFLHL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-QRGYKV4J.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-QRGYKV4J.js.map

package/dist/chunk-QRGYKV4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-QTIKGWU4.js

@@ -0,0 +1,91 @@
+"use client";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar
+} from "./chunk-R3SYH7RG.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-B5QQLMEE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/nav-main/nav-main.tsx
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavMain({ routes, className }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const [openCollapsible, setOpenCollapsible] = useState(null);
+  return /* @__PURE__ */ jsx(SidebarMenu, { className, children: routes.map((route) => {
+    const isOpen = !isCollapsed && openCollapsible === route.id;
+    const hasSubRoutes = !!route.subs?.length;
+    return /* @__PURE__ */ jsx(SidebarMenuItem, { children: hasSubRoutes ? /* @__PURE__ */ jsxs(
+      Collapsible,
+      {
+        open: isOpen,
+        onOpenChange: (open) => setOpenCollapsible(open ? route.id : null),
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            SidebarMenuButton,
+            {
+              tooltip: route.title,
+              className: cn(
+                "flex w-full items-center rounded-lg px-2 transition-colors",
+                isOpen ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-muted-foreground",
+                isCollapsed && "justify-center"
+              ),
+              children: [
+                route.icon,
+                !isCollapsed && /* @__PURE__ */ jsx("span", { className: "ms-2 flex-1 text-body font-medium", children: route.title }),
+                !isCollapsed && /* @__PURE__ */ jsx("span", { className: "ms-auto", children: isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) })
+              ]
+            }
+          ) }),
+          !isCollapsed && /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { className: "my-1 ms-3.5", children: route.subs?.map((subRoute) => /* @__PURE__ */ jsx(
+            SidebarMenuSubItem,
+            {
+              className: "h-auto",
+              children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: subRoute.link,
+                  className: "flex items-center rounded-md px-4 py-1.5 text-body font-medium text-sidebar-muted-foreground",
+                  children: subRoute.title
+                }
+              ) })
+            },
+            `${route.id}-${subRoute.title}`
+          )) }) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(SidebarMenuButton, { tooltip: route.title, asChild: true, children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: route.link,
+        className: cn(
+          "flex items-center rounded-lg px-2 text-sidebar-muted-foreground",
+          isCollapsed && "justify-center"
+        ),
+        children: [
+          route.icon,
+          !isCollapsed && /* @__PURE__ */ jsx("span", { className: "ms-2 text-body font-medium", children: route.title })
+        ]
+      }
+    ) }) }, route.id);
+  }) });
+}
+
+export {
+  NavMain
+};
+//# sourceMappingURL=chunk-QTIKGWU4.js.map

package/dist/chunk-QTIKGWU4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav-main/nav-main.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Shared collapsible sidebar navigation primitive (issue #99).\n * Promoted from `registry/blocks/sidebar-02/nav-main.tsx`.\n *\n * Renders a `SidebarMenu` of routes; each route with sub-items uses a\n * `Collapsible` expand/collapse affordance. Collapses icon-only when the\n * sidebar is in the `\"collapsed\"` state.\n */\n\"use client\";\n\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../collapsible\";\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  useSidebar,\n} from \"../sidebar\";\nimport { cn } from \"../../lib/cn\";\n\nexport type NavMainSubItem = {\n  title: string;\n  link: string;\n  icon?: React.ReactNode;\n};\n\nexport type NavMainRoute = {\n  id: string;\n  title: string;\n  icon?: React.ReactNode;\n  link: string;\n  subs?: NavMainSubItem[];\n};\n\nexport interface NavMainProps {\n  routes: NavMainRoute[];\n  className?: string;\n}\n\n/**\n * Collapsible primary navigation list for sidebars.\n *\n * - Routes with `subs` render as an expandable group (one open at a time).\n * - Routes without `subs` render as a simple link button.\n * - Collapses to icon-only when the enclosing `Sidebar` is in `\"collapsed\"` state.\n *\n * @example\n * ```tsx\n * <NavMain routes={[\n *   { id: \"home\", title: \"Home\", icon: <Home />, link: \"#\" },\n *   { id: \"settings\", title: \"Settings\", icon: <Settings />, link: \"#\",\n *     subs: [{ title: \"General\", link: \"#\" }] },\n * ]} />\n * ```\n */\nexport function NavMain({ routes, className }: NavMainProps) {\n  const { state } = useSidebar();\n  const isCollapsed = state === \"collapsed\";\n  const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);\n\n  return (\n    <SidebarMenu className={className}>\n      {routes.map((route) => {\n        const isOpen = !isCollapsed && openCollapsible === route.id;\n        const hasSubRoutes = !!route.subs?.length;\n\n        return (\n          <SidebarMenuItem key={route.id}>\n            {hasSubRoutes ? (\n              <Collapsible\n                open={isOpen}\n                onOpenChange={(open) => setOpenCollapsible(open ? route.id : null)}\n                className=\"w-full\"\n              >\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton\n                    tooltip={route.title}\n                    className={cn(\n                      \"flex w-full items-center rounded-lg px-2 transition-colors\",\n                      isOpen\n                        ? \"bg-sidebar-accent text-sidebar-accent-foreground\"\n                        : \"text-sidebar-muted-foreground\",\n                      isCollapsed && \"justify-center\",\n                    )}\n                  >\n                    {route.icon}\n                    {!isCollapsed && (\n                      <span className=\"ms-2 flex-1 text-body font-medium\">{route.title}</span>\n                    )}\n                    {!isCollapsed && (\n                      <span className=\"ms-auto\">\n                        {isOpen ? (\n                          <ChevronUp className=\"size-4\" />\n                        ) : (\n                          <ChevronDown className=\"size-4\" />\n                        )}\n                      </span>\n                    )}\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                {!isCollapsed && (\n                  <CollapsibleContent>\n                    <SidebarMenuSub className=\"my-1 ms-3.5\">\n                      {route.subs?.map((subRoute) => (\n                        <SidebarMenuSubItem\n                          key={`${route.id}-${subRoute.title}`}\n                          className=\"h-auto\"\n                        >\n                          <SidebarMenuSubButton asChild>\n                            <a\n                              href={subRoute.link}\n                              className=\"flex items-center rounded-md px-4 py-1.5 text-body font-medium text-sidebar-muted-foreground\"\n                            >\n                              {subRoute.title}\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                )}\n              </Collapsible>\n            ) : (\n              <SidebarMenuButton tooltip={route.title} asChild>\n                <a\n                  href={route.link}\n                  className={cn(\n                    \"flex items-center rounded-lg px-2 text-sidebar-muted-foreground\",\n                    isCollapsed && \"justify-center\",\n                  )}\n                >\n                  {route.icon}\n                  {!isCollapsed && (\n                    <span className=\"ms-2 text-body font-medium\">{route.title}</span>\n                  )}\n                </a>\n              </SidebarMenuButton>\n            )}\n          </SidebarMenuItem>\n        );\n      })}\n    </SidebarMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,SAAS,gBAAgB;AACzB,SAAS,aAAa,iBAAiB;AAoErB,SAYI,KAZJ;AApBX,SAAS,QAAQ,EAAE,QAAQ,UAAU,GAAiB;AAC3D,QAAM,EAAE,MAAM,IAAI,WAAW;AAC7B,QAAM,cAAc,UAAU;AAC9B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAwB,IAAI;AAE1E,SACE,oBAAC,eAAY,WACV,iBAAO,IAAI,CAAC,UAAU;AACrB,UAAM,SAAS,CAAC,eAAe,oBAAoB,MAAM;AACzD,UAAM,eAAe,CAAC,CAAC,MAAM,MAAM;AAEnC,WACE,oBAAC,mBACE,yBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,mBAAmB,OAAO,MAAM,KAAK,IAAI;AAAA,QACjE,WAAU;AAAA,QAEV;AAAA,8BAAC,sBAAmB,SAAO,MACzB;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAA,cACf,WAAW;AAAA,gBACT;AAAA,gBACA,SACI,qDACA;AAAA,gBACJ,eAAe;AAAA,cACjB;AAAA,cAEC;AAAA,sBAAM;AAAA,gBACN,CAAC,eACA,oBAAC,UAAK,WAAU,qCAAqC,gBAAM,OAAM;AAAA,gBAElE,CAAC,eACA,oBAAC,UAAK,WAAU,WACb,mBACC,oBAAC,aAAU,WAAU,UAAS,IAE9B,oBAAC,eAAY,WAAU,UAAS,GAEpC;AAAA;AAAA;AAAA,UAEJ,GACF;AAAA,UACC,CAAC,eACA,oBAAC,sBACC,8BAAC,kBAAe,WAAU,eACvB,gBAAM,MAAM,IAAI,CAAC,aAChB;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cAEV,8BAAC,wBAAqB,SAAO,MAC3B;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,SAAS;AAAA,kBACf,WAAU;AAAA,kBAET,mBAAS;AAAA;AAAA,cACZ,GACF;AAAA;AAAA,YAVK,GAAG,MAAM,EAAE,IAAI,SAAS,KAAK;AAAA,UAWpC,CACD,GACH,GACF;AAAA;AAAA;AAAA,IAEJ,IAEA,oBAAC,qBAAkB,SAAS,MAAM,OAAO,SAAO,MAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA,gBAAM;AAAA,UACN,CAAC,eACA,oBAAC,UAAK,WAAU,8BAA8B,gBAAM,OAAM;AAAA;AAAA;AAAA,IAE9D,GACF,KArEkB,MAAM,EAuE5B;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}