@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,9 +1,64 @@
+"use client";
 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 { Select } from '../Select/Select.js';
 import { inputAddressTheme } from './InputAddress.theme.js';
+import { formsBaseTheme } from '../forms.theme.js';
+import { cn } from '../../../utils/cn.js';
 
+/**
+ * Sensible default country list used when the consumer doesn't pass
+ * `availableCountries`. Exported so power users can extend/reorder it.
+ */
+const DEFAULT_COUNTRIES = [
+    "United States",
+    "Canada",
+    "United Kingdom",
+    "Australia",
+    "New Zealand",
+    "Ireland",
+    "France",
+    "Germany",
+    "Spain",
+    "Portugal",
+    "Italy",
+    "Netherlands",
+    "Belgium",
+    "Switzerland",
+    "Austria",
+    "Sweden",
+    "Norway",
+    "Denmark",
+    "Finland",
+    "Poland",
+    "Czechia",
+    "Greece",
+    "Mexico",
+    "Brazil",
+    "Argentina",
+    "Chile",
+    "Colombia",
+    "India",
+    "China",
+    "Japan",
+    "South Korea",
+    "Singapore",
+    "Hong Kong",
+    "Malaysia",
+    "Indonesia",
+    "Philippines",
+    "Thailand",
+    "Vietnam",
+    "United Arab Emirates",
+    "Saudi Arabia",
+    "Israel",
+    "Turkey",
+    "South Africa",
+    "Nigeria",
+    "Kenya",
+    "Egypt",
+];
 /**
  * InputAddress component for collecting address information
  * Displays a multi-field form for address entry with properly connected borders
@@ -20,7 +75,17 @@ 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) => {
+const InputAddress = React__default.forwardRef(({ state = 'default', errorMessage, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, 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 default theme with provided theme using useMemo for performance
     const mergedTheme = useMemo(() => ({
         ...inputAddressTheme,
@@ -37,33 +102,49 @@ const InputAddress = React__default.forwardRef(({ availableCountries = [], defau
     // State for country and postal code
     const [country, setCountry] = useState(defaultCountry);
     const [postalCode, setPostalCode] = useState("");
-    // Handle country change
-    const handleCountryChange = useCallback((e) => {
-        const newCountry = e.target.value;
+    // Handle country change (Select emits the value directly, not a DOM event)
+    const handleCountryChange = useCallback((newCountry) => {
         setCountry(newCountry);
+        setIsDirtyAfterError(true);
         onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(newCountry);
     }, [onCountryChange]);
     // Handle postal code change
     const handlePostalCodeChange = useCallback((e) => {
         const newPostalCode = e.target.value;
         setPostalCode(newPostalCode);
+        setIsDirtyAfterError(true);
         onPostalCodeChange === null || onPostalCodeChange === void 0 ? void 0 : onPostalCodeChange(newPostalCode);
     }, [onPostalCodeChange]);
-    // Filter available countries if array is provided
-    useMemo(() => {
-        if (availableCountries.length === 0)
-            return [];
-        return availableCountries;
-    }, [availableCountries]);
+    // Street/State are uncontrolled passthrough fields — wrap their onChange so editing them
+    // also clears the invalid overlay, then forward to any consumer-provided handler.
+    const markDirty = useCallback((handler) => (e) => {
+        setIsDirtyAfterError(true);
+        handler === null || handler === void 0 ? void 0 : handler(e);
+    }, []);
+    // Country Select options — fall back to the bundled list when none provided.
+    const countryOptions = useMemo(() => (availableCountries.length ? availableCountries : DEFAULT_COUNTRIES).map((c) => ({ id: c, label: c, value: c })), [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`;
+    const errorId = `${baseId}-error`;
+    // Children are NEVER given `invalid` — the single red perimeter overlay carries the error
+    // (see formsBaseTheme.groupInvalidOverlayStyle). Only disabled propagates to the fields.
+    const fieldState = isDisabled ? 'disabled' : 'default';
+    // Merge group state into each field's props; strip per-field helperText so only the
+    // consolidated message shows at the bottom.
+    const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, ...streetInputProps };
+    const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, ...stateInputProps };
+    const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, ...countryInputProps };
+    const { helperText: _pc, ...postalProps } = { state: fieldState, ...postalCodeInputProps };
+    return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-address-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && errorMessage ? errorId : undefined, 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: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover: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", ...streetProps, onChange: markDirty(_stOnChange) }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10 hover:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: "rounded-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10 hover:z-10", children: [jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-country", children: jsx(Select, { id: countryId, options: countryOptions, value: country, onChange: handleCountryChange, placeholder: countryLabel, searchable: true, searchPlaceholder: `Search ${countryLabel.toLowerCase()}`, disabled: isDisabled, 
+                                    // className lands on the Select trigger button (which carries the same
+                                    // inputGroup border/radius as Input's inputGroupClassName target), so the
+                                    // outer styling and the merged border seams are identical to the old Input.
+                                    className: cn("sm:rounded-bl-[var(--form-radius)] rounded-t-none sm:rounded-tr-none sm:rounded-br-none", _coClass), ...countryProps }) }), jsx("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full -mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)] relative focus-within:z-10 hover: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-[var(--form-radius)] rounded-t-none rounded-tl-none rounded-bl-[var(--form-radius)] sm:rounded-bl-none", ...postalProps }) })] }), isInvalid && jsx("div", { "aria-hidden": "true", className: formsBaseTheme.groupInvalidOverlayStyle })] }), isInvalid && errorMessage && (jsx("p", { id: errorId, role: "alert", className: formsBaseTheme.helperText, children: errorMessage }))] }));
 });
 InputAddress.displayName = "InputAddress";
 
-export { InputAddress };
+export { DEFAULT_COUNTRIES, InputAddress };

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

@@ -11,11 +11,11 @@ const inputAddressTheme = {
     // Only keeping border radius positioning styles
     baseInputGroupStyle: '',
     // Specific styles for various positions
-    topInputGroupStyle: 'rounded-t-md rounded-b-none',
+    topInputGroupStyle: 'rounded-t-[var(--form-radius)] rounded-b-none',
     middleInputGroupStyle: 'rounded-none',
-    bottomLeftInputGroupStyle: 'rounded-bl-md rounded-br-none sm:border-r-0',
-    bottomRightInputGroupStyle: 'rounded-br-md rounded-bl-none',
-    bottomFullInputGroupStyle: 'rounded-b-md rounded-t-none',
+    bottomLeftInputGroupStyle: 'rounded-bl-[var(--form-radius)] rounded-br-none',
+    bottomRightInputGroupStyle: 'rounded-br-[var(--form-radius)] rounded-bl-none',
+    bottomFullInputGroupStyle: 'rounded-b-[var(--form-radius)] rounded-t-none',
     // Using default input theme for both inputs
     countryInput: {
         ...inputTheme,
@@ -23,7 +23,7 @@ const inputAddressTheme = {
     postalCodeInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

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

@@ -1,4 +1,6 @@
+import React from 'react';
 import { InputProps, InputTheme } from '../Input/Input.types';
+import { SelectProps } from '../Select/Select.types';
 /**
  * InputAddress component props
  * @property {boolean} showCountrySelector - Whether to show the country selector
@@ -13,6 +15,10 @@ import { InputProps, InputTheme } from '../Input/Input.types';
  * @property {InputAddressThemeOverrides} theme - Theme overrides for the address input
  */
 export interface InputAddressProps {
+    /** Visual/validation state of the entire address group */
+    state?: 'default' | 'disabled' | 'invalid';
+    /** Consolidated error message shown below all fields when `state="invalid"` */
+    errorMessage?: React.ReactNode;
     /** Whether to show the country selector */
     showCountrySelector?: boolean;
     /** Whether to show the postal code input */
@@ -35,8 +41,8 @@ export interface InputAddressProps {
     streetInputProps?: Omit<InputProps, 'ref'>;
     /** Props passed to the state input */
     stateInputProps?: Omit<InputProps, 'ref'>;
-    /** Props passed to the country input */
-    countryInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the country Select (e.g. `searchable`, `placement`, `theme`) */
+    countryInputProps?: Partial<SelectProps<string>>;
     /** Props passed to the postal code input */
     postalCodeInputProps?: Omit<InputProps, 'ref'>;
     /** Class name for the container */

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

@@ -1,3 +1,3 @@
-export { InputAddress } from './InputAddress';
+export { InputAddress, DEFAULT_COUNTRIES } from './InputAddress';
 export type { InputAddressProps, InputAddressThemeOverrides } from './InputAddress.types';
 export { inputAddressTheme, styledInputAddressTheme } from './InputAddress.theme';

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

@@ -26,4 +26,4 @@ import { InputCounterProps } from "./InputCounter.types";
  * );
  * ```
  */
-export declare const InputCounter: React.ForwardRefExoticComponent<Omit<InputCounterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InputCounter: React.ForwardRefExoticComponent<InputCounterProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,11 +1,13 @@
+"use client";
 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 +35,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", ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, state = "default", label, helperText, errorMessage, 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 +73,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 +91,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,64 +108,85 @@ const InputCounter = React__default.forwardRef(({ value, onChange, min, max, ste
             }
             return;
         }
-        onChange(roundedValue);
-    }, [value, step, min, disabled, onChange]);
-    // Keyboard support
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (disabled)
-                return;
-            // Check if the counter is focused
-            const target = event.target;
-            if (!target.closest('[data-counter="true"]'))
-                return;
-            switch (event.key) {
-                case "ArrowUp":
-                    event.preventDefault();
-                    handleIncrement();
-                    break;
-                case "ArrowDown":
-                    event.preventDefault();
-                    handleDecrement();
-                    break;
-                case "PageUp":
-                    event.preventDefault();
-                    const pageUpValue = value + step * 10;
-                    if (max === undefined || pageUpValue <= max) {
-                        onChange(pageUpValue);
-                    }
-                    else if (max !== undefined) {
-                        onChange(max);
-                    }
-                    break;
-                case "PageDown":
-                    event.preventDefault();
-                    const pageDownValue = value - step * 10;
-                    if (min === undefined || pageDownValue >= min) {
-                        onChange(pageDownValue);
-                    }
-                    else if (min !== undefined) {
-                        onChange(min);
-                    }
-                    break;
+        onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
+    }, [value, step, min, isDisabled, onChange]);
+    // Keyboard support — scoped to THIS counter instance via onKeyDown on the
+    // focusable root. Because the root is focusable (tabIndex 0) and its child
+    // buttons bubble keydown to it, this fires only when focus is within THIS
+    // counter — correctly scoping the behavior to the focused instance.
+    const handleKeyDown = useCallback((event) => {
+        if (isDisabled)
+            return;
+        switch (event.key) {
+            case "ArrowUp":
+                event.preventDefault();
+                handleIncrement();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                handleDecrement();
+                break;
+            case "PageUp": {
+                event.preventDefault();
+                const pageUpValue = value + step * 10;
+                if (max === undefined || pageUpValue <= max) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(pageUpValue);
+                }
+                else if (max !== undefined) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(max);
+                }
+                break;
             }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
+            case "PageDown": {
+                event.preventDefault();
+                const pageDownValue = value - step * 10;
+                if (min === undefined || pageDownValue >= min) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(pageDownValue);
+                }
+                else if (min !== undefined) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(min);
+                }
+                break;
+            }
+        }
     }, [
         value,
         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`;
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
+    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": displayedMessage ? helperId : undefined, tabIndex: isDisabled ? -1 : 0, onKeyDown: handleKeyDown, ...props, children: [jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
+                        // Framer Motion's press gesture (triggered by `whileTap`) adds
+                        // `tabIndex=0` to any non-natively-focusable element that
+                        // doesn't already declare a `tabindex`, to make tap gestures
+                        // keyboard-accessible. That's undesired here — this div is a
+                        // purely decorative animation wrapper around the real, already-
+                        // focusable <Button>, so an explicit tabIndex={-1} keeps it out
+                        // of the tab order (motion.js only adds its own when the
+                        // attribute is absent).
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", 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, 
+                        // Framer Motion's press gesture (triggered by `whileTap`) adds
+                        // `tabIndex=0` to any non-natively-focusable element that
+                        // doesn't already declare a `tabindex`, to make tap gestures
+                        // keyboard-accessible. That's undesired here — this div is a
+                        // purely decorative animation wrapper around the real, already-
+                        // focusable <Button>, so an explicit tabIndex={-1} keeps it out
+                        // of the tab order (motion.js only adds its own when the
+                        // attribute is absent).
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) })] }), displayedMessage && (jsx("div", { id: helperId, role: isInvalid ? "alert" : undefined, className: cn("text-sm mt-1", isInvalid
+                    ? "text-[var(--color-danger)]"
+                    : "text-[var(--color-text-muted)]"), children: displayedMessage }))] }));
 });
 InputCounter.displayName = "InputCounter";
 

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

