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

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

@@ -32,6 +32,8 @@ export interface CounterProps extends VariantProps<typeof counterVariants> {
     isRequired?: boolean;
     /** Label displayed above the counter */
     label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Maximum allowed value */
     max?: number;
     /** Minimum allowed value */

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,84 +1,85 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { cn as t } from "../../utils/index.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cn as a } from "../../utils/index.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { rightPanelVariants as O, dateRangePickerVariants as Q } from "./DateRangePicker.variants.js";
-import { DateRangePickerProvider as S } from "./contexts/date-range-picker.provider.js";
-import { PresetPanel as U } from "./components/PresetPanel/PresetPanel.js";
-import { DateTimeInputs as W } from "./components/DateTimeInputs/DateTimeInputs.js";
-import { CalendarPanel as X } from "./components/CalendarPanel/CalendarPanel.js";
-const Y = ({
+import { rightPanelVariants as Q, dateRangePickerVariants as S } from "./DateRangePicker.variants.js";
+import { DateRangePickerProvider as U } from "./contexts/date-range-picker.provider.js";
+import { PresetPanel as W } from "./components/PresetPanel/PresetPanel.js";
+import { DateTimeInputs as X } from "./components/DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as Y } from "./components/CalendarPanel/CalendarPanel.js";
+const Z = ({
   animationDuration: o = 500,
   className: m,
   defaultPreset: l = "custom",
   defaultRange: c,
-  defaultTime: p,
-  disabled: s = !1,
+  defaultTime: s,
+  disabled: p = !1,
   isRequired: d,
   label: n,
-  name: f,
-  showTime: g = !0,
-  theme: P,
+  labelWrapperClassName: f,
+  name: g,
+  showTime: P = !0,
+  theme: h,
   timeFormat: x = "24",
-  blockedDays: h,
-  blockedMonths: u,
-  minDate: k,
-  maxDate: v,
+  blockedDays: u,
+  blockedMonths: k,
+  minDate: v,
+  maxDate: N,
   hideDisabledNavigation: D,
-  showOutsideDays: N,
-  navigationMode: R = "independent",
+  showOutsideDays: R,
+  navigationMode: y = "independent",
   // CalendarPanel props
-  ariaLabelCalendar: y,
-  ariaLabelPrevMonth: T,
-  ariaLabelNextMonth: j,
-  ariaLabelPrevMonthStart: I,
-  ariaLabelNextMonthStart: V,
-  ariaLabelPrevMonthEnd: b,
-  ariaLabelNextMonthEnd: C,
+  ariaLabelCalendar: T,
+  ariaLabelPrevMonth: j,
+  ariaLabelNextMonth: I,
+  ariaLabelPrevMonthStart: V,
+  ariaLabelNextMonthStart: b,
+  ariaLabelPrevMonthEnd: C,
+  ariaLabelNextMonthEnd: K,
   // DateTimeInputs props
-  labelStartDate: K,
-  labelEndDate: L,
-  labelTime: q,
-  ariaLabelStartDate: w,
-  ariaLabelEndDate: z,
-  errorInvalidDate: A,
-  errorDateNotAvailable: B,
+  labelStartDate: L,
+  labelEndDate: q,
+  labelTime: w,
+  ariaLabelStartDate: z,
+  ariaLabelEndDate: A,
+  errorInvalidDate: B,
+  errorDateNotAvailable: E,
   // PresetPanel props
-  showPresets: E = !0,
-  labelTimePeriod: F,
-  ariaLabelTimePeriod: G,
-  presetLabels: H,
+  showPresets: F = !0,
+  labelTimePeriod: G,
+  ariaLabelTimePeriod: H,
+  presetLabels: J,
   // Customizable class names
-  classNames: e,
+  classNames: r,
   // Callbacks
-  onRangeChange: J,
-  onDateChange: M
-}) => /* @__PURE__ */ r(
-  S,
+  onRangeChange: M,
+  onDateChange: O
+}) => /* @__PURE__ */ e(
+  U,
   {
     defaultRange: c,
-    defaultTime: p,
+    defaultTime: s,
     defaultPreset: l,
     timeFormat: x,
-    showTime: g,
-    name: f,
-    disabled: s,
+    showTime: P,
+    name: g,
+    disabled: p,
     animationDuration: o,
-    blockedDays: h,
-    blockedMonths: u,
-    minDate: k,
-    maxDate: v,
+    blockedDays: u,
+    blockedMonths: k,
+    minDate: v,
+    maxDate: N,
     hideDisabledNavigation: D,
-    showOutsideDays: N,
-    navigationMode: R,
-    onRangeChange: J,
-    onDateChange: M,
-    children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", "data-theme": P, children: [
-      n ? /* @__PURE__ */ a(
+    showOutsideDays: R,
+    navigationMode: y,
+    onRangeChange: M,
+    onDateChange: O,
+    children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", "data-theme": h, children: [
+      n ? /* @__PURE__ */ e("div", { className: a(f), children: /* @__PURE__ */ t(
         i,
         {
           component: "label",
           variant: "labelLarge",
-          className: t(
+          className: a(
             "cursor-pointer",
             "flex",
             "gap-1",
@@ -87,11 +88,11 @@ const Y = ({
           ),
           children: [
             n,
-            d && /* @__PURE__ */ r(
+            d && /* @__PURE__ */ e(
               i,
               {
                 component: "span",
-                className: t(
+                className: a(
                   "text-red-600",
                   "dark:text-red-500",
                   "text-xs",
@@ -102,52 +103,52 @@ const Y = ({
             )
           ]
         }
-      ) : null,
-      /* @__PURE__ */ a(
+      ) }) : null,
+      /* @__PURE__ */ t(
         "div",
         {
-          className: t(
-            Q({ className: m }),
+          className: a(
+            S({ className: m }),
             "gap-4",
-            e?.container
+            r?.container
           ),
           role: "group",
           "aria-label": n || "Date range picker",
           children: [
-            E && /* @__PURE__ */ r(
-              U,
+            F && /* @__PURE__ */ e(
+              W,
               {
-                labelTimePeriod: F,
-                ariaLabelTimePeriod: G,
-                presetLabels: H,
-                classNames: e?.presetPanel
+                labelTimePeriod: G,
+                ariaLabelTimePeriod: H,
+                presetLabels: J,
+                classNames: r?.presetPanel
               }
             ),
-            /* @__PURE__ */ a("div", { className: t(O(), e?.rightPanel), children: [
-              /* @__PURE__ */ r(
-                W,
+            /* @__PURE__ */ t("div", { className: a(Q(), r?.rightPanel), children: [
+              /* @__PURE__ */ e(
+                X,
                 {
-                  labelStartDate: K,
-                  labelEndDate: L,
-                  labelTime: q,
-                  ariaLabelStartDate: w,
-                  ariaLabelEndDate: z,
-                  errorInvalidDate: A,
-                  errorDateNotAvailable: B,
-                  classNames: e?.dateTimeInputs
+                  labelStartDate: L,
+                  labelEndDate: q,
+                  labelTime: w,
+                  ariaLabelStartDate: z,
+                  ariaLabelEndDate: A,
+                  errorInvalidDate: B,
+                  errorDateNotAvailable: E,
+                  classNames: r?.dateTimeInputs
                 }
               ),
-              /* @__PURE__ */ r(
-                X,
+              /* @__PURE__ */ e(
+                Y,
                 {
-                  ariaLabelCalendar: y,
-                  ariaLabelPrevMonth: T,
-                  ariaLabelNextMonth: j,
-                  ariaLabelPrevMonthStart: I,
-                  ariaLabelNextMonthStart: V,
-                  ariaLabelPrevMonthEnd: b,
-                  ariaLabelNextMonthEnd: C,
-                  classNames: e?.calendarPanel
+                  ariaLabelCalendar: T,
+                  ariaLabelPrevMonth: j,
+                  ariaLabelNextMonth: I,
+                  ariaLabelPrevMonthStart: V,
+                  ariaLabelNextMonthStart: b,
+                  ariaLabelPrevMonthEnd: C,
+                  ariaLabelNextMonthEnd: K,
+                  classNames: r?.calendarPanel
                 }
               )
             ] })
@@ -157,7 +158,7 @@ const Y = ({
     ] })
   }
 );
-Y.displayName = "KonstructDateRangePicker";
+Z.displayName = "KonstructDateRangePicker";
 export {
-  Y as DateRangePicker
+  Z as DateRangePicker
 };

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

@@ -41,6 +41,8 @@ export type DateRangePickerProps = VariantProps<typeof dateRangePickerVariants>
     name?: string;
     /** Label for the component */
     label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
     /** Whether the field is required */
     isRequired?: boolean;
     /** Animation duration in milliseconds for month transitions (default: 400) */

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -7,7 +7,7 @@ import { CalendarDivider as tt } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as d } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as g } from "../NavigationButton/NavigationButton.js";
 import { useIndependentCarousel as nt } from "../../hooks/useIndependentCarousel.js";
-import { m as et } from "../../../../../../proxy-i19-YB39.js";
+import { m as et } from "../../../../../../proxy-BhEKW5n7.js";
 const at = ({
   className: b,
   calendarWidth: x = 550,

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -6,7 +6,7 @@ import { CalendarDivider as F } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as G } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as m } from "../NavigationButton/NavigationButton.js";
 import { useTogetherCarousel as H } from "../../hooks/useTogetherCarousel.js";
-import { m as R } from "../../../../../../proxy-i19-YB39.js";
+import { m as R } from "../../../../../../proxy-BhEKW5n7.js";
 const S = ({
   className: s,
   calendarWidth: h = 550,

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

@@ -19,7 +19,7 @@ import { ImageUploadProps } from './ImageUpload.types';
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
  */
 declare const ImageUpload: {
-    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { ImageUpload };

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