@konstructio/ui 0.1.0-alpha.8 → 0.1.1-alpha.1

package/dist/components/DropdownButton/DropdownButton.js

@@ -0,0 +1,135 @@
+import { jsxs as h, jsx as p } from "react/jsx-runtime";
+import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
+import { cn as l } from "../../utils/index.js";
+import { Button as P } from "../Button/Button.js";
+import { P as c } from "../../index-h-Ul0anl.js";
+function m() {
+  return m = Object.assign || function(e) {
+    for (var i = 1; i < arguments.length; i++) {
+      var n = arguments[i];
+      for (var t in n)
+        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    }
+    return e;
+  }, m.apply(this, arguments);
+}
+function z(e, i) {
+  if (e == null) return {};
+  var n = L(e, i), t, r;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < o.length; r++)
+      t = o[r], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+  }
+  return n;
+}
+function L(e, i) {
+  if (e == null) return {};
+  var n = {}, t = Object.keys(e), r, o;
+  for (o = 0; o < t.length; o++)
+    r = t[o], !(i.indexOf(r) >= 0) && (n[r] = e[r]);
+  return n;
+}
+var g = x(function(e, i) {
+  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, o = r === void 0 ? 24 : r, s = z(e, ["color", "size"]);
+  return /* @__PURE__ */ v.createElement("svg", m({
+    ref: i,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: o,
+    height: o,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, s), /* @__PURE__ */ v.createElement("polyline", {
+    points: "6 9 12 15 18 9"
+  }));
+});
+g.propTypes = {
+  color: c.string,
+  size: c.oneOfType([c.string, c.number])
+};
+g.displayName = "ChevronDown";
+const I = ({
+  buttonClassName: e,
+  className: i,
+  itemClassName: n,
+  listClassName: t,
+  options: r
+}) => {
+  const [o, s] = C(!1), y = w(null), f = w(null), O = b(() => s((a) => !a), []), k = b((a) => {
+    s(!1), a?.();
+  }, []);
+  return E(() => {
+    const a = new AbortController(), u = (d) => {
+      d.key === "Escape" && s(!1);
+    }, j = (d) => {
+      f.current?.contains(d.target) || s(!1);
+    };
+    return document.addEventListener("keydown", u, {
+      signal: a.signal
+    }), document.addEventListener("mousedown", j, {
+      signal: a.signal
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        document.hidden && s(!1);
+      },
+      {
+        signal: a.signal
+      }
+    ), () => {
+      a.abort();
+    };
+  }, [f]), /* @__PURE__ */ h("div", { ref: f, className: l("relative w-full", i), children: [
+    /* @__PURE__ */ h(
+      P,
+      {
+        ref: y,
+        className: l(
+          "flex gap-2 items-center justify-between w-full",
+          e
+        ),
+        onClick: O,
+        children: [
+          "Download Invoice as",
+          /* @__PURE__ */ p(
+            g,
+            {
+              className: l({
+                "transform rotate-180": o,
+                "transition-transform duration-200": !0
+              })
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ p(
+      "ul",
+      {
+        className: l(
+          "absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded shadow-xs animate-in fade-in-0 py-2",
+          t
+        ),
+        children: r.map((a, u) => /* @__PURE__ */ p(
+          "li",
+          {
+            className: l(
+              "hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer",
+              n
+            ),
+            onClick: () => k(a.onClick),
+            children: a.label
+          },
+          u
+        ))
+      }
+    )
+  ] });
+};
+export {
+  I as DropdownButton
+};

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

@@ -1,4 +1,4 @@
-import { c as t } from "../../index-BNmRGtA6.js";
+import { c as t } from "../../index-D29mdTf5.js";
 const a = t(["flex", "gap-8", "items-center"]), n = t([
   "flex",
   "items-center",

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

@@ -1,23 +1,23 @@
-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
+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 a = C(), c = S(null), [g, l] = m(!1), [n, d] = m([]);
-  f(() => {
+  const r = b(), a = C(null), [f, d] = u(!1), [s, i] = u([]);
+  m(() => {
     const e = new AbortController();
     return document.addEventListener(
-      E.OPEN,
-      (s) => {
-        s.detail !== a && l(!1);
+      p.OPEN,
+      (t) => {
+        t.detail !== r && d(!1);
       },
       {
         signal: e.signal
       }
     ), document.addEventListener(
-      E.RESET,
+      p.RESET,
       () => {
-        d([]), t == null || t([]);
+        i([]), l?.([]);
       },
       {
         signal: e.signal
@@ -25,45 +25,43 @@ const I = ({
     ), () => {
       e.abort();
     };
-  }, [a, t]);
-  const O = r(
-    () => l((e) => (e || (L(a), d(
-      (s) => s.filter((i) => i.isApplied)
+  }, [r, l]);
+  const v = o(
+    () => d((e) => (e || (S(r), i(
+      (t) => t.filter((n) => n.isApplied)
     )), !e)),
-    [a, l]
-  ), o = r(() => l(!1), []), h = r(
-    (e, s) => {
-      d(s ? [
-        ...n,
+    [r, d]
+  ), c = o(() => d(!1), []), E = o(
+    (e, t) => {
+      i(t ? [
+        ...s,
         { ...e, isApplied: !1 }
-      ] : n.map((i) => i.id === e.id ? { ...i, isRemoved: !0 } : i));
+      ] : s.map((n) => n.id === e.id ? { ...n, isRemoved: !0 } : n));
     },
-    [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
+    [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
       )
     );
-  }, [t, n, d]), b = w(
-    () => n.filter((e) => e.isApplied),
-    [n]
+  }, [l, s, i]), h = w(
+    () => s.filter((e) => e.isApplied),
+    [s]
   );
-  return f(() => {
-    const e = new AbortController(), s = (i) => {
-      var u;
-      (u = c.current) != null && u.contains(i.target) || o();
+  return m(() => {
+    const e = new AbortController(), t = (n) => {
+      a.current?.contains(n.target) || c();
     };
-    return document.addEventListener("mousedown", s, {
+    return document.addEventListener("mousedown", t, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && o();
+        document.hidden && c();
       },
       {
         signal: e.signal
@@ -71,17 +69,17 @@ const I = ({
     ), () => {
       e.abort();
     };
-  }, [o, c]), {
-    isOpen: g,
-    selectedCount: b,
-    selectedOptions: n,
-    wrapperRef: c,
-    handleApplyOptions: R,
-    handleOpen: O,
-    handleResetOptions: v,
-    handleSelectOption: h
+  }, [c, a]), {
+    isOpen: f,
+    selectedCount: h,
+    selectedOptions: s,
+    wrapperRef: a,
+    handleApplyOptions: g,
+    handleOpen: v,
+    handleResetOptions: O,
+    handleSelectOption: E
   };
 };
 export {
-  I as useBadgeMultiSelect
+  k as useBadgeMultiSelect
 };

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

@@ -1,41 +1,42 @@
-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
+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-CVce9Mvh.js";
+const $ = ({
+  options: i,
+  label: p,
+  position: d = "left",
+  onApply: f
 }) => {
   const {
-    wrapperRef: f,
+    wrapperRef: h,
     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(
+    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: o(y(), {
+        className: n(N(), {
           "text-slate-700": l
         }),
-        onClick: u,
+        onClick: g,
         children: [
-          m,
-          i.length > 0 && /* @__PURE__ */ e(c, { label: i.length.toString() }),
+          p,
+          c.length > 0 && /* @__PURE__ */ e(o, { label: c.length.toString() }),
           /* @__PURE__ */ e(
-            B,
+            O,
             {
-              className: o(C(), {
+              className: n(y(), {
                 "rotate-180": l,
                 "text-blue-600": l
               })
@@ -44,39 +45,51 @@ const V = ({
         ]
       }
     ),
-    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,
+    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",
           {
-            variant: "secondary",
-            appearance: "compact",
-            onClick: g,
-            children: "Reset"
+            "left-0": d === "left",
+            "right-0": d === "right"
           }
         ),
-        /* @__PURE__ */ e(s, { appearance: "compact", onClick: b, children: "Apply" })
-      ] })
-    ] })
+        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" })
+          ] })
+        ]
+      }
+    )
   ] });
 };
 export {
-  V as BadgeMultiSelect
+  $ as BadgeMultiSelect
 };

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

@@ -1,29 +1,29 @@
-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
+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 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", {
+  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"
     }),
-    [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(() => {
+    [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(() => {
     const e = new AbortController();
     return document.addEventListener(
-      v.OPEN,
-      (s) => {
-        s.detail !== n && o(!1);
+      f.OPEN,
+      (o) => {
+        o.detail !== t && a(!1);
       },
       {
         signal: e.signal
@@ -31,20 +31,20 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [n]), f(() => {
+  }, [t]), E(() => {
     const e = new AbortController();
     return document.addEventListener(
-      v.OPEN,
-      (s) => {
-        s.detail !== n && o(!1);
+      f.OPEN,
+      (o) => {
+        o.detail !== t && a(!1);
       },
       {
         signal: e.signal
       }
     ), document.addEventListener(
-      v.RESET,
+      f.RESET,
       () => {
-        d(void 0), l(void 0), t == null || t();
+        l(void 0), d(void 0), n?.();
       },
       {
         signal: e.signal
@@ -52,17 +52,16 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [n, t]), f(() => {
-    const e = new AbortController(), s = (m) => {
-      var g;
-      (g = c.current) != null && g.contains(m.target) || u();
+  }, [t, n]), E(() => {
+    const e = new AbortController(), o = (u) => {
+      i.current?.contains(u.target) || c();
     };
-    return document.addEventListener("mousedown", s, {
+    return document.addEventListener("mousedown", o, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && u();
+        document.hidden && c();
       },
       {
         signal: e.signal
@@ -70,18 +69,18 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [u, c]), {
-    id: n,
-    appliedDay: b,
-    isOpen: h,
-    selectedDay: a,
-    wrapperRef: c,
-    handleApply: O,
-    handleOpen: D,
-    handleSelect: w,
-    handleReset: C
+  }, [c, i]), {
+    id: t,
+    appliedDay: h,
+    isOpen: g,
+    selectedDay: r,
+    wrapperRef: i,
+    handleApply: D,
+    handleOpen: p,
+    handleSelect: b,
+    handleReset: O
   };
 };
 export {
-  N as useDateFilterDropdown
+  R as useDateFilterDropdown
 };