@konstructio/ui 0.0.13-alpha.1 → 0.1.0-alpha.10

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-UW8ts6wI.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-UW8ts6wI.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,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/Input/Input.js

@@ -1,110 +1,51 @@
-import { jsxs as O, jsx as c } from "react/jsx-runtime";
-import l, { forwardRef as p, useState as E, useId as k } from "react";
-import { cn as w } from "../../utils/index.js";
-import { inputVariants as z } from "./Input.variants.js";
-import { P as a } from "../../index-C5psggHV.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var t in r)
-        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import l, { forwardRef as v, useId as k, useState as z } from "react";
+import { cn as d } from "../../utils/index.js";
+import { inputVariants as _ } from "./Input.variants.js";
+import { SearchIcon as I } from "../../assets/icons/components/Search.js";
+import { Warning as W } from "../../assets/icons/components/Warning.js";
+import { P as i } from "../../index-h-Ul0anl.js";
+function h() {
+  return h = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var o = arguments[r];
+      for (var e in o)
+        Object.prototype.hasOwnProperty.call(o, e) && (t[e] = o[e]);
     }
-    return e;
-  }, u.apply(this, arguments);
+    return t;
+  }, h.apply(this, arguments);
 }
-function N(e, o) {
-  if (e == null) return {};
-  var r = $(e, o), t, n;
+function $(t, r) {
+  if (t == null) return {};
+  var o = L(t, r), e, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < i.length; n++)
-      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (n = 0; n < a.length; n++)
+      e = a[n], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (o[e] = t[e]);
   }
-  return r;
+  return o;
 }
-function $(e, o) {
-  if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, i;
-  for (i = 0; i < t.length; i++)
-    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
-  return r;
+function L(t, r) {
+  if (t == null) return {};
+  var o = {}, e = Object.keys(t), n, a;
+  for (a = 0; a < e.length; a++)
+    n = e[a], !(r.indexOf(n) >= 0) && (o[n] = t[n]);
+  return o;
 }
-var h = p(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = N(e, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", u({
-    ref: o,
+var y = v(function(t, r) {
+  var o = t.color, e = o === void 0 ? "currentColor" : o, n = t.size, a = n === void 0 ? 24 : n, c = $(t, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", h({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: t,
+    stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ l.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /* @__PURE__ */ l.createElement("line", {
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "12"
-  }), /* @__PURE__ */ l.createElement("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12.01",
-    y2: "16"
-  }));
-});
-h.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
-};
-h.displayName = "AlertCircle";
-function m() {
-  return m = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var t in r)
-        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
-    }
-    return e;
-  }, m.apply(this, arguments);
-}
-function _(e, o) {
-  if (e == null) return {};
-  var r = L(e, o), t, n;
-  if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < i.length; n++)
-      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
-  }
-  return r;
-}
-function L(e, o) {
-  if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, i;
-  for (i = 0; i < t.length; i++)
-    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
-  return r;
-}
-var v = p(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = _(e, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", m({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ l.createElement("path", {
     d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
   }), /* @__PURE__ */ l.createElement("line", {
     x1: "1",
@@ -113,52 +54,52 @@ var v = p(function(e, o) {
     y2: "23"
   }));
 });
-v.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+y.propTypes = {
+  color: i.string,
+  size: i.oneOfType([i.string, i.number])
 };
-v.displayName = "EyeOff";
-function y() {
-  return y = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var t in r)
-        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+y.displayName = "EyeOff";
+function g() {
+  return g = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var o = arguments[r];
+      for (var e in o)
+        Object.prototype.hasOwnProperty.call(o, e) && (t[e] = o[e]);
     }
-    return e;
-  }, y.apply(this, arguments);
+    return t;
+  }, g.apply(this, arguments);
 }
-function W(e, o) {
-  if (e == null) return {};
-  var r = I(e, o), t, n;
+function S(t, r) {
+  if (t == null) return {};
+  var o = T(t, r), e, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < i.length; n++)
-      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (n = 0; n < a.length; n++)
+      e = a[n], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (o[e] = t[e]);
   }
-  return r;
+  return o;
 }
