@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -24,12 +24,15 @@ const checkboxTheme = {
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)] " +
+        // Invalid state
+        "data-[state=invalid]:border-[var(--color-danger)] data-[state=invalid]:focus-visible:outline-[var(--color-danger)]",
     // Description text - light and dark
     descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
+        lg: "size-7",
     },
     // Group styles
     groupStyle: "flex flex-col gap-1.5",

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 /**
  * State variants for the checkbox component
  */
-export type CheckboxState = 'default' | 'disabled';
+export type CheckboxState = 'default' | 'disabled' | 'invalid';
 /**
  * Size variants for the checkbox component
  */
-export type CheckboxSize = 'sm' | 'md';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
 /**
  * Orientation for Checkbox.Group layout
  */
@@ -14,11 +14,9 @@ export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Checkbox component props
  */
-export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id?: string;
-    name?: string;
     value: string;
-    checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean, value: string) => void;
     label?: React.ReactNode;
@@ -40,7 +38,11 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
     orientation?: CheckboxGroupOrientation;
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
+     */
     error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

package/dist/components/forms/Checkbox/CheckboxGroup.js

@@ -5,7 +5,12 @@ import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { CheckboxGroupContext } from './CheckboxContext.js';
 
-const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state: stateProp = "default", orientation = "vertical", label, description, error, errorMessage, required, className, children, ...props }, ref) => {
+    // Prefer errorMessage; fall back to deprecated error prop
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
+    // If error (deprecated) is provided and state not explicitly set to something else,
+    // implicitly treat the group as invalid
+    const state = resolvedError && stateProp === "default" ? "invalid" : stateProp;
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `checkbox-group-${autoId}`;
     const labelId = `${autoId}-label`;
@@ -31,9 +36,9 @@ const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defau
         size,
         state,
     }), [groupName, currentValue, size, state]);
-    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
-                        checkboxTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error })) : (error))] }) }));
+    const labelState = state === "invalid" ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": resolvedError ? true : undefined, "aria-errormessage": resolvedError ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), resolvedError && (typeof resolvedError === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: resolvedError })) : (resolvedError))] }) }));
 });
 CheckboxGroup.displayName = "Checkbox.Group";
 

