@konstructio/ui 0.1.2-alpha.10 → 0.1.2-alpha.103

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.js

@@ -1,85 +1,66 @@
-import { useId as b, useRef as C, useState as u, useEffect as m, useCallback as o, useMemo as w } from "react";
-import { FilterEvent as p, sendOpenFilterEvent as S } from "../../events/index.js";
-const k = ({
-  onApply: l
-}) => {
-  const r = b(), a = C(null), [f, d] = u(!1), [s, i] = u([]);
+import { useFilterContext as w } from "../../contexts/filter.hook.js";
+import { FilterEvent as p, sendOpenFilterEvent as F } from "../../events/index.js";
+import { useCallback as d, useEffect as m, useId as L, useMemo as u, useState as v } from "react";
+var _ = ({ onApply: l, options: c = [] }) => {
+  const { closeOnApply: o } = w(), a = L(), [O, r] = v(!1), [s, i] = v([]);
   m(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      p.OPEN,
-      (t) => {
-        t.detail !== r && d(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), document.addEventListener(
-      p.RESET,
-      () => {
-        i([]), l?.([]);
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener(p.OPEN, (t) => {
+      t.detail !== a && r(!1);
+    }, { signal: e.signal }), document.addEventListener(p.RESET, () => {
+      i([]), l?.([]);
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [r, l]);
-  const v = o(
-    () => d((e) => (e || (S(r), i(
-      (t) => t.filter((n) => n.isApplied)
-    )), !e)),
-    [r, d]
-  ), c = o(() => d(!1), []), E = o(
-    (e, t) => {
-      i(t ? [
-        ...s,
-        { ...e, isApplied: !1 }
-      ] : s.map((n) => n.id === e.id ? { ...n, isRemoved: !0 } : n));
-    },
-    [i, s]
-  ), O = o(() => {
-    i([]), l?.([]);
-  }, [l]), g = o(() => {
-    const e = s?.filter((t) => !t.isRemoved).map((t) => ({ ...t, isApplied: !0 }));
-    i(e), l?.(
-      e.map(
-        ({ isApplied: t, isRemoved: n, ...R }) => R
-      )
-    );
-  }, [l, s, i]), h = w(
-    () => s.filter((e) => e.isApplied),
-    [s]
-  );
+  }, [a, l]);
+  const g = d((e) => {
+    e && (F(a), i((t) => t.filter((n) => n.isApplied))), r(e);
+  }, [a]), f = d(() => r(!1), []), h = d((e, t) => {
+    i(t ? [...s, {
+      ...e,
+      isApplied: !1
+    }] : s.map((n) => n.id === e.id ? {
+      ...n,
+      isRemoved: !0
+    } : n));
+  }, [i, s]), E = d(() => {
+    i([]), l?.([]), o && r(!1);
+  }, [o, l]), A = d(() => {
+    const e = s?.filter((t) => !t.isRemoved).map((t) => ({
+      ...t,
+      isApplied: !0
+    }));
+    i(e), l?.(e.map(({ isApplied: t, isRemoved: n, ...b }) => b)), o && r(!1);
+  }, [
+    o,
+    l,
+    s,
+    i
+  ]), C = u(() => s.filter((e) => e.isApplied), [s]), R = u(() => c.length > 0 && c.every((e) => s.some((t) => t.id === e.id && !t.isRemoved)), [c, s]), S = d((e, t) => {
+    t && i(e.map((n) => ({
+      ...n,
+      isApplied: !1
+    })));
+  }, []);
   return m(() => {
-    const e = new AbortController(), t = (n) => {
-      a.current?.contains(n.target) || c();
-    };
-    return document.addEventListener("mousedown", t, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && c();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    const e = new AbortController();
+    return document.addEventListener("visibilitychange", () => {
+      document.hidden && f();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [c, a]), {
-    isOpen: f,
-    selectedCount: h,
+  }, [f]), {
+    isOpen: O,
+    isAllSelected: R,
+    selectedCount: C,
     selectedOptions: s,
-    wrapperRef: a,
-    handleApplyOptions: g,
-    handleOpen: v,
-    handleResetOptions: O,
-    handleSelectOption: E
+    handleApplyOptions: A,
+    handleOpenChange: g,
+    handleResetOptions: E,
+    handleSelectAll: S,
+    handleSelectOption: h
   };
 };
 export {
-  k as useBadgeMultiSelect
+  _ as useBadgeMultiSelect
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -1,95 +1,71 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as o } from "../../../Badge/Badge.js";
-import { Button as m } from "../../../Button/Button.js";
-import { Checkbox as C } from "../../../Checkbox/Checkbox.js";
-import { cn as n } from "../../../../utils/index.js";
-import { filterButtonIconVariants as y, filterButtonVariants as N } from "../../Filter.variants.js";
-import { useBadgeMultiSelect as B } from "./BadgeMultiSelect.hook.js";
-import { C as O } from "../../../../chevron-down-MZvQoT2F.js";
-const $ = ({
-  options: i,
-  label: p,
-  position: d = "left",
-  onApply: f
-}) => {
-  const {
-    wrapperRef: h,
-    isOpen: l,
-    selectedOptions: u,
-    selectedCount: c,
-    handleOpen: g,
-    handleResetOptions: b,
-    handleApplyOptions: v,
-    handleSelectOption: x
-  } = B({ onApply: f });
-  return i.length === 0 ? null : /* @__PURE__ */ a("div", { ref: h, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: n(N(), {
-          "text-slate-700": l
-        }),
-        onClick: g,
-        children: [
-          p,
-          c.length > 0 && /* @__PURE__ */ e(o, { label: c.length.toString() }),
-          /* @__PURE__ */ e(
-            O,
-            {
-              className: n(y(), {
-                "rotate-180": l,
-                "text-blue-600": l
-              })
-            }
-          )
-        ]
-      }
-    ),
-    l && /* @__PURE__ */ a(
-      "div",
-      {
-        className: n(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200",
-          {
-            "left-0": d === "left",
-            "right-0": d === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: i.map((t) => {
-            const s = !!u.find(
-              (r) => r.id === t.id
-            );
-            return /* @__PURE__ */ a("div", { className: "flex gap-4 px-6", children: [
-              /* @__PURE__ */ e(
-                C,
-                {
-                  defaultChecked: s,
-                  "data-label": t.id,
-                  onChange: (r) => x(t, r)
-                },
-                `${t.id}-${s}`
-              ),
-              /* @__PURE__ */ e(o, { label: t.label, variant: t.variant })
-            ] }, t.id);
-          }) }) }),
-          /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 py-4 border-t border-gray-200", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: b,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(m, { appearance: "compact", onClick: v, children: "Apply" })
-          ] })
-        ]
-      }
-    )
-  ] });
+import { t as m } from "../../../../Checkbox-DzAx7n67.js";
+import { t as d } from "../../../../utils-Cx-WzRZF.js";
+import { Button as h } from "../../../Button/Button.js";
+import { t as O } from "../../../../chevron-down-DNP-OOAQ.js";
+import { Badge as c } from "../../../Badge/Badge.js";
+import { filterButtonIconVariants as S, filterButtonVariants as B } from "../../Filter.variants.js";
+import { FilterDropdown as A } from "../FilterDropdown/FilterDropdown.js";
+import { useBadgeMultiSelect as I } from "./BadgeMultiSelect.hook.js";
+import { Fragment as j, jsx as a, jsxs as l } from "react/jsx-runtime";
+var E = ({ options: r, label: g, position: p = "left", onApply: f, showSelectAll: u = !0, selectAllLabel: x = "All" }) => {
+  const { isOpen: t, isAllSelected: i, selectedOptions: C, selectedCount: s, handleOpenChange: b, handleResetOptions: v, handleApplyOptions: k, handleSelectAll: y, handleSelectOption: N } = I({
+    onApply: f,
+    options: r
+  });
+  return r.length === 0 ? null : /* @__PURE__ */ l(A, {
+    isOpen: t,
+    position: p,
+    contentClassName: "border border-gray-200",
+    triggerClassName: d(B(), { "text-slate-700 dark:text-metal-50": t }),
+    trigger: /* @__PURE__ */ l(j, { children: [
+      g,
+      s.length > 0 && /* @__PURE__ */ a(c, { label: s.length.toString() }),
+      /* @__PURE__ */ a(O, { className: d(S(), { "rotate-180 text-blue-600 dark:text-aurora-500": t }) })
+    ] }),
+    onOpenChange: b,
+    children: [/* @__PURE__ */ a("div", {
+      className: "px-6 py-4",
+      children: /* @__PURE__ */ l("div", {
+        className: "flex flex-col gap-2",
+        children: [u && /* @__PURE__ */ l("div", {
+          className: "flex gap-4",
+          children: [/* @__PURE__ */ a(m, {
+            defaultChecked: i,
+            onChange: (e) => y(r, e)
+          }, `select-all-${i}`), /* @__PURE__ */ a(c, { label: x })]
+        }), r.map((e) => {
+          const o = !!C.find((n) => n.id === e.id);
+          return /* @__PURE__ */ l("div", {
+            className: "flex gap-4",
+            children: [/* @__PURE__ */ a(m, {
+              defaultChecked: o,
+              "data-label": e.id,
+              onChange: (n) => N(e, n)
+            }, `${e.id}-${o}`), /* @__PURE__ */ a(c, {
+              label: e.label,
+              variant: e.variant,
+              leftIcon: e.leftIcon,
+              rightIcon: e.rightIcon,
+              loading: e.loading
+            })]
+          }, e.id);
+        })]
+      })
+    }), /* @__PURE__ */ l("div", {
+      className: d("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
+      children: [/* @__PURE__ */ a(h, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: v,
+        children: "Reset"
+      }), /* @__PURE__ */ a(h, {
+        appearance: "compact",
+        onClick: k,
+        children: "Apply"
+      })]
+    })]
+  });
 };
 export {
-  $ as BadgeMultiSelect
+  E as BadgeMultiSelect
 };

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js

