@react-md/form/types/FormThemeProvider.d.ts

This package is for creating all the different form input types.

import type { ReactElement, ReactNode } from "react";
/**
 * The supported themes for the `TextField`, `TextArea`, and `Select`
 * components.
 *
 * - "none" - display as an unstyled text field without any border or background
 *   colors.
 * - "underline" - display with only an underline that gains the form active
 *   color and animates from the left or right to the other side when the field
 *   is focused.
 * - "filled" - an extension of the `"underline"` state that will also have a
 *   slightly dark background applied.
 * - "outline" - outlines the entire text field in a border and applies the
 *   active color as box shadow when the field is focused.
 */
export declare type FormTheme = "none" | "underline" | "filled" | "outline";
/**
 * The direction that the underline should appear from when the theme is
 * `"underline"` or `"filled"`.
 */
export declare type FormUnderlineDirection = "left" | "center" | "right";
export interface FormThemeOptions {
    /**
     * The current theme type.
     */
    theme?: FormTheme;
    /**
     * The current underline direction.
     */
    underlineDirection?: FormUnderlineDirection;
}
export declare type FormThemeContext = Required<FormThemeOptions>;
/**
 * Gets the current theme values for a form component by inheriting the current
 * form theme via context. If you provide an object of theme props, the returned
 * value will use any defined values from the theme props and fallback to the
 * context value.
 *
 * Example:
 * ```ts
 * // everything is inherited
 * const formTheme = useFormTheme();
 *
 * // theme will be set to "underline" while the others will be inherited
 * const formTheme = useFormTheme({ theme: "underline" });
 * ```
 */
export declare function useFormTheme(options?: FormThemeOptions): FormThemeContext;
export interface FormThemeProviderProps extends FormThemeOptions {
    children: ReactNode;
}
/**
 * Since you'll normally want all of your form components to use the same theme,
 * this is a simple way to provide the same theme to all components without
 * needing all the prop-drilling/copying.
 */
export declare function FormThemeProvider({ theme, underlineDirection, children, }: FormThemeProviderProps): ReactElement;