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

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