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

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

@@ -9,7 +9,7 @@ const inputTheme = {
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
     inputGroupStyle: "relative flex rounded-[var(--form-radius)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-[var(--color-surface)] transition-all " +
+        "bg-[var(--field-fill)] transition-all " +
         // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
         // not-focus-within so the JS-driven focus border (primary) always wins.
         "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)]",
@@ -31,10 +31,13 @@ const inputTheme = {
     states: {
         default: formsBaseTheme.states.default,
         disabled: formsBaseTheme.states.disabled,
-        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
+        // Invalid = danger border + faint danger ring, NO surface fill (matches formsBaseTheme
+        // and the composite overlay). Focus is JS-driven via inputGroupFocusInvalidStyle, so no
+        // focus-within ring override is needed here.
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
             // Keep the danger border on hover (don't let the hover edge override it)
             "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
-            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
+            "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20 " +
             "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Helper text styles with state handling
@@ -52,12 +55,15 @@ const inputTheme = {
     },
     contentStartStyle: "pr-0 " +
         "[&:has([aria-haspopup])]:pl-0 " +
-        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
+        // ! important so these beat the nested Select button's own hover:/focus-within: edge+ring
+        // rules (those carry extra pseudo-class specificity); !shadow-none also clears the ring,
+        // which Tailwind renders via box-shadow.
+        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:!ring-0 [&_[aria-haspopup]]:!shadow-none " +
         "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
         "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
     contentEndStyle: "pl-0 " +
         "[&:has([aria-haspopup])]:pr-0 " +
-        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
+        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:!ring-0 [&_[aria-haspopup]]:!shadow-none " +
         "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
         "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
     // Keyboard shortcut display

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

@@ -31,6 +31,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     label?: React.ReactNode;
     /** Optional helper text below the input — pass a string for default styling, or a ReactNode for full control */
     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;
     /** Icon to display before the input (small decorative) */
     iconStart?: React.ReactNode;
     /** Icon to display after the input (small decorative) */

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

@@ -1,3 +1,4 @@
 export { Input } from './Input';
 export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator } from './Input.types';
 export { inputTheme } from './Input.theme';
+export { isValidExpiryDate, isValidMonth } from './inputMasks';

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

@@ -20,6 +20,30 @@ export declare const formatExpiryDate: (value: string) => string;
  * @returns Whether the month is valid
  */
 export declare const isValidMonth: (value: string) => boolean;
+/**
+ * Validate a complete card expiry date (MM/YY): the month must be 01-12 AND the date
+ * must not be in the past. A card is considered valid through the LAST day of its expiry
+ * month, so the current month still passes.
+ *
+ * This is the consumer-side validator for InputCreditCard — the component only masks the
+ * input (clamping the month to 01-12 as you type); whether a *complete* date is acceptable
+ * is a business decision, so wire this to `state`/`errorMessage`:
+ *
+ * ```tsx
+ * <InputCreditCard
+ *   state={state}
+ *   errorMessage="Card has expired"
+ *   onExpiryDateChange={(v) => setState(isValidExpiryDate(v) ? "default" : "invalid")}
+ * />
+ * ```
+ *
+ * @param value The formatted expiry value (e.g. "04/27"); non-digits are ignored
+ * @param options.now Reference "now" (defaults to the current date) — pass for SSR/testing
+ * @returns Whether the expiry is a complete, non-expired MM/YY
+ */
+export declare const isValidExpiryDate: (value: string, options?: {
+    now?: Date;
+}) => boolean;
 /**
  * Apply phone number formatting (US format: (XXX) XXX-XXXX)
  * @param value The raw input value

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

@@ -23,11 +23,25 @@ const formatCreditCard = (value) => {
 const formatExpiryDate = (value) => {
     // Remove all non-digit characters
     const digitsOnly = value.replace(/\D/g, '');
-    // Format based on length
-    if (digitsOnly.length <= 2) {
-        return digitsOnly;
+    if (digitsOnly.length === 0)
+        return '';
+    // Month — clamp to 01-12 in real time (mirrors formatDateInput's MM handling).
+    // First digit: only 0 or 1 can start a valid month. A leading 2-9 is unambiguous
+    // (e.g. "4" can only be April), so auto-prefix a zero and advance to the year — the
+    // friendly card-form behavior, rather than silently dropping the keystroke.
+    if (digitsOnly.length === 1) {
+        const d = parseInt(digitsOnly[0], 10);
+        return d > 1 ? `0${d}/` : digitsOnly;
+    }
+    // Two+ digits: reject a second digit that pushes the month out of 01-12 (keep the first).
+    const month = parseInt(digitsOnly.slice(0, 2), 10);
+    if (month < 1 || month > 12) {
+        return digitsOnly.slice(0, 1);
+    }
+    if (digitsOnly.length === 2) {
+        return `${digitsOnly.slice(0, 2)}/`;
     }
-    // Add slash after month
+    // Month is valid → append the year digits (YY)
     return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}`;
 };
 /**
@@ -41,6 +55,48 @@ const isValidMonth = (value) => {
     // Check if it's a valid month (1-12)
     return month >= 1 && month <= 12;
 };
+/**
+ * Validate a complete card expiry date (MM/YY): the month must be 01-12 AND the date
+ * must not be in the past. A card is considered valid through the LAST day of its expiry
+ * month, so the current month still passes.
+ *
+ * This is the consumer-side validator for InputCreditCard — the component only masks the
+ * input (clamping the month to 01-12 as you type); whether a *complete* date is acceptable
+ * is a business decision, so wire this to `state`/`errorMessage`:
+ *
+ * ```tsx
+ * <InputCreditCard
+ *   state={state}
+ *   errorMessage="Card has expired"
+ *   onExpiryDateChange={(v) => setState(isValidExpiryDate(v) ? "default" : "invalid")}
+ * />
+ * ```
+ *
+ * @param value The formatted expiry value (e.g. "04/27"); non-digits are ignored
+ * @param options.now Reference "now" (defaults to the current date) — pass for SSR/testing
+ * @returns Whether the expiry is a complete, non-expired MM/YY
+ */
+const isValidExpiryDate = (value, options) => {
+    var _a;
+    const digits = value.replace(/\D/g, '');
+    if (digits.length !== 4)
+        return false; // require a complete MM/YY
+    const month = parseInt(digits.slice(0, 2), 10);
+    const year = parseInt(digits.slice(2, 4), 10);
+    if (isNaN(month) || isNaN(year))
+        return false;
+    if (month < 1 || month > 12)
+        return false;
+    const now = (_a = options === null || options === void 0 ? void 0 : options.now) !== null && _a !== void 0 ? _a : new Date();
+    const fullYear = 2000 + year;
+    const nowYear = now.getFullYear();
+    const nowMonth = now.getMonth() + 1; // 1-12
+    if (fullYear < nowYear)
+        return false;
+    if (fullYear === nowYear && month < nowMonth)
+        return false;
+    return true;
+};
 /**
  * Apply phone number formatting (US format: (XXX) XXX-XXXX)
  * @param value The raw input value
@@ -428,4 +484,4 @@ const getAdjustedCursorPosition = (previousValue, currentValue, previousPosition
     return previousPosition;
 };
 
-export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, formatTimeInput, getAdjustedCursorPosition, isValidDateInput, isValidMonth, isValidTimeInput, validateMaskedInput };
+export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, formatTimeInput, getAdjustedCursorPosition, isValidDateInput, isValidExpiryDate, isValidMonth, isValidTimeInput, validateMaskedInput };

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

@@ -1,5 +1,10 @@
 import React from "react";
 import { InputAddressProps } from "./InputAddress.types";
+/**
+ * Sensible default country list used when the consumer doesn't pass
+ * `availableCountries`. Exported so power users can extend/reorder it.
+ */
+export declare const DEFAULT_COUNTRIES: string[];
 /**
  * InputAddress component for collecting address information
  * Displays a multi-field form for address entry with properly connected borders

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

@@ -1,8 +1,64 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useCallback, useId } from 'react';
+import React__default, { useState, useEffect, useMemo, useCallback, useId } from 'react';
 import { Input } from '../Input/Input.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
@@ -19,8 +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,32 +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
     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 }) })] })] })] }));
+    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,

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.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useMemo, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -34,7 +35,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
  * );
  * ```
  */
-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 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();
@@ -109,48 +110,45 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
     }, [value, step, min, isDisabled, onChange]);
