flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -1,4 +1,3 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo, useState, useCallback } from 'react';
 import { Input } from '../Input/Input.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -20,58 +19,68 @@ import { inputAddressTheme } from './InputAddress.theme.js';
  * />
  * ```
  */
-var InputAddress = function (_a) {
-    var _b = _a.availableCountries, availableCountries = _b === void 0 ? [] : _b, _c = _a.defaultCountry, defaultCountry = _c === void 0 ? "United States" : _c, onCountryChange = _a.onCountryChange, onPostalCodeChange = _a.onPostalCodeChange, _d = _a.countryLabel, countryLabel = _d === void 0 ? "Country" : _d, _e = _a.postalCodeLabel, postalCodeLabel = _e === void 0 ? "ZIP / Postal code" : _e, _f = _a.legendText, legendText = _f === void 0 ? "Billing address" : _f, _g = _a.countryInputProps, countryInputProps = _g === void 0 ? {} : _g, _h = _a.postalCodeInputProps, postalCodeInputProps = _h === void 0 ? {} : _h, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.theme, theme = _k === void 0 ? {} : _k;
+const InputAddress = ({ availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }) => {
     // Merge default theme with provided theme using useMemo for performance
-    var mergedTheme = useMemo(function () { return (__assign(__assign(__assign({}, inputAddressTheme), theme), { countryInput: __assign(__assign({}, inputAddressTheme.countryInput), theme.countryInput), postalCodeInput: __assign(__assign({}, inputAddressTheme.postalCodeInput), theme.postalCodeInput) })); }, [theme]);
+    const mergedTheme = useMemo(() => ({
+        ...inputAddressTheme,
+        ...theme,
+        countryInput: {
+            ...inputAddressTheme.countryInput,
+            ...theme.countryInput,
+        },
+        postalCodeInput: {
+            ...inputAddressTheme.postalCodeInput,
+            ...theme.postalCodeInput,
+        },
+    }), [theme]);
     // State for country and postal code
-    var _l = useState(defaultCountry), country = _l[0], setCountry = _l[1];
-    var _m = useState(""), postalCode = _m[0], setPostalCode = _m[1];
-    var _o = useState(null); _o[0]; var setFocused = _o[1];
+    const [country, setCountry] = useState(defaultCountry);
+    const [postalCode, setPostalCode] = useState("");
+    const [focused, setFocused] = useState(null);
     // Handle country change
-    var handleCountryChange = useCallback(function (e) {
-        var newCountry = e.target.value;
+    const handleCountryChange = useCallback((e) => {
+        const newCountry = e.target.value;
         setCountry(newCountry);
         onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(newCountry);
     }, [onCountryChange]);
     // Handle postal code change
-    var handlePostalCodeChange = useCallback(function (e) {
-        var newPostalCode = e.target.value;
+    const handlePostalCodeChange = useCallback((e) => {
+        const newPostalCode = e.target.value;
         setPostalCode(newPostalCode);
         onPostalCodeChange === null || onPostalCodeChange === void 0 ? void 0 : onPostalCodeChange(newPostalCode);
     }, [onPostalCodeChange]);
     // Handle focus states
-    var handleFocus = useCallback(function (field) {
+    const handleFocus = useCallback((field) => {
         setFocused(field);
     }, []);
-    var handleBlur = useCallback(function () {
+    const handleBlur = useCallback(() => {
         setFocused(null);
     }, []);
     // Filter available countries if array is provided
-    useMemo(function () {
+    useMemo(() => {
         if (availableCountries.length === 0)
             return [];
         return availableCountries;
     }, [availableCountries]);
     // Create unique IDs for accessibility
-    useMemo(function () { return "address-fieldset-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    useMemo(function () { return "address-legend-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    var streetId = useMemo(function () { return "street-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    var stateId = useMemo(function () { return "state-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    var countryId = useMemo(function () { return "country-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    var postalCodeId = useMemo(function () { return "postal-code-".concat(Math.random().toString(36).substring(2, 9)); }, []);
-    return (React__default.createElement("div", { className: "w-full ".concat(className), "data-testid": "input-address-fieldset" },
+    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 (React__default.createElement("div", { className: `w-full ${className}`, "data-testid": "input-address-fieldset" },
         React__default.createElement(FormLabel, { htmlFor: streetId, className: mergedTheme.legendStyles }, legendText),
-        React__default.createElement("div", { className: "grid gap-0 ".concat(mergedTheme.contentStyles), "data-testid": "input-address-content" },
+        React__default.createElement("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content" },
             React__default.createElement("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-address-street" },
-                React__default.createElement(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", onFocus: function () { return handleFocus("street"); }, onBlur: handleBlur, inputGroupClassName: "rounded-b-none" })),
+                React__default.createElement(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", onFocus: () => handleFocus("street"), onBlur: handleBlur, inputGroupClassName: "rounded-b-none" })),
             React__default.createElement("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10", "data-testid": "input-address-state" },
                 React__default.createElement(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", onBlur: handleBlur, inputGroupClassName: "rounded-none" })),
             React__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative" },
-                React__default.createElement("div", { className: "".concat(mergedTheme.countryWrapperStyles, " w-full sm:pr-0"), "data-testid": "input-address-country relative focus-within:z-10" },
-                    React__default.createElement(Input, __assign({ id: countryId, type: "text", value: country, onChange: handleCountryChange, placeholder: countryLabel, "aria-label": countryLabel, onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10" }, countryInputProps))),
-                React__default.createElement("div", { className: "".concat(mergedTheme.postalCodeWrapperStyles, " w-full"), "data-testid": "input-address-postal relative focus-within:z-10" },
-                    React__default.createElement(Input, __assign({ id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, onBlur: handleBlur, inputGroupClassName: "sm:rounded-tr-md sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10" }, postalCodeInputProps)))))));
+                React__default.createElement("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0`, "data-testid": "input-address-country relative focus-within:z-10" },
+                    React__default.createElement(Input, { id: countryId, type: "text", value: country, onChange: handleCountryChange, placeholder: countryLabel, "aria-label": countryLabel, onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10", ...countryInputProps })),
+                React__default.createElement("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full`, "data-testid": "input-address-postal relative focus-within:z-10" },
+                    React__default.createElement(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, onBlur: handleBlur, inputGroupClassName: "sm:rounded-tr-md sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10", ...postalCodeInputProps }))))));
 };
 
 export { InputAddress };

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

