@konstructio/ui 0.1.2-alpha.55 → 0.1.2-alpha.56

package/dist/components/Range/Range.js

@@ -1,37 +1,39 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as g, T as R, a as V, b as c } from "../../index-gSPwC-1I.js";
-import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
+import { R, T as V, a as v, b as c } from "../../index-gSPwC-1I.js";
+import { forwardRef as b, useRef as j, useState as k, useImperativeHandle as w, useEffect as y, useCallback as C } from "react";
 import { cn as a } from "../../utils/index.js";
-import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";
-const q = v(
+import { rangeOutsideVariants as T, trackVariants as S, thumbVariants as i, rangeVariants as $ } from "./Range.variants.js";
+const A = b(
   ({
     label: n,
-    defaultValue: u = [0, 100],
-    name: m,
-    theme: o,
+    labelWrapperClassName: u,
+    defaultValue: m = [0, 100],
+    name: o,
+    theme: f,
     size: l,
-    showValue: f,
-    ...d
-  }, h) => {
-    const t = b(null), [s, p] = j(u);
-    k(h, () => t.current, [t]), w(() => {
+    showValue: d,
+    ...h
+  }, p) => {
+    const t = j(null), [s, x] = k(m);
+    w(p, () => t.current, [t]), y(() => {
       t.current && (t.current.value = `[${s.toString()}]`);
     }, [s]);
-    const x = y(
-      (N) => p(N),
+    const N = C(
+      (g) => x(g),
       []
     );
-    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": o, children: [
+    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": f, children: [
       /* @__PURE__ */ r(
         "div",
         {
           className: a(
             "flex items-center",
-            n ? "justify-between" : "justify-end"
+            n ? "justify-between" : "justify-end",
+            u
           ),
           children: [
             n ? /* @__PURE__ */ e("label", { children: n }) : null,
-            f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
+            d ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
               s[0],
               " - ",
               s[1]
@@ -39,16 +41,16 @@ const q = v(
           ]
         }
       ),
-      /* @__PURE__ */ e("input", { ref: t, name: m, className: "hidden", type: "text" }),
+      /* @__PURE__ */ e("input", { ref: t, name: o, className: "hidden", type: "text" }),
       /* @__PURE__ */ r(
-        g,
+        R,
         {
           value: s,
-          className: a(S()),
-          onValueChange: x,
-          ...d,
+          className: a($()),
+          onValueChange: N,
+          ...h,
           children: [
-            /* @__PURE__ */ e(R, { className: a(T({ size: l })), children: /* @__PURE__ */ e(V, { className: a(C()) }) }),
+            /* @__PURE__ */ e(V, { className: a(S({ size: l })), children: /* @__PURE__ */ e(v, { className: a(T()) }) }),
             /* @__PURE__ */ e(c, { className: a(i({ size: l })) }),
             /* @__PURE__ */ e(c, { className: a(i({ size: l })) })
           ]
@@ -58,5 +60,5 @@ const q = v(
   }
 );
 export {
-  q as Range
+  A as Range
 };

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

@@ -25,6 +25,8 @@ export interface RangeProps extends VariantProps<typeof rangeVariants> {
     defaultValue?: SliderPropsBase['defaultValue'];
     /** Label displayed above the range slider */
     label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Maximum value for the range */
     max?: SliderPropsBase['max'];
     /** Minimum value for the range */

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

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

package/dist/components/Select/Select.variants.js

@@ -33,7 +33,8 @@ const a = e(
           "aria-expanded:border-red-600",
           "aria-expanded:text-red-600",
           "kubefirst:border-red-600",
-          "kubefirst:text-red-600"
+          "kubefirst:text-red-600",
+          "dark:border-red-500"
         ],
         false: ""
       },

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

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

package/dist/components/Slider/Slider.js

@@ -1,43 +1,53 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { R as x, T as N, b as v } from "../../index-gSPwC-1I.js";
-import { forwardRef as V, useRef as b, useState as R, useImperativeHandle as g, useEffect as j, useCallback as k } from "react";
+import { R as N, T as v, b as V } from "../../index-gSPwC-1I.js";
+import { forwardRef as b, useRef as R, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
 import { cn as r } from "../../utils/index.js";
-import { trackVariants as w, thumbVariants as y, sliderVariants as C } from "./Slider.variants.js";
-const q = V(
-  ({ label: s, defaultValue: c = [0], name: i, theme: u, size: n, showValue: m, ...o }, f) => {
-    const e = b(null), [t, d] = R(c);
-    g(f, () => e.current, [e]), j(() => {
+import { trackVariants as y, thumbVariants as C, sliderVariants as S } from "./Slider.variants.js";
+const A = b(
+  ({
+    label: s,
+    labelWrapperClassName: c,
+    defaultValue: i = [0],
+    name: u,
+    theme: m,
+    size: n,
+    showValue: o,
+    ...f
+  }, d) => {
+    const e = R(null), [t, h] = g(i);
+    j(d, () => e.current, [e]), k(() => {
       e.current && (e.current.value = t.toString());
     }, [t]);
-    const h = k(
-      (p) => d(p),
+    const p = w(
+      (x) => h(x),
       []
     );
-    return /* @__PURE__ */ l("div", { className: "w-full relative flex flex-col gap-3", "data-theme": u, children: [
+    return /* @__PURE__ */ l("div", { className: "w-full relative flex flex-col gap-3", "data-theme": m, children: [
       /* @__PURE__ */ l(
         "div",
         {
           className: r(
             "flex items-center",
-            s ? "justify-between" : "justify-end"
+            s ? "justify-between" : "justify-end",
+            c
           ),
           children: [
             s ? /* @__PURE__ */ a("label", { children: s }) : null,
-            m ? /* @__PURE__ */ a("span", { className: "text-xs", children: t }) : null
+            o ? /* @__PURE__ */ a("span", { className: "text-xs", children: t }) : null
           ]
         }
       ),
-      /* @__PURE__ */ a("input", { ref: e, name: i, className: "hidden", type: "number" }),
+      /* @__PURE__ */ a("input", { ref: e, name: u, className: "hidden", type: "number" }),
       /* @__PURE__ */ l(
-        x,
+        N,
         {
           value: t,
-          className: r(C()),
-          onValueChange: h,
-          ...o,
+          className: r(S()),
+          onValueChange: p,
+          ...f,
           children: [
-            /* @__PURE__ */ a(N, { className: r(w({ size: n })) }),
-            /* @__PURE__ */ a(v, { className: r(y({ size: n })) })
+            /* @__PURE__ */ a(v, { className: r(y({ size: n })) }),
+            /* @__PURE__ */ a(V, { className: r(C({ size: n })) })
           ]
         }
       )
@@ -45,5 +55,5 @@ const q = V(
   }
 );
 export {
-  q as Slider
+  A as Slider
 };

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

@@ -25,6 +25,8 @@ export interface SliderProps extends VariantProps<typeof sliderVariants> {
     defaultValue?: SliderPropsBase['defaultValue'];
     /** Label displayed above the slider */
     label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Maximum value for the slider */
     max?: SliderPropsBase['max'];
     /** Minimum value for the slider */