@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-LLYLDZXC.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  illustrationAccent,
+  illustrationSvgProps
+} from "./chunk-CEQ3YKHR.js";
+
+// src/illustrations/error-illustration.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorIllustration = forwardRef(
+  function ErrorIllustration2({ size, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        ...illustrationSvgProps(size, className),
+        "data-slot": "error-illustration",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M36,32 L83.06,32 L71.29,55.16 L92.47,69.06 L66.59,92.24 L76,120 L36,120 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M124,36 L124,124 L84,124 L74.59,96.24 L100.47,73.06 L79.29,59.16 L91.06,36 Z" }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "104",
+              y: "46",
+              width: "8",
+              height: "24",
+              rx: "4",
+              style: { fill: illustrationAccent("var(--destructive-text)") },
+              stroke: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "108",
+              cy: "80",
+              r: "5",
+              style: { fill: illustrationAccent("var(--destructive-text)") },
+              stroke: "none"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ErrorIllustration.displayName = "ErrorIllustration";
+
+export {
+  ErrorIllustration
+};
+//# sourceMappingURL=chunk-LLYLDZXC.js.map

package/dist/chunk-LLYLDZXC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/error-illustration.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  illustrationSvgProps,\n  illustrationAccent,\n  type IllustrationProps,\n} from \"./illustration-base\";\n\n/**\n * Recoverable-failure state. A line-art document split into two halves with a\n * visible gap between them — distinguishable from `NoAccessIllustration`/\n * `OfflineIllustration` by silhouette alone (a split document reads as\n * \"broken\" even in greyscale), per the WCAG 1.4.1 \"never color-only\" rule.\n * The exclamation mark IS meaning-bearing (per the accent-semantics\n * convention in `illustration-base.tsx`, #48 finding 1) — it turns \"torn\n * document\" into \"warning\", information the silhouette alone doesn't carry —\n * so it stays, in the upper-right quadrant of the right-hand half, clear of\n * both documents' outlines.\n *\n * Redrawn for #24 fix round 1 (P1-3) — the previous cracked-card + tiny alert\n * triangle read as a lightning bolt or a broken-image placeholder and the\n * triangle's exclamation collapsed to an illegible blob at 4rem.\n *\n * Redrawn again for #48 finding 3 — the mark previously sat at (76-84,\n * 54-95), exactly where the two document halves' torn edges converge, so it\n * read as a knot of overlapping lines rather than a \"!\". Moved to\n * (98-113, 44-85), 8-15 units clear of the nearest tear line at every\n * y-coordinate it spans.\n */\nexport const ErrorIllustration = forwardRef<SVGSVGElement, IllustrationProps>(\n  function ErrorIllustration({ size, className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        {...illustrationSvgProps(size, className)}\n        data-slot=\"error-illustration\"\n        {...props}\n      >\n        <path d=\"M36,32 L83.06,32 L71.29,55.16 L92.47,69.06 L66.59,92.24 L76,120 L36,120 Z\" />\n        <path d=\"M124,36 L124,124 L84,124 L74.59,96.24 L100.47,73.06 L79.29,59.16 L91.06,36 Z\" />\n        <rect\n          x=\"104\"\n          y=\"46\"\n          width=\"8\"\n          height=\"24\"\n          rx=\"4\"\n          style={{ fill: illustrationAccent(\"var(--destructive-text)\") }}\n          stroke=\"none\"\n        />\n        <circle\n          cx=\"108\"\n          cy=\"80\"\n          r=\"5\"\n          style={{ fill: illustrationAccent(\"var(--destructive-text)\") }}\n          stroke=\"none\"\n        />\n      </svg>\n    );\n  },\n);\nErrorIllustration.displayName = \"ErrorIllustration\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AA+BrB,SAME,KANF;AAHC,IAAM,oBAAoB;AAAA,EAC/B,SAASA,mBAAkB,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK;AAC7D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,qBAAqB,MAAM,SAAS;AAAA,QACxC,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,GAAE,6EAA4E;AAAA,UACpF,oBAAC,UAAK,GAAE,gFAA+E;AAAA,UACvF;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,GAAE;AAAA,cACF,OAAM;AAAA,cACN,QAAO;AAAA,cACP,IAAG;AAAA,cACH,OAAO,EAAE,MAAM,mBAAmB,yBAAyB,EAAE;AAAA,cAC7D,QAAO;AAAA;AAAA,UACT;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cACF,OAAO,EAAE,MAAM,mBAAmB,yBAAyB,EAAE;AAAA,cAC7D,QAAO;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;","names":["ErrorIllustration"]}

package/dist/chunk-LMV225AS.js