@@ -1,10 +1,9 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import { inputTheme } from '../Input/Input.theme.js';
 
 /**
  * Default theme for the InputAddress component
  */
-var inputAddressTheme = {
+const inputAddressTheme = {
     container: 'w-full',
     fieldsetStyles: 'w-full',
     countryWrapperStyles: 'grid grid-cols-1',
@@ -18,13 +17,19 @@ var inputAddressTheme = {
     bottomRightInputGroupStyle: 'rounded-br-md rounded-bl-none',
     bottomFullInputGroupStyle: 'rounded-b-md rounded-t-none',
     // Using default input theme for both inputs
-    countryInput: __assign({}, inputTheme),
-    postalCodeInput: __assign({}, inputTheme),
+    countryInput: {
+        ...inputTheme,
+    },
+    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',
 };
 /**
  * Styled theme matching the reference design
  */
-var styledInputAddressTheme = __assign({}, inputAddressTheme);
+({
+    ...inputAddressTheme,
+});
 
-export { inputAddressTheme, styledInputAddressTheme };
+export { inputAddressTheme };

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { InputCounterProps } from "./InputCounter.types";
+/**
+ * InputCounter component with animated number display
+ *
+ * Features:
+ * - Increment/decrement buttons
+ * - Smooth sliding number animation
+ * - Min/max value constraints
+ * - Custom step size (supports decimals)
+ * - Keyboard support (Arrow Up/Down, Page Up/Down)
+ * - Controlled component pattern
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ *
+ * return (
+ *   <InputCounter
+ *     value={count}
+ *     onChange={setCount}
+ *     min={0}
+ *     max={100}
+ *     step={1}
+ *   />
+ * );
+ * ```
+ */
+export declare const InputCounter: React.ForwardRefExoticComponent<Omit<InputCounterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,173 @@
+import React__default, { 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';
+
+/**
+ * InputCounter component with animated number display
+ *
+ * Features:
+ * - Increment/decrement buttons
+ * - Smooth sliding number animation
+ * - Min/max value constraints
+ * - Custom step size (supports decimals)
+ * - Keyboard support (Arrow Up/Down, Page Up/Down)
+ * - Controlled component pattern
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ *
+ * return (
+ *   <InputCounter
+ *     value={count}
+ *     onChange={setCount}
+ *     min={0}
+ *     max={100}
+ *     step={1}
+ *   />
+ * );
+ * ```
+ */
+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 shouldReduceMotion = useReducedMotion();
+    const shouldDisableAnimations = !!shouldReduceMotion;
+    // Auto-detect decimal places from step if not explicitly provided
+    const autoDecimalPlaces = useMemo(() => {
+        if (decimalPlaces !== undefined)
+            return decimalPlaces;
+        if (!step)
+            return 0;
+        const stepStr = step.toString();
+        const decimalIndex = stepStr.indexOf(".");
+        if (decimalIndex === -1)
+            return 0;
+        return stepStr.length - decimalIndex - 1;
+    }, [step, decimalPlaces]);
+    // Merge theme overrides
+    const mergedTheme = {
+        ...inputCounterTheme,
+        ...theme,
+    };
+    // Auto-clamp value to min/max bounds when they change
+    useEffect(() => {
+        let clampedValue = value;
+        let needsUpdate = false;
+        // Clamp to min
+        if (min !== undefined && value < min) {
+            clampedValue = min;
+            needsUpdate = true;
+        }
+        // Clamp to max
+        if (max !== undefined && value > max) {
+            clampedValue = max;
+            needsUpdate = true;
+        }
+        if (needsUpdate) {
+            onChange(clampedValue);
+        }
+    }, [min, max, value, onChange]);
+    // Handle increment
+    const handleIncrement = useCallback(() => {
+        if (disabled)
+            return;
+        const newValue = value + step;
+        // Round to avoid floating point precision errors
+        const decimalPlaces = Math.max((step.toString().split(".")[1] || "").length, (value.toString().split(".")[1] || "").length);
+        const roundedValue = Number(newValue.toFixed(decimalPlaces));
+        // Check max constraint
+        if (max !== undefined && roundedValue > max) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`InputCounter: Cannot increment beyond max value (${max})`);
+            }
+            return;
+        }
+        onChange(roundedValue);
+    }, [value, step, max, disabled, onChange]);
+    // Handle decrement
+    const handleDecrement = useCallback(() => {
+        if (disabled)
+            return;
+        const newValue = value - step;
+        // Round to avoid floating point precision errors
+        const decimalPlaces = Math.max((step.toString().split(".")[1] || "").length, (value.toString().split(".")[1] || "").length);
+        const roundedValue = Number(newValue.toFixed(decimalPlaces));
+        // Check min constraint
+        if (min !== undefined && roundedValue < min) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`InputCounter: Cannot decrement below min value (${min})`);
+            }
+            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;
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [
+        value,
+        step,
+        min,
+        max,
+        disabled,
+        onChange,
+        handleIncrement,
+        handleDecrement,
+    ]);
+    // Check if buttons should be disabled
+    const canDecrement = !disabled && (min === undefined || value > min);
+    const canIncrement = !disabled && (max === undefined || value < max);
+    return (React__default.createElement(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 },
+        React__default.createElement(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined },
+            React__default.createElement(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement" },
+                React__default.createElement(MinusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }))),
+        React__default.createElement(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }),
+        React__default.createElement(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined },
+            React__default.createElement(Button, { size: "sm", variant: "link", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment" },
+                React__default.createElement(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 })))));
+});
+InputCounter.displayName = "InputCounter";
+
+export { InputCounter };

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

