@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/DropdownButton/DropdownButton.js

@@ -0,0 +1,136 @@
+import { jsxs as v, jsx as p } from "react/jsx-runtime";
+import w, { forwardRef as E, useState as P, useRef as b, useCallback as y, useEffect as z } from "react";
+import { cn as l } from "../../utils/index.js";
+import { Button as C } from "../Button/Button.js";
+import { P as c } from "../../index-h-Ul0anl.js";
+function m() {
+  return m = Object.assign || function(e) {
+    for (var a = 1; a < arguments.length; a++) {
+      var n = arguments[a];
+      for (var t in n)
+        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    }
+    return e;
+  }, m.apply(this, arguments);
+}
+function L(e, a) {
+  if (e == null) return {};
+  var n = N(e, a), t, r;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < o.length; r++)
+      t = o[r], !(a.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+  }
+  return n;
+}
+function N(e, a) {
+  if (e == null) return {};
+  var n = {}, t = Object.keys(e), r, o;
+  for (o = 0; o < t.length; o++)
+    r = t[o], !(a.indexOf(r) >= 0) && (n[r] = e[r]);
+  return n;
+}
+var g = E(function(e, a) {
+  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, o = r === void 0 ? 24 : r, s = L(e, ["color", "size"]);
+  return /* @__PURE__ */ w.createElement("svg", m({
+    ref: a,
+    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__ */ w.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 T = ({
+  buttonClassName: e,
+  className: a,
+  itemClassName: n,
+  listClassName: t,
+  options: r
+}) => {
+  const [o, s] = P(!1), O = b(null), f = b(null), j = y(() => s((i) => !i), []), x = y((i) => {
+    s(!1), i == null || i();
+  }, []);
+  return z(() => {
+    const i = new AbortController(), u = (d) => {
+      d.key === "Escape" && s(!1);
+    }, k = (d) => {
+      var h;
+      (h = f.current) != null && h.contains(d.target) || s(!1);
+    };
+    return document.addEventListener("keydown", u, {
+      signal: i.signal
+    }), document.addEventListener("mousedown", k, {
+      signal: i.signal
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        document.hidden && s(!1);
+      },
+      {
+        signal: i.signal
+      }
+    ), () => {
+      i.abort();
+    };
+  }, [f]), /* @__PURE__ */ v("div", { ref: f, className: l("relative w-full", a), children: [
+    /* @__PURE__ */ v(
+      C,
+      {
+        ref: O,
+        className: l(
+          "flex gap-2 items-center justify-between w-full",
+          e
+        ),
+        onClick: j,
+        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((i, u) => /* @__PURE__ */ p(
+          "li",
+          {
+            className: l(
+              "hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer",
+              n
+            ),
+            onClick: () => x(i.onClick),
+            children: i.label
+          },
+          u
+        ))
+      }
+    )
+  ] });
+};
+export {
+  T as DropdownButton
+};

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

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import { Button as m } from "../../../Button/Button.js";
+import { resetEvent as n } from "../../events/index.js";
+const f = ({ disabled: e, onClick: t }) => {
+  const r = a(() => {
+    n(), t == null || t();
+  }, [t]);
+  return /* @__PURE__ */ o(
+    m,
+    {
+      type: "button",
+      variant: "text",
+      appearance: "compact",
+      version: "alternate",
+      onClick: r,
+      disabled: e,
+      children: "Reset"
+    }
+  );
+};
+export {
+  f 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
+};