@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/checkbox-group-BTdEB6Yo.js

@@ -0,0 +1,208 @@
+import { jsx as s, jsxs as M } from "react/jsx-runtime";
+import { forwardRef as T, useId as W, useState as K, useMemo as S, useRef as X, Children as Y, isValidElement as Z } from "react";
+import { c as V } from "./index-D2ZczOXr.js";
+import { useTranslation as ee } from "react-i18next";
+import { C as _, a as se } from "./checkbox-CtPM6Rup.js";
+import { u as te } from "./registry-C9nwlNyL.js";
+import { C as ce } from "./circle-alert-ChA9opNA.js";
+const re = {
+  id: "checkbox-group",
+  capabilities: ["select_multiple"],
+  state: {
+    selection: {
+      type: "string[]",
+      descriptionKey: "ui.agent.checkboxGroup.state.selection",
+      description: "Values of currently-checked options.",
+      read: (t) => t.getSelection()
+    }
+  },
+  actions: {
+    set_selection: {
+      safety: "write",
+      argsType: "{ ids: string[] }",
+      descriptionKey: "ui.agent.checkboxGroup.actions.setSelection",
+      description: "Replace the current selection with the given option values.",
+      invoke: (t, l) => {
+        t.setSelection(l.ids);
+      }
+    },
+    clear_selection: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.checkboxGroup.actions.clearSelection",
+      description: "Uncheck every option in the group.",
+      invoke: (t) => {
+        t.clearSelection();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "checkbox-group",
+      description: "Marks the CheckboxGroup fieldset."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Stable opaque value emitted on each rendered Checkbox child within the group."
+    }
+  }
+}, le = V("", {
+  variants: {
+    orientation: {
+      vertical: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+      horizontal: "ds:flex ds:flex-wrap ds:gap-x-[var(--spacing-lg)] ds:gap-y-[var(--spacing-sm)]"
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+function ae(t) {
+  const l = [];
+  return Y.forEach(t, (a) => {
+    if (!Z(a)) return;
+    const f = a.props;
+    typeof f.value == "string" && l.push(f.value);
+  }), l;
+}
+const oe = T(
+  ({
+    label: t,
+    value: l,
+    onChange: a,
+    name: f,
+    id: v,
+    orientation: $ = "vertical",
+    disabled: N = !1,
+    min: i,
+    max: d,
+    onConstraintViolation: c,
+    withSelectAll: z = !1,
+    options: u,
+    error: m,
+    helperText: g,
+    className: E,
+    children: b
+  }, H) => {
+    const { t: p } = ee(), x = W(), R = `${x}-helper`, w = `${x}-error`, I = `${x}-counter`, [P, q] = K([]), k = l !== void 0, r = k ? l : P, A = S(() => new Set(r), [r]), [C, o] = K(""), y = S(
+      () => u ? u.map((e) => e.value) : ae(b),
+      [u, b]
+    ), n = (e) => {
+      k || q(e), a == null || a(e);
+    }, j = X(r);
+    j.current = r;
+    const U = S(
+      () => ({
+        getSelection: () => j.current.slice(),
+        setSelection: (e) => n(e),
+        clearSelection: () => n([])
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [k, a]
+    );
+    te(re, U, v);
+    const D = {
+      name: f,
+      value: A,
+      toggle: (e) => {
+        if (A.has(e)) {
+          if (typeof i == "number" && r.length <= i) {
+            o(p("ui.inputs.checkboxGroup.minReached", { min: i })), c == null || c("min");
+            return;
+          }
+          o(""), n(r.filter((Q) => Q !== e));
+          return;
+        }
+        if (typeof d == "number" && r.length >= d) {
+          o(p("ui.inputs.checkboxGroup.maxReached", { max: d })), c == null || c("max");
+          return;
+        }
+        o(""), n([...r, e]);
+      },
+      disabled: N
+    }, h = y.length, G = r.length, B = h === 0 || G === 0 ? !1 : G >= h ? !0 : "indeterminate", F = () => {
+      if (B === !0) {
+        if (typeof i == "number" && i > 0) {
+          o(p("ui.inputs.checkboxGroup.minReached", { min: i })), c == null || c("min");
+          return;
+        }
+        n([]), o("");
+        return;
+      }
+      const e = typeof d == "number" ? y.slice(0, d) : y;
+      n(e), o("");
+    }, J = [
+      g ? R : null,
+      m ? w : null,
+      h > 0 ? I : null
+    ].filter(Boolean).join(" ") || void 0, L = b ?? (u ? u.map((e) => /* @__PURE__ */ s(
+      _,
+      {
+        value: e.value,
+        label: e.label,
+        disabled: e.disabled
+      },
+      e.value
+    )) : null), O = [
+      "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:min-w-0 ds:border-0 ds:p-0 ds:m-0",
+      E
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ M(
+      "fieldset",
+      {
+        ref: H,
+        id: v,
+        className: O,
+        "aria-describedby": J,
+        "aria-invalid": !!m || void 0,
+        "data-component": "checkbox-group",
+        "data-component-id": v,
+        children: [
+          /* @__PURE__ */ s("legend", { className: "type-label ds:text-foreground ds:p-0 ds:mb-[var(--spacing-sm)]", children: t }),
+          z ? /* @__PURE__ */ s(
+            _,
+            {
+              label: p("ui.inputs.checkboxGroup.selectAll"),
+              checked: B,
+              onCheckedChange: F,
+              disabled: N
+            }
+          ) : null,
+          /* @__PURE__ */ s(se.Provider, { value: D, children: /* @__PURE__ */ s("div", { className: le({ orientation: $ }), children: L }) }),
+          g ? /* @__PURE__ */ s("p", { id: R, className: "type-body-sm ds:text-muted-foreground", children: g }) : null,
+          m ? /* @__PURE__ */ M(
+            "p",
+            {
+              id: w,
+              role: "alert",
+              className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive",
+              children: [
+                /* @__PURE__ */ s(ce, { "aria-hidden": "true", className: "ds:size-4 ds:shrink-0" }),
+                /* @__PURE__ */ s("span", { children: m })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ s(
+            "span",
+            {
+              id: I,
+              role: "status",
+              "aria-live": "polite",
+              className: "ds:sr-only",
+              children: h > 0 ? p("ui.inputs.checkboxGroup.counter", { count: G, total: h }) : ""
+            }
+          ),
+          /* @__PURE__ */ s("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: C })
+        ]
+      }
+    );
+  }
+);
+oe.displayName = "CheckboxGroup";
+export {
+  oe as C
+};
+//# sourceMappingURL=checkbox-group-BTdEB6Yo.js.map

package/dist/_chunks/collapsible.agent-DkS1jVyn.js

@@ -0,0 +1,149 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p, useState as y, useRef as C, useCallback as k, useImperativeHandle as w, useEffect as x } from "react";
+import * as b from "@radix-ui/react-collapsible";
+import { a as h, c as N } from "./index-D2ZczOXr.js";
+const R = N("", {
+  variants: {
+    variant: {
+      default: "",
+      card: "ds:bg-[var(--card)] ds:border ds:border-border ds:rounded-[var(--radius-lg)] ds:overflow-hidden",
+      minimal: "ds:forced-colors:[border-block-end:1px_solid]"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), T = [
+  "ds:overflow-hidden",
+  "ds:transition-[block-size]",
+  "ds:duration-[var(--animation-duration)]",
+  "ds:ease-out",
+  "ds:motion-reduce:transition-none",
+  "ds:data-[state=open]:[block-size:var(--radix-collapsible-content-height)]",
+  "ds:data-[state=closed]:[block-size:0]"
+].join(" "), K = p(
+  ({
+    variant: e,
+    className: t,
+    children: s,
+    open: o,
+    defaultOpen: i,
+    onOpenChange: a,
+    ...u
+  }, f) => {
+    const n = o !== void 0, [g, v] = y(
+      !!i
+    ), r = n ? !!o : g, d = C(r);
+    d.current = r;
+    const l = k(
+      (m) => {
+        n || v(m), a == null || a(m);
+      },
+      [n, a]
+    );
+    return w(
+      f,
+      () => ({
+        isOpen: () => d.current,
+        toggle: () => l(!d.current),
+        open: () => l(!0),
+        close: () => l(!1)
+      }),
+      [l]
+    ), /* @__PURE__ */ c(
+      b.Root,
+      {
+        open: r,
+        onOpenChange: l,
+        className: R({ variant: e, className: t }),
+        "data-component": "collapsible",
+        "data-component-id": u.id,
+        ...u,
+        children: s
+      }
+    );
+  }
+);
+K.displayName = "Collapsible";
+const O = p(
+  ({ asChild: e = !1, children: t, ...s }, o) => /* @__PURE__ */ c(b.Trigger, { ref: o, asChild: e, ...s, children: t })
+);
+O.displayName = "CollapsibleTrigger";
+const z = p(
+  ({
+    className: e,
+    children: t,
+    "aria-labelledby": s,
+    "aria-label": o,
+    ...i
+  }, a) => (x(() => {
+  }, []), /* @__PURE__ */ c(
+    b.Content,
+    {
+      ref: a,
+      "aria-labelledby": s,
+      "aria-label": o,
+      className: h(T, e),
+      ...i,
+      children: t
+    }
+  ))
+);
+z.displayName = "CollapsibleContent";
+const E = {
+  id: "collapsible",
+  capabilities: ["expand"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.collapsible.state.isOpen",
+      description: "True when the content panel is expanded.",
+      read: (e) => e.isOpen()
+    }
+  },
+  actions: {
+    toggle: {
+      safety: "write",
+      descriptionKey: "ui.agent.collapsible.actions.toggle",
+      description: "Toggle between open and closed.",
+      invoke: (e) => {
+        e.toggle();
+      }
+    },
+    open: {
+      safety: "write",
+      descriptionKey: "ui.agent.collapsible.actions.open",
+      description: "Expand the content panel.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "write",
+      descriptionKey: "ui.agent.collapsible.actions.close",
+      description: "Collapse the content panel.",
+      invoke: (e) => {
+        e.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "collapsible",
+      description: "Marks the Collapsible root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  K as C,
+  z as a,
+  O as b,
+  E as c
+};
+//# sourceMappingURL=collapsible.agent-DkS1jVyn.js.map