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

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

@@ -44,9 +44,9 @@ export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivE
     /** 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 range is applied */
     onChange?: (range: DateRange | null) => void;
     /** Array of preset date ranges */
@@ -103,6 +103,8 @@ export interface DateRangePickerTriggerProps {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
 }
 /**
  * DateRangePicker body props

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

@@ -13,35 +13,8 @@ import { formatDateCustom } from '../../../utils/dateUtils.js';
 import { createDropdownAnimations } from '../DatePicker/DatePicker.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useMediaQuery } from '../../../hooks/useMediaQuery.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();
-        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;
-};
 /**
  * DateRangePicker Body Component — dual calendars + presets sidebar + footer
  */

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

@@ -7,7 +7,7 @@ import { DateRangePickerContext } from './DateRangePicker.js';
 /**
  * DateRangePicker Trigger Component — styled like form input
  */
-const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+const DateRangePickerTrigger = ({ 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(DateRangePickerContext);
     if (!context) {
@@ -26,7 +26,7 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
         ? 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 date range picker", 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 date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };
 
 export { DateRangePickerTrigger };

package/dist/components/forms/FileUpload/FileUpload.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useRef, useState, useCallback } from 'react';
+import React__default, { useMemo, useId, useRef, useState, useCallback } from 'react';
 import { fileUploadTheme } from './FileUpload.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
@@ -89,6 +89,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews
@@ -110,11 +111,14 @@ import '../../core/Icon/Icon.js';
  *   onUpload={(files) => console.log(files)}
  * />
  */
-const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, disabled = false, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
+const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, state = "default", disabled = false, label, errorMessage, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
     // Merge custom theme with default theme
     const theme = useMemo(() => customTheme
         ? { ...fileUploadTheme, ...customTheme }
         : fileUploadTheme, [customTheme]);
+    const generatedId = useId();
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
     const inputRef = useRef(null);
     const [isDragActive, setIsDragActive] = useState(false);
     const [selectedFiles, setSelectedFiles] = useState([]);
@@ -229,9 +233,9 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!disabled)
+        if (!isDisabled)
             setIsDragActive(true);
-    }, [disabled]);
+    }, [isDisabled]);
     const handleDragLeave = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -245,18 +249,18 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         e.preventDefault();
         e.stopPropagation();
         setIsDragActive(false);
-        if (disabled)
+        if (isDisabled)
             return;
         const files = e.dataTransfer.files;
         handleFiles(files);
