@pk-design/react-tailwind 1.5.4 → 1.6.0

package/dist/react-tailwind.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useCallback, useRef, useEffect, Fragment as Fragment$1, useImperativeHandle, createContext, useContext } from 'react';
+import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useEffect, useCallback, Fragment as Fragment$1, useLayoutEffect, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
@@ -194,15 +194,46 @@ const loaderSizeMap = {
     lg: 'size-10',
 };
 const Loader = ({ className = '', size = 'md', ...props }) => {
-    return (jsx("svg", { className: buildClassName('text-blue-600 dark:text-white', loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
+    const hasColorClass = /\btext-/.test(className);
+    return (jsx("svg", { className: buildClassName(!hasColorClass && 'text-blue-600 dark:text-white', loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
 };
 
+const sizeClassMap$2 = {
+    xs: 'text-xs/5',
+    sm: 'text-sm/6',
+    md: 'text-base/7',
+    lg: 'text-lg/8',
+    xl: 'text-xl/9',
+};
+const weightClassMap$2 = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
 const TextContent = forwardRef((props, ref) => {
-    const { xsmall = false, small = false, strong = false, muted = false, error = false, className, ...rest } = props;
-    return React__default.createElement('span', {
-        ...rest,
+    const { as = 'span', size, weight, xsmall = false, small = false, strong = false, muted = false, error = false, success = false, warning = false, info = false, invert = false, monospace = false, truncate = false, className, children, ...rest } = props;
+    const textColorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : success
+            ? 'text-[var(--ui-success)]'
+            : warning
+                ? 'text-[var(--ui-warning)]'
+                : info
+                    ? 'text-[var(--ui-info)]'
+                    : muted
+                        ? invert
+                            ? 'text-gray-300 dark:text-gray-600'
+                            : 'text-[var(--ui-text-muted)]'
+                        : invert
+                            ? 'text-white dark:text-black'
+                            : 'text-[var(--ui-text)]';
+    return React__default.createElement(as, {
         ref,
-        className: buildClassName('text-[var(--ui-text)]', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-[var(--ui-text-muted)]', error && 'text-[var(--ui-text-danger)]', className),
+        className: buildClassName(textColorClass, size ? sizeClassMap$2[size] : xsmall ? 'text-xs/5' : small ? 'text-sm/6' : undefined, weight ? weightClassMap$2[weight] : strong ? 'font-semibold' : undefined, monospace && 'font-mono', truncate && 'truncate inline-block max-w-full', className),
+        ...rest,
+        children,
     });
 });
 TextContent.displayName = 'TextContent';
@@ -212,19 +243,29 @@ TextContent.displayName = 'TextContent';
  */
 const THEMED_BTN_CLASS = {
     primary: {
-        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus:outline-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
-        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
-        plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
+        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
+        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
+        plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
     },
     danger: {
-        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus:outline-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
-        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
-        plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
+        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
+        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
+        plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
     },
     secondary: {
-        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
-        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-gray-400',
-        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400',
+        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
+        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-gray-400',
+        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
+    },
+    success: {
+        default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',
+        outlined: 'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
+        plain: 'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
+    },
+    warning: {
+        default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',
+        outlined: 'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
+        plain: 'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
     },
 };
 const LOADER_TEXT_CLASS = {
@@ -243,6 +284,16 @@ const LOADER_TEXT_CLASS = {
         outlined: 'text-gray-700 dark:text-gray-200',
         plain: 'text-gray-700 dark:text-gray-200',
     },
+    success: {
+        default: 'text-white',
+        outlined: 'text-emerald-600 dark:text-emerald-400',
+        plain: 'text-emerald-600 dark:text-emerald-400',
+    },
+    warning: {
+        default: 'text-white',
+        outlined: 'text-amber-600 dark:text-amber-400',
+        plain: 'text-amber-600 dark:text-amber-400',
+    },
 };
 /**
  * Generate size classes.
@@ -250,13 +301,15 @@ const LOADER_TEXT_CLASS = {
 const getBtnSizeClasses = (size, iconOnly = false) => {
     switch (size) {
         case 'xs':
-            return iconOnly ? 'p-1 rounded-sm text-xs' : 'px-2 py-1 rounded-sm gap-1 text-xs';
+            return iconOnly ? 'h-7 w-7 p-1 rounded-sm text-xs' : 'h-7 px-2.5 rounded-sm gap-1 text-xs';
         case 'sm':
-            return iconOnly ? 'p-1.5 rounded text-sm' : 'px-3 py-1.5 rounded gap-1.5 text-sm';
+            return iconOnly ? 'h-8 w-8 p-1.5 rounded text-sm' : 'h-8 px-3 rounded gap-1.5 text-sm';
         case 'md':
-            return iconOnly ? 'p-2 rounded-md text-sm' : 'px-4 py-2 rounded-md gap-2 text-sm';
+            return iconOnly ? 'h-9 w-9 p-2 rounded-md text-sm' : 'h-9 px-4 rounded-md gap-2 text-sm';
         case 'lg':
-            return iconOnly ? 'p-2.5 rounded-lg text-base' : 'px-5 py-2.5 rounded-lg gap-2 text-base';
+            return iconOnly
+                ? 'h-10 w-10 p-2.5 rounded-lg text-base'
+                : 'h-10 px-5 rounded-lg gap-2 text-base';
     }
 };
 /**
@@ -264,15 +317,14 @@ const getBtnSizeClasses = (size, iconOnly = false) => {
  */
 const BASE_BTN_CLASS = 'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +
     'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +
-    'transition duration-200 ease-in-out';
+    'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none';
 const Button = forwardRef(({ as, type, ...props }, ref) => {
-    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, ...restProps } = props;
+    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, ...restProps } = props;
     const Component = as || 'button';
     // Accessibility guard for icon-only buttons
     if (iconOnly && !restProps['aria-label']) {
         console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.');
     }
-    // Disable interaction when loading
     const resolvedDisabled = disabled || loading;
     // Clean invalid props when not rendering a real button
     const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
@@ -282,18 +334,15 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
             disabled: resolvedDisabled,
         }
         : {};
+    const classes = useMemo(() => buildClassName(BASE_BTN_CLASS, THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), [theme, variant, size, iconOnly, rounded, fullWidth, noOutlineOnFocus, className]);
     /**
-     * Memoized className for perf & stability.
-     */
-    const classes = useMemo(() => buildClassName(BASE_BTN_CLASS, THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2', rounded && 'rounded-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), [theme, variant, size, iconOnly, rounded, noOutlineOnFocus, className]);
-    /**
-     * SPECIAL CASE:
-     * iconOnly + loading → show spinner only
+     * SPECIAL CASE: iconOnly + loading → show spinner only
      */
     if (loading && iconOnly) {
-        return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs" }) }));
+        return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }) }));
     }
-    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }), loadingText && (jsx(TextContent, { className: buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText }))] })) : (children) }));
+    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }));
+    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading && !loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, children] })) : loading && loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, jsx(TextContent, { className: buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText })] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 flex items-center", children: rightIcon })] })) }));
 });
 Button.displayName = 'Button';
 
@@ -324,13 +373,13 @@ const ThemeClassMap = {
     info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
     secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
 };
-const SIZE_CLASS = {
+const SIZE_CLASS$1 = {
     sm: 'text-xs py-0.5 px-2',
     md: 'text-xs py-1 px-3',
 };
 const Badge = forwardRef((props, ref) => {
     const { theme = 'info', className, children, removable = false, rounded = false, onRemove, size = 'md', icon, ...restProps } = props;
-    return (jsxs(TextContent, { ref: ref, className: buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS[size], ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsx(SvgX, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
+    return (jsxs(TextContent, { ref: ref, className: buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS$1[size], ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsx(SvgX, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         onRemove === null || onRemove === void 0 ? void 0 : onRemove();
@@ -408,21 +457,54 @@ const Banner = forwardRef((props, ref) => {
 });
 Banner.displayName = 'Banner';
 
+const sizeClassMap$1 = {
+    xs: 'text-xs/5',
+    sm: 'text-sm/6',
+    md: 'text-base/7',
+    lg: 'text-lg/8',
+    xl: 'text-xl/9',
+};
+const weightClassMap$1 = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+const alignClassMap$1 = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+};
+const clampClassMap = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+};
 const BodyText = forwardRef((props, ref) => {
-    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, invert, ...rest } = props;
+    const { as = 'p', size, weight, small = false, strong = false, muted = false, error = false, success = false, warning = false, info = false, inline = false, invert = false, align, truncate = false, clamp, className, children, ...rest } = props;
     const textColorClass = error
         ? 'text-[var(--ui-text-danger)]'
-        : muted
-            ? invert
-                ? 'text-gray-300 dark:text-gray-600'
-                : 'text-[var(--ui-text-muted)]'
-            : invert
-                ? 'text-white dark:text-black'
-                : 'text-[var(--ui-text)]';
+        : success
+            ? 'text-[var(--ui-success)]'
+            : warning
+                ? 'text-[var(--ui-warning)]'
+                : info
+                    ? 'text-[var(--ui-info)]'
+                    : muted
+                        ? invert
+                            ? 'text-gray-300 dark:text-gray-600'
+                            : 'text-[var(--ui-text-muted)]'
+                        : invert
+                            ? 'text-white dark:text-black'
+                            : 'text-[var(--ui-text)]';
     return React__default.createElement(as, {
-        ref: ref,
-        className: buildClassName(textColorClass, small && 'text-sm/6', strong && 'font-semibold', inline && 'inline-flex items-center gap-2', className),
+        ref,
+        className: buildClassName(textColorClass, size ? sizeClassMap$1[size] : small && 'text-sm/6', weight ? weightClassMap$1[weight] : strong && 'font-semibold', align && alignClassMap$1[align], inline && 'inline-flex items-center gap-2', truncate && 'truncate', clamp && clampClassMap[clamp], className),
         ...rest,
+        children,
     });
 });
 BodyText.displayName = 'BodyText';
@@ -446,24 +528,60 @@ var SvgSlash = function SvgSlash(props) {
   })));
 };
 
-const Breadcrumb = ({ items, render }) => {
-    const count = items.length;
-    const isLast = (index) => index === count - 1;
-    return (jsx("nav", { "aria-label": "Breadcrumb", className: "flex flex-wrap items-center gap-2", "data-testid": "breadcrumb-container", children: items.map((item, index) => (jsxs("span", { className: "inline-flex gap-2 items-center dark:text-white", "data-testid": `breadcrumb-item-${item.key}`, children: [jsx("span", { className: "font-medium", ...(isLast(index) ? { 'aria-current': 'page' } : {}), children: isLast(index) ? item.text : render(item) }), !isLast(index) && (jsx(SvgSlash, { "data-testid": `breadcrumb-divider-${index}`, className: "size-4" }))] }, item.key))) }));
+const SIZE_CONTAINER_CLASS$2 = {
+    sm: 'text-xs gap-1.5',
+    md: 'text-sm gap-2',
+    lg: 'text-base gap-2.5',
+};
+const SIZE_ICON_CLASS$1 = {
+    sm: 'size-3',
+    md: 'size-3.5',
+    lg: 'size-4',
 };
+function RenderSeparator({ separator, size, index, className, }) {
+    const testId = `breadcrumb-divider-${index}`;
+    if (separator === 'slash' || !separator) {
+        return (jsx(SvgSlash, { "data-testid": testId, className: buildClassName(SIZE_ICON_CLASS$1[size] || 'size-3.5', 'text-gray-400 dark:text-gray-500 shrink-0 select-none', className) }));
+    }
+    if (separator === 'chevron') {
+        return (jsx("svg", { "data-testid": testId, className: buildClassName(SIZE_ICON_CLASS$1[size] || 'size-3.5', 'text-gray-400 dark:text-gray-500 shrink-0 select-none', className), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }));
+    }
+    if (separator === 'dot') {
+        return (jsx("span", { "data-testid": testId, className: buildClassName('size-1 rounded-full bg-gray-400 dark:bg-gray-500 shrink-0 select-none mx-0.5', className) }));
+    }
+    return (jsx("span", { "data-testid": testId, className: buildClassName('shrink-0 select-none', className), children: separator }));
+}
+const Breadcrumb = forwardRef((props, ref) => {
+    const { items = [], render, separator = 'slash', size = 'md', maxItems, className, itemClass, activeItemClass, separatorClass, ...navProps } = props;
+    const [expanded, setExpanded] = useState(false);
+    const count = items.length;
+    const shouldTruncate = maxItems !== undefined && maxItems > 1 && count > maxItems && !expanded;
+    const getVisibleItems = () => {
+        if (!shouldTruncate)
+            return items;
+        // Always keep 1st item and last 1-2 items
+        const firstItem = items[0];
+        const lastItems = items.slice(count - (maxItems - 1));
+        return [firstItem, ...lastItems];
+    };
+    const hiddenItems = shouldTruncate ? items.slice(1, count - (maxItems - 1)) : [];
+    getVisibleItems();
+    return (jsx("nav", { ref: ref, "aria-label": "Breadcrumb", "data-testid": "breadcrumb-container", className: buildClassName('flex flex-wrap items-center text-gray-600 dark:text-gray-300 font-medium', SIZE_CONTAINER_CLASS$2[size] || SIZE_CONTAINER_CLASS$2.md, className), ...navProps, children: items.map((item, index) => {
+            const isLast = index === count - 1;
+            const isCollapsedMiddle = shouldTruncate && index > 0 && index < count - (maxItems - 1);
+            if (isCollapsedMiddle) {
+                if (index === 1) {
+                    // Render the single '...' collapse pill
+                    return (jsxs("span", { className: "inline-flex items-center gap-2 relative group/ellipsis", children: [jsx("button", { type: "button", onClick: () => setExpanded(true), className: "px-1.5 py-0.5 rounded-md text-xs font-semibold bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors cursor-pointer", "aria-label": `Expand ${hiddenItems.length} hidden breadcrumbs`, title: `Show ${hiddenItems.length} hidden levels`, children: "\u2022\u2022\u2022" }), jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass })] }, "breadcrumb-collapsed"));
+                }
+                return null;
+            }
+            const defaultContent = isLast ? (jsx("span", { className: buildClassName('text-gray-900 dark:text-white font-semibold', activeItemClass, item.className), children: item.text })) : item.to ? (jsx("a", { href: item.to, className: buildClassName('hover:text-blue-600 dark:hover:text-blue-400 transition-colors', itemClass, item.className), children: item.text })) : (jsx("span", { className: buildClassName(itemClass, item.className), children: item.text }));
+            return (jsxs("span", { className: "inline-flex items-center gap-2", "data-testid": `breadcrumb-item-${item.key}`, children: [jsxs("span", { className: "inline-flex items-center gap-1.5", ...(isLast ? { 'aria-current': 'page' } : {}), children: [item.icon && jsx("span", { className: "shrink-0 text-gray-400", children: item.icon }), isLast ? (defaultContent) : render ? (jsx("span", { className: buildClassName(itemClass, item.className), children: render(item) })) : (defaultContent)] }), !isLast && (jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass }))] }, item.key));
+        }) }));
+});
 Breadcrumb.displayName = 'Breadcrumb';
 
-/**
- * Corner-rounding classes for the group's first/last button, keyed by
- * orientation + size, matching Button's own size -> radius mapping
- * (xs: rounded-sm, sm: rounded, md: rounded-md, lg: rounded-lg).
- *
- * These must stay fully static string literals (no template-literal
- * interpolation) — Tailwind's JIT scanner only picks up class names that
- * appear verbatim in source, and the docs site scans the library's
- * *compiled* output, where interpolated fragments never appear as a
- * complete class name.
- */
 const EDGE_ROUNDING = {
     horizontal: {
         xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
@@ -482,11 +600,6 @@ const PILL_EDGE_ROUNDING = {
     horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
     vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
 };
-/**
- * Resolves the corner-rounding classes for a single button at `index`
- * out of `count` inside the group, so only the group's outer edges stay
- * rounded and interior seams go square.
- */
 const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
     if (count <= 1)
         return '';
@@ -497,18 +610,46 @@ const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
         ? PILL_EDGE_ROUNDING[orientation][position]
         : EDGE_ROUNDING[orientation][size][position];
 };
-const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', rounded = false, fullWidth = false, label, className = '', }) => {
+const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', value, onChange, disabled: groupDisabled = false, rounded = false, fullWidth = false, label, className = '', }) => {
     const isVertical = orientation === 'vertical';
     const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
     const count = items.length;
-    return (jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
-            var _a, _b, _c;
-            const childSize = (_a = child.props.size) !== null && _a !== void 0 ? _a : size;
+    const isToggleMode = value !== undefined;
+    return (jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex items-stretch', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const childProps = child.props;
+            const childSize = (_a = childProps.size) !== null && _a !== void 0 ? _a : size;
+            const childDisabled = (_b = childProps.disabled) !== null && _b !== void 0 ? _b : groupDisabled;
+            // Resolve item value for toggle mode
+            const itemVal = (_d = (_c = childProps.value) !== null && _c !== void 0 ? _c : childProps.id) !== null && _d !== void 0 ? _d : (typeof childProps.children === 'string' || typeof childProps.children === 'number'
+                ? childProps.children
+                : index);
+            const isSelected = isToggleMode
+                ? Array.isArray(value)
+                    ? value.includes(itemVal)
+                    : value === itemVal
+                : false;
+            const resolvedTheme = isToggleMode
+                ? isSelected
+                    ? ((_e = childProps.theme) !== null && _e !== void 0 ? _e : 'primary')
+                    : ((_f = childProps.theme) !== null && _f !== void 0 ? _f : 'secondary')
+                : ((_g = childProps.theme) !== null && _g !== void 0 ? _g : theme);
+            const resolvedVariant = (_h = childProps.variant) !== null && _h !== void 0 ? _h : variant;
+            const handleClick = (e) => {
+                var _a;
+                (_a = childProps.onClick) === null || _a === void 0 ? void 0 : _a.call(childProps, e);
+                if (isToggleMode && !childDisabled) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(itemVal);
+                }
+            };
             return cloneElement(child, {
-                theme: (_b = child.props.theme) !== null && _b !== void 0 ? _b : theme,
-                variant: (_c = child.props.variant) !== null && _c !== void 0 ? _c : variant,
+                theme: resolvedTheme,
+                variant: resolvedVariant,
                 size: childSize,
-                className: buildClassName(child.props.className, getEdgeRoundingClass({
+                disabled: childDisabled,
+                ...(isToggleMode ? { 'aria-pressed': isSelected } : {}),
+                onClick: handleClick,
+                className: buildClassName(childProps.className, getEdgeRoundingClass({
                     index,
                     count,
                     size: childSize,
@@ -516,23 +657,66 @@ const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary'
                     pill: rounded,
                 }), count > 1 && [
                     'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
+                    isSelected && 'z-10',
                     index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
+                    index > 0 &&
+                        resolvedVariant === 'default' &&
+                        (isVertical
+                            ? resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-t border-white/25 dark:border-white/20'
+                                : 'border-t border-gray-300/70 dark:border-gray-700/70'
+                            : resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-l border-white/25 dark:border-white/20'
+                                : 'border-l border-gray-300/70 dark:border-gray-700/70'),
                 ], fullWidth && 'flex-1'),
             });
         }) }));
 };
 ButtonGroup.displayName = 'ButtonGroup';
 
