@konstructio/ui 0.1.2-alpha.67 → 0.1.2-alpha.69

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/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-BIRlSMN_.js";
+import { m as et } from "../../../../../../proxy-CngVm5qA.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-BIRlSMN_.js";
+import { m as R } from "../../../../../../proxy-CngVm5qA.js";
 const S = ({
   className: s,
   calendarWidth: h = 550,

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-BGcucTHv.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

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

@@ -1,7 +1,8 @@
-import { PropsWithChildren, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { modalVariants } from './components/Wrapper/Wrapper.variants';
+import { Transition } from 'motion/react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
+import { modalVariants } from './components/Wrapper/Wrapper.variants';
 /**
  * Props for the Modal component.
  *
@@ -21,6 +22,8 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
     className?: string;
+    /** CSS classes for the outer container (the overlay grid wrapper) */
+    containerClassName?: string;
     /** DOM element to portal the modal into (defaults to document.body) */
     container?: Element | DocumentFragment;
     /** Whether the modal is open */
@@ -29,6 +32,8 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     showCloseButton?: boolean;
     /** Theme override for this component */
     theme?: Theme;
+    /** Motion transition config for the modal animation */
+    transition?: Transition;
     /** Callback when modal is closed (Escape key or close button) */
     onClose?: () => void;
 };

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-BGcucTHv.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
+import "../../../../proxy-CngVm5qA.js";
 import "../../../../x-Eoa9FJjA.js";
 export {
-  f as Wrapper
+  s as Wrapper
 };

package/dist/components/Modal/components/Wrapper/Wrapper.types.d.ts

@@ -1,11 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
+import { Transition } from 'motion/react';
 import { PropsWithChildren } from 'react';
 import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     buttonCloseClassName?: string;
     className?: string;
+    containerClassName?: string;
     showCloseButton?: boolean;
     theme?: Theme;
+    transition?: Transition;
     onClose?: () => void;
 };

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-BGcucTHv.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,70 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as v } 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 { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { forwardRef as N, useMemo as O } from "react";
+import { cn as a } from "../../utils/index.js";
+import { i as g } from "../../AdditionalOptions-C2FDVZhu.js";
+import { SelectProvider as j } from "./contexts/select.provider.js";
+import { Wrapper as k } 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,
-    onChange: f,
+    error: e,
+    errorClassName: m,
+    helperText: l,
+    helperTextClassName: n,
+    highlightSearch: o,
+    mainWrapperClassName: p,
+    name: s,
+    value: c,
+    options: t,
+    onChange: d,
     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
-      ] })
-    }
-  )
+    ...f
+  }, 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: d,
+        children: /* @__PURE__ */ v("div", { className: a("relative w-full", p), children: [
+          /* @__PURE__ */ r(
+            k,
+            {
+              error: e,
+              name: s,
+              ref: x,
+              onBlur: i,
+              groupedOptions: t,
+              ...f
+            }
+          ),
+          e ? /* @__PURE__ */ r(
+            "span",
+            {
+              className: a(
+                "text-xs text-red-700 dark:text-red-400",
+                m
+              ),
+              children: e
+            }
+          ) : null,
+          !e && l ? /* @__PURE__ */ r(
+            "span",
+            {
+              className: a(
+                "text-xs text-slate-600 dark:text-slate-200",
+                n
+              ),
+              children: l
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
 );
 export {
   W as Select

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

@@ -33,6 +33,22 @@ export type Option = {
     /** Unique value for the option */
     value: string;
 };
+/**
+ * A group of options with a non-interactive header label.
+ */
+export type OptionGroup = {
+    groupLabel: string;
+    options: Option[];
+};
+/**
+ * A group of additional options with a non-interactive header label.
+ */
+export type AdditionalOptionGroup = {
+    groupLabel: string;
+    options: ReactNode[];
+};
+export declare const isOptionGroup: (item: Option | OptionGroup) => item is OptionGroup;
+export declare const isAdditionalOptionGroup: (item: unknown) => item is AdditionalOptionGroup;
 type OnChangeFn = (params: {
     target: {
         value: string;
@@ -74,7 +90,7 @@ type OnChangeFn = (params: {
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
  */
 export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
-    additionalOptions?: ReactNode[] | string[];
+    additionalOptions?: ReactNode[] | string[] | AdditionalOptionGroup[];
     className?: string;
     disabled?: boolean;
     error?: string;
@@ -95,7 +111,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     listItemSecondRowClassName?: string;
     mainWrapperClassName?: string;
     noOptionsText?: string;
-    options: Option[];
+    options: Option[] | OptionGroup[];
     searchable?: boolean;
     showSearchIcon?: boolean;
     theme?: Theme;

package/dist/components/Select/Select.variants.js

@@ -11,7 +11,7 @@ const a = e(
     "px-3",
     "py-1",
     "relative",
-    "rounded-md",
+    "rounded",
     "transition-all",
     "w-full",
     "outline-none",

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './AdditionalOptions.types';
+export declare const AdditionalOptions: FC<Props>;

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import "../../../../index-BvoZGpli.js";
+import "react";
+import "../../../../utils/index.js";
+import { A as s } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import "../List/List.variants.js";
+import "./AdditionalOptions.variants.js";
+import "../../contexts/select.hook.js";
+export {
+  s as AdditionalOptions
+};

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

@@ -0,0 +1,4 @@
+import { SelectProps } from '../../Select.types';
+export type Props = {
+    additionalOptions?: SelectProps['additionalOptions'];
+};

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

@@ -0,0 +1 @@
+export declare const additionalOptionSlotClassName: string;

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.variants.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../../../utils/index.js";
+const o = e(
+  "flex",
+  "min-h-10",
+  "py-2",
+  "px-6",
+  "w-full",
+  "h-full",
+  "gap-1",
+  "items-center",
+  "text-sm",
+  "[&>svg]:-ml-1",
+  "[&>svg]:w-3.5",
+  "[&>svg]:h-3.5",
+  "[&>svg]:shrink-0",
+  "cursor-pointer",
+  "select-none",
+  "hover:bg-gray-50",
+  "hover:dark:bg-metal-700",
+  "focus:outline-0",
+  "text-blue-600",
+  "dark:text-aurora-500"
+);
+export {
+  o as additionalOptionSlotClassName
+};