@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/stepper-progress-Bmen-YXB.js

@@ -0,0 +1,149 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { forwardRef as A, useRef as B, useState as I, useEffect as L, useLayoutEffect as O, useMemo as $, useImperativeHandle as q } from "react";
+import { c as n } from "./index-D2ZczOXr.js";
+import { useTranslation as D } from "react-i18next";
+const F = n("ds:flex ds:w-full", {
+  variants: {
+    captionPosition: {
+      top: "ds:flex-col ds:gap-[var(--spacing-xs)]",
+      bottom: "ds:flex-col-reverse ds:gap-[var(--spacing-xs)]"
+    }
+  },
+  defaultVariants: { captionPosition: "top" }
+}), G = n(
+  "ds:relative ds:w-full ds:overflow-hidden ds:rounded-[var(--radius-full)] ds:bg-[var(--muted)]",
+  {
+    variants: {
+      size: {
+        sm: "ds:h-[var(--spacing-xs)]",
+        default: "ds:h-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+), J = n(
+  [
+    "ds:block ds:h-full ds:rounded-[var(--radius-full)]",
+    "ds:[inline-size:calc(var(--stepper-progress-value,0)*1%)]",
+    "ds:transition-[inline-size,background-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      tone: {
+        progress: "ds:bg-[var(--primary)]",
+        error: "ds:bg-[var(--destructive)]",
+        complete: "ds:bg-[var(--success,var(--primary))]"
+      }
+    },
+    defaultVariants: { tone: "progress" }
+  }
+), K = n(
+  "ds:flex ds:items-baseline ds:gap-[var(--spacing-sm)] ds:flex-wrap",
+  {
+    variants: {
+      tone: {
+        progress: "ds:text-[var(--foreground)]",
+        error: "ds:text-[var(--destructive)]",
+        complete: "ds:text-[var(--foreground)]"
+      }
+    },
+    defaultVariants: { tone: "progress" }
+  }
+), Q = A(
+  ({
+    activeStep: y,
+    steps: d,
+    "aria-label": M,
+    hideCaption: N = !1,
+    size: V = "default",
+    captionPosition: w = "top",
+    id: c,
+    onStepChange: t,
+    className: P,
+    ...T
+  }, j) => {
+    const { t: u } = D(), p = B(null), e = d.length, r = Math.max(0, Math.min(y, e - 1)), s = d[r], f = (s == null ? void 0 : s.status) === "error" ? "error" : "current", m = r + 1, z = e === 0 ? 0 : m / e * 100, v = f === "error" ? "error" : r === e - 1 && e > 0 ? "complete" : "progress", [k, R] = I(!1);
+    L(() => {
+      R(!0);
+    }, []);
+    const g = k ? z : 0;
+    O(() => {
+      var a;
+      (a = p.current) == null || a.style.setProperty(
+        "--stepper-progress-value",
+        String(g)
+      );
+    }, [g]);
+    const x = u("navigation.stepper.stepOfTotal", {
+      n: r + 1,
+      total: e
+    }), E = M ?? u("navigation.stepper.label"), i = f === "error" && (s != null && s.description) ? s.description : null, H = [
+      x,
+      s ? `— ${s.label}` : null,
+      i
+    ].filter(Boolean).join(" "), b = $(
+      () => ({
+        getCurrentStep: () => r,
+        getTotalSteps: () => e,
+        gotoStep: (a) => {
+          if (!t) return;
+          const h = Math.max(0, Math.min(a, Math.max(e - 1, 0)));
+          h !== r && t(h);
+        },
+        next: () => {
+          t && r < e - 1 && t(r + 1);
+        },
+        previous: () => {
+          t && r > 0 && t(r - 1);
+        }
+      }),
+      [r, e, t]
+    );
+    return q(j, () => b, [b]), /* @__PURE__ */ l(
+      "div",
+      {
+        id: c,
+        "data-component": "stepper-progress",
+        "data-component-id": c,
+        className: F({ captionPosition: w, className: P }),
+        ...T,
+        children: [
+          N ? null : /* @__PURE__ */ l("div", { className: K({ tone: v }), "aria-hidden": "true", children: [
+            /* @__PURE__ */ o("span", { className: "type-meta ds:font-[var(--font-weight-semibold)]", children: x }),
+            s ? /* @__PURE__ */ l("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: [
+              "— ",
+              s.label
+            ] }) : null,
+            i ? /* @__PURE__ */ o("span", { className: "type-meta ds:ms-auto ds:text-[var(--destructive)]", children: i }) : null
+          ] }),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              role: "progressbar",
+              "aria-label": E,
+              "aria-valuemin": 0,
+              "aria-valuemax": e,
+              "aria-valuenow": m,
+              "aria-valuetext": H,
+              className: G({ size: V }),
+              children: /* @__PURE__ */ o(
+                "span",
+                {
+                  ref: p,
+                  "aria-hidden": "true",
+                  className: J({ tone: v })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Q.displayName = "StepperProgress";
+export {
+  Q as S
+};
+//# sourceMappingURL=stepper-progress-Bmen-YXB.js.map

package/dist/_chunks/stepper-progress.agent-q9InWca4.js

@@ -0,0 +1,61 @@
+const s = {
+  id: "stepper-progress",
+  capabilities: ["navigate"],
+  state: {
+    currentStep: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperProgress.state.currentStep",
+      description: "Zero-indexed active step.",
+      read: (e) => e.getCurrentStep()
+    },
+    totalSteps: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperProgress.state.totalSteps",
+      description: "Total number of steps in the flow.",
+      read: (e) => e.getTotalSteps()
+    }
+  },
+  actions: {
+    goto_step: {
+      safety: "read",
+      argsType: "{ step: number }",
+      descriptionKey: "ui.agent.stepperProgress.actions.gotoStep",
+      description: "Request the host to activate the given step via onStepChange. No-op when no handler is wired.",
+      invoke: (e, t) => {
+        e.gotoStep(t.step);
+      }
+    },
+    next: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperProgress.actions.next",
+      description: "Request the host to advance one step via onStepChange.",
+      invoke: (e) => {
+        e.next();
+      }
+    },
+    previous: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperProgress.actions.previous",
+      description: "Request the host to retreat one step via onStepChange.",
+      invoke: (e) => {
+        e.previous();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "stepper-progress",
+      description: "Marks the StepperProgress root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  s
+};
+//# sourceMappingURL=stepper-progress.agent-q9InWca4.js.map

package/dist/_chunks/suggestion-chip-DhFrkRPj.js

@@ -0,0 +1,169 @@
+import { jsxs as K, jsx as y } from "react/jsx-runtime";
+import { forwardRef as V, useId as O, useContext as L, useState as T, useRef as j, useEffect as G, useCallback as f, useImperativeHandle as S, useMemo as U, createContext as B } from "react";
+import { c as q } from "./index-D2ZczOXr.js";
+import { useTranslation as J } from "react-i18next";
+const Q = q(
+  [
+    // `max-w-full` keeps a chip from blowing past its container when the
+    // label is long and the container is narrow (e.g. a 22rem Leo sidebar
+    // dock). Labels wrap onto multiple lines via `whitespace-normal` +
+    // `break-words` so the full text stays legible — rounded pills grow
+    // taller rather than hiding content behind an ellipsis.
+    "ds:inline-flex ds:items-center ds:justify-start ds:text-start ds:whitespace-normal ds:break-words ds:max-w-full",
+    "ds:rounded-[var(--radius-full)] ds:border",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "type-label",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    "ds:forced-colors:border-[ButtonText] ds:forced-colors:text-[ButtonText]"
+  ].join(" "),
+  {
+    variants: {
+      intent: {
+        default: "ds:bg-muted/20 ds:text-foreground ds:border-transparent ds:hover:bg-accent/10",
+        suggestion: "ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-transparent ds:hover:bg-[color:var(--primary)]/15",
+        followup: "ds:bg-muted/30 ds:text-foreground ds:border-transparent ds:hover:bg-muted/40"
+      },
+      // Weight, family, tracking, line-height all come from `.type-label` on the base.
+      // Size variants override --type-label-size to shift the ramp step.
+      size: {
+        sm: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-label-size:var(--font-size-xs)]",
+        md: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        lg: "ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:[--type-label-size:var(--font-size-base)]"
+      }
+    },
+    defaultVariants: { intent: "default", size: "md" }
+  }
+), F = B(null), W = V(
+  ({ label: k, className: I, children: A, ...C }, g) => {
+    const { t: p, i18n: a } = J(), v = a.dir() === "rtl", [n, m] = T([]), [i, d] = T(null), l = j(/* @__PURE__ */ new Map()), x = f((t) => {
+      m((r) => r.includes(t) ? r : [...r, t]);
+    }, []), z = f((t) => {
+      m((r) => r.filter((u) => u !== t)), l.current.delete(t);
+    }, []), o = f((t) => d(t), []);
+    G(() => {
+      !i && n.length > 0 && d(n[0]), i && !n.includes(i) && d(n[0] ?? null);
+    }, [i, n]);
+    const e = f(
+      (t, r) => {
+        const u = n.indexOf(t);
+        if (u === -1) return;
+        let c = u;
+        r === "next" && (c = (u + 1) % n.length), r === "prev" && (c = (u - 1 + n.length) % n.length), r === "first" && (c = 0), r === "last" && (c = n.length - 1);
+        const b = n[c];
+        d(b);
+        const w = l.current.get(b);
+        w == null || w.focus();
+      },
+      [n]
+    ), h = f(
+      (t, r) => {
+        r ? l.current.set(t, r) : l.current.delete(t);
+      },
+      []
+    ), N = U(
+      () => ({ register: x, unregister: z, focusedId: i, setFocus: o, onArrowMove: e, isRTL: v }),
+      [x, z, i, o, e, v]
+    );
+    return /* @__PURE__ */ y(E.Provider, { value: h, children: /* @__PURE__ */ y(F.Provider, { value: N, children: /* @__PURE__ */ y(
+      "div",
+      {
+        ref: g,
+        role: "group",
+        "aria-label": k ?? p("chat.suggestions"),
+        className: [
+          "ds:flex ds:flex-wrap ds:items-center",
+          "ds:gap-y-[var(--spacing-xs)] ds:gap-x-[var(--spacing-sm)]",
+          I
+        ].filter(Boolean).join(" "),
+        ...C,
+        children: A
+      }
+    ) }) });
+  }
+);
+W.displayName = "SuggestionChipGroup";
+const E = B(null), X = V(
+  ({
+    intent: k = "default",
+    size: I = "md",
+    value: A,
+    startIcon: C,
+    children: g,
+    onSelect: p,
+    onRemove: a,
+    keepOnSelect: v = !1,
+    className: n,
+    disabled: m,
+    onKeyDown: i,
+    onFocus: d,
+    onClick: l,
+    ...x
+  }, z) => {
+    const o = O(), e = L(F), h = L(E), [N, t] = T(!1), r = j(null), u = (s) => {
+      r.current = s, h == null || h(o, s);
+    }, c = j(e);
+    if (c.current = e, G(() => {
+      const s = c.current;
+      if (s)
+        return s.register(o), () => s.unregister(o);
+    }, [o]), N) return null;
+    const b = e ? e.focusedId === o : !0, w = e ? b ? 0 : -1 : 0, M = typeof A == "string" ? A : typeof g == "string" ? g : "", R = f(() => {
+      p == null || p(M), a ? a() : v || t(!0);
+    }, [p, M, a, v]), D = f(() => {
+      a ? a() : t(!0);
+    }, [a]);
+    return S(
+      z,
+      () => ({
+        getValue: () => M,
+        select: R,
+        dismiss: D
+      }),
+      [M, R, D]
+    ), /* @__PURE__ */ K(
+      "button",
+      {
+        ref: u,
+        type: "button",
+        tabIndex: w,
+        disabled: m,
+        onClick: m ? void 0 : (s) => {
+          l == null || l(s), R();
+        },
+        onKeyDown: (s) => {
+          if (i == null || i(s), !e) return;
+          const H = e.isRTL ? "ArrowLeft" : "ArrowRight", P = e.isRTL ? "ArrowRight" : "ArrowLeft";
+          s.key === H || s.key === "ArrowDown" ? (s.preventDefault(), e.onArrowMove(o, "next")) : s.key === P || s.key === "ArrowUp" ? (s.preventDefault(), e.onArrowMove(o, "prev")) : s.key === "Home" ? (s.preventDefault(), e.onArrowMove(o, "first")) : s.key === "End" && (s.preventDefault(), e.onArrowMove(o, "last"));
+        },
+        onFocus: (s) => {
+          d == null || d(s), e && !b && e.setFocus(o);
+        },
+        "data-component": "suggestion-chip",
+        "data-component-id": x.id,
+        className: Q({ intent: k, size: I, className: n }),
+        ...x,
+        children: [
+          C ? /* @__PURE__ */ y(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:me-[var(--spacing-xs)] ds:inline-flex ds:items-center ds:[&>svg]:size-4",
+              children: C
+            }
+          ) : null,
+          /* @__PURE__ */ y("span", { children: g })
+        ]
+      }
+    );
+  }
+);
+X.displayName = "SuggestionChip";
+export {
+  X as S,
+  W as a
+};
+//# sourceMappingURL=suggestion-chip-DhFrkRPj.js.map

package/dist/_chunks/suggestion-chip.agent-6sNWFj7m.js

@@ -0,0 +1,46 @@
+const e = {
+  id: "suggestion-chip",
+  capabilities: ["pick", "dismiss"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.suggestionChip.state.value",
+      description: "The chip's emitted value (its `value` prop or string child).",
+      read: (i) => i.getValue()
+    }
+  },
+  actions: {
+    select: {
+      safety: "write",
+      descriptionKey: "ui.agent.suggestionChip.actions.select",
+      description: "Activate the chip — fires onSelect and (by default) self-removes.",
+      invoke: (i) => {
+        i.select();
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.suggestionChip.actions.dismiss",
+      description: "Remove the chip without activating it.",
+      invoke: (i) => {
+        i.dismiss();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "suggestion-chip",
+      description: "Marks the chip button. Per chip — a parent rendering many chips ships its own item hook."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  e as s
+};
+//# sourceMappingURL=suggestion-chip.agent-6sNWFj7m.js.map

package/dist/_chunks/switch-BYEH8I53.js

@@ -0,0 +1,196 @@
+import { jsxs as B, jsx as t } from "react/jsx-runtime";
+import { forwardRef as T, useContext as I, useState as K, useRef as _, useMemo as q } from "react";
+import * as w from "@radix-ui/react-switch";
+import { c as o } from "./index-D2ZczOXr.js";
+import { useTranslation as A } from "react-i18next";
+import { u as H, F as M } from "./form-field-context-94LwgYTQ.js";
+import { u as O } from "./registry-C9nwlNyL.js";
+const D = {
+  id: "switch",
+  capabilities: ["select_single"],
+  state: {
+    checked: {
+      type: "boolean",
+      descriptionKey: "ui.agent.switch.state.checked",
+      description: "Whether the switch is on.",
+      read: (e) => e.getChecked()
+    }
+  },
+  actions: {
+    set_checked: {
+      safety: "write",
+      argsType: "{ checked: boolean }",
+      descriptionKey: "ui.agent.switch.actions.setChecked",
+      description: "Set the on/off state to a specific value.",
+      invoke: (e, r) => {
+        e.setChecked(r.checked);
+      }
+    },
+    toggle: {
+      safety: "write",
+      descriptionKey: "ui.agent.switch.actions.toggle",
+      description: "Flip the on/off state.",
+      invoke: (e) => {
+        e.toggle();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "switch",
+      description: "Marks the Switch root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, P = o(
+  [
+    "ds:inline-flex ds:shrink-0 ds:cursor-pointer ds:items-center",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:border-2 ds:border-transparent",
+    "ds:bg-muted",
+    "ds:data-[state=checked]:bg-primary",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-4 ds:w-7",
+        md: "ds:h-5 ds:w-9",
+        lg: "ds:h-6 ds:w-11"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), W = o(
+  [
+    "ds:pointer-events-none ds:flex ds:items-center ds:justify-center ds:rounded-full ds:bg-background ds:text-foreground ds:shadow-[var(--shadow-sm)]",
+    "ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:data-[state=checked]:translate-x-full ds:rtl:data-[state=checked]:-translate-x-full",
+    "ds:data-[state=unchecked]:translate-x-0"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:size-3",
+        md: "ds:size-4",
+        lg: "ds:size-5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), $ = o(
+  "ds:inline-flex ds:items-center ds:gap-3 ds:min-h-[var(--min-target-size)]",
+  {
+    variants: {
+      labelSide: {
+        start: "ds:flex-row-reverse",
+        end: ""
+      }
+    },
+    defaultVariants: { labelSide: "end" }
+  }
+), E = o("type-label ds:text-foreground ds:select-none", {
+  variants: {
+    disabled: {
+      true: "ds:cursor-not-allowed ds:opacity-50",
+      false: "ds:cursor-pointer"
+    }
+  },
+  defaultVariants: { disabled: !1 }
+}), G = {
+  sm: "ds:size-2",
+  md: "ds:size-2.5",
+  lg: "ds:size-3"
+}, J = T(
+  ({
+    label: e,
+    labelSide: r = "end",
+    size: c = "md",
+    icon: l,
+    showStateText: k = !1,
+    checked: i,
+    defaultChecked: p,
+    onCheckedChange: u,
+    disabled: y,
+    id: f,
+    className: x,
+    ...S
+  }, z) => {
+    const { t: g } = A(), s = H(), F = I(M) !== null, b = f ?? s.id, [V, C] = K(
+      i ?? p ?? !1
+    ), d = typeof i == "boolean", a = d ? i : V, m = (n) => {
+      d || C(n), u == null || u(n);
+    }, v = s.disabled || y, N = s.describedBy || void 0, h = _(a);
+    h.current = a;
+    const j = q(
+      () => ({
+        getChecked: () => h.current,
+        setChecked: (n) => m(n),
+        toggle: () => m(!h.current)
+      }),
+      // handleCheckedChange closes over isControlled / onCheckedChange and is
+      // recreated each render; we accept the re-registration cost.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    O(D, j, f);
+    const R = a ? g("ui.inputs.switch.on", "On") : g("ui.inputs.switch.off", "Off");
+    return /* @__PURE__ */ B("div", { className: $({ labelSide: r }), children: [
+      /* @__PURE__ */ t(
+        w.Root,
+        {
+          ref: z,
+          id: b,
+          checked: d ? i : void 0,
+          defaultChecked: d ? void 0 : p,
+          onCheckedChange: m,
+          disabled: v,
+          "aria-describedby": N,
+          "aria-invalid": s.invalid || void 0,
+          "aria-required": s.required || void 0,
+          "data-component": "switch",
+          "data-component-id": f,
+          className: P({ size: c, className: x }),
+          ...S,
+          children: /* @__PURE__ */ t(w.Thumb, { className: W({ size: c }), children: l ? /* @__PURE__ */ t(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${G[c]} ds:inline-flex ds:items-center ds:justify-center ds:[&_svg]:size-full`,
+              children: a ? l.on : l.off
+            }
+          ) : null })
+        }
+      ),
+      k ? /* @__PURE__ */ t(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "type-meta ds:text-muted-foreground ds:select-none",
+          children: R
+        }
+      ) : null,
+      F ? null : /* @__PURE__ */ t(
+        "label",
+        {
+          htmlFor: b,
+          className: E({ disabled: !!v }),
+          children: e
+        }
+      )
+    ] });
+  }
+);
+J.displayName = "Switch";
+export {
+  J as S
+};
+//# sourceMappingURL=switch-BYEH8I53.js.map