-const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-900 block';
+const RADIUS_CLASS = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+};
+const ASPECT_RATIO_CLASS = {
+    auto: 'aspect-auto',
+    square: 'aspect-square',
+    video: 'aspect-video',
+    wide: 'aspect-[21/9]',
+};
 const Card = forwardRef(({ as, ...props }, ref) => {
-    // Remove Card-only props from rest (avoid leaking to DOM)
-    const { hoverable = false, bordered = true, compact = false, zeroPadding = false, ...rest } = props;
+    const { variant = 'outlined', radius = 'xl', hoverable = false, clickable = false, selected = false, bordered = true, compact = false, zeroPadding = false, ...rest } = props;
     const Component = as || 'div';
-    // Extract className safely from rest
     const { className, ...cleanRest } = rest;
-    const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-[var(--ui-border)]', className);
+    const isOutlined = variant === 'outlined' && bordered;
+    const isElevated = variant === 'elevated';
+    const isFilled = variant === 'filled';
+    const isGhost = variant === 'ghost';
+    const classes = buildClassName('block transition-all duration-200', RADIUS_CLASS[radius] || RADIUS_CLASS.xl, zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6', 
+    // Surface variants
+    isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]', isElevated &&
+        'bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-md shadow-gray-200/50 dark:shadow-none', isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent', isGhost && 'bg-transparent border border-transparent', 
+    // Hoverable & Clickable states
+    hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80', clickable && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg', selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]', className);
     return jsx(Component, { ref: ref, className: classes, ...cleanRest });
 });
