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

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,59 @@
-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 l } from "react/jsx-runtime";
+import { forwardRef as d, useRef as b, useImperativeHandle as v } from "react";
+import { cn as x } from "../../../../utils/index.js";
+import { useNavigationUlList as L } from "../../hooks/useNavigationList.js";
+import { ListItem as r } from "../ListItem/ListItem.js";
+import { listVariants as N } from "./List.variants.js";
+import { useDropdownContext as g } from "../../contexts/dropdown.hook.js";
+const y = d(
+  ({
+    className: s,
+    isLoading: a,
+    itemClassName: o,
+    name: n,
+    options: t,
+    wrapperInputRef: m,
+    wrapperRef: f
+  }, c) => {
+    const e = b(null), { isOpen: p } = g();
+    v(c, () => e.current, [e]), L({ ulRef: e, wrapperRef: f, wrapperInputRef: m });
+    const u = t.length === 0;
+    return /* @__PURE__ */ l(
       "ul",
       {
         ref: e,
-        title: m,
+        title: n,
         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: x(N({ className: s }), p ? "flex" : "hidden"),
+        children: a ? /* @__PURE__ */ l(
+          r,
+          {
+            className: o,
+            isClickable: !1,
+            value: "Loading...",
+            label: "Loading..."
+          }
+        ) : u ? /* @__PURE__ */ l(
+          r,
+          {
+            className: o,
+            isClickable: !1,
+            value: "No options",
+            label: "No options"
+          }
+        ) : t.map((i) => /* @__PURE__ */ l(
+          r,
+          {
+            className: o,
+            isClickable: !0,
+            ...i
+          },
+          i.value
+        ))
       }
     );
   }
 );
 export {
-  I as List
+  y as List
 };

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

@@ -1,37 +1,41 @@
-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(
+import { jsxs as p, jsx as o } 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: c,
+  ...e
+}) => {
+  const { setValue: n, toggleOpen: r } = y(), i = u(null), l = s(
     (t) => {
       n(t.value), r(!1);
     },
     [n, r]
-  ), i = s(
-    (t, m) => {
-      t.key === "Enter" && l(m);
+  ), m = s(
+    (t, f) => {
+      t.key === "Enter" && l(f);
     },
     [l]
   );
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "li",
     {
-      ref: c,
+      ref: i,
       role: "option",
-      className: u(d()),
+      className: h(x({ className: c })),
       tabIndex: 0,
       onClick: () => a && l(e),
-      onKeyDown: (t) => i(t, e),
+      onKeyDown: (t) => m(t, e),
       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 })
+        /* @__PURE__ */ o(d, { variant: "body2", className: "text-zinc-700", children: e.label })
       ]
     }
   );
 };
 export {
-  g as ListItem
+  j as ListItem
 };

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

@@ -1,76 +1,79 @@
 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 { forwardRef as M, useId as U, useRef as R, useImperativeHandle as W, useMemo as B, useEffect as d } from "react";
+import { Loading as G } from "../../Loading/Loading.js";
 import { Typography as O } from "../../Typography/Typography.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 J, dropdownVariants as K } from "../Dropdown.variants.js";
+import { useDropdown as P } from "../hooks/useDropdown.js";
+import { List as Q } from "./List/List.js";
+import { C as S } from "../../../chevron-up-DgLBQCKD.js";
+import { useDropdownContext as X } from "../contexts/dropdown.hook.js";
+const oe = M(
   ({
-    theme: z,
-    label: u,
+    className: z,
+    defaultValue: m,
+    isLoading: u,
+    label: x,
     labelClassName: j,
-    placeholder: E,
-    name: s,
+    listClassName: E,
+    listItemClassName: L,
+    name: l,
     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);
+    placeholder: k,
+    required: h,
+    theme: D
+  }, F) => {
+    const v = U(), o = R(null), b = R(null), { wrapperRef: s, wrapperInputRef: N, handleOpen: T, handleOpenIfClosed: $ } = P({ ulRef: b }), { isOpen: w, toggleOpen: g, value: t, setValue: C } = X(), c = l ? `${v}-${l}` : v;
+    W(F, () => o.current, [o]);
+    const e = B(() => n.find(({ value: a }) => a === t), [n, t]);
+    d(() => {
+      o.current && (o.current.value = t ? e == null ? void 0 : e.value : "");
+    }, [e, t]), d(() => {
+      if (m && !t) {
+        const a = n && n.find((i) => i.value === m);
+        a && C(a.value);
       }
-    }, [d, n, I, t]), m(() => {
+    }, [m, n, C, t]), d(() => {
       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);
+      const a = new AbortController();
+      return (i = s.current) == null || i.addEventListener("focusout", (H) => {
+        var y;
+        const I = H.relatedTarget;
+        (!I || !((y = s.current) != null && y.contains(I))) && g(!1);
       }), () => {
-        o.abort();
+        a.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;
+    }, [g, s]);
+    const A = () => e != null && e.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
     return /* @__PURE__ */ f(
       "div",
       {
-        ref: l,
+        ref: s,
         className: "flex flex-col w-full relative",
-        "data-theme": z,
+        "data-theme": D,
         children: [
-          u ? /* @__PURE__ */ f(
+          x ? /* @__PURE__ */ f(
             "label",
             {
               id: c,
-              className: p(W({ className: j })),
+              className: p(J({ className: j })),
               htmlFor: c,
-              onClick: D,
+              onClick: $,
               children: [
-                u,
-                x ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
+                x,
+                h ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
               ]
             }
           ) : null,
           /* @__PURE__ */ f(
             "div",
             {
-              ref: w,
+              ref: N,
               id: c,
-              className: p(B()),
+              className: p(K({ className: z })),
               role: "combobox",
-              onClick: k,
-              "aria-expanded": N,
+              onClick: T,
+              "aria-expanded": w,
               tabIndex: 0,
               "aria-labelledby": c,
               children: [
@@ -80,7 +83,7 @@ const re = $(
                     variant: "body2",
                     className: "flex gap-3 items-center text-zinc-700 text-base",
                     children: [
-                      F(),
+                      A(),
                       e == null ? void 0 : e.label
                     ]
                   }
@@ -89,15 +92,15 @@ const re = $(
                   {
                     variant: "body2",
                     className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: E
+                    children: k
                   }
                 ),
-                h ? /* @__PURE__ */ r(U, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
-                  K,
+                u ? /* @__PURE__ */ r(G, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
+                  S,
                   {
                     className: p(
                       "w-4 h-4 text-zinc-500 transition-all duration-50",
-                      N ? "rotate-0" : "rotate-180"
+                      w ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
@@ -107,23 +110,25 @@ const re = $(
           /* @__PURE__ */ r(
             "input",
             {
-              ref: a,
+              ref: o,
               type: "text",
-              name: s,
+              name: l,
               className: "hidden",
               "aria-hidden": "true",
-              required: x
+              required: h
             }
           ),
           /* @__PURE__ */ r(
-            J,
+            Q,
             {
               ref: b,
-              name: s,
-              wrapperRef: l,
-              wrapperInputRef: w,
+              className: E,
+              itemClassName: L,
+              name: l,
+              wrapperRef: s,
+              wrapperInputRef: N,
               options: n,
-              isLoading: !!h
+              isLoading: !!u
             }
           )
         ]
@@ -132,5 +137,5 @@ const re = $(
   }
 );
 export {
-  re as Wrapper
+  oe as Wrapper
 };

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