flikkui 0.1.0-beta.2

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

@@ -0,0 +1,93 @@
+import { InputProps, InputThemeOverrides } from '../../core/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?: InputThemeOverrides;
+    /** Postal code input theme overrides */
+    postalCodeInput?: InputThemeOverrides;
+    /** 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/InputCreditCard/InputCreditCard.animations.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Animation variants for the container
+ */
+export declare const containerVariants: Variants;
+/**
+ * Animation variants for the inputs
+ */
+export declare const inputVariants: Variants;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { InputCreditCardProps } from "./InputCreditCard.types";
+/**
+ * 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)}
+ * />
+ * ```
+ */
+export declare const InputCreditCard: React.FC<InputCreditCardProps>;

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

@@ -0,0 +1,31 @@
+import { InputCreditCardThemeOverrides } from './InputCreditCard.types';
+/**
+ * Default theme for the InputCreditCard component
+ */
+export declare const inputCreditCardTheme: InputCreditCardThemeOverrides;
+/**
+ * Styled theme matching the reference design
+ */
+export declare const styledInputCreditCardTheme: {
+    container?: string;
+    legendStyles?: string;
+    fieldsetStyles?: string;
+    contentStyles?: string;
+    expiryDateWrapperStyles?: string;
+    cvcWrapperStyles?: string;
+    cardNumberInput?: import("..").InputThemeOverrides;
+    expiryDateInput?: import("..").InputThemeOverrides;
+    cvcInput?: import("..").InputThemeOverrides;
+    inputPositions?: import("./InputCreditCard.types").InputPositionStyles;
+    chevronStyles?: string;
+    baseInputGroupStyle?: string;
+    topInputGroupStyle?: string;
+    middleInputGroupStyle?: string;
+    bottomLeftInputGroupStyle?: string;
+    bottomRightInputGroupStyle?: string;
+    bottomFullInputGroupStyle?: string;
+};
+/**
+ * Export InputCreditCardTheme for use in component
+ */
+export declare const InputCreditCardTheme: InputCreditCardThemeOverrides;

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

