flikkui 0.1.0-beta.2

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

@@ -0,0 +1,82 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Input component
+ * Extends the common forms base theme
+ */
+var inputTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - inherited from common form theme
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base input styles - extends the common control base style with padding
+    baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " py-2 px-3"),
+    // Size variants - uses the base sizes from common theme
+    sizes: {
+        sm: formsBaseTheme.sizes.sm.base,
+        md: formsBaseTheme.sizes.md.base,
+        lg: formsBaseTheme.sizes.lg.base,
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+    // Icon styles - inherited from common form theme
+    leftIconStyle: formsBaseTheme.iconStyles.left,
+    rightIconStyle: formsBaseTheme.iconStyles.right,
+    // Icon padding styles - inherited from common form theme
+    iconPadding: formsBaseTheme.iconStyles.padding,
+    // Addon styles - specific to Input component
+    addonStyle: "flex items-center px-3 text-gray-500 shrink-0",
+    addonPrefixStyle: "pr-0",
+    addonSuffixStyle: "pl-0",
+    // Keyboard shortcut styles
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 z-10",
+    // Password toggle button styles
+    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer text-neutral-500 hover:text-neutral-700 z-10",
+    // Number input styles
+    numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
+    numberButtonStyle: "bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 cursor-pointer size-6 rounded-sm",
+    // Input types specific styles
+    typeStyles: {
+        password: {
+            toggleIconActive: "size-5 text-neutral-700",
+            toggleIconInactive: "size-5 text-neutral-500",
+        },
+        search: {
+            iconStyle: "text-neutral-500",
+        },
+        number: {
+            incrementIconStyle: "text-neutral-500",
+            decrementIconStyle: "text-neutral-500",
+        },
+    },
+    // Password strength indicator styles
+    passwordStrengthIndicator: {
+        containerStyle: "flex items-center gap-1",
+        labelStyle: "text-xs font-semibold mr-1",
+        dotStyle: "size-1.5 rounded-full",
+        dotActiveStyle: "bg-current",
+        dotInactiveStyle: "bg-neutral-200",
+        strengthStyles: {
+            weak: {
+                label: "Weak",
+                color: "text-danger-base",
+            },
+            moderate: {
+                label: "Moderate",
+                color: "text-warning-base",
+            },
+            strong: {
+                label: "Strong",
+                color: "text-success-base",
+            },
+            "very-strong": {
+                label: "Very Strong",
+                color: "text-success-base",
+            },
+        },
+    },
+};
+
+export { inputTheme as default, inputTheme };

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

