flikkui 0.1.0-beta.11

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

@@ -0,0 +1,363 @@
+/**
+ * Input masking utilities for the Input component
+ * These functions handle formatting and validation for specialized input types
+ */
+/**
+ * Format credit card input with hyphens every 4 digits
+ * @param value The raw input value
+ * @returns The formatted credit card number
+ */
+var formatCreditCard = function (value) {
+    // Remove all non-digit characters
+    var digitsOnly = value.replace(/\D/g, '');
+    // Add hyphen after every 4 digits
+    var formatted = digitsOnly.replace(/(\d{4})(?=\d)/g, '$1-');
+    // Limit to 16 digits + hyphens (19 chars total)
+    return formatted.slice(0, 19);
+};
+/**
+ * Format expiry date input as MM/YY
+ * @param value The raw input value
+ * @returns The formatted expiry date
+ */
+var formatExpiryDate = function (value) {
+    // Remove all non-digit characters
+    var digitsOnly = value.replace(/\D/g, '');
+    // Format based on length
+    if (digitsOnly.length <= 2) {
+        return digitsOnly;
+    }
+    // Add slash after month
+    return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2, 4));
+};
+/**
+ * Validate month (01-12) in expiry date
+ * @param value The current input value
+ * @returns Whether the month is valid
+ */
+var isValidMonth = function (value) {
+    // Extract month portion
+    var month = parseInt(value.slice(0, 2), 10);
+    // Check if it's a valid month (1-12)
+    return month >= 1 && month <= 12;
+};
+/**
+ * Apply phone number formatting (US format: (XXX) XXX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted phone number
+ */
+var formatPhoneNumber = function (value) {
+    // Remove all non-digit characters
+    var digitsOnly = value.replace(/\D/g, '');
+    // Format based on length
+    if (digitsOnly.length <= 3) {
+        return "(".concat(digitsOnly);
+    }
+    else if (digitsOnly.length <= 6) {
+        return "(".concat(digitsOnly.slice(0, 3), ") ").concat(digitsOnly.slice(3));
+    }
+    else {
+        return "(".concat(digitsOnly.slice(0, 3), ") ").concat(digitsOnly.slice(3, 6), "-").concat(digitsOnly.slice(6, 10));
+    }
+};
+/**
+ * Format US Social Security Number (XXX-XX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted SSN
+ */
+var formatSSN = function (value) {
+    // Remove all non-digit characters
+    var digitsOnly = value.replace(/\D/g, '');
+    // Format based on length
+    if (digitsOnly.length <= 3) {
+        return digitsOnly;
+    }
+    else if (digitsOnly.length <= 5) {
+        return "".concat(digitsOnly.slice(0, 3), "-").concat(digitsOnly.slice(3));
+    }
+    else {
+        return "".concat(digitsOnly.slice(0, 3), "-").concat(digitsOnly.slice(3, 5), "-").concat(digitsOnly.slice(5, 9));
+    }
+};
+/**
+ * Format date input as MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD
+ * WITH REAL-TIME VALIDATION - prevents invalid month/day values as user types
+ * @param value The raw input value
+ * @param format The date format to use (default: MM/DD/YYYY)
+ * @returns The formatted date string (only valid digits are kept)
+ */
+var formatDateInput = function (value, format) {
+    if (format === void 0) { format = 'MM/DD/YYYY'; }
+    // Remove all non-digit characters
+    var digitsOnly = value.replace(/\D/g, '');
+    // Format based on length and format type
+    if (format === 'YYYY/MM/DD') {
+        // Year first: YYYY/MM/DD
+        // Year validation: 1900-2099 (but allow typing any 4 digits for UX)
+        if (digitsOnly.length < 4) {
+            return digitsOnly;
+        }
+        if (digitsOnly.length === 4) {
+            return "".concat(digitsOnly, "/");
+        }
+        // Month validation (01-12)
+        if (digitsOnly.length === 5) {
+            var monthDigit = parseInt(digitsOnly[4], 10);
+            if (monthDigit > 1)
+                return digitsOnly.slice(0, 4); // First digit of month can't be > 1
+            return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4));
+        }
+        if (digitsOnly.length === 6) {
+            var month = parseInt(digitsOnly.slice(4, 6), 10);
+            if (month < 1 || month > 12)
+                return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4, 5)); // Invalid month
+            return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4), "/");
+        }
+        // Day validation (01-31)
+        if (digitsOnly.length === 7) {
+            var month = parseInt(digitsOnly.slice(4, 6), 10);
+            var dayDigit = parseInt(digitsOnly[6], 10);
+            if (dayDigit > 3)
+                return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4, 6), "/"); // First digit of day can't be > 3
+            return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4, 6), "/").concat(digitsOnly.slice(6));
+        }
+        if (digitsOnly.length >= 8) {
+            var month = parseInt(digitsOnly.slice(4, 6), 10);
+            var day = parseInt(digitsOnly.slice(6, 8), 10);
+            if (day < 1 || day > 31)
+                return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4, 6), "/").concat(digitsOnly.slice(6, 7)); // Invalid day
+            return "".concat(digitsOnly.slice(0, 4), "/").concat(digitsOnly.slice(4, 6), "/").concat(digitsOnly.slice(6, 8));
+        }
+        return digitsOnly;
+    }
+    else {
+        // Month/Day first: MM/DD/YYYY or DD/MM/YYYY
+        if (digitsOnly.length === 0)
+            return '';
+        // First part validation (month or day)
+        if (digitsOnly.length === 1) {
+            var firstDigit = parseInt(digitsOnly[0], 10);
+            // First digit of month can't be > 1, first digit of day can't be > 3
+            var maxFirstDigit = format === 'MM/DD/YYYY' ? 1 : 3;
+            if (firstDigit > maxFirstDigit)
+                return ''; // Reject invalid first digit
+            return digitsOnly;
+        }
+        if (digitsOnly.length === 2) {
+            var firstPart = parseInt(digitsOnly.slice(0, 2), 10);
+            if (format === 'MM/DD/YYYY') {
+                // Validate month (01-12)
+                if (firstPart < 1 || firstPart > 12)
+                    return digitsOnly.slice(0, 1); // Reject 2nd digit
+            }
+            else {
+                // Validate day (01-31)
+                if (firstPart < 1 || firstPart > 31)
+                    return digitsOnly.slice(0, 1); // Reject 2nd digit
+            }
+            return "".concat(digitsOnly, "/");
+        }
+        // Second part validation (day or month)
+        if (digitsOnly.length === 3) {
+            var firstPart = parseInt(digitsOnly.slice(0, 2), 10);
+            var secondDigit = parseInt(digitsOnly[2], 10);
+            // Second part: if MM/DD, second is day (max first digit 3); if DD/MM, second is month (max first digit 1)
+            var maxSecondDigit = format === 'MM/DD/YYYY' ? 3 : 1;
+            if (secondDigit > maxSecondDigit)
+                return "".concat(digitsOnly.slice(0, 2), "/"); // Reject invalid digit
+            return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2));
+        }
+        if (digitsOnly.length === 4) {
+            var firstPart = parseInt(digitsOnly.slice(0, 2), 10);
+            var secondPart = parseInt(digitsOnly.slice(2, 4), 10);
+            if (format === 'MM/DD/YYYY') {
+                // Second part is day (01-31)
+                if (secondPart < 1 || secondPart > 31)
+                    return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2, 3)); // Reject 4th digit
+            }
+            else {
+                // Second part is month (01-12)
+                if (secondPart < 1 || secondPart > 12)
+                    return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2, 3)); // Reject 4th digit
+            }
+            return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2), "/");
+        }
+        // Year part (no validation needed during typing)
+        if (digitsOnly.length >= 5) {
+            var firstPart = digitsOnly.slice(0, 2);
+            var secondPart = digitsOnly.slice(2, 4);
+            var yearPart = digitsOnly.slice(4, 8);
+            return "".concat(firstPart, "/").concat(secondPart, "/").concat(yearPart);
+        }
+        return digitsOnly;
+    }
+};
+/**
+ * Validate if a date string is a valid date
+ * @param value The formatted date string
+ * @param format The date format being used
+ * @returns Whether the date is valid
+ */
+var isValidDateInput = function (value, format) {
+    if (format === void 0) { format = 'MM/DD/YYYY'; }
+    var parts = value.split('/');
+    if (parts.length !== 3)
+        return false;
+    var month, day, year;
+    switch (format) {
+        case 'MM/DD/YYYY':
+            month = parseInt(parts[0], 10);
+            day = parseInt(parts[1], 10);
+            year = parseInt(parts[2], 10);
+            break;
+        case 'DD/MM/YYYY':
+            day = parseInt(parts[0], 10);
+            month = parseInt(parts[1], 10);
+            year = parseInt(parts[2], 10);
+            break;
+        case 'YYYY/MM/DD':
+            year = parseInt(parts[0], 10);
+            month = parseInt(parts[1], 10);
+            day = parseInt(parts[2], 10);
+            break;
+        default:
+            return false;
+    }
+    if (isNaN(month) || isNaN(day) || isNaN(year))
+        return false;
+    if (month < 1 || month > 12)
+        return false;
+    if (day < 1 || day > 31)
+        return false;
+    if (year < 1900 || year > 2099)
+        return false;
+    // Check if day is valid for the month
+    var date = new Date(year, month - 1, day);
+    return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+};
+/**
+ * Format currency input (adds commas for thousands and limits decimal places)
+ * @param value The raw input value
+ * @param decimalPlaces Number of decimal places (default: 2)
+ * @returns The formatted currency value
+ */
+var formatCurrency = function (value, decimalPlaces) {
+    if (decimalPlaces === void 0) { decimalPlaces = 2; }
+    // Handle special case of just a decimal point
+    if (value === '.') {
+        return '0.';
+    }
+    // Remove all characters except digits and decimal point
+    var sanitized = value.replace(/[^\d.]/g, '');
+    // Ensure only one decimal point
+    var parts = sanitized.split('.');
+    var integerPart = parts[0];
+    var decimalPart = parts.length > 1 ? parts[1] : '';
+    // Format integer part with commas
+    var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // Add decimal part if decimal point was present (even if empty)
+    if (parts.length > 1) {
+        return "".concat(formattedInteger, ".").concat(decimalPart.slice(0, decimalPlaces));
+    }
+    return formattedInteger;
+};
+/**
+ * Apply specific input masking based on input type
+ * @param value The current input value
+ * @param type The type of mask to apply
+ * @param options Additional options for formatting
+ * @returns The masked/formatted value
+ */
+var applyInputMask = function (value, type, options) {
+    switch (type) {
+        case 'creditCard':
+            return formatCreditCard(value);
+        case 'expiryDate':
+            return formatExpiryDate(value);
+        case 'phone':
+            return formatPhoneNumber(value);
+        case 'ssn':
+            return formatSSN(value);
+        case 'currency':
+            return formatCurrency(value, (options === null || options === void 0 ? void 0 : options.currencyDecimalPlaces) || 2);
+        default:
+            return value;
+    }
+};
+/**
+ * Check if a masked input needs validation
+ * @param type The input mask type
+ * @param value The current value
+ * @returns Whether the value is valid or not
+ */
+var validateMaskedInput = function (type, value) {
+    switch (type) {
+        case 'expiryDate':
+            // Only validate once we have at least 2 digits
+            if (value.replace(/\D/g, '').length >= 2) {
+                return isValidMonth(value);
+            }
+            return true;
+        default:
+            return true;
+    }
+};
+/**
+ * Get cursor position after applying a mask
+ * This helps maintain the cursor position when formatting
+ * @param previousValue Previous input value
+ * @param currentValue Current formatted value
+ * @param previousPosition Previous cursor position
+ * @returns The new cursor position
+ */
+var getAdjustedCursorPosition = function (previousValue, currentValue, previousPosition) {
+    // If values are the same, don't move cursor
+    if (previousValue === currentValue) {
+        return previousPosition;
+    }
+    // For currency formatting with commas
+    // Count how many commas are before the cursor position in both values
+    var prevCommasBefore = (previousValue.slice(0, previousPosition).match(/,/g) || []).length;
+    var currCommasBefore = (currentValue.slice(0, previousPosition).match(/,/g) || []).length;
+    // If commas were added or removed, adjust position
+    if (prevCommasBefore !== currCommasBefore) {
+        var commaDiff = currCommasBefore - prevCommasBefore;
+        return previousPosition + commaDiff;
+    }
+    // For credit card formatting with hyphens
+    if (previousValue.length < currentValue.length) {
+        // Check if we're at a position where a separator was added
+        if (currentValue.charAt(previousPosition) === '-') {
+            // If we're at a separator, move cursor one position forward
+            return previousPosition + 1;
+        }
+        // Handle case where we just entered the 4th, 8th, or 12th digit
+        // and a separator was automatically added after it
+        if (previousPosition === 4 || previousPosition === 9 || previousPosition === 14) {
+            if (currentValue.charAt(previousPosition) === '-') {
+                return previousPosition + 1;
+            }
+        }
+    }
+    // Check if digits were added at the end
+    var prevDigits = previousValue.replace(/\D/g, '');
+    var currDigits = currentValue.replace(/\D/g, '');
+    if (currDigits.length > prevDigits.length) {
+        // For credit card groups (after 4, 8, 12 digits)
+        if (currDigits.length === 4 || currDigits.length === 8 || currDigits.length === 12) {
+            // Find position after the hyphen that was just added
+            var hyphenPos = currentValue.indexOf('-', previousPosition - 1);
+            if (hyphenPos !== -1) {
+                return hyphenPos + 1;
+            }
+        }
+    }
+    // Default cursor adjustment when something was added
+    if (currentValue.length > previousValue.length) {
+        var addedChars = currentValue.length - previousValue.length;
+        return previousPosition + addedChars;
+    }
+    return previousPosition;
+};
+
+export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, getAdjustedCursorPosition, isValidDateInput, isValidMonth, validateMaskedInput };

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { InputAddressProps } from "./InputAddress.types";
+/**
+ * InputAddress component for collecting address information
+ * Displays a multi-field form for address entry with properly connected borders
+ *
+ * @example
+ * ```tsx
+ * <InputAddress
+ *   legendText="Shipping Address"
+ *   countryLabel="Country"
+ *   postalCodeLabel="Postal Code"
+ *   availableCountries={["United States", "Canada", "Mexico"]}
+ *   onCountryChange={(country) => console.log(country)}
+ *   onPostalCodeChange={(code) => console.log(code)}
+ * />
+ * ```
+ */
+export declare const InputAddress: React.FC<InputAddressProps>;

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

