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

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
@@ -16,4 +21,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,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, showCountrySelector = true, showPostalCode = true, 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,56 @@ 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';
+    // The fields render as ONE merged perimeter, so the radii are positional: only the
+    // last visible field carries the bottom corners. Hiding country/postal moves that
+    // responsibility up the stack, and a lone bottom field spans the full row.
+    const showBottomRow = showCountrySelector || showPostalCode;
+    const isBottomRowSplit = showCountrySelector && showPostalCode;
+    // 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: showBottomRow ? "rounded-none" : "rounded-t-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), showBottomRow && (jsxs("div", { className: cn("grid grid-cols-1 w-full -mt-px relative focus-within:z-10 hover:z-10", isBottomRowSplit && "sm:grid-cols-2"), children: [showCountrySelector && (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("rounded-t-none", isBottomRowSplit &&
+                                        "sm:rounded-bl-[var(--form-radius)] sm:rounded-tr-none sm:rounded-br-none", _coClass), ...countryProps }) })), showPostalCode && (jsx("div", { className: cn(mergedTheme.postalCodeWrapperStyles, "w-full relative focus-within:z-10 hover:z-10", isBottomRowSplit && "-mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)]"), "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: cn("rounded-t-none", isBottomRowSplit &&
+                                        "sm:rounded-br-[var(--form-radius)] 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 { Minus, Plus } from '@phosphor-icons/react';
+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(Minus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) }), 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(Plus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) })] }), 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>>;