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

package/dist/components/Input/Input.js

@@ -1,10 +1,10 @@
-import { jsxs as h, jsx as s } from "react/jsx-runtime";
-import p, { forwardRef as y, useId as _, useRef as L, useState as W } from "react";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import p, { forwardRef as y, useId as W, useRef as $, useState as T } from "react";
 import { cn as i } from "../../utils/index.js";
-import { inputVariants as $ } from "./Input.variants.js";
-import { Typography as u } from "../Typography/Typography.js";
-import { SearchIcon as T } from "../../assets/icons/components/Search.js";
-import { WarningIcon as S } from "../../assets/icons/components/Warning.js";
+import { inputVariants as S } from "./Input.variants.js";
+import { Typography as d } from "../Typography/Typography.js";
+import { SearchIcon as C } from "../../assets/icons/components/Search.js";
+import { WarningIcon as M } from "../../assets/icons/components/Warning.js";
 import { P as l } from "../../index-BOE_3f_Z.js";
 function g() {
   return g = Object.assign || function(t) {
@@ -16,9 +16,9 @@ function g() {
     return t;
   }, g.apply(this, arguments);
 }
-function C(t, r) {
+function R(t, r) {
   if (t == null) return {};
-  var n = M(t, r), e, o;
+  var n = A(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
     var a = Object.getOwnPropertySymbols(t);
     for (o = 0; o < a.length; o++)
@@ -26,7 +26,7 @@ function C(t, r) {
   }
   return n;
 }
-function M(t, r) {
+function A(t, r) {
   if (t == null) return {};
   var n = {}, e = Object.keys(t), o, a;
   for (a = 0; a < e.length; a++)
@@ -34,7 +34,7 @@ function M(t, r) {
   return n;
 }
 var x = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = C(t, ["color", "size"]);
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = R(t, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", g({
     ref: r,
     xmlns: "http://www.w3.org/2000/svg",
@@ -70,9 +70,9 @@ function v() {
     return t;
   }, v.apply(this, arguments);
 }
-function R(t, r) {
+function B(t, r) {
   if (t == null) return {};
-  var n = A(t, r), e, o;
+  var n = D(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
     var a = Object.getOwnPropertySymbols(t);
     for (o = 0; o < a.length; o++)
@@ -80,7 +80,7 @@ function R(t, r) {
   }
   return n;
 }
-function A(t, r) {
+function D(t, r) {
   if (t == null) return {};
   var n = {}, e = Object.keys(t), o, a;
   for (a = 0; a < e.length; a++)
@@ -88,7 +88,7 @@ function A(t, r) {
   return n;
 }
 var w = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = R(t, ["color", "size"]);
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = B(t, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", v({
     ref: r,
     xmlns: "http://www.w3.org/2000/svg",
@@ -113,7 +113,7 @@ w.propTypes = {
   size: l.oneOfType([l.string, l.number])
 };
 w.displayName = "Eye";
-const B = y(
+const F = y(
   ({
     className: t,
     error: r,
@@ -122,48 +122,62 @@ const B = y(
     isRequired: o = !1,
     isSearch: a = !1,
     label: c,
-    labelClassName: O,
-    name: j,
-    theme: k,
+    labelAction: O,
+    labelClassName: j,
+    labelWrapperClassName: k,
+    name: N,
+    theme: P,
     type: f = "text",
-    ...N
-  }, P) => {
-    const b = _(), E = L(f === "password"), [d, z] = W(() => f !== "password"), m = typeof r == "string" && r.length >= 0, I = d ? w : x;
-    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": k, children: [
-      c ? /* @__PURE__ */ h(
-        u,
+    ...E
+  }, z) => {
+    const b = W(), I = $(f === "password"), [h, _] = T(() => f !== "password"), m = typeof r == "string" && r.length >= 0, L = h ? w : x;
+    return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": P, children: [
+      c ? /* @__PURE__ */ u(
+        "div",
         {
-          component: "label",
-          variant: "labelLarge",
-          htmlFor: b,
           className: i(
-            "cursor-pointer",
-            "flex",
-            "gap-1",
-            "text-sm",
-            "font-medium",
-            O
+            "flex items-center justify-between",
+            k
           ),
           children: [
-            c,
-            " ",
-            o && /* @__PURE__ */ s(
-              u,
+            /* @__PURE__ */ u(
+              d,
               {
-                component: "span",
+                component: "label",
+                variant: "labelLarge",
+                htmlFor: b,
                 className: i(
-                  "text-red-600",
-                  "dark:text-red-500",
-                  "text-xs",
-                  "mt-0.5"
+                  "cursor-pointer",
+                  "flex",
+                  "gap-1",
+                  "text-sm",
+                  "font-medium",
+                  j
                 ),
-                children: "*"
+                children: [
+                  c,
+                  " ",
+                  o && /* @__PURE__ */ s(
+                    d,
+                    {
+                      component: "span",
+                      className: i(
+                        "text-red-600",
+                        "dark:text-red-500",
+                        "text-xs",
+                        "mt-0.5"
+                      ),
+                      children: "*"
+                    }
+                  )
+                ]
               }
-            )
+            ),
+            O
           ]
         }
       ) : null,
-      /* @__PURE__ */ h("div", { className: "relative", children: [
+      /* @__PURE__ */ u("div", { className: "relative", children: [
         a ? /* @__PURE__ */ s(
           "i",
           {
@@ -178,19 +192,19 @@ const B = y(
                 "text-red-700": m
               }
             ),
-            children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ s(C, { className: "w-5 h-5" })
           }
         ) : null,
         /* @__PURE__ */ s(
           "input",
           {
             id: c ? b : void 0,
-            ref: P,
-            name: j,
-            type: d ? E.current ? "text" : f : "password",
+            ref: z,
+            name: N,
+            type: h ? I.current ? "text" : f : "password",
             "data-error": m,
             className: i(
-              $({
+              S({
                 className: t,
                 variant: m ? "error" : "default"
               }),
@@ -199,7 +213,7 @@ const B = y(
                 "pl-8": a
               }
             ),
-            ...N
+            ...E
           }
         ),
         m ? /* @__PURE__ */ s(
@@ -213,7 +227,7 @@ const B = y(
               "top-1/2",
               "dark:text-red-500"
             ),
-            children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ s(M, { className: "w-5 h-5" })
           }
         ) : null,
         f === "password" && !r ? /* @__PURE__ */ s(
@@ -227,17 +241,17 @@ const B = y(
               "top-1/2"
             ),
             children: /* @__PURE__ */ s(
-              I,
+              L,
               {
                 className: "w-5 h-5 cursor-pointer",
-                onClick: () => z(!d)
+                onClick: () => _(!h)
               }
             )
           }
         ) : null
       ] }),
       r ? /* @__PURE__ */ s(
-        u,
+        d,
         {
           component: "span",
           className: i(
@@ -250,7 +264,7 @@ const B = y(
         }
       ) : null,
       !r && n ? /* @__PURE__ */ s(
-        u,
+        d,
         {
           component: "span",
           variant: "body1",
@@ -268,7 +282,7 @@ const B = y(
     ] });
   }
 );
-B.displayName = "KonstructInput";
+F.displayName = "KonstructInput";
 export {
-  B as Input
+  F as Input
 };

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

@@ -25,8 +25,12 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Varia
     isSearch?: boolean;
     /** Label text or element displayed above the input */
     label?: string | ReactNode;
+    /** Custom element rendered on the right side of the label (e.g. icon, button) */
+    labelAction?: ReactNode;
     /** Additional CSS classes for the label */
     labelClassName?: string;
+    /** Additional CSS classes for the label wrapper container */
+    labelWrapperClassName?: string;
     /** Theme override for this component */
     theme?: Theme;
 }

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

@@ -52,6 +52,8 @@ export interface MultiSelectDropdownProps extends VariantProps<typeof multiSelec
     label?: string;
     /** Additional CSS classes for the label */
     labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Whether multiple options can be selected */
     multiselect?: boolean;
     /** Form field name */

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -1,59 +1,60 @@
 import "../Item/Item.js";
-import { List as k } from "../List/List.js";
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as O, useId as C, useImperativeHandle as D } from "react";
-import { Badge as S } from "../../../Badge/Badge.js";
+import { List as O } from "../List/List.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useId as D, useImperativeHandle as S } from "react";
+import { Badge as I } from "../../../Badge/Badge.js";
 import { Typography as p } from "../../../Typography/Typography.js";
 import { cn as a } from "../../../../utils/index.js";
-import { useMultiSelectDropdown as I } from "../../hooks/useMultiSelectDropdown.js";
-import { labelVariants as L, multiSelectDropdownVariants as M, wrapperVariants as R } from "../../MultiSelectDropdown.variants.js";
-import { X as V } from "../../../../x-B9bYxG31.js";
-import { LoaderIcon as j } from "../../../../assets/icons/components/Loader.js";
-import { C as W } from "../../../../chevron-up-DEfvgPCw.js";
-import { useMultiSelectDropdown as $ } from "../../contexts/MultiSelectDropdown.hook.js";
-const z = O(
+import { useMultiSelectDropdown as L } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as M, multiSelectDropdownVariants as R, wrapperVariants as V } from "../../MultiSelectDropdown.variants.js";
+import { X as j } from "../../../../x-B9bYxG31.js";
+import { LoaderIcon as W } from "../../../../assets/icons/components/Loader.js";
+import { C as $ } from "../../../../chevron-up-DEfvgPCw.js";
+import { useMultiSelectDropdown as z } from "../../contexts/MultiSelectDropdown.hook.js";
+const B = C(
   ({
     isRequired: c,
-    label: l,
+    label: n,
     labelClassName: d,
+    labelWrapperClassName: f,
     name: s,
-    placeholder: f = "",
-    theme: u,
-    wrapperClassName: h
-  }, x) => {
-    const N = C(), i = s ? `${N}-name` : "id", {
+    placeholder: u = "",
+    theme: h,
+    wrapperClassName: x
+  }, N) => {
+    const v = D(), i = s ? `${v}-name` : "id", {
       inputRef: t,
       isLoading: w,
       isOpen: o,
       selectedOptions: m,
       onOpen: g,
-      onRemoveOption: v
-    } = $(), { wrapperRef: b, handleOpen: y } = I();
-    return D(x, () => t.current, [t]), /* @__PURE__ */ n(
+      onRemoveOption: b
+    } = z(), { wrapperRef: y, handleOpen: k } = L();
+    return S(N, () => t.current, [t]), /* @__PURE__ */ l(
       "div",
       {
-        ref: b,
+        ref: y,
         className: a(
-          R({
-            className: h
+          V({
+            className: x
           })
         ),
-        "data-theme": u,
+        "data-theme": h,
         children: [
-          l ? /* @__PURE__ */ n(
+          n ? /* @__PURE__ */ e("div", { className: a(f), children: /* @__PURE__ */ l(
             p,
             {
               component: "label",
               variant: "labelLarge",
               htmlFor: i,
               className: a(
-                L({
+                M({
                   className: d
                 })
               ),
               onClick: () => g(!0),
               children: [
-                l,
+                n,
                 " ",
                 c && /* @__PURE__ */ e(
                   p,
@@ -65,34 +66,34 @@ const z = O(
                 )
               ]
             }
-          ) : null,
-          /* @__PURE__ */ n(
+          ) }) : null,
+          /* @__PURE__ */ l(
             "div",
             {
               id: i,
-              className: a(M()),
+              className: a(R()),
               role: "combobox",
-              onClick: y,
+              onClick: k,
               "aria-expanded": o,
               children: [
-                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: f }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
-                  S,
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: u }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
+                  I,
                   {
                     "data-value": r.label,
                     label: r.value ?? r.label ?? "",
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ e(V, { onClick: () => v(r) })
+                    rightIcon: /* @__PURE__ */ e(j, { onClick: () => b(r) })
                   },
                   r.id
                 )) }),
                 w ? /* @__PURE__ */ e(
-                  j,
+                  W,
                   {
                     size: 16,
                     className: "animate-spin shrink-0 text-gray-400"
                   }
                 ) : /* @__PURE__ */ e(
-                  W,
+                  $,
                   {
                     className: a(
                       "w-4 h-4 transition-all duration-50 shrink-0 text-gray-400",
@@ -113,13 +114,13 @@ const z = O(
               readOnly: !0
             }
           ),
-          o ? /* @__PURE__ */ e(k, {}) : null
+          o ? /* @__PURE__ */ e(O, {}) : null
         ]
       }
     );
   }
 );
-z.displayName = "MultiSelectDropdownWrapper";
+B.displayName = "MultiSelectDropdownWrapper";
 export {
-  z as Wrapper
+  B as Wrapper
 };

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

@@ -32,6 +32,8 @@ export type Props = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     /** Additional CSS classes for the label */
     labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Form field name */
     name?: string;
     /** Placeholder text for the input */