@@ -0,0 +1,39 @@
+"use client";
+import {
+  illustrationAccent,
+  illustrationSvgProps
+} from "./chunk-CEQ3YKHR.js";
+
+// src/illustrations/success-illustration.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SuccessIllustration = forwardRef(
+  function SuccessIllustration2({ size, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        ...illustrationSvgProps(size, className),
+        "data-slot": "success-illustration",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "80", cy: "78", r: "44" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M59,81 L75,96 L103,60",
+              style: { stroke: illustrationAccent("var(--success-text)") },
+              strokeWidth: 3
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SuccessIllustration.displayName = "SuccessIllustration";
+
+export {
+  SuccessIllustration
+};
+//# sourceMappingURL=chunk-LMV225AS.js.map

package/dist/chunk-LMV225AS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/success-illustration.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  illustrationSvgProps,\n  illustrationAccent,\n  type IllustrationProps,\n} from \"./illustration-base\";\n\n/**\n * Completed / positive-outcome state. A line-art ring with a `--success-text`\n * checkmark — a ring + check needs no rays. The checkmark is meaning-bearing\n * (per the accent-semantics convention in `illustration-base.tsx`, #48\n * finding 1) — a bare ring alone carries no state at all.\n *\n * Redrawn for #24 fix round 1 (P0-1, P1-4) — the checkmark previously used\n * `--primary` (re-creating the \"success chips read as primary\" confusion #334\n * removed from the tokens) at `strokeWidth={6}` (off the shared accent-weight\n * rule), and the three radiating ticks straddled the now-removed dashed stage\n * (two crossed it, one didn't), reading as a clock/sun rather than a\n * celebration.\n */\nexport const SuccessIllustration = forwardRef<SVGSVGElement, IllustrationProps>(\n  function SuccessIllustration({ size, className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        {...illustrationSvgProps(size, className)}\n        data-slot=\"success-illustration\"\n        {...props}\n      >\n        <circle cx=\"80\" cy=\"78\" r=\"44\" />\n        <path\n          d=\"M59,81 L75,96 L103,60\"\n          style={{ stroke: illustrationAccent(\"var(--success-text)\") }}\n          strokeWidth={3}\n        />\n      </svg>\n    );\n  },\n);\nSuccessIllustration.displayName = \"SuccessIllustration\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAuBrB,SAME,KANF;AAHC,IAAM,sBAAsB;AAAA,EACjC,SAASA,qBAAoB,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,qBAAqB,MAAM,SAAS;AAAA,QACxC,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,UAC/B;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,OAAO,EAAE,QAAQ,mBAAmB,qBAAqB,EAAE;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;","names":["SuccessIllustration"]}

package/dist/chunk-LSYVAOSH.js

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

package/dist/chunk-LSYVAOSH.js.map

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

package/dist/chunk-LYVBDMDQ.js

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

package/dist/chunk-LYVBDMDQ.js.map

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

package/dist/chunk-M2KNQZUL.js

@@ -0,0 +1,73 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/input-otp/input-otp.tsx
+import { forwardRef, useContext } from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTP = forwardRef(function InputOTP2({ className, containerClassName, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      ref,
+      containerClassName: cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+});
+var InputOTPGroup = forwardRef(
+  function InputOTPGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props });
+  }
+);
+var InputOTPSlot = forwardRef(function InputOTPSlot2({ index, className, ...props }, ref) {
+  const ctx = useContext(OTPInputContext);
+  const slot = ctx.slots[index];
+  const { char, hasFakeCaret, isActive } = slot ?? {
+    char: null,
+    hasFakeCaret: false,
+    isActive: false
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
+        // The OTP slot IS the field's focus indicator: the real focused element is
+        // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It
+        // therefore carries the compound indicator (#67) — the state is JS-driven, so
+        // it is the `-static` flavour rather than a `:focus-visible` one, and the
+        // border-color swap is a plain class (twMerge drops `border-input` for it)
+        // rather than a `focus-visible:` variant.
+        isActive && "z-10 focus-ring-static border-input-focus",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground" }) })
+      ]
+    }
+  );
+});
+var InputOTPSeparator = forwardRef(
+  function InputOTPSeparator2(props, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { className: "size-4 text-muted-foreground" }) });
+  }
+);
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator
+};
+//# sourceMappingURL=chunk-M2KNQZUL.js.map

