@konstructio/ui 0.1.2-alpha.75 → 0.1.2-alpha.77

package/dist/components/Filter/Filter.types.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { FC, PropsWithChildren } from 'react';
 import { Theme } from '../../domain/theme';
-import { BadgeProps } from '../Badge/Badge.types';
+import { Props as BadgeProps } from '../Badge/Badge.types';
 import { filterVariants } from './Filter.variants';
 import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps, TextMultiSelectProps, TimeFilterDropdownProps } from './components';
 /**
@@ -42,7 +42,7 @@ export type Option = {
  * </Filter>
  * ```
  */
-export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildren & {
+export type Props = VariantProps<typeof filterVariants> & PropsWithChildren & {
     /** Additional CSS classes for the filter wrapper */
     className?: string;
     /** Theme override for this component */
@@ -50,10 +50,12 @@ export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildre
     /** Whether to close the filter dropdown automatically when Apply is clicked. Defaults to true. */
     closeOnApply?: boolean;
 };
+/** @deprecated Use Props instead */
+export type FilterProps = Props;
 /**
  * Filter compound component type with sub-components.
  */
-export type FilterComponentProps = FC<FilterProps> & {
+export type FilterComponentProps = FC<Props> & {
     BadgeMultiSelect: FC<BadgeMultiSelectProps>;
     TextMultiSelect: FC<TextMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;

package/dist/components/Filter/Filter.variants.js

@@ -1,21 +1,5 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "items-center"]), r = t([
-  "flex",
-  "items-center",
-  "gap-1",
-  "text-slate-500",
-  "cursor-pointer",
-  "text-sm",
-  "w-max",
-  "dark:text-metal-300"
-]), n = t([
-  "text-slate-400",
-  "h-5",
-  "w-5",
-  "transition-all",
-  "duration-150",
-  "ease-in-out"
-]);
+const a = t(["flex", "gap-8", "items-center"]), r = t(["flex", "items-center", "gap-1", "text-slate-500", "cursor-pointer", "text-sm", "w-max", "dark:text-metal-300"]), n = t(["text-slate-400", "h-5", "w-5", "transition-all", "duration-150", "ease-in-out"]);
 export {
   n as filterButtonIconVariants,
   r as filterButtonVariants,

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

@@ -1,101 +1,135 @@
-import { useId as L, useRef as F, useState as m, useEffect as p, useCallback as d, useMemo as v } from "react";
-import { FilterEvent as O, sendOpenFilterEvent as k } from "../../events/index.js";
-import { useFilterContext as x } from "../../contexts/filter.hook.js";
-const B = ({
-  onApply: l,
-  options: a = []
-}) => {
-  const { closeOnApply: r } = x(), c = L(), u = F(null), [g, o] = m(!1), [n, i] = m([]);
-  p(() => {
-    const e = new AbortController();
-    return document.addEventListener(
-      O.OPEN,
-      (t) => {
-        t.detail !== c && o(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), document.addEventListener(
-      O.RESET,
-      () => {
-        i([]), l?.([]);
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
-      e.abort();
+import { c as z } from "../../../../compiler-runtime-DA41awpA.js";
+import { useId as D, useRef as G, useState as T, useEffect as $ } from "react";
+import { FilterEvent as j, sendOpenFilterEvent as H } from "../../events/index.js";
+import { useFilterContext as J } from "../../contexts/filter.hook.js";
+const se = (s) => {
+  const e = z.c(36), {
+    onApply: l,
+    options: c
+  } = s;
+  let a;
+  e[0] !== c ? (a = c === void 0 ? [] : c, e[0] = c, e[1] = a) : a = e[1];
+  const m = a, {
+    closeOnApply: f
+  } = J(), o = D(), L = G(null), [x, d] = T(!1);
+  let u;
+  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = [], e[2] = u) : u = e[2];
+  const [n, r] = T(u);
+  let _, v;
+  e[3] !== o || e[4] !== l ? (_ = () => {
+    const t = new AbortController();
+    return document.addEventListener(j.OPEN, (i) => {
+      i.detail !== o && d(!1);
+    }, {
+      signal: t.signal
+    }), document.addEventListener(j.RESET, () => {
+      r([]), l?.([]);
+    }, {
+      signal: t.signal
+    }), () => {
+      t.abort();
     };
-  }, [c, l]);
-  const E = d(
-    () => o((e) => (e || (k(c), i(
-      (t) => t.filter((s) => s.isApplied)
-    )), !e)),
-    [c, o]
-  ), f = d(() => o(!1), []), h = d(
-    (e, t) => {
-      i(t ? [
-        ...n,
-        { ...e, isApplied: !1 }
-      ] : n.map((s) => s.id === e.id ? { ...s, isRemoved: !0 } : s));
-    },
-    [i, n]
-  ), R = d(() => {
-    i([]), l?.([]), r && o(!1);
-  }, [r, l]), A = d(() => {
-    const e = n?.filter((t) => !t.isRemoved).map((t) => ({ ...t, isApplied: !0 }));
-    i(e), l?.(
-      e.map(
-        ({ isApplied: t, isRemoved: s, ...w }) => w
-      )
-    ), r && o(!1);
-  }, [r, l, n, i]), C = v(
-    () => n.filter((e) => e.isApplied),
-    [n]
-  ), S = v(
-    () => a.length > 0 && a.every(
-      (e) => n.some((t) => t.id === e.id && !t.isRemoved)
-    ),
-    [a, n]
-  ), b = d(
-    (e, t) => {
-      t && i(
-        e.map((s) => ({ ...s, isApplied: !1 }))
-      );
-    },
-    []
-  );
-  return p(() => {
-    const e = new AbortController(), t = (s) => {
-      u.current?.contains(s.target) || f();
+  }, v = [o, l], e[3] = o, e[4] = l, e[5] = _, e[6] = v) : (_ = e[5], v = e[6]), $(_, v);
+  let h;
+  e[7] !== o ? (h = () => d((t) => (t || (H(o), r(Q)), !t)), e[7] = o, e[8] = h) : h = e[8];
+  const F = h;
+  let A;
+  e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (A = () => d(!1), e[9] = A) : A = e[9];
+  const I = A;
+  let E;
+  e[10] !== n ? (E = (t, i) => {
+    r(i ? [...n, {
+      ...t,
+      isApplied: !1
+    }] : n.map((p) => p.id === t.id ? {
+      ...p,
+      isRemoved: !0
+    } : p));
+  }, e[10] = n, e[11] = E) : E = e[11];
+  const k = E;
+  let O;
+  e[12] !== f || e[13] !== l ? (O = () => {
+    r([]), l?.([]), f && d(!1);
+  }, e[12] = f, e[13] = l, e[14] = O) : O = e[14];
+  const B = O;
+  let g;
+  e[15] !== f || e[16] !== l || e[17] !== n ? (g = () => {
+    const t = n?.filter(U).map(V);
+    r(t), l?.(t.map(W)), f && d(!1);
+  }, e[15] = f, e[16] = l, e[17] = n, e[18] = g) : g = e[18];
+  const M = g;
+  let S;
+  e[19] !== n ? (S = n.filter(X), e[19] = n, e[20] = S) : S = e[20];
+  const N = S;
+  let R;
+  e[21] !== m || e[22] !== n ? (R = m.length > 0 && m.every((t) => n.some((i) => i.id === t.id && !i.isRemoved)), e[21] = m, e[22] = n, e[23] = R) : R = e[23];
+  const P = R;
+  let b;
+  e[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = (t, i) => {
+    i && r(t.map(Y));
+  }, e[24] = b) : b = e[24];
+  const q = b;
+  let y, C;
+  e[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = () => {
+    const t = new AbortController(), i = (p) => {
+      L.current?.contains(p.target) || I();
     };
-    return document.addEventListener("mousedown", t, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && f();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
-      e.abort();
+    return document.addEventListener("mousedown", i, {
+      signal: t.signal
+    }), document.addEventListener("visibilitychange", () => {
+      document.hidden && I();
+    }, {
+      signal: t.signal
+    }), () => {
+      t.abort();
     };
-  }, [f, u]), {
-    isOpen: g,
-    isAllSelected: S,
-    selectedCount: C,
+  }, C = [I, L], e[25] = y, e[26] = C) : (y = e[25], C = e[26]), $(y, C);
+  let w;
+  return e[27] !== M || e[28] !== F || e[29] !== B || e[30] !== k || e[31] !== P || e[32] !== x || e[33] !== N || e[34] !== n ? (w = {
+    isOpen: x,
+    isAllSelected: P,
+    selectedCount: N,
     selectedOptions: n,
-    wrapperRef: u,
-    handleApplyOptions: A,
-    handleOpen: E,
-    handleResetOptions: R,
-    handleSelectAll: b,
-    handleSelectOption: h
-  };
+    wrapperRef: L,
+    handleApplyOptions: M,
+    handleOpen: F,
+    handleResetOptions: B,
+    handleSelectAll: q,
+    handleSelectOption: k
+  }, e[27] = M, e[28] = F, e[29] = B, e[30] = k, e[31] = P, e[32] = x, e[33] = N, e[34] = n, e[35] = w) : w = e[35], w;
 };
+function K(s) {
+  return s.isApplied;
+}
+function Q(s) {
+  return s.filter(K);
+}
+function U(s) {
+  return !s.isRemoved;
+}
+function V(s) {
+  return {
+    ...s,
+    isApplied: !0
+  };
+}
+function W(s) {
+  const {
+    isApplied: e,
+    isRemoved: l,
+    ...c
+  } = s;
+  return c;
+}
+function X(s) {
+  return s.isApplied;
+}
+function Y(s) {
+  return {
+    ...s,
+    isApplied: !1
+  };
+}
 export {
-  B as useBadgeMultiSelect
+  se as useBadgeMultiSelect
 };

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

@@ -1,148 +1,87 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
-import { Badge as c } from "../../../Badge/Badge.js";
-import { Button as h } from "../../../Button/Button.js";
-import { Checkbox as f } from "../../../Checkbox/Checkbox.js";
-import { filterButtonIconVariants as B, filterButtonVariants as O } from "../../Filter.variants.js";
-import { cn as r } from "../../../../utils/index.js";
-import { useBadgeMultiSelect as A } from "./BadgeMultiSelect.hook.js";
-import { C as I } from "../../../../chevron-down-BBFYYzZq.js";
-const q = ({
-  options: t,
-  label: p,
-  position: i = "left",
-  onApply: g,
-  showSelectAll: u = !0,
-  selectAllLabel: b = "All"
-}) => {
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { c as E } from "../../../../compiler-runtime-DA41awpA.js";
+import { Badge as R } from "../../../Badge/Badge.js";
+import { Button as V } from "../../../Button/Button.js";
+import { Checkbox as z } from "../../../Checkbox/Checkbox.js";
+import { filterButtonVariants as q, filterButtonIconVariants as F } from "../../Filter.variants.js";
+import { cn as b } from "../../../../utils/index.js";
+import { useBadgeMultiSelect as G } from "./BadgeMultiSelect.hook.js";
+import { C as H } from "../../../../chevron-down-BBFYYzZq.js";
+const Z = (D) => {
+  const e = E.c(33), {
+    options: r,
+    label: x,
+    position: $,
+    onApply: v,
+    showSelectAll: j,
+    selectAllLabel: L
+  } = D, f = $ === void 0 ? "left" : $, k = j === void 0 ? !0 : j, C = L === void 0 ? "All" : L;
+  let p;
+  e[0] !== v || e[1] !== r ? (p = {
+    onApply: v,
+    options: r
+  }, e[0] = v, e[1] = r, e[2] = p) : p = e[2];
   const {
-    wrapperRef: x,
-    isOpen: d,
-    isAllSelected: s,
-    selectedOptions: v,
-    selectedCount: m,
-    handleOpen: k,
-    handleResetOptions: C,
-    handleApplyOptions: N,
-    handleSelectAll: y,
-    handleSelectOption: S
-  } = A({ onApply: g, options: t });
-  return t.length === 0 ? null : /* @__PURE__ */ a("div", { ref: x, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: r(O(), {
-          "text-slate-700 dark:text-metal-50": d
-        }),
-        onClick: k,
-        children: [
-          p,
-          m.length > 0 && /* @__PURE__ */ l(c, { label: m.length.toString() }),
-          /* @__PURE__ */ l(
-            I,
-            {
-              className: r(B(), {
-                "rotate-180 text-blue-600 dark:text-aurora-500": d
-              })
-            }
-          )
-        ]
-      }
-    ),
-    d && /* @__PURE__ */ a(
-      "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__ */ l("div", { className: "px-6 py-4", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-            u && /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ l(
-                f,
-                {
-                  defaultChecked: s,
-                  onChange: (e) => y(t, e)
-                },
-                `select-all-${s}`
-              ),
-              /* @__PURE__ */ l(c, { label: b })
-            ] }),
-            t.map((e) => {
-              const o = !!v.find(
-                (n) => n.id === e.id
-              );
-              return /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
-                /* @__PURE__ */ l(
-                  f,
-                  {
-                    defaultChecked: o,
-                    "data-label": e.id,
-                    onChange: (n) => S(e, n)
-                  },
-                  `${e.id}-${o}`
-                ),
-                /* @__PURE__ */ l(
-                  c,
-                  {
-                    label: e.label,
-                    variant: e.variant,
-                    leftIcon: e.leftIcon,
-                    rightIcon: e.rightIcon,
-                    loading: e.loading
-                  }
-                )
-              ] }, e.id);
-            })
-          ] }) }),
-          /* @__PURE__ */ a(
-            "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__ */ l(
-                  h,
-                  {
-                    variant: "secondary",
-                    appearance: "compact",
-                    onClick: C,
-                    children: "Reset"
-                  }
-                ),
-                /* @__PURE__ */ l(h, { appearance: "compact", onClick: N, children: "Apply" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+    wrapperRef: A,
+    isOpen: t,
+    isAllSelected: h,
+    selectedOptions: y,
+    selectedCount: g,
+    handleOpen: N,
+    handleResetOptions: S,
+    handleApplyOptions: w,
+    handleSelectAll: B,
+    handleSelectOption: O
+  } = G(p);
+  if (r.length === 0)
+    return null;
+  let n;
+  e[3] !== t ? (n = b(q(), {
+    "text-slate-700 dark:text-metal-50": t
+  }), e[3] = t, e[4] = n) : n = e[4];
+  let s;
+  e[5] !== g.length ? (s = g.length > 0 && /* @__PURE__ */ a(R, { label: g.length.toString() }), e[5] = g.length, e[6] = s) : s = e[6];
+  let c;
+  e[7] !== t ? (c = b(F(), {
+    "rotate-180 text-blue-600 dark:text-aurora-500": t
+  }), e[7] = t, e[8] = c) : c = e[8];
+  let o;
+  e[9] !== c ? (o = /* @__PURE__ */ a(H, { className: c }), e[9] = c, e[10] = o) : o = e[10];
+  let d;
+  e[11] !== N || e[12] !== x || e[13] !== n || e[14] !== s || e[15] !== o ? (d = /* @__PURE__ */ i("button", { className: n, onClick: N, children: [
+    x,
+    s,
+    o
+  ] }), e[11] = N, e[12] = x, e[13] = n, e[14] = s, e[15] = o, e[16] = d) : d = e[16];
+  let m;
+  e[17] !== w || e[18] !== S || e[19] !== B || e[20] !== O || e[21] !== h || e[22] !== t || e[23] !== r || e[24] !== f || e[25] !== C || e[26] !== y || e[27] !== k ? (m = t && /* @__PURE__ */ i("div", { className: b("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": f === "left",
+    "right-0": f === "right"
+  }), children: [
+    /* @__PURE__ */ a("div", { className: "px-6 py-4", children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
+      k && /* @__PURE__ */ i("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ a(z, { defaultChecked: h, onChange: (l) => B(r, l) }, `select-all-${h}`),
+        /* @__PURE__ */ a(R, { label: C })
+      ] }),
+      r.map((l) => {
+        const M = !!y.find((I) => I.id === l.id);
+        return /* @__PURE__ */ i("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ a(z, { defaultChecked: M, "data-label": l.id, onChange: (I) => O(l, I) }, `${l.id}-${M}`),
+          /* @__PURE__ */ a(R, { label: l.label, variant: l.variant, leftIcon: l.leftIcon, rightIcon: l.rightIcon, loading: l.loading })
+        ] }, l.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ i("div", { className: b("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"), children: [
+      /* @__PURE__ */ a(V, { variant: "secondary", appearance: "compact", onClick: S, children: "Reset" }),
+      /* @__PURE__ */ a(V, { appearance: "compact", onClick: w, children: "Apply" })
+    ] })
+  ] }), e[17] = w, e[18] = S, e[19] = B, e[20] = O, e[21] = h, e[22] = t, e[23] = r, e[24] = f, e[25] = C, e[26] = y, e[27] = k, e[28] = m) : m = e[28];
+  let u;
+  return e[29] !== m || e[30] !== d || e[31] !== A ? (u = /* @__PURE__ */ i("div", { ref: A, className: "relative", children: [
+    d,
+    m
+  ] }), e[29] = m, e[30] = d, e[31] = A, e[32] = u) : u = e[32], u;
 };
 export {
-  q as BadgeMultiSelect
+  Z as BadgeMultiSelect
 };