@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/filters.js

@@ -0,0 +1,1041 @@
+import { jsxs as v, jsx as e, Fragment as ne } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as D } from "../../lib/utils.js";
+import { Button as Q } from "../fundamental/button.js";
+import { Input as ee } from "../fundamental/input.js";
+import { AutocompleteSearch as me } from "../fundamental/autocomplete-search.js";
+import { Icon as H } from "../fundamental/icon.js";
+import { Checkbox as oe } from "../fundamental/checkbox.js";
+import { RadioGroup as ve, RadioGroupItem as se } from "../fundamental/radio-group.js";
+import { Select as he, SelectTrigger as xe, SelectValue as be, SelectContent as fe, SelectItem as ge } from "../fundamental/select.js";
+import { MonthPicker as ye } from "../fundamental/month-picker.js";
+import { Calendar as Ne } from "../fundamental/calendar.js";
+import { Popover as le, PopoverTrigger as ie, PopoverContent as ce } from "../fundamental/popover.js";
+import { Separator as re } from "../fundamental/separator.js";
+import { Badge as te } from "../fundamental/badge.js";
+import { getPresetLabel as we, calculatePresetRange as de, formatDateRange as Ce } from "../../lib/date-utils.js";
+const Se = [
+  "this-month",
+  "last-month",
+  "this-quarter",
+  "last-quarter",
+  "this-year",
+  "last-year",
+  "custom"
+], ke = [
+  "this-week",
+  "last-week",
+  "last-30-days",
+  "last-90-days",
+  "this-month",
+  "last-month",
+  "custom"
+];
+function $e(x) {
+  let r = 0;
+  if (x.groups)
+    for (const s of x.groups)
+      for (const b of s.options)
+        r++, b.children && (r += b.children.length);
+  return x.options && (r = x.options.length), r;
+}
+const pe = /* @__PURE__ */ u.memo(function({ filter: r, value: s, onChange: b, onReset: g, autoFocusSearch: y = !0 }) {
+  const [k, A] = u.useState(""), f = u.useDeferredValue(k), [$, M] = u.useState(""), [w, R] = u.useState(""), [I, O] = u.useState(null), [T, L] = u.useState(null), [K, c] = u.useState(!1), [C, S] = u.useState((/* @__PURE__ */ new Date()).getFullYear()), h = u.useMemo(() => s ? Array.isArray(s) ? s.map(String) : [String(s)] : [], [s]);
+  u.useEffect(() => {
+    if (r.type === "number" && r.rangeMode) {
+      const n = s;
+      if (Array.isArray(n)) {
+        const [d, p] = n;
+        M(d === -1 / 0 ? "" : d?.toString() || ""), R(p === 1 / 0 ? "" : p?.toString() || "");
+      } else typeof n == "number" ? (M(n.toString()), R("")) : (M(""), R(""));
+      O(null), L(null);
+    }
+  }, [s, r.type, r.rangeMode]);
+  const F = u.useMemo(() => {
+    const n = r.showSearch ?? "auto";
+    if (n === !0) return !0;
+    if (n === !1) return !1;
+    const d = $e(r), p = r.searchThreshold ?? 8;
+    return d >= p;
+  }, [r]), B = u.useMemo(() => {
+    if (r.groups) {
+      if (!f) return r.groups;
+      const n = f.toLowerCase();
+      return r.groups.map((d) => ({
+        ...d,
+        options: d.options.filter(
+          (p) => p.label.toLowerCase().includes(n) || p.children?.some(
+            (m) => m.label.toLowerCase().includes(n)
+          )
+        )
+      })).filter((d) => d.options.length > 0);
+    }
+    if (r.options) {
+      const n = f ? r.options.filter(
+        (d) => d.label.toLowerCase().includes(f.toLowerCase())
+      ) : r.options;
+      return n.length > 0 ? [{ label: r.label, options: n }] : [];
+    }
+    return [];
+  }, [r.groups, r.options, r.label, f]), Y = (n) => {
+    if (r.type === "multiselect") {
+      const d = h.includes(n) ? h.filter((p) => p !== n) : [...h, n];
+      b(d.length > 0 ? d : void 0);
+    } else
+      b(n === h[0] ? void 0 : n);
+  }, J = (n) => {
+    if (r.type !== "multiselect") return;
+    const d = n.options.flatMap(
+      (m) => [m.value, ...m.children?.map((N) => N.value) || []]
+    ), p = h.filter((m) => !d.includes(m));
+    b(p.length > 0 ? p : void 0);
+  }, q = (n) => {
+    if (r.type !== "multiselect") return;
+    const d = n.options.flatMap(
+      (m) => [m.value, ...m.children?.map((N) => N.value) || []]
+    ), p = Array.from(/* @__PURE__ */ new Set([...h, ...d]));
+    b(p.length > 0 ? p : void 0);
+  }, X = (n) => {
+    if (r.type !== "multiselect") return;
+    const p = n.options.filter((P) => !k || P.label.toLowerCase().includes(k.toLowerCase())).flatMap((P) => {
+      const W = P.value, t = P.children?.filter(
+        (a) => !k || a.label.toLowerCase().includes(k.toLowerCase())
+      ).map((a) => a.value) || [];
+      return [W, ...t];
+    }), m = h.filter((P) => !p.includes(P)), N = p.filter((P) => !h.includes(P)), G = [...m, ...N];
+    b(G.length > 0 ? G : void 0);
+  }, _ = () => {
+    const n = $.trim(), d = w.trim();
+    if (O(null), L(null), n === "" && d === "") {
+      b(void 0);
+      return;
+    }
+    const p = n === "" ? -1 / 0 : parseFloat(n), m = d === "" ? 1 / 0 : parseFloat(d);
+    if (n !== "" && isNaN(p)) {
+      O("Invalid minimum value");
+      return;
+    }
+    if (d !== "" && isNaN(m)) {
+      L("Invalid maximum value");
+      return;
+    }
+    if (p !== -1 / 0 && m !== 1 / 0 && p > m) {
+      O("Minimum must be less than maximum"), L("Maximum must be more than minimum");
+      return;
+    }
+    b([p, m]);
+  }, j = r.dateConfig?.granularity || "month", U = () => r.dateConfig?.presets ? r.dateConfig.presets : j === "day" ? ke : Se, Z = () => {
+    if (K)
+      return "custom";
+    const n = s;
+    if (!n || !Array.isArray(n))
+      return U().includes("all-time") ? "all-time" : "";
+    for (const d of U()) {
+      if (d === "custom") continue;
+      const p = de(d);
+      if (p && p[0].getTime() === n[0].getTime() && p[1].getTime() === n[1].getTime())
+        return d;
+    }
+    return "custom";
+  }, ae = (n) => {
+    if (n === "custom") {
+      c(!0);
+      return;
+    }
+    c(!1);
+    const d = de(n);
+    b(d);
+  };
+  return /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-3xl)]", children: [
+    F && /* @__PURE__ */ v("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        H,
+        {
+          name: "search",
+          className: "absolute left-[var(--space-m)] top-1/2 -translate-y-1/2 h-[var(--size-xs)] w-[var(--size-xs)] text-[var(--color-text-tertiary)] pointer-events-none"
+        }
+      ),
+      /* @__PURE__ */ e(
+        ee,
+        {
+          type: "text",
+          size: "l",
+          placeholder: r.searchPlaceholder || `Search for a ${r.label.toLowerCase()}`,
+          value: k,
+          onChange: (n) => A(n.target.value),
+          className: "pl-[calc(var(--space-m)+var(--size-xs)+var(--space-s))]",
+          autoFocus: y
+        }
+      )
+    ] }),
+    r.type === "number" && r.rangeMode && /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+      /* @__PURE__ */ e("div", { className: "text-body-medium-sm text-[var(--color-text-tertiary)]", children: r.label }),
+      /* @__PURE__ */ e("div", { className: "h-px w-full mb-[var(--space-s)]", children: /* @__PURE__ */ e("div", { "aria-hidden": "true", className: "border-[var(--color-border-primary-subtle)] border-[0px_0px_1px] border-solid h-px" }) }),
+      /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+        /* @__PURE__ */ e("label", { className: "text-label-md text-[var(--color-text-primary)]", children: "At least..." }),
+        /* @__PURE__ */ v("div", { className: "relative", children: [
+          r.numberConfig?.prefix && /* @__PURE__ */ e("span", { className: "absolute left-[var(--space-m)] top-1/2 -translate-y-1/2 text-body-md text-[var(--color-text-tertiary)] pointer-events-none", children: r.numberConfig.prefix }),
+          /* @__PURE__ */ e(
+            ee,
+            {
+              type: "text",
+              inputMode: "numeric",
+              size: "l",
+              variant: I ? "error" : "default",
+              value: $,
+              onChange: (n) => {
+                M(n.target.value), O(null);
+              },
+              onBlur: _,
+              onKeyDown: (n) => {
+                n.key === "Enter" && _();
+              },
+              placeholder: r.numberConfig?.min?.toString() || "0.00",
+              className: D(
+                r.numberConfig?.prefix && "pl-[calc(var(--space-l)+var(--space-m))]",
+                r.numberConfig?.suffix && "pr-[calc(var(--space-l)+var(--space-m))]"
+              )
+            }
+          ),
+          r.numberConfig?.suffix && /* @__PURE__ */ e("span", { className: "absolute right-[var(--space-m)] top-1/2 -translate-y-1/2 text-body-md text-[var(--color-text-tertiary)] pointer-events-none", children: r.numberConfig.suffix })
+        ] }),
+        I && /* @__PURE__ */ e("span", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: I })
+      ] }),
+      /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+        /* @__PURE__ */ e("label", { className: "text-label-md text-[var(--color-text-primary)]", children: "No more than..." }),
+        /* @__PURE__ */ v("div", { className: "relative", children: [
+          r.numberConfig?.prefix && /* @__PURE__ */ e("span", { className: "absolute left-[var(--space-m)] top-1/2 -translate-y-1/2 text-body-md text-[var(--color-text-tertiary)] pointer-events-none", children: r.numberConfig.prefix }),
+          /* @__PURE__ */ e(
+            ee,
+            {
+              type: "text",
+              inputMode: "numeric",
+              size: "l",
+              variant: T ? "error" : "default",
+              value: w,
+              onChange: (n) => {
+                R(n.target.value), L(null);
+              },
+              onBlur: _,
+              onKeyDown: (n) => {
+                n.key === "Enter" && _();
+              },
+              placeholder: r.numberConfig?.max?.toString() || "0.00",
+              className: D(
+                r.numberConfig?.prefix && "pl-[calc(var(--space-l)+var(--space-m))]",
+                r.numberConfig?.suffix && "pr-[calc(var(--space-l)+var(--space-m))]"
+              )
+            }
+          ),
+          r.numberConfig?.suffix && /* @__PURE__ */ e("span", { className: "absolute right-[var(--space-m)] top-1/2 -translate-y-1/2 text-body-md text-[var(--color-text-tertiary)] pointer-events-none", children: r.numberConfig.suffix })
+        ] }),
+        T && /* @__PURE__ */ e("span", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: T })
+      ] }),
+      g && ($ !== "" || w !== "") && /* @__PURE__ */ e(
+        Q,
+        {
+          variant: "default",
+          onClick: () => {
+            M(""), R(""), O(null), L(null), g();
+          },
+          className: "self-start",
+          children: /* @__PURE__ */ e("span", { className: "text-body-medium-sm", children: "Reset" })
+        }
+      )
+    ] }),
+    r.type === "date" && r.rangeMode && /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+      /* @__PURE__ */ e("div", { className: "text-body-medium-sm text-[var(--color-text-tertiary)]", children: r.label }),
+      /* @__PURE__ */ e("div", { className: "h-px w-full mb-[var(--space-s)]", children: /* @__PURE__ */ e("div", { "aria-hidden": "true", className: "border-[var(--color-border-primary-subtle)] border-[0px_0px_1px] border-solid h-px" }) }),
+      /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+        /* @__PURE__ */ e("label", { className: "text-label-md text-[var(--color-text-primary)]", children: "Date range" }),
+        /* @__PURE__ */ v(he, { value: Z(), onValueChange: ae, children: [
+          /* @__PURE__ */ e(xe, { size: "l", children: /* @__PURE__ */ e(be, { placeholder: "Select date range..." }) }),
+          /* @__PURE__ */ e(fe, { children: U().map((n) => /* @__PURE__ */ e(ge, { value: n, children: we(n) }, n)) })
+        ] })
+      ] }),
+      Z() === "custom" && /* @__PURE__ */ v(ne, { children: [
+        /* @__PURE__ */ e("p", { className: "text-body-sm text-[var(--color-text-secondary)]", children: j === "day" ? "Select start and end dates for custom range" : "Select start and end months for custom range" }),
+        j === "day" && /* @__PURE__ */ e(
+          Ne,
+          {
+            mode: "range",
+            selected: s && Array.isArray(s) && s.length === 2 ? { from: s[0], to: s[1] } : void 0,
+            onSelect: (n) => {
+              if (n?.from && n?.to) {
+                const d = new Date(n.from);
+                d.setHours(0, 0, 0, 0);
+                const p = new Date(n.to);
+                p.setHours(23, 59, 59, 999), b([d, p]), c(!1);
+              }
+            },
+            numberOfMonths: 2,
+            disabled: r.dateConfig?.minDate || r.dateConfig?.maxDate ? (n) => !!(r.dateConfig?.minDate && n < r.dateConfig.minDate || r.dateConfig?.maxDate && n > r.dateConfig.maxDate) : void 0
+          }
+        ),
+        j === "month" && /* @__PURE__ */ e(
+          ye,
+          {
+            value: s,
+            onChange: (n) => {
+              b(n), c(!1);
+            },
+            mode: "range",
+            yearCount: 2,
+            size: "small",
+            enableNavigation: !0,
+            onYearNavigate: (n) => S(n),
+            minDate: r.dateConfig?.minDate,
+            maxDate: r.dateConfig?.maxDate
+          }
+        )
+      ] })
+    ] }),
+    B.map((n, d) => {
+      const p = `filter-group-${d}-${n.label.replace(/\s+/g, "-").toLowerCase()}`;
+      return /* @__PURE__ */ v(
+        "div",
+        {
+          role: "group",
+          "aria-labelledby": p,
+          className: "flex flex-col gap-[var(--space-s)]",
+          children: [
+            /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-s)] items-start justify-start w-full", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  id: p,
+                  className: "flex-1 text-body-medium-sm text-[var(--color-text-tertiary)]",
+                  children: n.label
+                }
+              ),
+              g && r.type === "multiselect" && /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-xs)] items-center text-body-medium-sm text-[var(--color-text-brand-bold)]", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => q(n),
+                    "aria-label": `Select all ${n.label} options`,
+                    className: "hover:text-[var(--color-text-brand-bold-hovered)] hover:underline",
+                    children: "All"
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "text-[var(--color-text-tertiary)]", "aria-hidden": "true", children: "•" }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => X(n),
+                    "aria-label": `Inverse selection in ${n.label}`,
+                    className: "hover:text-[var(--color-text-brand-bold-hovered)] hover:underline",
+                    children: "Inverse"
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "text-[var(--color-text-tertiary)]", "aria-hidden": "true", children: "•" }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => J(n),
+                    "aria-label": `Clear all ${n.label} selections`,
+                    className: "hover:text-[var(--color-text-brand-bold-hovered)] hover:underline",
+                    children: "None"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "h-px w-full", children: /* @__PURE__ */ e("div", { "aria-hidden": "true", className: "border-[var(--color-border-primary-subtle)] border-[0px_0px_1px] border-solid h-px" }) }),
+            r.type === "multiselect" ? /* @__PURE__ */ e("div", { className: "flex flex-col gap-[var(--space-s)]", children: n.options.map((m) => /* @__PURE__ */ v(u.Fragment, { children: [
+              /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-s)] h-[20px] items-center", children: [
+                /* @__PURE__ */ e(
+                  oe,
+                  {
+                    id: `checkbox-${r.id}-${m.value}`,
+                    checked: h.includes(m.value),
+                    onCheckedChange: () => Y(m.value)
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "label",
+                  {
+                    htmlFor: `checkbox-${r.id}-${m.value}`,
+                    className: "flex-1 text-body-md text-[var(--color-text-primary)] cursor-pointer",
+                    children: m.label
+                  }
+                )
+              ] }),
+              m.children && m.children.map((N) => /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-s)] h-[20px] items-center pl-[var(--space-3xl)]", children: [
+                /* @__PURE__ */ e(
+                  oe,
+                  {
+                    id: `checkbox-${r.id}-${N.value}`,
+                    checked: h.includes(N.value),
+                    onCheckedChange: () => Y(N.value)
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "label",
+                  {
+                    htmlFor: `checkbox-${r.id}-${N.value}`,
+                    className: "flex-1 text-body-md text-[var(--color-text-primary)] cursor-pointer",
+                    children: N.label
+                  }
+                )
+              ] }, N.value))
+            ] }, m.value)) }) : /* @__PURE__ */ e(ve, { value: h[0] || "", onValueChange: Y, "aria-label": n.label, children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-[var(--space-s)]", children: n.options.map((m) => /* @__PURE__ */ v(u.Fragment, { children: [
+              /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-s)] h-[20px] items-center", children: [
+                /* @__PURE__ */ e(se, { id: `radio-${r.id}-${m.value}`, value: m.value }),
+                /* @__PURE__ */ e(
+                  "label",
+                  {
+                    htmlFor: `radio-${r.id}-${m.value}`,
+                    className: "flex-1 text-body-md text-[var(--color-text-primary)] cursor-pointer",
+                    children: m.label
+                  }
+                )
+              ] }),
+              m.children && m.children.map((N) => /* @__PURE__ */ v("div", { className: "flex gap-[var(--space-s)] h-[20px] items-center pl-[var(--space-3xl)]", children: [
+                /* @__PURE__ */ e(se, { id: `radio-${r.id}-${N.value}`, value: N.value }),
+                /* @__PURE__ */ e(
+                  "label",
+                  {
+                    htmlFor: `radio-${r.id}-${N.value}`,
+                    className: "flex-1 text-body-md text-[var(--color-text-primary)] cursor-pointer",
+                    children: N.label
+                  }
+                )
+              ] }, N.value))
+            ] }, m.value)) }) })
+          ]
+        },
+        n.label
+      );
+    })
+  ] });
+}), ue = /* @__PURE__ */ u.memo(function({ filter: r, isSelected: s, isPinned: b, valueCount: g, onSelect: y, onTogglePin: k, onPrefetch: A }) {
+  const f = r.icon, [$, M] = u.useState(!1);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      id: `filter-option-${r.id}`,
+      role: "option",
+      "aria-selected": s,
+      "aria-label": `${r.label}${g ? `, ${g} selected` : ""}`,
+      tabIndex: -1,
+      onKeyDown: (w) => {
+        (w.key === "Enter" || w.key === " ") && (w.preventDefault(), y());
+      },
+      onMouseEnter: () => {
+        M(!0), A?.();
+      },
+      onMouseLeave: () => M(!1),
+      className: D(
+        "group/item box-border flex gap-[var(--space-m)] h-[var(--size-m)] items-center justify-start px-[var(--space-l)] py-[var(--space-s)] relative rounded-m shrink-0 w-full cursor-pointer transition-colors",
+        "hover:bg-[var(--color-background-neutral-hovered)]",
+        s && "bg-[var(--color-background-blue-subtle-selected)] hover:bg-[var(--color-background-blue-subtle-selected-hovered)] group-focus-visible/listbox:ring-2 group-focus-visible/listbox:ring-[var(--ring-color)] group-focus-visible/listbox:ring-inset"
+      ),
+      onClick: y,
+      children: [
+        /* @__PURE__ */ v("div", { className: "flex-1 flex gap-[var(--space-s)] items-center justify-start min-w-0", children: [
+          /* @__PURE__ */ e(f, { className: D(
+            "h-[var(--size-2xs)] w-[var(--size-2xs)] shrink-0",
+            s ? "text-[var(--color-text-brand-bold)]" : "text-[var(--color-text-primary)]"
+          ) }),
+          /* @__PURE__ */ e("div", { className: D(
+            "truncate [&]:text-label-md",
+            s ? "text-[var(--color-text-brand-bold)]" : "text-[var(--color-text-primary)]"
+          ), children: r.label }),
+          g !== void 0 && g > 0 && /* @__PURE__ */ e(
+            te,
+            {
+              size: "s",
+              intent: s ? "brand" : "neutral",
+              appearance: s || $ ? "bold" : "subtle",
+              children: g
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-[var(--space-s)] shrink-0", children: /* @__PURE__ */ e(
+          Q,
+          {
+            variant: "ghost",
+            size: "s",
+            tabIndex: -1,
+            "aria-label": b ? `Unpin ${r.label} filter` : `Pin ${r.label} filter`,
+            "aria-pressed": b,
+            onClick: (w) => {
+              w.stopPropagation(), k();
+            },
+            className: D(
+              "group/pin h-auto w-auto p-[var(--space-xs)] transition-opacity",
+              b ? "opacity-100" : "opacity-0 group-hover/item:opacity-100"
+            ),
+            children: b ? /* @__PURE__ */ v(ne, { children: [
+              /* @__PURE__ */ e(
+                H,
+                {
+                  name: "pin",
+                  "aria-hidden": "true",
+                  className: D(
+                    "h-[12px] w-[12px] group-hover/pin:hidden",
+                    s ? "text-[var(--color-text-brand-bold)]" : "text-[var(--color-text-primary)]"
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                H,
+                {
+                  name: "pin-off",
+                  "aria-hidden": "true",
+                  className: D(
+                    "h-[12px] w-[12px] hidden group-hover/pin:block",
+                    s ? "text-[var(--color-text-brand-bold)]" : "text-[var(--color-text-primary)]"
+                  )
+                }
+              )
+            ] }) : /* @__PURE__ */ e(
+              H,
+              {
+                name: "pin",
+                "aria-hidden": "true",
+                className: D(
+                  "h-[12px] w-[12px]",
+                  s ? "text-[var(--color-text-brand-bold)]" : "text-[var(--color-text-primary)]"
+                )
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+});
+function Ie({ placeholder: x = "Search for keyword...", onAddSearchTerm: r }) {
+  const [s, b] = u.useState("");
+  return /* @__PURE__ */ e("div", { className: "min-w-[200px] w-[280px]", children: /* @__PURE__ */ e(
+    ee,
+    {
+      type: "search",
+      "aria-label": "Search filters by keyword",
+      placeholder: x,
+      value: s,
+      onChange: (y) => b(y.target.value),
+      onKeyDown: (y) => {
+        y.key === "Enter" && s.trim() && (y.preventDefault(), r(s.trim()), b(""));
+      },
+      size: "m"
+    }
+  ) });
+}
+function Ae({
+  placeholder: x = "Search for keyword...",
+  onAddSearchTerm: r,
+  suggestions: s,
+  minCharacters: b
+}) {
+  const [g, y] = u.useState("");
+  return /* @__PURE__ */ e("div", { className: "min-w-[200px] w-[280px]", children: /* @__PURE__ */ e(
+    me,
+    {
+      value: g,
+      onValueChange: y,
+      onSelect: (A, f) => {
+        r(A, f), y("");
+      },
+      suggestions: s,
+      placeholder: x,
+      minCharacters: b
+    }
+  ) });
+}
+function ze({
+  filters: x,
+  pinnedFilters: r,
+  activeFilters: s,
+  onPinnedFiltersChange: b,
+  onFilterChange: g,
+  sidebarWidth: y = 240
+}) {
+  const [k, A] = u.useState(x[0]?.id), [f, $] = u.useState("mouse"), M = u.useRef(null), w = u.useMemo(() => x.map((c) => c.id), [x]), R = (c) => {
+    const C = w.indexOf(k);
+    let S = C;
+    switch (c.key) {
+      case "ArrowDown":
+        c.preventDefault(), S = Math.min(C + 1, w.length - 1);
+        break;
+      case "ArrowUp":
+        c.preventDefault(), S = Math.max(C - 1, 0);
+        break;
+      case "Home":
+        c.preventDefault(), S = 0;
+        break;
+      case "End":
+        c.preventDefault(), S = w.length - 1;
+        break;
+      default:
+        return;
+    }
+    S !== C && ($("keyboard"), A(w[S]));
+  }, I = x.find((c) => c.id === k), O = u.useCallback((c) => {
+    I && g(I.id, c);
+  }, [I?.id, g]), T = u.useCallback(() => {
+    I && g(I.id, void 0);
+  }, [I?.id, g]), L = (c) => {
+    const C = r.includes(c) ? r.filter((S) => S !== c) : [...r, c];
+    b(C);
+  }, K = u.useMemo(() => {
+    const c = {}, C = [], S = [];
+    return x.forEach((h) => {
+      h.group ? (c[h.group] || (c[h.group] = [], S.push(h.group)), c[h.group].push(h)) : C.push(h);
+    }), { grouped: c, ungrouped: C, groupOrder: S };
+  }, [x]);
+  return /* @__PURE__ */ e("div", { className: "bg-[var(--color-surface-primary)] relative rounded-m max-h-[480px] flex flex-col", children: /* @__PURE__ */ v("div", { className: "flex items-stretch justify-start min-h-0 overflow-hidden rounded-m flex-1", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "bg-[var(--color-background-neutral-default)] relative shrink-0 border-r border-[var(--color-border-primary-subtle)] flex flex-col",
+        style: { width: typeof y == "number" ? `${y}px` : y },
+        children: /* @__PURE__ */ v(
+          "div",
+          {
+            ref: M,
+            role: "listbox",
+            "aria-label": "Filter categories",
+            "aria-orientation": "vertical",
+            "aria-activedescendant": k ? `filter-option-${k}` : void 0,
+            tabIndex: 0,
+            onKeyDown: R,
+            className: "group/listbox box-border flex flex-col gap-[var(--space-s)] p-[var(--space-s)] overflow-y-auto focus-visible:outline-none",
+            children: [
+              K.ungrouped.map((c) => {
+                const C = s[c.id], S = Array.isArray(C) ? C.length : C != null ? 1 : 0;
+                return /* @__PURE__ */ e(
+                  ue,
+                  {
+                    filter: c,
+                    isSelected: c.id === k,
+                    isPinned: r.includes(c.id),
+                    valueCount: S,
+                    onSelect: () => {
+                      $("mouse"), A(c.id);
+                    },
+                    onTogglePin: () => L(c.id)
+                  },
+                  c.id
+                );
+              }),
+              K.groupOrder.map((c, C) => {
+                const S = K.grouped[c];
+                return /* @__PURE__ */ v("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+                  /* @__PURE__ */ e("div", { className: D(
+                    "px-[var(--space-m)] pb-[var(--space-xs)]",
+                    C === 0 && K.ungrouped.length === 0 ? "pt-0" : "pt-[var(--space-m)]"
+                  ), children: /* @__PURE__ */ e("div", { className: "text-caption-sm text-[var(--color-text-tertiary)] tracking-[0.1px]", children: c }) }),
+                  S.map((h) => {
+                    const F = s[h.id], B = Array.isArray(F) ? F.length : F != null ? 1 : 0;
+                    return /* @__PURE__ */ e(
+                      ue,
+                      {
+                        filter: h,
+                        isSelected: h.id === k,
+                        isPinned: r.includes(h.id),
+                        valueCount: B,
+                        onSelect: () => {
+                          $("mouse"), A(h.id);
+                        },
+                        onTogglePin: () => L(h.id)
+                      },
+                      h.id
+                    );
+                  })
+                ] }, c);
+              })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "flex-1 box-border p-[var(--space-l)] overflow-y-auto", children: I && /* @__PURE__ */ e(
+      pe,
+      {
+        filter: I,
+        value: s[I.id],
+        onChange: O,
+        onReset: T,
+        autoFocusSearch: f === "mouse"
+      }
+    ) })
+  ] }) });
+}
+function Ye({
+  filters: x,
+  pinnedFilters: r,
+  activeFilters: s,
+  onPinnedFiltersChange: b,
+  onFilterChange: g,
+  onFilterClear: y,
+  onFilterReset: k,
+  enableGlobalSearch: A = !1,
+  globalSearchTerms: f = [],
+  onGlobalSearchChange: $,
+  globalSearchPlaceholder: M,
+  enableAutocomplete: w = !1,
+  autocompleteMinCharacters: R = 2,
+  hideReset: I = !1,
+  hideFiltersButton: O = !1,
+  actionButtons: T
+}) {
+  const [L, K] = u.useState(!1), [c, C] = u.useState(null), [S, h] = u.useState(""), F = u.useRef(s), B = u.useRef(f), Y = u.useRef({}), J = u.useCallback((t, a) => {
+    const o = c;
+    C(t ? a : null), !t && o === a && setTimeout(() => {
+      Y.current[a]?.focus();
+    }, 0);
+  }, [c]);
+  u.useEffect(() => {
+    const t = F.current, a = B.current, o = Object.keys(s).filter(
+      (E) => s[E] !== void 0 && s[E] !== null && (!Array.isArray(s[E]) || s[E].length > 0)
+    ).length, i = Object.keys(t).filter(
+      (E) => t[E] !== void 0 && t[E] !== null && (!Array.isArray(t[E]) || t[E].length > 0)
+    ).length, l = f.length, V = a.length;
+    let z = "";
+    if (o !== i && (o > i ? z = "Filter applied." : o < i && (z = "Filter removed.")), l !== V && (l > V ? z = z ? `${z} Search term added.` : "Search term added." : l < V && (z = z ? `${z} Search term removed.` : "Search term removed.")), z) {
+      const E = o + l;
+      E === 0 ? z = "All filters cleared." : z = `${z} ${E} active filter${E !== 1 ? "s" : ""}.`, h(z);
+    }
+    F.current = s, B.current = f;
+  }, [s, f]);
+  const q = !O && x.length > 0, X = Object.keys(s).some(
+    (t) => s[t] !== void 0 && s[t] !== null
+  ), _ = f.length > 0, j = Object.keys(s).filter(
+    (t) => {
+      const a = s[t];
+      return a != null && (!Array.isArray(a) || a.length > 0);
+    }
+  ).length, U = (t, a) => {
+    if (!t.groups) return a;
+    for (const o of t.groups)
+      for (const i of o.options) {
+        if (i.value === a) return i.label;
+        if (i.children) {
+          const l = i.children.find((V) => V.value === a);
+          if (l) return l.label;
+        }
+      }
+    return a;
+  }, Z = (t, a, o) => {
+    const i = o?.prefix || "", l = o?.suffix || "";
+    return t === -1 / 0 ? `≤ ${i}${a}${l}` : a === 1 / 0 ? `≥ ${i}${t}${l}` : `${i}${t}${l} - ${i}${a}${l}`;
+  }, ae = (t) => {
+    const a = s[t.id];
+    if (!a || Array.isArray(a) && a.length === 0)
+      return { type: "empty", icon: t.icon, content: t.label };
+    if (t.type === "number" && t.rangeMode && Array.isArray(a) && a.length === 2) {
+      const [o, i] = a, l = t.formatValue?.(
+        [o.toString(), i.toString()],
+        2
+      ) ?? Z(o, i, t.numberConfig);
+      return { type: "values", icon: t.icon, content: l };
+    }
+    if (t.type === "date" && t.rangeMode && Array.isArray(a) && a.length === 2) {
+      const [o, i] = a, l = t.formatValue?.(
+        [o.toISOString(), i.toISOString()],
+        2
+      ) ?? Ce(o, i);
+      return { type: "values", icon: t.icon, content: l };
+    }
+    if (Array.isArray(a))
+      if (a.length <= 3) {
+        const o = a.map(String), i = t.formatValue?.(o, o.length) ?? o.map((l) => U(t, l)).join(", ");
+        return { type: "values", icon: t.icon, content: i };
+      } else
+        return {
+          type: "count",
+          icon: t.icon,
+          label: t.label,
+          count: a.length
+        };
+    return { type: "values", icon: t.icon, content: U(t, String(a)) };
+  }, n = x.filter((t) => r.includes(t.id)), d = u.useMemo(() => {
+    const t = [];
+    for (const a of x) {
+      const o = (i) => {
+        t.push({
+          normalizedLabel: i.toLowerCase(),
+          filterId: a.id,
+          icon: a.icon
+        });
+      };
+      if (a.groups)
+        for (const i of a.groups)
+          for (const l of i.options)
+            o(l.label), l.children?.forEach((V) => o(V.label));
+      a.options && a.options.forEach((i) => {
+        o(i.label), i.children?.forEach((l) => o(l.label));
+      });
+    }
+    return t;
+  }, [x]), p = u.useCallback((t) => {
+    if (!t) return null;
+    const a = t.toLowerCase();
+    for (const o of d)
+      if (o.normalizedLabel.includes(a))
+        return { filterId: o.filterId, icon: o.icon };
+    return null;
+  }, [d]), m = u.useMemo(() => f.filter((a) => a && typeof a == "string").map((a) => {
+    if (a.includes("|")) {
+      const [i, l] = a.split("|"), V = x.find((z) => z.label === l);
+      return {
+        value: a,
+        // Keep encoded term for removal
+        matchedFilter: V ? {
+          filterId: V.id,
+          icon: V.icon
+        } : void 0
+      };
+    }
+    const o = p(a);
+    return {
+      value: a,
+      matchedFilter: o ? {
+        filterId: o.filterId,
+        icon: o.icon
+      } : void 0
+    };
+  }), [f, x, p]), N = u.useMemo(() => {
+    if (!w || !A)
+      return [];
+    const t = [];
+    return x.forEach((a) => {
+      a.groups ? a.groups.forEach((o) => {
+        o.options.forEach((i) => {
+          i.label && i.value && t.push({
+            label: i.label,
+            value: i.value,
+            filterLabel: a.label,
+            filterIcon: a.icon
+          }), i.children && i.children.forEach((l) => {
+            l.label && l.value && t.push({
+              label: l.label,
+              value: l.value,
+              filterLabel: a.label,
+              filterIcon: a.icon
+            });
+          });
+        });
+      }) : a.options && a.options.forEach((o) => {
+        o.label && o.value && t.push({
+          label: o.label,
+          value: o.value,
+          filterLabel: a.label,
+          filterIcon: a.icon
+        }), o.children && o.children.forEach((i) => {
+          i.label && i.value && t.push({
+            label: i.label,
+            value: i.value,
+            filterLabel: a.label,
+            filterIcon: a.icon
+          });
+        });
+      });
+    }), t.sort((a, o) => {
+      const i = a.label.localeCompare(o.label);
+      return i !== 0 ? i : a.filterLabel.localeCompare(o.filterLabel);
+    });
+  }, [x, w, A]), G = (t, a) => {
+    if (!$) return;
+    const o = a ? `${t}|${a}` : t;
+    f.includes(o) || $([...f, o]);
+  }, P = (t) => {
+    $ && $(f.filter((a) => a !== t));
+  }, W = () => {
+    k(), $ && _ && $([]);
+  };
+  return /* @__PURE__ */ v("div", { className: "flex gap-[3px] items-center min-w-0", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "sr-only",
+        children: S
+      }
+    ),
+    q && /* @__PURE__ */ v(le, { open: L, onOpenChange: K, children: [
+      /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ v(
+        Q,
+        {
+          className: "h-[var(--size-m)] gap-[var(--space-xs)]",
+          "aria-label": `Filters${j > 0 ? `, ${j} active` : ""}`,
+          "aria-expanded": L,
+          "aria-haspopup": "dialog",
+          children: [
+            /* @__PURE__ */ e(H, { name: "list-filter", className: "h-[var(--size-2xs)] w-[var(--size-2xs)]", "aria-hidden": "true" }),
+            /* @__PURE__ */ e("span", { className: "text-label-md", children: "Filters" }),
+            j > 0 && /* @__PURE__ */ e(te, { size: "s", intent: "neutral", appearance: "subtle", "aria-hidden": "true", children: j })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        ce,
+        {
+          className: "w-[660px] p-0",
+          align: "start",
+          children: /* @__PURE__ */ e(
+            ze,
+            {
+              filters: x,
+              pinnedFilters: r,
+              activeFilters: s,
+              onPinnedFiltersChange: b,
+              onFilterChange: g
+            }
+          )
+        }
+      )
+    ] }),
+    q && n.length > 0 && /* @__PURE__ */ e(re, { type: "dot", layout: "horizontal" }),
+    n.length > 0 && /* @__PURE__ */ e("div", { className: "min-w-0 flex gap-[7px] overflow-x-auto scrollbar-hide p-1", children: n.map((t) => {
+      const a = ae(t), o = a.type !== "empty", i = a.icon;
+      return /* @__PURE__ */ v(
+        le,
+        {
+          open: c === t.id,
+          onOpenChange: (l) => J(l, t.id),
+          children: [
+            /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ v(
+              "div",
+              {
+                ref: (l) => {
+                  Y.current[t.id] = l;
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `${t.label}: ${a.type === "empty" ? "not set, click to add filter" : a.type === "count" ? `${a.count} selected, click to edit` : `${a.content}, click to edit`}`,
+                "aria-expanded": c === t.id,
+                "aria-haspopup": "dialog",
+                onKeyDown: (l) => {
+                  (l.key === "Enter" || l.key === " ") && (l.preventDefault(), J(c !== t.id, t.id));
+                },
+                className: D(
+                  "group/slot h-[var(--size-m)] rounded-l flex items-center justify-center gap-[var(--space-s)] transition-colors cursor-pointer flex-shrink-0",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
+                  o ? "bg-[var(--color-background-neutral-selected)] hover:bg-[var(--color-background-neutral-hovered)] px-[var(--space-m)] pr-[4px]" : "border border-dashed border-[var(--color-border-primary-strong)] px-[var(--space-m)] pr-[var(--space-s)] hover:border-[var(--grey-400)] active:bg-[var(--grey-25)]"
+                ),
+                children: [
+                  /* @__PURE__ */ e(i, { className: D(
+                    "h-[var(--size-2xs)] w-[var(--size-2xs)]",
+                    o ? "text-[var(--color-icon-primary)]" : "text-[var(--grey-400)] group-hover/slot:text-[var(--grey-500)]"
+                  ) }),
+                  a.type === "count" ? /* @__PURE__ */ v(ne, { children: [
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap [&]:text-label-md text-[var(--color-text-primary)]", children: a.label }),
+                    /* @__PURE__ */ e(te, { size: "s", intent: "neutral", appearance: "bold", children: a.count })
+                  ] }) : /* @__PURE__ */ e("span", { className: D(
+                    "whitespace-nowrap [&]:text-label-md",
+                    o ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-tertiary)] group-hover/slot:text-[var(--grey-500)]"
+                  ), children: a.content }),
+                  o && /* @__PURE__ */ e(
+                    Q,
+                    {
+                      variant: "ghost",
+                      size: "s",
+                      "aria-label": `Clear ${t.label} filter`,
+                      onClick: (l) => {
+                        l.stopPropagation(), y(t.id);
+                      },
+                      onKeyDown: (l) => {
+                        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.stopPropagation(), y(t.id));
+                      },
+                      className: "h-auto w-auto p-[var(--space-xs)]",
+                      children: /* @__PURE__ */ e(H, { name: "x", className: "h-[var(--size-2xs)] w-[var(--size-2xs)]", "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              ce,
+              {
+                className: D(
+                  "p-[var(--space-l)]",
+                  t.type === "date" ? "w-[600px]" : "w-[320px]",
+                  "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto"
+                ),
+                align: "start",
+                collisionPadding: 8,
+                children: /* @__PURE__ */ e(
+                  pe,
+                  {
+                    filter: t,
+                    value: s[t.id],
+                    onChange: (l) => g(t.id, l),
+                    onReset: () => y(t.id)
+                  }
+                )
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    }) }),
+    A && (q || n.length > 0) && /* @__PURE__ */ e(re, { type: "line", layout: "horizontal", className: "mx-[var(--space-s)]" }),
+    A && !w && /* @__PURE__ */ e(
+      Ie,
+      {
+        placeholder: M,
+        onAddSearchTerm: G
+      }
+    ),
+    A && w && /* @__PURE__ */ e(
+      Ae,
+      {
+        placeholder: M,
+        onAddSearchTerm: G,
+        suggestions: N,
+        minCharacters: R
+      }
+    ),
+    m.map((t) => {
+      const a = t.matchedFilter?.icon, o = t.value.includes("|") ? t.value.split("|")[0] : t.value;
+      return /* @__PURE__ */ v(
+        "div",
+        {
+          className: "h-[var(--size-m)] rounded-l bg-[var(--color-background-neutral-selected)] hover:bg-[var(--color-background-neutral-hovered)] px-[var(--space-m)] pr-[4px] flex items-center gap-[var(--space-s)] transition-colors",
+          children: [
+            a && /* @__PURE__ */ e(a, { className: "h-[var(--size-2xs)] w-[var(--size-2xs)] text-[var(--color-icon-primary)]" }),
+            /* @__PURE__ */ e("span", { className: "whitespace-nowrap [&]:text-label-md text-[var(--color-text-primary)]", children: o }),
+            /* @__PURE__ */ e(
+              Q,
+              {
+                variant: "ghost",
+                size: "s",
+                "aria-label": `Remove search term: ${o}`,
+                onClick: () => P(t.value),
+                className: "h-auto w-auto p-[var(--space-xs)]",
+                children: /* @__PURE__ */ e(H, { name: "x", className: "h-[var(--size-2xs)] w-[var(--size-2xs)]", "aria-hidden": "true" })
+              }
+            )
+          ]
+        },
+        t.value
+      );
+    }),
+    !I && (X || _) && /* @__PURE__ */ e(re, { type: "dot", layout: "horizontal" }),
+    !I && (X || _) && /* @__PURE__ */ e(
+      Q,
+      {
+        variant: "ghost",
+        onClick: W,
+        "aria-label": "Reset all filters and search terms",
+        className: "h-[var(--size-m)] rounded-s px-[var(--space-m)]",
+        children: /* @__PURE__ */ e("span", { className: "text-label-md", children: "Clear all" })
+      }
+    ),
+    T && /* @__PURE__ */ e("div", { className: "flex-1" }),
+    T
+  ] });
+}
+export {
+  ke as DEFAULT_DAY_PRESETS,
+  Se as DEFAULT_MONTH_PRESETS,
+  ze as FilterDropdownMenu,
+  pe as FilterPanelContent,
+  Ye as Filters
+};