@konstructio/ui 0.0.13-alpha.2 → 0.1.0-alpha.11

package/dist/components/Datepicker/DatePicker.variants.js

@@ -0,0 +1,5 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t("w-fit py-4 px-6");
+export {
+  r as datePickerVariants
+};

package/dist/components/Divider/Divider.variants.js

@@ -1,17 +1,14 @@
 import { c as a } from "../../index-BNmRGtA6.js";
-const t = a(
-  ["h-[1px]", "bg-zinc-200", "w-full", "border-gray-200"],
-  {
-    variants: {
-      variant: {
-        default: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+  variants: {
+    variant: {
+      default: ""
     }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-);
+});
 export {
-  t as dividerVariants
+  i as dividerVariants
 };

package/dist/components/Dropdown/components/List/List.js

@@ -1,27 +1,64 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as u, useRef as c, useImperativeHandle as d } from "react";
-import { cn as b } from "../../../../utils/index.js";
-import { useNavigationUlList as v } from "../../hooks/useNavigationList.js";
-import { ListItem as t } from "../ListItem/ListItem.js";
-import { listVariants as x } from "./List.variants.js";
-import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
-const I = u(
-  ({ isLoading: r, options: i, wrapperRef: s, wrapperInputRef: a, name: m }, n) => {
-    const e = c(null), { isOpen: f } = L();
-    d(n, () => e.current, [e]), v({ ulRef: e, wrapperRef: s, wrapperInputRef: a });
-    const p = i.length === 0;
-    return /* @__PURE__ */ o(
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as v, useRef as w, useImperativeHandle as N } from "react";
+import { cn as h } from "../../../../utils/index.js";
+import { useNavigationUlList as x } from "../../hooks/useNavigationList.js";
+import { ListItem as s } from "../ListItem/ListItem.js";
+import { listVariants as C } from "./List.variants.js";
+import { useDropdownContext as k } from "../../contexts/dropdown.hook.js";
+const T = v(
+  ({
+    className: i,
+    isLoading: n,
+    itemClassName: o,
+    name: c,
+    options: r,
+    searchable: m = !1,
+    wrapperInputRef: f,
+    wrapperRef: p
+  }, u) => {
+    const l = w(null), { isOpen: b, searchTerm: d } = k();
+    N(u, () => l.current, [l]), x({ ulRef: l, wrapperRef: p, wrapperInputRef: f });
+    const a = m ? r.filter((e) => {
+      const g = d.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(g);
+    }) : r, L = a.length === 0;
+    return /* @__PURE__ */ t(
       "ul",
       {
-        ref: e,
-        title: m,
+        ref: l,
+        title: c,
         role: "listbox",
-        className: b(x(), f ? "flex" : "hidden"),
-        children: r ? /* @__PURE__ */ o(t, { isClickable: !1, value: "Loading...", label: "Loading..." }) : p ? /* @__PURE__ */ o(t, { isClickable: !1, value: "No options", label: "No options" }) : i.map((l) => /* @__PURE__ */ o(t, { isClickable: !0, ...l }, l.value))
+        className: h(C({ className: i })),
+        "data-state": b ? "open" : "closed",
+        children: n ? /* @__PURE__ */ t(
+          s,
+          {
+            className: o,
+            isClickable: !1,
+            value: "Loading...",
+            label: "Loading..."
+          }
+        ) : L ? /* @__PURE__ */ t(
+          s,
+          {
+            className: o,
+            isClickable: !1,
+            value: "No options",
+            label: "No options"
+          }
+        ) : a.map((e) => /* @__PURE__ */ t(
+          s,
+          {
+            className: o,
+            isClickable: !0,
+            ...e
+          },
+          e.value
+        ))
       }
     );
   }
 );
 export {
-  I as List
+  T as List
 };

package/dist/components/Dropdown/components/List/List.variants.js

@@ -1,5 +1,5 @@
 import { c as o } from "../../../../index-BNmRGtA6.js";
-const r = o([
+const a = o([
   "absolute",
   "bg-white",
   "border",
@@ -17,8 +17,10 @@ const r = o([
   "max-h-[185px]",
   "overflow-y-auto",
   "border-gray-200",
-  "text-zinc-700"
+  "text-zinc-700",
+  "data-[state=open]:block",
+  "data-[state=closed]:hidden"
 ]);
 export {
-  r as listVariants
+  a as listVariants
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,37 +1,43 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useRef as p, useCallback as s } from "react";
-import { cn as u } from "../../../../utils/index.js";
-import { listItemVariants as d } from "./ListItem.variants.js";
-import { Typography as h } from "../../../Typography/Typography.js";
-import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
-const g = ({ isClickable: a, ...e }) => {
-  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
-    (t) => {
-      n(t.value), r(!1);
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useRef as u, useCallback as s } from "react";
+import { Typography as d } from "../../../Typography/Typography.js";
+import { cn as h } from "../../../../utils/index.js";
+import { listItemVariants as x } from "./ListItem.variants.js";
+import { useDropdownContext as y } from "../../contexts/dropdown.hook.js";
+const j = ({
+  isClickable: a,
+  className: i,
+  ...t
+}) => {
+  const { setValue: l, toggleOpen: n } = y(), c = u(null), o = s(
+    (e) => {
+      l(e.value), n(!1);
     },
-    [n, r]
-  ), i = s(
-    (t, m) => {
-      t.key === "Enter" && l(m);
+    [l, n]
+  ), m = s(
+    (e, f) => {
+      e.key === "Enter" && (e.stopPropagation(), o(f));
     },
-    [l]
+    [o]
   );
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "li",
     {
       ref: c,
       role: "option",
-      className: u(d()),
+      className: h(x({ className: i })),
       tabIndex: 0,
-      onClick: () => a && l(e),
-      onKeyDown: (t) => i(t, e),
+      onClick: (e) => {
+        a && (o(t), e.stopPropagation());
+      },
+      onKeyDown: (e) => m(e, t),
       children: [
-        e.leftIcon ? /* @__PURE__ */ o("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
-        /* @__PURE__ */ o(h, { variant: "body2", className: "text-zinc-700", children: e.label })
+        t.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: t.leftIcon }) : null,
+        /* @__PURE__ */ r(d, { variant: "body2", className: "text-zinc-700", children: t.label })
       ]
     }
   );
 };
 export {
-  g as ListItem
+  j as ListItem
 };

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,129 +1,153 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { forwardRef as $, useId as A, useRef as R, useImperativeHandle as H, useMemo as M, useEffect as m } from "react";
-import { Loading as U } from "../../Loading/Loading.js";
-import { Typography as O } from "../../Typography/Typography.js";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W, useId as B, useRef as j, useImperativeHandle as G, useMemo as J, useEffect as N } from "react";
+import { Loading as K } from "../../Loading/Loading.js";
 import { cn as p } from "../../../utils/index.js";
-import { labelVariants as W, dropdownVariants as B } from "../Dropdown.variants.js";
-import { useDropdown as G } from "../hooks/useDropdown.js";
-import { List as J } from "./List/List.js";
-import { C as K } from "../../../chevron-up-DgLBQCKD.js";
-import { useDropdownContext as P } from "../contexts/dropdown.hook.js";
-const re = $(
+import { labelVariants as Q, dropdownVariants as X } from "../Dropdown.variants.js";
+import { useDropdown as Y } from "../hooks/useDropdown.js";
+import { List as Z } from "./List/List.js";
+import { Typography as _ } from "../../Typography/Typography.js";
+import { C as q } from "../../../chevron-up-RLP4nX7V.js";
+import { useDropdownContext as V } from "../contexts/dropdown.hook.js";
+const de = W(
   ({
-    theme: z,
-    label: u,
-    labelClassName: j,
-    placeholder: E,
-    name: s,
-    options: n,
-    required: x,
-    defaultValue: d,
-    isLoading: h
-  }, L) => {
-    const v = A(), a = R(null), b = R(null), { wrapperRef: l, wrapperInputRef: w, handleOpen: k, handleOpenIfClosed: D } = G({ ulRef: b }), { isOpen: N, toggleOpen: g, value: t, setValue: I } = P(), c = s ? `${v}-${s}` : v;
-    H(L, () => a.current, [a]);
-    const e = M(() => n.find(({ value: o }) => o === t), [n, t]);
-    m(() => {
-      a.current && (a.current.value = t ? e == null ? void 0 : e.value : "");
-    }, [e, t]), m(() => {
-      if (d && !t) {
-        const o = n && n.find((i) => i.value === d);
-        o && I(o.value);
+    className: k,
+    defaultValue: u,
+    iconClassName: E,
+    isLoading: C,
+    label: x,
+    labelClassName: D,
+    listClassName: F,
+    listItemClassName: M,
+    name: i,
+    options: r,
+    placeholder: h,
+    required: g,
+    searchable: y = !1,
+    theme: $,
+    wrapperClassName: A
+  }, H) => {
+    const I = B(), s = j(null), R = j(null), { wrapperRef: l, wrapperInputRef: L, handleOpen: O, handleOpenIfClosed: P } = Y({ ulRef: R }), { isOpen: v, toggleOpen: z, value: o, setValue: b, setSearchTerm: w, searchTerm: S } = V(), c = i ? `${I}-${i}` : I;
+    G(H, () => s.current, [s]);
+    const e = J(() => r.find(({ value: t }) => t === o), [r, o]);
+    N(() => {
+      s.current && (s.current.value = o ? e == null ? void 0 : e.value : "");
+    }, [e, o]), N(() => {
+      if (u && !o) {
+        const t = r && r.find((n) => n.value === u);
+        t && b(t.value);
       }
-    }, [d, n, I, t]), m(() => {
-      var i;
-      const o = new AbortController();
-      return (i = l.current) == null || i.addEventListener("focusout", (T) => {
-        var C;
-        const y = T.relatedTarget;
-        (!y || !((C = l.current) != null && C.contains(y))) && g(!1);
+    }, [u, r, b, o]), N(() => {
+      var n;
+      const t = new AbortController();
+      return (n = l.current) == null || n.addEventListener("focusout", (d) => {
+        var T;
+        const f = d.relatedTarget;
+        (!f || !((T = l.current) != null && T.contains(f))) && (z(!1), w(""));
       }), () => {
-        o.abort();
+        t.abort();
       };
-    }, [g, l]);
-    const F = () => e != null && e.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ f(
+    }, [z, l, w]);
+    const U = (t) => {
+      const n = t.target.value;
+      w(n);
+      const d = r.find(
+        (f) => f.value.toLowerCase() === n.toLowerCase()
+      );
+      d && b(d.value);
+    };
+    return /* @__PURE__ */ m(
       "div",
       {
         ref: l,
-        className: "flex flex-col w-full relative",
-        "data-theme": z,
+        className: p("flex flex-col w-full relative", A),
+        "data-theme": $,
         children: [
-          u ? /* @__PURE__ */ f(
+          x ? /* @__PURE__ */ m(
             "label",
             {
               id: c,
-              className: p(W({ className: j })),
+              className: p(Q({ className: D })),
               htmlFor: c,
-              onClick: D,
+              onClick: P,
               children: [
-                u,
-                x ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
+                x,
+                g ? /* @__PURE__ */ a("span", { className: "text-red-500 ml-1", children: "*" }) : null
               ]
             }
           ) : null,
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ m(
             "div",
             {
-              ref: w,
+              ref: L,
               id: c,
-              className: p(B()),
+              className: p(X({ className: k })),
               role: "combobox",
-              onClick: k,
-              "aria-expanded": N,
+              onClick: O,
+              "aria-expanded": v,
               tabIndex: 0,
               "aria-labelledby": c,
               children: [
-                t ? /* @__PURE__ */ f(
-                  O,
-                  {
-                    variant: "body2",
-                    className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: [
-                      F(),
-                      e == null ? void 0 : e.label
-                    ]
-                  }
-                ) : /* @__PURE__ */ r(
-                  O,
-                  {
-                    variant: "body2",
-                    className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: E
-                  }
-                ),
-                h ? /* @__PURE__ */ r(U, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
-                  K,
+                /* @__PURE__ */ m("div", { className: "flex gap-3 items-center flex-1", children: [
+                  (e == null ? void 0 : e.leftIcon) && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }),
+                  y ? /* @__PURE__ */ a(
+                    "input",
+                    {
+                      type: "text",
+                      value: v ? S : (e == null ? void 0 : e.label) || "",
+                      onChange: U,
+                      placeholder: h,
+                      className: "flex-1 bg-transparent border-none outline-none text-zinc-700 text-base",
+                      onClick: (t) => {
+                        t.stopPropagation(), O();
+                      },
+                      "aria-label": x || h,
+                      "aria-labelledby": c
+                    }
+                  ) : /* @__PURE__ */ a(
+                    _,
+                    {
+                      variant: "body2",
+                      className: "flex-1 text-zinc-700 text-base",
+                      children: (e == null ? void 0 : e.label) || h
+                    }
+                  )
+                ] }),
+                C ? /* @__PURE__ */ a(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ a(
+                  q,
                   {
+                    "data-state": v ? "open" : "closed",
                     className: p(
-                      "w-4 h-4 text-zinc-500 transition-all duration-50",
-                      N ? "rotate-0" : "rotate-180"
+                      "w-4 h-4 text-zinc-500 transition-all duration-50 data-[state=open]:rotate-0 data-[state=closed]:rotate-180",
+                      E
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "input",
             {
-              ref: a,
+              ref: s,
               type: "text",
-              name: s,
+              name: i,
               className: "hidden",
               "aria-hidden": "true",
-              required: x
+              required: g
             }
           ),
-          /* @__PURE__ */ r(
-            J,
+          /* @__PURE__ */ a(
+            Z,
             {
-              ref: b,
-              name: s,
+              ref: R,
+              className: F,
+              itemClassName: M,
+              name: i,
               wrapperRef: l,
-              wrapperInputRef: w,
-              options: n,
-              isLoading: !!h
+              wrapperInputRef: L,
+              options: r,
+              isLoading: !!C,
+              searchable: y
             }
           )
         ]
@@ -132,5 +156,5 @@ const re = $(
   }
 );
 export {
-  re as Wrapper
+  de as Wrapper
 };

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = e({
+const o = e({
   isOpen: !1,
   toggleOpen() {
     throw new Error("toggleOpen function must be overridden");
@@ -7,8 +7,12 @@ const t = e({
   value: void 0,
   setValue() {
     throw new Error("setValue function must be overridden");
+  },
+  searchTerm: "",
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
   }
 });
 export {
-  t as DropdownContext
+  o as DropdownContext
 };

package/dist/components/Dropdown/contexts/dropdown.hook.js

@@ -1,11 +1,13 @@
 import { useContext as t } from "react";
 import { DropdownContext as r } from "./dropdown.context.js";
-const s = () => {
+const p = () => {
   const o = t(r);
   if (!o)
-    throw new Error("useTheme must be used within a DropdownProvider");
+    throw new Error(
+      "useDropdownContext must be used within a DropdownProvider"
+    );
   return o;
 };
 export {
-  s as useDropdownContext
+  p as useDropdownContext
 };

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,22 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
-import { useCallback as u } from "react";
-import { DropdownContext as d } from "./dropdown.context.js";
-import { useToggle as f } from "../../../hooks/useToggle.js";
-const w = ({ children: t, onChange: r, value: e, name: o }) => {
-  const [l, p] = f(!1), s = u(
-    (m) => {
-      r == null || r({ target: { value: m, name: o ?? "" } });
+import { useState as u, useCallback as d } from "react";
+import { DropdownContext as f } from "./dropdown.context.js";
+import { useToggle as v } from "../../../hooks/useToggle.js";
+const D = ({ children: t, onChange: r, value: o, name: e }) => {
+  const [s, m] = v(!1), [l, p] = u(""), a = d(
+    (c) => {
+      r == null || r({ target: { value: c, name: e ?? "" } });
     },
-    [r, o]
+    [r, e]
   );
   return /* @__PURE__ */ i(
-    d.Provider,
+    f.Provider,
     {
-      value: { value: e, isOpen: l, setValue: s, toggleOpen: p },
+      value: {
+        value: o,
+        isOpen: s,
+        setValue: a,
+        toggleOpen: m,
+        searchTerm: l,
+        setSearchTerm: p
+      },
       children: t
     }
   );
 };
 export {
-  w as DropdownProvider
+  D as DropdownProvider
 };

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
+};