+const CardHeader = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-between gap-4 mb-4', bordered && 'pb-4 border-b border-gray-200 dark:border-gray-800', className), ...props, children: children }));
+const CardTitle = ({ className, as: Component = 'h3', children, ...props }) => (jsx(Component, { className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white tracking-tight', className), ...props, children: children }));
+const CardDescription = ({ className, children, ...props }) => (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal mt-1', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsx("div", { className: buildClassName('space-y-3', className), ...props, children: children }));
+const CardFooter = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-end gap-3 mt-4', bordered && 'pt-4 border-t border-gray-200 dark:border-gray-800', className), ...props, children: children }));
+const CardMedia = ({ className, aspectRatio = 'video', alt = '', ...props }) => (jsx("div", { className: buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className), children: jsx("img", { alt: alt, className: buildClassName('w-full object-cover', ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video), ...props }) }));
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Body = CardContent;
+Card.Footer = CardFooter;
+Card.Media = CardMedia;
 Card.displayName = 'Card';
 
 const Label = forwardRef((props, ref) => {
@@ -541,49 +725,127 @@ const Label = forwardRef((props, ref) => {
 });
 Label.displayName = 'Label';
 
+const sizeStyles = {
+    sm: {
+        box: 'size-3.5',
+        svg: 'h-2.5 w-2.5',
+        text: 'text-xs',
+        subtext: 'text-[11px]',
+    },
+    md: {
+        box: 'size-4.5',
+        svg: 'h-3.25 w-3.25',
+        text: 'text-sm',
+        subtext: 'text-xs',
+    },
+    lg: {
+        box: 'size-5.5',
+        svg: 'h-4 w-4',
+        text: 'text-base',
+        subtext: 'text-sm',
+    },
+};
 const Checkbox = forwardRef((props, ref) => {
     var _a;
-    const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', 
-    // Checkbox-only props removed from rest
-    ...rest } = props;
+    const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, helperText, disabled = false, indeterminate = false, size = 'md', variant = 'default', description, className = '', checked, onChange, ...rest } = props;
     const generatedId = useId();
     const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
-    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center', containerClass), children: [jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-center relative select-none', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsx("input", { ref: ref, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer size-4.5 cursor-pointer transition-all appearance-none rounded', 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-[var(--ui-primary)] checked:border-[var(--ui-primary)]', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
-                                    ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
-                                    : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md', className) }), jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 \n              top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.25 w-3.25", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }), label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
-                            ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
-                            : 'cursor-pointer text-gray-600 dark:text-gray-300', 'ml-2 font-normal', labelClass), children: label }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [indeterminate]);
+    const currentSize = sizeStyles[size] || sizeStyles.md;
+    const isCard = variant === 'card';
+    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsx("div", { className: buildClassName(isCard
+                    ? 'rounded-xl border p-3.5 transition-all duration-150 relative'
+                    : 'flex items-start', isCard &&
+                    (disabled
+                        ? 'border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/40 opacity-70'
+                        : checked || indeterminate
+                            ? 'border-blue-500/80 bg-blue-50/30 dark:bg-blue-950/20 dark:border-blue-500/60 shadow-xs'
+                            : 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'), containerClass), children: jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-start relative select-none w-full', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxs("div", { className: "relative inline-flex items-center shrink-0 pt-0.5", children: [jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassName('peer cursor-pointer transition-all appearance-none rounded', currentSize.box, 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
+                                        ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
+                                        : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-xs', indeterminate &&
+                                        '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600', className) }), !indeterminate && (jsx("span", { className: buildClassName('absolute text-white pointer-events-none transition-opacity top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', checked !== undefined
+                                        ? checked
+                                            ? 'opacity-100'
+                                            : 'opacity-0'
+                                        : 'opacity-0 peer-checked:opacity-100'), children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })), indeterminate && (jsx("span", { className: "absolute text-white pointer-events-none top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-100 z-10", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
+                                        ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
+                                        : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium', currentSize.text, labelClass), children: label })), description && (jsx("span", { className: buildClassName('mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal', currentSize.subtext), children: description }))] }))] }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 
+const columnClasses = {
+    1: 'grid grid-cols-1 gap-3',
+    2: 'grid grid-cols-1 sm:grid-cols-2 gap-3',
+    3: 'grid grid-cols-1 sm:grid-cols-3 gap-3',
+    4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3',
+};
 const CheckboxGroup = (props) => {
-    const { name, options, label, labelClass = '', labelWrapperClass = '', labelHint, containerClass = '', value = [], onChange, inline = false, } = props;
+    const { name, options, label, labelClass = '', labelWrapperClass = '', labelHint, containerClass = '', value: controlledValue, defaultValue, onChange, inline = false, columns, size = 'md', variant = 'default', showSelectAll = false, selectAllLabel = 'Select All', error, helperText, disabled = false, } = props;
     const groupId = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue || []);
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
     const items = useMemo(() => options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt), [options]);
-    /**
-     * Group-level change handler. Converts raw checkbox change events
-     * into a typed updated values array.
-     */
+    const enabledItems = useMemo(() => items.filter((i) => !i.disabled && !disabled), [items, disabled]);
+    // Select All State calculation
+    const allSelected = useMemo(() => {
+        if (!enabledItems.length)
+            return false;
+        return enabledItems.every((item) => currentValue.includes(item.value));
+    }, [enabledItems, currentValue]);
+    const isIndeterminate = useMemo(() => {
+        if (allSelected)
+            return false;
+        return enabledItems.some((item) => currentValue.includes(item.value));
+    }, [allSelected, enabledItems, currentValue]);
+    const handleSelectAllChange = (e) => {
+        let updated;
+        if (allSelected || isIndeterminate) {
+            const enabledValues = new Set(enabledItems.map((i) => i.value));
+            updated = currentValue.filter((v) => !enabledValues.has(v));
+        }
+        else {
+            const enabledValues = enabledItems.map((i) => i.value);
+            const uniqueSet = new Set([...currentValue, ...enabledValues]);
+            updated = Array.from(uniqueSet);
+        }
+        if (!isControlled) {
+            setInternalValue(updated);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
+    };
     const handleGroupChange = (e) => {
         const raw = e.target.value;
         const checked = e.target.checked;
-        // Convert HTML string value → typed T value
-        // Locate in normalized items
         const matched = items.find((i) => String(i.value) === raw);
-        const itemValue = matched === null || matched === void 0 ? void 0 : matched.value;
+        const itemValue = matched ? matched.value : raw;
         let updated;
         if (checked) {
-            updated = [...value, itemValue];
+            updated = [...currentValue, itemValue];
         }
         else {
-            updated = value.filter((v) => v !== itemValue);
+            updated = currentValue.filter((v) => v !== itemValue);
+        }
+        if (!isControlled) {
+            setInternalValue(updated);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
     };
-    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), jsx(BodyText, { muted: true, small: true, children: labelHint })] })), jsx("div", { className: buildClassName('flex gap-3', inline ? 'flex-wrap' : 'flex-col'), children: items.map((item, index) => {
+    const layoutClass = columns
+        ? columnClasses[columns]
+        : inline
+            ? 'flex flex-wrap gap-3'
+            : 'flex flex-col gap-3';
+    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint && (jsx(BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsx("div", { className: "pb-1 border-b border-gray-200 dark:border-gray-800", children: jsx(Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsx("div", { className: layoutClass, children: items.map((item, index) => {
                     const key = typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index;
-                    return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, value: String(item.value), checked: value.includes(item.value), onChange: handleGroupChange }, key));
-                }) })] }));
+                    return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, description: item.description, value: String(item.value), size: size, variant: variant, disabled: disabled || item.disabled, checked: currentValue.includes(item.value), onChange: handleGroupChange }, key));
+                }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
@@ -1010,24 +1272,142 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
 }
 DataTable.displayName = 'DataTable';
 
-const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold text-[var(--ui-text)]', className), children: children }));
-const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold text-[var(--ui-text)]', className), children: children }));
-const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold text-[var(--ui-text)]', className), children: children }));
-const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium text-[var(--ui-text)]', className), children: children }));
-const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium text-[var(--ui-text)]', className), children: children }));
-const HeadingText = {
+const defaultLevelSizeMap = {
+    1: 'text-3xl font-bold',
+    2: 'text-2xl font-semibold',
+    3: 'text-xl font-semibold',
+    4: 'text-lg font-medium',
+    5: 'text-base font-medium',
+    6: 'text-sm font-medium',
+};
+const sizeClassMap = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+};
+const weightClassMap = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+};
+const alignClassMap = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+const trackingClassMap = {
+    tighter: 'tracking-tighter',
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+};
+const HeadingTextComponent = forwardRef((props, ref) => {
+    const { level = 1, size, weight, muted = false, error = false, success = false, warning = false, info = false, invert = false, align, tracking, truncate = false, className, children, ...rest } = props;
+    const tag = `h${Math.min(6, Math.max(1, level))}`;
+    const colorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : success
+            ? 'text-[var(--ui-success)]'
+            : warning
+                ? 'text-[var(--ui-warning)]'
+                : info
+                    ? 'text-[var(--ui-info)]'
+                    : muted
+                        ? invert
+                            ? 'text-gray-300 dark:text-gray-600'
+                            : 'text-[var(--ui-text-muted)]'
+                        : invert
+                            ? 'text-white dark:text-black'
+                            : 'text-[var(--ui-text)]';
+    return React__default.createElement(tag, {
+        ref,
+        className: buildClassName(colorClass, size ? sizeClassMap[size] : defaultLevelSizeMap[level], weight && weightClassMap[weight], align && alignClassMap[align], tracking && trackingClassMap[tracking], truncate && 'truncate', className),
+        ...rest,
+        children,
+    });
+});
+HeadingTextComponent.displayName = 'HeadingText';
+const Title = forwardRef((props, ref) => (jsx(HeadingTextComponent, { ref: ref, level: 1, ...props })));
+Title.displayName = 'HeadingText.Title';
+const SubTitle = forwardRef((props, ref) => (jsx(HeadingTextComponent, { ref: ref, level: 2, ...props })));
+SubTitle.displayName = 'HeadingText.SubTitle';
+const SubTitle2 = forwardRef((props, ref) => (jsx(HeadingTextComponent, { ref: ref, level: 3, ...props })));
+SubTitle2.displayName = 'HeadingText.SubTitle2';
+const SubTitle3 = forwardRef((props, ref) => (jsx(HeadingTextComponent, { ref: ref, level: 4, ...props })));
+SubTitle3.displayName = 'HeadingText.SubTitle3';
+const SubTitle4 = forwardRef((props, ref) => (jsx(HeadingTextComponent, { ref: ref, level: 5, ...props })));
+SubTitle4.displayName = 'HeadingText.SubTitle4';
+const HeadingText = Object.assign(HeadingTextComponent, {
     Title,
     SubTitle,
     SubTitle2,
     SubTitle3,
     SubTitle4,
-};
+});
 
+const COLUMN_GRID_CLASS = {
+    1: 'grid-cols-1',
+    2: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3',
+    3: 'grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-3',
+    4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3',
+};
+function CopyableValue({ text, children }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Ignore clipboard error
+        }
+    };
+    return (jsxs("span", { className: "inline-flex items-center gap-1.5 group/copy", children: [jsx("span", { children: children }), jsx("button", { type: "button", onClick: handleCopy, className: "opacity-0 group-hover/copy:opacity-100 focus:opacity-100 transition-opacity p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer", title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: copied ? (jsx("svg", { className: "size-3.5 text-emerald-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : (jsx("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })) })] }));
+}
 const DetailedInformation = forwardRef((props, ref) => {
-    const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, bordered = false, ...divProps } = props;
-    const hasTitles = title || subTitle;
+    const { className, title, subTitle, action, details = [], columns = 1, layout = 'horizontal', variant = 'flat', compact = false, bordered = false, divider = true, emptyValue = '- -', titleClass, detailsClass, labelClass, ...divProps } = props;
+    const isCard = variant === 'card';
+    const isBordered = bordered || variant === 'bordered' || isCard;
+    const hasTitles = title || subTitle || action;
     const filteredDetails = details.filter((detail) => !detail.hidden);
-    return (jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', bordered ? 'border border-[var(--ui-border)]' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-[var(--ui-border-muted)]', hasTitles && 'border-t', detailsClass), children: jsx("dl", { className: buildClassName(divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail) => (jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
+    const isMultiColumn = columns > 1;
+    return (jsxs("div", { ref: ref, className: buildClassName(isCard
+            ? compact
+                ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-gray-200 dark:border-gray-700'
+                : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-gray-200 dark:border-gray-700'
+            : isBordered
+                ? compact
+                    ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'
+                    : 'p-4 sm:p-6 border border-[var(--ui-border)] rounded-2xl'
+                : compact
+                    ? 'p-2 md:p-3'
+                    : 'p-3 md:p-4', className), ...divProps, children: [hasTitles && (jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [jsxs("div", { children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400 font-normal", children: subTitle }))] }), action && jsx("div", { className: "shrink-0 flex items-center", children: action })] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-[var(--ui-border-muted)]', hasTitles && !isMultiColumn && 'border-t pt-2', detailsClass), children: jsx("dl", { className: buildClassName(COLUMN_GRID_CLASS[columns] || COLUMN_GRID_CLASS[1], !isMultiColumn && divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail, index) => {
+                        var _a;
+                        const itemFallback = (_a = detail.emptyValue) !== null && _a !== void 0 ? _a : emptyValue;
+                        const hasValue = detail.value !== undefined && detail.value !== null && detail.value !== '';
+                        const displayValue = hasValue ? detail.value : itemFallback;
+                        const copyText = typeof detail.value === 'string' || typeof detail.value === 'number'
+                            ? String(detail.value)
+                            : '';
+                        const isVertical = layout === 'vertical' || isMultiColumn;
+                        return (jsxs("div", { className: buildClassName(isMultiColumn && isCard
+                                ? compact
+                                    ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-gray-200/80 dark:border-gray-700/80 shadow-2xs flex flex-col gap-1'
+                                    : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200/80 dark:border-gray-700/80 shadow-2xs flex flex-col gap-1'
+                                : isVertical
+                                    ? 'flex flex-col gap-1 py-2 px-1'
+                                    : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1', compact && !isMultiColumn ? 'py-1.5' : ''), children: [jsxs("dt", { className: buildClassName('text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5', labelClass, detail.labelClass), children: [detail.icon && jsx("span", { className: "shrink-0 text-gray-400", children: detail.icon }), jsx("span", { children: detail.label }), detail.helpText && (jsx("span", { className: "text-xs text-gray-400 font-normal cursor-help", title: detail.helpText, children: "(?)" }))] }), jsx("dd", { className: buildClassName('text-sm/6 text-gray-700 dark:text-gray-300', !isVertical && 'sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.copyable && copyText ? (jsx(CopyableValue, { text: copyText, children: displayValue })) : (displayValue) })] }, detail.label || index));
+                    }) }) })) : null] }));
 });
 DetailedInformation.displayName = 'DetailedInformation';
 