package/dist/components/forms/ColorPicker/ColorPicker.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import React__default, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { colorPickerTheme } from './ColorPicker.theme.js';
@@ -31,7 +31,10 @@ const DEFAULT_GRADIENT = {
  * ColorPicker Root Component
  * Follows Flikkui compound component pattern (similar to Accordion, Tabs, Popover)
  */
-const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, savedColors: savedColorsProp, onSavedColorsChange, defaultMode = 'solid', mode: modeProp, onModeChange, gradientValue: gradientProp, onGradientChange, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, children, ...props }, ref) => {
+const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, savedColors: savedColorsProp, onSavedColorsChange, defaultMode = 'solid', mode: modeProp, onModeChange, gradientValue: gradientProp, onGradientChange, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, id, children, ...props }, ref) => {
+    const generatedId = React__default.useId();
+    const componentId = id || generatedId;
+    const stopIdRef = useRef(0);
     // Parse initial color value
     const initialColor = useMemo(() => {
         const parsed = parseColor(value || defaultValue);
@@ -71,7 +74,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
     }, [gradient, setGradient]);
     const addGradientStop = useCallback((position) => {
         const newStop = {
-            id: `stop-${Date.now()}`,
+            id: `stop-${++stopIdRef.current}`,
             color: formatHex(color.h, color.s, color.l),
             position: Math.round(position),
         };
@@ -252,7 +255,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         addSavedColor,
         removeSavedColor,
     ]);
-    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
+    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: componentId, required: required, state: state, children: label })) : (label)), children, helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${componentId}-helper`, className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText })) : (helperText))] }) }));
 });
 ColorPickerRoot.displayName = 'ColorPicker';
 /**

package/dist/components/forms/ColorPicker/ColorPicker.types.d.ts

@@ -83,11 +83,11 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /**
      * Label for the color picker
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Helper text displayed below the picker
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /**
      * Whether the picker is required
      * @default false

package/dist/components/forms/ColorPicker/ColorPickerBody.js

@@ -66,9 +66,11 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
                     damping: 30,
                 }, "data-state": isOpen ? 'open' : 'closed', ...domProps, children: children })) }));
     // Use portal if specified (same as Dropdown)
-    return portal && isClient
-        ? createPortal(content, document.body)
-        : content;
+    if (portal) {
+        const target = isClient ? document.body : null;
+        return target ? createPortal(content, target) : null;
+    }
+    return content;
 };
 ColorPickerBody.displayName = 'ColorPicker.Body';
 

package/dist/components/forms/ColorPicker/ColorPickerEyeDropper.js

@@ -1,19 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { EyeDropperIcon } from '@heroicons/react/20/solid';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
 import { parseColor } from './colorUtils.js';
 
-// Check if browser supports EyeDropper API
-const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
 /**
  * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
  * Uses browser EyeDropper API (if available)
  */
 const ColorPickerEyeDropper = ({ className, ...props }) => {
     const context = useContext(ColorPickerContext);
+    // Check if browser supports EyeDropper API (inside component to avoid SSR module-caching issues)
+    const supportsEyeDropper = useMemo(() => typeof window !== 'undefined' && 'EyeDropper' in window, []);
     if (!context) {
         throw new Error('ColorPickerEyeDropper must be used within a ColorPicker');
     }

package/dist/components/forms/ColorPicker/ColorPickerGradient.js

@@ -113,14 +113,14 @@ const ColorPickerGradient = ({ className, ...props }) => {
         setDragStopId(null);
     }, []);
     useEffect(() => {
-        if (dragStopId) {
-            window.addEventListener('pointermove', handlePointerMove);
-            window.addEventListener('pointerup', handlePointerUp);
-            return () => {
-                window.removeEventListener('pointermove', handlePointerMove);
-                window.removeEventListener('pointerup', handlePointerUp);
-            };
-        }
+        if (!dragStopId)
+            return; // no listeners to add; no cleanup needed
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+        };
     }, [dragStopId, handlePointerMove, handlePointerUp]);
     // --- Selected stop color input editing ---
     const [colorInput, setColorInput] = useState((_c = selectedStop === null || selectedStop === void 0 ? void 0 : selectedStop.color) !== null && _c !== void 0 ? _c : '');

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -20,7 +20,7 @@ const ColorPickerInput = ({ className, ...props }) => {
         if (!isInvalid) {
             setInputValue(getFormattedValue());
         }
-    }, [color, format]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [color, format, getFormattedValue, isInvalid]);
     const handleCopy = async () => {
         try {
             await navigator.clipboard.writeText(getFormattedValue());

package/dist/components/forms/ColorPicker/index.d.ts

@@ -3,7 +3,7 @@
  * Compound component following Flikkui patterns
  */
 export { ColorPicker } from './ColorPicker';
-export { useColorPicker, ColorPickerContext } from './ColorPickerContext';
+export { useColorPicker } from './ColorPickerContext';
 export { ColorPickerTrigger } from './ColorPickerTrigger';
 export { ColorPickerBody } from './ColorPickerBody';
 export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';

package/dist/components/forms/Combobox/Combobox.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useId, useRef, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
@@ -11,43 +11,16 @@ import { cn } from '../../../utils/cn.js';
 import { SelectProvider, useSelectContext } from '../Select/Select.js';
 import '../Select/Select.theme.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 import { useSelectState } from '../Select/useSelectState.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = React__default.useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * Default filter function for options
  */
 const defaultFilterFn = (option, inputValue) => {
     return option.label.toLowerCase().includes(inputValue.toLowerCase());
 };
-const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offset, emptyMessage, className, }) => {
+const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offset, emptyMessage, className, listboxId, comboboxId, }) => {
     var _a;
     const { filteredOptions, highlightedIndex, setHighlightedIndex, selectedValue, selectOption, optionsRef, theme, } = useSelectContext();
     const isDarkMode = useDarkMode();
@@ -105,7 +78,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
     const disabledOptionStyle = theme.disabledOptionStyle || comboboxTheme.disabledOptionStyle;
     const createOptionStyleTheme = theme.createOptionStyle || comboboxTheme.createOptionStyle;
     const emptyMessageStyle = comboboxTheme.emptyMessageStyle;
-    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, role: "listbox", className: cn(dropdownStyle, className), style: {
+    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, id: listboxId, role: "listbox", className: cn(dropdownStyle, className), style: {
                 ...cssVariables,
                 overscrollBehavior: "contain",
                 ...(portal
@@ -115,17 +88,17 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
                         width: `${position.width}px`,
                     }
                     : {}),
-            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: filteredOptions.length === 0 ? (jsx("div", { className: emptyMessageStyle, children: emptyMessage })) : (filteredOptions.map((option, index) => {
-                const isSelected = option.value === selectedValue;
-                const isHighlighted = index === highlightedIndex;
-                const isCreateOption = option.id === "__create__";
-                return (jsx("div", { role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(optionStyle, isSelected && selectedOptionStyle, isHighlighted && highlightedOptionStyle, option.disabled && disabledOptionStyle, isCreateOption && createOptionStyleTheme), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
-                        if (!option.disabled) {
-                            selectOption(option.value, isCreateOption);
-                            onClose();
-                        }
-                    }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
-            })) })) }));
+            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: filteredOptions.length === 0 ? (jsx("div", { className: emptyMessageStyle, children: emptyMessage })) : (jsxs(Fragment, { children: [(filteredOptions.length > 100 ? filteredOptions.slice(0, 100) : filteredOptions).map((option, index) => {
+                        const isSelected = option.value === selectedValue;
+                        const isHighlighted = index === highlightedIndex;
+                        const isCreateOption = option.id === "__create__";
+                        return (jsx("div", { id: comboboxId ? `${comboboxId}-option-${option.id}` : undefined, role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(optionStyle, isSelected && selectedOptionStyle, isHighlighted && highlightedOptionStyle, option.disabled && disabledOptionStyle, isCreateOption && createOptionStyleTheme), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
+                                if (!option.disabled) {
+                                    selectOption(option.value, isCreateOption);
+                                    onClose();
+                                }
+                            }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
+                    }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] })) })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
@@ -153,7 +126,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
  * />
  * ```
  */