@@ -0,0 +1,162 @@
+import React from 'react';
+/**
+ * Input component props
+ * @property {InputSize} size - The size of the input
+ * @property {InputState} state - The state of the input (default, disabled, invalid)
+ * @property {string} label - Optional label text for the input
+ * @property {string} helperText - Optional helper text displayed below the input
+ * @property {React.ReactNode} leftIcon - Icon to display before the input
+ * @property {React.ReactNode} rightIcon - Icon to display after the input
+ * @property {React.ReactNode} addonPrefix - Content to display as a prefix
+ * @property {React.ReactNode} addonSuffix - Content to display as a suffix
+ * @property {React.ReactNode} keyboardShortcut - Keyboard shortcut to display on the right side
+ * @property {boolean} required - Whether the input is required
+ * @property {boolean} passwordToggle - Whether to show a toggle button for password fields
+ * @property {boolean} showNumberControls - Whether to display increment/decrement controls for number input
+ * @property {number} min - Minimum value for number input
+ * @property {number} max - Maximum value for number input
+ * @property {number} step - Step value for number input
+ * @property {PasswordStrengthIndicator} passwordStrengthIndicator - Password strength indicator configuration
+ * @property {number} currencyDecimalPlaces - Number of decimal places for currency inputs
+ */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** The size of the input */
+    size?: InputSize;
+    /** The state of the input (default, disabled, invalid) */
+    state?: InputState;
+    /**
+     * The type of input. In addition to standard HTML types,
+     * supports masked input types: 'creditCard', 'expiryDate', 'phone', 'ssn', 'currency'
+     */
+    type?: InputType;
+    /** Optional label text for the input */
+    label?: string;
+    /** Optional helper text displayed below the input */
+    helperText?: string;
+    /** Icon to display before the input */
+    leftIcon?: React.ReactNode;
+    /** Icon to display after the input */
+    rightIcon?: React.ReactNode;
+    /** Content to display as a prefix */
+    addonPrefix?: React.ReactNode;
+    /** Content to display as a suffix */
+    addonSuffix?: React.ReactNode;
+    /** Keyboard shortcut to display on the right side */
+    keyboardShortcut?: React.ReactNode;
+    /** Additional class name for the input */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Additional class name for the input group */
+    inputGroupClassName?: string;
+    /** Component-level theme overrides */
+    theme?: InputThemeOverrides;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether to show a toggle button for password fields. Only works when type="password" */
+    passwordToggle?: boolean;
+    /** Whether to show increment/decrement controls for number inputs (false by default). Only works when type="number" */
+    showNumberControls?: boolean;
+    /** Password strength indicator configuration. Only applies when type="password" */
+    passwordStrengthIndicator?: PasswordStrengthIndicator;
+    /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
+    currencyDecimalPlaces?: number;
+}
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputState = 'default' | 'disabled' | 'invalid';
+/**
+ * Input types combining HTML standard types and custom masked input types
+ */
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit' | 'creditCard' | 'expiryDate' | 'phone' | 'ssn' | 'currency';
+/**
+ * Password strength indicator configuration
+ */
+export interface PasswordStrengthIndicator {
+    /** Whether to show the strength indicator */
+    show: boolean;
+    /** The current strength level */
+    strength?: PasswordStrength;
+    /** Custom label text to show. If not provided, default labels based on strength will be used */
+    customLabel?: string;
+    /** Custom class name for the indicator container */
+    className?: string;
+    /** The position of the strength indicator */
+    position?: 'right' | 'below';
+}
+/**
+ * Password strength levels
+ */
+export type PasswordStrength = 'weak' | 'moderate' | 'strong' | 'very-strong';
+/**
+ * Theme overrides for the Input component
+ */
+export interface InputThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the input group container (input + addons) */
+    inputGroupStyle?: string;
+    /** Base style for the input element */
+    baseStyle?: string;
+    /** Size variants for the input */
+    sizes?: Partial<Record<InputSize, string>>;
+    /** State variants applied to the input group */
+    states?: Partial<Record<InputState, string>>;
+    /** Base style for the helper text */
+    helperText?: string;
+    /** Common style for both prefix and suffix addons */
+    addonStyle?: string;
+    /** Additional style for the addon prefix */
+    addonPrefixStyle?: string;
+    /** Additional style for the addon suffix */
+    addonSuffixStyle?: string;
+    /** Style for the keyboard shortcut */
+    keyboardShortcutStyle?: string;
+    /** Style for the left icon container */
+    leftIconStyle?: string;
+    /** Style for the right icon container */
+    rightIconStyle?: string;
+    /** Padding styles for icons */
+    iconPadding?: {
+        left?: string;
+        right?: string;
+    };
+    /** Style for the password toggle button */
+    passwordToggleStyle?: string;
+    /** Style for number buttons container */
+    numberButtonsContainerStyle?: string;
+    /** Base style for number buttons */
+    numberButtonStyle?: string;
+    /** Styles specific to input types */
+    typeStyles?: {
+        password?: {
+            toggleIconActive?: string;
+            toggleIconInactive?: string;
+        };
+        search?: {
+            iconStyle?: string;
+        };
+        number?: {
+            incrementIconStyle?: string;
+            decrementIconStyle?: string;
+        };
+        currency?: {
+            symbolStyle?: string;
+        };
+    };
+    /** Styles for password strength indicator */
+    passwordStrengthIndicator?: {
+        containerStyle?: string;
+        labelStyle?: string;
+        dotStyle?: string;
+        dotActiveStyle?: string;
+        dotInactiveStyle?: string;
+        strengthStyles?: Partial<Record<PasswordStrength, {
+            label?: string;
+            color?: string;
+        }>>;
+    };
+}

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

@@ -0,0 +1,3 @@
+export { Input } from './Input';
+export type { InputProps, InputSize, InputState, InputThemeOverrides } from './Input.types';
+export { inputTheme } from './Input.theme';

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

@@ -0,0 +1,67 @@
+/**
+ * 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
+ */
+export declare const formatCreditCard: (value: string) => string;
+/**
+ * Format expiry date input as MM/YY
+ * @param value The raw input value
+ * @returns The formatted expiry date
+ */
+export declare const formatExpiryDate: (value: string) => string;
+/**
+ * Validate month (01-12) in expiry date
+ * @param value The current input value
+ * @returns Whether the month is valid
+ */
+export declare const isValidMonth: (value: string) => boolean;
+/**
+ * Apply phone number formatting (US format: (XXX) XXX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted phone number
+ */
+export declare const formatPhoneNumber: (value: string) => string;
+/**
+ * Format US Social Security Number (XXX-XX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted SSN
+ */
+export declare const formatSSN: (value: string) => string;
+/**
+ * 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
+ */
+export declare const formatCurrency: (value: string, decimalPlaces?: number) => string;
+/**
+ * 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
+ */
+export declare const applyInputMask: (value: string, type: string, options?: {
+    currencyDecimalPlaces?: number;
+}) => string;
+/**
+ * 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
+ */
+export declare const validateMaskedInput: (type: string, value: string) => boolean;
+/**
+ * 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
+ */
+export declare const getAdjustedCursorPosition: (previousValue: string, currentValue: string, previousPosition: number) => number;

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

@@ -0,0 +1,198 @@
+/**
+ * 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 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 it exists
+    if (decimalPart) {
+        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 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, formatExpiryDate, formatPhoneNumber, formatSSN, getAdjustedCursorPosition, 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?: InputThemeOverrides;
+    postalCodeInput?: InputThemeOverrides;
+    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
+ */
+var styledInputAddressTheme = __assign({}, inputAddressTheme);
+
+export { inputAddressTheme, styledInputAddressTheme };