@@ -1040,15 +1420,15 @@ const alignmentMap = {
     center: 'items-center justify-center h-full',
     start: 'justify-start h-full',
     end: 'justify-end h-full',
-    top: 'items-center justify-center',
+    top: 'items-start justify-center w-full',
     bottom: 'items-end justify-center h-full',
 };
 const panelAlignmentMap = {
-    center: 'data-[closed]:scale-95 rounded-lg',
-    start: 'data-[closed]:-translate-x-1/2 rounded-r-lg',
-    end: 'data-[closed]:translate-x-1/2 rounded-l-lg',
-    top: 'data-[closed]:-translate-y-1/2 rounded-b-lg',
-    bottom: 'data-[closed]:translate-y-1/2 rounded-t-lg',
+    center: 'data-[closed]:scale-95 rounded-2xl',
+    start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
+    end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
+    top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
+    bottom: 'data-[closed]:translate-y-1/2 rounded-t-2xl md:rounded-t-3xl max-h-[92svh]',
 };
 const panelSizeMap = {
     xs: 'max-w-xs',
@@ -1059,15 +1439,56 @@ const panelSizeMap = {
     '2xl': 'max-w-2xl',
     full: 'w-full',
 };
-const Drawer = ({ isOpen, onClose = () => { }, align = 'end', size = 'md', backdrop = true, title, description, children, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, }) => {
-    const showTitleSection = Boolean(title || description);
-    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: onClose, transition: true, children: [backdrop && jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/20 transition-opacity" }), jsx("div", { className: "fixed inset-0 w-screen h-[100svh]", children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full bg-white dark:bg-gray-800 backdrop-blur-2xl shadow-sm', 'overflow-y-auto space-y-4 duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [showTitleSection && (jsxs("div", { className: buildClassName('space-y-2 pt-2 md:pt-4 px-4 md:px-6', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs(DialogTitle, { as: "h3", className: buildClassName('text-lg font-medium dark:text-white flex items-center gap-2', titleClass), children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "sm", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-5" }) })), title] }), description && (jsx("p", { className: buildClassName('text-sm dark:text-white/60', descriptionClass), children: description }))] })), jsx("div", { className: contentClass, children: children })] }) }) })] }));
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+    const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
+    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
+    const handleDialogClose = () => {
+        if (closeOnOutsideClick) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed inset-0 w-screen h-[100svh]", children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), showTitleSection && (jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-gray-100 dark:border-gray-700/60 shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsx("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (jsx("div", { className: buildClassName('p-4 border-t border-gray-100 dark:border-gray-700/60 bg-gray-50/50 dark:bg-gray-800/80 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
 };
 Drawer.displayName = 'Drawer';
 
-const BASE_ITEM_CLASS = 'flex w-full px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg';
-const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', menuItemClass, onMenuClick, }) => {
-    return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment$1, children: (state) => renderTriggerButton(state) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-[var(--ui-border-muted)] bg-white text-gray-800', 'dark:bg-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled }) => (jsx("div", { onClick: () => !disabled && (onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx)), className: buildClassName(BASE_ITEM_CLASS, menuItemClass, disabled && 'cursor-not-allowed opacity-70'), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? renderItem(item) : item.label })) }), item.divider && (jsx("li", { className: "my-1 h-px bg-gray-200 dark:bg-white/5", "data-testid": "dropdown-divider" }, item.id))] }, item.id))) })] }));
+const WIDTH_CLASS = {
+    auto: 'w-auto min-w-[120px]',
+    sm: 'w-44',
+    md: 'w-56',
+    lg: 'w-64',
+    xl: 'w-72',
+};
+const Dropdown = ({ triggerButton, renderTriggerButton, className, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', width = 'md', menuItemClass, onMenuClick, ...restProps }) => {
+    var _a, _b, _c, _d;
+    const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md;
+    const { theme, variant, size, disabled } = restProps;
+    return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment$1, children: (state) => {
+                    const rendered = renderTriggerButton(state);
+                    if (isValidElement(rendered) && className) {
+                        return cloneElement(rendered, {
+                            className: buildClassName(rendered.props.className, className),
+                        });
+                    }
+                    return rendered;
+                } })) : isValidElement(triggerButton) ? (jsx(MenuButton, { as: Fragment$1, children: cloneElement(triggerButton, {
+                    className: buildClassName(triggerButton.props.className, className),
+                    theme: (_a = triggerButton.props.theme) !== null && _a !== void 0 ? _a : theme,
+                    variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
+                    size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
+                    disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
+                }) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-gray-200/80 dark:border-gray-700/80 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
+                                    var _a;
+                                    if (!disabled) {
+                                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx);
+                                    }
+                                }, className: buildClassName('flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none', item.danger
+                                    ? buildClassName('text-rose-600 dark:text-rose-400', active
+                                        ? 'bg-rose-50 dark:bg-rose-950/40'
+                                        : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
+                                    : buildClassName('text-gray-700 dark:text-gray-200', active
+                                        ? 'bg-gray-100 dark:bg-gray-700/80'
+                                        : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-gray-200/60 dark:border-gray-600/60 text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
 };
 Dropdown.displayName = 'Dropdown';
 
@@ -1094,90 +1515,294 @@ const EmptyState = ({ title, description, className, action = null, }) => {
     return (jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsx(SvgFolderPlus, { className: "size-8 text-[var(--ui-text)]" }), jsx(HeadingText.SubTitle, { children: title }), description && (jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
 };
 
-function buildInputClass(className, { isFocusWithin = false, disabled = false } = {}) {
-    return buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'invalid:group-[.has-error]:outline-red-500', disabled
+const sizeClasses$4 = {
+    sm: {
+        input: 'px-2.5 py-1 text-xs leading-5',
+        group: 'w-8 text-xs',
+        icon: 'size-3.5',
+        text: 'text-xs',
+    },
+    md: {
+        input: 'px-3.5 py-2 text-sm leading-6',
+        group: 'w-10 text-sm',
+        icon: 'size-4',
+        text: 'text-sm',
+    },
+    lg: {
+        input: 'px-4 py-2.5 text-base leading-7',
+        group: 'w-12 text-base',
+        icon: 'size-5',
+        text: 'text-base',
+    },
+};
+function buildInputClass(className, { isFocusWithin = false, disabled = false, hasError = false, size = 'md', } = {}) {
+    const currentSize = sizeClasses$4[size] || sizeClasses$4.md;
+    return buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.input, 'text-gray-900 outline outline-1 -outline-offset-1', hasError
+        ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
+        : 'outline-gray-300 dark:outline-gray-600', disabled
         ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-gray-200 dark:outline-gray-700'
         : 'bg-white dark:bg-gray-700 dark:text-white outline-gray-300 dark:outline-gray-600 dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
         ? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'
         : 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', className);
 }
 const Input = forwardRef((props, ref) => {
-    const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, ...inputProps } = props;
+    const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, prefix, suffix, clearable = false, onClear, showCount = false, helperText, size = 'md', value, defaultValue, onChange, maxLength, ...inputProps } = props;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    const isControlled = value !== undefined;
+    const currentVal = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
+    const charLength = currentVal.length;
+    const handleInputChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const handleClear = () => {
+        if (innerRef.current) {
+            innerRef.current.value = '';
+            const event = new Event('input', {
+                bubbles: true,
+            });
+            Object.defineProperty(event, 'target', { writable: true, value: { value: '' } });
+            if (!isControlled) {
+                setUncontrolledValue('');
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
     const hasError = Boolean(error);
-    const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
+    const currentSize = sizeClasses$4[size] || sizeClasses$4.md;
+    const showClearButton = clearable && charLength > 0 && !inputProps.disabled;
+    const actualRightGroup = rightGroup !== null && rightGroup !== void 0 ? rightGroup : (showClearButton ? (jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer", title: "Clear text", tabIndex: -1, children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: currentSize.icon, children: jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) }) })) : null);
+    const hasRightGroup = actualRightGroup !== null && actualRightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "flex rounded-lg shadow-2xs", children: [prefix && (jsx("span", { className: "inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: prefix })), jsxs("div", { className: "relative flex-1 min-w-0", children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsx("input", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, maxLength: maxLength, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, {
+                                    disabled: inputProps.disabled,
+                                    hasError,
+                                    size,
+                                }), prefix ? '!rounded-l-none' : '', suffix ? '!rounded-r-none' : '', hasRightGroup ? (size === 'lg' ? 'pe-12' : size === 'sm' ? 'pe-8' : 'pe-10') : '', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '') }), hasRightGroup && (jsx("span", { className: buildClassName('absolute end-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: actualRightGroup }))] }), suffix && (jsx("span", { className: "inline-flex items-center px-3 rounded-r-lg border border-l-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: suffix }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                            ? 'text-red-500 font-semibold'
+                            : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
 });
 Input.displayName = 'Input';
 
 const PASSWORD_TYPE = 'password';
 const PASSWORD_PLACEHOLDER = '••••••••••';
-const PasswordInput = (props) => {
-    const { ...inputProps } = props;
+function evaluatePasswordStrength(val) {
+    if (!val)
+        return { score: 0, label: 'Weak', colorClass: 'bg-gray-200 dark:bg-gray-700', percent: 0 };
+    let score = 0;
+    if (val.length >= 8)
+        score += 1;
+    if (val.length >= 12)
+        score += 1;
+    if (/[0-9]/.test(val))
+        score += 1;
+    if (/[a-z]/.test(val) && /[A-Z]/.test(val))
+        score += 1;
+    if (/[^A-Za-z0-9]/.test(val))
+        score += 1;
+    if (score <= 1) {
+        return { score: 1, label: 'Weak', colorClass: 'bg-red-500', percent: 25 };
+    }
+    if (score === 2) {
+        return { score: 2, label: 'Fair', colorClass: 'bg-amber-500', percent: 50 };
+    }
+    if (score === 3) {
+        return { score: 3, label: 'Good', colorClass: 'bg-blue-500', percent: 75 };
+    }
+    return { score: 4, label: 'Strong', colorClass: 'bg-emerald-500', percent: 100 };
+}
+const PasswordInput = forwardRef((props, ref) => {
+    const { showStrength = false, placeholder = PASSWORD_PLACEHOLDER, onChange, value, defaultValue, ...inputProps } = props;
     const [showPassword, setShowPassword] = useState(false);
-    return (jsx(Input, { ...inputProps, type: showPassword ? 'text' : PASSWORD_TYPE, placeholder: PASSWORD_PLACEHOLDER, rightGroup: jsx(Button, { theme: "secondary", variant: "plain", size: "xs", className: "px-1 mr-1", type: "button", onClick: () => setShowPassword(() => !showPassword), tabIndex: -1, children: showPassword ? (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })] })) }) }));
-};
+    const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    const isControlled = value !== undefined;
+    const currentVal = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
+    const handleInputChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const strength = evaluatePasswordStrength(currentVal);
+    return (jsxs("div", { className: "space-y-1.5", children: [jsx(Input, { ref: ref, ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, type: showPassword ? 'text' : PASSWORD_TYPE, placeholder: placeholder, rightGroup: jsx(Button, { theme: "secondary", variant: "plain", size: "xs", className: "px-1.5 mr-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200", type: "button", onClick: () => setShowPassword((prev) => !prev), tabIndex: -1, "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })] })) }) }), showStrength && currentVal.length > 0 && (jsxs("div", { className: "pt-0.5 space-y-1", children: [jsxs("div", { className: "flex items-center justify-between text-[11px] font-medium text-gray-500 dark:text-gray-400", children: [jsx("span", { children: "Password Strength" }), jsx("span", { className: "font-semibold text-gray-700 dark:text-gray-200", children: strength.label })] }), jsx("div", { className: "h-1.5 w-full bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden flex gap-1 p-0.5", children: jsx("div", { className: `h-full transition-all duration-300 rounded-full ${strength.colorClass}`, style: { width: `${strength.percent}%` } }) })] }))] }));
+});
+PasswordInput.displayName = 'PasswordInput';
 
+const SIZE_MAP = {
+    sm: 'size-4',
+    md: 'size-4.5',
+    lg: 'size-5.5',
+};
+const THEME_MAP = {
+    primary: 'checked:border-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)] focus:ring-[var(--ui-primary-ring)]',
+    success: 'checked:border-emerald-600 checked:hover:border-emerald-600 focus:ring-emerald-500',
+    danger: 'checked:border-[var(--ui-danger)] checked:hover:border-[var(--ui-danger)] focus:ring-[var(--ui-danger-ring)]',
+};
 const Radio = forwardRef((props, ref) => {
-    var _a;
-    const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', 
-    // RadioButton-only props removed from rest
-    ...rest } = props;
+    const { id, name, label, description, size = 'md', theme = 'primary', labelClass = '', descriptionClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', ...rest } = props;
     const generatedId = useId();
-    const radioId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
-    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center gap-2', containerClass), children: [jsx("div", { className: "grid place-items-center", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-800', disabled
+    const radioId = id !== null && id !== void 0 ? id : (name && rest.value ? `${name}-${rest.value}` : generatedId);
+    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-start gap-2.5', containerClass), children: [jsx("div", { className: "grid place-items-center shrink-0 pt-0.5", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'dark:focus:ring-offset-gray-800', SIZE_MAP[size], THEME_MAP[theme], disabled
                                 ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
-                                : buildClassName('bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500', 'checked:border-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)]'), className) }) }), label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
-                            ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
-                            : 'cursor-pointer text-gray-600 dark:text-gray-300', labelClass), children: label }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+                                : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer', className) }) }), (label || description) && (jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
+                                    ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
+                                    : 'cursor-pointer text-gray-700 dark:text-gray-200 font-medium', labelClass), children: label })), description && (jsx("p", { className: buildClassName('text-xs leading-normal', disabled
+                                    ? 'text-gray-300 dark:text-gray-600'
+                                    : 'text-gray-500 dark:text-gray-400', descriptionClass), children: description }))] }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
+Radio.displayName = 'Radio';
 
+const COLUMN_GRID_MAP = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-4',
+};
 const RadioGroup = (props) => {
-    const { name, label, labelClass, labelWrapperClass, labelHint, containerClass, options, value, row, error, showErrorMessage, onChange, } = props;
+    const { name, variant = 'default', size = 'md', theme = 'primary', label, labelClass, labelWrapperClass, labelHint, containerClass, options, value, columns, disabled = false, row, error, showErrorMessage = true, onChange, } = props;
     const items = useMemo(() => {
         var _a;
-        return (_a = options === null || options === void 0 ? void 0 : options.map((option) => typeof option === 'string' ? { label: option, value: option } : option)) !== null && _a !== void 0 ? _a : [];
+        return (_a = options === null || options === void 0 ? void 0 : options.map((option) => typeof option === 'string'
+            ? {
+                label: option,
+                value: option,
+                description: undefined,
+                icon: undefined,
+                disabled: undefined,
+            }
+            : option)) !== null && _a !== void 0 ? _a : [];
     }, [options]);
-    return (jsxs("div", { className: buildClassName(containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-4', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsx("div", { className: buildClassName('flex gap-4', row ? 'flex-row items-center' : 'flex-col items-start'), children: items.map((item) => (jsx(Radio, { name: name, id: `${name}-${item.value}`, label: item.label, value: item.value, checked: value === item.value, onChange: onChange }, item.value))) }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    const isCards = variant === 'cards';
+    return (jsxs("div", { className: buildClassName(containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-3', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsx("div", { className: buildClassName(columns
+                    ? buildClassName('grid gap-3', COLUMN_GRID_MAP[columns])
+                    : row || isCards
+                        ? 'flex flex-wrap gap-3'
+                        : 'flex flex-col gap-3'), children: items.map((item) => {
+                    const isSelected = value === item.value;
+                    const isItemDisabled = disabled || Boolean(item.disabled);
+                    if (isCards) {
+                        return (jsxs("label", { htmlFor: `${name}-${item.value}`, className: buildClassName('relative flex items-start gap-3 p-4 rounded-xl border transition-all cursor-pointer select-none min-w-[200px] flex-1', isSelected
+                                ? 'border-[var(--ui-primary)] bg-blue-50/40 dark:bg-blue-950/30 ring-2 ring-[var(--ui-primary-ring)]/30'
+                                : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600', isItemDisabled &&
+                                'opacity-50 cursor-not-allowed pointer-events-none bg-gray-50 dark:bg-gray-800/50'), children: [jsx(Radio, { name: name, id: `${name}-${item.value}`, value: item.value, "aria-label": item.label, size: size, theme: theme, checked: isSelected, disabled: isItemDisabled, onChange: onChange, containerClass: "pt-0.5" }), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2", children: [item.icon && (jsx("span", { className: "shrink-0 text-gray-500 dark:text-gray-400", children: item.icon })), jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: item.label })] }), item.description && (jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400 font-normal leading-relaxed", children: item.description }))] })] }, item.value));
+                    }
+                    return (jsx(Radio, { name: name, id: `${name}-${item.value}`, label: item.label, description: item.description, value: item.value, size: size, theme: theme, checked: isSelected, disabled: isItemDisabled, onChange: onChange }, item.value));
+                }) }), showErrorMessage && error && (jsx("div", { className: "mt-1.5", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 };
+RadioGroup.displayName = 'RadioGroup';
 
-/**
- * GPU-accelerated Radio Switch with perfect highlight alignment.
- * Supports wrapping, icons, descriptions, and dark mode.
- */
-const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchClass, contentClass, descriptionClass, }) => {
+const SIZE_CONTAINER_CLASS$1 = {
+    sm: 'p-1.5 gap-1 rounded-lg text-xs',
+    md: 'p-2 gap-1.5 rounded-xl text-sm',
+    lg: 'p-2 gap-2 rounded-2xl text-base',
+};
+const SIZE_ITEM_CLASS = {
+    sm: 'px-4 py-2 text-xs rounded-md min-w-[64px]',
+    md: 'px-5 py-2.5 text-sm rounded-lg min-w-[76px]',
+    lg: 'px-7 py-3 text-base rounded-xl min-w-[92px]',
+};
+const SIZE_ITEM_DESC_CLASS = {
+    sm: 'px-4 py-2.5 text-xs rounded-md min-w-[80px]',
+    md: 'px-5 py-3 text-sm rounded-lg min-w-[96px]',
+    lg: 'px-7 py-3.5 text-base rounded-xl min-w-[112px]',
+};
+const THEME_SWITCH_CLASS = {
+    primary: 'bg-[var(--ui-primary)] text-white shadow-xs',
+    secondary: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-xs',
+    dark: 'bg-gray-900 dark:bg-black text-white shadow-xs',
+};
+const RadioSwitch = ({ label, items, selected, size = 'md', theme = 'primary', disabled = false, onChange, wrapperClass, switchClass, contentClass, descriptionClass, }) => {
     const containerRef = useRef(null);
-    const [style, setStyle] = useState({ left: 0, top: 0, width: 0, height: 0 });
+    const [style, setStyle] = useState({ left: 0, top: 0, width: 0, height: 0, ready: false });
     const getLabel = (i) => (typeof i === 'string' ? i : i.label);
     const getValue = (i) => (typeof i === 'string' ? i : i.value);
     const getDescription = (i) => { var _a; return typeof i === 'string' ? '' : ((_a = i.description) !== null && _a !== void 0 ? _a : ''); };
-    /** ---------------------------------------------
-     * Update highlight when selected changes
-     * ----------------------------------------------*/
-    useEffect(() => {
+    const isItemDisabled = (i) => disabled || (typeof i === 'string' ? false : Boolean(i.disabled));
+    const hasDescription = items.some((i) => typeof i !== 'string' && Boolean(i.description));
+    // Position calculation for GPU sliding highlight
+    useLayoutEffect(() => {
         if (!containerRef.current)
             return;
-        const buttons = Array.from(containerRef.current.querySelectorAll('[data-radio-item]'));
-        const el = buttons.find((b) => b.dataset.value === selected);
-        if (!el)
+        const updatePosition = () => {
+            if (!containerRef.current)
+                return;
+            const activeEl = containerRef.current.querySelector('[data-selected="true"]');
+            if (!activeEl)
+                return;
+            const parentRect = containerRef.current.getBoundingClientRect();
+            const rect = activeEl.getBoundingClientRect();
+            const left = activeEl.offsetLeft || rect.left - parentRect.left;
+            const top = activeEl.offsetTop || rect.top - parentRect.top;
+            const width = activeEl.offsetWidth || rect.width;
+            const height = activeEl.offsetHeight || rect.height;
+            setStyle({
+                left,
+                top,
+                width,
+                height,
+                ready: true,
+            });
+        };
+        updatePosition();
+        const resizeObserver = new ResizeObserver(updatePosition);
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, [selected, items, size]);
+    // ARIA Keyboard navigation handler
+    const handleGroupKeyDown = (e) => {
+        const enabledItems = items.filter((it) => !isItemDisabled(it));
+        if (enabledItems.length === 0)
             return;
-        const rect = el.getBoundingClientRect();
-        const parentRect = containerRef.current.getBoundingClientRect();
-        const left = rect.left - parentRect.left;
-        const top = rect.top - parentRect.top;
-        setStyle({
-            left,
-            top,
-            width: rect.width,
-            height: rect.height,
-        });
-    }, [selected, items]);
-    return (jsxs(RadioGroup$1, { value: selected, onChange: onChange, "aria-label": label, ref: containerRef, className: buildClassName('relative flex flex-wrap gap-1', 'transition-colors duration-200 overflow-hidden', wrapperClass), children: [jsx("div", { className: buildClassName('absolute rounded-md bg-blue-600 dark:bg-blue-500', 'transition-transform transition-size duration-300 ease-[cubic-bezier(.25,.8,.25,1)]', switchClass), style: {
+        const currentVal = selected;
+        const currentEnabledIndex = enabledItems.findIndex((it) => getValue(it) === currentVal);
+        let nextItem = null;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const nextIdx = (currentEnabledIndex + 1) % enabledItems.length;
+            nextItem = enabledItems[nextIdx];
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prevIdx = (currentEnabledIndex - 1 + enabledItems.length) % enabledItems.length;
+            nextItem = enabledItems[prevIdx];
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            nextItem = enabledItems[0];
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            nextItem = enabledItems[enabledItems.length - 1];
+        }
+        if (nextItem) {
+            onChange(getValue(nextItem));
+        }
+    };
+    return (jsxs("div", { ref: containerRef, role: "radiogroup", tabIndex: 0, "aria-label": label, onKeyDown: handleGroupKeyDown, className: buildClassName('relative inline-grid grid-flow-col auto-cols-fr items-stretch bg-gray-100 dark:bg-gray-800/80 border border-gray-200/80 dark:border-gray-700/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_CONTAINER_CLASS$1[size], disabled && 'opacity-60 pointer-events-none', wrapperClass), children: [jsx("div", { className: buildClassName('absolute transition-all duration-200 ease-[cubic-bezier(.25,.8,.25,1)] pointer-events-none', THEME_SWITCH_CLASS[theme], size === 'sm' ? 'rounded-md' : 'rounded-lg', style.ready ? 'opacity-100' : 'opacity-0', switchClass), style: {
                     transform: `translate(${style.left}px, ${style.top}px)`,
                     width: style.width,
                     height: style.height,
-                } }), items.map((item) => (jsx(Radio$1, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx(BodyText, { className: buildClassName('font-semibold', selected === getValue(item) && 'text-white'), children: getLabel(item) }), getDescription(item) && (jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass, selected === getValue(item) && 'text-white'), children: getDescription(item) }))] }) }, getValue(item))))] }));
+                } }), items.map((item) => {
+                const itemVal = getValue(item);
+                const isSelected = selected === itemVal;
+                const disabledState = isItemDisabled(item);
+                return (jsx("button", { type: "button", role: "radio", "aria-checked": isSelected, "aria-disabled": disabledState, tabIndex: isSelected && !disabledState ? 0 : -1, disabled: disabledState, "data-radio-item": true, "data-value": itemVal, "data-selected": isSelected ? 'true' : undefined, onClick: () => {
+                        if (!disabledState) {
+                            onChange(itemVal);
+                        }
+                    }, className: buildClassName('relative z-10 appearance-none m-0 select-none group transition-colors flex flex-col items-center justify-center w-full text-center font-semibold focus:outline-none', hasDescription ? SIZE_ITEM_DESC_CLASS[size] : SIZE_ITEM_CLASS[size], disabledState ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                        ? theme === 'secondary'
+                            ? 'text-gray-900 dark:text-white'
+                            : 'text-white'
+                        : buildClassName('text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white', !disabledState && 'hover:bg-black/[0.04] dark:hover:bg-white/[0.06]')), children: getDescription(item) ? (jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx("span", { className: "font-semibold leading-tight text-center truncate", children: getLabel(item) }), jsx("span", { className: buildClassName('text-[12px] leading-tight opacity-80 font-normal text-center truncate', descriptionClass), children: getDescription(item) })] })) : (jsx("span", { className: buildClassName('truncate leading-tight text-center', contentClass), children: getLabel(item) })) }, itemVal));
+            })] }));
 };