@@ -0,0 +1,6 @@
+import { InputCounterTheme } from "./InputCounter.types";
+/**
+ * InputCounter theme configuration
+ * Follows Flikkui design system with CSS variables
+ */
+export declare const inputCounterTheme: InputCounterTheme;

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

@@ -0,0 +1,11 @@
+/**
+ * InputCounter theme configuration
+ * 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-rounded)] 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",
+};
+
+export { inputCounterTheme };

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

@@ -0,0 +1,54 @@
+import { HTMLMotionProps, Transition } from 'motion/react';
+import { ButtonProps } from '../../core/Button/Button.types';
+/**
+ * InputCounter component props
+ * @property {number} value - Current counter value (controlled)
+ * @property {function} onChange - Callback when value changes
+ * @property {number} min - Minimum allowed value (optional)
+ * @property {number} max - Maximum allowed value (optional)
+ * @property {number} step - Increment/decrement step size (default: 1)
+ * @property {boolean} disabled - Whether the counter is disabled
+ * @property {function} formatNumber - Custom number formatter
+ * @property {object} buttonProps - Props to pass to increment/decrement buttons
+ * @property {object} theme - Theme overrides for styling
+ * @property {object} transition - Custom Framer Motion transition
+ */
+export interface InputCounterProps extends Omit<HTMLMotionProps<'div'>, 'onChange'> {
+    /** Current counter value (controlled) */
+    value: number;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+    /** Minimum allowed value (optional) */
+    min?: number;
+    /** Maximum allowed value (optional) */
+    max?: number;
+    /** Increment/decrement step size (default: 1) */
+    step?: number;
+    /** Whether the counter is disabled */
+    disabled?: boolean;
+    /** Number of decimal places to display (auto-detected from step if not specified) */
+    decimalPlaces?: number;
+    /** Custom number formatter (e.g., for decimals or localization) */
+    formatNumber?: (value: number) => string;
+    /** Additional class names */
+    className?: string;
+    /** Props to pass to increment/decrement buttons (omitting onClick) */
+    buttonProps?: Omit<ButtonProps, 'onClick'>;
+    /** Theme overrides for styling */
+    theme?: Partial<InputCounterTheme>;
+    /** Custom Framer Motion transition */
+    transition?: Transition;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+}
+/**
+ * Theme configuration for InputCounter component
+ */
+export interface InputCounterTheme {
+    /** Base container style */
+    baseStyle: string;
+    /** Wrapper style for button animations */
+    buttonWrapperStyle: string;
+    /** Number display style */
+    numberStyle: string;
+}

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

