@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -1,138 +1,75 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as y } from "../../../Badge/Badge.js";
-import { Button as o } from "../../../Button/Button.js";
-import { Checkbox as p } from "../../../Checkbox/Checkbox.js";
-import { filterButtonIconVariants as S, filterButtonVariants as O } from "../../Filter.variants.js";
-import { cn as r } from "../../../../utils/index.js";
-import { useBadgeMultiSelect as A } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
-import { C as B } from "../../../../chevron-down-BBFYYzZq.js";
-const T = ({
-  options: l,
-  label: h,
-  position: c = "left",
-  onApply: f,
-  showSelectAll: x = !0,
-  selectAllLabel: u = "All"
-}) => {
-  const {
-    wrapperRef: g,
-    isOpen: d,
-    isAllSelected: i,
-    selectedOptions: b,
-    selectedCount: s,
-    handleOpen: k,
-    handleResetOptions: C,
-    handleApplyOptions: N,
-    handleSelectAll: v,
-    handleSelectOption: w
-  } = A({ onApply: f, options: l });
-  return l.length === 0 ? null : /* @__PURE__ */ a("div", { ref: g, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: r(O(), {
-          "text-slate-700 dark:text-metal-50": d
-        }),
-        onClick: k,
-        children: [
-          h,
-          s.length > 0 && /* @__PURE__ */ e(y, { label: s.length.toString() }),
-          /* @__PURE__ */ e(
-            B,
-            {
-              className: r(S(), {
-                "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": c === "left",
-            "right-0": c === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ e("div", { className: "px-6 py-4", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-            x && /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ e(
-                p,
-                {
-                  defaultChecked: i,
-                  onChange: (t) => v(l, t)
-                },
-                `select-all-${i}`
-              ),
-              /* @__PURE__ */ e("span", { className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap", children: u })
-            ] }),
-            l.map((t) => {
-              const m = !!b.find(
-                (n) => n.id === t.id
-              );
-              return /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
-                /* @__PURE__ */ e(
-                  p,
-                  {
-                    defaultChecked: m,
-                    "data-label": t.id,
-                    onChange: (n) => w(t, n)
-                  },
-                  `${t.id}-${m}`
-                ),
-                /* @__PURE__ */ e("span", { className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap", children: t.label })
-              ] }, t.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__ */ e(
-                  o,
-                  {
-                    variant: "secondary",
-                    appearance: "compact",
-                    onClick: C,
-                    children: "Reset"
-                  }
-                ),
-                /* @__PURE__ */ e(o, { appearance: "compact", onClick: N, children: "Apply" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+import { t as o } from "../../../../Checkbox-Cn0UWlk8.js";
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { Button as p } from "../../../Button/Button.js";
+import { t as y } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as S } from "../../../Badge/Badge.js";
+import { filterButtonIconVariants as O, filterButtonVariants as A } from "../../Filter.variants.js";
+import { useBadgeMultiSelect as B } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var T = ({ options: l, label: h, position: c = "left", onApply: f, showSelectAll: x = !0, selectAllLabel: u = "All" }) => {
+  const { wrapperRef: g, isOpen: d, isAllSelected: s, selectedOptions: b, selectedCount: i, handleOpen: k, handleResetOptions: v, handleApplyOptions: N, handleSelectAll: C, handleSelectOption: w } = B({
+    onApply: f,
+    options: l
+  });
+  return l.length === 0 ? null : /* @__PURE__ */ a("div", {
+    ref: g,
+    className: "relative",
+    children: [/* @__PURE__ */ a("button", {
+      className: r(A(), { "text-slate-700 dark:text-metal-50": d }),
+      onClick: k,
+      children: [
+        h,
+        i.length > 0 && /* @__PURE__ */ e(S, { label: i.length.toString() }),
+        /* @__PURE__ */ e(y, { className: r(O(), { "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": c === "left",
+        "right-0": c === "right"
+      }),
+      children: [/* @__PURE__ */ e("div", {
+        className: "px-6 py-4",
+        children: /* @__PURE__ */ a("div", {
+          className: "flex flex-col gap-2",
+          children: [x && /* @__PURE__ */ a("div", {
+            className: "flex gap-4",
+            children: [/* @__PURE__ */ e(o, {
+              defaultChecked: s,
+              onChange: (t) => C(l, t)
+            }, `select-all-${s}`), /* @__PURE__ */ e("span", {
+              className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
+              children: u
+            })]
+          }), l.map((t) => {
+            const m = !!b.find((n) => n.id === t.id);
+            return /* @__PURE__ */ a("div", {
+              className: "flex gap-4",
+              children: [/* @__PURE__ */ e(o, {
+                defaultChecked: m,
+                "data-label": t.id,
+                onChange: (n) => w(t, n)
+              }, `${t.id}-${m}`), /* @__PURE__ */ e("span", {
+                className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
+                children: t.label
+              })]
+            }, t.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__ */ e(p, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: v,
+          children: "Reset"
+        }), /* @__PURE__ */ e(p, {
+          appearance: "compact",
+          onClick: N,
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
 };
 export {
   T as TextMultiSelect

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

@@ -1,73 +1,52 @@
-import { useRef as k, useId as x, useState as i, useCallback as n, useEffect as g } from "react";
-import { getFormattedTime as I } from "../../../TimePicker/utils/index.js";
-import { sendOpenFilterEvent as A, FilterEvent as h } from "../../events/index.js";
-import { useFilterContext as D } from "../../contexts/filter.hook.js";
-const B = ({
-  onApply: t,
-  format: L = "24"
-}) => {
-  const { closeOnApply: l } = D(), c = k(null), s = x(), [C, o] = i(!1), [d, r] = i(), [b, m] = i(), [u, a] = i(), [O, f] = i(), T = O ?? (b ? I(b, L) : void 0), P = n(
-    () => o((e) => (e || A(s), !e)),
-    [s]
-  ), S = n((e) => {
+import { getFormattedTime as k } from "../../../TimePicker/utils/index.js";
+import { useFilterContext as x } from "../../contexts/filter.hook.js";
+import { FilterEvent as g, sendOpenFilterEvent as I } from "../../events/index.js";
+import { useCallback as n, useEffect as E, useId as A, useRef as D, useState as i } from "react";
+var B = ({ onApply: t, format: h = "24" }) => {
+  const { closeOnApply: l } = x(), c = D(null), s = A(), [L, o] = i(!1), [d, r] = i(), [b, m] = i(), [u, a] = i(), [C, f] = i(), O = C ?? (b ? k(b, h) : void 0), T = n(() => o((e) => (e || I(s), !e)), [s]), P = n((e) => {
     r(e.value), a(e.label);
-  }, []), w = n((e) => {
+  }, []), S = n((e) => {
     r(e), a(void 0);
-  }, []), F = n(() => {
+  }, []), w = n(() => {
     m(d), f(u), t?.(d), l && o(!1);
-  }, [l, t, d, u]), v = n(() => o(!1), []), R = n(() => {
+  }, [
+    l,
+    t,
+    d,
+    u
+  ]), v = n(() => o(!1), []), F = n(() => {
     r(void 0), m(void 0), a(void 0), f(void 0), t?.(), l && o(!1);
   }, [l, t]);
-  return g(() => {
+  return E(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      h.OPEN,
-      (p) => {
-        p.detail !== s && o(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), document.addEventListener(
-      h.RESET,
-      () => {
-        r(void 0), m(void 0), a(void 0), f(void 0), t?.();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener(g.OPEN, (p) => {
+      p.detail !== s && o(!1);
+    }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
+      r(void 0), m(void 0), a(void 0), f(void 0), t?.();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [s, t]), g(() => {
-    const e = new AbortController(), p = (E) => {
-      c.current?.contains(E.target) || v();
+  }, [s, t]), E(() => {
+    const e = new AbortController(), p = (R) => {
+      c.current?.contains(R.target) || v();
     };
-    return document.addEventListener("mousedown", p, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && v();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener("mousedown", p, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && v();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
   }, [v, c]), {
     id: s,
-    appliedLabel: T,
-    isOpen: C,
+    appliedLabel: O,
+    isOpen: L,
     selectedTime: d,
     selectedPresetLabel: u,
     wrapperRef: c,
-    handleApply: F,
-    handleOpen: P,
-    handleSelectPreset: S,
-    handleSelectCustom: w,
-    handleReset: R
+    handleApply: w,
+    handleOpen: T,
+    handleSelectPreset: P,
+    handleSelectCustom: S,
+    handleReset: F
   };
 };
 export {

package/dist/components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js

@@ -1,154 +1,83 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Badge as N } from "../../../Badge/Badge.js";
+import { t as a } from "../../../../utils-DHuiYnx1.js";
 import { Button as p } from "../../../Button/Button.js";
-import { filterButtonIconVariants as w, filterButtonVariants as C } from "../../Filter.variants.js";
-import { TimePicker as B } from "../../../TimePicker/TimePicker.js";
-import { cn as a } from "../../../../utils/index.js";
-import { useTimeFilterDropdown as j } from "./TimeFilterDropdown.hook.js";
-import { C as D } from "../../../../chevron-down-BBFYYzZq.js";
-const V = ({
-  label: b,
-  position: o = "left",
-  format: r = "24",
-  presets: n,
-  showTimePicker: d = !0,
-  onApply: h
-}) => {
-  const {
-    appliedLabel: c,
-    isOpen: i,
-    selectedTime: x,
-    selectedPresetLabel: m,
-    wrapperRef: g,
-    handleApply: f,
-    handleOpen: u,
-    handleSelectPreset: y,
-    handleSelectCustom: k,
-    handleReset: v
-  } = j({ onApply: h, format: r }), s = n && n.length > 0;
-  return /* @__PURE__ */ l("div", { ref: g, className: "relative", children: [
-    /* @__PURE__ */ l(
-      "button",
-      {
-        className: a(C(), {
-          "text-slate-700 dark:text-metal-100": i
-        }),
-        onClick: u,
-        children: [
-          b,
-          c && /* @__PURE__ */ e(N, { label: c }),
-          /* @__PURE__ */ e(
-            D,
-            {
-              className: a(w(), {
-                "rotate-180 text-blue-600 dark:text-aurora-500": i
-              })
-            }
-          )
-        ]
-      }
-    ),
-    i && /* @__PURE__ */ l(
-      "div",
-      {
-        className: a(
-          "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",
-          "dark:bg-metal-800",
-          "dark:border-metal-700",
-          {
-            "left-0": o === "left",
-            "right-0": o === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ l("div", { className: "flex", children: [
-            s && /* @__PURE__ */ e("div", { className: "flex flex-col gap-1 py-4 px-4 min-w-40", children: n.map((t) => /* @__PURE__ */ e(
-              "button",
-              {
+import { t as N } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as w } from "../../../Badge/Badge.js";
+import { TimePicker as C } from "../../../TimePicker/TimePicker.js";
+import { filterButtonIconVariants as B, filterButtonVariants as j } from "../../Filter.variants.js";
+import { useTimeFilterDropdown as D } from "./TimeFilterDropdown.hook.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+var V = ({ label: b, position: o = "left", format: r = "24", presets: i, showTimePicker: d = !0, onApply: h }) => {
+  const { appliedLabel: c, isOpen: n, selectedTime: x, selectedPresetLabel: m, wrapperRef: g, handleApply: f, handleOpen: u, handleSelectPreset: v, handleSelectCustom: y, handleReset: k } = D({
+    onApply: h,
+    format: r
+  }), s = i && i.length > 0;
+  return /* @__PURE__ */ l("div", {
+    ref: g,
+    className: "relative",
+    children: [/* @__PURE__ */ l("button", {
+      className: a(j(), { "text-slate-700 dark:text-metal-100": n }),
+      onClick: u,
+      children: [
+        b,
+        c && /* @__PURE__ */ e(w, { label: c }),
+        /* @__PURE__ */ e(N, { className: a(B(), { "rotate-180 text-blue-600 dark:text-aurora-500": n }) })
+      ]
+    }), n && /* @__PURE__ */ l("div", {
+      className: a("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", "dark:bg-metal-800", "dark:border-metal-700", {
+        "left-0": o === "left",
+        "right-0": o === "right"
+      }),
+      children: [
+        /* @__PURE__ */ l("div", {
+          className: "flex",
+          children: [
+            s && /* @__PURE__ */ e("div", {
+              className: "flex flex-col gap-1 py-4 px-4 min-w-40",
+              children: i.map((t) => /* @__PURE__ */ e("button", {
                 type: "button",
-                className: a(
-                  "text-left",
-                  "px-3",
-                  "py-1.5",
-                  "rounded",
-                  "cursor-pointer",
-                  "text-sm",
-                  "whitespace-nowrap",
-                  "transition-colors",
-                  "hover:bg-gray-100",
-                  "dark:hover:bg-metal-700",
-                  {
-                    "bg-blue-50 text-blue-600 dark:bg-metal-700 dark:text-aurora-500": m === t.label,
-                    "text-gray-700 dark:text-gray-300": m !== t.label
-                  }
-                ),
-                onClick: () => y(t),
+                className: a("text-left", "px-3", "py-1.5", "rounded", "cursor-pointer", "text-sm", "whitespace-nowrap", "transition-colors", "hover:bg-gray-100", "dark:hover:bg-metal-700", {
+                  "bg-blue-50 text-blue-600 dark:bg-metal-700 dark:text-aurora-500": m === t.label,
+                  "text-gray-700 dark:text-gray-300": m !== t.label
+                }),
+                onClick: () => v(t),
                 children: t.label
-              },
-              t.label
-            )) }),
+              }, t.label))
+            }),
             s && d && /* @__PURE__ */ e("div", { className: "w-px bg-gray-200 dark:bg-metal-700" }),
-            d && /* @__PURE__ */ e("div", { className: "py-4 px-6", children: /* @__PURE__ */ e(
-              "div",
-              {
+            d && /* @__PURE__ */ e("div", {
+              className: "py-4 px-6",
+              children: /* @__PURE__ */ e("div", {
                 className: a({
                   "w-35.5": r === "24",
                   "w-52": r === "12"
                 }),
-                children: /* @__PURE__ */ e(
-                  B,
-                  {
-                    format: r,
-                    time: x,
-                    onChange: k,
-                    mode: "input"
-                  }
-                )
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ e("div", { className: "h-px bg-gray-200 dark:bg-metal-700" }),
-          /* @__PURE__ */ l(
-            "div",
-            {
-              className: a(
-                "flex",
-                "justify-end",
-                "items-center",
-                "gap-4",
-                "px-6",
-                "py-3"
-              ),
-              children: [
-                /* @__PURE__ */ e(
-                  p,
-                  {
-                    variant: "secondary",
-                    appearance: "compact",
-                    onClick: v,
-                    children: "Reset"
-                  }
-                ),
-                /* @__PURE__ */ e(p, { appearance: "compact", onClick: f, children: "Apply" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+                children: /* @__PURE__ */ e(C, {
+                  format: r,
+                  time: x,
+                  onChange: y,
+                  mode: "input"
+                })
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ e("div", { className: "h-px bg-gray-200 dark:bg-metal-700" }),
+        /* @__PURE__ */ l("div", {
+          className: a("flex", "justify-end", "items-center", "gap-4", "px-6", "py-3"),
+          children: [/* @__PURE__ */ e(p, {
+            variant: "secondary",
+            appearance: "compact",
+            onClick: k,
+            children: "Reset"
+          }), /* @__PURE__ */ e(p, {
+            appearance: "compact",
+            onClick: f,
+            children: "Apply"
+          })]
+        })
+      ]
+    })]
+  });
 };
 export {
   V as TimeFilterDropdown

package/dist/components/Filter/components/index.js

@@ -1,14 +1,14 @@
 import { BadgeMultiSelect as t } from "./BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as m } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as f } from "./ResetButton/ResetButton.js";
+import { DateFilterDropdown as e } from "./DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as i } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as l } from "./ResetButton/ResetButton.js";
 import { TextMultiSelect as n } from "./TextMultiSelect/TextMultiSelect.js";
 import { TimeFilterDropdown as a } from "./TimeFilterDropdown/TimeFilterDropdown.js";
 export {
   t as BadgeMultiSelect,
-  p as DateFilterDropdown,
-  m as DateRangeFilterDropdown,
-  f as ResetButton,
+  e as DateFilterDropdown,
+  i as DateRangeFilterDropdown,
+  l as ResetButton,
   n as TextMultiSelect,
   a as TimeFilterDropdown
 };

package/dist/components/Filter/contexts/filter.context.js

@@ -1,7 +1,5 @@
 import { createContext as t } from "react";
-const o = t({
-  closeOnApply: !0
-});
+var r = t({ closeOnApply: !0 });
 export {
-  o as FilterContext
+  r as FilterContext
 };

package/dist/components/Filter/contexts/filter.hook.js

@@ -1,9 +1,8 @@
-import { useContext as e } from "react";
-import { FilterContext as r } from "./filter.context.js";
-const n = () => {
-  const t = e(r);
-  if (!t)
-    throw new Error("useFilterContext must be used within a FilterProvider");
+import { FilterContext as e } from "./filter.context.js";
+import { useContext as r } from "react";
+var n = () => {
+  const t = r(e);
+  if (!t) throw new Error("useFilterContext must be used within a FilterProvider");
   return t;
 };
 export {

package/dist/components/Filter/contexts/filter.provider.js

@@ -1,6 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
 import { FilterContext as e } from "./filter.context.js";
-const l = ({ children: r, closeOnApply: o }) => /* @__PURE__ */ t(e.Provider, { value: { closeOnApply: o }, children: r });
+import { jsx as t } from "react/jsx-runtime";
+var v = ({ children: r, closeOnApply: o }) => /* @__PURE__ */ t(e.Provider, {
+  value: { closeOnApply: o },
+  children: r
+});
 export {
-  l as FilterProvider
+  v as FilterProvider
 };

package/dist/components/Filter/contexts/index.js

@@ -1,8 +1,8 @@
 import { FilterContext as t } from "./filter.context.js";
-import { useFilterContext as x } from "./filter.hook.js";
-import { FilterProvider as f } from "./filter.provider.js";
+import { useFilterContext as e } from "./filter.hook.js";
+import { FilterProvider as m } from "./filter.provider.js";
 export {
   t as FilterContext,
-  f as FilterProvider,
-  x as useFilterContext
+  m as FilterProvider,
+  e as useFilterContext
 };

package/dist/components/Filter/events/index.js

@@ -1,12 +1,8 @@
-var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t))(e || {});
-const n = (t) => document.dispatchEvent(
-  new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })
-), o = () => document.dispatchEvent(new CustomEvent(
-  "@konstrtuctio/KonstructFilter/event-RESET"
-  /* RESET */
-));
+var e = /* @__PURE__ */ (function(t) {
+  return t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t;
+})({}), n = (t) => document.dispatchEvent(new CustomEvent(e.OPEN, { detail: t })), E = () => document.dispatchEvent(new CustomEvent(e.RESET));
 export {
   e as FilterEvent,
-  o as resetEvent,
+  E as resetEvent,
   n as sendOpenFilterEvent
 };