+RadioSwitch.displayName = 'RadioSwitch';
 
 /**
  * Checks if a value is an array.
@@ -1207,30 +1832,86 @@ function isEmpty(value) {
     return false; // for numbers, booleans, functions, etc.
 }
 
-// export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-//   label?: string
-//   labelClass?: string
-//   labelHint?: React.ReactNode
-//   containerClass?: string
-//   showValue?: boolean
-//   valueSuffix?: string
-//   error?: string | null
-//   showErrorMessage?: boolean
-// }
+const sizeClasses$3 = {
+    sm: {
+        track: 'h-1.5',
+        thumb: '[&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5',
+        text: 'text-xs',
+    },
+    md: {
+        track: 'h-2',
+        thumb: '[&::-webkit-slider-thumb]:h-4.5 [&::-webkit-slider-thumb]:w-4.5 [&::-moz-range-thumb]:h-4.5 [&::-moz-range-thumb]:w-4.5',
+        text: 'text-sm',
+    },
+    lg: {
+        track: 'h-3',
+        thumb: '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-6',
+        text: 'text-base',
+    },
+};
 const RangeInput = forwardRef((props, ref) => {
-    const { label, labelClass = '', labelHint = null, containerClass = '', className = '', showValue = true, valueSuffix = '', error = null, showErrorMessage = true, id, min = 0, max = 100, value, ...inputProps } = props;
+    const { label, labelClass = '', labelHint = null, containerClass = '', className = '', size = 'md', showValue = true, valueSuffix = '', showTooltip = false, marks, error = null, helperText, showErrorMessage = true, id, min = 0, max = 100, value, defaultValue, onChange, ...inputProps } = props;
+    const [hovering, setHovering] = useState(false);
+    const [internalValue, setInternalValue] = useState(Number(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min));
+    const isControlled = value !== undefined;
+    const currentVal = Number(isControlled ? value : internalValue);
+    const numMin = Number(min);
+    const numMax = Number(max);
+    const percent = numMax > numMin ? ((currentVal - numMin) / (numMax - numMin)) * 100 : 0;
+    const currentSize = sizeClasses$3[size] || sizeClasses$3.md;
     const hasError = !isEmpty(error);
-    return (jsxs("div", { className: buildClassName('group space-y-2', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { htmlFor: id, className: labelClass, children: label }), labelHint] })), jsxs("div", { className: "flex items-center gap-3", children: [jsx("input", { ref: ref, type: "range", id: id, min: min, max: max, value: value, ...inputProps, className: buildClassName('w-full h-2 rounded-lg appearance-none cursor-pointer', 'bg-gray-200 dark:bg-gray-700', 'accent-blue-600', // for WebKit
-                        '[&::-webkit-slider-thumb]:appearance-none', '[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4', '[&::-webkit-slider-thumb]:rounded-full', '[&::-webkit-slider-thumb]:bg-blue-600', '[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4', '[&::-moz-range-thumb]:rounded-full', '[&::-moz-range-thumb]:bg-blue-600', hasError && 'accent-red-600', className) }), showValue && (jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-300 min-w-[3rem] text-right", children: [value, valueSuffix] }))] }), showErrorMessage && hasError && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    const handleSliderChange = (e) => {
+        if (!isControlled) {
+            setInternalValue(Number(e.target.value));
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    // Parse custom marks if object provided
+    const markEntries = typeof marks === 'object' && marks !== null
+        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
+        : typeof marks === 'boolean' && marks
+            ? [
+                { value: numMin, label: String(numMin) },
+                { value: (numMin + numMax) / 2, label: String(Math.round((numMin + numMax) / 2)) },
+                { value: numMax, label: String(numMax) },
+            ]
+            : null;
+    return (jsxs("div", { className: buildClassName('group space-y-2', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { htmlFor: id, className: labelClass, children: label }), labelHint] })), jsxs("div", { className: "relative flex items-center gap-3", children: [jsxs("div", { className: "relative flex-1 py-2", children: [showTooltip && hovering && (jsxs("div", { className: "absolute -top-7 transform -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none transition-all z-20", style: { left: `${percent}%` }, children: [currentVal, valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })), jsx("input", { ref: ref, type: "range", id: id, min: min, max: max, value: currentVal, onChange: handleSliderChange, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), ...inputProps, style: {
+                                    background: `linear-gradient(to right, ${hasError ? '#ef4444' : '#2563eb'} 0%, ${hasError ? '#ef4444' : '#2563eb'} ${percent}%, ${document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'} ${percent}%, ${document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'} 100%)`,
+                                }, className: buildClassName('w-full rounded-lg appearance-none cursor-pointer transition-all', currentSize.track, currentSize.thumb, '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full', '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:shadow-md', hasError
+                                    ? '[&::-webkit-slider-thumb]:border-red-600 [&::-moz-range-thumb]:border-red-600'
+                                    : '[&::-webkit-slider-thumb]:border-blue-600 [&::-moz-range-thumb]:border-blue-600', '[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:shadow-md', className) }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
+                                    const markPercent = ((m.value - numMin) / (numMax - numMin)) * 100;
+                                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
+                                }) }))] }), showValue && (jsxs("span", { className: buildClassName('font-medium text-gray-700 dark:text-gray-300 min-w-[3rem] text-right shrink-0', currentSize.text), children: [currentVal, valueSuffix] }))] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
 });
-
-const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', className = '', min, max, valueMin, valueMax, onChange, valueSuffix = '', error = null, showErrorMessage = true, }) => {
+RangeInput.displayName = 'RangeInput';
+
+const sizeClasses$2 = {
+    sm: {
+        track: 'h-1.5',
+        thumb: 'h-4 w-4',
+        thumbPx: 16,
+        text: 'text-xs',
+    },
+    md: {
+        track: 'h-2',
+        thumb: 'h-5 w-5',
+        thumbPx: 20,
+        text: 'text-sm',
+    },
+    lg: {
+        track: 'h-3',
+        thumb: 'h-6 w-6',
+        thumbPx: 24,
+        text: 'text-base',
+    },
+};
+const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', className = '', size = 'md', min, max, step = 1, valueMin, valueMax, onChange, valueSuffix = '', showTooltips = false, marks, error = null, helperText, showErrorMessage = true, }) => {
     const trackRef = useRef(null);
-    // Refs for drag logic
     const activeThumbRef = useRef(null);
-    // State for UI styling
     const [activeThumbState, setActiveThumbState] = useState(null);
-    // Keep prop values in refs so drag handlers always use latest values (no stale closure)
+    const [hoveringThumb, setHoveringThumb] = useState(null);
     const valueMinRef = useRef(valueMin);
     const valueMaxRef = useRef(valueMax);
     const onChangeRef = useRef(onChange);
@@ -1238,20 +1919,28 @@ const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', c
     valueMaxRef.current = valueMax;
     onChangeRef.current = onChange;
     const hasError = !isEmpty(error);
-    const percent = (v) => ((v - min) / (max - min)) * 100;
-    // Stable handler references registered on window — these never change identity
-    // so removeEventListener always finds the right listener to remove.
+    const currentSize = sizeClasses$2[size] || sizeClasses$2.md;
+    const clampValue = (val) => Math.min(Math.max(val, min), max);
+    const snapToStep = (val) => {
+        const clamped = clampValue(val);
+        const steps = Math.round((clamped - min) / step);
+        return Math.min(Math.max(min + steps * step, min), max);
+    };
+    const percent = (v) => ((clampValue(v) - min) / (max - min)) * 100;
     const stablePointerMoveRef = useRef((e) => {
         if (!trackRef.current || !activeThumbRef.current)
             return;
         const rect = trackRef.current.getBoundingClientRect();
         const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
         const rawVal = min + (x / rect.width) * (max - min);
+        const snappedVal = snapToStep(rawVal);
         if (activeThumbRef.current === 'min') {
-            onChangeRef.current(Math.min(rawVal, valueMaxRef.current - 1), valueMaxRef.current);
+            const nextMin = Math.min(snappedVal, valueMaxRef.current - step);
+            onChangeRef.current(nextMin, valueMaxRef.current);
         }
         else {
-            onChangeRef.current(valueMinRef.current, Math.max(rawVal, valueMinRef.current + 1));
+            const nextMax = Math.max(snappedVal, valueMinRef.current + step);
+            onChangeRef.current(valueMinRef.current, nextMax);
         }
     });
     const stablePointerUpRef = useRef(() => {
@@ -1260,7 +1949,6 @@ const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', c
         window.removeEventListener('pointermove', stablePointerMoveRef.current);
         window.removeEventListener('pointerup', stablePointerUpRef.current);
     });
-    // Remove listeners on unmount in case a drag is in progress
     useEffect(() => {
         const move = stablePointerMoveRef.current;
         const up = stablePointerUpRef.current;
@@ -1269,59 +1957,91 @@ const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', c
             window.removeEventListener('pointerup', up);
         };
     }, []);
-    // ---------------------------------------------
-    // Pointer Move (drag)
-    // ---------------------------------------------
     const startDrag = (thumb) => (_e) => {
         activeThumbRef.current = thumb;
         setActiveThumbState(thumb);
         window.addEventListener('pointermove', stablePointerMoveRef.current);
         window.addEventListener('pointerup', stablePointerUpRef.current);
     };
-    // ---------------------------------------------
-    // Click Track to move closest thumb
-    // ---------------------------------------------
     const handleTrackClick = (e) => {
         if (!trackRef.current)
             return;
         const rect = trackRef.current.getBoundingClientRect();
         const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
         const rawVal = min + (x / rect.width) * (max - min);
+        const snappedVal = snapToStep(rawVal);
         const pxMin = (percent(valueMin) / 100) * rect.width;
         const pxMax = (percent(valueMax) / 100) * rect.width;
-        // If click is left of min thumb → move min thumb
         if (x <= pxMin) {
-            onChange(rawVal, valueMax);
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
             return;
         }
-        // If click is right of max thumb → move max thumb
         if (x >= pxMax) {
-            onChange(valueMin, rawVal);
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
             return;
         }
-        // Else click is between → move closest thumb
-        const distMin = Math.abs(rawVal - valueMin);
-        const distMax = Math.abs(rawVal - valueMax);
+        const distMin = Math.abs(snappedVal - valueMin);
+        const distMax = Math.abs(snappedVal - valueMax);
         if (distMin < distMax) {
-            onChange(rawVal, valueMax);
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
         }
         else {
-            onChange(valueMin, rawVal);
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
         }
     };
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full", "data-testid": "range-track", children: [jsx("div", { className: "absolute top-1/2 left-0 right-0 h-2 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2" }), jsx("div", { className: "absolute top-1/2 h-2 bg-blue-600 dark:bg-blue-500 -translate-y-1/2 rounded-full \n          transition-all duration-150 ease-out", style: {
+    // Keyboard accessibility handler for thumbs
+    const handleKeyDown = (thumb) => (e) => {
+        let delta = 0;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
+            delta = -step;
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
+            delta = step;
+        else if (e.key === 'Home') {
+            if (thumb === 'min')
+                onChange(min, valueMax);
+            else
+                onChange(valueMin, valueMin + step);
+            return;
+        }
+        else if (e.key === 'End') {
+            if (thumb === 'min')
+                onChange(valueMax - step, valueMax);
+            else
+                onChange(valueMin, max);
+            return;
+        }
+        if (delta !== 0) {
+            e.preventDefault();
+            if (thumb === 'min') {
+                const next = snapToStep(valueMin + delta);
+                onChange(Math.min(next, valueMax - step), valueMax);
+            }
+            else {
+                const next = snapToStep(valueMax + delta);
+                onChange(valueMin, Math.max(next, valueMin + step));
+            }
+        }
+    };
+    const markEntries = marks
+        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
+        : null;
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full flex items-center cursor-pointer", "data-testid": "range-track", children: [jsx("div", { className: buildClassName('absolute top-1/2 left-0 right-0 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2', currentSize.track) }), jsx("div", { className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 ease-out', hasError ? 'bg-red-500' : 'bg-blue-600 dark:bg-blue-500', currentSize.track), style: {
                             left: `${percent(valueMin)}%`,
                             width: `${percent(valueMax) - percent(valueMin)}%`,
-                        } }), jsx("div", { onPointerDown: startDrag('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 h-5 w-5 rounded-full', 'bg-white border-2 border-blue-600 shadow-md cursor-pointer touch-none', 'transition-all duration-150 ease-out', // animation
-                        activeThumbState === 'min' && 'ring-4 ring-blue-200', className), style: {
-                            left: `calc(${percent(valueMin)}% - 10px)`,
+                        } }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Minimum value", "aria-valuenow": valueMin, "aria-valuemin": min, "aria-valuemax": valueMax - step, onPointerDown: startDrag('min'), onMouseEnter: () => setHoveringThumb('min'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'min' || hoveringThumb === 'min') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMin)}% - ${currentSize.thumbPx / 2}px)`,
                             zIndex: activeThumbState === 'min' ? 50 : 30,
-                        }, "data-testid": "thumb-min" }), jsx("div", { onPointerDown: startDrag('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 h-5 w-5 rounded-full', 'bg-white border-2 border-blue-600 shadow-md cursor-pointer touch-none', 'transition-all duration-150 ease-out', // animation
-                        activeThumbState === 'max' && 'ring-4 ring-blue-200', className), style: {
-                            left: `calc(${percent(valueMax)}% - 10px)`,
+                        }, "data-testid": "thumb-min", children: showTooltips && (activeThumbState === 'min' || hoveringThumb === 'min') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMin), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Maximum value", "aria-valuenow": valueMax, "aria-valuemin": valueMin + step, "aria-valuemax": max, onPointerDown: startDrag('max'), onMouseEnter: () => setHoveringThumb('max'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'max' || hoveringThumb === 'max') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMax)}% - ${currentSize.thumbPx / 2}px)`,
                             zIndex: activeThumbState === 'max' ? 50 : 40,
-                        }, "data-testid": "thumb-max" })] }), jsxs("div", { className: "flex justify-between text-sm text-gray-700 dark:text-gray-300", children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), showErrorMessage && hasError && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+                        }, "data-testid": "thumb-max", children: showTooltips && (activeThumbState === 'max' || hoveringThumb === 'max') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMax), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) })] }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
+                    const markPercent = percent(m.value);
+                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
+                }) })), jsxs("div", { className: buildClassName('flex justify-between font-medium text-gray-700 dark:text-gray-300', currentSize.text), children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
 };
+RangeSlider.displayName = 'RangeSlider';
 
 const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
@@ -1389,28 +2109,69 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
   })));
 };
 
-const constructInputClass = (disabled) => buildInputClass('', { disabled });
+const sizeClasses$1 = {
+    sm: {
+        input: 'px-2.5 py-1 text-xs leading-5 min-h-[30px]',
+        group: 'w-8 text-xs',
+        icon: 'size-3.5',
+        badgeSize: 'sm',
+    },
+    md: {
+        input: 'px-3.5 py-2 text-sm leading-6 min-h-[38px]',
+        group: 'w-10 text-sm',
+        icon: 'size-4',
+        badgeSize: 'md',
+    },
+    lg: {
+        input: 'px-4 py-2.5 text-base leading-7 min-h-[46px]',
+        group: 'w-12 text-base',
+        icon: 'size-5',
+        badgeSize: 'md',
+    },
+};
 const SelectBox = forwardRef((props, forwardedRef) => {
-    const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
+    const { labelKey = 'label', valueKey = 'value', name, id = name, options = [], groups, selected, size = 'md', label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, showSelectAll = false, immediate = true, showErrorMessage = true, error = null, helperText, leftGroup, renderOption, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
     const hasError = Boolean(error);
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebounce(query, 500);
     const [optionsLoading, setOptionsLoading] = useState(false);
-    const shouldShowTypeToSearch = async && !query && !optionsLoading && options.length === 0;
-    const inputClass = useMemo(() => constructInputClass(disabled), [disabled]);
-    const chevronIconClass = buildClassName('size-4', 'stroke-gray-500 group-data-[hover]:stroke-gray-800', 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100', disabled && 'dark:stroke-gray-600 stroke-gray-400');
+    // Normalize options from options prop or groups prop
+    const allOptions = useMemo(() => {
+        if (groups === null || groups === void 0 ? void 0 : groups.length) {
+            return groups.flatMap((g) => g.options);
+        }
+        return options;
+    }, [groups, options]);
+    const shouldShowTypeToSearch = async && !query && !optionsLoading && allOptions.length === 0;
+    const currentSize = sizeClasses$1[size] || sizeClasses$1.md;
+    const baseInputClass = useMemo(() => buildInputClass('', { disabled, hasError, size }), [disabled, hasError, size]);
+    const chevronIconClass = buildClassName(currentSize.icon, 'stroke-gray-500 group-data-[hover]:stroke-gray-800', 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100', disabled && 'dark:stroke-gray-600 stroke-gray-400');
     const inputRef = useRef(null);
     const containerRef = useRef(null);
-    // Expose the input element to parent
     useImperativeHandle(forwardedRef, () => inputRef.current, [inputRef]);
     const filteredOptions = useMemo(() => {
         if (query === '' || async)
-            return options;
-        return options.filter((opt) => {
-            const label = typeof opt === 'string' ? opt : opt[labelKey];
-            return label === null || label === void 0 ? void 0 : label.toLowerCase().includes(query.toLowerCase());
+            return allOptions;
+        return allOptions.filter((opt) => {
+            const lbl = typeof opt === 'string' ? opt : opt[labelKey];
+            return lbl === null || lbl === void 0 ? void 0 : lbl.toLowerCase().includes(query.toLowerCase());
         });
-    }, [options, query, async, labelKey]);
+    }, [allOptions, query, async, labelKey]);
+    const filteredGroups = useMemo(() => {
+        if (!(groups === null || groups === void 0 ? void 0 : groups.length))
+            return null;
+        if (query === '' || async)
+            return groups;
+        return groups
+            .map((g) => ({
+            ...g,
+            options: g.options.filter((opt) => {
+                const lbl = typeof opt === 'string' ? opt : opt[labelKey];
+                return lbl === null || lbl === void 0 ? void 0 : lbl.toLowerCase().includes(query.toLowerCase());
+            }),
+        }))
+            .filter((g) => g.options.length > 0);
+    }, [groups, query, async, labelKey]);
     const getDisplayValue = useCallback((opt) => {
         return typeof opt === 'string' ? opt : opt[labelKey];
     }, [labelKey]);
@@ -1426,69 +2187,48 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         onChange(next);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    // A strongly-typed internal handler (what you expect callers to receive)
     const handleOnChangeInternal = useCallback((value) => {
-        // normal empty value
         if (value === null) {
             onChange(multiple ? [] : null);
             setQuery('');
             return;
         }
-        // enforce maxSelection
         if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {
-            // ignore the change
             return;
         }
         onChange(value);
         setQuery('');
     }, [onChange, multiple, maxSelection]);
-    /**
-     * Headless UI typings are overly broad (they include null[] and EnsureArray<T> etc).
-     * We therefore pass a wrapper to the Combobox with a cast (only at the call site),
-     * while keeping our internal logic strongly typed.
-     */
     const comboboxOnChangeWrapper = useCallback((raw) => {
-        // normalize actual runtime shapes Headless UI uses: T | T[] | null
         if (raw === null || raw === undefined) {
             handleOnChangeInternal(null);
             return;
         }
         if (Array.isArray(raw)) {
-            // sometimes union typing suggests arrays of nulls — guard it
             const allNulls = raw.length > 0 && raw.every((v) => v === null);
             if (allNulls) {
                 handleOnChangeInternal([]);
                 return;
             }
-            // cast array to T[]
             handleOnChangeInternal(raw);
             return;
         }
-        // single value
         handleOnChangeInternal(raw);
     }, [handleOnChangeInternal]);
