@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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

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

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

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

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

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

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

@@ -1,90 +1,55 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as g } from "../../../Badge/Badge.js";
+import { t as e } from "../../../../utils-DHuiYnx1.js";
 import { Button as i } from "../../../Button/Button.js";
+import { t as g } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as x } from "../../../Badge/Badge.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 { filterButtonIconVariants as y, filterButtonVariants as k } 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 { jsx as t, jsxs as a } from "react/jsx-runtime";
+var A = ({ label: d, position: l = "left", countryCode: s = "US", onApply: p }) => {
+  const { id: m, appliedDay: n, isOpen: r, selectedDay: o, wrapperRef: c, handleApply: f, handleOpen: h, handleSelect: u, handleReset: b } = D({
+    onApply: p,
+    countryCode: s
+  });
+  return /* @__PURE__ */ a("div", {
+    ref: c,
+    className: "relative",
+    children: [/* @__PURE__ */ a("button", {
+      className: e(k(), { "text-slate-700": r }),
+      onClick: h,
+      children: [
+        d,
+        n && /* @__PURE__ */ t(x, { label: n }),
+        /* @__PURE__ */ t(g, { className: e(y(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+      ]
+    }), r && /* @__PURE__ */ a("div", {
+      className: e("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", "dark:bg-metal-800", "dark:border-metal-700", {
+        "left-0": l === "left",
+        "right-0": l === "right"
+      }),
+      children: [/* @__PURE__ */ t(w, {
+        className: "p-0",
+        arrowClassName: "-top-1 right-0",
+        monthsClassName: e("shadow-none", "p-0", "w-auto", "dark:border-transparent"),
+        defaultSelected: o,
+        defaultMonth: o,
+        onSelect: u
+      }, o?.toISOString() ?? m), /* @__PURE__ */ a("div", {
+        className: e("flex", "justify-end", "items-center", "gap-4", "py-2"),
+        children: [/* @__PURE__ */ t(i, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: b,
+          children: "Reset"
+        }), /* @__PURE__ */ t(i, {
+          appearance: "compact",
+          onClick: f,
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
 };
 export {
-  R as DateFilterDropdown
+  A as DateFilterDropdown
 };

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

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