-function I(e, o) {
-  if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, i;
-  for (i = 0; i < t.length; i++)
-    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
-  return r;
+function T(t, r) {
+  if (t == null) return {};
+  var o = {}, e = Object.keys(t), n, a;
+  for (a = 0; a < e.length; a++)
+    n = e[a], !(r.indexOf(n) >= 0) && (o[n] = t[n]);
+  return o;
 }
-var g = p(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = W(e, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", y({
-    ref: o,
+var x = v(function(t, r) {
+  var o = t.color, e = o === void 0 ? "currentColor" : o, n = t.size, a = n === void 0 ? 24 : n, c = S(t, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", g({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: t,
+    stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ l.createElement("path", {
     d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
   }), /* @__PURE__ */ l.createElement("circle", {
     cx: "12",
@@ -166,56 +107,86 @@ var g = p(function(e, o) {
     r: "3"
   }));
 });
-g.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+x.propTypes = {
+  color: i.string,
+  size: i.oneOfType([i.string, i.number])
 };
-g.displayName = "Eye";
-const T = p(
+x.displayName = "Eye";
+const C = v(
   ({
-    className: e,
-    error: o,
-    label: r,
-    labelClassName: t,
-    name: n,
-    type: i,
-    theme: s,
-    ...b
-  }, x) => {
-    const [f, j] = E(!1), d = k(), P = f ? g : v;
-    return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5 w-full", "data-theme": s, children: [
-      r ? /* @__PURE__ */ c("label", { htmlFor: d, className: w("cursor-pointer", t), children: r }) : null,
-      /* @__PURE__ */ O("div", { className: "relative", children: [
-        /* @__PURE__ */ c(
+    className: t,
+    error: r,
+    isRequired: o = !1,
+    isSearch: e = !1,
+    label: n,
+    labelClassName: a,
+    name: c,
+    theme: b,
+    type: p = "text",
+    helperText: w,
+    ...j
+  }, N) => {
+    const O = k(), [u, E] = z(() => p !== "password"), f = typeof r == "string" && r.length >= 0, P = u ? x : y;
+    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": b, children: [
+      n ? /* @__PURE__ */ m(
+        "label",
+        {
+          htmlFor: O,
+          className: d(
+            "cursor-pointer text-slate-500 flex gap-1 text-sm font-medium",
+            a
+          ),
+          children: [
+            n,
+            " ",
+            o ? /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" }) : null
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ m("div", { className: "relative", children: [
+        e ? /* @__PURE__ */ s(
+          "i",
+          {
+            className: d(
+              "absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
+              f && "text-red-600"
+            ),
+            children: /* @__PURE__ */ s(I, { className: "w-5 h-5" })
+          }
+        ) : null,
+        /* @__PURE__ */ s(
           "input",
           {
-            id: d,
-            ref: x,
-            name: n,
-            type: f ? "text" : i,
-            className: w(
-              z({
-                className: e,
-                variant: o ? "error" : "default"
-              })
+            id: O,
+            ref: N,
+            name: c,
+            type: u ? p : "password",
+            className: d(
+              _({
+                className: t,
+                variant: f ? "error" : "default"
+              }),
+              (p === "password" || f) && "pr-10",
+              e && "pl-8"
             ),
-            ...b
+            ...j
           }
         ),
-        o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(h, { className: "w-5 h-5" }) }) : null,
-        i === "password" && !o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(
+        f ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-600 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(W, { className: "w-5 h-5" }) }) : null,
+        p === "password" && !r ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(
           P,
           {
             className: "w-5 h-5 cursor-pointer",
-            onClick: () => j(!f)
+            onClick: () => E(!u)
           }
         ) }) : null
       ] }),
-      o ? /* @__PURE__ */ c("span", { className: "text-xs text-red-600 -mt-0.5", children: o }) : null
+      r ? /* @__PURE__ */ s("span", { className: "text-xs text-red-600", children: r }) : null,
+      !r && w ? /* @__PURE__ */ s("span", { className: "text-xs text-slate-600", children: w }) : null
     ] });
   }
 );
-T.displayName = "Input";
+C.displayName = "Input";
 export {
-  T as Input
+  C as Input
 };