-const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", label, helperText, size = "md", state = "default", clearable = true, iconStart, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No results found", creatable = false, onCreateOption, createLabel, required = false, name, className, wrapperClassName, inputClassName, dropdownClassName, theme: themeOverrides, portal = true, placement = "bottom-start", offset = 8, id, ...props }, ref) => {
+const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", label, helperText, size = "md", state = "default", clearable = true, iconStart, iconEnd, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No results found", creatable = false, onCreateOption, createLabel, required = false, name, className, wrapperClassName, inputClassName, dropdownClassName, theme: themeOverrides, portal = true, placement = "bottom-start", offset = 8, id, ...props }, ref) => {
     var _a;
     // Merge theme
     const theme = React__default.useMemo(() => ({ ...comboboxTheme, ...(themeOverrides || {}) }), [themeOverrides]);
@@ -385,17 +358,19 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
     const showClearButton = clearable && value !== undefined && !isDisabled;
     // Icon padding
     const hasLeftIcon = Boolean(iconStart);
+    const hasRightIcon = Boolean(iconEnd);
     const iconStartPadding = hasLeftIcon ? theme.iconPadding.left : "";
+    const iconEndPadding = hasRightIcon ? theme.iconPadding.right : "";
     // Create a modified selectState for the provider with our custom filtered options
     const modifiedSelectState = React__default.useMemo(() => ({
         ...selectState,
         filteredOptions: customFilteredOptions,
         selectOption: handleSelectOption,
     }), [selectState, customFilteredOptions, handleSelectOption]);
-    return (jsx(SelectProvider, { selectState: modifiedSelectState, size: size, componentState: state, theme: theme, searchable: true, enableTypeahead: false, children: jsxs("div", { ref: ref, className: cn("relative", containerClasses, stateClass, wrapperClassName), ...props, children: [label && (jsx(FormLabel, { htmlFor: comboboxId, required: required, children: label })), jsxs("div", { ref: wrapperRef, className: theme.wrapperStyle, children: [jsx("div", { className: cn(inputGroupClasses, stateClasses, className), children: jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: comboboxId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 &&
+    return (jsx(SelectProvider, { selectState: modifiedSelectState, size: size, componentState: state, theme: theme, searchable: true, enableTypeahead: false, children: jsxs("div", { ref: ref, className: cn("relative", containerClasses, stateClass, wrapperClassName), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: comboboxId, state: state, required: required, children: label })) : (label)), jsxs("div", { ref: wrapperRef, className: theme.wrapperStyle, children: [jsx("div", { className: cn(inputGroupClasses, stateClasses, className), children: jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: comboboxId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 &&
                                             customFilteredOptions[highlightedIndex]
                                             ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
-                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(XMarkIcon, { className: theme.clearIconStyle }) }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName })] }), helperText && (jsx("p", { className: cn(helperTextClasses, helperTextStateClasses), children: helperText })), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
+                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, "aria-describedby": helperText ? `${comboboxId}-helper` : undefined, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, (hasRightIcon || showClearButton) && iconEndPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(XMarkIcon, { className: theme.clearIconStyle }) })), hasRightIcon && !showClearButton && (jsx("div", { className: theme.iconEndStyle, children: iconEnd }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, listboxId: listboxId, comboboxId: comboboxId })] }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${comboboxId}-helper`, className: cn(helperTextClasses, helperTextStateClasses), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
 };
 const ComboboxForwarded = React__default.forwardRef(ComboboxInner);
 ComboboxForwarded.displayName = "Combobox";

package/dist/components/forms/Combobox/Combobox.types.d.ts

@@ -33,9 +33,9 @@ export interface ComboboxProps<T = string> extends Omit<React.HTMLAttributes<HTM
     /** Placeholder text when no value is selected */
     placeholder?: string;
     /** Label text displayed above the input */
-    label?: string;
+    label?: React.ReactNode;
     /** Helper text displayed below the input */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Size variant */
     size?: ComboboxSize;
     /** State variant (controls styling) */
@@ -44,6 +44,8 @@ export interface ComboboxProps<T = string> extends Omit<React.HTMLAttributes<HTM
     clearable?: boolean;
     /** Icon displayed at the start of the input */
     iconStart?: React.ReactNode;
+    /** Icon displayed at the end of the input */
+    iconEnd?: React.ReactNode;
     /** Whether to open dropdown on focus (default: true) */
     openOnFocus?: boolean;
     /** Custom filter function */

package/dist/components/forms/CronInput/CronInput.js

@@ -13,9 +13,12 @@ const FieldSelect = ({ label, value, options, onChange, disabled, size = "md", c
 // ============================================================================
 // Main CronInput Component
 // ============================================================================
-const CronInput = React__default.forwardRef(({ value: controlledValue, defaultValue = "* * * * *", onChange, showPresets = true, showDescription = true, showNextRuns = true, nextRunCount = 3, size = "md", mode = "both", className, theme: themeOverrides, disabled = false, label, ...props }, ref) => {
+const CronInput = React__default.forwardRef(({ value: controlledValue, defaultValue = "* * * * *", onChange, showPresets = true, showDescription = true, showNextRuns = true, nextRunCount = 3, size = "md", mode = "both", className, theme: themeOverrides, state = "default", disabled = false, label, helperText, ...props }, ref) => {
     // Unique ID for accessibility
     const generatedId = useId();
+    // Derive disabled/invalid from `state` prop (with deprecated `disabled` as fallback)
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
     // Controlled vs uncontrolled state
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue);
@@ -88,10 +91,10 @@ const CronInput = React__default.forwardRef(({ value: controlledValue, defaultVa
     }, [rawInput, cronValue, updateValue]);
     // Handle preset click
     const handlePresetClick = useCallback((presetValue) => {
-        if (disabled)
+        if (isDisabled)
             return;
         updateValue(presetValue);
-    }, [disabled, updateValue]);
+    }, [isDisabled, updateValue]);
     // Handle Enter key in raw input
     const handleRawKeyDown = useCallback((e) => {
         if (e.key === "Enter") {
@@ -100,7 +103,10 @@ const CronInput = React__default.forwardRef(({ value: controlledValue, defaultVa
     }, [handleRawInputBlur]);
     const showVisual = mode === "visual" || (mode === "both" && activeMode === "visual");
     const showRaw = mode === "raw" || (mode === "both" && activeMode === "raw");
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: disabled ? "disabled" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: disabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: theme.builderStyle, children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: disabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: disabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size]), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": !validateCron(rawInput), spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-sm px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] }))] }));
+    const helperId = `${generatedId}-helper`;
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: isDisabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: cn(theme.builderStyle, isInvalid && "ring-1 ring-[var(--color-danger)] rounded-[var(--form-radius)]"), children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: isDisabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: isDisabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size], isInvalid && "border-[var(--color-danger)] focus:border-[var(--color-danger)] focus:ring-[var(--color-danger)]"), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": isInvalid || !validateCron(rawInput), "aria-describedby": helperText ? helperId : undefined, spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-sm px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] })), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
+                    ? "text-[var(--color-danger)]"
+                    : "text-[var(--color-text-muted)]"), children: helperText }))] }));
 });
 CronInput.displayName = "CronInput";
 

package/dist/components/forms/CronInput/CronInput.types.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+export type CronInputState = "default" | "disabled" | "invalid";
 /**
  * CronInput component props
  * A visual cron expression builder that outputs standard cron syntax
@@ -26,10 +27,20 @@ export interface CronInputProps extends Omit<React.HTMLAttributes<HTMLDivElement
     className?: string;
     /** Theme overrides for sub-component styling */
     theme?: CronInputThemeOverrides;
-    /** Whether the input is disabled */
+    /**
+     * Validation/interaction state
+     * @default "default"
+     */
+    state?: CronInputState;
+    /**
+     * Whether the input is disabled
+     * @deprecated Use `state="disabled"` instead
+     */
     disabled?: boolean;
     /** Label text for the component */
     label?: string;
+    /** Helper text displayed below the component */
+    helperText?: React.ReactNode;
 }
 export type CronInputSize = "sm" | "md" | "lg";
 export type CronInputMode = "visual" | "raw" | "both";

package/dist/components/forms/DatePicker/DatePicker.js

@@ -23,7 +23,7 @@ const formatDate = (date, formatString, options = {
         return formatDateCustom(date, formatString);
     }
     // Otherwise use the Intl API
-    return date.toLocaleDateString(undefined, options);
+    return date.toLocaleDateString('en-US', options);
 };
 /**
  * Format date range for display
@@ -120,7 +120,7 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
             theme,
             triggerRef,
             contentRef,
-        }), [mode, isOpen, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, yearRange, handleDateSelect, handleRangeSelect, size, state, theme]), children: jsxs("div", { ref: ref, className: cn(containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: datePickerId, required: required, children: label })), jsx(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle), children: displayValue }) }), jsx(DatePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, children: children }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && mode === "single" && selectedValue instanceof Date && (jsx("input", { type: "hidden", name: name, value: selectedValue.toISOString() })), name &&
+        }), [mode, isOpen, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, yearRange, handleDateSelect, handleRangeSelect, size, state, theme]), children: jsxs("div", { ref: ref, className: cn(containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: datePickerId, state: state, required: required, children: label })) : (label)), jsx(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-invalid": state === 'invalid' || undefined, "aria-describedby": helperText ? `${datePickerId}-helper` : undefined, children: jsx("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle), children: displayValue }) }), jsx(DatePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, children: children }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${datePickerId}-helper`, className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && mode === "single" && selectedValue instanceof Date && (jsx("input", { type: "hidden", name: name, value: selectedValue.toISOString() })), name &&
                     mode === "range" &&
                     selectedValue &&
                     typeof selectedValue === "object" &&

package/dist/components/forms/DatePicker/DatePicker.types.d.ts

@@ -49,9 +49,9 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** Whether the field is required */
     required?: boolean;
     /** Label for the field */
-    label?: string;
+    label?: React.ReactNode;
     /** Helper text below the field */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Callback fired when a date is selected - type depends on mode */
     onChange?: (value: Date | DateRange | null) => void;
     /** Array of preset date ranges (only for range mode) */
@@ -110,6 +110,8 @@ export interface DatePickerTriggerProps {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
 }
 /**
  * DatePicker body props (calendar dropdown content)

package/dist/components/forms/DatePicker/DatePickerBody.js

@@ -12,36 +12,8 @@ import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
 import { createDropdownAnimations } from './DatePicker.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        // Observe class changes on html and body
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * DatePicker Body Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -8,7 +8,7 @@ import { DatePickerContext } from './DatePicker.js';
  * DatePicker Trigger Component - styled like form input
  * Displays selected date or placeholder text
  */
-const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
     var _a, _b, _c, _d;
     const context = useContext(DatePickerContext);
     if (!context) {
@@ -28,7 +28,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
         ? focusStateStyle ||
             "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };
 
 export { DatePickerTrigger };

package/dist/components/forms/DateRangePicker/DateRangePicker.js

@@ -21,7 +21,7 @@ const formatDate = (date, formatString, options = {
     if (formatString) {
         return formatDateCustom(date, formatString);
     }
-    return date.toLocaleDateString(undefined, options);
+    return date.toLocaleDateString('en-US', options);
 };
 /**
  * Format date range for display
@@ -96,9 +96,9 @@ const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "
             size,
             state,
             theme,
-        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (jsx(FormLabel, { htmlFor: pickerId, required: required, children: label })), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
+        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: pickerId, state: state, required: required, children: label })) : (label)), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-invalid": state === 'invalid' || undefined, "aria-describedby": helperText ? `${pickerId}-helper` : undefined, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
                             ? theme.valueTextStyle
-                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets }), helperText && (jsx("p", { className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: helperText })), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
+                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${pickerId}-helper`, className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: helperText })) : (helperText)), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
 });
 DateRangePickerComponent.displayName = "DateRangePicker";
 // Compound component