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

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 */