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

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,14 +1,14 @@
 import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useId as ee, useRef as D, useState as g, useEffect as te } from "react";
+import { useId as te, useRef as D, useState as g, useEffect as ae } from "react";
 import { Button as F } from "../Button/Button.js";
-import { cn as m } from "../../utils/index.js";
-import { labelVariants as ae, inputFieldVariants as re, inputContainerVariants as le, helperTextVariants as ie, imageUploadVariants as se } from "./ImageUpload.variants.js";
-import { LoaderIcon as ne } from "../../assets/icons/components/Loader.js";
+import { cn as c } from "../../utils/index.js";
+import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
+import { LoaderIcon as ce } from "../../assets/icons/components/Loader.js";
 import { PhotoLibraryIcon as oe } from "../../assets/icons/components/PhotoLibrary.js";
-import { WarningIcon as ce } from "../../assets/icons/components/Warning.js";
+import { WarningIcon as de } from "../../assets/icons/components/Warning.js";
 import { X as P } from "../../x-B9bYxG31.js";
 var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
-const de = ({
+const me = ({
   className: s,
   error: b,
   fileName: T,
@@ -18,37 +18,38 @@ const de = ({
   isRequired: S = !1,
   label: p = "Item logo",
   labelClassName: L,
-  name: A,
+  labelWrapperClassName: A,
+  name: H,
   onChange: N,
-  onRemove: H,
+  onRemove: J,
   status: k = t.Default,
   theme: u,
-  uploadButtonText: J = "Upload logo",
+  uploadButtonText: K = "Upload logo",
   accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
-  maxSize: K = 5 * 1024 * 1024
+  maxSize: W = 5 * 1024 * 1024
 }) => {
-  const U = ee(), f = D(null), n = D(null), [W, o] = g(k), [$, B] = g(E), [X, C] = g(T), [q, G] = g(z);
-  te(() => () => {
+  const U = te(), f = D(null), n = D(null), [$, o] = g(k), [X, B] = g(E), [q, C] = g(T), [O, G] = g(z);
+  ae(() => () => {
     n.current && clearTimeout(n.current);
   }, []);
-  const a = k !== t.Default ? k : W, v = E ?? $, c = T ?? X, h = z ?? q, x = !!b || a === t.Error, O = (i) => {
+  const a = k !== t.Default ? k : $, v = E ?? X, d = T ?? q, h = z ?? O, x = !!b || a === t.Error, Q = (i) => {
     const r = i.target.files?.[0];
     if (!r) return;
-    if (!M.split(",").map((d) => d.trim()).some((d) => {
-      if (d.includes("*")) {
-        const _ = d.split("/")[0];
-        return r.type.startsWith(_);
+    if (!M.split(",").map((m) => m.trim()).some((m) => {
+      if (m.includes("*")) {
+        const ee = m.split("/")[0];
+        return r.type.startsWith(ee);
       }
-      return r.type === d;
+      return r.type === m;
     })) {
       o(t.Error), N?.(i);
       return;
     }
-    if (r.size > K) {
+    if (r.size > W) {
       o(t.Error), N?.(i);
       return;
     }
-    o(t.Uploading), C(r.name), G(Y(r.size));
+    o(t.Uploading), C(r.name), G(Z(r.size));
     const y = new FileReader();
     y.onloadend = () => {
       B(y.result), n.current = setTimeout(() => {
@@ -56,31 +57,31 @@ const de = ({
       }, 500);
     }, y.readAsDataURL(r), N?.(i);
   }, I = () => {
-    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), H?.();
-  }, Q = () => {
+    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), J?.();
+  }, Y = () => {
     f.current?.click();
-  }, Y = (i) => {
+  }, Z = (i) => {
     if (i === 0) return "0 Bytes";
     const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
     return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
-  }, Z = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
+  }, _ = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
   return /* @__PURE__ */ l(
     "div",
     {
-      className: m(
-        se({
+      className: c(
+        ne({
           status: a,
           className: s
         })
       ),
       "data-theme": u,
       children: [
-        p && /* @__PURE__ */ l(
+        p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l(
           "label",
           {
             htmlFor: U,
-            className: m(
-              ae({
+            className: c(
+              re({
                 className: L
               }),
               "cursor-pointer"
@@ -90,12 +91,12 @@ const de = ({
               S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
             ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ l(
           "div",
           {
-            className: m(
-              le({
+            className: c(
+              ie({
                 status: a
               })
             ),
@@ -103,8 +104,8 @@ const de = ({
               /* @__PURE__ */ l(
                 "div",
                 {
-                  className: m(
-                    re({
+                  className: c(
+                    le({
                       status: a
                     }),
                     {
@@ -115,14 +116,14 @@ const de = ({
                   children: [
                     a === t.Uploading && /* @__PURE__ */ l(j, { children: [
                       /* @__PURE__ */ e(
-                        ne,
+                        ce,
                         {
                           size: 20,
                           className: "shrink-0 animate-spin text-metal-400"
                         }
                       ),
-                      c && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: c }),
+                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
                         h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
                       ] })
                     ] }),
@@ -131,17 +132,17 @@ const de = ({
                         "img",
                         {
                           src: v,
-                          alt: c || "Uploaded image",
+                          alt: d || "Uploaded image",
                           className: "w-full h-full object-contain"
                         }
                       ) }),
-                      c && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: c }),
+                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
                         h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
                       ] })
                     ] }),
                     (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
-                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(ce, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
+                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
                   ]
                 }
               ),
@@ -149,10 +150,10 @@ const de = ({
                 F,
                 {
                   variant: "secondary",
-                  onClick: Q,
+                  onClick: Y,
                   theme: u,
                   className: "h-10 px-4 py-2 shrink-0",
-                  children: J
+                  children: K
                 }
               ),
               a === t.Uploading && /* @__PURE__ */ e(
@@ -188,12 +189,12 @@ const de = ({
           /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
             "p",
             {
-              className: m(
-                ie({
+              className: c(
+                se({
                   status: a
                 })
               ),
-              children: Z
+              children: _
             }
           ) }),
           (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
@@ -205,9 +206,9 @@ const de = ({
             ref: f,
             id: U,
             type: "file",
-            name: A,
+            name: H,
             accept: M,
-            onChange: O,
+            onChange: Q,
             className: "hidden",
             "aria-label": typeof p == "string" ? p : "File upload"
           }
@@ -216,7 +217,7 @@ const de = ({
     }
   );
 };
-de.displayName = "KonstructImageUpload";
+me.displayName = "KonstructImageUpload";
 export {
-  de as ImageUpload
+  me as ImageUpload
 };

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

@@ -48,6 +48,8 @@ export interface ImageUploadProps extends Omit<VariantProps<typeof imageUploadVa
     label?: string | ReactNode;
     /** Additional CSS classes for the label */
     labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Form field name */
     name?: string;
     /** Callback fired when a file is selected */

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