@konstructio/ui 0.1.0-alpha.7 → 0.1.0-alpha.8

package/dist/components/Filter/Filter.js

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as m } from "../../utils/index.js";
+import { filterVariants as a } from "./Filter.variants.js";
+import { BadgeMultiSelect as l } from "./components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as p } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { ResetButton as s } from "./components/ResetButton/ResetButton.js";
+const t = ({
+  className: e,
+  theme: o = "civo",
+  children: r
+}) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
+t.displayName = "Filter";
+t.BadgeMultiSelect = l;
+t.DateFilterDropdown = p;
+t.ResetButton = s;
+export {
+  l as BadgeMultiSelect,
+  p as DateFilterDropdown,
+  t as Filter
+};

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

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

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

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

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

@@ -0,0 +1,82 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Badge as c } from "../../../Badge/Badge.js";
+import { Button as s } from "../../../Button/Button.js";
+import { Checkbox as x } from "../../../Checkbox/Checkbox.js";
+import { cn as o } from "../../../../utils/index.js";
+import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
+import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
+import { C as B } from "../../../../chevron-down-UW8ts6wI.js";
+const V = ({
+  options: n,
+  label: m,
+  onApply: p
+}) => {
+  const {
+    wrapperRef: f,
+    isOpen: l,
+    selectedOptions: h,
+    selectedCount: i,
+    handleOpen: u,
+    handleResetOptions: g,
+    handleApplyOptions: b,
+    handleSelectOption: v
+  } = N({ onApply: p });
+  return n.length === 0 ? null : /* @__PURE__ */ t("div", { ref: f, className: "relative", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: o(y(), {
+          "text-slate-700": l
+        }),
+        onClick: u,
+        children: [
+          m,
+          i.length > 0 && /* @__PURE__ */ e(c, { label: i.length.toString() }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              className: o(C(), {
+                "rotate-180": l,
+                "text-blue-600": l
+              })
+            }
+          )
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ t("div", { className: "absolute top-full mt-1 left-0 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200", children: [
+      /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: n.map((a) => {
+        const d = !!h.find(
+          (r) => r.id === a.id
+        );
+        return /* @__PURE__ */ t("div", { className: "flex gap-4 px-6", children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              defaultChecked: d,
+              "data-label": a.id,
+              onChange: (r) => v(a, r)
+            },
+            `${a.id}-${d}`
+          ),
+          /* @__PURE__ */ e(c, { label: a.label, variant: a.variant })
+        ] }, a.id);
+      }) }) }),
+      /* @__PURE__ */ t("div", { className: "flex justify-center items-center gap-4 py-4 border-t border-gray-200", children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            variant: "secondary",
+            appearance: "compact",
+            onClick: g,
+            children: "Reset"
+          }
+        ),
+        /* @__PURE__ */ e(s, { appearance: "compact", onClick: b, children: "Apply" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  V as BadgeMultiSelect
+};

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

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

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

@@ -0,0 +1,77 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Badge as u } from "../../../Badge/Badge.js";
+import { Button as n } from "../../../Button/Button.js";
+import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
+import { cn as l } from "../../../../utils/index.js";
+import { filterButtonIconVariants as x, filterButtonVariants as N } from "../../Filter.variants.js";
+import { useDateFilterDropdown as b } from "./DateFilterDropdown.hook.js";
+import { C as g } from "../../../../chevron-down-UW8ts6wI.js";
+const O = ({
+  label: i,
+  onApply: p
+}) => {
+  const {
+    id: s,
+    appliedDay: o,
+    isOpen: a,
+    selectedDay: e,
+    wrapperRef: m,
+    handleApply: c,
+    handleOpen: d,
+    handleSelect: f,
+    handleReset: h
+  } = b({ onApply: p });
+  return /* @__PURE__ */ r("div", { ref: m, className: "relative", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        className: l(N(), {
+          "text-slate-700": a
+        }),
+        onClick: d,
+        children: [
+          i,
+          o && /* @__PURE__ */ t(u, { label: o }),
+          /* @__PURE__ */ t(
+            g,
+            {
+              className: l(x(), {
+                "rotate-180": a,
+                "text-blue-600": a
+              })
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ r("div", { className: "absolute top-full mt-1 left-0 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", children: [
+      /* @__PURE__ */ t(
+        w,
+        {
+          className: "p-0",
+          arrowClassName: "-top-1 right-0",
+          monthsClassName: "shadow-none p-0 w-auto",
+          defaultSelected: e,
+          defaultMonth: e,
+          onSelect: f
+        },
+        (e == null ? void 0 : e.toISOString()) ?? s
+      ),
+      /* @__PURE__ */ r("div", { className: "flex justify-end items-center gap-4 py-2", children: [
+        /* @__PURE__ */ t(
+          n,
+          {
+            variant: "secondary",
+            appearance: "compact",
+            onClick: h,
+            children: "Reset"
+          }
+        ),
+        /* @__PURE__ */ t(n, { appearance: "compact", onClick: c, children: "Apply" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  O as DateFilterDropdown
+};

package/dist/components/Filter/components/ResetButton/ResetButton.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as o } from "../../../Button/Button.js";
+import { resetEvent as r } from "../../events/index.js";
+const i = ({ disabled: t }) => /* @__PURE__ */ e(
+  o,
+  {
+    type: "button",
+    variant: "text",
+    appearance: "compact",
+    version: "alternate",
+    onClick: r,
+    disabled: t,
+    children: "Reset"
+  }
+);
+export {
+  i as ResetButton
+};

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

@@ -0,0 +1,8 @@
+import { BadgeMultiSelect as o } from "./BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
+import { ResetButton as l } from "./ResetButton/ResetButton.js";
+export {
+  o as BadgeMultiSelect,
+  p as DateFilterDropdown,
+  l as ResetButton
+};

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

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

package/dist/components/Loading/Loading.js

@@ -1,9 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../utils/index.js";
 import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-vyksFS6P.js";
+import { c as t } from "../../createLucideIcon-ByJ0JZvK.js";
 /**
-* @license lucide-react v0.511.0 - ISC
+* @license lucide-react v0.513.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,37 +1,31 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as C, useState as E, useRef as I, useCallback as L, useEffect as O } from "react";
-import { cn as m } from "../../../../utils/index.js";
+import { useId as y, useState as E, useRef as O, useCallback as I, useEffect as L } from "react";
+import { cn as d } from "../../../../utils/index.js";
 import { timePickerVariants as j } from "../../TimePicker.variants.js";
 import { WrapperList as P } from "../WrapperList/WrapperList.js";
-import { c as R } from "../../../../createLucideIcon-vyksFS6P.js";
+import { C as R } from "../../../../chevron-down-UW8ts6wI.js";
 import { useTimePickerContext as T } from "../../contexts/time-picker.hook.js";
-/**
-* @license lucide-react v0.511.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const W = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], _ = R("chevron-down", W), $ = ({
+const $ = ({
   name: p,
   label: i,
-  required: u,
-  scrollBehavior: f,
-  className: h,
-  listClassName: x,
+  required: f,
+  scrollBehavior: u,
+  className: x,
+  listClassName: h,
   listItemClassName: w,
   listItemButtonClassName: b
 }) => {
-  const k = C(), [n, o] = E(!1), l = I(null), { format: v, formattedTime: c } = T(), r = p ?? `time-${k}`, N = L(() => o((e) => !e), []);
-  return O(() => {
-    const e = new AbortController(), g = (s) => {
-      s.key === "Escape" && o(!1);
-    }, y = (s) => {
-      var d;
-      (d = l.current) != null && d.contains(s.target) || o(!1);
+  const g = y(), [n, r] = E(!1), l = O(null), { format: k, formattedTime: c } = T(), s = p ?? `time-${g}`, v = I(() => r((e) => !e), []);
+  return L(() => {
+    const e = new AbortController(), C = (o) => {
+      o.key === "Escape" && r(!1);
+    }, N = (o) => {
+      var m;
+      (m = l.current) != null && m.contains(o.target) || r(!1);
     };
-    return document.addEventListener("mousedown", y, {
+    return document.addEventListener("mousedown", N, {
       signal: e.signal
-    }), document.addEventListener("keydown", g, {
+    }), document.addEventListener("keydown", C, {
       signal: e.signal
     }), () => {
       e.abort();
@@ -40,31 +34,31 @@ const W = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], _ = R("chevron-down"
     "div",
     {
       ref: l,
-      className: m(
+      className: d(
         "w-max text-slate-800 text-sm flex flex-col gap-2",
-        v === "12" ? "w-[208px]" : "w-[140px]"
+        k === "12" ? "w-[208px]" : "w-[140px]"
       ),
       children: [
-        i ? /* @__PURE__ */ t("label", { htmlFor: r, className: "text-slate-500 font-medium", children: [
+        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
           i,
           " ",
-          u && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
+          f && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
         ] }) : null,
         /* @__PURE__ */ t("div", { className: "relative", children: [
           /* @__PURE__ */ t(
             "button",
             {
-              "aria-label": r,
+              "aria-label": s,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: m(j({ className: h })),
+              className: d(j({ className: x })),
               "data-open": n,
-              onClick: N,
+              onClick: v,
               children: [
                 c,
                 /* @__PURE__ */ a(
-                  _,
+                  R,
                   {
                     className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
                     "data-open": n
@@ -77,8 +71,8 @@ const W = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], _ = R("chevron-down"
             P,
             {
               isOpen: n,
-              scrollBehavior: f,
-              listClassName: x,
+              scrollBehavior: u,
+              listClassName: h,
               listItemClassName: w,
               listItemButtonClassName: b
             }
@@ -88,7 +82,7 @@ const W = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], _ = R("chevron-down"
           "input",
           {
             type: "hidden",
-            name: r,
+            name: s,
             value: c,
             className: "hidden"
           }