package/dist/chunk-M2KNQZUL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input-otp/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useContext, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { Minus } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\n\nexport const InputOTP = forwardRef<\n  ElementRef<typeof OTPInput>,\n  ComponentPropsWithoutRef<typeof OTPInput>\n>(function InputOTP({ className, containerClassName, ...props }, ref) {\n  return (\n    <OTPInput\n      ref={ref}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const InputOTPGroup = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function InputOTPGroup({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />;\n  },\n);\n\nexport const InputOTPSlot = forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { index: number }\n>(function InputOTPSlot({ index, className, ...props }, ref) {\n  const ctx = useContext(OTPInputContext);\n  const slot = ctx.slots[index];\n  const { char, hasFakeCaret, isActive } = slot ?? {\n    char: null,\n    hasFakeCaret: false,\n    isActive: false,\n  };\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md\",\n        // The OTP slot IS the field's focus indicator: the real focused element is\n        // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It\n        // therefore carries the compound indicator (#67) — the state is JS-driven, so\n        // it is the `-static` flavour rather than a `:focus-visible` one, and the\n        // border-color swap is a plain class (twMerge drops `border-input` for it)\n        // rather than a `focus-visible:` variant.\n        isActive && \"z-10 focus-ring-static border-input-focus\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport const InputOTPSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function InputOTPSeparator(props, ref) {\n    return (\n      <div ref={ref} role=\"separator\" {...props}>\n        <Minus className=\"size-4 text-muted-foreground\" />\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,kBAAkE;AACvF,SAAS,UAAU,uBAAuB;AAC1C,SAAS,aAAa;AAQlB,cA8BA,YA9BA;AALG,IAAM,WAAW,WAGtB,SAASA,UAAS,EAAE,WAAW,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,gBAAgB;AAAA,EAC3B,SAASC,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAAA,EAClF;AACF;AAEO,IAAM,eAAe,WAG1B,SAASC,cAAa,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,KAAK;AAC3D,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM,OAAO,IAAI,MAAM,KAAK;AAC5B,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI,QAAQ;AAAA,IAC/C,MAAM;AAAA,IACN,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,oBAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,8CAA6C,GAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,oBAAoB;AAAA,EAC/B,SAASC,mBAAkB,OAAO,KAAK;AACrC,WACE,oBAAC,SAAI,KAAU,MAAK,aAAa,GAAG,OAClC,8BAAC,SAAM,WAAU,gCAA+B,GAClD;AAAA,EAEJ;AACF;","names":["InputOTP","InputOTPGroup","InputOTPSlot","InputOTPSeparator"]}

package/dist/chunk-M3WSUFD4.js

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

package/dist/chunk-M3WSUFD4.js.map

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

package/dist/chunk-M5WPZXBA.js

@@ -0,0 +1,118 @@
+"use client";
+import {
+  Tree
+} from "./chunk-MDQYRES4.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-SGBCLZQF.js";
+import {
+  Badge
+} from "./chunk-HNLYRHAU.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/tree-select/tree-select.tsx
+import { forwardRef, useId, useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function toArray(v) {
+  if (v === void 0) return [];
+  if (Array.isArray(v)) return v;
+  return v === "" ? [] : [v];
+}
+function findLabel(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node.label;
+    if (node.children?.length) {
+      const found = findLabel(node.children, id);
+      if (found !== void 0) return found;
+    }
+  }
+  return void 0;
+}
+var TreeSelect = forwardRef(function TreeSelect2({ nodes, value, defaultValue, onValueChange, multiple = false, placeholder, className, ...props }, ref) {
+  const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.treeSelect.placeholder");
+  const [open, setOpen] = useState(false);
+  const treeId = useId();
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(() => toArray(defaultValue));
+  const selected = isControlled ? toArray(value) : internal;
+  const emit = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(multiple ? next : next[0] ?? "");
+  };
+  const handleSelectionChange = (ids) => {
+    emit(ids);
+    if (!multiple) setOpen(false);
+  };
+  const labels = selected.map((id) => ({ id, label: findLabel(nodes, id) ?? id }));
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        type: "button",
+        variant: "outline",
+        role: "combobox",
+        "aria-haspopup": "tree",
+        "aria-expanded": open,
+        "aria-controls": treeId,
+        className: cn("h-auto min-h-9 w-full justify-between font-normal", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start", children: labels.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: resolvedPlaceholder }) : multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            labels.slice(0, 2).map((l) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                className: "max-w-[10rem] truncate border-border",
+                children: l.label
+              },
+              l.id
+            )),
+            labels.length > 2 ? /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                variant: "secondary",
+                "aria-label": t("ui.treeSelect.moreSelected", { count: labels.length - 2 }),
+                children: [
+                  "+",
+                  labels.length - 2
+                ]
+              }
+            ) : null
+          ] }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: labels[0]?.label }) }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-2 size-4 shrink-0 opacity-50", "aria-hidden": "true" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] min-w-64 p-1", align: "start", children: /* @__PURE__ */ jsx(
+      Tree,
+      {
+        id: treeId,
+        nodes,
+        selectionMode: multiple ? "multiple" : "single",
+        checkboxes: multiple,
+        selectedIds: selected,
+        onSelectionChange: handleSelectionChange,
+        defaultExpandedIds: nodes.map((n) => n.id),
+        className: "max-h-72 overflow-auto"
+      }
+    ) })
+  ] });
+});
+
+export {
+  TreeSelect
+};
+//# sourceMappingURL=chunk-M5WPZXBA.js.map