@@ -0,0 +1,88 @@
+import { InputProps, InputThemeOverrides } from '../Input/Input.types';
+/**
+ * InputCreditCard component props
+ * @property {function} onCardNumberChange - Callback when card number changes
+ * @property {function} onExpiryDateChange - Callback when expiry date changes
+ * @property {function} onCvcChange - Callback when CVC changes
+ * @property {string} expiryDateLabel - Label for expiry date input
+ * @property {string} cvcLabel - Label for CVC input
+ * @property {string} legendText - Text displayed as the form label
+ * @property {InputCreditCardThemeOverrides} theme - Theme overrides for the credit card input
+ */
+export interface InputCreditCardProps {
+    /** Callback when card number changes */
+    onCardNumberChange?: (cardNumber: string) => void;
+    /** Callback when expiry date changes */
+    onExpiryDateChange?: (expiryDate: string) => void;
+    /** Callback when CVC changes */
+    onCvcChange?: (cvc: string) => void;
+    /** Label for expiry date input */
+    expiryDateLabel?: string;
+    /** Label for CVC input */
+    cvcLabel?: string;
+    /** Text displayed as the form label */
+    legendText?: string;
+    /** Props passed to the card number input */
+    cardNumberInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the expiry date input */
+    expiryDateInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the CVC input */
+    cvcInputProps?: Omit<InputProps, 'ref'>;
+    /** Class name for the container */
+    className?: string;
+    /** Component-level theme overrides */
+    theme?: InputCreditCardThemeOverrides;
+}
+/**
+ * Input position types within the credit card form
+ */
+export type InputCreditCardPosition = '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 InputCreditCard component
+ */
+export interface InputCreditCardThemeOverrides {
+    /** 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 expiry date input wrapper */
+    expiryDateWrapperStyles?: string;
+    /** Styles for the CVC input wrapper */
+    cvcWrapperStyles?: string;
+    /** Card number input theme overrides */
+    cardNumberInput?: InputThemeOverrides;
+    /** Expiry date input theme overrides */
+    expiryDateInput?: InputThemeOverrides;
+    /** CVC input theme overrides */
+    cvcInput?: InputThemeOverrides;
+    /** 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/InputCreditCard/index.d.ts

@@ -0,0 +1,4 @@
+export { InputCreditCard } from './InputCreditCard';
+export type { InputCreditCardProps, InputCreditCardThemeOverrides } from './InputCreditCard.types';
+export { inputCreditCardTheme, styledInputCreditCardTheme } from './InputCreditCard.theme';
+export { containerVariants, inputVariants } from './InputCreditCard.animations';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputOTPProps } from './InputOTP.types';
+/**
+ * InputOTP component for entering one-time passwords or verification codes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputOTP
+ *   length={6}
+ *   value={otpValue}
+ *   onChange={setOtpValue}
+ *   onComplete={handleOtpComplete}
+ *   label="Enter verification code"
+ * />
+ * ```
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/forms/InputOTP/InputOTP.js

@@ -0,0 +1,177 @@
+import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { inputOTPTheme } from './InputOTP.theme.js';
+
+/**
+ * InputOTP component for entering one-time passwords or verification codes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputOTP
+ *   length={6}
+ *   value={otpValue}
+ *   onChange={setOtpValue}
+ *   onComplete={handleOtpComplete}
+ *   label="Enter verification code"
+ * />
+ * ```
+ */
+var InputOTP = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.length, length = _b === void 0 ? 6 : _b, _c = _a.value, value = _c === void 0 ? '' : _c, onChange = _a.onChange, onComplete = _a.onComplete, _d = _a.disabled, disabled = _d === void 0 ? false : _d, label = _a.label, helperText = _a.helperText, error = _a.error, _e = _a.autoFocus, autoFocus = _e === void 0 ? true : _e, className = _a.className, props = __rest(_a, ["length", "value", "onChange", "onComplete", "disabled", "label", "helperText", "error", "autoFocus", "className"]);
+    var inputRefs = useRef([]);
+    var theme = inputOTPTheme;
+    // Internal state for uncontrolled usage
+    var _f = useState(''), internalValue = _f[0], setInternalValue = _f[1];
+    // Use controlled value if provided, otherwise use internal state
+    var currentValue = value !== undefined ? value : internalValue;
+    var setValue = onChange || setInternalValue;
+    // Convert value to array of characters
+    var valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
+    // Auto-focus first input on mount
+    useEffect(function () {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus, disabled]);
+    // Handle input change
+    var handleChange = useCallback(function (index, newValue) {
+        var _a;
+        if (disabled)
+            return;
+        // Only allow single character (take last character if multiple)
+        var char = newValue.slice(-1);
+        // Create new value array
+        var newValueArray = __spreadArray([], valueArray, true);
+        newValueArray[index] = char;
+        // Convert back to string and remove trailing spaces
+        var newValueString = newValueArray.join('').trimEnd();
+        setValue(newValueString);
+        // Auto-focus next input if character was entered
+        if (char && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // Check if OTP is complete
+        if (newValueString.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValueString);
+        }
+    }, [disabled, valueArray, length, setValue, onComplete]);
+    // Handle key down for navigation and deletion
+    var handleKeyDown = useCallback(function (index, event) {
+        var _a, _b, _c, _d, _e;
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Backspace':
+                if (!valueArray[index] && index > 0) {
+                    // If current field is empty, move to previous and clear it
+                    event.preventDefault();
+                    (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    handleChange(index - 1, '');
+                }
+                break;
+            case 'Delete':
+                // Clear current field
+                event.preventDefault();
+                handleChange(index, '');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0) {
+                    (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < length - 1) {
+                    (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                (_d = inputRefs.current[0]) === null || _d === void 0 ? void 0 : _d.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                (_e = inputRefs.current[length - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                break;
+        }
+    }, [disabled, valueArray, length, handleChange]);
+    // Handle paste
+    var handlePaste = useCallback(function (event) {
+        var _a;
+        if (disabled)
+            return;
+        event.preventDefault();
+        var pastedData = event.clipboardData.getData('text').slice(0, length);
+        if (pastedData) {
+            setValue(pastedData);
+            // Focus the next empty field or last field
+            var nextIndex = Math.min(pastedData.length, length - 1);
+            (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            // Check if OTP is complete
+            if (pastedData.length === length) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
+            }
+        }
+    }, [disabled, length, setValue, onComplete]);
+    // Handle focus and blur (simplified since we removed focus state)
+    var handleFocus = useCallback(function (index) {
+        // Focus logic can be added here if needed
+    }, []);
+    var handleBlur = useCallback(function () {
+        // Blur logic can be added here if needed
+    }, []);
+    // Build classes
+    var wrapperClasses = cn(theme.wrapper, className);
+    var containerClasses = cn(theme.container);
+    // Get input classes based on position within group
+    var getInputClasses = function (index) {
+        if (length === 6) {
+            // For 6-digit: two groups of 3
+            var isFirst = index === 0 || index === 3;
+            var isLast = index === 2 || index === 5;
+            return cn(theme.input, 'relative focus-within:z-10', {
+                '!rounded-r-none -mr-px': !isLast,
+                '!rounded-l-none': !isFirst,
+            });
+        }
+        else {
+            // For other lengths: one group
+            var isFirst = index === 0;
+            var isLast = index === length - 1;
+            return cn(theme.input, 'relative focus-within:z-10', {
+                '!rounded-r-none -mr-px': !isLast,
+                '!rounded-l-none': !isFirst,
+            });
+        }
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: wrapperClasses }, props),
+        label && (React__default.createElement(FormLabel, { htmlFor: "otp-input-0", className: theme.label }, label)),
+        React__default.createElement("div", { className: containerClasses }, length === 6 ? (
+        // For 6-digit OTP, create two groups of 3
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) { return (React__default.createElement(Input, { key: i, ref: function (el) {
+                    inputRefs.current[i] = el;
+                }, id: "otp-input-".concat(i), type: "text", value: valueArray[i] || '', onChange: function (e) { return handleChange(i, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(i, e); }, onFocus: function () { return handleFocus(i); }, onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(i), wrapperClassName: "!space-y-0" })); })),
+            React__default.createElement("span", { className: theme.separator }, "\u2014"),
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) {
+                var index = i + 3;
+                return (React__default.createElement(Input, { key: index, ref: function (el) {
+                        inputRefs.current[index] = el;
+                    }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(index), wrapperClassName: "!space-y-0" }));
+            })))) : (
+        // For other lengths, create one group
+        React__default.createElement("div", { className: "flex" }, Array.from({ length: length }, function (_, index) { return (React__default.createElement(Input, { key: index, ref: function (el) {
+                inputRefs.current[index] = el;
+            }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(index), wrapperClassName: "!space-y-0" })); })))),
+        error && (React__default.createElement("p", { className: theme.errorText }, error)),
+        !error && helperText && (React__default.createElement("p", { className: theme.helperText }, helperText))));
+});
+InputOTP.displayName = 'InputOTP';
+
+export { InputOTP };

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