-    }, [disabled, handleFiles]);
+    }, [isDisabled, handleFiles]);
     // Handle click to select files
     const handleClick = useCallback(() => {
         var _a;
-        if (!disabled) {
+        if (!isDisabled) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
-    }, [disabled]);
+    }, [isDisabled]);
     // Handle input change
     const handleInputChange = useCallback((e) => {
         handleFiles(e.target.files);
@@ -278,12 +282,12 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
     };
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [jsx("input", { ref: inputRef, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: disabled, className: "sr-only", "aria-label": "File upload" }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, disabled && theme.dropzoneDisabledStyle), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-input`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })) : (label)), jsx("input", { ref: inputRef, id: `${generatedId}-input`, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: isDisabled, className: "sr-only", "aria-label": "File upload" }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, isDisabled && theme.dropzoneDisabledStyle, isInvalid && "border-[var(--color-danger)]"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleClick();
                     }
-                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-base font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
+                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-base font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: description }))] }) }), errorMessage && (jsx("div", { className: "text-sm mt-1 text-[var(--color-danger)]", children: errorMessage })), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
                     const previewUrl = previewUrls.get(file);
                     const isImage = file.type.startsWith("image/");
                     return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-sm", children: file.name }), jsx("span", { className: "text-sm text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {

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

@@ -1,3 +1,5 @@
+import React from "react";
+export type FileUploadState = "default" | "disabled" | "invalid";
 /**
  * FileUpload component props
  * Supports both click-to-upload and drag-and-drop
@@ -22,11 +24,24 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * Maximum number of files (when multiple is true)
      */
     maxFiles?: number;
+    /**
+     * Validation/interaction state
+     * @default "default"
+     */
+    state?: FileUploadState;
     /**
      * Whether the upload area is disabled
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Field label rendered above the dropzone
+     */
+    label?: React.ReactNode;
+    /**
+     * Validation error message rendered below the dropzone (styled in danger color)
+     */
+    errorMessage?: React.ReactNode;
     /**
      * Callback when files are selected/dropped
      */

package/dist/components/forms/FormLabel/FormLabel.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { formLabelTheme } from './FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -7,7 +7,7 @@ import { cn } from '../../../utils/cn.js';
  * FormLabel component for providing consistent labeling for form elements
  */
 const FormLabel = React__default.forwardRef(({ htmlFor, children, className, required = false, state = 'default', ...props }, ref) => {
-    return (jsxs("label", { ref: ref, htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className), ...props, children: [children, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] }));
+    return (jsxs("label", { ref: ref, htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className), ...props, children: [children, required && (jsxs(Fragment, { children: [jsx("span", { "aria-hidden": "true", className: formLabelTheme.requiredIndicatorStyle, children: "*" }), jsx("span", { className: "sr-only", children: "(required)" })] }))] }));
 });
 FormLabel.displayName = "FormLabel";
 

package/dist/components/forms/Input/Input.js

@@ -62,12 +62,12 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
     const colorClass = strengthConfig.color || "text-neutral-500";
     const label = customLabel || strengthConfig.label || "Password";
     const activeDots = getActiveDots(strength);
-    return (jsxs("div", { className: `${containerStyle} ${indicatorClassName} ${colorClass}`, children: [jsx("div", { className: labelStyle, children: label }), [...Array(5)].map((_, index) => (jsx("div", { className: `${dotStyle} ${index < activeDots ? dotActiveStyle : dotInactiveStyle}` }, index)))] }));
+    return (jsxs("div", { className: `${containerStyle} ${indicatorClassName} ${colorClass}`, children: [jsx("div", { className: labelStyle, children: label }), [...Array(5)].map((_, index) => (jsx("div", { className: `${dotStyle} ${index < activeDots ? dotActiveStyle : dotInactiveStyle}` }, `dot-${index}`)))] }));
 };
 // ============================================================================
 // Main Input Component
 // ============================================================================
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onValueChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -201,6 +201,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
             if (onChange) {
                 onChange(event);
             }
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue.toString());
         }
     };
     // Handle input change
@@ -240,6 +241,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         if (onChange) {
             onChange(e);
         }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     };
     // Theme classes - using simplified approach with design tokens
     const wrapperClasses = inputTheme.wrapperStyle;
@@ -277,7 +279,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: helperText })) : (helperText))] }));
 });
 Input.displayName = "Input";
 

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

@@ -69,6 +69,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * @default false
      */
     darkMode?: boolean;
+    /** Callback fired with the raw string value on every change — convenience alternative to reading e.target.value from onChange */
+    onValueChange?: (value: string) => void;
 }
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputState = 'default' | 'disabled' | 'invalid';

package/dist/components/forms/InputAddress/InputAddress.d.ts

@@ -16,4 +16,4 @@ import { InputAddressProps } from "./InputAddress.types";
  * />
  * ```
  */
-export declare const InputAddress: React.ForwardRefExoticComponent<InputAddressProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputAddress: React.ForwardRefExoticComponent<InputAddressProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/forms/InputAddress/InputAddress.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useCallback } from 'react';
+import React__default, { useMemo, useState, useCallback, useId } from 'react';
 import { Input } from '../Input/Input.js';
-import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputAddressTheme } from './InputAddress.theme.js';
 
 /**
@@ -21,6 +20,7 @@ import { inputAddressTheme } from './InputAddress.theme.js';
  * ```
  */
 const InputAddress = React__default.forwardRef(({ availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
+    var _a;
     // Merge default theme with provided theme using useMemo for performance
     const mergedTheme = useMemo(() => ({
         ...inputAddressTheme,
@@ -56,13 +56,12 @@ const InputAddress = React__default.forwardRef(({ availableCountries = [], defau
         return availableCountries;
     }, [availableCountries]);
     // Create unique IDs for accessibility
-    useMemo(() => `address-fieldset-${Math.random().toString(36).substring(2, 9)}`, []);
-    useMemo(() => `address-legend-${Math.random().toString(36).substring(2, 9)}`, []);
-    const streetId = useMemo(() => `street-${Math.random().toString(36).substring(2, 9)}`, []);
-    const stateId = useMemo(() => `state-${Math.random().toString(36).substring(2, 9)}`, []);
-    const countryId = useMemo(() => `country-${Math.random().toString(36).substring(2, 9)}`, []);
-    const postalCodeId = useMemo(() => `postal-code-${Math.random().toString(36).substring(2, 9)}`, []);
-    return (jsxs("div", { ref: ref, className: `w-full ${className}`, "data-testid": "input-address-fieldset", children: [jsx(FormLabel, { htmlFor: streetId, className: mergedTheme.legendStyles, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetInputProps }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: "rounded-none", ...stateInputProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10", children: [jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10`, "data-testid": "input-address-country", children: jsx(Input, { id: countryId, type: "text", value: country, onChange: handleCountryChange, placeholder: countryLabel, "aria-label": countryLabel, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none", ...countryInputProps }) }), jsx("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full relative focus-within:z-10`, "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: "sm:rounded-br-md rounded-t-none rounded-tl-none rounded-bl-md sm:rounded-bl-none", ...postalCodeInputProps }) })] })] })] }));
+    const baseId = useId();
+    const streetId = `${baseId}-street`;
+    const stateId = `${baseId}-state`;
+    const countryId = `${baseId}-country`;
+    const postalCodeId = `${baseId}-postal-code`;
+    return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${className}`, "data-testid": "input-address-fieldset", children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetInputProps }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: "rounded-none", ...stateInputProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10", children: [jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10`, "data-testid": "input-address-country", children: jsx(Input, { id: countryId, type: "text", value: country, onChange: handleCountryChange, placeholder: countryLabel, "aria-label": countryLabel, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none", ...countryInputProps }) }), jsx("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full relative focus-within:z-10`, "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: "sm:rounded-br-md rounded-t-none rounded-tl-none rounded-bl-md sm:rounded-bl-none", ...postalCodeInputProps }) })] })] })] }));
 });
 InputAddress.displayName = "InputAddress";
 

package/dist/components/forms/InputCounter/InputCounter.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useEffect, useCallback } from 'react';
+import React__default, { useId, useMemo, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { inputCounterTheme } from './InputCounter.theme.js';
 import { Button } from '../../core/Button/Button.js';
 import { SlidingNumber } from '../../core/SlidingNumber/SlidingNumber.js';
 import { cn } from '../../../utils/cn.js';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**
  * InputCounter component with animated number display
@@ -33,9 +34,12 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
  * );
  * ```
  */
-const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, state = "default", label, helperText, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
+    const generatedId = useId();
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
     // Auto-detect decimal places from step if not explicitly provided
     const autoDecimalPlaces = useMemo(() => {
         if (decimalPlaces !== undefined)
@@ -68,12 +72,12 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
             needsUpdate = true;
         }
         if (needsUpdate) {
-            onChange(clampedValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
         }
     }, [min, max, value, onChange]);
     // Handle increment
     const handleIncrement = useCallback(() => {
-        if (disabled)
+        if (isDisabled)
             return;
         const newValue = value + step;
         // Round to avoid floating point precision errors
@@ -86,11 +90,11 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
             }
             return;
         }
-        onChange(roundedValue);
-    }, [value, step, max, disabled, onChange]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
+    }, [value, step, max, isDisabled, onChange]);
     // Handle decrement
     const handleDecrement = useCallback(() => {
-        if (disabled)
+        if (isDisabled)
             return;
         const newValue = value - step;
         // Round to avoid floating point precision errors
@@ -103,12 +107,12 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
             }
             return;
         }