package/dist/chunk-M5WPZXBA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tree-select/tree-select.tsx"],"sourcesContent":["// a2ui.exposed: yes\n\"use client\";\n\nimport { forwardRef, useId, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ChevronsUpDown } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Badge } from \"../badge\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { useLocale } from \"../locale-provider\";\nimport { Tree, type TreeNode } from \"../tree\";\n\nexport interface TreeSelectProps<T = unknown> extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"value\" | \"onChange\"\n> {\n  nodes: TreeNode<T>[];\n  /** Controlled value — `string` in single mode, `string[]` in multiple mode. */\n  value?: string | string[];\n  /** Uncontrolled initial value. */\n  defaultValue?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  /** Allow selecting multiple nodes (checkbox tree). Default false. */\n  multiple?: boolean;\n  placeholder?: string;\n  className?: string;\n}\n\nfunction toArray(v: string | string[] | undefined): string[] {\n  if (v === undefined) return [];\n  if (Array.isArray(v)) return v;\n  return v === \"\" ? [] : [v];\n}\n\nfunction findLabel<T>(nodes: TreeNode<T>[], id: string): ReactNode | undefined {\n  for (const node of nodes) {\n    if (node.id === id) return node.label;\n    if (node.children?.length) {\n      const found = findLabel(node.children, id);\n      if (found !== undefined) return found;\n    }\n  }\n  return undefined;\n}\n\n/**\n * A select whose options are a hierarchical {@link Tree}. Single or multiple\n * selection; composes `Tree` for all keyboard/SR behaviour.\n */\nexport const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(function TreeSelect(\n  { nodes, value, defaultValue, onValueChange, multiple = false, placeholder, className, ...props },\n  ref,\n) {\n  const { t } = useLocale();\n  const resolvedPlaceholder = placeholder ?? t(\"ui.treeSelect.placeholder\");\n  const [open, setOpen] = useState(false);\n  const treeId = useId();\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue));\n  const selected = isControlled ? toArray(value) : internal;\n\n  const emit = (next: string[]) => {\n    if (!isControlled) setInternal(next);\n    onValueChange?.(multiple ? next : (next[0] ?? \"\"));\n  };\n\n  const handleSelectionChange = (ids: string[]) => {\n    emit(ids);\n    if (!multiple) setOpen(false);\n  };\n\n  const labels = selected.map((id) => ({ id, label: findLabel(nodes, id) ?? id }));\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          ref={ref}\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-haspopup=\"tree\"\n          aria-expanded={open}\n          aria-controls={treeId}\n          className={cn(\"h-auto min-h-9 w-full justify-between font-normal\", className)}\n          {...props}\n        >\n          <span className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start\">\n            {labels.length === 0 ? (\n              <span className=\"text-muted-foreground\">{resolvedPlaceholder}</span>\n            ) : multiple ? (\n              <>\n                {labels.slice(0, 2).map((l) => (\n                  <Badge\n                    key={l.id}\n                    variant=\"secondary\"\n                    className=\"max-w-[10rem] truncate border-border\"\n                  >\n                    {l.label}\n                  </Badge>\n                ))}\n                {labels.length > 2 ? (\n                  <Badge\n                    variant=\"secondary\"\n                    aria-label={t(\"ui.treeSelect.moreSelected\", { count: labels.length - 2 })}\n                  >\n                    +{labels.length - 2}\n                  </Badge>\n                ) : null}\n              </>\n            ) : (\n              <span className=\"truncate\">{labels[0]?.label}</span>\n            )}\n          </span>\n          <ChevronsUpDown className=\"ms-2 size-4 shrink-0 opacity-50\" aria-hidden=\"true\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[var(--radix-popover-trigger-width)] min-w-64 p-1\" align=\"start\">\n        <Tree\n          id={treeId}\n          nodes={nodes}\n          selectionMode={multiple ? \"multiple\" : \"single\"}\n          checkboxes={multiple}\n          selectedIds={selected}\n          onSelectionChange={handleSelectionChange}\n          defaultExpandedIds={nodes.map((n) => n.id)}\n          className=\"max-h-72 overflow-auto\"\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}) as <T = unknown>(\n  props: TreeSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\n) => React.ReactElement | null;\n"],"mappings":"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","names":["TreeSelect"]}