@@ -0,0 +1,77 @@
+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';
+import { inputAddressTheme } from './InputAddress.theme.js';
+
+/**
+ * InputAddress component for collecting address information
+ * Displays a multi-field form for address entry with properly connected borders
+ *
+ * @example
+ * ```tsx
+ * <InputAddress
+ *   legendText="Shipping Address"
+ *   countryLabel="Country"
+ *   postalCodeLabel="Postal Code"
+ *   availableCountries={["United States", "Canada", "Mexico"]}
+ *   onCountryChange={(country) => console.log(country)}
+ *   onPostalCodeChange={(code) => console.log(code)}
+ * />
+ * ```
+ */
+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;
+    // 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]);
+    // 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];
+    // Handle country change
+    var handleCountryChange = useCallback(function (e) {
+        var 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;
+        setPostalCode(newPostalCode);
+        onPostalCodeChange === null || onPostalCodeChange === void 0 ? void 0 : onPostalCodeChange(newPostalCode);
+    }, [onPostalCodeChange]);
+    // Handle focus states
+    var handleFocus = useCallback(function (field) {
+        setFocused(field);
+    }, []);
+    var handleBlur = useCallback(function () {
+        setFocused(null);
+    }, []);
+    // Filter available countries if array is provided
+    useMemo(function () {
+        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" },
+        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: "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("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)))))));
+};
+
+export { InputAddress };

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