-    // Keyboard support
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (isDisabled)
-                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 === null || onChange === void 0 ? void 0 : onChange(pageUpValue);
-                    }
-                    else if (max !== undefined) {
-                        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 === null || onChange === void 0 ? void 0 : onChange(pageDownValue);
-                    }
-                    else if (min !== undefined) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(min);
-                    }
-                    break;
+    // 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,
@@ -165,9 +163,30 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
     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
+    // 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: helperText }))] }));
+                    : "text-[var(--color-text-muted)]"), children: displayedMessage }))] }));
 });
 InputCounter.displayName = "InputCounter";
 

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

@@ -26,6 +26,12 @@ export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElem
     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.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo, useCallback, useId } from 'react';
 import { Input } from '../Input/Input.js';
@@ -20,7 +21,7 @@ import { formsBaseTheme } from '../forms.theme.js';
  * />
  * ```
  */
-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) => {
+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.
@@ -31,6 +32,8 @@ const InputCreditCard = React__default.forwardRef(({ state = 'default', error, o
             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,
@@ -81,13 +84,16 @@ const InputCreditCard = React__default.forwardRef(({ state = 'default', error, o
     const cardNumberId = `${instanceId}-card-number`;
     const expiryDateId = `${instanceId}-expiry-date`;
     const cvcId = `${instanceId}-cvc`;
-    const fieldState = isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default';
+    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", 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 }))] }));
+    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,