@@ -0,0 +1,3 @@
+export { InputCounter } from './InputCounter';
+export type { InputCounterProps, InputCounterTheme, } from './InputCounter.types';
+export { inputCounterTheme } from './InputCounter.theme';

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

@@ -0,0 +1,83 @@
+import React__default, { useMemo, useState, useCallback } from 'react';
+import { Input } from '../Input/Input.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { InputCreditCardTheme } from './InputCreditCard.theme.js';
+
+/**
+ * InputCreditCard component for collecting credit card information
+ * Displays a multi-field form for credit card entry with properly connected borders
+ *
+ * @example
+ * ```tsx
+ * <InputCreditCard
+ *   legendText="Payment Information"
+ *   expiryDateLabel="Expiry Date"
+ *   cvcLabel="CVC"
+ *   onCardNumberChange={(number) => console.log(number)}
+ *   onExpiryDateChange={(date) => console.log(date)}
+ *   onCvcChange={(cvc) => console.log(cvc)}
+ * />
+ * ```
+ */
+const InputCreditCard = ({ onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }) => {
+    // Merge the default theme with the provided theme overrides
+    const mergedTheme = useMemo(() => ({
+        ...InputCreditCardTheme,
+        ...theme,
+        expiryDateInput: {
+            ...InputCreditCardTheme.expiryDateInput,
+            ...theme.expiryDateInput,
+        },
+        cvcInput: {
+            ...InputCreditCardTheme.cvcInput,
+            ...theme.cvcInput,
+        },
+    }), [theme]);
+    // State for card details
+    const [cardNumber, setCardNumber] = useState("");
+    const [expiryDate, setExpiryDate] = useState("");
+    const [cvc, setCvc] = useState("");
+    const [focused, setFocused] = useState(null);
+    // Handle card number change
+    const handleCardNumberChange = useCallback((e) => {
+        const newCardNumber = e.target.value;
+        setCardNumber(newCardNumber);
+        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);
+        onExpiryDateChange === null || onExpiryDateChange === void 0 ? void 0 : onExpiryDateChange(newExpiryDate);
+    }, [onExpiryDateChange]);
+    // Handle CVC change
+    const handleCvcChange = useCallback((e) => {
+        const newCvc = e.target.value;
+        setCvc(newCvc);
+        onCvcChange === null || onCvcChange === void 0 ? void 0 : onCvcChange(newCvc);
+    }, [onCvcChange]);
+    // Handle focus states
+    const handleFocus = useCallback((field) => {
+        setFocused(field);
+    }, []);
+    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 (React__default.createElement("div", { className: `w-full ${className}`, "data-testid": "input-credit-card-fieldset" },
+        React__default.createElement(FormLabel, { htmlFor: cardNumberId, className: mergedTheme.legendStyles }, legendText),
+        React__default.createElement("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content" },
+            React__default.createElement("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-card-number" },
+                React__default.createElement(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 })),
+            React__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative" },
+                React__default.createElement("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0`, "data-testid": "input-expiry-date relative focus-within:z-10" },
+                    React__default.createElement(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 })),
+                React__default.createElement("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full`, "data-testid": "input-cvc relative focus-within:z-10" },
+                    React__default.createElement(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 }))))));
+};
+
+export { InputCreditCard };

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