@@ -1,86 +1,50 @@
-import { useRef as w, useId as C, useState as m, useMemo as L, useCallback as s, useEffect as E } from "react";
-import { sendOpenFilterEvent as y, FilterEvent as f } from "../../events/index.js";
-const R = ({
-  onApply: n
-}) => {
-  const i = w(null), t = C(), [g, a] = m(!1), [r, l] = m(), [v, d] = m(), h = L(
-    () => v?.toLocaleDateString("en-GB", {
-      day: "numeric",
-      month: "short",
-      year: "numeric"
-    }),
-    [v]
-  ), p = s(
-    () => a((e) => (e || y(t), !e)),
-    [t]
-  ), D = s(() => {
-    d(r), n?.(r);
-  }, [n, r]), b = s((e) => l(e), []), c = s(() => a(!1), []), O = s(() => {
-    l(void 0), d(void 0), n?.();
-  }, [n]);
-  return E(() => {
+import { useFilterContext as S } from "../../contexts/filter.hook.js";
+import { FilterEvent as u, sendOpenFilterEvent as y } from "../../events/index.js";
+import { t as C } from "../../../../utils-B-BTGYA5.js";
+import { useCallback as o, useEffect as p, useId as F, useMemo as L, useState as d } from "react";
+var k = ({ onApply: t, countryCode: c = "US" }) => {
+  const { closeOnApply: a } = S(), n = F(), [v, s] = d(!1), [i, r] = d(), [m, l] = d(), g = L(() => m?.toLocaleDateString(C(c), {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }), [m, c]), h = o((e) => {
+    e && y(n), s(e);
+  }, [n]), D = o(() => {
+    l(i), t?.(i), a && s(!1);
+  }, [
+    a,
+    t,
+    i
+  ]), E = o((e) => r(e), []), f = o(() => s(!1), []), b = o(() => {
+    r(void 0), l(void 0), t?.(), a && s(!1);
+  }, [a, t]);
+  return p(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      f.OPEN,
-      (o) => {
-        o.detail !== t && a(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener(u.OPEN, (O) => {
+      O.detail !== n && s(!1);
+    }, { signal: e.signal }), document.addEventListener(u.RESET, () => {
+      r(void 0), l(void 0), t?.();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [t]), E(() => {
+  }, [n, t]), p(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      f.OPEN,
-      (o) => {
-        o.detail !== t && a(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), document.addEventListener(
-      f.RESET,
-      () => {
-        l(void 0), d(void 0), n?.();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener("visibilitychange", () => {
+      document.hidden && f();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [t, n]), E(() => {
-    const e = new AbortController(), o = (u) => {
-      i.current?.contains(u.target) || c();
-    };
-    return document.addEventListener("mousedown", o, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && c();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
-      e.abort();
-    };
-  }, [c, i]), {
-    id: t,
-    appliedDay: h,
-    isOpen: g,
-    selectedDay: r,
-    wrapperRef: i,
+  }, [f]), {
+    id: n,
+    appliedDay: g,
+    isOpen: v,
+    selectedDay: i,
     handleApply: D,
-    handleOpen: p,
-    handleSelect: b,
-    handleReset: O
+    handleOpenChange: h,
+    handleSelect: E,
+    handleReset: b
   };
 };
 export {
-  R as useDateFilterDropdown
+  k as useDateFilterDropdown
 };

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -1,89 +1,49 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as g } from "../../../Badge/Badge.js";
-import { Button as i } from "../../../Button/Button.js";
-import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { cn as o } from "../../../../utils/index.js";
-import { filterButtonIconVariants as x, filterButtonVariants as y } from "../../Filter.variants.js";
-import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-MZvQoT2F.js";
-const R = ({
-  label: s,
-  position: l = "left",
-  onApply: p
-}) => {
-  const {
-    id: c,
-    appliedDay: n,
-    isOpen: t,
-    selectedDay: r,
-    wrapperRef: d,
-    handleApply: m,
-    handleOpen: f,
-    handleSelect: h,
-    handleReset: u
-  } = D({ onApply: p });
-  return /* @__PURE__ */ a("div", { ref: d, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: o(y(), {
-          "text-slate-700": t
-        }),
-        onClick: f,
-        children: [
-          s,
-          n && /* @__PURE__ */ e(g, { label: n }),
-          /* @__PURE__ */ e(
-            N,
-            {
-              className: o(x(), {
-                "rotate-180": t,
-                "text-blue-600": t
-              })
-            }
-          )
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ a(
-      "div",
-      {
-        className: o(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200 flex flex-col gap-4 py-4 px-6",
-          {
-            "left-0": l === "left",
-            "right-0": l === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ e(
-            w,
-            {
-              className: "p-0",
-              arrowClassName: "-top-1 right-0",
-              monthsClassName: "shadow-none p-0 w-auto",
-              defaultSelected: r,
-              defaultMonth: r,
-              onSelect: h
-            },
-            r?.toISOString() ?? c
-          ),
-          /* @__PURE__ */ a("div", { className: "flex justify-end items-center gap-4 py-2", children: [
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: u,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(i, { appearance: "compact", onClick: m, children: "Apply" })
-          ] })
-        ]
-      }
-    )
-  ] });
+import { t as e } from "../../../../utils-Cx-WzRZF.js";
+import { Button as l } from "../../../Button/Button.js";
+import { t as u } from "../../../../chevron-down-DNP-OOAQ.js";
+import { Badge as x } from "../../../Badge/Badge.js";
+import { DatePicker as y } from "../../../Datepicker/DatePicker.js";
+import { filterButtonIconVariants as C, filterButtonVariants as D } from "../../Filter.variants.js";
+import { FilterDropdown as w } from "../FilterDropdown/FilterDropdown.js";
+import { useDateFilterDropdown as N } from "./DateFilterDropdown.hook.js";
+import { Fragment as S, jsx as t, jsxs as o } from "react/jsx-runtime";
+var R = ({ label: p, position: i = "left", countryCode: s = "US", onApply: m }) => {
+  const { id: c, appliedDay: n, isOpen: r, selectedDay: a, handleApply: d, handleOpenChange: f, handleSelect: h, handleReset: g } = N({
+    onApply: m,
+    countryCode: s
+  });
+  return /* @__PURE__ */ o(w, {
+    isOpen: r,
+    position: i,
+    contentClassName: e("border", "border-gray-200", "flex", "flex-col", "gap-4", "py-4", "px-6"),
+    triggerClassName: e(D(), { "text-slate-700": r }),
+    trigger: /* @__PURE__ */ o(S, { children: [
+      p,
+      n && /* @__PURE__ */ t(x, { label: n }),
+      /* @__PURE__ */ t(u, { className: e(C(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+    ] }),
+    onOpenChange: f,
+    children: [/* @__PURE__ */ t(y, {
+      className: "p-0",
+      arrowClassName: "-top-1 right-0",
+      monthsClassName: e("shadow-none", "p-0", "w-auto", "dark:border-transparent"),
+      defaultSelected: a,
+      defaultMonth: a,
+      onSelect: h
+    }, a?.toISOString() ?? c), /* @__PURE__ */ o("div", {
+      className: e("flex", "justify-end", "items-center", "gap-4", "py-2"),
+      children: [/* @__PURE__ */ t(l, {
+        variant: "secondary",
+        appearance: "compact",
+        onClick: g,
+        children: "Reset"
+      }), /* @__PURE__ */ t(l, {
+        appearance: "compact",
+        onClick: d,
+        children: "Apply"
+      })]
+    })]
+  });
 };
 export {
   R as DateFilterDropdown

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.js

@@ -0,0 +1,62 @@
+import { useFilterContext as F } from "../../contexts/filter.hook.js";
+import { FilterEvent as g, sendOpenFilterEvent as L } from "../../events/index.js";
+import { t as S } from "../../../../utils-B-BTGYA5.js";
+import { useCallback as a, useEffect as u, useId as D, useMemo as w, useState as f } from "react";
+var k = ({ defaultRange: h, onApply: t, countryCode: v = "US" }) => {
+  const { closeOnApply: s } = F(), o = D(), [p, r] = f(!1), [i, l] = f(h), [n, d] = f(), R = w(() => {
+    if (!n?.from) return;
+    const e = (c) => c.toLocaleDateString(S(v), {
+      day: "numeric",
+      month: "short"
+    });
+    return n.to ? `${e(n.from)} - ${e(n.to)}` : e(n.from);
+  }, [n]), E = a((e) => {
+    e && L(o), r(e);
+  }, [o]), C = a(() => {
+    const e = {
+      from: i?.from,
+      to: i?.to
+    };
+    d(e), t?.(e), s && r(!1);
+  }, [
+    s,
+    t,
+    i
+  ]), b = a((e) => {
+    l({
+      from: e.from,
+      to: e.to
+    });
+  }, []), m = a(() => r(!1), []), O = a(() => {
+    l(void 0), d(void 0), t?.(), s && r(!1);
+  }, [s, t]);
+  return u(() => {
+    const e = new AbortController();
+    return document.addEventListener(g.OPEN, (c) => {
+      c.detail !== o && r(!1);
+    }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
+      l(void 0), d(void 0), t?.();
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [o, t]), u(() => {
+    const e = new AbortController();
+    return document.addEventListener("visibilitychange", () => {
+      document.hidden && m();
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [m]), {
+    id: o,
+    appliedRange: R,
+    isOpen: p,
+    selectedRange: i,
+    handleApply: C,
+    handleOpenChange: E,
+    handleRangeChange: b,
+    handleReset: O
+  };
+};
+export {
+  k as useDateRangeFilterDropdown
+};