@@ -0,0 +1,26 @@
+import { InputAddressThemeOverrides } from './InputAddress.types';
+/**
+ * Default theme for the InputAddress component
+ */
+export declare const inputAddressTheme: InputAddressThemeOverrides;
+/**
+ * Styled theme matching the reference design
+ */
+export declare const styledInputAddressTheme: {
+    container?: string;
+    legendStyles?: string;
+    fieldsetStyles?: string;
+    contentStyles?: string;
+    countryWrapperStyles?: string;
+    postalCodeWrapperStyles?: string;
+    countryInput?: import("..").InputTheme;
+    postalCodeInput?: import("..").InputTheme;
+    inputPositions?: import("./InputAddress.types").InputPositionStyles;
+    chevronStyles?: string;
+    baseInputGroupStyle?: string;
+    topInputGroupStyle?: string;
+    middleInputGroupStyle?: string;
+    bottomLeftInputGroupStyle?: string;
+    bottomRightInputGroupStyle?: string;
+    bottomFullInputGroupStyle?: string;
+};

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

@@ -0,0 +1,30 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { inputTheme } from '../Input/Input.theme.js';
+
+/**
+ * Default theme for the InputAddress component
+ */
+var inputAddressTheme = {
+    container: 'w-full',
+    fieldsetStyles: 'w-full',
+    countryWrapperStyles: 'grid grid-cols-1',
+    postalCodeWrapperStyles: '',
+    // 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 both inputs
+    countryInput: __assign({}, inputTheme),
+    postalCodeInput: __assign({}, 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
+ */
+__assign({}, inputAddressTheme);
+
+export { inputAddressTheme };

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

@@ -0,0 +1,93 @@
+import { InputProps, InputTheme } from '../Input/Input.types';
+/**
+ * InputAddress component props
+ * @property {boolean} showCountrySelector - Whether to show the country selector
+ * @property {boolean} showPostalCode - Whether to show the postal code input
+ * @property {string[]} availableCountries - List of available countries (when implemented with Select)
+ * @property {string} defaultCountry - Default selected country
+ * @property {function} onCountryChange - Callback when country changes
+ * @property {function} onPostalCodeChange - Callback when postal code changes
+ * @property {string} countryLabel - Label for country input
+ * @property {string} postalCodeLabel - Label for postal code input
+ * @property {string} legendText - Text displayed in the fieldset legend
+ * @property {InputAddressThemeOverrides} theme - Theme overrides for the address input
+ */
+export interface InputAddressProps {
+    /** Whether to show the country selector */
+    showCountrySelector?: boolean;
+    /** Whether to show the postal code input */
+    showPostalCode?: boolean;
+    /** List of available countries (when implemented with Select) */
+    availableCountries?: string[];
+    /** Default selected country */
+    defaultCountry?: string;
+    /** Callback when country changes */
+    onCountryChange?: (country: string) => void;
+    /** Callback when postal code changes */
+    onPostalCodeChange?: (postalCode: string) => void;
+    /** Label for country input */
+    countryLabel?: string;
+    /** Label for postal code input */
+    postalCodeLabel?: string;
+    /** Text displayed in the fieldset legend */
+    legendText?: string;
+    /** Props passed to the country input */
+    countryInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the postal code input */
+    postalCodeInputProps?: Omit<InputProps, 'ref'>;
+    /** Class name for the container */
+    className?: string;
+    /** Component-level theme overrides */
+    theme?: InputAddressThemeOverrides;
+}
+/**
+ * Input position types within the address form
+ */
+export type InputAddressPosition = 'top' | 'middle' | 'bottomLeft' | 'bottomRight' | 'bottomFull';
+/**
+ * Input position styles
+ */
+export interface InputPositionStyles {
+    top: string;
+    middle: string;
+    bottomLeft: string;
+    bottomRight: string;
+    bottomFull: string;
+}
+/**
+ * Theme overrides for the InputAddress component
+ */
+export interface InputAddressThemeOverrides {
+    /** Container styles */
+    container?: string;
+    /** Styles for the legend element */
+    legendStyles?: string;
+    /** Styles for the fieldset element */
+    fieldsetStyles?: string;
+    /** Styles for the content container */
+    contentStyles?: string;
+    /** Styles for the country input wrapper */
+    countryWrapperStyles?: string;
+    /** Styles for the postal code input wrapper */
+    postalCodeWrapperStyles?: string;
+    /** Country input theme overrides */
+    countryInput?: InputTheme;
+    /** Postal code input theme overrides */
+    postalCodeInput?: InputTheme;
+    /** Styles for input positions */
+    inputPositions?: InputPositionStyles;
+    /** Styles for the chevron icon */
+    chevronStyles?: string;
+    /** Base input group style that serves as foundation for all positions */
+    baseInputGroupStyle?: string;
+    /** Style for the top input (first in sequence) */
+    topInputGroupStyle?: string;
+    /** Style for middle inputs (between first and last) */
+    middleInputGroupStyle?: string;
+    /** Style for bottom-left input (in a split bottom row) */
+    bottomLeftInputGroupStyle?: string;
+    /** Style for bottom-right input (in a split bottom row) */
+    bottomRightInputGroupStyle?: string;
+    /** Style for a full-width bottom input (when only one bottom input is shown) */
+    bottomFullInputGroupStyle?: string;
+}

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

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

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