@@ -3,7 +3,7 @@
  * Follows Flikkui design system with CSS variables
  */
 const inputCounterTheme = {
-    baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
+    baseStyle: "flex items-center gap-3 transition-all p-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
     buttonWrapperStyle: "flex-shrink-0",
     numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
 };

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

@@ -1,5 +1,7 @@
-import { HTMLMotionProps, Transition } from 'motion/react';
+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)
@@ -13,11 +15,23 @@ import { ButtonProps } from '../../core/Button/Button.types';
  * @property {object} theme - Theme overrides for styling
  * @property {object} transition - Custom Framer Motion transition
  */
-export interface InputCounterProps extends Omit<HTMLMotionProps<'div'>, 'onChange'> {
+export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** 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;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: 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,9 @@
+"use client";
 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 +21,19 @@ 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', errorMessage, 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;
+    // Resolve the consolidated message (errorMessage is canonical; `error` is a deprecated alias).
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
     // Merge the default theme with the provided theme overrides
     const mergedTheme = useMemo(() => ({
         ...InputCreditCardTheme,
@@ -43,18 +56,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 +80,20 @@ 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 errorId = `${instanceId}-error`;
+    // Children are NEVER given `invalid` — the single red perimeter overlay carries the error
+    // (see formsBaseTheme.groupInvalidOverlayStyle). Only disabled propagates to the fields.
+    const fieldState = 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", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && resolvedError ? errorId : undefined, 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: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover: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 focus-within:z-10 hover:z-10", children: [jsx("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-expiry-date", 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-[var(--form-radius)] rounded-t-none sm:rounded-tr-none sm:rounded-br-none", ...expiryProps }) }), jsx("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full -mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)] relative focus-within:z-10 hover:z-10`, "data-testid": "input-cvc", 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-[var(--form-radius)] rounded-t-none rounded-bl-[var(--form-radius)] sm:rounded-bl-none", ...cvcProps }) })] }), isInvalid && jsx("div", { "aria-hidden": "true", className: formsBaseTheme.groupInvalidOverlayStyle })] }), isInvalid && resolvedError && (jsx("p", { id: errorId, role: "alert", className: formsBaseTheme.helperText, children: resolvedError }))] }));
 });
 InputCreditCard.displayName = "InputCreditCard";
 

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

@@ -11,11 +11,11 @@ const inputCreditCardTheme = {
     // Only keeping border radius positioning styles
     baseInputGroupStyle: '',
     // Specific styles for various positions
-    topInputGroupStyle: 'rounded-t-md rounded-b-none',
+    topInputGroupStyle: 'rounded-t-[var(--form-radius)] rounded-b-none',
     middleInputGroupStyle: 'rounded-none',
-    bottomLeftInputGroupStyle: 'rounded-bl-md rounded-br-none sm:border-r-0',
-    bottomRightInputGroupStyle: 'rounded-br-md rounded-bl-none',
-    bottomFullInputGroupStyle: 'rounded-b-md rounded-t-none',
+    bottomLeftInputGroupStyle: 'rounded-bl-[var(--form-radius)] rounded-br-none',
+    bottomRightInputGroupStyle: 'rounded-br-[var(--form-radius)] rounded-bl-none',
+    bottomFullInputGroupStyle: 'rounded-b-[var(--form-radius)] rounded-t-none',
     // Using default input theme for all inputs
     cardNumberInput: {
         ...inputTheme,
@@ -26,7 +26,7 @@ const inputCreditCardTheme = {
     cvcInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

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,14 @@ 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 when `state="invalid"` */
+    errorMessage?: React.ReactNode;
+    /**
+     * @deprecated Use `errorMessage` instead. Kept as an alias for backward compatibility.
+     */
+    error?: React.ReactNode;
     /** Callback when card number changes */
     onCardNumberChange?: (cardNumber: string) => void;
     /** Callback when expiry date changes */

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

@@ -2,3 +2,4 @@ export { InputCreditCard } from './InputCreditCard';
 export type { InputCreditCardProps, InputCreditCardThemeOverrides } from './InputCreditCard.types';
 export { inputCreditCardTheme, styledInputCreditCardTheme } from './InputCreditCard.theme';
 export { containerVariants, inputVariants } from './InputCreditCard.animations';
+export { isValidExpiryDate } from '../Input/inputMasks';