-        onChange(roundedValue);
-    }, [value, step, min, disabled, onChange]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
+    }, [value, step, min, isDisabled, onChange]);
     // Keyboard support
     useEffect(() => {
         const handleKeyDown = (event) => {
-            if (disabled)
+            if (isDisabled)
                 return;
             // Check if the counter is focused
             const target = event.target;
@@ -127,20 +131,20 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
                     event.preventDefault();
                     const pageUpValue = value + step * 10;
                     if (max === undefined || pageUpValue <= max) {
-                        onChange(pageUpValue);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(pageUpValue);
                     }
                     else if (max !== undefined) {
-                        onChange(max);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(max);
                     }
                     break;
                 case "PageDown":
                     event.preventDefault();
                     const pageDownValue = value - step * 10;
                     if (min === undefined || pageDownValue >= min) {
-                        onChange(pageDownValue);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(pageDownValue);
                     }
                     else if (min !== undefined) {
-                        onChange(min);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(min);
                     }
                     break;
             }
@@ -152,15 +156,18 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
         step,
         min,
         max,
-        disabled,
+        isDisabled,
         onChange,
         handleIncrement,
         handleDecrement,
     ]);
     // Check if buttons should be disabled
-    const canDecrement = !disabled && (min === undefined || value > min);
-    const canIncrement = !disabled && (max === undefined || value < max);
-    return (jsxs(motion.div, { ref: ref, "data-counter": "true", layout: true, transition: shouldDisableAnimations ? undefined : transition, className: cn(mergedTheme.baseStyle, className), role: "spinbutton", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, children: [jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(MinusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) }), jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) })] }));
+    const canDecrement = !isDisabled && (min === undefined || value > min);
+    const canIncrement = !isDisabled && (max === undefined || value < max);
+    const helperId = `${generatedId}-helper`;
+    return (jsxs("div", { className: "flex flex-col", children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-counter`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: "mb-1.5", children: label })) : (jsx("div", { className: "mb-1.5", children: label }))), jsxs(motion.div, { ref: ref, id: `${generatedId}-counter`, "data-counter": "true", layout: true, transition: shouldDisableAnimations ? undefined : transition, className: cn(mergedTheme.baseStyle, isInvalid && "ring-1 ring-[var(--color-danger)]", className), role: "spinbutton", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, tabIndex: isDisabled ? -1 : 0, ...props, children: [jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(MinusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) }), jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) })] }), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
+                    ? "text-[var(--color-danger)]"
+                    : "text-[var(--color-text-muted)]"), children: helperText }))] }));
 });
 InputCounter.displayName = "InputCounter";
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Transition } from 'motion/react';
 import { ButtonProps } from '../../core/Button/Button.types';
+export type InputCounterState = 'default' | 'disabled' | 'invalid';
 /**
  * InputCounter component props
  * @property {number} value - Current counter value (controlled)
@@ -18,7 +19,13 @@ export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /** Current counter value (controlled) */
     value: number;
     /** Callback when value changes */
-    onChange: (value: number) => void;
+    onChange?: (value: number) => void;
+    /** Validation/interaction state */
+    state?: InputCounterState;
+    /** Field label rendered above the counter */
+    label?: React.ReactNode;
+    /** Helper text rendered below the counter */
+    helperText?: React.ReactNode;
     /** Minimum allowed value (optional) */
     min?: number;
     /** Maximum allowed value (optional) */

package/dist/components/forms/InputCreditCard/InputCreditCard.d.ts

@@ -16,4 +16,4 @@ import { InputCreditCardProps } from "./InputCreditCard.types";
  * />
  * ```
  */
-export declare const InputCreditCard: React.ForwardRefExoticComponent<InputCreditCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputCreditCard: React.ForwardRefExoticComponent<InputCreditCardProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/forms/InputCreditCard/InputCreditCard.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useCallback } from 'react';
+import React__default, { useState, useEffect, useMemo, useCallback, useId } from 'react';
 import { Input } from '../Input/Input.js';
-import { FormLabel } from '../FormLabel/FormLabel.js';
 import { InputCreditCardTheme } from './InputCreditCard.theme.js';
+import { formsBaseTheme } from '../forms.theme.js';
 
 /**
  * InputCreditCard component for collecting credit card information
@@ -20,7 +20,17 @@ import { InputCreditCardTheme } from './InputCreditCard.theme.js';
  * />
  * ```
  */
-const InputCreditCard = React__default.forwardRef(({ onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }, ref) => {
+const InputCreditCard = React__default.forwardRef(({ state = 'default', error, onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }, ref) => {
+    var _a;
+    const isDisabled = state === 'disabled';
+    // Clear the error visually as soon as the user starts re-entering after an error.
+    // Resets when the parent sets state back to 'invalid' (e.g. on re-submit).
+    const [isDirtyAfterError, setIsDirtyAfterError] = useState(false);
+    useEffect(() => {
+        if (state === 'invalid')
+            setIsDirtyAfterError(false);
+    }, [state]);
+    const isInvalid = state === 'invalid' && !isDirtyAfterError;
     // Merge the default theme with the provided theme overrides
     const mergedTheme = useMemo(() => ({
         ...InputCreditCardTheme,
@@ -43,18 +53,21 @@ const InputCreditCard = React__default.forwardRef(({ onCardNumberChange, onExpir
     const handleCardNumberChange = useCallback((e) => {
         const newCardNumber = e.target.value;
         setCardNumber(newCardNumber);
+        setIsDirtyAfterError(true);
         onCardNumberChange === null || onCardNumberChange === void 0 ? void 0 : onCardNumberChange(newCardNumber);
     }, [onCardNumberChange]);
     // Handle expiry date change
     const handleExpiryDateChange = useCallback((e) => {
         const newExpiryDate = e.target.value;
         setExpiryDate(newExpiryDate);
+        setIsDirtyAfterError(true);
         onExpiryDateChange === null || onExpiryDateChange === void 0 ? void 0 : onExpiryDateChange(newExpiryDate);
     }, [onExpiryDateChange]);
     // Handle CVC change
     const handleCvcChange = useCallback((e) => {
         const newCvc = e.target.value;
         setCvc(newCvc);
+        setIsDirtyAfterError(true);
         onCvcChange === null || onCvcChange === void 0 ? void 0 : onCvcChange(newCvc);
     }, [onCvcChange]);
     // Handle focus states
@@ -64,12 +77,17 @@ const InputCreditCard = React__default.forwardRef(({ onCardNumberChange, onExpir
     const handleBlur = useCallback(() => {
         setFocused(null);
     }, []);
-    // Create unique IDs for accessibility
-    useMemo(() => `card-fieldset-${Math.random().toString(36).substring(2, 9)}`, []);
-    const cardNumberId = useMemo(() => `card-number-${Math.random().toString(36).substring(2, 9)}`, []);
-    const expiryDateId = useMemo(() => `expiry-date-${Math.random().toString(36).substring(2, 9)}`, []);
-    const cvcId = useMemo(() => `cvc-${Math.random().toString(36).substring(2, 9)}`, []);
-    return (jsxs("div", { ref: ref, className: `w-full ${className}`, "data-testid": "input-credit-card-fieldset", children: [jsx(FormLabel, { htmlFor: cardNumberId, className: mergedTheme.legendStyles, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-card-number", children: jsx(Input, { id: cardNumberId, type: "creditCard", value: cardNumber, onChange: handleCardNumberChange, placeholder: "Card Number", "aria-label": "card number", onFocus: () => handleFocus("cardNumber"), onBlur: handleBlur, inputGroupClassName: "rounded-b-none", ...cardNumberInputProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative", children: [jsx("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0`, "data-testid": "input-expiry-date relative focus-within:z-10", children: jsx(Input, { id: expiryDateId, type: "expiryDate", value: expiryDate, onChange: handleExpiryDateChange, placeholder: expiryDateLabel, "aria-label": expiryDateLabel, onFocus: () => handleFocus("expiryDate"), onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10", ...expiryDateInputProps }) }), jsx("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full`, "data-testid": "input-cvc relative focus-within:z-10", children: jsx(Input, { id: cvcId, type: "tel", maxLength: 3, pattern: "[0-9]*", inputMode: "numeric", value: cvc, onChange: handleCvcChange, placeholder: cvcLabel, "aria-label": cvcLabel, onFocus: () => handleFocus("cvc"), onBlur: handleBlur, inputGroupClassName: " sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10", ...cvcInputProps }) })] })] })] }));
+    const instanceId = useId();
+    const cardNumberId = `${instanceId}-card-number`;
+    const expiryDateId = `${instanceId}-expiry-date`;
+    const cvcId = `${instanceId}-cvc`;
+    const fieldState = isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default';
+    // Merge top-level state into each field's props; strip per-field helperText
+    // so only the consolidated error message is shown at the bottom.
+    const { helperText: _cn, ...cardProps } = { state: fieldState, ...cardNumberInputProps };
+    const { helperText: _ex, ...expiryProps } = { state: fieldState, ...expiryDateInputProps };
+    const { helperText: _cv, ...cvcProps } = { state: fieldState, ...cvcInputProps };
+    return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-credit-card-fieldset", children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-card-number", children: jsx(Input, { id: cardNumberId, type: "creditCard", value: cardNumber, onChange: handleCardNumberChange, placeholder: "Card Number", "aria-label": "card number", onFocus: () => handleFocus("cardNumber"), onBlur: handleBlur, inputGroupClassName: "rounded-b-none", ...cardProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative", children: [jsx("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0`, "data-testid": "input-expiry-date relative focus-within:z-10", children: jsx(Input, { id: expiryDateId, type: "expiryDate", value: expiryDate, onChange: handleExpiryDateChange, placeholder: expiryDateLabel, "aria-label": expiryDateLabel, onFocus: () => handleFocus("expiryDate"), onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10", ...expiryProps }) }), jsx("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full`, "data-testid": "input-cvc relative focus-within:z-10", children: jsx(Input, { id: cvcId, type: "tel", maxLength: 3, pattern: "[0-9]*", inputMode: "numeric", value: cvc, onChange: handleCvcChange, placeholder: cvcLabel, "aria-label": cvcLabel, onFocus: () => handleFocus("cvc"), onBlur: handleBlur, inputGroupClassName: " sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10", ...cvcProps }) })] })] }), error && (jsx("p", { className: formsBaseTheme.helperText, children: error }))] }));
 });
 InputCreditCard.displayName = "InputCreditCard";
 

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InputProps, InputTheme } from '../Input/Input.types';
 /**
  * InputCreditCard component props
@@ -10,6 +11,10 @@ import { InputProps, InputTheme } from '../Input/Input.types';
  * @property {InputCreditCardThemeOverrides} theme - Theme overrides for the credit card input
  */
 export interface InputCreditCardProps {
+    /** Visual/validation state of the entire card group */
+    state?: 'default' | 'disabled' | 'invalid';
+    /** Consolidated error message shown below all fields */
+    error?: React.ReactNode;
     /** Callback when card number changes */
     onCardNumberChange?: (cardNumber: string) => void;
     /** Callback when expiry date changes */