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

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

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
+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";
@@ -6,32 +6,34 @@ import { listItemVariants as x } from "./ListItem.variants.js";
 import { useDropdownContext as y } from "../../contexts/dropdown.hook.js";
 const j = ({
   isClickable: a,
-  className: c,
-  ...e
+  className: i,
+  ...t
 }) => {
-  const { setValue: n, toggleOpen: r } = y(), i = u(null), l = s(
-    (t) => {
-      n(t.value), r(!1);
+  const { setValue: l, toggleOpen: n } = y(), c = u(null), o = s(
+    (e) => {
+      l(e.value), n(!1);
     },
-    [n, r]
+    [l, n]
   ), m = s(
-    (t, f) => {
-      t.key === "Enter" && l(f);
+    (e, f) => {
+      e.key === "Enter" && (e.stopPropagation(), o(f));
     },
-    [l]
+    [o]
   );
   return /* @__PURE__ */ p(
     "li",
     {
-      ref: i,
+      ref: c,
       role: "option",
-      className: h(x({ className: c })),
+      className: h(x({ className: i })),
       tabIndex: 0,
-      onClick: () => a && l(e),
-      onKeyDown: (t) => m(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(d, { 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 })
       ]
     }
   );

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

@@ -1,134 +1,153 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-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 { 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 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(
+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(
   ({
-    className: z,
-    defaultValue: m,
-    isLoading: u,
+    className: k,
+    defaultValue: u,
+    iconClassName: E,
+    isLoading: C,
     label: x,
-    labelClassName: j,
-    listClassName: E,
-    listItemClassName: L,
-    name: l,
-    options: n,
-    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);
+    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);
       }
-    }, [m, n, C, t]), d(() => {
-      var i;
-      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);
+    }, [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(""));
       }), () => {
-        a.abort();
+        t.abort();
       };
-    }, [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(
+    }, [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: s,
-        className: "flex flex-col w-full relative",
-        "data-theme": D,
+        ref: l,
+        className: p("flex flex-col w-full relative", A),
+        "data-theme": $,
         children: [
-          x ? /* @__PURE__ */ f(
+          x ? /* @__PURE__ */ m(
             "label",
             {
               id: c,
-              className: p(J({ className: j })),
+              className: p(Q({ className: D })),
               htmlFor: c,
-              onClick: $,
+              onClick: P,
               children: [
                 x,
-                h ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
+                g ? /* @__PURE__ */ a("span", { className: "text-red-500 ml-1", children: "*" }) : null
               ]
             }
           ) : null,
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ m(
             "div",
             {
-              ref: N,
+              ref: L,
               id: c,
-              className: p(K({ className: z })),
+              className: p(X({ className: k })),
               role: "combobox",
-              onClick: T,
-              "aria-expanded": w,
+              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: [
-                      A(),
-                      e == null ? void 0 : e.label
-                    ]
-                  }
-                ) : /* @__PURE__ */ r(
-                  O,
-                  {
-                    variant: "body2",
-                    className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: k
-                  }
-                ),
-                u ? /* @__PURE__ */ r(G, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
-                  S,
+                /* @__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",
-                      w ? "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: o,
+              ref: s,
               type: "text",
-              name: l,
+              name: i,
               className: "hidden",
               "aria-hidden": "true",
-              required: h
+              required: g
             }
           ),
-          /* @__PURE__ */ r(
-            Q,
+          /* @__PURE__ */ a(
+            Z,
             {
-              ref: b,
-              className: E,
-              itemClassName: L,
-              name: l,
-              wrapperRef: s,
-              wrapperInputRef: N,
-              options: n,
-              isLoading: !!u
+              ref: R,
+              className: F,
+              itemClassName: M,
+              name: i,
+              wrapperRef: l,
+              wrapperInputRef: L,
+              options: r,
+              isLoading: !!C,
+              searchable: y
             }
           )
         ]
@@ -137,5 +156,5 @@ const oe = M(
   }
 );
 export {
-  oe 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.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/Input/Input.js

@@ -2,7 +2,7 @@ import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import s, { forwardRef as v, useId as E, useState as _ } from "react";
 import { cn as d } from "../../utils/index.js";
 import { inputVariants as k } from "./Input.variants.js";
-import { P as a } from "../../index-C5psggHV.js";
+import { P as a } from "../../index-h-Ul0anl.js";
 function m() {
   return m = Object.assign || function(e) {
     for (var r = 1; r < arguments.length; r++) {

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../index-BCGvACM9.js";
-import { M as d } from "../../Modal-DXYBiafI.js";
+import { M as d } from "../../Modal-CdsrVAoM.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,11 +1,11 @@
 import "react/jsx-runtime";
 import "../../../../index--EmNlyHx.js";
 import "react";
-import { W as f } from "../../../../Modal-DXYBiafI.js";
-import "../../../../Combination-Cvr3uETz.js";
+import "../../../../Combination-Dyw3lLGQ.js";
+import { W as f } from "../../../../Modal-CdsrVAoM.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../x-DU-Zw-L_.js";
+import "../../../../x-BPcqkRZd.js";
 export {
   f as Wrapper
 };

package/dist/components/Modal/components/Wrapper/Wrapper.variants.js

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-BNmRGtA6.js";
-const t = o([
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const o = t([
   "bg-metal-1000",
   "bg-white",
   "border-none",
@@ -8,18 +8,16 @@ const t = o([
   "justify-between",
   "min-h-[450px]",
   "min-w-[500px]",
-  "overflow-auto",
   "relative",
   "rounded-md",
   "shadow-xs",
-  "lg:overflow-hidden",
   "animate-in",
   "fade-in-0",
   "zoom-in-95",
   "duration-150",
   "shadow-kubefirst-primary",
   "colony:shadow-red-400"
-]), r = o([
+]), r = t([
   "absolute",
   "right-1.5",
   "top-1.5",
@@ -30,5 +28,5 @@ const t = o([
 ]);
 export {
   r as buttonCloseVariants,
-  t as modalVariants
+  o as modalVariants
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-DXYBiafI.js";
+import { W as a } from "../../../Modal-CdsrVAoM.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/NumberInput/NumberInput.js

@@ -3,7 +3,7 @@ import { R as O } from "../../index--EmNlyHx.js";
 import p, { forwardRef as d, useId as N, useCallback as w } from "react";
 import { cn as y } from "../../utils/index.js";
 import { labelVariants as z, buttonVariants as j, numberInputVariants as _ } from "./NumberInput.variants.js";
-import { P as s } from "../../index-C5psggHV.js";
+import { P as s } from "../../index-h-Ul0anl.js";
 function v() {
   return v = Object.assign || function(t) {
     for (var i = 1; i < arguments.length; i++) {

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -6,8 +6,8 @@ import { Tag as C } from "../../../Tag/Tag.js";
 import { cn as r } from "../../../../utils/index.js";
 import { useTagSelect as S } from "../../hooks/useTagSelect.js";
 import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
-import { X as O } from "../../../../x-DU-Zw-L_.js";
-import { C as V } from "../../../../chevron-up-DgLBQCKD.js";
+import { X as O } from "../../../../x-BPcqkRZd.js";
+import { C as V } from "../../../../chevron-up-RLP4nX7V.js";
 import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
 const B = w(
   ({

package/dist/components/Toast/Toast.js

@@ -11,7 +11,7 @@ import { u as $ } from "../../index-DwYXX2sM.js";
 import { V as ie, R as ke } from "../../index--EmNlyHx.js";
 import { cn as q } from "../../utils/index.js";
 import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
-import { X as We } from "../../x-DU-Zw-L_.js";
+import { X as We } from "../../x-BPcqkRZd.js";
 var Z = "ToastProvider", [ee, Xe, $e] = _e("Toast"), [ce, Rt] = Ne("Toast", [$e]), [Ue, U] = ce(Z), ue = (e) => {
   const {
     __scopeToast: r,

package/dist/components/index.js

@@ -11,7 +11,7 @@ import { Divider as R } from "./Divider/Divider.js";
 import { Dropdown as s } from "./Dropdown/Dropdown.js";
 import { Input as B } from "./Input/Input.js";
 import { Loading as D } from "./Loading/Loading.js";
-import { M as k } from "../Modal-DXYBiafI.js";
+import { M as k } from "../Modal-CdsrVAoM.js";
 import { NumberInput as P } from "./NumberInput/NumberInput.js";
 import { ProgressBar as y } from "./ProgressBar/ProgressBar.js";
 import { Radio as L } from "./Radio/Radio.js";

package/dist/{index-BuxebbOg.js → index-CI55pdPK.js}

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as w } from "react/jsx-runtime";
 import * as l from "react";
 import { c as M, b as x } from "./index-Cq1I1cG9.js";
 import { u as A, b as I } from "./index-B5MIi2tR.js";
-import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as D, e as Y } from "./index-1RDo-S_f.js";
+import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as D, e as Y } from "./index-Cod3awtw.js";
 import { Button as k } from "./components/Button/Button.js";
 import { cn as q } from "./utils/index.js";
 var f = "AlertDialog", [H, se] = M(f, [

package/dist/{index-Cz09twLl.js → index-Cj4IZ4ka.js}

@@ -1,4 +1,4 @@
-import { R as Ee, P as ke, O as Se, C as Ie } from "./index-1RDo-S_f.js";
+import { R as Ee, P as ke, O as Se, C as Ie } from "./index-Cod3awtw.js";
 import * as n from "react";
 import { P as C } from "./index-BCGvACM9.js";
 import { u as P } from "./index-Cs8Lv8Wj.js";

package/dist/{index-1RDo-S_f.js → index-Cod3awtw.js}

@@ -7,7 +7,7 @@ import { P as N } from "./index-BCGvACM9.js";
 import { u as j } from "./index-DwYXX2sM.js";
 import { jsx as f, jsxs as q, Fragment as B } from "react/jsx-runtime";
 import { P as U } from "./index-Dm-ooN_M.js";
-import { R as Ae } from "./Combination-Cvr3uETz.js";
+import { R as Ae } from "./Combination-Dyw3lLGQ.js";
 var x = "focusScope.autoFocusOnMount", L = "focusScope.autoFocusOnUnmount", V = { bubbles: !1, cancelable: !0 }, Re = "FocusScope", Q = i.forwardRef((e, n) => {
   const {
     loop: t = !1,

package/dist/{index-C5psggHV.js → index-h-Ul0anl.js}

@@ -663,6 +663,5 @@ function Ce() {
 var we = /* @__PURE__ */ Ce();
 const Ie = /* @__PURE__ */ ge(we);
 export {
-  Ie as P,
-  we as p
+  Ie as P
 };

package/dist/index.d.ts

@@ -172,14 +172,17 @@ export declare const Dropdown: FC<DropdownProps>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     className?: string;
+    iconClassName?: string;
     isLoading?: boolean;
     label?: string;
     labelClassName?: string;
     listClassName?: string;
     listItemClassName?: string;
     options: Option_3[];
+    searchable?: boolean;
     theme?: Theme;
     value?: string;
+    wrapperClassName?: string;
     onChange?: OnChangeFn;
 }
 

package/dist/index.js

@@ -11,7 +11,7 @@ import { Divider as b } from "./components/Divider/Divider.js";
 import { Dropdown as N } from "./components/Dropdown/Dropdown.js";
 import { Input as S } from "./components/Input/Input.js";
 import { Loading as B } from "./components/Loading/Loading.js";
-import { M as P } from "./Modal-DXYBiafI.js";
+import { M as P } from "./Modal-CdsrVAoM.js";
 import { NumberInput as G } from "./components/NumberInput/NumberInput.js";
 import { ProgressBar as y } from "./components/ProgressBar/ProgressBar.js";
 import { Radio as L } from "./components/Radio/Radio.js";

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",