@iclips/ui 1.4.12 → 2.0.0

package/dist/components/ui/forms/month-range-picker.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import * as u from "react";
+import { X as H, CalendarIcon as Q, ChevronLeft as U, ChevronRight as W } from "lucide-react";
+import { cn as _ } from "../utils.js";
+import { Input as J } from "./input.js";
+import { Button as p } from "../primitives/button.js";
+import { Popover as v, PopoverTrigger as tt, PopoverContent as et } from "../overlays/popover.js";
+const P = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
+function b(t, r) {
+  return t * 12 + r;
+}
+function Y(t) {
+  return `${P[t.getMonth()]}/${t.getFullYear()}`;
+}
+function K(t) {
+  const r = t.trim().match(/^([A-Za-zÀ-ÿ]{3,}|\d{1,2})\/(\d{4})$/);
+  if (!r) return null;
+  const [, l, n] = r, c = Number(n);
+  if (Number.isNaN(c)) return null;
+  let i;
+  if (/^\d+$/.test(l))
+    i = Number(l);
+  else {
+    const a = P.findIndex((f) => f.toLowerCase() === l.toLowerCase().slice(0, 3));
+    if (a === -1) return null;
+    i = a + 1;
+  }
+  return i < 1 || i > 12 ? null : new Date(c, i - 1, 1);
+}
+function rt(t) {
+  const r = t.trim();
+  if (!r) return null;
+  const l = ["→", "-", "até", "a"];
+  for (const n of l) {
+    if (!r.includes(n)) continue;
+    const c = r.split(n).map((f) => f.trim());
+    if (c.length !== 2) continue;
+    const i = K(c[0]), a = K(c[1]);
+    if (i && a)
+      return b(i.getFullYear(), i.getMonth() + 1) > b(a.getFullYear(), a.getMonth() + 1) ? null : { from: i, to: a };
+  }
+  return null;
+}
+function B({
+  titulo: t,
+  year: r,
+  onYearChange: l,
+  minYear: n,
+  maxYear: c,
+  selectedMonth: i,
+  selectedYear: a,
+  onSelect: f,
+  isMonthDisabled: y
+}) {
+  return /* @__PURE__ */ m("div", { className: "p-3 w-56", children: [
+    /* @__PURE__ */ s("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: t }),
+    /* @__PURE__ */ m("div", { className: "flex items-center justify-center mb-2 gap-1", children: [
+      /* @__PURE__ */ s(
+        p,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 w-7 p-0",
+          onClick: () => l(Math.max(n, r - 1)),
+          disabled: r <= n,
+          children: /* @__PURE__ */ s(U, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ s(
+        J,
+        {
+          type: "number",
+          className: "w-20 text-center h-8",
+          value: r,
+          min: n,
+          max: c,
+          onChange: (h) => {
+            const N = Number(h.target.value);
+            Number.isNaN(N) || l(N);
+          }
+        }
+      ),
+      /* @__PURE__ */ s(
+        p,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 w-7 p-0",
+          onClick: () => l(Math.min(c, r + 1)),
+          disabled: r >= c,
+          children: /* @__PURE__ */ s(W, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s("div", { className: "grid grid-cols-3 gap-1", children: P.map((h, N) => {
+      const F = N + 1, M = (y == null ? void 0 : y(r, F)) ?? !1;
+      return /* @__PURE__ */ s(
+        p,
+        {
+          type: "button",
+          variant: r === a && F === i ? "default" : "ghost",
+          size: "sm",
+          className: "px-0",
+          disabled: M,
+          onClick: () => f(r, F),
+          children: h
+        },
+        h
+      );
+    }) })
+  ] });
+}
+const ot = u.forwardRef(({
+  value: t,
+  onChange: r,
+  placeholder: l = "Selecione um período",
+  disabled: n = !1,
+  minYear: c = 2020,
+  maxYear: i = (/* @__PURE__ */ new Date()).getFullYear() + 5,
+  className: a,
+  error: f = !1,
+  id: y,
+  name: h
+}, N) => {
+  var A, E, L, j;
+  const [F, M] = u.useState(!1), [e, w] = u.useState(t), [I, g] = u.useState(""), [k, d] = u.useState(!1), [O, D] = u.useState(() => ((t == null ? void 0 : t.from) ?? /* @__PURE__ */ new Date()).getFullYear()), [V, z] = u.useState(() => ((t == null ? void 0 : t.to) ?? /* @__PURE__ */ new Date()).getFullYear());
+  u.useEffect(() => {
+    w(t), t != null && t.from && D(t.from.getFullYear()), t != null && t.to && z(t.to.getFullYear()), t != null && t.from && (t != null && t.to) ? g(`${Y(t.from)} → ${Y(t.to)}`) : g(""), d(!1);
+  }, [t]);
+  const C = (o, x) => {
+    const S = new Date(o, x - 1, 1), G = e != null && e.to && b(e.to.getFullYear(), e.to.getMonth() + 1) >= b(o, x) ? e.to : S;
+    w({ from: S, to: G });
+  }, T = (o, x) => {
+    if (!(e != null && e.from)) return;
+    const S = new Date(o, x - 1, 1);
+    w({ from: e.from, to: S });
+  }, X = (o, x) => e != null && e.from ? b(o, x) < b(e.from.getFullYear(), e.from.getMonth() + 1) : !1, Z = () => {
+    r == null || r(e), M(!1);
+  }, R = (o) => {
+    o.stopPropagation(), w(void 0), g(""), d(!1), r == null || r(void 0);
+  }, q = (o) => {
+    n || (g(o.target.value), d(!1));
+  }, $ = () => {
+    if (n) return;
+    if (!I.trim()) {
+      w(void 0), r == null || r(void 0), d(!1);
+      return;
+    }
+    const o = rt(I);
+    o ? (w(o), D(o.from.getFullYear()), z(o.to.getFullYear()), r == null || r(o), d(!1)) : d(!0);
+  };
+  return /* @__PURE__ */ m(v, { open: !n && F, onOpenChange: (o) => {
+    n || M(o);
+  }, children: [
+    /* @__PURE__ */ m("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ s(
+        J,
+        {
+          ref: N,
+          id: y,
+          name: h,
+          value: I,
+          onChange: q,
+          onBlur: $,
+          onKeyDown: (o) => {
+            o.key === "Enter" ? (o.preventDefault(), $(), k || M(!0)) : o.key === "Escape" && (o.preventDefault(), t != null && t.from && (t != null && t.to) ? g(`${Y(t.from)} → ${Y(t.to)}`) : g(""), d(!1));
+          },
+          placeholder: l,
+          disabled: n,
+          "aria-invalid": f || k,
+          className: _(
+            "pr-20",
+            (f || k) && "border-destructive focus-visible:ring-destructive/20",
+            a
+          )
+        }
+      ),
+      /* @__PURE__ */ m("div", { className: "absolute inset-y-0 right-0 flex items-center gap-1 pr-1", children: [
+        I && !n && /* @__PURE__ */ m(
+          p,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 w-7 p-0 hover:bg-transparent",
+            onClick: R,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ s(H, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" }),
+              /* @__PURE__ */ s("span", { className: "sr-only", children: "Limpar" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(tt, { asChild: !0, children: /* @__PURE__ */ s(
+          p,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 w-7 p-0 hover:bg-transparent",
+            disabled: n,
+            "aria-label": "Abrir calendário",
+            children: /* @__PURE__ */ s(Q, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ m(et, { align: "start", className: "w-auto p-0 max-w-[calc(100vw-2rem)]", children: [
+      /* @__PURE__ */ m("div", { className: "flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x", children: [
+        /* @__PURE__ */ s(
+          B,
+          {
+            titulo: "Mês inicial",
+            year: O,
+            onYearChange: D,
+            minYear: c,
+            maxYear: i,
+            selectedYear: ((A = e == null ? void 0 : e.from) == null ? void 0 : A.getFullYear()) ?? -1,
+            selectedMonth: (((E = e == null ? void 0 : e.from) == null ? void 0 : E.getMonth()) ?? -2) + 1,
+            onSelect: C
+          }
+        ),
+        /* @__PURE__ */ s(
+          B,
+          {
+            titulo: "Mês final",
+            year: V,
+            onYearChange: z,
+            minYear: c,
+            maxYear: i,
+            selectedYear: ((L = e == null ? void 0 : e.to) == null ? void 0 : L.getFullYear()) ?? -1,
+            selectedMonth: (((j = e == null ? void 0 : e.to) == null ? void 0 : j.getMonth()) ?? -2) + 1,
+            onSelect: T,
+            isMonthDisabled: X
+          }
+        )
+      ] }),
+      /* @__PURE__ */ m("div", { className: "border-t p-3 flex justify-end gap-2", children: [
+        /* @__PURE__ */ s(p, { type: "button", variant: "outline", size: "sm", onClick: R, children: "Limpar" }),
+        /* @__PURE__ */ s(
+          p,
+          {
+            type: "button",
+            size: "sm",
+            disabled: !(e != null && e.from) || !(e != null && e.to),
+            onClick: Z,
+            children: "Confirmar"
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+ot.displayName = "MonthRangePicker";
+export {
+  ot as MonthRangePicker
+};
+//# sourceMappingURL=month-range-picker.js.map

package/dist/components/ui/forms/month-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-range-picker.js","sources":["../../../../src/components/ui/forms/month-range-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { CalendarIcon, ChevronLeft, ChevronRight, X } from \"lucide-react\";\n\nimport { cn } from \"../utils\";\nimport { Input } from \"./input\";\nimport { Button } from \"../primitives/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlays/popover\";\n\nconst MESES = [\"Jan\", \"Fev\", \"Mar\", \"Abr\", \"Mai\", \"Jun\", \"Jul\", \"Ago\", \"Set\", \"Out\", \"Nov\", \"Dez\"];\n\nexport interface MonthYearRange {\n  from: Date;\n  to: Date;\n}\n\nexport interface MonthRangePickerProps {\n  /**\n   * Intervalo de meses selecionado. `from`/`to` representam o 1º dia do mês.\n   */\n  value?: MonthYearRange;\n  /**\n   * Callback quando o intervalo muda\n   */\n  onChange?: (range: MonthYearRange | undefined) => void;\n  /**\n   * Placeholder do campo\n   * @default \"Selecione um período\"\n   */\n  placeholder?: string;\n  /**\n   * Desabilita o componente\n   */\n  disabled?: boolean;\n  /**\n   * Ano mínimo navegável\n   * @default 2020\n   */\n  minYear?: number;\n  /**\n   * Ano máximo navegável\n   * @default anoAtual + 5\n   */\n  maxYear?: number;\n  /**\n   * Classes CSS adicionais para o trigger\n   */\n  className?: string;\n  /**\n   * Estado de erro\n   */\n  error?: boolean;\n  /**\n   * ID do campo para acessibilidade\n   */\n  id?: string;\n  /**\n   * Nome do campo para formulários\n   */\n  name?: string;\n}\n\nfunction monthKey(year: number, month: number) {\n  return year * 12 + month;\n}\n\nfunction formatMesAno(date: Date) {\n  return `${MESES[date.getMonth()]}/${date.getFullYear()}`;\n}\n\nfunction parseMesAno(input: string): Date | null {\n  const match = input.trim().match(/^([A-Za-zÀ-ÿ]{3,}|\\d{1,2})\\/(\\d{4})$/);\n  if (!match) return null;\n\n  const [, monthRaw, yearRaw] = match;\n  const year = Number(yearRaw);\n  if (Number.isNaN(year)) return null;\n\n  let month: number;\n  if (/^\\d+$/.test(monthRaw)) {\n    month = Number(monthRaw);\n  } else {\n    const idx = MESES.findIndex((m) => m.toLowerCase() === monthRaw.toLowerCase().slice(0, 3));\n    if (idx === -1) return null;\n    month = idx + 1;\n  }\n  if (month < 1 || month > 12) return null;\n\n  return new Date(year, month - 1, 1);\n}\n\nfunction parseInputRange(input: string): MonthYearRange | null {\n  const trimmed = input.trim();\n  if (!trimmed) return null;\n\n  const separators = [\"→\", \"-\", \"até\", \"a\"];\n  for (const sep of separators) {\n    if (!trimmed.includes(sep)) continue;\n    const parts = trimmed.split(sep).map((p) => p.trim());\n    if (parts.length !== 2) continue;\n\n    const from = parseMesAno(parts[0]);\n    const to = parseMesAno(parts[1]);\n    if (from && to) {\n      // Mês final anterior ao inicial é inválido (não é corrigido silenciosamente) — dispara estado de erro no input\n      if (monthKey(from.getFullYear(), from.getMonth() + 1) > monthKey(to.getFullYear(), to.getMonth() + 1)) {\n        return null;\n      }\n      return { from, to };\n    }\n  }\n\n  return null;\n}\n\ninterface MonthPanelProps {\n  titulo: string;\n  year: number;\n  onYearChange: (year: number) => void;\n  minYear: number;\n  maxYear: number;\n  selectedMonth: number;\n  selectedYear: number;\n  onSelect: (year: number, month: number) => void;\n  isMonthDisabled?: (year: number, month: number) => boolean;\n}\n\nfunction PainelMes({\n  titulo,\n  year,\n  onYearChange,\n  minYear,\n  maxYear,\n  selectedMonth,\n  selectedYear,\n  onSelect,\n  isMonthDisabled,\n}: MonthPanelProps) {\n  return (\n    <div className=\"p-3 w-56\">\n      <p className=\"text-xs font-medium text-muted-foreground mb-2\">{titulo}</p>\n      <div className=\"flex items-center justify-center mb-2 gap-1\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-7 w-7 p-0\"\n          onClick={() => onYearChange(Math.max(minYear, year - 1))}\n          disabled={year <= minYear}\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n        <Input\n          type=\"number\"\n          className=\"w-20 text-center h-8\"\n          value={year}\n          min={minYear}\n          max={maxYear}\n          onChange={(e) => {\n            const parsed = Number(e.target.value);\n            if (!Number.isNaN(parsed)) onYearChange(parsed);\n          }}\n        />\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-7 w-7 p-0\"\n          onClick={() => onYearChange(Math.min(maxYear, year + 1))}\n          disabled={year >= maxYear}\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n      <div className=\"grid grid-cols-3 gap-1\">\n        {MESES.map((label, idx) => {\n          const month = idx + 1;\n          const disabled = isMonthDisabled?.(year, month) ?? false;\n          const selected = year === selectedYear && month === selectedMonth;\n          return (\n            <Button\n              key={label}\n              type=\"button\"\n              variant={selected ? \"default\" : \"ghost\"}\n              size=\"sm\"\n              className=\"px-0\"\n              disabled={disabled}\n              onClick={() => onSelect(year, month)}\n            >\n              {label}\n            </Button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/**\n * MonthRangePicker - Seleção de intervalo de meses (Mês/Ano Início + Mês/Ano Fim)\n *\n * @example\n * <MonthRangePicker\n *   value={periodo}\n *   onChange={setPeriodo}\n *   placeholder=\"Selecione o período\"\n * />\n *\n * @example\n * // Digitação direta\n * // Set/2025 → Mar/2026\n * // 09/2025 - 03/2026\n */\nconst MonthRangePicker = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  MonthRangePickerProps\n>(({\n  value,\n  onChange,\n  placeholder = \"Selecione um período\",\n  disabled = false,\n  minYear = 2020,\n  maxYear = new Date().getFullYear() + 5,\n  className,\n  error = false,\n  id,\n  name,\n}, ref) => {\n  const [open, setOpen] = React.useState(false);\n  const [pending, setPending] = React.useState<MonthYearRange | undefined>(value);\n  const [inputValue, setInputValue] = React.useState(\"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const [yearInicio, setYearInicio] = React.useState(() => (value?.from ?? new Date()).getFullYear());\n  const [yearFim, setYearFim] = React.useState(() => (value?.to ?? new Date()).getFullYear());\n\n  React.useEffect(() => {\n    setPending(value);\n    if (value?.from) setYearInicio(value.from.getFullYear());\n    if (value?.to) setYearFim(value.to.getFullYear());\n\n    if (value?.from && value?.to) {\n      setInputValue(`${formatMesAno(value.from)} → ${formatMesAno(value.to)}`);\n    } else {\n      setInputValue(\"\");\n    }\n    setIsInvalid(false);\n  }, [value]);\n\n  const handleSelectInicio = (year: number, month: number) => {\n    const from = new Date(year, month - 1, 1);\n    const to = pending?.to && monthKey(pending.to.getFullYear(), pending.to.getMonth() + 1) >= monthKey(year, month)\n      ? pending.to\n      : from;\n    setPending({ from, to });\n  };\n\n  const handleSelectFim = (year: number, month: number) => {\n    if (!pending?.from) return;\n    const to = new Date(year, month - 1, 1);\n    setPending({ from: pending.from, to });\n  };\n\n  const isFimDisabled = (year: number, month: number) => {\n    if (!pending?.from) return false;\n    return monthKey(year, month) < monthKey(pending.from.getFullYear(), pending.from.getMonth() + 1);\n  };\n\n  const handleConfirm = () => {\n    onChange?.(pending);\n    setOpen(false);\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setPending(undefined);\n    setInputValue(\"\");\n    setIsInvalid(false);\n    onChange?.(undefined);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setInputValue(e.target.value);\n    setIsInvalid(false);\n  };\n\n  const handleInputBlur = () => {\n    if (disabled) return;\n    if (!inputValue.trim()) {\n      setPending(undefined);\n      onChange?.(undefined);\n      setIsInvalid(false);\n      return;\n    }\n\n    const parsed = parseInputRange(inputValue);\n    if (parsed) {\n      setPending(parsed);\n      setYearInicio(parsed.from.getFullYear());\n      setYearFim(parsed.to.getFullYear());\n      onChange?.(parsed);\n      setIsInvalid(false);\n    } else {\n      setIsInvalid(true);\n    }\n  };\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      handleInputBlur();\n      if (!isInvalid) setOpen(true);\n    } else if (e.key === \"Escape\") {\n      e.preventDefault();\n      if (value?.from && value?.to) {\n        setInputValue(`${formatMesAno(value.from)} → ${formatMesAno(value.to)}`);\n      } else {\n        setInputValue(\"\");\n      }\n      setIsInvalid(false);\n    }\n  };\n\n  return (\n    <Popover open={!disabled && open} onOpenChange={(o) => { if (!disabled) setOpen(o); }}>\n      <div className=\"relative w-full\">\n          <Input\n            ref={ref}\n            id={id}\n            name={name}\n            value={inputValue}\n            onChange={handleInputChange}\n            onBlur={handleInputBlur}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-invalid={error || isInvalid}\n            className={cn(\n              \"pr-20\",\n              (error || isInvalid) && \"border-destructive focus-visible:ring-destructive/20\",\n              className,\n            )}\n          />\n          <div className=\"absolute inset-y-0 right-0 flex items-center gap-1 pr-1\">\n            {inputValue && !disabled && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 w-7 p-0 hover:bg-transparent\"\n                onClick={handleClear}\n                tabIndex={-1}\n              >\n                <X className=\"h-4 w-4 text-muted-foreground hover:text-foreground\" />\n                <span className=\"sr-only\">Limpar</span>\n              </Button>\n            )}\n            <PopoverTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 w-7 p-0 hover:bg-transparent\"\n                disabled={disabled}\n                aria-label=\"Abrir calendário\"\n              >\n                <CalendarIcon className=\"h-4 w-4 text-muted-foreground\" />\n              </Button>\n            </PopoverTrigger>\n          </div>\n        </div>\n      <PopoverContent align=\"start\" className=\"w-auto p-0 max-w-[calc(100vw-2rem)]\">\n        <div className=\"flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x\">\n          <PainelMes\n            titulo=\"Mês inicial\"\n            year={yearInicio}\n            onYearChange={setYearInicio}\n            minYear={minYear}\n            maxYear={maxYear}\n            selectedYear={pending?.from?.getFullYear() ?? -1}\n            selectedMonth={(pending?.from?.getMonth() ?? -2) + 1}\n            onSelect={handleSelectInicio}\n          />\n          <PainelMes\n            titulo=\"Mês final\"\n            year={yearFim}\n            onYearChange={setYearFim}\n            minYear={minYear}\n            maxYear={maxYear}\n            selectedYear={pending?.to?.getFullYear() ?? -1}\n            selectedMonth={(pending?.to?.getMonth() ?? -2) + 1}\n            onSelect={handleSelectFim}\n            isMonthDisabled={isFimDisabled}\n          />\n        </div>\n        <div className=\"border-t p-3 flex justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleClear}>\n            Limpar\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={!pending?.from || !pending?.to}\n            onClick={handleConfirm}\n          >\n            Confirmar\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n});\n\nMonthRangePicker.displayName = \"MonthRangePicker\";\n\nexport { MonthRangePicker };\n"],"names":["MESES","monthKey","year","month","formatMesAno","date","parseMesAno","input","match","monthRaw","yearRaw","idx","m","parseInputRange","trimmed","separators","sep","parts","p","from","to","PainelMes","titulo","onYearChange","minYear","maxYear","selectedMonth","selectedYear","onSelect","isMonthDisabled","jsxs","jsx","Button","ChevronLeft","Input","e","parsed","ChevronRight","label","disabled","MonthRangePicker","React","value","onChange","placeholder","className","error","id","name","ref","open","setOpen","pending","setPending","inputValue","setInputValue","isInvalid","setIsInvalid","yearInicio","setYearInicio","yearFim","setYearFim","handleSelectInicio","handleSelectFim","isFimDisabled","handleConfirm","handleClear","handleInputChange","handleInputBlur","Popover","cn","X","PopoverTrigger","CalendarIcon","PopoverContent","_a","_b","_c","_d"],"mappings":"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"}

package/dist/components/ui/forms/multi-select.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),te=require("react"),i=require("lucide-react"),c=require("../utils.cjs"),se=require("../primitives/button.cjs"),I=require("../primitives/badge.cjs"),N=require("../overlays/popover.cjs"),ne=require("./input.cjs");function re(n){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(o,a,r.get?r:{enumerable:!0,get:()=>n[a]})}}return o.default=n,Object.freeze(o)}const l=re(te),E=l.forwardRef(({value:n,onValueChange:o,options:a,groups:r,placeholder:W="Selecione...",searchPlaceholder:_="Buscar...",emptyMessage:$="Nenhum resultado encontrado",disabled:C=!1,loading:k=!1,maxVisibleChips:R=2,onSearch:u,onCreateOption:g,createOptionLabel:v,className:A,"aria-label":F,"aria-labelledby":H},M)=>{var B;const[h,K]=l.useState(!1),[d,y]=l.useState(""),[x,P]=l.useState(!1),w=l.useRef(null),q=l.useRef(null),z=l.useMemo(()=>c.mergeRefs(w,M),[M]),U=l.useCallback(e=>{e&&e.addEventListener("wheel",s=>s.stopPropagation(),{passive:!0})},[]),j=l.useMemo(()=>a||(r?[...r.filter(s=>s.value!=null).map(s=>({value:s.value,label:s.label})),...r.flatMap(s=>s.options)]:[]),[a,r]),b=!!u,D=l.useMemo(()=>{if(!a)return[];if(b)return a;const e=d.toLowerCase().trim();return e?a.filter(s=>s.label.toLowerCase().includes(e)||s.value.toLowerCase().includes(e)):a},[a,d,b]),m=l.useMemo(()=>{if(!r)return;if(b)return r;const e=d.toLowerCase().trim();return e?r.map(s=>({...s,options:s.options.filter(p=>p.label.toLowerCase().includes(e)||p.value.toLowerCase().includes(e))})).filter(s=>s.options.length>0):r},[r,d,b]),O=l.useMemo(()=>j.filter(e=>n.includes(e.value)),[j,n]),X=r?(m==null?void 0:m.some(e=>e.options.length>0))??!1:D.length>0,f=d.trim(),J=j.some(e=>e.label.trim().toLowerCase()===f.toLowerCase()),Q=!!g&&f.length>0&&!J,Y=async()=>{if(!(!g||x||!f)){P(!0);try{await g(f),y("")}catch{}finally{P(!1)}}},L=e=>{n.includes(e)?o(n.filter(s=>s!==e)):o([...n,e])},Z=(e,s)=>{s.stopPropagation(),o(n.filter(p=>p!==e))},G=e=>{C||(K(e),e||y(""))};l.useEffect(()=>{h&&(u==null||u(""))},[h]);const V=e=>{y(e.target.value),u==null||u(e.target.value)},ee=O.slice(0,R),S=O.length-R,T=e=>{const s=n.includes(e.value);return t.jsxs("button",{type:"button",role:"option","aria-selected":s,disabled:e.disabled,onClick:()=>L(e.value),className:c.cn("flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm","hover:bg-accent hover:text-accent-foreground","focus:bg-accent focus:text-accent-foreground focus:outline-none","transition-colors duration-100",e.disabled&&"pointer-events-none opacity-50"),children:[t.jsx(i.Check,{className:c.cn("h-4 w-4 shrink-0 transition-opacity duration-100",s?"opacity-100":"opacity-0")}),t.jsx("span",{className:"flex-1 text-left truncate",children:e.label}),e.badge]},e.value)};return t.jsxs(N.Popover,{open:h,onOpenChange:G,children:[t.jsx(N.PopoverTrigger,{asChild:!0,children:t.jsxs(se.Button,{ref:z,type:"button",variant:"outline",role:"combobox","aria-expanded":h,"aria-label":F,"aria-labelledby":H,disabled:C,className:c.cn("w-full min-h-10 h-auto justify-between font-normal px-3 py-2",!n.length&&"text-muted-foreground",A),children:[t.jsx("div",{className:"flex flex-wrap items-center gap-1 flex-1 min-w-0",children:n.length===0?t.jsx("span",{className:"truncate text-sm",children:k?"Carregando...":W}):t.jsxs(t.Fragment,{children:[ee.map(e=>t.jsxs(I.Badge,{variant:"secondary",className:"rounded-sm h-5 gap-0.5 pr-1 font-normal max-w-[160px]",children:[t.jsx("span",{className:"truncate text-xs",children:e.label}),t.jsx("span",{role:"button",tabIndex:0,"aria-label":`Remover ${e.label}`,className:"inline-flex items-center justify-center rounded-sm hover:bg-muted/80 cursor-pointer shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/60",onMouseDown:s=>s.preventDefault(),onClick:s=>Z(e.value,s),onKeyDown:c.pressableKeyDown,children:t.jsx(i.X,{className:"h-3 w-3"})})]},e.value)),S>0&&t.jsxs(I.Badge,{variant:"secondary",className:"rounded-sm h-5 px-1.5 font-normal text-xs shrink-0",children:["+",S]})]})}),t.jsx(i.ChevronsUpDown,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),t.jsxs(N.PopoverContent,{className:"p-0 overflow-hidden",style:{width:(B=w.current)!=null&&B.offsetWidth?`${w.current.offsetWidth}px`:"auto"},align:"start",onOpenAutoFocus:e=>{var s;e.preventDefault(),(s=q.current)==null||s.focus()},onWheel:e=>e.stopPropagation(),children:[t.jsxs("div",{className:"flex items-center border-b px-3",children:[t.jsx(i.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),t.jsx(ne.Input,{ref:q,placeholder:_,value:d,onChange:V,className:"h-10 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-0"})]}),Q&&t.jsxs("button",{type:"button",onClick:Y,disabled:x,className:c.cn("flex w-full items-center gap-2 border-b px-3 py-2 text-sm text-primary","hover:bg-accent transition-colors duration-100","disabled:opacity-50 disabled:pointer-events-none"),children:[x?t.jsx(i.Loader2,{className:"h-4 w-4 shrink-0 animate-spin"}):t.jsx(i.Plus,{className:"h-4 w-4 shrink-0"}),t.jsx("span",{className:"truncate",children:x?"Criando...":(v==null?void 0:v(f))??`Criar "${f}"`})]}),t.jsx("div",{ref:U,className:"max-h-70 overflow-y-auto [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-primary/30 [&::-webkit-scrollbar-thumb:hover]:bg-primary/50",children:t.jsx("div",{className:"p-1",role:"listbox","aria-multiselectable":!0,children:k?t.jsxs("div",{className:"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",children:[t.jsx(i.Loader2,{className:"h-4 w-4 animate-spin"}),"Carregando..."]}):X?r?m==null?void 0:m.map(e=>t.jsxs("div",{children:[e.value?t.jsxs("button",{type:"button",onClick:()=>L(e.value),className:c.cn("flex w-full items-center gap-2 rounded-sm px-2 py-1.5","hover:bg-accent hover:text-accent-foreground transition-colors duration-100",n.includes(e.value)&&"text-foreground"),children:[t.jsx(i.Check,{className:c.cn("h-4 w-4 shrink-0 transition-opacity duration-100",n.includes(e.value)?"opacity-100":"opacity-0")}),t.jsx("span",{className:"text-xs font-semibold uppercase tracking-wide",children:e.label})]}):t.jsx("div",{className:"px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide",children:e.label}),e.options.map(T)]},e.label)):D.map(T):t.jsx("div",{className:"py-6 text-center text-sm text-muted-foreground",children:$})})})]})]})});E.displayName="MultiSelect";exports.MultiSelect=E;
+//# sourceMappingURL=multi-select.cjs.map

package/dist/components/ui/forms/multi-select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.cjs","sources":["../../../../src/components/ui/forms/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown, X, Search, Loader2, Plus } from \"lucide-react\";\nimport { cn, mergeRefs, pressableKeyDown } from \"../utils\";\nimport { Button } from \"../primitives/button\";\nimport { Badge } from \"../primitives/badge\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlays/popover\";\nimport { Input } from \"./input\";\n\nexport interface MultiSelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  /** Slot para renderização customizada à direita do label — ex: <Badge>Externo</Badge> */\n  badge?: React.ReactNode;\n}\n\nexport interface MultiSelectGroup {\n  label: string;\n  options: MultiSelectOption[];\n  /** Quando presente, o header do grupo torna-se clicável e seleciona/deseleciona o grupo */\n  value?: string;\n}\n\nexport interface MultiSelectProps {\n  /** Valores atualmente selecionados */\n  value: string[];\n  /** Callback disparado ao alterar a seleção */\n  onValueChange: (values: string[]) => void;\n\n  /**\n   * Opções em lista plana.\n   * Use `options` OU `groups` — nunca os dois ao mesmo tempo.\n   */\n  options?: MultiSelectOption[];\n  /**\n   * Opções agrupadas hierarquicamente.\n   * Use `options` OU `groups` — nunca os dois ao mesmo tempo.\n   */\n  groups?: MultiSelectGroup[];\n\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n\n  /** Rótulo acessível do gatilho quando não há `<Label>` associado */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n\n  disabled?: boolean;\n  /** Exibe estado de carregamento — substitui a lista por spinner */\n  loading?: boolean;\n\n  /**\n   * Número máximo de chips visíveis no trigger antes de exibir \"+N\".\n   * @default 2\n   */\n  maxVisibleChips?: number;\n\n  /**\n   * Callback de busca assíncrona — chamado a cada keystroke e ao abrir o dropdown.\n   * Quando presente, a filtragem local é desativada (o caller controla `options`/`groups`).\n   */\n  onSearch?: (query: string) => void;\n\n  /**\n   * Habilita criação de uma nova opção diretamente no dropdown.\n   * Chamado quando o usuário clica em \"Criar '{busca}'\" — o caller é responsável por\n   * persistir a opção (ex: chamada de API), atualizar `options`/`value` com o resultado\n   * e sinalizar falhas ao usuário (ex: toast). Rejeitar a promise preserva o termo\n   * buscado no campo, permitindo corrigir e tentar novamente.\n   * Exibido apenas quando não há opção com label idêntico ao termo buscado.\n   */\n  onCreateOption?: (inputValue: string) => void | Promise<void>;\n  /** Customiza o label do botão de criação. @default (query) => `Criar \"${query}\"` */\n  createOptionLabel?: (query: string) => string;\n\n  className?: string;\n}\n\n/**\n * MultiSelect — Seleção múltipla com chips, busca, grupos hierárquicos e slots de badge por opção.\n *\n * @example\n * ```tsx\n * // Lista plana\n * <MultiSelect\n *   value={selectedSquads}\n *   onValueChange={setSelectedSquads}\n *   options={squads.map(s => ({ value: String(s.id), label: s.name }))}\n *   placeholder=\"Selecione os squads\"\n * />\n *\n * // Com badge por opção (ex: funcionários externos)\n * <MultiSelect\n *   value={selectedEmployees}\n *   onValueChange={setSelectedEmployees}\n *   options={employees.map(e => ({\n *     value: String(e.id),\n *     label: e.name,\n *     badge: e.isExternalUser\n *       ? <Badge variant=\"secondary\" className=\"text-xs\">Externo</Badge>\n *       : undefined,\n *   }))}\n * />\n *\n * // Lista hierárquica (grupos de clientes)\n * <MultiSelect\n *   value={selectedClients}\n *   onValueChange={setSelectedClients}\n *   groups={customerGroups.map(g => ({\n *     label: g.name,\n *     options: g.children.map(c => ({ value: String(c.id), label: c.name })),\n *   }))}\n * />\n * ```\n */\nexport const MultiSelect = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  MultiSelectProps\n>(({\n  value,\n  onValueChange,\n  options,\n  groups,\n  placeholder = \"Selecione...\",\n  searchPlaceholder = \"Buscar...\",\n  emptyMessage = \"Nenhum resultado encontrado\",\n  disabled = false,\n  loading = false,\n  maxVisibleChips = 2,\n  onSearch,\n  onCreateOption,\n  createOptionLabel,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n}, ref) => {\n  const [open, setOpen] = React.useState(false);\n  const [search, setSearch] = React.useState(\"\");\n  const [isCreating, setIsCreating] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const mergedTriggerRef = React.useMemo(() => mergeRefs(triggerRef, ref), [ref]);\n\n  // Callback ref: chamado imediatamente ao montar o elemento (sem timing issue do useEffect).\n  // Para a propagação nativa do wheel antes de chegar ao document, onde o\n  // react-remove-scroll do Sheet chama preventDefault() em eventos de Portal.\n  const listCallbackRef = React.useCallback((el: HTMLDivElement | null) => {\n    if (!el) return;\n    el.addEventListener(\"wheel\", (e) => e.stopPropagation(), { passive: true });\n  }, []);\n\n  const allOptions = React.useMemo((): MultiSelectOption[] => {\n    if (options) return options;\n    if (groups) {\n      const groupHeaders: MultiSelectOption[] = groups\n        .filter((g) => g.value != null)\n        .map((g) => ({ value: g.value!, label: g.label }));\n      return [...groupHeaders, ...groups.flatMap((g) => g.options)];\n    }\n    return [];\n  }, [options, groups]);\n\n  const isAsyncSearch = !!onSearch;\n\n  const filteredOptions = React.useMemo(() => {\n    if (!options) return [];\n    if (isAsyncSearch) return options;\n    const term = search.toLowerCase().trim();\n    if (!term) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(term) ||\n        o.value.toLowerCase().includes(term)\n    );\n  }, [options, search, isAsyncSearch]);\n\n  const filteredGroups = React.useMemo(() => {\n    if (!groups) return undefined;\n    if (isAsyncSearch) return groups;\n    const term = search.toLowerCase().trim();\n    if (!term) return groups;\n    return groups\n      .map((g) => ({\n        ...g,\n        options: g.options.filter(\n          (o) =>\n            o.label.toLowerCase().includes(term) ||\n            o.value.toLowerCase().includes(term)\n        ),\n      }))\n      .filter((g) => g.options.length > 0);\n  }, [groups, search, isAsyncSearch]);\n\n  const selectedOptions = React.useMemo(\n    () => allOptions.filter((o) => value.includes(o.value)),\n    [allOptions, value]\n  );\n\n  const hasResults = groups\n    ? (filteredGroups?.some((g) => g.options.length > 0) ?? false)\n    : filteredOptions.length > 0;\n\n  const trimmedSearch = search.trim();\n  const hasExactMatch = allOptions.some(\n    (o) => o.label.trim().toLowerCase() === trimmedSearch.toLowerCase()\n  );\n  const canCreate = !!onCreateOption && trimmedSearch.length > 0 && !hasExactMatch;\n\n  const handleCreate = async () => {\n    if (!onCreateOption || isCreating || !trimmedSearch) return;\n    setIsCreating(true);\n    try {\n      await onCreateOption(trimmedSearch);\n      setSearch(\"\");\n    } catch {\n      // Falha na criação: mantém o termo buscado para o usuário corrigir e tentar\n      // novamente. O caller é responsável por sinalizar o erro (ex: toast).\n    } finally {\n      setIsCreating(false);\n    }\n  };\n\n  const handleToggle = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onValueChange(value.filter((v) => v !== optionValue));\n    } else {\n      onValueChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveChip = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onValueChange(value.filter((v) => v !== optionValue));\n  };\n\n  const handleOpenChange = (next: boolean) => {\n    if (disabled) return;\n    setOpen(next);\n    if (!next) setSearch(\"\");\n  };\n\n  React.useEffect(() => {\n    if (open) onSearch?.(\"\");\n  }, [open]);\n\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setSearch(e.target.value);\n    onSearch?.(e.target.value);\n  };\n\n  const visibleChips = selectedOptions.slice(0, maxVisibleChips);\n  const overflowCount = selectedOptions.length - maxVisibleChips;\n\n  const renderOption = (option: MultiSelectOption) => {\n    const selected = value.includes(option.value);\n    return (\n      <button\n        key={option.value}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={selected}\n        disabled={option.disabled}\n        onClick={() => handleToggle(option.value)}\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n          \"transition-colors duration-100\",\n          option.disabled && \"pointer-events-none opacity-50\"\n        )}\n      >\n        <Check\n          className={cn(\n            \"h-4 w-4 shrink-0 transition-opacity duration-100\",\n            selected ? \"opacity-100\" : \"opacity-0\"\n          )}\n        />\n        <span className=\"flex-1 text-left truncate\">{option.label}</span>\n        {option.badge}\n      </button>\n    );\n  };\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger asChild>\n        <Button\n          ref={mergedTriggerRef}\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          disabled={disabled}\n          className={cn(\n            \"w-full min-h-10 h-auto justify-between font-normal px-3 py-2\",\n            !value.length && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <div className=\"flex flex-wrap items-center gap-1 flex-1 min-w-0\">\n            {value.length === 0 ? (\n              <span className=\"truncate text-sm\">\n                {loading ? \"Carregando...\" : placeholder}\n              </span>\n            ) : (\n              <>\n                {visibleChips.map((opt) => (\n                  <Badge\n                    key={opt.value}\n                    variant=\"secondary\"\n                    className=\"rounded-sm h-5 gap-0.5 pr-1 font-normal max-w-[160px]\"\n                  >\n                    <span className=\"truncate text-xs\">{opt.label}</span>\n                    <span\n                      role=\"button\"\n                      tabIndex={0}\n                      aria-label={`Remover ${opt.label}`}\n                      className=\"inline-flex items-center justify-center rounded-sm hover:bg-muted/80 cursor-pointer shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/60\"\n                      onMouseDown={(e) => e.preventDefault()}\n                      onClick={(e) => handleRemoveChip(opt.value, e)}\n                      onKeyDown={pressableKeyDown}\n                    >\n                      <X className=\"h-3 w-3\" />\n                    </span>\n                  </Badge>\n                ))}\n                {overflowCount > 0 && (\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"rounded-sm h-5 px-1.5 font-normal text-xs shrink-0\"\n                  >\n                    +{overflowCount}\n                  </Badge>\n                )}\n              </>\n            )}\n          </div>\n          <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className=\"p-0 overflow-hidden\"\n        style={{\n          width: triggerRef.current?.offsetWidth\n            ? `${triggerRef.current.offsetWidth}px`\n            : \"auto\",\n        }}\n        align=\"start\"\n        onOpenAutoFocus={(e) => {\n          // O Radix suprime o autofocus padrão quando este Popover está aninhado em um\n          // Dialog/Sheet (o focus-trap do pai disputa o foco com o do Popover). Focamos\n          // o input manualmente via ref assim que o conteúdo transiciona para visível.\n          e.preventDefault();\n          searchInputRef.current?.focus();\n        }}\n        onWheel={(e) => e.stopPropagation()}\n      >\n        {/* Busca */}\n        <div className=\"flex items-center border-b px-3\">\n          <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n          <Input\n            ref={searchInputRef}\n            placeholder={searchPlaceholder}\n            value={search}\n            onChange={handleSearchChange}\n            className=\"h-10 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-0\"\n          />\n        </div>\n\n        {/* Criar nova opção */}\n        {canCreate && (\n          <button\n            type=\"button\"\n            onClick={handleCreate}\n            disabled={isCreating}\n            className={cn(\n              \"flex w-full items-center gap-2 border-b px-3 py-2 text-sm text-primary\",\n              \"hover:bg-accent transition-colors duration-100\",\n              \"disabled:opacity-50 disabled:pointer-events-none\"\n            )}\n          >\n            {isCreating ? (\n              <Loader2 className=\"h-4 w-4 shrink-0 animate-spin\" />\n            ) : (\n              <Plus className=\"h-4 w-4 shrink-0\" />\n            )}\n            <span className=\"truncate\">\n              {isCreating\n                ? \"Criando...\"\n                : (createOptionLabel?.(trimmedSearch) ?? `Criar \"${trimmedSearch}\"`)}\n            </span>\n          </button>\n        )}\n\n        {/* Lista */}\n        <div ref={listCallbackRef} className=\"max-h-70 overflow-y-auto [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-primary/30 [&::-webkit-scrollbar-thumb:hover]:bg-primary/50\">\n          <div className=\"p-1\" role=\"listbox\" aria-multiselectable>\n            {loading ? (\n              <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n                Carregando...\n              </div>\n            ) : !hasResults ? (\n              <div className=\"py-6 text-center text-sm text-muted-foreground\">\n                {emptyMessage}\n              </div>\n            ) : groups ? (\n              filteredGroups?.map((group) => (\n                <div key={group.label}>\n                  {group.value ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => handleToggle(group.value!)}\n                      className={cn(\n                        \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5\",\n                        \"hover:bg-accent hover:text-accent-foreground transition-colors duration-100\",\n                        value.includes(group.value) && \"text-foreground\"\n                      )}\n                    >\n                      <Check\n                        className={cn(\n                          \"h-4 w-4 shrink-0 transition-opacity duration-100\",\n                          value.includes(group.value) ? \"opacity-100\" : \"opacity-0\"\n                        )}\n                      />\n                      <span className=\"text-xs font-semibold uppercase tracking-wide\">\n                        {group.label}\n                      </span>\n                    </button>\n                  ) : (\n                    <div className=\"px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide\">\n                      {group.label}\n                    </div>\n                  )}\n                  {group.options.map(renderOption)}\n                </div>\n              ))\n            ) : (\n              filteredOptions.map(renderOption)\n            )}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n});\nMultiSelect.displayName = \"MultiSelect\";\n\nexport default MultiSelect;\n"],"names":["MultiSelect","React","value","onValueChange","options","groups","placeholder","searchPlaceholder","emptyMessage","disabled","loading","maxVisibleChips","onSearch","onCreateOption","createOptionLabel","className","ariaLabel","ariaLabelledby","ref","open","setOpen","search","setSearch","isCreating","setIsCreating","triggerRef","searchInputRef","mergedTriggerRef","mergeRefs","listCallbackRef","el","e","allOptions","g","isAsyncSearch","filteredOptions","term","o","filteredGroups","selectedOptions","hasResults","trimmedSearch","hasExactMatch","canCreate","handleCreate","handleToggle","optionValue","v","handleRemoveChip","handleOpenChange","next","handleSearchChange","visibleChips","overflowCount","renderOption","option","selected","jsxs","cn","jsx","Check","Popover","PopoverTrigger","Button","Fragment","opt","Badge","pressableKeyDown","X","ChevronsUpDown","PopoverContent","_a","Search","Input","Loader2","Plus","group"],"mappings":"knBAsHaA,EAAcC,EAAM,WAG/B,CAAC,CACD,MAAAC,EACA,cAAAC,EACA,QAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,eACd,kBAAAC,EAAoB,YACpB,aAAAC,EAAe,8BACf,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,gBAAAC,EAAkB,EAClB,SAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,UAAAC,EACA,aAAcC,EACd,kBAAmBC,CACrB,EAAGC,IAAQ,OACT,KAAM,CAACC,EAAMC,CAAO,EAAInB,EAAM,SAAS,EAAK,EACtC,CAACoB,EAAQC,CAAS,EAAIrB,EAAM,SAAS,EAAE,EACvC,CAACsB,EAAYC,CAAa,EAAIvB,EAAM,SAAS,EAAK,EAClDwB,EAAaxB,EAAM,OAA0B,IAAI,EACjDyB,EAAiBzB,EAAM,OAAyB,IAAI,EACpD0B,EAAmB1B,EAAM,QAAQ,IAAM2B,EAAAA,UAAUH,EAAYP,CAAG,EAAG,CAACA,CAAG,CAAC,EAKxEW,EAAkB5B,EAAM,YAAa6B,GAA8B,CAClEA,GACLA,EAAG,iBAAiB,QAAUC,GAAMA,EAAE,kBAAmB,CAAE,QAAS,GAAM,CAC5E,EAAG,CAAA,CAAE,EAECC,EAAa/B,EAAM,QAAQ,IAC3BG,IACAC,EAIK,CAAC,GAHkCA,EACvC,OAAQ4B,GAAMA,EAAE,OAAS,IAAI,EAC7B,IAAKA,IAAO,CAAE,MAAOA,EAAE,MAAQ,MAAOA,EAAE,OAAQ,EAC1B,GAAG5B,EAAO,QAAS4B,GAAMA,EAAE,OAAO,CAAC,EAEvD,CAAA,GACN,CAAC7B,EAASC,CAAM,CAAC,EAEd6B,EAAgB,CAAC,CAACtB,EAElBuB,EAAkBlC,EAAM,QAAQ,IAAM,CAC1C,GAAI,CAACG,EAAS,MAAO,CAAA,EACrB,GAAI8B,EAAe,OAAO9B,EAC1B,MAAMgC,EAAOf,EAAO,YAAA,EAAc,KAAA,EAClC,OAAKe,EACEhC,EAAQ,OACZiC,GACCA,EAAE,MAAM,cAAc,SAASD,CAAI,GACnCC,EAAE,MAAM,YAAA,EAAc,SAASD,CAAI,CAAA,EAJrBhC,CAMpB,EAAG,CAACA,EAASiB,EAAQa,CAAa,CAAC,EAE7BI,EAAiBrC,EAAM,QAAQ,IAAM,CACzC,GAAI,CAACI,EAAQ,OACb,GAAI6B,EAAe,OAAO7B,EAC1B,MAAM+B,EAAOf,EAAO,YAAA,EAAc,KAAA,EAClC,OAAKe,EACE/B,EACJ,IAAK4B,IAAO,CACX,GAAGA,EACH,QAASA,EAAE,QAAQ,OAChBI,GACCA,EAAE,MAAM,cAAc,SAASD,CAAI,GACnCC,EAAE,MAAM,YAAA,EAAc,SAASD,CAAI,CAAA,CACvC,EACA,EACD,OAAQH,GAAMA,EAAE,QAAQ,OAAS,CAAC,EAVnB5B,CAWpB,EAAG,CAACA,EAAQgB,EAAQa,CAAa,CAAC,EAE5BK,EAAkBtC,EAAM,QAC5B,IAAM+B,EAAW,OAAQK,GAAMnC,EAAM,SAASmC,EAAE,KAAK,CAAC,EACtD,CAACL,EAAY9B,CAAK,CAAA,EAGdsC,EAAanC,GACdiC,GAAA,YAAAA,EAAgB,KAAML,GAAMA,EAAE,QAAQ,OAAS,KAAM,GACtDE,EAAgB,OAAS,EAEvBM,EAAgBpB,EAAO,KAAA,EACvBqB,EAAgBV,EAAW,KAC9BK,GAAMA,EAAE,MAAM,OAAO,YAAA,IAAkBI,EAAc,YAAA,CAAY,EAE9DE,EAAY,CAAC,CAAC9B,GAAkB4B,EAAc,OAAS,GAAK,CAACC,EAE7DE,EAAe,SAAY,CAC/B,GAAI,GAAC/B,GAAkBU,GAAc,CAACkB,GACtC,CAAAjB,EAAc,EAAI,EAClB,GAAI,CACF,MAAMX,EAAe4B,CAAa,EAClCnB,EAAU,EAAE,CACd,MAAQ,CAGR,QAAA,CACEE,EAAc,EAAK,CACrB,EACF,EAEMqB,EAAgBC,GAAwB,CACxC5C,EAAM,SAAS4C,CAAW,EAC5B3C,EAAcD,EAAM,OAAQ6C,GAAMA,IAAMD,CAAW,CAAC,EAEpD3C,EAAc,CAAC,GAAGD,EAAO4C,CAAW,CAAC,CAEzC,EAEME,EAAmB,CAACF,EAAqBf,IAAwB,CACrEA,EAAE,gBAAA,EACF5B,EAAcD,EAAM,OAAQ6C,GAAMA,IAAMD,CAAW,CAAC,CACtD,EAEMG,EAAoBC,GAAkB,CACtCzC,IACJW,EAAQ8B,CAAI,EACPA,GAAM5B,EAAU,EAAE,EACzB,EAEArB,EAAM,UAAU,IAAM,CAChBkB,eAAiB,IACvB,EAAG,CAACA,CAAI,CAAC,EAET,MAAMgC,EAAsB,GAA2C,CACrE7B,EAAU,EAAE,OAAO,KAAK,EACxBV,GAAA,MAAAA,EAAW,EAAE,OAAO,MACtB,EAEMwC,GAAeb,EAAgB,MAAM,EAAG5B,CAAe,EACvD0C,EAAgBd,EAAgB,OAAS5B,EAEzC2C,EAAgBC,GAA8B,CAClD,MAAMC,EAAWtD,EAAM,SAASqD,EAAO,KAAK,EAC5C,OACEE,EAAAA,KAAC,SAAA,CAEC,KAAK,SACL,KAAK,SACL,gBAAeD,EACf,SAAUD,EAAO,SACjB,QAAS,IAAMV,EAAaU,EAAO,KAAK,EACxC,UAAWG,EAAAA,GACT,gEACA,+CACA,kEACA,iCACAH,EAAO,UAAY,gCAAA,EAGrB,SAAA,CAAAI,EAAAA,IAACC,EAAAA,MAAA,CACC,UAAWF,EAAAA,GACT,mDACAF,EAAW,cAAgB,WAAA,CAC7B,CAAA,EAEFG,EAAAA,IAAC,OAAA,CAAK,UAAU,4BAA6B,WAAO,MAAM,EACzDJ,EAAO,KAAA,CAAA,EArBHA,EAAO,KAAA,CAwBlB,EAEA,OACEE,EAAAA,KAACI,EAAAA,QAAA,CAAQ,KAAA1C,EAAY,aAAc8B,EACjC,SAAA,CAAAU,EAAAA,IAACG,EAAAA,eAAA,CAAe,QAAO,GACrB,SAAAL,EAAAA,KAACM,GAAAA,OAAA,CACC,IAAKpC,EACL,KAAK,SACL,QAAQ,UACR,KAAK,WACL,gBAAeR,EACf,aAAYH,EACZ,kBAAiBC,EACjB,SAAAR,EACA,UAAWiD,EAAAA,GACT,+DACA,CAACxD,EAAM,QAAU,wBACjBa,CAAA,EAGF,SAAA,CAAA4C,MAAC,MAAA,CAAI,UAAU,mDACZ,SAAAzD,EAAM,SAAW,EAChByD,EAAAA,IAAC,OAAA,CAAK,UAAU,mBACb,SAAAjD,EAAU,gBAAkBJ,CAAA,CAC/B,EAEAmD,EAAAA,KAAAO,WAAA,CACG,SAAA,CAAAZ,GAAa,IAAKa,GACjBR,EAAAA,KAACS,EAAAA,MAAA,CAEC,QAAQ,YACR,UAAU,wDAEV,SAAA,CAAAP,EAAAA,IAAC,OAAA,CAAK,UAAU,mBAAoB,SAAAM,EAAI,MAAM,EAC9CN,EAAAA,IAAC,OAAA,CACC,KAAK,SACL,SAAU,EACV,aAAY,WAAWM,EAAI,KAAK,GAChC,UAAU,4JACV,YAAclC,GAAMA,EAAE,eAAA,EACtB,QAAUA,GAAMiB,EAAiBiB,EAAI,MAAOlC,CAAC,EAC7C,UAAWoC,EAAAA,iBAEX,SAAAR,EAAAA,IAACS,EAAAA,EAAA,CAAE,UAAU,SAAA,CAAU,CAAA,CAAA,CACzB,CAAA,EAfKH,EAAI,KAAA,CAiBZ,EACAZ,EAAgB,GACfI,EAAAA,KAACS,EAAAA,MAAA,CACC,QAAQ,YACR,UAAU,qDACX,SAAA,CAAA,IACGb,CAAA,CAAA,CAAA,CACJ,CAAA,CAEJ,CAAA,CAEJ,EACAM,EAAAA,IAACU,EAAAA,eAAA,CAAe,UAAU,kCAAA,CAAmC,CAAA,CAAA,CAAA,EAEjE,EAEAZ,EAAAA,KAACa,EAAAA,eAAA,CACC,UAAU,sBACV,MAAO,CACL,OAAOC,EAAA9C,EAAW,UAAX,MAAA8C,EAAoB,YACvB,GAAG9C,EAAW,QAAQ,WAAW,KACjC,MAAA,EAEN,MAAM,QACN,gBAAkB,GAAM,OAItB,EAAE,eAAA,GACF8C,EAAA7C,EAAe,UAAf,MAAA6C,EAAwB,OAC1B,EACA,QAAU,GAAM,EAAE,gBAAA,EAGlB,SAAA,CAAAd,EAAAA,KAAC,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAE,EAAAA,IAACa,EAAAA,OAAA,CAAO,UAAU,kCAAA,CAAmC,EACrDb,EAAAA,IAACc,GAAAA,MAAA,CACC,IAAK/C,EACL,YAAanB,EACb,MAAOc,EACP,SAAU8B,EACV,UAAU,qEAAA,CAAA,CACZ,EACF,EAGCR,GACCc,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,QAASb,EACT,SAAUrB,EACV,UAAWmC,EAAAA,GACT,yEACA,iDACA,kDAAA,EAGD,SAAA,CAAAnC,EACCoC,EAAAA,IAACe,WAAQ,UAAU,+BAAA,CAAgC,EAEnDf,EAAAA,IAACgB,EAAAA,KAAA,CAAK,UAAU,kBAAA,CAAmB,EAErChB,EAAAA,IAAC,OAAA,CAAK,UAAU,WACb,SAAApC,EACG,cACCT,GAAA,YAAAA,EAAoB2B,KAAkB,UAAUA,CAAa,GAAA,CACpE,CAAA,CAAA,CAAA,QAKH,MAAA,CAAI,IAAKZ,EAAiB,UAAU,0OACnC,eAAC,MAAA,CAAI,UAAU,MAAM,KAAK,UAAU,uBAAoB,GACrD,WACC4B,EAAAA,KAAC,MAAA,CAAI,UAAU,4EACb,SAAA,CAAAE,EAAAA,IAACe,EAAAA,QAAA,CAAQ,UAAU,sBAAA,CAAuB,EAAE,eAAA,EAE9C,EACGlC,EAIDnC,EACFiC,GAAA,YAAAA,EAAgB,IAAKsC,UAClB,MAAA,CACE,SAAA,CAAAA,EAAM,MACLnB,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,QAAS,IAAMZ,EAAa+B,EAAM,KAAM,EACxC,UAAWlB,EAAAA,GACT,wDACA,8EACAxD,EAAM,SAAS0E,EAAM,KAAK,GAAK,iBAAA,EAGjC,SAAA,CAAAjB,EAAAA,IAACC,EAAAA,MAAA,CACC,UAAWF,EAAAA,GACT,mDACAxD,EAAM,SAAS0E,EAAM,KAAK,EAAI,cAAgB,WAAA,CAChD,CAAA,EAEFjB,EAAAA,IAAC,OAAA,CAAK,UAAU,gDACb,WAAM,KAAA,CACT,CAAA,CAAA,CAAA,EAGFA,EAAAA,IAAC,MAAA,CAAI,UAAU,kFACZ,WAAM,MACT,EAEDiB,EAAM,QAAQ,IAAItB,CAAY,CAAA,GA1BvBsB,EAAM,KA2BhB,GAGFzC,EAAgB,IAAImB,CAAY,EAnChCK,EAAAA,IAAC,OAAI,UAAU,iDACZ,SAAAnD,CAAA,CACH,EAmCJ,CAAA,CACF,CAAA,CAAA,CAAA,CACF,EACF,CAEJ,CAAC,EACDR,EAAY,YAAc"}

package/dist/components/ui/forms/multi-select.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsxs as n, jsx as a, Fragment as te } from "react/jsx-runtime";
+import * as r from "react";
+import { X as ae, ChevronsUpDown as re, Search as ne, Loader2 as W, Plus as se, Check as $ } from "lucide-react";
+import { mergeRefs as le, pressableKeyDown as ie, cn as u } from "../utils.js";
+import { Button as oe } from "../primitives/button.js";
+import { Badge as A } from "../primitives/badge.js";
+import { Popover as ce, PopoverTrigger as de, PopoverContent as me } from "../overlays/popover.js";
+import { Input as ue } from "./input.js";
+const fe = r.forwardRef(({
+  value: s,
+  onValueChange: x,
+  options: i,
+  groups: l,
+  placeholder: F = "Selecione...",
+  searchPlaceholder: H = "Buscar...",
+  emptyMessage: K = "Nenhum resultado encontrado",
+  disabled: C = !1,
+  loading: k = !1,
+  maxVisibleChips: R = 2,
+  onSearch: o,
+  onCreateOption: v,
+  createOptionLabel: g,
+  className: O,
+  "aria-label": S,
+  "aria-labelledby": U
+}, M) => {
+  var T;
+  const [f, X] = r.useState(!1), [c, w] = r.useState(""), [h, P] = r.useState(!1), y = r.useRef(null), D = r.useRef(null), q = r.useMemo(() => le(y, M), [M]), z = r.useCallback((e) => {
+    e && e.addEventListener("wheel", (t) => t.stopPropagation(), { passive: !0 });
+  }, []), N = r.useMemo(() => i || (l ? [...l.filter((t) => t.value != null).map((t) => ({ value: t.value, label: t.label })), ...l.flatMap((t) => t.options)] : []), [i, l]), p = !!o, L = r.useMemo(() => {
+    if (!i) return [];
+    if (p) return i;
+    const e = c.toLowerCase().trim();
+    return e ? i.filter(
+      (t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)
+    ) : i;
+  }, [i, c, p]), d = r.useMemo(() => {
+    if (!l) return;
+    if (p) return l;
+    const e = c.toLowerCase().trim();
+    return e ? l.map((t) => ({
+      ...t,
+      options: t.options.filter(
+        (b) => b.label.toLowerCase().includes(e) || b.value.toLowerCase().includes(e)
+      )
+    })).filter((t) => t.options.length > 0) : l;
+  }, [l, c, p]), j = r.useMemo(
+    () => N.filter((e) => s.includes(e.value)),
+    [N, s]
+  ), J = l ? (d == null ? void 0 : d.some((e) => e.options.length > 0)) ?? !1 : L.length > 0, m = c.trim(), Q = N.some(
+    (e) => e.label.trim().toLowerCase() === m.toLowerCase()
+  ), Y = !!v && m.length > 0 && !Q, Z = async () => {
+    if (!(!v || h || !m)) {
+      P(!0);
+      try {
+        await v(m), w("");
+      } catch {
+      } finally {
+        P(!1);
+      }
+    }
+  }, I = (e) => {
+    s.includes(e) ? x(s.filter((t) => t !== e)) : x([...s, e]);
+  }, _ = (e, t) => {
+    t.stopPropagation(), x(s.filter((b) => b !== e));
+  }, G = (e) => {
+    C || (X(e), e || w(""));
+  };
+  r.useEffect(() => {
+    f && (o == null || o(""));
+  }, [f]);
+  const V = (e) => {
+    w(e.target.value), o == null || o(e.target.value);
+  }, ee = j.slice(0, R), B = j.length - R, E = (e) => {
+    const t = s.includes(e.value);
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": t,
+        disabled: e.disabled,
+        onClick: () => I(e.value),
+        className: u(
+          "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+          "transition-colors duration-100",
+          e.disabled && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ a(
+            $,
+            {
+              className: u(
+                "h-4 w-4 shrink-0 transition-opacity duration-100",
+                t ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "flex-1 text-left truncate", children: e.label }),
+          e.badge
+        ]
+      },
+      e.value
+    );
+  };
+  return /* @__PURE__ */ n(ce, { open: f, onOpenChange: G, children: [
+    /* @__PURE__ */ a(de, { asChild: !0, children: /* @__PURE__ */ n(
+      oe,
+      {
+        ref: q,
+        type: "button",
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": f,
+        "aria-label": S,
+        "aria-labelledby": U,
+        disabled: C,
+        className: u(
+          "w-full min-h-10 h-auto justify-between font-normal px-3 py-2",
+          !s.length && "text-muted-foreground",
+          O
+        ),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-1 flex-1 min-w-0", children: s.length === 0 ? /* @__PURE__ */ a("span", { className: "truncate text-sm", children: k ? "Carregando..." : F }) : /* @__PURE__ */ n(te, { children: [
+            ee.map((e) => /* @__PURE__ */ n(
+              A,
+              {
+                variant: "secondary",
+                className: "rounded-sm h-5 gap-0.5 pr-1 font-normal max-w-[160px]",
+                children: [
+                  /* @__PURE__ */ a("span", { className: "truncate text-xs", children: e.label }),
+                  /* @__PURE__ */ a(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-label": `Remover ${e.label}`,
+                      className: "inline-flex items-center justify-center rounded-sm hover:bg-muted/80 cursor-pointer shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                      onMouseDown: (t) => t.preventDefault(),
+                      onClick: (t) => _(e.value, t),
+                      onKeyDown: ie,
+                      children: /* @__PURE__ */ a(ae, { className: "h-3 w-3" })
+                    }
+                  )
+                ]
+              },
+              e.value
+            )),
+            B > 0 && /* @__PURE__ */ n(
+              A,
+              {
+                variant: "secondary",
+                className: "rounded-sm h-5 px-1.5 font-normal text-xs shrink-0",
+                children: [
+                  "+",
+                  B
+                ]
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ a(re, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      me,
+      {
+        className: "p-0 overflow-hidden",
+        style: {
+          width: (T = y.current) != null && T.offsetWidth ? `${y.current.offsetWidth}px` : "auto"
+        },
+        align: "start",
+        onOpenAutoFocus: (e) => {
+          var t;
+          e.preventDefault(), (t = D.current) == null || t.focus();
+        },
+        onWheel: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center border-b px-3", children: [
+            /* @__PURE__ */ a(ne, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+            /* @__PURE__ */ a(
+              ue,
+              {
+                ref: D,
+                placeholder: H,
+                value: c,
+                onChange: V,
+                className: "h-10 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-0"
+              }
+            )
+          ] }),
+          Y && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: Z,
+              disabled: h,
+              className: u(
+                "flex w-full items-center gap-2 border-b px-3 py-2 text-sm text-primary",
+                "hover:bg-accent transition-colors duration-100",
+                "disabled:opacity-50 disabled:pointer-events-none"
+              ),
+              children: [
+                h ? /* @__PURE__ */ a(W, { className: "h-4 w-4 shrink-0 animate-spin" }) : /* @__PURE__ */ a(se, { className: "h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ a("span", { className: "truncate", children: h ? "Criando..." : (g == null ? void 0 : g(m)) ?? `Criar "${m}"` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("div", { ref: z, className: "max-h-70 overflow-y-auto [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-primary/30 [&::-webkit-scrollbar-thumb:hover]:bg-primary/50", children: /* @__PURE__ */ a("div", { className: "p-1", role: "listbox", "aria-multiselectable": !0, children: k ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ a(W, { className: "h-4 w-4 animate-spin" }),
+            "Carregando..."
+          ] }) : J ? l ? d == null ? void 0 : d.map((e) => /* @__PURE__ */ n("div", { children: [
+            e.value ? /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                onClick: () => I(e.value),
+                className: u(
+                  "flex w-full items-center gap-2 rounded-sm px-2 py-1.5",
+                  "hover:bg-accent hover:text-accent-foreground transition-colors duration-100",
+                  s.includes(e.value) && "text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ a(
+                    $,
+                    {
+                      className: u(
+                        "h-4 w-4 shrink-0 transition-opacity duration-100",
+                        s.includes(e.value) ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ a("span", { className: "text-xs font-semibold uppercase tracking-wide", children: e.label })
+                ]
+              }
+            ) : /* @__PURE__ */ a("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: e.label }),
+            e.options.map(E)
+          ] }, e.label)) : L.map(E) : /* @__PURE__ */ a("div", { className: "py-6 text-center text-sm text-muted-foreground", children: K }) }) })
+        ]
+      }
+    )
+  ] });
+});
+fe.displayName = "MultiSelect";
+export {
+  fe as MultiSelect
+};
+//# sourceMappingURL=multi-select.js.map