@konstructio/ui 0.1.2-alpha.66 → 0.1.2-alpha.68

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,83 +1,85 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { useMemo as W } from "react";
+import { useMemo as q } from "react";
 import { cn as n } from "../../utils/index.js";
-import { buttonGroupPillVariants as k, buttonGroupVariants as q, buttonGroupWrapperVariants as z } from "./ButtonGroup.variants.js";
-import { useButtonGroup as A } from "./hooks/useButtonGroup.js";
-import { ButtonGroupLabel as E } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
-import { m as H } from "../../proxy-BIRlSMN_.js";
-import { ButtonGroupItem as J } from "./components/ButtonGroupItem/ButtonGroupItem.js";
-import { ButtonGroupMessage as Q } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
-const T = ({
+import { buttonGroupPillVariants as z, buttonGroupVariants as A, buttonGroupWrapperVariants as E } from "./ButtonGroup.variants.js";
+import { useButtonGroup as H } from "./hooks/useButtonGroup.js";
+import { ButtonGroupLabel as J } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { m as Q } from "../../proxy-BIRlSMN_.js";
+import { ButtonGroupItem as T } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupMessage as U } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+const X = ({
   className: p,
   contentClassName: f,
   defaultValue: h,
-  descriptionClassName: v,
+  descriptionAlign: v,
+  descriptionClassName: G,
   disabled: o,
   duration: l,
-  error: G,
-  errorClassName: b,
-  helperText: N,
-  helperTextClassName: y,
-  isRequired: B,
-  itemClassName: D,
-  itemLabelClassName: g,
+  error: b,
+  errorClassName: N,
+  helperText: y,
+  helperTextClassName: B,
+  isRequired: D,
+  itemClassName: g,
+  itemLabelClassName: x,
   label: s,
-  labelClassName: x,
-  name: w,
+  labelAlign: w,
+  labelClassName: I,
+  name: K,
   options: t,
-  pillClassName: I,
-  requiredClassName: K,
-  theme: S,
-  value: V,
-  wrapperClassName: $,
-  onValueChange: j
+  pillClassName: S,
+  requiredClassName: V,
+  theme: $,
+  value: j,
+  wrapperClassName: F,
+  onValueChange: L
 }) => {
   const {
-    animationDirection: F,
-    groupRef: L,
+    animationDirection: M,
+    groupRef: C,
     id: m,
     selected: r,
-    handleKeyDown: M,
-    handleSelect: C
-  } = A({
+    handleKeyDown: O,
+    handleSelect: P
+  } = H({
     defaultValue: h,
     disabled: o ?? void 0,
     options: t,
-    value: V,
-    onValueChange: j
-  }), u = t.length, c = W(
+    value: j,
+    onValueChange: L
+  }), u = t.length, c = q(
     () => t.findIndex((e) => e.value === r),
     [t, r]
   );
   return /* @__PURE__ */ d(
     "div",
     {
-      className: n(z(), $),
-      "data-theme": S,
+      className: n(E(), F),
+      "data-theme": $,
       children: [
         s && /* @__PURE__ */ a(
-          E,
+          J,
           {
-            className: x,
+            className: I,
             htmlFor: m,
-            isRequired: B,
+            isRequired: D,
             label: s,
-            requiredClassName: K
+            requiredClassName: V
           }
         ),
         /* @__PURE__ */ d(
           "div",
           {
-            ref: L,
+            ref: C,
             role: "radiogroup",
             "aria-labelledby": s ? m : void 0,
-            className: n(q({ disabled: o }), p),
+            className: n(A({ disabled: o }), p),
             children: [
               c >= 0 && /* @__PURE__ */ a(
-                H.div,
+                Q.div,
                 {
                   "aria-hidden": "true",
-                  className: n(k(), I),
+                  className: n(z(), S),
                   initial: !1,
                   animate: {
                     left: `calc(${c} * (100% / ${u}) + 8px)`,
@@ -91,26 +93,28 @@ const T = ({
                 }
               ),
               t.map((e, i) => {
-                const O = r === e.value, P = o || e.disabled, R = !!e.description;
+                const R = r === e.value, W = o || e.disabled, k = !!e.description;
                 return /* @__PURE__ */ a(
-                  J,
+                  T,
                   {
-                    animationDirection: F,
-                    className: D,
+                    animationDirection: M,
+                    className: g,
                     contentClassName: f,
-                    descriptionClassName: v,
+                    descriptionAlign: v,
+                    descriptionClassName: G,
                     duration: l,
-                    hasDescription: R,
+                    hasDescription: k,
                     index: i,
-                    isDisabled: !!P,
+                    isDisabled: !!W,
                     isFirst: i === 0,
                     isLast: i === t.length - 1,
-                    isSelected: O,
-                    labelClassName: g,
+                    isSelected: R,
+                    labelAlign: w,
+                    labelClassName: x,
                     option: e,
                     value: e.value,
-                    onKeyDown: M,
-                    onSelect: C
+                    onKeyDown: O,
+                    onSelect: P
                   },
                   e.value
                 );
@@ -118,21 +122,21 @@ const T = ({
             ]
           }
         ),
-        /* @__PURE__ */ a("input", { type: "hidden", name: w, value: r ?? "" }),
+        /* @__PURE__ */ a("input", { type: "hidden", name: K, value: r ?? "" }),
         /* @__PURE__ */ a(
-          Q,
+          U,
           {
-            error: G,
-            errorClassName: b,
-            helperText: N,
-            helperTextClassName: y
+            error: b,
+            errorClassName: N,
+            helperText: y,
+            helperTextClassName: B
           }
         )
       ]
     }
   );
 };
-T.displayName = "KonstructButtonGroup";
+X.displayName = "KonstructButtonGroup";
 export {
-  T as ButtonGroup
+  X as ButtonGroup
 };

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

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { Theme } from '../../domain/theme';
 import { buttonGroupVariants } from './ButtonGroup.variants';
+/** Horizontal text alignment for label and description */
+export type TextAlign = 'left' | 'center' | 'right';
 /**
  * Configuration for a single button option in the ButtonGroup.
  */
@@ -53,6 +55,8 @@ export type Props = VariantProps<typeof buttonGroupVariants> & {
     contentClassName?: string;
     /** Initially selected value (uncontrolled mode) */
     defaultValue?: string;
+    /** Horizontal alignment of the description text (default: 'left') */
+    descriptionAlign?: TextAlign;
     /** CSS classes for description text */
     descriptionClassName?: string;
     /** Animation duration in seconds (default: 0.3) */
@@ -71,6 +75,8 @@ export type Props = VariantProps<typeof buttonGroupVariants> & {
     itemClassName?: string;
     /** CSS classes for the label text inside items */
     itemLabelClassName?: string;
+    /** Horizontal alignment of the label text (default: 'left') */
+    labelAlign?: TextAlign;
     /** Label displayed above the button group */
     label?: string | ReactNode;
     /** CSS classes for the label */

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -1,26 +1,28 @@
 import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { memo as x } from "react";
+import { memo as L } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { buttonGroupLabelVariants as o, buttonGroupDescriptionVariants as I, buttonGroupItemContentVariants as L, buttonGroupItemVariants as g } from "./ButtonGroupItem.variants.js";
-import { m as V } from "../../../../proxy-BIRlSMN_.js";
-const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", j = x(
+import { buttonGroupLabelVariants as u, buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w } from "./ButtonGroupItem.variants.js";
+import { m as j } from "../../../../proxy-BIRlSMN_.js";
+const k = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = L(
   ({
     animationDirection: r,
     className: n,
-    contentClassName: u,
-    descriptionClassName: d,
-    duration: p = 0.3,
-    hasDescription: h,
+    contentClassName: d,
+    descriptionAlign: p,
+    descriptionClassName: h,
+    duration: b = 0.3,
+    hasDescription: f,
     index: c,
     isDisabled: l,
-    isFirst: b,
-    isLast: f,
+    isFirst: y,
+    isLast: N,
     isSelected: i,
-    labelClassName: m,
+    labelAlign: m,
+    labelClassName: o,
     option: e,
-    value: y,
-    onKeyDown: N,
-    onSelect: v
+    value: v,
+    onKeyDown: G,
+    onSelect: x
   }) => /* @__PURE__ */ s(
     "button",
     {
@@ -30,10 +32,10 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
       "data-value": e.value,
       disabled: l,
       tabIndex: i || c === 0 ? 0 : -1,
-      onClick: () => !l && v(y),
-      onKeyDown: (G) => N(G, c),
+      onClick: () => !l && x(v),
+      onKeyDown: (I) => G(I, c),
       className: t(
-        g({ disabled: l, isFirst: b, isLast: f }),
+        w({ disabled: l, isFirst: y, isLast: N }),
         "relative",
         n
       ),
@@ -41,9 +43,9 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
         "div",
         {
           className: t(
-            L({ hasDescription: h }),
+            g({ hasDescription: f }),
             "relative",
-            u
+            d
           ),
           children: [
             /* @__PURE__ */ a("span", { className: "relative w-full", children: [
@@ -51,8 +53,8 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
                 "span",
                 {
                   className: t(
-                    o({ selected: !1 }),
-                    m
+                    u({ selected: !1, labelAlign: m }),
+                    o
                   ),
                   children: [
                     /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
@@ -64,22 +66,22 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
                 }
               ),
               /* @__PURE__ */ a(
-                V.span,
+                j.span,
                 {
                   className: t(
-                    o({ selected: !0 }),
+                    u({ selected: !0, labelAlign: m }),
                     "absolute inset-0",
-                    m
+                    o
                   ),
                   "aria-hidden": "true",
                   initial: !1,
                   animate: {
-                    clipPath: w(i, r)
+                    clipPath: k(i, r)
                   },
                   transition: {
                     type: "tween",
                     ease: "linear",
-                    duration: p
+                    duration: b
                   },
                   children: [
                     /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
@@ -95,8 +97,8 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
               "span",
               {
                 className: t(
-                  I(),
-                  d
+                  V({ descriptionAlign: p }),
+                  h
                 ),
                 children: e.description
               }
@@ -108,7 +110,7 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
     e.value
   )
 );
-j.displayName = "KonstructButtonGroupItem";
+B.displayName = "KonstructButtonGroupItem";
 export {
-  j as ButtonGroupItem
+  B as ButtonGroupItem
 };

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.types.d.ts

@@ -1,12 +1,14 @@
 import { KeyboardEvent } from 'react';
-import { ButtonGroupOption } from '../../ButtonGroup.types';
+import { ButtonGroupOption, TextAlign } from '../../ButtonGroup.types';
 import { AnimationDirection } from '../../hooks';
 export type Props = {
     animationDirection: AnimationDirection;
     className?: string;
     contentClassName?: string;
+    descriptionAlign?: TextAlign;
     descriptionClassName?: string;
     duration?: number;
+    labelAlign?: TextAlign;
     hasDescription: boolean;
     index: number;
     isDisabled: boolean;

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.d.ts

@@ -17,8 +17,11 @@ export declare const buttonGroupItemContentVariants: (props?: ({
  */
 export declare const buttonGroupLabelVariants: (props?: ({
     selected?: boolean | null | undefined;
+    labelAlign?: "center" | "left" | "right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Description text variants inside button item
  */
-export declare const buttonGroupDescriptionVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonGroupDescriptionVariants: (props?: ({
+    descriptionAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.js

@@ -1,5 +1,5 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const s = t(
+const r = t(
   [
     "flex",
     "flex-1",
@@ -38,20 +38,20 @@ const s = t(
       isLast: !1
     }
   }
-), r = t(
+), s = t(
   ["flex", "flex-col", "flex-1", "rounded-lg", "px-4", "py-2"],
   {
     variants: {
       hasDescription: {
-        true: "items-start text-left justify-start",
-        false: "items-center text-center justify-center"
+        true: "justify-start",
+        false: "justify-center"
       }
     },
     defaultVariants: {
       hasDescription: !1
     }
   }
-), a = t(
+), n = t(
   [
     "text-sm",
     "font-medium",
@@ -70,22 +70,42 @@ const s = t(
       selected: {
         true: "text-aurora-500",
         false: "text-metal-50"
+      },
+      labelAlign: {
+        left: "justify-between",
+        center: "justify-center",
+        right: "justify-end"
+      }
+    },
+    defaultVariants: {
+      selected: !1,
+      labelAlign: "left"
+    }
+  }
+), a = t(
+  [
+    "text-sm",
+    "font-normal",
+    "leading-5",
+    "tracking-[0.15px]",
+    "text-metal-300"
+  ],
+  {
+    variants: {
+      descriptionAlign: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
       }
     },
     defaultVariants: {
-      selected: !1
+      descriptionAlign: "left"
     }
   }
-), n = t([
-  "text-sm",
-  "font-normal",
-  "leading-5",
-  "tracking-[0.15px]",
-  "text-metal-300"
-]);
+);
 export {
-  n as buttonGroupDescriptionVariants,
-  r as buttonGroupItemContentVariants,
-  s as buttonGroupItemVariants,
-  a as buttonGroupLabelVariants
+  a as buttonGroupDescriptionVariants,
+  s as buttonGroupItemContentVariants,
+  r as buttonGroupItemVariants,
+  n as buttonGroupLabelVariants
 };

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

@@ -4,7 +4,7 @@ import { cn as d } from "../../../../../../utils/index.js";
 import { calendarMonthTitleVariants as f } from "../../CalendarPanel.variants.js";
 import { createDayPickerClassNames as h, SINGLE_MONTH_WIDTH as p } from "../../constants/index.js";
 import { getMonthName as M } from "../../../../utils/validation.js";
-import { D as y } from "../../../../../../DayPicker-PUEUVAST.js";
+import { D as y } from "../../../../../../DayPicker-CaeUXRCF.js";
 const N = (e) => `${M(e.getMonth())} ${e.getFullYear()}`, g = ({
   month: e,
   range: a,

package/dist/components/Datepicker/DatePicker.js

@@ -3,7 +3,7 @@ import { useState as h, useCallback as f } from "react";
 import { cn as t } from "../../utils/index.js";
 import { datePickerVariants as p } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
-import { D as k } from "../../DayPicker-PUEUVAST.js";
+import { D as k } from "../../DayPicker-CaeUXRCF.js";
 import { C as g } from "../../chevron-left-BHBf-gQY.js";
 import { C as w } from "../../chevron-right-DvXGOiS_.js";
 const y = ({

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal--z642-Wv.js";
+import { M as d } from "../../Modal-mwLmWbnA.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -2,10 +2,11 @@ import "react/jsx-runtime";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as f } from "../../../../Modal--z642-Wv.js";
+import { W as s } from "../../../../Modal-mwLmWbnA.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
+import "../../../../proxy-BIRlSMN_.js";
 import "../../../../x-Eoa9FJjA.js";
 export {
-  f as Wrapper
+  s as Wrapper
 };

package/dist/components/Modal/components/Wrapper/Wrapper.variants.js

@@ -8,8 +8,8 @@ const a = t([
   "flex",
   "flex-col",
   "justify-between",
-  "min-h-[450px]",
-  "min-w-[500px]",
+  "min-h-112.5",
+  "min-w-125",
   "relative",
   "rounded-md",
   "shadow-xs",

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal--z642-Wv.js";
+import { W as a } from "../../../Modal-mwLmWbnA.js";
 export {
   e as Body,
   t as Footer,

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { SelectProps } from './Select.types';
+export type { OptionGroup, AdditionalOptionGroup } from './Select.types';
 /**
  * A dropdown select component with search, icons, and infinite scroll support.
  * Also exported as `Dropdown` for convenience.

package/dist/components/Select/Select.js

@@ -1,47 +1,61 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { forwardRef as N, useMemo as O } from "react";
 import { cn as l } from "../../utils/index.js";
-import { SelectProvider as N } from "./contexts/select.provider.js";
-import { Wrapper as j } from "./components/Wrapper.js";
-const W = v(
+import { i as g } from "../../AdditionalOptions-C2FDVZhu.js";
+import { SelectProvider as j } from "./contexts/select.provider.js";
+import { Wrapper as w } from "./components/Wrapper.js";
+const W = N(
   ({
-    error: t,
-    errorClassName: r,
-    helperText: s,
-    helperTextClassName: a,
-    highlightSearch: c,
-    mainWrapperClassName: o,
-    name: m,
-    value: p,
-    options: d,
+    error: e,
+    errorClassName: m,
+    helperText: a,
+    helperTextClassName: n,
+    highlightSearch: o,
+    mainWrapperClassName: p,
+    name: s,
+    value: c,
+    options: t,
     onChange: f,
     onBlur: i,
-    ...n
-  }, x) => /* @__PURE__ */ e(
-    N,
-    {
-      highlightSearch: c,
-      name: m,
-      value: p,
-      options: d,
-      onBlur: i,
-      onChange: f,
-      children: /* @__PURE__ */ h("div", { className: l("relative w-full", o), children: [
-        /* @__PURE__ */ e(
-          j,
-          {
-            error: t,
-            name: m,
-            ref: x,
-            onBlur: i,
-            ...n
-          }
-        ),
-        t ? /* @__PURE__ */ e("span", { className: l("text-xs text-red-700", r), children: t }) : null,
-        !t && s ? /* @__PURE__ */ e("span", { className: l("text-xs text-metal-600", a), children: s }) : null
-      ] })
-    }
-  )
+    ...d
+  }, x) => {
+    const u = O(() => t.length ? g(t.at(0)) ? t.flatMap((h) => h.options) : t : [], [t]);
+    return /* @__PURE__ */ r(
+      j,
+      {
+        highlightSearch: o,
+        name: s,
+        value: c,
+        options: u,
+        onBlur: i,
+        onChange: f,
+        children: /* @__PURE__ */ v("div", { className: l("relative w-full", p), children: [
+          /* @__PURE__ */ r(
+            w,
+            {
+              error: e,
+              name: s,
+              ref: x,
+              onBlur: i,
+              groupedOptions: t,
+              ...d
+            }
+          ),
+          e ? /* @__PURE__ */ r(
+            "span",
+            {
+              className: l(
+                "text-xs text-red-700 dark:text-red-400",
+                m
+              ),
+              children: e
+            }
+          ) : null,
+          !e && a ? /* @__PURE__ */ r("span", { className: l("text-xs text-metal-600", n), children: a }) : null
+        ] })
+      }
+    );
+  }
 );
 export {
   W as Select