-    // support create (allowAdd) as a real ComboboxOption
     const handleAddAndSelect = useCallback(async (valueToAdd) => {
         try {
             const result = await onAdd(valueToAdd);
-            // if the parent returned a new option (string or object), select it
             if (result) {
-                // If parent returned raw string or object, call onChange with that
                 handleOnChangeInternal(result);
             }
             else {
-                // if parent didn't return anything, select the raw string value
                 handleOnChangeInternal(valueToAdd);
             }
         }
         catch (err) {
-            // eslint-disable-next-line no-console
             console.error('onAdd handler error', err);
         }
     }, [onAdd, handleOnChangeInternal]);
-    // Kept in a ref so `handleSearch` stays referentially stable even when the
-    // caller passes a non-memoized `onSearch` — otherwise the effect below would
-    // re-fire (and re-search) on every render instead of only on query changes.
     const onSearchRef = useRef(props.onSearch);
     useEffect(() => {
         onSearchRef.current = props.onSearch;
@@ -1510,16 +2250,232 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         if (async && debouncedQuery)
             handleSearch(debouncedQuery);
     }, [debouncedQuery, async, handleSearch]);
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
+    const isAllSelected = useMemo(() => {
+        if (!multiple || !Array.isArray(selected) || !allOptions.length)
+            return false;
+        return allOptions.length === selected.length;
+    }, [multiple, selected, allOptions]);
+    const handleToggleSelectAll = () => {
+        if (isAllSelected) {
+            onChange([]);
+        }
+        else {
+            onChange(allOptions);
+        }
+    };
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(selected) &&
                                 (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
-                                selected.map((option, idx) => (jsx(Badge, { theme: "secondary", removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
+                                selected.map((option, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
                                     if (multiple && e.key === 'Backspace' && !query) {
                                         if (Array.isArray(selected) && selected.length > 0) {
                                             removeSelection(selected.length - 1);
                                         }
                                     }
-                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && (jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxs(Fragment, { children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10', currentSize.group), children: leftGroup })), jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: buildClassName(baseInputClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxs(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: [multiple && showSelectAll && allOptions.length > 0 && (jsxs("div", { className: "pb-1 mb-1 border-b border-gray-200 dark:border-gray-700/80 px-3 pt-1 flex items-center justify-between", children: [jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxs("span", { className: "text-[11px] font-medium text-gray-400", children: [Array.isArray(selected) ? selected.length : 0, " of ", allOptions.length] })] })), optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredGroups
+                                        ? filteredGroups.map((grp, gIdx) => (jsxs("div", { children: [jsx("div", { className: "text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none", children: grp.group }), grp.options.map((option) => {
+                                                    const optVal = getValue(option);
+                                                    const isOptSelected = multiple
+                                                        ? isArray(selected) && selected.some((s) => getValue(s) === optVal)
+                                                        : selected && getValue(selected) === optVal;
+                                                    return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                                })] }, gIdx)))
+                                        : /* Render Standard Flat Options */
+                                            filteredOptions.map((option) => {
+                                                const optVal = getValue(option);
+                                                const isOptSelected = multiple
+                                                    ? isArray(selected) && selected.some((s) => getValue(s) === optVal)
+                                                    : selected && getValue(selected) === optVal;
+                                                return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                            }), filteredOptions.length === 0 && !(filteredGroups === null || filteredGroups === void 0 ? void 0 : filteredGroups.length) && (jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxs(Fragment, { children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] }))] })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsx("div", { className: "mt-1", children: jsx(TextContent, { muted: true, small: true, children: helperText }) }))] }));
+});
+SelectBox.displayName = 'SelectBox';
+
+const VARIANT_CLASS = {
+    text: 'rounded-md h-4 w-full my-1',
+    circular: 'rounded-full shrink-0',
+    rectangular: 'rounded-none w-full h-24',
+    rounded: 'rounded-xl w-full h-24',
+};
+const ANIMATION_CLASS = {
+    pulse: 'animate-pulse bg-gray-200 dark:bg-gray-700',
+    wave: 'bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-800 bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]',
+    none: 'bg-gray-200 dark:bg-gray-700',
+};
+const Skeleton = forwardRef((props, ref) => {
+    const { as, variant = 'text', animation = 'pulse', width, height, borderRadius, className, style: customStyle, ...restProps } = props;
+    const Component = as || 'div';
+    const inlineStyles = {
+        ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : {}),
+        ...(height !== undefined
+            ? { height: typeof height === 'number' ? `${height}px` : height }
+            : {}),
+        ...(borderRadius !== undefined
+            ? { borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius }
+            : {}),
+        ...customStyle,
+    };
+    return (jsx(Component, { ref: ref, "aria-hidden": "true", style: inlineStyles, className: buildClassName('block select-none pointer-events-none', VARIANT_CLASS[variant], ANIMATION_CLASS[animation], className), "data-testid": "skeleton", ...restProps }));
+});
+Skeleton.displayName = 'Skeleton';
+
+const MinusIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
+const PlusIcon = ({ className }) => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+const BUTTON_SIZE_CLASS = {
+    sm: 'size-7',
+    md: 'size-9',
+    lg: 'size-10',
+};
+const ICON_SIZE_CLASS = {
+    sm: 'size-3.5',
+    md: 'size-4',
+    lg: 'size-4.5',
+};
+const INPUT_TEXT_CLASS = {
+    sm: 'w-12 text-xs py-1',
+    md: 'w-16 text-sm py-1.5',
+    lg: 'w-20 text-base py-2',
+};
+const QuantityStepper = forwardRef((props, ref) => {
+    const { value, onChange, min = 0, max = 99999, step = 1, label, size = 'md', prefix, suffix, disabled = false, className, onFocus, ...restProps } = props;
+    const handleDecrement = () => {
+        if (disabled)
+            return;
+        const next = Math.max(min, Number((value - step).toFixed(4)));
+        onChange(next);
+    };
+    const handleIncrement = () => {
+        if (disabled)
+            return;
+        const next = Math.min(max, Number((value + step).toFixed(4)));
+        onChange(next);
+    };
+    const handleInputChange = (e) => {
+        const raw = e.target.value;
+        if (raw === '') {
+            onChange(0);
+            return;
+        }
+        const parsed = parseFloat(raw);
+        if (!isNaN(parsed)) {
+            onChange(Math.max(min, Math.min(max, parsed)));
+        }
+    };
+    const isAtMin = disabled || value <= min;
+    const isAtMax = disabled || value >= max;
+    return (jsxs("div", { className: buildClassName('flex flex-col gap-1 inline-flex', className), children: [label && (jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300", children: label })), jsxs("div", { className: buildClassName('inline-flex items-center rounded-lg border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800 shadow-xs focus-within:ring-2 focus-within:ring-[var(--ui-primary-ring)] focus-within:border-[var(--ui-primary)] transition-all', disabled ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900' : ''), "data-testid": "quantity-stepper", children: [jsx("button", { type: "button", disabled: isAtMin, onClick: handleDecrement, tabIndex: -1, "aria-label": "Decrease quantity", className: buildClassName('flex items-center justify-center rounded-l-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 transition-colors', BUTTON_SIZE_CLASS[size], isAtMin ? 'opacity-30 hover:bg-transparent cursor-not-allowed' : 'cursor-pointer'), "data-testid": "stepper-decrement", children: jsx(MinusIcon, { className: ICON_SIZE_CLASS[size] }) }), prefix && jsx("span", { className: "pl-1 text-gray-400 dark:text-gray-500", children: prefix }), jsx("input", { ref: ref, type: "number", min: min, max: max, step: step, value: value === 0 ? '' : value, placeholder: "0", disabled: disabled, onFocus: (e) => {
+                            e.target.select();
+                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                        }, onChange: handleInputChange, className: buildClassName('text-center font-semibold text-gray-900 dark:text-white bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', INPUT_TEXT_CLASS[size]), "data-testid": "stepper-input", ...restProps }), suffix && jsx("span", { className: "pr-1 text-xs text-gray-500 dark:text-gray-400", children: suffix }), jsx("button", { type: "button", disabled: isAtMax, onClick: handleIncrement, tabIndex: -1, "aria-label": "Increase quantity", className: buildClassName('flex items-center justify-center rounded-r-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 transition-colors', BUTTON_SIZE_CLASS[size], isAtMax ? 'opacity-30 hover:bg-transparent cursor-not-allowed' : 'cursor-pointer'), "data-testid": "stepper-increment", children: jsx(PlusIcon, { className: ICON_SIZE_CLASS[size] }) })] })] }));
+});
+QuantityStepper.displayName = 'QuantityStepper';
+
+const SIZE_CONTAINER_CLASS = {
+    sm: 'p-0.5 gap-0.5 rounded-lg text-xs',
+    md: 'p-1 gap-1 rounded-xl text-sm',
+    lg: 'p-1.5 gap-1.5 rounded-xl text-base',
+};
+const SIZE_OPTION_CLASS = {
+    sm: 'px-2 py-1 text-xs font-medium rounded-md',
+    md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',
+    lg: 'px-4 py-2 text-base font-semibold rounded-lg',
+};
+const SIZE_ICON_CLASS = {
+    sm: 'size-3.5',
+    md: 'size-4',
+    lg: 'size-5',
+};
+const SegmentedControl = forwardRef((props, ref) => {
+    const { options, value, onChange, disabled = false, size = 'md', fullWidth = false, className, ...restProps } = props;
+    const handleKeyDown = (e, currentIndex) => {
+        const enabledOptions = options.filter((opt) => !opt.disabled && !disabled);
+        if (enabledOptions.length === 0)
+            return;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const currentPos = enabledOptions.findIndex((opt) => opt.value === options[currentIndex].value);
+            const nextPos = (currentPos + 1) % enabledOptions.length;
+            onChange(enabledOptions[nextPos].value);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const currentPos = enabledOptions.findIndex((opt) => opt.value === options[currentIndex].value);
+            const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length;
+            onChange(enabledOptions[prevPos].value);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            onChange(enabledOptions[0].value);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            onChange(enabledOptions[enabledOptions.length - 1].value);
+        }
+    };
+    return (jsx("div", { ref: ref, role: "tablist", "aria-orientation": "horizontal", className: buildClassName('inline-flex items-center border border-gray-200 bg-gray-100/80 dark:border-gray-700 dark:bg-gray-800/80', SIZE_CONTAINER_CLASS[size], fullWidth ? 'w-full flex' : '', disabled ? 'opacity-60 cursor-not-allowed' : '', className), "data-testid": "segmented-control", ...restProps, children: options.map((option, index) => {
+            const isSelected = value === option.value;
+            const isOptionDisabled = disabled || option.disabled;
+            return (jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, "aria-disabled": isOptionDisabled, tabIndex: isSelected && !isOptionDisabled ? 0 : -1, disabled: isOptionDisabled, title: option.title, onClick: () => {
+                    if (!isOptionDisabled) {
+                        onChange(option.value);
+                    }
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                    ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { children: option.label })] }, option.value));
+        }) }));
 });
