@alfadocs/ui-kit-debug 0.70.0 → 0.72.0

package/dist/_chunks/multi-select-BdHHDrRN.js

@@ -1,602 +0,0 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as Ke, useContext as Me, useState as B, useRef as I, useMemo as V, useEffect as U, useCallback as je } from "react";
-import * as q from "@radix-ui/react-popover";
-import { _ as u } from "./index-4xgbg-sn.js";
-import { c as le } from "./index-D2ZczOXr.js";
-import { useTranslation as Pe } from "react-i18next";
-import { u as $e, F as Be } from "./form-field-context-B3APVHKx.js";
-import { T as oe } from "./tooltip-DvmfrNvB.js";
-import { c as Ue } from "./compose-refs-C0k0tdqF.js";
-import { u as Qe } from "./use-controllable-state-BiY4xTzM.js";
-import { u as Ye } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { g as Ge } from "./group-options-BvKhQ3xb.js";
-import { b as Q, c as He } from "./input-surface-xyERuLU_.js";
-import { u as Xe } from "./registry-DvAUVLHh.js";
-import { X as Je } from "./x-CCcI3eJp.js";
-import { C as We } from "./check-DPdL_Sm7.js";
-const Ze = {
-  id: "multi-select",
-  // Persisted multi-choice (selection state + set_selection) → select_multiple,
-  // plus type-to-filter and open/close of the option list.
-  capabilities: ["select_multiple", "filter", "open", "close"],
-  state: {
-    selection: {
-      type: "string[]",
-      descriptionKey: "ui.agent.multiSelect.state.selection",
-      description: "Values of currently-selected options.",
-      read: (a) => a.getSelection()
-    },
-    query: {
-      type: "string",
-      descriptionKey: "ui.agent.multiSelect.state.query",
-      description: "Current filter query.",
-      read: (a) => a.getQuery()
-    },
-    isOpen: {
-      type: "boolean",
-      descriptionKey: "ui.agent.multiSelect.state.isOpen",
-      description: "True when the option list is visible.",
-      read: (a) => a.getIsOpen()
-    }
-  },
-  actions: {
-    set_selection: {
-      // Persists the user's chosen options — reversible via the same UI.
-      safety: "write",
-      argsType: "{ values: string[] }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          values: {
-            type: "array",
-            items: { type: "string" },
-            description: "Option values to select (replaces the current selection)."
-          }
-        },
-        required: ["values"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.multiSelect.actions.setSelection",
-      description: "Replace the current selection with the given list of values.",
-      examples: [
-        {
-          args: { values: ["a", "b"] },
-          note: 'Select exactly options "a" and "b".'
-        }
-      ],
-      invoke: (a, c) => {
-        a.setSelection(c.values);
-      }
-    },
-    clear_selection: {
-      // Discards the persisted selection — destructive (loses the choices).
-      safety: "destructive",
-      idempotent: !0,
-      descriptionKey: "ui.agent.multiSelect.actions.clearSelection",
-      description: "Clear the current selection.",
-      invoke: (a) => {
-        a.clearSelection();
-      }
-    },
-    apply_filter: {
-      // Pure ephemeral filter of the visible options — no persisted change.
-      safety: "read",
-      argsType: "{ query: string }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          query: { type: "string", description: "Filter text for the list." }
-        },
-        required: ["query"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.multiSelect.actions.applyFilter",
-      description: "Set the filter query for the option list.",
-      invoke: (a, c) => {
-        a.setQuery(c.query);
-      }
-    },
-    open: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.multiSelect.actions.open",
-      description: "Open the option list.",
-      invoke: (a) => {
-        a.open();
-      }
-    },
-    close: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.multiSelect.actions.close",
-      description: "Close the option list.",
-      invoke: (a) => {
-        a.close();
-      }
-    }
-  },
-  domHooks: {
-    root: { attr: "data-component", value: "multi-select" },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    },
-    item: {
-      attr: "data-option-id",
-      description: "Each option emits its value as data-option-id."
-    }
-  }
-}, et = le(
-  [
-    "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
-    He,
-    "ds:aria-[invalid=true]:border-destructive",
-    "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50"
-  ],
-  {
-    variants: {
-      size: {
-        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${Q.sm}`,
-        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${Q.md}`,
-        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${Q.lg}`
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), ie = le(
-  [
-    "ds:inline-flex ds:items-center ds:gap-1",
-    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
-    "ds:text-foreground ds:select-none",
-    "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:forced-colors:focus-visible:outline-[CanvasText]"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-xs)]",
-        md: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-sm)]",
-        lg: "ds:ps-3 ds:pe-1.5 ds:py-1 ds:text-[length:var(--font-size-base)]"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), tt = [
-  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
-  "ds:rounded-[var(--radius-sm)]",
-  "ds:text-muted-foreground ds:hover:text-foreground",
-  "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:size-4",
-  'ds:relative ds:before:absolute ds:before:inset-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""]'
-].join(" "), st = [
-  "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
-  "ds:min-w-[var(--radix-popover-trigger-width)]",
-  "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
-  "ds:shadow-[var(--shadow-lg)]",
-  "ds:animate-in ds:fade-in ds:zoom-in-95",
-  "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
-  "ds:data-[state=closed]:zoom-out-95",
-  "ds:data-[side=bottom]:slide-in-from-top-2",
-  "ds:data-[side=top]:slide-in-from-bottom-2",
-  "ds:motion-reduce:animate-none"
-].join(" "), rt = [
-  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
-  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
-  "ds:text-[var(--font-size-sm)] ds:text-foreground ds:outline-none ds:select-none",
-  "ds:data-[selected=true]:bg-muted ds:data-[selected=true]:text-foreground",
-  "ds:aria-[disabled=true]:pointer-events-none ds:aria-[disabled=true]:opacity-50",
-  "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50"
-].join(" "), ae = [
-  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
-  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
-  "ds:text-[var(--font-size-sm)] ds:font-medium ds:text-primary ds:outline-none ds:select-none",
-  "ds:data-[selected=true]:bg-muted"
-].join(" "), nt = "__ui-multiselect-select-all__", ot = "__ui-multiselect-clear-all__", de = Ke(
-  function({
-    options: c,
-    value: ce,
-    defaultValue: ue,
-    onChange: pe,
-    onComplete: O,
-    placeholder: me,
-    maxSelections: v,
-    allowSelectAll: Y = !1,
-    allowClear: G = !1,
-    filter: D,
-    size: R = "md",
-    disabled: fe,
-    className: ge,
-    id: L,
-    // Pull `aria-label` out of the div spread so it names the combobox
-    // INPUT (the interactive control) rather than the wrapper div. Lets a
-    // consumer give the trigger a meaningful name when there's no visible
-    // label or FormField (e.g. a data-table floating filter naming itself
-    // after its column). Untouched callers fall back to the placeholder.
-    // ONLY set this when the control has no visible / FormField label —
-    // `aria-label` wins over an associated `<label>`, so passing both would
-    // silently override the visible text (WCAG 2.5.3 Label in Name).
-    "aria-label": he,
-    ...ve
-  }, be) {
-    const { t: p } = Pe(), b = $e(), y = Me(Be) !== null, [ye, z] = Qe({
-      value: ce,
-      defaultValue: ue ?? [],
-      onChange: pe
-    }), r = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), w = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, we = y && b.required, X = y && b.invalid, xe = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
-      const e = /* @__PURE__ */ new Map();
-      for (const t of c) e.set(t.value, t.label);
-      return e;
-    }, [c]), J = typeof v == "number" && r.length >= v, C = (e) => {
-      z(e);
-    }, Ce = (e) => {
-      if (r.includes(e)) {
-        C(r.filter((t) => t !== e));
-        return;
-      }
-      J || C([...r, e]);
-    }, M = (e) => {
-      const t = r.filter((s, o) => o !== e);
-      return C(t), t;
-    }, Ae = () => {
-      const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof v == "number" ? v : e.length;
-      C(e.slice(0, t));
-    }, Ne = () => {
-      C([]);
-    }, W = I(r);
-    U(() => {
-      W.current = r;
-    }, [r]);
-    const Z = I(f);
-    U(() => {
-      Z.current = f;
-    }, [f]);
-    const ee = I(k);
-    U(() => {
-      ee.current = k;
-    }, [k]);
-    const j = je(
-      (e) => {
-        z(e);
-      },
-      [z]
-    ), _e = V(
-      () => ({
-        getSelection: () => [...W.current],
-        getQuery: () => Z.current,
-        getIsOpen: () => ee.current,
-        setSelection: (e) => j(e),
-        clearSelection: () => j([]),
-        setQuery: (e) => K(e),
-        open: () => m(!0),
-        close: () => m(!1)
-      }),
-      [j]
-    );
-    Xe(Ze, _e, L);
-    const te = me ?? p("inputs.multiSelect.placeholder", "Select…"), se = V(() => {
-      if (!f) return c;
-      const e = f.toLowerCase();
-      return c.filter((t) => D ? D(f, t) : t.label.toLowerCase().includes(e));
-    }, [c, f, D]), Re = V(
-      () => Ge(se),
-      [se]
-    ), Te = (e) => {
-      var o;
-      const t = e.currentTarget;
-      if (e.key === "Backspace" && f === "" && r.length > 0) {
-        e.preventDefault();
-        const i = r.length - 1, d = M(i).length - 1;
-        d >= 0 && requestAnimationFrame(() => {
-          var g;
-          (g = w.current[d]) == null || g.focus();
-        });
-        return;
-      }
-      const s = t.selectionStart === 0 && t.selectionEnd === 0;
-      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && r.length > 0) {
-        const i = document.dir === "rtl" || t.dir === "rtl";
-        if (i && e.key === "ArrowRight" || !i && e.key === "ArrowLeft") {
-          e.preventDefault();
-          const d = r.length - 1;
-          (o = w.current[d]) == null || o.focus();
-        }
-        return;
-      }
-      if (e.key === "Escape") {
-        m(!1);
-        return;
-      }
-      !k && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
-    }, Ee = (e) => (t) => {
-      var l, d, g, N;
-      if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
-        t.preventDefault(), t.stopPropagation();
-        const F = M(e);
-        if (F.length === 0) {
-          requestAnimationFrame(() => {
-            var _;
-            return (_ = S.current) == null ? void 0 : _.focus();
-          });
-          return;
-        }
-        const ze = Math.min(e, F.length - 1);
-        requestAnimationFrame(() => {
-          var _;
-          (_ = w.current[ze]) == null || _.focus();
-        });
-        return;
-      }
-      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", i = s ? "ArrowLeft" : "ArrowRight";
-      if (t.key === o) {
-        t.preventDefault();
-        const F = Math.max(0, e - 1);
-        (l = w.current[F]) == null || l.focus();
-        return;
-      }
-      if (t.key === i) {
-        t.preventDefault(), e < r.length - 1 ? (d = w.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
-        return;
-      }
-      t.key === "Escape" && (m(!1), (N = S.current) == null || N.focus());
-    }, [T, P] = B(
-      Number.POSITIVE_INFINITY
-    );
-    Ye(() => {
-      const e = H.current;
-      if (!e) return;
-      const t = () => {
-        const o = Array.from(
-          e.querySelectorAll('[data-ui-chip="true"]')
-        );
-        if (o.length === 0) {
-          P(Number.POSITIVE_INFINITY);
-          return;
-        }
-        const i = o[0].offsetTop;
-        let l = 0;
-        for (const d of o)
-          if (d.offsetTop === i) l++;
-          else break;
-        l === o.length ? P(Number.POSITIVE_INFINITY) : P(Math.max(1, l - 1));
-      };
-      t();
-      const s = new ResizeObserver(t);
-      return s.observe(e), () => s.disconnect();
-    }, [r.length, R]);
-    const E = r.map((e) => ({
-      value: e,
-      label: ke.get(e) ?? e
-    })), re = T === Number.POSITIVE_INFINITY || T >= E.length, Fe = re ? E : E.slice(0, T), ne = re ? [] : E.slice(T), A = ne.length, Ve = (e) => {
-      var s;
-      if (h) return;
-      const t = e.target;
-      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = S.current) == null || s.focus());
-    }, qe = (e) => {
-      if (h) {
-        m(!1);
-        return;
-      }
-      m(e), e || (K(""), O == null || O(r));
-    }, Oe = Y || G, De = p("inputs.multiSelect.selected", {
-      count: r.length,
-      defaultValue: `${r.length} selected`
-    }), { onClick: $, ...Le } = ve;
-    return /* @__PURE__ */ n(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ x(q.Root, { open: k, onOpenChange: qe, children: [
-      /* @__PURE__ */ n(q.Anchor, { asChild: !0, children: /* @__PURE__ */ x(
-        "div",
-        {
-          ref: Se,
-          className: et({ size: R, className: ge }),
-          "aria-disabled": h || void 0,
-          "aria-invalid": X || void 0,
-          "data-component": "multi-select",
-          "data-component-id": L,
-          onClick: (e) => {
-            $ == null || $(e), Ve(e);
-          },
-          ...Le,
-          children: [
-            Fe.map((e, t) => (
-              // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- chip pill receives focus via roving tabindex; chip removal uses an inner button
-              /* @__PURE__ */ x(
-                "span",
-                {
-                  ref: (s) => {
-                    w.current[t] = s;
-                  },
-                  tabIndex: h ? -1 : 0,
-                  "data-ui-chip": "true",
-                  className: ie({ size: R }),
-                  onKeyDown: Ee(t),
-                  "aria-label": e.label,
-                  children: [
-                    /* @__PURE__ */ n("span", { children: e.label }),
-                    /* @__PURE__ */ n(
-                      "button",
-                      {
-                        type: "button",
-                        tabIndex: -1,
-                        "data-ui-chip-dismiss": "true",
-                        "aria-label": p("inputs.multiSelect.remove", {
-                          label: e.label,
-                          defaultValue: `Remove ${e.label}`
-                        }),
-                        disabled: h,
-                        onClick: (s) => {
-                          s.stopPropagation(), M(t), requestAnimationFrame(() => {
-                            var o;
-                            return (o = S.current) == null ? void 0 : o.focus();
-                          });
-                        },
-                        className: tt,
-                        children: /* @__PURE__ */ n(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
-                      }
-                    )
-                  ]
-                },
-                e.value
-              )
-            )),
-            A > 0 ? /* @__PURE__ */ n(
-              oe,
-              {
-                label: ne.map((e) => e.label).join(", "),
-                delayDuration: 200,
-                children: /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: ie({ size: R }),
-                    tabIndex: 0,
-                    role: "button",
-                    "aria-label": p("inputs.multiSelect.overflow", {
-                      count: A,
-                      defaultValue: `+${A} more`
-                    }),
-                    children: /* @__PURE__ */ n("span", { children: p("inputs.multiSelect.overflow", {
-                      count: A,
-                      defaultValue: `+${A} more`
-                    }) })
-                  }
-                )
-              }
-            ) : null,
-            /* @__PURE__ */ n(
-              u.Input,
-              {
-                ref: S,
-                value: f,
-                onValueChange: K,
-                onKeyDown: Te,
-                onFocus: () => {
-                  h || m(!0);
-                },
-                placeholder: r.length === 0 ? te : "",
-                id: Ie,
-                "aria-label": y ? void 0 : he,
-                "aria-describedby": xe,
-                "aria-invalid": X || void 0,
-                "aria-required": we || void 0,
-                disabled: h,
-                className: [
-                  "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
-                  "ds:placeholder:text-muted-foreground ds:text-start",
-                  "ds:disabled:cursor-not-allowed"
-                ].join(" ")
-              }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ n(q.Portal, { children: /* @__PURE__ */ n(
-        q.Content,
-        {
-          onOpenAutoFocus: (e) => e.preventDefault(),
-          onCloseAutoFocus: (e) => e.preventDefault(),
-          align: "start",
-          sideOffset: 4,
-          className: st,
-          children: /* @__PURE__ */ x(
-            u.List,
-            {
-              role: "listbox",
-              "aria-multiselectable": "true",
-              "aria-label": te,
-              className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
-              children: [
-                Oe ? /* @__PURE__ */ x(u.Group, { children: [
-                  Y ? /* @__PURE__ */ n(
-                    u.Item,
-                    {
-                      value: nt,
-                      onSelect: Ae,
-                      className: ae,
-                      children: p("inputs.multiSelect.selectAll", "Select all")
-                    }
-                  ) : null,
-                  G ? /* @__PURE__ */ n(
-                    u.Item,
-                    {
-                      value: ot,
-                      onSelect: Ne,
-                      className: ae,
-                      children: p("inputs.multiSelect.clearAll", "Clear all")
-                    }
-                  ) : null
-                ] }) : null,
-                /* @__PURE__ */ n(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: p("inputs.multiSelect.noOptions", "No options found") }),
-                Re.map(({ group: e, items: t }, s) => {
-                  const o = t.map((i) => {
-                    const l = r.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ x(
-                      u.Item,
-                      {
-                        value: i.value,
-                        "data-option-id": i.value,
-                        disabled: g,
-                        onSelect: () => {
-                          g || Ce(i.value);
-                        },
-                        "aria-selected": l,
-                        "aria-disabled": g || void 0,
-                        className: rt,
-                        children: [
-                          /* @__PURE__ */ n(
-                            "span",
-                            {
-                              className: [
-                                "ds:inline-flex ds:items-center ds:justify-center ds:me-2 ds:shrink-0",
-                                "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border ds:border-border",
-                                l ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
-                              ].join(" "),
-                              "aria-hidden": "true",
-                              children: l ? /* @__PURE__ */ n(We, { className: "ds:size-3.5" }) : null
-                            }
-                          ),
-                          /* @__PURE__ */ n("span", { className: "ds:flex-1 ds:text-start", children: i.label })
-                        ]
-                      },
-                      i.value
-                    );
-                    return d ? /* @__PURE__ */ n(
-                      oe,
-                      {
-                        label: p("inputs.multiSelect.maxReached", {
-                          count: v,
-                          defaultValue: `Maximum ${v} selections`
-                        }),
-                        delayDuration: 200,
-                        children: N
-                      },
-                      i.value
-                    ) : N;
-                  });
-                  return e ? /* @__PURE__ */ n(
-                    u.Group,
-                    {
-                      heading: e,
-                      className: "ds:[&_[cmdk-group-heading]]:ps-2 ds:[&_[cmdk-group-heading]]:pe-2 ds:[&_[cmdk-group-heading]]:py-1 ds:[&_[cmdk-group-heading]]:type-eyebrow ds:[&_[cmdk-group-heading]]:text-muted-foreground",
-                      children: o
-                    },
-                    `group-${e}`
-                  ) : /* @__PURE__ */ n(u.Group, { children: o }, `group-${s}`);
-                })
-              ]
-            }
-          )
-        }
-      ) })
-    ] }) });
-  }
-);
-de.displayName = "MultiSelect";
-const wt = de;
-export {
-  wt as M,
-  et as a,
-  Ze as m
-};
-//# sourceMappingURL=multi-select-BdHHDrRN.js.map