@@ -0,0 +1,42 @@
+import { inputTheme } from '../Input/Input.theme.js';
+
+/**
+ * Default theme for the InputCreditCard component
+ */
+const inputCreditCardTheme = {
+    container: 'w-full',
+    fieldsetStyles: 'w-full',
+    expiryDateWrapperStyles: 'grid grid-cols-1',
+    cvcWrapperStyles: '',
+    // Only keeping border radius positioning styles
+    baseInputGroupStyle: '',
+    // Specific styles for various positions
+    topInputGroupStyle: 'rounded-t-md 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',
+    // Using default input theme for all inputs
+    cardNumberInput: {
+        ...inputTheme,
+    },
+    expiryDateInput: {
+        ...inputTheme,
+    },
+    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',
+};
+/**
+ * Styled theme matching the reference design
+ */
+({
+    ...inputCreditCardTheme,
+});
+/**
+ * Export InputCreditCardTheme for use in component
+ */
+const InputCreditCardTheme = inputCreditCardTheme;
+
+export { InputCreditCardTheme, inputCreditCardTheme };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InputDateProps } from './InputDate.types';
+/**
+ * InputDate component for entering dates with automatic masking
+ *
+ * Features:
+ * - Single input field with automatic slash insertion (e.g., "12252024" → "12/25/2024")
+ * - Multiple format support (MM/DD/YYYY, DD/MM/YYYY, YYYY/MM/DD)
+ * - Date validation (valid month, day, year ranges)
+ * - Min/max date range validation
+ * - Cursor position handling
+ * - Paste support
+ * - Inherits all Input component features (icons, addons, sizes, states, theming)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputDate
+ *   label="Date of Birth"
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="MM/DD/YYYY"
+ *   maxDate={new Date()}
+ *   onComplete={(date) => console.log('Valid date entered:', date)}
+ * />
+ * ```
+ */
+export declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<HTMLInputElement>>;