+SegmentedControl.displayName = 'SegmentedControl';
+
+const THEME_PILL_CLASS = {
+    success: {
+        bg: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-500/20 dark:border-emerald-500/30',
+        dot: 'bg-emerald-500',
+    },
+    warning: {
+        bg: 'bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/20 dark:border-amber-500/30',
+        dot: 'bg-amber-500',
+    },
+    danger: {
+        bg: 'bg-rose-500/10 text-rose-700 dark:text-rose-300 border-rose-500/20 dark:border-rose-500/30',
+        dot: 'bg-rose-500',
+    },
+    info: {
+        bg: 'bg-blue-500/10 text-blue-700 dark:text-blue-300 border-blue-500/20 dark:border-blue-500/30',
+        dot: 'bg-blue-500',
+    },
+    secondary: {
+        bg: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20 dark:border-gray-500/30',
+        dot: 'bg-gray-400',
+    },
+};
+const SIZE_CLASS = {
+    sm: 'px-2.5 py-0.5 text-xs',
+    md: 'px-3 py-1 text-sm',
+};
+const DOT_SIZE_CLASS = {
+    sm: 'size-1.5',
+    md: 'size-2',
+};
+const StatusPill = forwardRef((props, ref) => {
+    var _a;
+    const { theme = 'secondary', size = 'sm', dot = true, pulse = false, className, children, ...restProps } = props;
+    const style = (_a = THEME_PILL_CLASS[theme]) !== null && _a !== void 0 ? _a : THEME_PILL_CLASS.secondary;
+    return (jsxs("span", { ref: ref, className: buildClassName('inline-flex items-center gap-1.5 rounded-full border font-semibold whitespace-nowrap transition-colors', SIZE_CLASS[size], style.bg, className), "data-testid": `status-pill-${theme}`, ...restProps, children: [dot && (jsx("span", { className: buildClassName('shrink-0 rounded-full', DOT_SIZE_CLASS[size], style.dot, pulse ? 'animate-pulse' : ''), "data-testid": "status-pill-dot", "aria-hidden": "true" })), jsx("span", { children: children })] }));
+});
+StatusPill.displayName = 'StatusPill';
+
+const ChevronUpIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("polyline", { points: "18 15 12 9 6 15" }) }));
+const StickyActionBar = forwardRef((props, ref) => {
+    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', className, ...restProps } = props;
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const positionClass = position === 'fixed'
+        ? 'fixed bottom-0 left-0 right-0 z-30'
+        : position === 'sticky'
+            ? 'sticky bottom-0 z-30'
+            : 'relative z-10';
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-gray-200/80 bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:border-gray-800 dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
+});
+StickyActionBar.displayName = 'StickyActionBar';
 
 const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
     const isVertical = orientation === 'vertical';
@@ -1540,7 +2496,7 @@ const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'unde
                 }) })] }));
 };
 function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
-    const base = buildClassName('inline-flex items-center gap-1.5 text-sm font-medium transition focus-visible:outline-none', 'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none', stretch && !isVertical && 'flex-1 justify-center');
+    const base = buildClassName('inline-flex items-center gap-1.5 text-sm font-medium transition focus:outline-none focus-visible:outline-none focus:ring-0 select-none', 'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none', stretch && !isVertical && 'flex-1 justify-center');
     let variantClass;
     switch (variant) {
         case 'underline':
@@ -1565,13 +2521,58 @@ function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
     return buildClassName(base, variantClass, tabClass);
 }
 
+const sizeClasses = {
+    sm: {
+        textarea: 'px-2.5 py-1.5 text-xs leading-5 min-h-[60px]',
+        text: 'text-xs',
+    },
+    md: {
+        textarea: 'px-3.5 py-2 text-sm leading-6 min-h-[80px]',
+        text: 'text-sm',
+    },
+    lg: {
+        textarea: 'px-4 py-2.5 text-base leading-7 min-h-[100px]',
+        text: 'text-base',
+    },
+};
+const resizeClasses = {
+    none: 'resize-none',
+    vertical: 'resize-y',
+    horizontal: 'resize-x',
+    both: 'resize',
+};
 const Textarea = forwardRef((props, ref) => {
-    const { name, id = name, label = null, labelHint = null, className = '', labelClass = '', labelWrapperClass = '', containerClass = '', error, showErrorMessage = true, rightGroup = null, leftGroup = null, ...inputProps } = props;
+    const { name, id = name, label = null, labelHint = null, className = '', labelClass = '', labelWrapperClass = '', containerClass = '', error, showErrorMessage = true, rightGroup = null, leftGroup = null, size = 'md', autoSize = false, showCount = false, helperText, resize = 'vertical', value, defaultValue, onChange, maxLength, ...inputProps } = props;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    const isControlled = value !== undefined;
+    const currentVal = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
+    const charLength = currentVal.length;
+    // Handle Auto-Resize behavior
+    useEffect(() => {
+        if (autoSize && innerRef.current) {
+            innerRef.current.style.height = 'auto';
+            innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+        }
+    }, [autoSize, currentVal]);
+    const handleTextareaChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
     const hasError = !isEmpty(error);
     const hasRightGroup = rightGroup != null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-gray-200', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-gray-700', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-2.5 left-3 flex items-center justify-center text-gray-400 dark:text-gray-500", children: leftGroup })), jsx("textarea", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleTextareaChange, maxLength: maxLength, name: name, id: id, className: buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.textarea, autoSize ? 'resize-none overflow-hidden' : resizeClasses[resize], 'text-gray-900 outline outline-1 -outline-offset-1', hasError
+                            ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
+                            : 'outline-gray-300 dark:outline-gray-600', 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 placeholder:text-gray-400 dark:text-white', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-gray-200', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-gray-700', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-3 top-2.5 flex items-center justify-center text-gray-400 dark:text-gray-500", children: rightGroup }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                            ? 'text-red-500 font-semibold'
+                            : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
 });