@@ -0,0 +1,2 @@
+import { InputOTPTheme } from './InputOTP.types';
+export declare const inputOTPTheme: InputOTPTheme;

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

@@ -0,0 +1,11 @@
+var inputOTPTheme = {
+    wrapper: 'space-y-2',
+    container: 'flex items-center gap-3',
+    input: 'text-center !w-12 !min-w-12 !h-12 !min-h-12 text-lg',
+    separator: 'text-gray-400 font-medium select-none',
+    label: 'block text-sm font-medium text-gray-700 mb-1',
+    helperText: 'text-sm text-gray-500',
+    errorText: 'text-sm text-red-600',
+};
+
+export { inputOTPTheme };

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

@@ -0,0 +1,50 @@
+export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Number of OTP input fields
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Current OTP value
+     */
+    value?: string;
+    /**
+     * Callback when OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when OTP is complete (all fields filled)
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the OTP input group
+     */
+    label?: string;
+    /**
+     * Helper text below the inputs
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Auto-focus the first input on mount
+     * @default true
+     */
+    autoFocus?: boolean;
+}
+export interface InputOTPTheme {
+    wrapper: string;
+    container: string;
+    input: string;
+    separator: string;
+    label: string;
+    helperText: string;
+    errorText: string;
+}

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

@@ -0,0 +1,3 @@
+export { InputOTP } from './InputOTP';
+export type { InputOTPProps, InputOTPTheme } from './InputOTP.types';
+export { inputOTPTheme } from './InputOTP.theme';

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { RadioProps } from "./Radio.types";
+/**
+ * Radio component for selecting one option from a group
+ */
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/components/forms/Radio/Radio.js

