@shohojdhara/atomix 0.3.3 → 0.3.5

package/dist/forms.d.ts

@@ -0,0 +1,1085 @@
+import React$1, { ReactNode } from 'react';
+
+/**
+ * Part-Based Styling Props
+ *
+ * Type definitions for styling individual component parts with className and style props.
+ * This enables granular customization of component internals.
+ */
+
+/**
+ * Style properties for a component part
+ */
+interface PartStyleProps {
+    /** Additional CSS class name for the part */
+    className?: string;
+    /** Inline styles for the part */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Generic component parts type
+ * T is a union of part names as strings
+ */
+type ComponentParts<T extends string> = {
+    [K in T]?: PartStyleProps;
+};
+/**
+ * Checkbox component parts
+ */
+type CheckboxParts = ComponentParts<'root' | 'input' | 'box' | 'icon' | 'label'> & {
+    /** Root container */
+    root?: PartStyleProps;
+    /** Input element */
+    input?: PartStyleProps;
+    /** Checkbox box */
+    box?: PartStyleProps;
+    /** Check icon */
+    icon?: PartStyleProps;
+    /** Label text */
+    label?: PartStyleProps;
+};
+/**
+ * Radio component parts
+ */
+type RadioParts = ComponentParts<'root' | 'input' | 'circle' | 'dot' | 'label'> & {
+    /** Root container */
+    root?: PartStyleProps;
+    /** Input element */
+    input?: PartStyleProps;
+    /** Radio circle */
+    circle?: PartStyleProps;
+    /** Inner dot */
+    dot?: PartStyleProps;
+    /** Label text */
+    label?: PartStyleProps;
+};
+
+/**
+ * Slot configuration with multiple rendering options
+ */
+interface SlotProps<T = any> {
+    /** Static children to render */
+    children?: React$1.ReactNode;
+    /** Render function with access to slot props */
+    render?: (props: T) => React$1.ReactNode;
+    /** Custom component to render */
+    component?: React$1.ComponentType<T>;
+}
+/**
+ * Slot props for Checkbox component
+ */
+interface CheckboxRootSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+interface CheckboxInputSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    type: 'checkbox';
+    checked?: boolean;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+interface CheckboxLabelSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+    htmlFor?: string;
+}
+/**
+ * Slot props for Radio component
+ */
+interface RadioRootSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+interface RadioInputSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    type: 'radio';
+    checked?: boolean;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+interface RadioLabelSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+    htmlFor?: string;
+}
+
+/**
+ * Checkbox CSS Variables
+ */
+declare const CHECKBOX_CSS_VARS: {
+    readonly '--atomix-checkbox-size': "checkbox size";
+    readonly '--atomix-checkbox-bg': "background color";
+    readonly '--atomix-checkbox-border-color': "border color";
+    readonly '--atomix-checkbox-border-width': "border width";
+    readonly '--atomix-checkbox-border-radius': "border radius";
+    readonly '--atomix-checkbox-transition': "transition";
+    readonly '--atomix-checkbox-checked-bg': "checked background";
+    readonly '--atomix-checkbox-checked-border-color': "checked border color";
+    readonly '--atomix-checkbox-hover-border-color': "hover border color";
+    readonly '--atomix-checkbox-focus-ring-color': "focus ring color";
+    readonly '--atomix-checkbox-focus-ring-width': "focus ring width";
+    readonly '--atomix-checkbox-disabled-opacity': "disabled opacity";
+    readonly '--atomix-checkbox-invalid-border-color': "invalid border color";
+    readonly '--atomix-checkbox-icon-size': "icon size";
+    readonly '--atomix-checkbox-icon-color': "icon color";
+    readonly '--atomix-checkbox-label-gap': "label spacing";
+    readonly '--atomix-checkbox-label-font-size': "label font size";
+    readonly '--atomix-checkbox-label-color': "label color";
+};
+/**
+ * Radio CSS Variables
+ */
+declare const RADIO_CSS_VARS: {
+    readonly '--atomix-radio-size': "radio size";
+    readonly '--atomix-radio-bg': "background color";
+    readonly '--atomix-radio-border-color': "border color";
+    readonly '--atomix-radio-border-width': "border width";
+    readonly '--atomix-radio-transition': "transition";
+    readonly '--atomix-radio-checked-bg': "checked background";
+    readonly '--atomix-radio-checked-border-color': "checked border color";
+    readonly '--atomix-radio-hover-border-color': "hover border color";
+    readonly '--atomix-radio-focus-ring-color': "focus ring color";
+    readonly '--atomix-radio-focus-ring-width': "focus ring width";
+    readonly '--atomix-radio-disabled-opacity': "disabled opacity";
+    readonly '--atomix-radio-invalid-border-color': "invalid border color";
+    readonly '--atomix-radio-dot-size': "dot size";
+    readonly '--atomix-radio-dot-color': "dot color";
+    readonly '--atomix-radio-label-gap': "label spacing";
+    readonly '--atomix-radio-label-font-size': "label font size";
+    readonly '--atomix-radio-label-color': "label color";
+};
+type CheckboxCSSVariable = keyof typeof CHECKBOX_CSS_VARS;
+type RadioCSSVariable = keyof typeof RADIO_CSS_VARS;
+
+/**
+ * Displacement mode for glass effect
+ */
+type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+/**
+ * Mouse position coordinates
+ */
+interface MousePosition {
+    x: number;
+    y: number;
+}
+/**
+ * OverLight configuration - can be boolean, 'auto', or object with settings
+ *
+ * @example
+ * // Boolean - explicit control
+ * overLight={true}
+ *
+ * @example
+ * // Auto-detection - automatically detects background brightness
+ * overLight="auto"
+ *
+ * @example
+ * // Object config - auto-detection with custom settings
+ * overLight={{
+ *   threshold: 0.8,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.0,
+ *   saturationBoost: 1.5
+ * }}
+ */
+type OverLightConfig = boolean | 'auto' | OverLightObjectConfig;
+/**
+ * OverLight object configuration
+ *
+ * When using object mode, the component will auto-detect background brightness
+ * and apply the custom settings. All properties are optional and will use
+ * sensible defaults if not provided.
+ *
+ * @example
+ * // Minimal config - only threshold
+ * overLight={{ threshold: 0.8 }}
+ *
+ * @example
+ * // Full config with all properties
+ * overLight={{
+ *   threshold: 0.75,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.1,
+ *   saturationBoost: 1.5
+ * }}
+ */
+interface OverLightObjectConfig {
+    /**
+     * Luminance threshold for auto-detection (0.1 - 1.0)
+     *
+     * Backgrounds with average luminance above this threshold will be
+     * considered "light" and trigger overLight mode.
+     *
+     * @default 0.7
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // More sensitive detection (triggers on lighter backgrounds)
+     * threshold: 0.6
+     *
+     * @example
+     * // Less sensitive detection (only very light backgrounds)
+     * threshold: 0.85
+     */
+    threshold?: number;
+    /**
+     * Base opacity for overLight layers (0.1 - 1.0)
+     *
+     * Controls the opacity of the base and overlay layers when overLight
+     * mode is active. This value is multiplied by hover/active intensity
+     * multipliers for dynamic effects.
+     *
+     * @default 0.5 (dynamic, depends on hover/active state)
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // Subtle overlay
+     * opacity: 0.3
+     *
+     * @example
+     * // Strong overlay
+     * opacity: 0.7
+     */
+    opacity?: number;
+    /**
+     * Contrast enhancement multiplier (0.5 - 2.5)
+     *
+     * Increases the contrast of the glass effect for better visibility
+     * on light backgrounds. Higher values create more dramatic effects.
+     *
+     * @default 1.4 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.5
+     *
+     * @example
+     * // Subtle contrast boost
+     * contrast: 1.2
+     *
+     * @example
+     * // High contrast for maximum visibility
+     * contrast: 2.0
+     */
+    contrast?: number;
+    /**
+     * Brightness adjustment multiplier (0.5 - 2.0)
+     *
+     * Adjusts the overall brightness of the glass effect. Values above 1.0
+     * brighten the effect, while values below 1.0 darken it.
+     *
+     * @default 0.85 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.0
+     *
+     * @example
+     * // Neutral brightness
+     * brightness: 1.0
+     *
+     * @example
+     * // Brighter effect
+     * brightness: 1.2
+     */
+    brightness?: number;
+    /**
+     * Saturation boost multiplier (0.5 - 3.0)
+     *
+     * Enhances color saturation for more vibrant glass effects on light
+     * backgrounds. This works in conjunction with the base saturation prop.
+     *
+     * @default 1.3 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 3.0
+     *
+     * @example
+     * // Moderate saturation boost
+     * saturationBoost: 1.2
+     *
+     * @example
+     * // High saturation for vivid effects
+     * saturationBoost: 2.0
+     */
+    saturationBoost?: number;
+}
+/**
+ * AtomixGlass component props interface
+ */
+interface AtomixGlassProps {
+    children: React.ReactNode;
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    elasticity?: number;
+    cornerRadius?: number;
+    globalMousePosition?: MousePosition;
+    mouseOffset?: MousePosition;
+    mouseContainer?: React.RefObject<HTMLElement | null> | null;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    overLight?: OverLightConfig;
+    mode?: DisplacementMode;
+    onClick?: () => void;
+    /**
+     * Shader variant for shader mode
+     */
+    shaderVariant?: 'liquidGlass' | 'premiumGlass';
+    /**
+     * Accessibility props
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    tabIndex?: number;
+    /**
+     * Performance and accessibility options
+     */
+    reducedMotion?: boolean;
+    highContrast?: boolean;
+    disableEffects?: boolean;
+    enableLiquidBlur?: boolean;
+    enableBorderEffect?: boolean;
+    enableOverLightLayers?: boolean;
+    /**
+     * Performance monitoring
+     */
+    enablePerformanceMonitoring?: boolean;
+    /**
+     * Debug mode for cornerRadius extraction
+     */
+    debugCornerRadius?: boolean;
+    /**
+     * Debug mode for overLight detection and configuration
+     *
+     * When enabled, logs detailed information about:
+     * - Auto-detection results (luminance values, threshold comparison)
+     * - Final overLight configuration values
+     * - Detection timing and performance
+     *
+     * Useful for debugging auto-detection issues and fine-tuning thresholds.
+     *
+     * @default false
+     *
+     * @example
+     * <AtomixGlass overLight="auto" debugOverLight={true}>
+     *   Content
+     * </AtomixGlass>
+     */
+    debugOverLight?: boolean;
+}
+/**
+ * Common component size options
+ */
+type Size = 'sm' | 'md' | 'lg';
+/**
+ * Theme color variants
+ */
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+/**
+ * Base component properties interface
+ */
+interface BaseComponentProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Component disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Component children
+     */
+    children?: ReactNode;
+    /**
+     * Inline style for the component root element
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Form component properties
+ */
+interface FormProps extends BaseComponentProps {
+    /**
+     * Form content
+     */
+    children: ReactNode;
+    /**
+     * Form submit handler
+     */
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Form reset handler
+     */
+    onReset?: (event: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Form ID
+     */
+    id?: string;
+    /**
+     * Form method
+     */
+    method?: 'get' | 'post';
+    /**
+     * Form encoding type
+     */
+    encType?: string;
+    /**
+     * Whether to disable HTML5 validation
+     */
+    noValidate?: boolean;
+    /**
+     * Form autocomplete setting
+     */
+    autoComplete?: string;
+}
+/**
+ * Form Group component properties
+ */
+interface FormGroupProps extends BaseComponentProps {
+    /**
+     * Form control content
+     */
+    children: ReactNode;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: ReactNode;
+    /**
+     * ID of the form control this label is for
+     */
+    htmlFor?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the field is valid
+     */
+    valid?: boolean;
+    /**
+     * Size variant
+     */
+    size?: Size;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+}
+/**
+ * Input component properties
+ */
+interface InputProps extends BaseComponentProps {
+    /**
+     * Input type
+     */
+    type?: string;
+    /**
+     * Input value
+     */
+    value?: string | number;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Input ID
+     */
+    id?: string;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * Autocomplete attribute
+     */
+    autoComplete?: string;
+    /**
+     * Whether the input should receive focus on render
+     */
+    autoFocus?: boolean;
+    /**
+     * Size variant
+     */
+    size?: Size;
+    /**
+     * Color variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Whether the input is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the input is valid
+     */
+    valid?: boolean;
+    /**
+     * Maximum length
+     */
+    maxLength?: number;
+    /**
+     * Minimum length
+     */
+    minLength?: number;
+    /**
+     * Input pattern
+     */
+    pattern?: string;
+    /**
+     * Minimum value (for number inputs)
+     */
+    min?: number | string;
+    /**
+     * Maximum value (for number inputs)
+     */
+    max?: number | string;
+    /**
+     * Step value (for number inputs)
+     */
+    step?: number | string;
+    /**
+     * Accessible label (if no visible label)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that describes this input
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Glass morphism effect
+     */
+    glass?: boolean | Omit<AtomixGlassProps, 'children'>;
+    /**
+     * Prefix icon (appears before the input)
+     */
+    prefixIcon?: React.ReactNode;
+    /**
+     * Suffix icon (appears after the input)
+     */
+    suffixIcon?: React.ReactNode;
+    /**
+     * Whether the input is clearable (shows clear button when value exists)
+     */
+    clearable?: boolean;
+    /**
+     * Handler for clear button click
+     */
+    onClear?: () => void;
+    /**
+     * Whether to show character counter
+     */
+    showCounter?: boolean;
+    /**
+     * Maximum character count for counter (uses maxLength if not provided)
+     */
+    maxCount?: number;
+    /**
+     * Whether password visibility toggle is enabled (for password inputs)
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+    /**
+     * Whether the input should take full width
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Select option
+ */
+interface SelectOption {
+    /**
+     * Option value
+     */
+    value: string;
+    /**
+     * Option display label
+     */
+    label: string;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Select component properties
+ */
+interface SelectProps extends BaseComponentProps {
+    /**
+     * Select options
+     */
+    options: SelectOption[];
+    /**
+     * Selected value(s)
+     */
+    value?: string | string[];
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLSelectElement>) => void;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is required
+     */
+    required?: boolean;
+    /**
+     * Select ID
+     */
+    id?: string;
+    /**
+     * Select name
+     */
+    name?: string;
+    /**
+     * Size variant
+     */
+    size?: Size;
+    /**
+     * Whether the select is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the select is valid
+     */
+    valid?: boolean;
+    /**
+     * Whether multiple options can be selected
+     */
+    multiple?: boolean;
+    /**
+     * Accessible label (if no visible label)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that describes this select
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Glass morphism effect for the select
+     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+     */
+    glass?: AtomixGlassProps | boolean;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+    /**
+     * Whether the select should take full width
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Checkbox component properties
+ */
+interface CheckboxProps extends BaseComponentProps {
+    /**
+     * Checkbox label
+     */
+    label?: ReactNode;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the checkbox is required
+     */
+    required?: boolean;
+    /**
+     * Checkbox ID
+     */
+    id?: string;
+    /**
+     * Checkbox name
+     */
+    name?: string;
+    /**
+     * Checkbox value
+     */
+    value?: string;
+    /**
+     * Whether the checkbox is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the checkbox is valid
+     */
+    valid?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Accessible label (if no visible label)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that describes this checkbox
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Glass morphism effect for the checkbox
+     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+     */
+    glass?: AtomixGlassProps | boolean;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+    /**
+     * Part-based styling for granular customization
+     * @example
+     * parts={{
+     *   root: { className: 'custom-checkbox', style: { margin: '8px' } },
+     *   input: { style: { accentColor: '#7AFFD7' } },
+     *   label: { className: 'checkbox-label' }
+     * }}
+     */
+    parts?: CheckboxParts;
+    /**
+     * CSS variable overrides for runtime customization
+     * @example
+     * cssVars={{
+     *   '--atomix-checkbox-size': '20px',
+     *   '--atomix-checkbox-checked-bg': '#7AFFD7'
+     * }}
+     */
+    cssVars?: Partial<Record<CheckboxCSSVariable, string | number>>;
+    /**
+     * Slot-based customization for complete control
+     * @example
+     * slots={{
+     *   root: { render: (props) => <motion.div {...props} /> },
+     *   input: { component: CustomInput },
+     *   label: { component: CustomLabel }
+     * }}
+     */
+    slots?: {
+        root?: SlotProps<CheckboxRootSlotProps>;
+        input?: SlotProps<CheckboxInputSlotProps>;
+        label?: SlotProps<CheckboxLabelSlotProps>;
+    };
+}
+/**
+ * Radio component properties
+ */
+interface RadioProps extends BaseComponentProps {
+    /**
+     * Radio label
+     */
+    label?: ReactNode;
+    /**
+     * Whether the radio is checked
+     */
+    checked?: boolean;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the radio is required
+     */
+    required?: boolean;
+    /**
+     * Radio ID
+     */
+    id?: string;
+    /**
+     * Radio name
+     */
+    name?: string;
+    /**
+     * Radio value
+     */
+    value?: string;
+    /**
+     * Whether the radio is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the radio is valid
+     */
+    valid?: boolean;
+    /**
+     * Accessible label (if no visible label)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that describes this radio
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Glass morphism effect for the radio button
+     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+     */
+    glass?: AtomixGlassProps | boolean;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+    /**
+     * Part-based styling for granular customization
+     * @example
+     * parts={{
+     *   root: { className: 'custom-radio', style: { margin: '8px' } },
+     *   input: { style: { accentColor: '#7AFFD7' } },
+     *   label: { className: 'radio-label' }
+     * }}
+     */
+    parts?: RadioParts;
+    /**
+     * CSS variable overrides for runtime customization
+     * @example
+     * cssVars={{
+     *   '--atomix-radio-size': '20px',
+     *   '--atomix-radio-checked-bg': '#7AFFD7'
+     * }}
+     */
+    cssVars?: Partial<Record<RadioCSSVariable, string | number>>;
+    /**
+     * Slot-based customization for complete control
+     * @example
+     * slots={{
+     *   root: { render: (props) => <motion.div {...props} /> },
+     *   input: { component: CustomInput },
+     *   label: { component: CustomLabel }
+     * }}
+     */
+    slots?: {
+        root?: SlotProps<RadioRootSlotProps>;
+        input?: SlotProps<RadioInputSlotProps>;
+        label?: SlotProps<RadioLabelSlotProps>;
+    };
+}
+/**
+ * Textarea component properties
+ */
+interface TextareaProps extends BaseComponentProps {
+    /**
+     * Textarea value
+     */
+    value?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the textarea is required
+     */
+    required?: boolean;
+    /**
+     * Whether the textarea is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Textarea ID
+     */
+    id?: string;
+    /**
+     * Textarea name
+     */
+    name?: string;
+    /**
+     * Number of rows
+     */
+    rows?: number;
+    /**
+     * Number of columns
+     */
+    cols?: number;
+    /**
+     * Maximum length
+     */
+    maxLength?: number;
+    /**
+     * Minimum length
+     */
+    minLength?: number;
+    /**
+     * Size variant
+     */
+    size?: Size;
+    /**
+     * Color variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Whether the textarea is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether the textarea is valid
+     */
+    valid?: boolean;
+    /**
+     * Whether the textarea should receive focus on render
+     */
+    autoFocus?: boolean;
+    /**
+     * Accessible label (if no visible label)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that describes this textarea
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Glass morphism effect
+     */
+    glass?: boolean | Omit<AtomixGlassProps, 'children'>;
+    /**
+     * Whether to show character counter
+     */
+    showCounter?: boolean;
+    /**
+     * Maximum character count for counter (uses maxLength if not provided)
+     */
+    maxCount?: number;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+    /**
+     * Whether the textarea should take full width
+     */
+    fullWidth?: boolean;
+}
+
+/**
+ * Checkbox - A component for checkbox inputs
+ */
+declare const Checkbox: React$1.FC<CheckboxProps>;
+
+/**
+ * Form - A component for creating form layouts
+ */
+declare const Form: React$1.FC<FormProps>;
+
+/**
+ * FormGroup - A component for grouping form controls with labels and help text
+ */
+declare const FormGroup: React$1.FC<FormGroupProps>;
+
+/**
+ * Input - A component for text input fields
+ */
+declare const Input: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>>;
+
+/**
+ * Radio - A component for radio button inputs
+ */
+declare const Radio: React$1.FC<RadioProps>;
+
+/**
+ * Select - A component for dropdown selection
+ */
+declare const Select: React$1.FC<SelectProps>;
+
+/**
+ * Textarea - A component for multiline text input
+ */
+declare const Textarea: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>>;
+
+export { Checkbox, Form, FormGroup, Input, Radio, Select, Textarea };
+export type { CheckboxProps, FormGroupProps, FormProps, InputProps, RadioProps, SelectProps, TextareaProps };