@arcadeai/design-system 3.39.4 → 3.40.0

package/dist/components/ui/molecules/steps-progress.js

@@ -1,237 +1,278 @@
 "use client";
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { ChevronLeft as B, X as S, ChevronRight as D } from "lucide-react";
-import { useState as C, useLayoutEffect as E, useRef as x, useEffect as M } from "react";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Check as D, ChevronLeft as E, X as C, ChevronRight as P } from "lucide-react";
+import { useState as L, useLayoutEffect as V, useRef as p, useEffect as M } from "react";
 import { Button as j } from "../atoms/button.js";
-import { DS_SPARKLE_DURATION_MS as P, SparkleBurst as _ } from "../atoms/sparkle-burst.js";
-import { StepIndicator as G } from "../atoms/step-indicator.js";
-import { cn as u } from "../../../lib/utils.js";
-function K({ step: e, stepNumber: t, isAttention: r }) {
-  const o = /* @__PURE__ */ n(
-    G,
+import { DS_SPARKLE_DURATION_MS as _, SparkleBurst as G } from "../atoms/sparkle-burst.js";
+import { stepIndicatorIconVariants as K, stepIndicatorLabelVariants as F, StepIndicator as O } from "../atoms/step-indicator.js";
+import { cn as l } from "../../../lib/utils.js";
+function U({ step: e, stepNumber: n, isAttention: a }) {
+  const s = /* @__PURE__ */ t(
+    O,
     {
       className: "min-w-0",
       label: e.label,
       status: e.status,
-      stepNumber: t
+      stepNumber: n
     }
-  ), c = u(
+  ), u = l(
     "flex min-w-0 flex-1 items-center justify-center",
-    r && "step-attention-target"
+    a && "step-attention-target"
   );
-  return e.onClick ? /* @__PURE__ */ n(
+  return e.onClick ? /* @__PURE__ */ t(
     "button",
     {
-      className: u(c, "cursor-pointer"),
+      className: l(u, "cursor-pointer"),
       onClick: e.onClick,
       type: "button",
-      children: o
+      children: s
     }
-  ) : /* @__PURE__ */ n("span", { className: c, children: o });
+  ) : /* @__PURE__ */ t("span", { className: u, children: s });
 }
 function R(e) {
   return e.length - 1;
 }
-function F(e) {
-  return e.findIndex((t) => t.status === "active");
+function X(e) {
+  return e.findIndex((n) => n.status === "active");
 }
-function L(e, t) {
-  return e.length === 0 ? t ? 0 : -1 : t ? e.length : R(e);
+function z(e, n) {
+  return e.length === 0 ? n ? 0 : -1 : n ? e.length : R(e);
 }
-function p(e, t) {
-  const { currentIndex: r, isDismissible: o = !1 } = t ?? {}, c = F(e);
-  if (c >= 0)
-    return c;
+function g(e, n) {
+  const { currentIndex: a, isDismissible: s = !1 } = n ?? {}, u = X(e);
+  if (u >= 0)
+    return u;
   if (e.length === 0)
-    return o ? 0 : -1;
-  const a = L(e, o);
-  return r !== void 0 && r >= 0 && r <= a ? r : R(e);
+    return s ? 0 : -1;
+  const h = z(e, s);
+  return a !== void 0 && a >= 0 && a <= h ? a : R(e);
 }
-function O(e, t, r) {
-  const o = L(e, r);
-  return t >= 0 && t <= o ? t : p(e, {
-    currentIndex: t,
-    isDismissible: r
+function $(e, n, a) {
+  const s = z(e, a);
+  return n >= 0 && n <= s ? n : g(e, {
+    currentIndex: n,
+    isDismissible: a
   });
 }
-function U(e) {
+function q(e) {
   return `calc(${(e - 1) / e} * (100% - 4.25rem) + 0.75rem)`;
 }
-function W({
+function te({
   steps: e,
-  onDismiss: t,
-  animateStepTransitions: r = !1,
-  className: o,
-  ...c
+  onDismiss: n,
+  animateStepTransitions: a = !1,
+  orientation: s = "horizontal",
+  className: u,
+  ...h
 }) {
-  const a = !!t, [T, h] = C(
-    () => p(e, { isDismissible: a })
+  const m = !!n, [T, b] = L(
+    () => g(e, { isDismissible: m })
   );
-  E(() => {
-    h(
-      (i) => p(e, {
-        currentIndex: i,
-        isDismissible: a
+  V(() => {
+    b(
+      (r) => g(e, {
+        currentIndex: r,
+        isDismissible: m
       })
     );
-  }, [a, e]);
-  const [g, v] = C(void 0), b = x(null), d = x(null), N = x(0);
+  }, [m, e]);
+  const [v, N] = L(void 0), x = p(null), f = p(null), k = p(0);
   M(() => {
-    const i = b.current, m = new Map(e.map((l) => [l.id, l.status]));
-    if (i === null) {
-      b.current = m;
+    const r = x.current, o = new Map(e.map((i) => [i.id, i.status]));
+    if (r === null) {
+      x.current = o;
       return;
     }
-    if (r) {
-      const l = e.find(
-        (y) => y.status === "complete" && i.get(y.id) !== "complete"
+    if (a) {
+      const i = e.find(
+        (S) => S.status === "complete" && r.get(S.id) !== "complete"
       );
-      l && (d.current !== null && window.clearTimeout(d.current), N.current += 1, v({ stepId: l.id, key: N.current }), d.current = window.setTimeout(() => {
-        v(void 0), d.current = null;
-      }, P));
+      i && (f.current !== null && window.clearTimeout(f.current), k.current += 1, N({ stepId: i.id, key: k.current }), f.current = window.setTimeout(() => {
+        N(void 0), f.current = null;
+      }, _));
     }
-    b.current = m;
-  }, [r, e]), M(
+    x.current = o;
+  }, [a, e]), M(
     () => () => {
-      d.current !== null && window.clearTimeout(d.current);
+      f.current !== null && window.clearTimeout(f.current);
     },
     []
   );
-  const s = O(
+  const d = $(
     e,
     T,
-    a
-  ), z = e[s], k = e.length, w = s > 0, I = a ? s < k : s < e.length - 1, A = a && e.at(-1)?.status === "active";
-  return /* @__PURE__ */ f(
+    m
+  ), A = e[d], w = e.length, I = d > 0, y = m ? d < w : d < e.length - 1, B = m && e.at(-1)?.status === "active";
+  return s === "vertical" ? /* @__PURE__ */ t("section", { "aria-label": "Steps progress", className: l(u), ...h, children: /* @__PURE__ */ t("ol", { className: "flex flex-col", children: e.map((r, o) => {
+    const i = o === e.length - 1;
+    return /* @__PURE__ */ c(
+      "li",
+      {
+        className: l("flex items-start gap-3", !i && "pb-5"),
+        children: [
+          /* @__PURE__ */ c("div", { className: "flex shrink-0 flex-col items-center self-stretch", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: l(
+                  K({ status: r.status })
+                ),
+                children: r.status === "complete" ? /* @__PURE__ */ t(D, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t("span", { className: "text-sm", children: o + 1 })
+              }
+            ),
+            !i && /* @__PURE__ */ t("div", { className: "mt-2 w-px flex-1 bg-border" })
+          ] }),
+          /* @__PURE__ */ c(
+            "span",
+            {
+              "aria-current": r.status === "active" ? "step" : void 0,
+              className: l(
+                F({ status: r.status }),
+                "pt-0.5"
+              ),
+              children: [
+                r.label,
+                /* @__PURE__ */ c("span", { className: "sr-only", children: [
+                  " — ",
+                  r.status
+                ] })
+              ]
+            }
+          )
+        ]
+      },
+      r.id
+    );
+  }) }) }) : /* @__PURE__ */ c(
     "section",
     {
       "aria-label": "Steps progress",
-      className: u(
+      className: l(
         "relative h-14 overflow-hidden border border-border bg-card text-foreground",
-        o
+        u
       ),
-      ...c,
+      ...h,
       children: [
-        A && /* @__PURE__ */ n(
+        B && /* @__PURE__ */ t(
           "span",
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute top-0 right-0 z-10 hidden h-0.5 bg-foreground sm:block",
-            style: { left: U(e.length) }
+            style: { left: q(e.length) }
           }
         ),
-        z?.status === "active" && /* @__PURE__ */ n(
+        A?.status === "active" && /* @__PURE__ */ t(
           "span",
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 bg-foreground sm:hidden"
           }
         ),
-        /* @__PURE__ */ f("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ c("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
+          /* @__PURE__ */ t(
             "button",
             {
               "aria-label": "Go to previous step",
-              className: u(
+              className: l(
                 "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
-                !w && "pointer-events-none invisible"
+                !I && "pointer-events-none invisible"
               ),
-              onClick: () => h(s - 1),
-              tabIndex: w ? 0 : -1,
+              onClick: () => b(d - 1),
+              tabIndex: I ? 0 : -1,
               type: "button",
-              children: /* @__PURE__ */ n(B, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ t(E, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ f("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
-            e.map((i, m) => {
-              const l = g?.stepId === i.id;
-              return /* @__PURE__ */ f(
+          /* @__PURE__ */ c("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
+            e.map((r, o) => {
+              const i = v?.stepId === r.id;
+              return /* @__PURE__ */ c(
                 "li",
                 {
-                  "aria-current": i.status === "active" ? "step" : void 0,
-                  className: u(
+                  "aria-current": r.status === "active" ? "step" : void 0,
+                  className: l(
                     "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-2 py-4 sm:px-3",
-                    m !== s && "hidden sm:flex"
+                    o !== d && "hidden sm:flex"
                   ),
-                  "data-attention": l ? "true" : void 0,
-                  "data-status": i.status,
+                  "data-attention": i ? "true" : void 0,
+                  "data-status": r.status,
                   children: [
-                    m > 0 && /* @__PURE__ */ n(
+                    o > 0 && /* @__PURE__ */ t(
                       "span",
                       {
                         "aria-hidden": "true",
                         className: "absolute left-0 hidden h-full w-px bg-border sm:block"
                       }
                     ),
-                    /* @__PURE__ */ n(
-                      K,
+                    /* @__PURE__ */ t(
+                      U,
                       {
-                        isAttention: l,
-                        step: i,
-                        stepNumber: m + 1
+                        isAttention: i,
+                        step: r,
+                        stepNumber: o + 1
                       }
                     ),
-                    l ? /* @__PURE__ */ n(
+                    i ? /* @__PURE__ */ t(
                       "span",
                       {
                         "aria-hidden": !0,
                         className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center",
-                        children: /* @__PURE__ */ n(_, {}, g.key)
+                        children: /* @__PURE__ */ t(G, {}, v.key)
                       }
                     ) : null
                   ]
                 },
-                i.id
+                r.id
               );
             }),
-            t && /* @__PURE__ */ n(
+            n && /* @__PURE__ */ t(
               "li",
               {
-                className: u(
+                className: l(
                   "relative isolate flex h-full flex-1 items-center justify-center sm:hidden",
-                  s !== k && "hidden"
+                  d !== w && "hidden"
                 ),
-                children: /* @__PURE__ */ f(
+                children: /* @__PURE__ */ c(
                   j,
                   {
                     "aria-label": "Dismiss steps progress",
                     className: "h-8 gap-1.5 border border-border px-3 text-muted-foreground hover:bg-muted hover:text-foreground",
-                    onClick: t,
+                    onClick: n,
                     type: "button",
                     variant: "ghost",
                     children: [
-                      /* @__PURE__ */ n(S, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ n("span", { className: "text-sm", children: "Dismiss" })
+                      /* @__PURE__ */ t(C, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ t("span", { className: "text-sm", children: "Dismiss" })
                     ]
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             "button",
             {
               "aria-label": "Go to next step",
-              className: u(
+              className: l(
                 "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
-                !I && "pointer-events-none invisible"
+                !y && "pointer-events-none invisible"
               ),
-              onClick: () => h(s + 1),
-              tabIndex: I ? 0 : -1,
+              onClick: () => b(d + 1),
+              tabIndex: y ? 0 : -1,
               type: "button",
-              children: /* @__PURE__ */ n(D, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ t(P, { className: "h-4 w-4" })
             }
           ),
-          t && /* @__PURE__ */ n(
+          n && /* @__PURE__ */ t(
             j,
             {
               "aria-label": "Dismiss steps progress",
               className: "hidden h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground sm:flex",
-              onClick: t,
+              onClick: n,
               size: "icon",
               type: "button",
               variant: "ghost",
-              children: /* @__PURE__ */ n(S, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ t(C, { className: "h-4 w-4" })
             }
           )
         ] })
@@ -240,6 +281,6 @@ function W({
   );
 }
 export {
-  W as StepsProgress,
-  p as getMobileIndexForSteps
+  te as StepsProgress,
+  g as getMobileIndexForSteps
 };

package/dist/components/ui/molecules/tags-input.d.ts

@@ -0,0 +1,44 @@
+import { InputHTMLAttributes } from 'react';
+export type TagsInputValidationResult = {
+    /** Normalized value to store. Falls back to the trimmed input if omitted. */
+    normalizedValue?: string;
+    /** Human-readable error message. Undefined means valid. */
+    error?: string;
+};
+type ForwardedInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "defaultValue" | "disabled" | "onBlur" | "onChange" | "onKeyDown" | "onPaste" | "placeholder" | "type" | "value">;
+export type TagsInputProps = {
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    /** Commit the pending input value when the field loses focus. Default: true. */
+    addOnBlur?: boolean;
+    /**
+     * Validate (and optionally normalize) a trimmed input string before it is added.
+     * Return `{ error }` to reject with a message, `{ normalizedValue }` to accept
+     * with a transformed value, or `{}` to accept as-is.
+     */
+    validateValue?: (trimmed: string, currentValues: string[]) => TagsInputValidationResult;
+    /**
+     * Determine whether `incoming` is a duplicate of an existing `stored` value.
+     * Return `true` to reject with the default "Already added" message, or a
+     * non-empty string to reject with that string as the error. Defaults to
+     * exact string equality with "Already added".
+     */
+    isDuplicate?: (incoming: string, stored: string) => boolean | string;
+    /**
+     * Render a custom chip for each committed value. Receives the value and a
+     * `remove` callback. When omitted a plain Badge with an X button is rendered.
+     * Keys are managed by TagsInput — do not add a `key` prop to the returned element.
+     */
+    renderValue?: (value: string, remove: () => void) => React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+} & ForwardedInputProps;
+export type TagsInputValueProps = {
+    value: string;
+    onRemove: () => void;
+};
+export declare function TagsInputValue({ value, onRemove }: TagsInputValueProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagsInput({ values, onChange, placeholder, addOnBlur, validateValue, isDuplicate, renderValue, className, disabled, id, ...inputProps }: TagsInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/ui/molecules/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tags-input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,mBAAmB,EAKzB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,yBAAyB,GAAG;IACtC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAC7B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,aAAa,GACb,MAAM,GACN,OAAO,CACV,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CACd,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,MAAM,EAAE,KACpB,yBAAyB,CAAC;IAC/B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;IACrE;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,mBAAmB,CAAC;AAExB,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAiBtE;AAMD,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAgB,EAChB,aAAa,EACb,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,EAAE,EACF,GAAG,UAAU,EACd,EAAE,cAAc,2CA+JhB"}

package/dist/components/ui/molecules/tags-input.js

@@ -0,0 +1,139 @@
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { X as _ } from "lucide-react";
+import { useId as C, useState as D, useRef as P, Fragment as L } from "react";
+import { Badge as X } from "../atoms/badge.js";
+import { cn as $ } from "../../../lib/utils.js";
+const T = /[,\n\r]+/;
+function q({ value: n, onRemove: s }) {
+  return /* @__PURE__ */ h(X, { className: "gap-1 pr-1", variant: "secondary", children: [
+    /* @__PURE__ */ c("span", { className: "max-w-[220px] truncate", children: n }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        "aria-label": `Remove ${n}`,
+        className: "ml-0.5 rounded text-muted-foreground hover:text-foreground",
+        onClick: (p) => {
+          p.stopPropagation(), s();
+        },
+        type: "button",
+        children: /* @__PURE__ */ c(_, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function G(n, s) {
+  return /* @__PURE__ */ c(q, { onRemove: s, value: n });
+}
+function W({
+  values: n,
+  onChange: s,
+  placeholder: p,
+  addOnBlur: z = !0,
+  validateValue: f,
+  isDuplicate: x,
+  renderValue: B,
+  className: V,
+  disabled: y = !1,
+  id: A,
+  ...F
+}) {
+  const S = C(), b = A ?? S, [i, m] = D(""), [w, d] = D(null), k = P(null), l = P(n);
+  l.current = n;
+  const j = B ?? G, I = (e, t) => {
+    for (const o of t) {
+      const r = x ? x(e, o) : e === o;
+      if (r === !0)
+        return "Already added";
+      if (typeof r == "string" && r)
+        return r;
+    }
+    return null;
+  }, N = (e) => {
+    const t = e.trim();
+    if (!t)
+      return;
+    const o = l.current, r = f ? f(t, o) : {};
+    if (r.error) {
+      d(r.error);
+      return;
+    }
+    const u = r.normalizedValue ?? t, a = I(u, o);
+    if (a) {
+      d(a);
+      return;
+    }
+    s([...o, u]), m(""), d(null);
+  }, v = (e) => {
+    s(l.current.filter((t) => t !== e));
+  }, K = (e) => {
+    if ((e.key === "Enter" || e.key === ",") && !e.nativeEvent.isComposing)
+      e.preventDefault(), N(i);
+    else if (e.key === "Backspace" && i === "") {
+      const t = l.current.at(-1);
+      t !== void 0 && v(t);
+    } else
+      d(null);
+  }, M = (e) => {
+    const t = e.clipboardData.getData("text");
+    if (!T.test(t))
+      return;
+    e.preventDefault();
+    const o = t.split(T).map((a) => a.trim()).filter(Boolean);
+    let r = [...l.current], u = null;
+    for (const a of o) {
+      const g = f ? f(a, r) : {};
+      if (g.error) {
+        u = g.error;
+        break;
+      }
+      const E = g.normalizedValue ?? a, R = I(E, r);
+      if (R) {
+        u = R;
+        break;
+      }
+      r = [...r, E];
+    }
+    r.length > l.current.length && s(r), m(""), d(u);
+  };
+  return /* @__PURE__ */ h("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ h(
+      "label",
+      {
+        className: $(
+          "flex min-h-10 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+          y && "cursor-not-allowed opacity-50",
+          V
+        ),
+        htmlFor: b,
+        ref: k,
+        children: [
+          n.map((e) => /* @__PURE__ */ c(L, { children: j(e, () => v(e)) }, e)),
+          /* @__PURE__ */ c(
+            "input",
+            {
+              ...F,
+              className: "min-w-32 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+              disabled: y,
+              id: b,
+              onBlur: (e) => {
+                const t = k.current?.contains(e.relatedTarget);
+                z && i.trim() && !t && N(i);
+              },
+              onChange: (e) => m(e.target.value),
+              onKeyDown: K,
+              onPaste: M,
+              placeholder: n.length === 0 ? p : "",
+              type: "text",
+              value: i
+            }
+          )
+        ]
+      }
+    ),
+    w && /* @__PURE__ */ c("p", { className: "text-destructive text-sm", children: w })
+  ] });
+}
+export {
+  W as TagsInput,
+  q as TagsInputValue
+};