@konstructio/ui 0.1.2-alpha.58 → 0.1.2-alpha.59

package/dist/components/Select/Select.types.d.ts

@@ -87,6 +87,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     isLoading?: boolean;
     isRequired?: boolean;
     label?: string;
+    labelAction?: ReactNode;
     labelClassName?: string;
     labelWrapperClassName?: string;
     listClassName?: string;

package/dist/components/Select/components/Wrapper.js

@@ -1,117 +1,130 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { forwardRef as ee, useId as te, useRef as g, useMemo as ae, useImperativeHandle as re, useEffect as le } from "react";
-import { Typography as ne } from "../../Typography/Typography.js";
-import { cn as l } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as se, selectVariants as ce } from "../Select.variants.js";
-import { useSelect as ie } from "../hooks/useSelect.js";
-import { List as me } from "./List/List.js";
-import { c as pe } from "../../../createLucideIcon-CP-mMPfa.js";
-import { LoaderIcon as ue } from "../../../assets/icons/components/Loader.js";
-import { C as fe } from "../../../chevron-up-IlDPxR7j.js";
-import { useSelectContext as de } from "../contexts/select.hook.js";
-const xe = [
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as te, useId as ae, useRef as w, useMemo as re, useImperativeHandle as ne, useEffect as le } from "react";
+import { Typography as se } from "../../Typography/Typography.js";
+import { cn as n } from "../../../utils/index.js";
+import { labelVariants as oe, inputVariants as ce, selectVariants as ie } from "../Select.variants.js";
+import { useSelect as me } from "../hooks/useSelect.js";
+import { List as pe } from "./List/List.js";
+import { c as ue } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as fe } from "../../../assets/icons/components/Loader.js";
+import { C as de } from "../../../chevron-up-IlDPxR7j.js";
+import { useSelectContext as xe } from "../contexts/select.hook.js";
+const he = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], he = pe("search", xe), ze = ee(
+], ve = ue("search", he), ze = te(
   ({
-    additionalOptions: O,
-    className: b,
+    additionalOptions: z,
+    className: O,
     defaultValue: x,
-    disabled: a = !1,
+    disabled: t = !1,
     error: f,
     iconClassName: R,
     inputClassName: F,
     isInfiniteScrollEnabled: S = !1,
-    isLoading: k,
+    isLoading: g,
     isRequired: h,
     label: v,
-    labelClassName: T,
-    labelWrapperClassName: E,
-    listClassName: M,
-    listItemClassName: W,
-    listItemSecondRowClassName: _,
+    labelAction: T,
+    labelClassName: E,
+    labelWrapperClassName: M,
+    listClassName: W,
+    listItemClassName: _,
+    listItemSecondRowClassName: $,
     name: d,
-    noOptionsText: $,
+    noOptionsText: H,
     placeholder: N,
-    searchable: w = !1,
+    searchable: k = !1,
     showSearchIcon: C,
-    theme: H,
-    wrapperClassName: P,
-    onFetchMoreOptions: U,
-    onBlur: q,
-    onSearchChange: A,
+    theme: P,
+    wrapperClassName: U,
+    onFetchMoreOptions: q,
+    onBlur: A,
+    onSearchChange: B,
     ...y
-  }, B) => {
-    const I = te(), s = g(null), L = g(null), D = g(0), {
-      isOpen: c,
-      options: n,
-      searchTerm: G,
-      value: o,
-      setCanFilter: J,
-      setSearchTerm: K,
-      setValue: i,
-      toggleOpen: Q
-    } = de(), e = ae(() => n.find(({ value: r }) => r === o), [n, o]), { wrapperRef: X, wrapperInputRef: V, handleOpen: j } = ie({
-      ulRef: L,
-      inputRef: s,
-      disabled: a,
+  }, D) => {
+    const I = ae(), c = w(null), j = w(null), G = w(0), {
+      isOpen: i,
+      options: l,
+      searchTerm: J,
+      value: s,
+      setCanFilter: K,
+      setSearchTerm: Q,
+      setValue: m,
+      toggleOpen: X
+    } = xe(), e = re(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Y, wrapperInputRef: L, handleOpen: V } = me({
+      ulRef: j,
+      inputRef: c,
+      disabled: t,
       internalValue: e,
-      onBlur: q
-    }), m = d ? `${I}-${d}` : I;
-    re(B, () => s.current, [s]), le(() => {
-      if (x && !o) {
-        const r = n && n.find((p) => p.value === x);
-        r && i(r.value);
+      onBlur: A
+    }), p = d ? `${I}-${d}` : I;
+    ne(D, () => c.current, [c]), le(() => {
+      if (x && !s) {
+        const a = l && l.find((u) => u.value === x);
+        a && m(a.value);
       }
-    }, [x, n, i, o]);
-    const Y = (r) => {
-      const p = r.target.value;
-      J(!0), i(""), K(p ?? ""), A?.(p);
-      const z = n.find(
-        (Z) => Z.value.toLocaleLowerCase() === p.toLocaleLowerCase()
+    }, [x, l, m, s]);
+    const Z = (a) => {
+      const u = a.target.value;
+      K(!0), m(""), Q(u ?? ""), B?.(u);
+      const b = l.find(
+        (ee) => ee.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
-      i(z ? z.value : e?.value ?? "");
+      m(b ? b.value : e?.value ?? "");
     };
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ o(
       "div",
       {
-        ref: X,
-        className: l("flex flex-col gap-2 w-full relative", P),
-        "data-theme": H,
+        ref: Y,
+        className: n("flex flex-col gap-2 w-full relative", U),
+        "data-theme": P,
         children: [
-          v ? /* @__PURE__ */ t("div", { className: l(E), children: /* @__PURE__ */ u(
-            "label",
+          v ? /* @__PURE__ */ o(
+            "div",
             {
-              id: m,
-              className: l(oe({ className: T })),
-              htmlFor: m,
-              onClick: () => !a && j(),
+              className: n(
+                "flex items-center justify-between",
+                M
+              ),
               children: [
-                v,
-                h && /* @__PURE__ */ t("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
+                /* @__PURE__ */ o(
+                  "label",
+                  {
+                    id: p,
+                    className: n(oe({ className: E })),
+                    htmlFor: p,
+                    onClick: () => !t && V(),
+                    children: [
+                      v,
+                      h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
+                    ]
+                  }
+                ),
+                T
               ]
             }
-          ) }) : null,
-          /* @__PURE__ */ u(
+          ) : null,
+          /* @__PURE__ */ o(
             "div",
             {
-              ref: V,
-              id: m,
-              className: l(
-                ce({ className: b, hasError: !!f, disabled: a })
+              ref: L,
+              id: p,
+              className: n(
+                ie({ className: O, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !a && Q(!c),
-              "aria-expanded": c,
-              tabIndex: D.current,
-              "aria-labelledby": m,
+              onClick: () => !t && X(!i),
+              "aria-expanded": i,
+              tabIndex: G.current,
+              "aria-labelledby": p,
               children: [
-                /* @__PURE__ */ u("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  e?.leftIcon && !C && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
-                  C && /* @__PURE__ */ t(
-                    he,
+                /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
+                  C && /* @__PURE__ */ r(
+                    ve,
                     {
-                      className: l(
+                      className: n(
                         "w-4",
                         "h-4",
                         "text-zinc-500",
@@ -123,39 +136,39 @@ const xe = [
                       )
                     }
                   ),
-                  w ? /* @__PURE__ */ t(
+                  k ? /* @__PURE__ */ r(
                     "input",
                     {
                       type: "text",
-                      value: c ? G : e?.label ?? o ?? "",
-                      onChange: Y,
+                      value: i ? J : e?.label ?? s ?? "",
+                      onChange: Z,
                       placeholder: N,
-                      className: l(se({ className: F }), {
+                      className: n(ce({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
-                      onClick: (r) => {
-                        r.stopPropagation(), a || j();
+                      onClick: (a) => {
+                        a.stopPropagation(), t || V();
                       },
                       "aria-label": v || N,
-                      "aria-labelledby": m,
+                      "aria-labelledby": p,
                       required: h,
                       autoComplete: "off",
                       autoCapitalize: "words",
-                      disabled: a,
+                      disabled: t,
                       tabIndex: -1,
                       ...y
                     }
-                  ) : /* @__PURE__ */ u(
-                    ne,
+                  ) : /* @__PURE__ */ o(
+                    se,
                     {
                       variant: "body2",
-                      className: l(
+                      className: n(
                         "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
                         {
                           "text-red-700": !!f,
                           "select-none": !e,
                           "text-metal-800 dark:text-metal-50": e,
-                          "text-metal-400/50 dark:text-metal-50/50": a
+                          "text-metal-400/50 dark:text-metal-50/50": t
                         },
                         e?.wrapperClassNameOnSelectedValue
                       ),
@@ -167,22 +180,22 @@ const xe = [
                     }
                   )
                 ] }),
-                k ? /* @__PURE__ */ t(
-                  ue,
+                g ? /* @__PURE__ */ r(
+                  fe,
                   {
                     size: 16,
                     className: "text-metal-400 animate-spin select-none"
                   }
-                ) : !C && /* @__PURE__ */ t(
-                  fe,
+                ) : !C && /* @__PURE__ */ r(
+                  de,
                   {
-                    "data-state": c ? "open" : "closed",
-                    className: l(
+                    "data-state": i ? "open" : "closed",
+                    className: n(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
                       R,
                       {
                         "text-red-700": !!f,
-                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": a
+                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
                       }
                     )
                   }
@@ -190,37 +203,37 @@ const xe = [
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "input",
             {
-              ref: s,
+              ref: c,
               type: "text",
               name: d,
               className: "hidden",
               "aria-hidden": "true",
               required: h,
               inert: !0,
-              defaultValue: e?.value ?? o ?? void 0,
+              defaultValue: e?.value ?? s ?? void 0,
               ...y
             }
           ),
-          c && /* @__PURE__ */ t(
-            me,
+          i && /* @__PURE__ */ r(
+            pe,
             {
-              ref: L,
-              additionalOptions: O,
-              className: M,
-              itemClassName: W,
+              ref: j,
+              additionalOptions: z,
+              className: W,
+              itemClassName: _,
               name: d,
-              wrapperInputRef: V,
-              inputRef: s,
-              options: n,
-              isLoading: !!k,
-              searchable: w,
-              listItemSecondRowClassName: _,
+              wrapperInputRef: L,
+              inputRef: c,
+              options: l,
+              isLoading: !!g,
+              searchable: k,
+              listItemSecondRowClassName: $,
               isInfiniteScrollEnabled: S,
-              onFetchMoreOptions: U,
-              noOptionsText: $
+              onFetchMoreOptions: q,
+              noOptionsText: H
             }
           )
         ]

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.2-alpha.57",
+  "version": "0.1.2-alpha.58",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/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.2-alpha.58",
+  "version": "0.1.2-alpha.59",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",