@stratakit/bricks/dist/TextBox.d.ts

Small, modular components for StrataKit

import * as React from "react";
import { Icon } from "@stratakit/foundations";
import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface BaseInputProps extends FocusableProps<"input"> {
}
interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
    /** Input is a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) and no content is permitted. */
    children?: never;
    /**
     * Describes a text based [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
     * based on the value type the user will enter.
     *
     * @default "text"
     */
    type?: Extract<BaseInputProps["type"], "text" | "email" | "password" | "search" | "tel" | "url" | "number" | "date">;
}
/**
 * An input component that allows users to enter text based values.
 *
 * Example usage:
 * ```tsx
 * <TextBox.Input name="greeting" defaultValue="Hello" />
 * ```
 *
 * To add additional decorations, see `TextBox.Root` component.
 *
 * Use with the `Field` components to automatically handle ID associations for
 * labels and descriptions:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>First name</Field.Label>
 *   <Field.Control render={<TextBox.Input name="firstName" />} />
 * </Field.Root>
 * ```
 *
 * Without the `Field` components you will need to manually associate labels,
 * descriptions, etc.:
 * ```tsx
 * <Label htmlFor="fruit">Fruit</Label>
 * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
 * <Description id="fruit-description">Something to include in a fruit salad.</Description>
 * ```
 *
 * Underneath, it's an HTML input, i.e. `<input>`, so it supports the same props, including
 * `value`, `defaultValue`, `onChange`, and `disabled`.
 *
 * For a multiline text input, use the `TextBox.Textarea` component.
 */
declare const TextBoxInput: React.ForwardRefExoticComponent<TextBoxInputProps & React.RefAttributes<HTMLElement | HTMLInputElement>>;
interface TextareaProps extends FocusableProps<"textarea"> {
}
/**
 * A styled textarea element that allows users to enter multiline text values.
 *
 * Example usage:
 * ```tsx
 * <TextBox.Textarea defaultValue="Hello" />
 * ```
 *
 * Use with the `Field` components to automatically handle ID associations for
 * labels and descriptions:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>Leave a comment, be kind</Field.Label>
 *   <Field.Control render={<TextBox.Textarea name="comment" />} />
 * </Field.Root>
 * ```
 *
 * Without the `Field` components you will need to manually associate labels,
 * descriptions, etc.:
 * ```tsx
 * <Label htmlFor="fruit">Fruit</Label>
 * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
 * <Description id="fruit-description">Something to include in a fruit salad.</Description>
 * ```
 *
 * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
 * `value`, `defaultValue`, `onChange`, and `disabled`.
 */
declare const TextBoxTextarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLElement | HTMLTextAreaElement>>;
interface TextBoxRootProps extends BaseProps {
}
/**
 * Compound component for a text input. Allows adding additional decorations.
 *
 * Example usage to add an end icon:
 * ```tsx
 * <TextBox.Root>
 *   <TextBox.Input defaultValue="Hello" />
 *   <TextBox.Icon href={...} />
 * </TextBox.Root>
 * ```
 *
 * Use with the `Field` components to automatically handle ID associations for
 * labels and descriptions:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>First name</Field.Label>
 *   <Field.Control
 *     render={(controlProps) => (
 *       <TextBox.Root>
 *         <TextBox.Input name="firstName" {...controlProps} />
 *         <TextBox.Icon href={…} />
 *       </TextBox.Root>
 *     )}
 *   />
 * </Field.Root>
 * ```
 */
declare const TextBoxRoot: React.ForwardRefExoticComponent<TextBoxRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TextBoxIconProps extends React.ComponentProps<typeof Icon> {
}
/**
 * A static icon decoration for the `TextBox.Root` component. Can be added before or after the `TextBox.Input`.
 */
declare const TextBoxIcon: React.ForwardRefExoticComponent<Omit<TextBoxIconProps, "ref"> & React.RefAttributes<HTMLElement | SVGSVGElement>>;
interface TextBoxTextProps extends BaseProps<"span"> {
}
/**
 * A static text decoration for the `TextBox.Root` component. Can be added before or after the `TextBox.Input`.
 */
declare const TextBoxText: React.ForwardRefExoticComponent<TextBoxTextProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
export { TextBoxRoot as Root, TextBoxInput as Input, TextBoxTextarea as Textarea, TextBoxIcon as Icon, TextBoxText as Text, };