@@ -0,0 +1,41 @@
+import React__default, { useState } from 'react';
+import { useRadioTheme } from './Radio.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+
+/**
+ * Radio component for selecting one option from a group
+ */
+var Radio = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, themeOverrides = _a.theme;
+    var _c = useState(false), internalChecked = _c[0], setInternalChecked = _c[1];
+    var theme = useRadioTheme(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseStyle);
+    // Determine if component is controlled or uncontrolled
+    var isControlled = controlledChecked !== undefined;
+    var isChecked = isControlled ? controlledChecked : internalChecked;
+    // Derive state flags
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var handleChange = function (e) {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
+    };
+    // Create state class for CSS selectors (like other components)
+    var stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    return (React__default.createElement("div", { className: "".concat(theme.container, " ").concat(stateClass) },
+        React__default.createElement("div", { className: theme.inputContainer },
+            React__default.createElement("input", { type: "radio", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "aria-invalid": isInvalid, className: theme.input }),
+            React__default.createElement("div", { className: "".concat(theme.dot, " ").concat(isChecked ? 'opacity-100' : '') })),
+        (label || description) && (React__default.createElement("div", { className: theme.labelContainer },
+            label && React__default.createElement(FormLabel, { htmlFor: id, state: state }, label),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: theme.description }, description))))));
+};
+
+export { Radio, Radio as default };

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

@@ -0,0 +1,21 @@
+import { RadioThemeConfig } from "./Radio.types";
+/**
+ * Default theme configuration for the Radio component
+ */
+export declare const radioTheme: RadioThemeConfig;
+/**
+ * Utility function to merge default theme with overrides
+ */
+export declare const useRadioTheme: (overrides?: Partial<RadioThemeConfig["baseStyle"]>) => {
+    container: string;
+    inputContainer: string;
+    labelContainer: string;
+    input: string;
+    dot: string;
+    description: string;
+    states?: {
+        default: string;
+        disabled: string;
+        invalid: string;
+    };
+};

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

@@ -0,0 +1,25 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Default theme configuration for the Radio component
+ */
+var radioTheme = {
+    baseStyle: {
+        container: "relative flex items-start gap-3",
+        inputContainer: "relative flex-shrink-0 size-6 flex items-center justify-center",
+        labelContainer: "cursor-pointer",
+        input: "size-6 appearance-none rounded-full border-2 border-gray-300 bg-white checked:border-primary-600 checked:bg-white disabled:border-gray-300 disabled:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400",
+        dot: "absolute pointer-events-none size-3 rounded-full bg-primary-600 opacity-0 checked:opacity-100 disabled:bg-gray-400 transition-all duration-400",
+        description: "text-sm text-text-secondary -mt-1",
+    },
+};
+/**
+ * Utility function to merge default theme with overrides
+ */
+var useRadioTheme = function (overrides) {
+    if (!overrides)
+        return radioTheme.baseStyle;
+    return __assign(__assign({}, radioTheme.baseStyle), overrides);
+};
+
+export { radioTheme, useRadioTheme };