@worktif/purei/dist/src/components/forms/form-text-field/index.d.ts

Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes

/**
 * AnimatedInput is a styled component based on the MUI TextField component. It customizes
 * the input field appearance by adding a smooth transition effect to its border color and
 * a glow effect during focus.
 *
 * The customization includes:
 * - A transition effect for the border color with a duration of 0.3 seconds and easing.
 * - A focused state with a blue-tinted border color and a subtle glowing shadow.
 *
 * This component is useful for enhancing the visual interactivity and responsiveness
 * of input fields in the user interface.
 */
export declare const AnimatedInput: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
 * FloatingLabelInput is a styled component based on the Material-UI TextField.
 * It customizes the appearance and behavior of the input label, particularly
 * focusing on the label transition and styling during focus events.
 *
 * Key Features:
 * - Smooth transition effect for label appearance with 0.3s duration.
 * - Changes label color and position when the input is focused.
 *   - Label color transitions to "#33658A" to visually indicate focus state.
 *   - Label is repositioned upwards to provide a "floating" appearance.
 *
 * Ideal for enhancing the user experience in forms where a visually appealing
 * floating label effect is desired.
 */
export declare const FloatingLabelInput: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
 * HighlightedInput is a styled component based on Material-UI's TextField.
 * It customizes the appearance of the input field, including borders, labels, text, and placeholder,
 * to create a visually distinctive style using a specified color theme.
 *
 * Styling Properties:
 * - Input Border:
 *   - Default: Uses the primary color "#33658A".
 *   - Hover: Displays a hover color "#86BBD8".
 *   - Focus: Highlights the border with a focus color "#2F4858".
 * - Label:
 *   - Default: The label text uses the primary color "#2F4858".
 *   - Focus: The label changes to the focus color "#33658A".
 * - Input Text:
 *   - Default: The text inside the input field uses the color "#2F4858".
 *   - Placeholder: Placeholder text is styled with the color "#86BBD8" and has reduced opacity.
 * - Supported styles for `MuiInput-underline` and `MuiOutlinedInput-root`.
 *
 * This styled component applies consistent color theming with hover and focus states
 * to enhance the user experience.
 */
export declare const HighlightedInput: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
 * A styled component based on the Material-UI `TextField` component that customizes
 * the input field with specific focus behavior.
 *
 * This component applies a smooth box-shadow transition effect to the root of the input field.
 * When the input field is focused, it displays a glowing effect around the field using the
 * box-shadow property.
 *
 * The glow effect is designed to complement the application's secondary color theme.
 *
 * @constant {StyledComponent} FocusedInput
 */
export declare const FocusedInput: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
 * InternalInput is a custom styled TextField component using Material-UI's
 * `styled` utility. It provides a custom design and theming for an input
 * field with specific styles and behaviors for different states such as
 * hovering, focus, and error states.
 *
 * It applies various styles using a theme-based approach for consistency and
 * adaptability across the application.
 *
 * Main Features:
 * - Custom padding and font styles.
 * - Gradient-based borders for focused state.
 * - No traditional box shadow or outline during interaction.
 * - Distinct error states with specific border styles.
 * - Supports theming with Material-UI theme properties.
 *
 * Custom behaviors:
 * - Dynamic styles applied based on component states, such as focus and hover.
 * - Unique styling for error, helper text, and label elements, ensuring consistent design.
 *
 * Dependencies:
 * - Relies on Material-UI Styles such as TextField, theme, and outlinedInputClasses.
 * - Uses color manipulation utility functions like `alpha` for state-specific styles.
 *
 * Notes:
 * - This component overrides Material-UI's default TextField appearance to
 *   conform to specific design guidelines.
 * - It utilizes custom color variables (e.g., `brand`) for consistent branding.
 */
export declare const InternalInput: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
 * PlaceholderTextField is a styled version of the Material-UI TextField component.
 * It customizes the appearance of the outlined input field,
 * including border radius, background color, and focused state border color.
 *
 * Customizations include:
 * - Setting a border radius of 8px for the outlined input.
 * - Applying a background color of #fafbff to the input field.
 * - Adjusting the border color to match the theme's primary color when the input is focused.
 *
 * This component leverages Material-UI's styling system and theme integration to provide
 * consistent design alignment with the application's theme.
 */
export declare const PlaceholderTextField: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;