+Textarea.displayName = 'Textarea';
 
 /**
  * Icons for each toast type
@@ -1582,23 +2583,76 @@ const iconMap = {
     info: jsx(SvgInfo, { className: "size-5 text-[var(--ui-info)]" }),
     warning: jsx(SvgTriangleAlert, { className: "size-5 text-[var(--ui-warning)]" }),
 };
+const filledIconMap = {
+    success: jsx(SvgCircleCheck, { className: "size-5 text-white" }),
+    error: jsx(SvgCircleAlert, { className: "size-5 text-white" }),
+    info: jsx(SvgInfo, { className: "size-5 text-white" }),
+    warning: jsx(SvgTriangleAlert, { className: "size-5 text-white" }),
+};
 const textColorMap = {
     success: 'text-[var(--ui-success-text)]',
     error: 'text-[var(--ui-danger-text)]',
     info: 'text-[var(--ui-info-text)]',
     warning: 'text-[var(--ui-warning-text)]',
 };
-const borderStyle = {
-    success: 'border-t-4 border-[var(--ui-success)]',
-    error: 'border-t-4 border-[var(--ui-danger)]',
-    info: 'border-t-4 border-[var(--ui-info)]',
-    warning: 'border-t-4 border-[var(--ui-warning)]',
+const progressBarColorMap = {
+    success: 'bg-[var(--ui-success)]',
+    error: 'bg-[var(--ui-danger)]',
+    info: 'bg-[var(--ui-info)]',
+    warning: 'bg-[var(--ui-warning)]',
+};
+const variantStyleMap = {
+    accent: {
+        success: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
+        error: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
+        info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
+        warning: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
+    },
+    filled: {
+        success: 'bg-[var(--ui-success)] text-white shadow-lg',
+        error: 'bg-[var(--ui-danger)] text-white shadow-lg',
+        info: 'bg-[var(--ui-info)] text-white shadow-lg',
+        warning: 'bg-[var(--ui-warning)] text-white shadow-lg',
+    },
+    outlined: {
+        success: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',
+        error: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',
+        info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',
+        warning: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',
+    },
+    glass: {
+        success: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        error: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        warning: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+    },
 };
-const Toast = ({ message, type, onClose, className, id, isTop = true, }) => {
+const Toast = ({ id, title, message, type, variant = 'accent', action, icon, showProgressBar = true, duration = 4000, isPaused = false, onClose, className, isTop = true, }) => {
+    const [progress, setProgress] = useState(100);
+    useEffect(() => {
+        if (!showProgressBar || !duration || isPaused)
+            return;
+        const intervalTime = 50;
+        const step = (intervalTime / duration) * 100;
+        const timer = setInterval(() => {
+            setProgress((prev) => {
+                if (prev <= 0) {
+                    clearInterval(timer);
+                    return 0;
+                }
+                return prev - step;
+            });
+        }, intervalTime);
+        return () => clearInterval(timer);
+    }, [showProgressBar, duration, isPaused]);
     const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95';
     const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95';
-    return (jsx(Transition, { appear: true, show: true, enter: "transform transition duration-300", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxs("div", { role: "status", className: buildClassName('flex items-center gap-3 rounded-lg px-4 py-3 shadow-lg min-w-[260px] max-w-sm', 'bg-white dark:bg-gray-900 dark:border-gray-700', borderStyle[type], className), id: id.toString(), children: [jsx(TextContent, { className: buildClassName(textColorMap[type]), children: iconMap[type] }), jsx(TextContent, { className: "flex-1 text-sm font-medium", children: message }), jsx(Button, { onClick: onClose, "aria-label": "Close toast", className: "opacity-60 hover:opacity-100 transition", iconOnly: true, size: "xs", variant: "plain", theme: "secondary", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4" }) })] }) }));
+    const renderedIcon = icon !== null && icon !== void 0 ? icon : (variant === 'filled' ? filledIconMap[type] : iconMap[type]);
+    return (jsx(Transition, { appear: true, show: true, enter: "transform transition duration-300 ease-out", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200 ease-in", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxs("div", { role: "status", id: id.toString(), className: buildClassName('relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all', variantStyleMap[variant][type], className), children: [jsx("div", { className: "shrink-0 mt-0.5", children: variant === 'filled' ? (renderedIcon) : (jsx(TextContent, { className: buildClassName(textColorMap[type]), children: renderedIcon })) }), jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [title && (jsx("div", { className: buildClassName('font-semibold text-sm leading-snug', variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100'), children: title })), jsx("div", { className: buildClassName('text-sm font-medium leading-relaxed', variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300'), children: message }), action && (jsx("div", { className: "mt-1.5", children: jsx("button", { type: "button", onClick: action.onClick, className: buildClassName('text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none', variant === 'filled'
+                                    ? 'text-white hover:opacity-85'
+                                    : 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsx(Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary', noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4" }) }), showProgressBar && duration > 0 && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden", children: jsx("div", { className: buildClassName('h-full transition-all duration-75 ease-linear', variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type]), style: { width: `${Math.max(0, progress)}%` } }) }))] }) }));
 };
+Toast.displayName = 'Toast';
 
 const ToastContext = createContext(undefined);
 let toastCounter = 0;
@@ -1608,64 +2662,138 @@ const useToast = () => {
         throw new Error('useToast must be used within ToastProvider');
     return context;
 };
-// Maximum visible toasts at once
-const MAX_TOASTS = 5;
 const placementClass = {
-    'top-right': 'top-10 right-4 items-end',
-    'top-left': 'top-10 left-4 items-start',
-    'top-center': 'top-10 left-1/2 -translate-x-1/2 items-center',
-    'bottom-right': 'bottom-10 right-4 items-end',
-    'bottom-left': 'bottom-10 left-4 items-start',
-    'bottom-center': 'bottom-10 left-1/2 -translate-x-1/2 items-center',
-};
-const ToastProvider = ({ children, placement = 'top-center' }) => {
+    'top-right': 'top-20 right-6 items-end',
+    'top-left': 'top-20 left-6 items-start',
+    'top-center': 'top-20 left-1/2 -translate-x-1/2 items-center',
+    'bottom-right': 'bottom-6 right-6 items-end',
+    'bottom-left': 'bottom-6 left-6 items-start',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2 items-center',
+};
+const ToastProvider = ({ children, placement = 'top-right', maxToasts = 5, className, }) => {
     const [toasts, setToasts] = useState([]);
-    const timeoutRefs = useRef(new Map());
+    const [pausedIds, setPausedIds] = useState(new Set());
+    const metaRefs = useRef(new Map());
     const clearTimer = (id) => {
-        const timeout = timeoutRefs.current.get(id);
-        if (timeout) {
-            clearTimeout(timeout);
-            timeoutRefs.current.delete(id);
+        const meta = metaRefs.current.get(id);
+        if (meta === null || meta === void 0 ? void 0 : meta.timerId) {
+            clearTimeout(meta.timerId);
+            meta.timerId = null;
         }
     };
     const closeToast = useCallback((id) => {
         clearTimer(id);
+        metaRefs.current.delete(id);
+        setPausedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
         setToasts((prev) => prev.filter((t) => t.id !== id));
     }, []);
-    const scheduleClose = useCallback((toast) => {
-        if (!toast.autoClose)
-            return;
-        clearTimer(toast.id);
-        const timeout = setTimeout(() => {
-            closeToast(toast.id);
-        }, toast.duration);
-        timeoutRefs.current.set(toast.id, timeout);
+    const dismissAll = useCallback(() => {
+        metaRefs.current.forEach((meta) => {
+            if (meta.timerId)
+                clearTimeout(meta.timerId);
+        });
+        metaRefs.current.clear();
+        setPausedIds(new Set());
+        setToasts([]);
+    }, []);
+    const startAutoClose = useCallback((toastId, delay) => {
+        clearTimer(toastId);
+        const timerId = setTimeout(() => {
+            closeToast(toastId);
+        }, delay);
+        const meta = metaRefs.current.get(toastId);
+        if (meta) {
+            meta.timerId = timerId;
+            meta.startTime = Date.now();
+            meta.remainingTime = delay;
+        }
+        else {
+            metaRefs.current.set(toastId, {
+                timerId,
+                startTime: Date.now(),
+                remainingTime: delay,
+            });
+        }
     }, [closeToast]);
     useEffect(() => {
-        const refs = timeoutRefs.current;
-        return () => refs.forEach((id) => clearTimeout(id));
+        const refs = metaRefs.current;
+        return () => refs.forEach((meta) => {
+            if (meta.timerId)
+                clearTimeout(meta.timerId);
+        });
     }, []);
     const showToast = useCallback((message, options) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const id = ++toastCounter;
         const newToast = {
             id,
+            title: options === null || options === void 0 ? void 0 : options.title,
             message,
             type: (_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'info',
-            duration: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : 3000,
-            autoClose: (_c = options === null || options === void 0 ? void 0 : options.autoClose) !== null && _c !== void 0 ? _c : true,
-            pauseOnHover: (_d = options === null || options === void 0 ? void 0 : options.pauseOnHover) !== null && _d !== void 0 ? _d : true,
+            variant: (_b = options === null || options === void 0 ? void 0 : options.variant) !== null && _b !== void 0 ? _b : 'accent',
+            duration: (_c = options === null || options === void 0 ? void 0 : options.duration) !== null && _c !== void 0 ? _c : 4000,
+            autoClose: (_d = options === null || options === void 0 ? void 0 : options.autoClose) !== null && _d !== void 0 ? _d : true,
+            pauseOnHover: (_e = options === null || options === void 0 ? void 0 : options.pauseOnHover) !== null && _e !== void 0 ? _e : true,
+            showProgressBar: (_f = options === null || options === void 0 ? void 0 : options.showProgressBar) !== null && _f !== void 0 ? _f : (options === null || options === void 0 ? void 0 : options.autoClose) !== false,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
         };
         setToasts((prev) => {
             const updated = [...prev, newToast];
-            if (updated.length > MAX_TOASTS)
+            if (updated.length > maxToasts)
                 updated.shift();
             return updated;
         });
-        scheduleClose(newToast);
-    }, [scheduleClose]);
-    return (jsxs(ToastContext.Provider, { value: { showToast, closeToast }, children: [children, jsx("div", { className: buildClassName('fixed z-50 flex flex-col gap-3 pointer-events-none', placementClass[placement]), children: toasts.map((toast, index) => (jsx("div", { className: "pointer-events-auto", onMouseEnter: () => toast.pauseOnHover && clearTimer(toast.id), onMouseLeave: () => toast.pauseOnHover && scheduleClose(toast), children: jsx(Toast, { ...toast, isTop: placement.startsWith('top'), onClose: () => closeToast(toast.id) }) }, toast.id))) })] }));
-};
+        if (newToast.autoClose) {
+            startAutoClose(id, newToast.duration);
+        }
+        return id;
+    }, [maxToasts, startAutoClose]);
+    // Hover pauses timer and tracks exact remaining milliseconds
+    const handleMouseEnter = (toast) => {
+        if (!toast.pauseOnHover || !toast.autoClose)
+            return;
+        const meta = metaRefs.current.get(toast.id);
+        if (meta) {
+            const elapsed = Date.now() - meta.startTime;
+            meta.remainingTime = Math.max(0, meta.remainingTime - elapsed);
+            clearTimer(toast.id);
+            setPausedIds((prev) => new Set(prev).add(toast.id));
+        }
+    };
+    // Mouse leave resumes timer with exact remaining milliseconds
+    const handleMouseLeave = (toast) => {
+        if (!toast.pauseOnHover || !toast.autoClose)
+            return;
+        setPausedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(toast.id);
+            return next;
+        });
+        const meta = metaRefs.current.get(toast.id);
+        if (meta && meta.remainingTime > 0) {
+            startAutoClose(toast.id, meta.remainingTime);
+        }
+        else if (meta && meta.remainingTime <= 0) {
+            closeToast(toast.id);
+        }
+    };
+    const toastHelpers = useMemo(() => ({
+        show: (message, options) => showToast(message, options),
+        success: (message, options) => showToast(message, { ...options, type: 'success' }),
+        error: (message, options) => showToast(message, { ...options, type: 'error' }),
+        info: (message, options) => showToast(message, { ...options, type: 'info' }),
+        warning: (message, options) => showToast(message, { ...options, type: 'warning' }),
+        dismiss: (id) => closeToast(id),
+        dismissAll: () => dismissAll(),
+    }), [showToast, closeToast, dismissAll]);
+    return (jsxs(ToastContext.Provider, { value: { showToast, closeToast, toast: toastHelpers }, children: [children, jsx("div", { className: buildClassName('fixed z-[9999] flex flex-col gap-3 pointer-events-none', placementClass[placement], className), children: toasts.map((toastItem) => (jsx("div", { className: "pointer-events-auto", onMouseEnter: () => handleMouseEnter(toastItem), onMouseLeave: () => handleMouseLeave(toastItem), children: jsx(Toast, { ...toastItem, isPaused: pausedIds.has(toastItem.id), isTop: placement.startsWith('top'), onClose: () => closeToast(toastItem.id) }) }, toastItem.id))) })] }));
+};
+ToastProvider.displayName = 'ToastProvider';
 
 const DENSITY_CELL_CLASS$1 = {
     compact: 'px-2 py-1.5',
@@ -1849,5 +2977,5 @@ const useIsTabletOrMobile = () => {
     return isMobile || isTablet;
 };
 
-export { Accordion, Alert, Badge, Banner, BodyText, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SelectBox, SortIconMap, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
+export { Accordion, Alert, Badge, Banner, BodyText, Breadcrumb, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, QuantityStepper, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SegmentedControl, SelectBox, Skeleton, SortIconMap, StatusPill, StickyActionBar, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, evaluatePasswordStrength, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map