@react-md/core 1.0.0-next.0

package/dist/form/types.d.ts

@@ -0,0 +1,447 @@
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+import { type PropsWithRef } from "../types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-form-error-color"?: string;
+        "--rmd-form-active-color"?: string;
+        "--rmd-form-focus-color"?: string;
+        "--rmd-form-disabled-color"?: string;
+    }
+}
+/**
+ * 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 type FormTheme = "none" | "underline" | "filled" | "outline";
+/**
+ * The direction that the underline should appear from when the theme is
+ * `"underline"` or `"filled"`.
+ */
+export type FormUnderlineDirection = "left" | "center" | "right";
+export interface FormThemeOptions {
+    /**
+     * The current theme type.
+     *
+     * @defaultValue `"outline"`
+     */
+    theme?: FormTheme;
+    /**
+     * The current underline direction.
+     *
+     * @defaultValue `"left"`
+     */
+    underlineDirection?: FormUnderlineDirection;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface FormConfiguration extends Required<FormThemeOptions> {
+    /**
+     * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable
+     * is set to `true` in the Sass configuration.
+     *
+     * Since the `checked` state only changes for the radio that has been clicked,
+     * the previously checked radio would also be shown as checked with no way of
+     * fixing it without controlling the radio component. When this flag is
+     * enabled, the checked icons and state are handled through css instead of
+     * `useState`.
+     *
+     * @defaultValue `true`
+     */
+    uncontrolledToggles: boolean;
+}
+export interface FormComponentStates {
+    /** @defaultValue `false` */
+    error?: boolean;
+    /** @defaultValue `false` */
+    active?: boolean;
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /** @defaultValue `false` */
+    readOnly?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+ */
+export type AutoCompleteValue = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tek-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface UserAgentAutoCompleteProps {
+    /**
+     * Set this to enable additional autocompletion suggestions for a user for
+     * different form fields. Using this prop will update the
+     * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to
+     * this value.
+     *
+     * @example
+     * ```tsx
+     * <Form>
+     *   <TextField
+     *     label="Enter your credit card number"
+     *     autoCompleteValue="cc-number"
+     *     {...creditCardProps}
+     *     inputMode="number"
+     *   />
+     *   <TextField
+     *     label="Name on card"
+     *     autoCompleteValue="cc-name"
+     *     {...creditCardNameProps}
+     *   />
+     *   <TextField
+     *     label="Security code"
+     *     autoCompleteValue="cc-csc"
+     *     {...securityCodeProps}
+     *     inputMode="number"
+     *   />
+     *   <Button type="submit">Submit</Button>
+     * </Form>
+     * ```
+     *
+     * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+     * @see {@link AutoCompleteValue}
+     * @see {@link autoComplete}
+     * @see {@link UserAgentAutoCompleteProps.name}
+     */
+    autoCompleteValue?: AutoCompleteValue;
+    /**
+     * @see {@link autoCompleteValue}
+     * @defaultValue `autoCompleteValue`
+     */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+    /**
+     * @see {@link autoCompleteValue}
+     * @defaultValue `autoCompleteValue`
+     */
+    name?: string;
+}
+export interface FormMessageClassNameOptions {
+    className?: string;
+    /**
+     * Boolean if the message should gain the error state which changes the text
+     * color to `red` by default.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * The current theme for the related text field. This is really only used to
+     * match the current horizontal padding of the text field.
+     *
+     * @defaultValue `"outline"`
+     */
+    theme?: FormTheme;
+}
+export interface FormMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, "minLength" | "maxLength">, FormMessageClassNameOptions {
+    /**
+     * If this component is acting as a form-level error message handler, the role
+     * should be updated to be `"alert"` for additional accessibility.
+     *
+     * Note: when creating a form-level error message handler, the messages should
+     * no longer appear as the user types and instead once the user tries to
+     * submit the form. Having an alert role disrupts normal screen reader
+     * behavior by immediately reading changes in this element.
+     *
+     * @defaultValue `undefined`
+     */
+    role?: "alert";
+    /**
+     * Boolean if the children should no longer be wrapped in a `<p>` tag. This
+     * should normally only be disabled if using a custom error message wrapper or
+     * the counter behavior is not being used. To get correct alignments of the
+     * message and counter, the `children` must be wrapped in some element and
+     * cannot be plain test.
+     *
+     * Note: this will always be considered `true` if the `role` is set to
+     * `"alert"`.
+     *
+     * @defaultValue `false`
+     */
+    disableWrap?: boolean;
+    /**
+     * An optional style to apply to the `<p>` tag that surrounds the `children`.
+     * This will not be used if `role="alert"` or `disableWrap={true}`.
+     */
+    messageStyle?: CSSProperties;
+    /**
+     * An optional className to apply to the `<p>` tag that surrounds the
+     * `children`. This will not be used if `role="alert"` or
+     * `disableWrap={true}`.
+     */
+    messageClassName?: string;
+}
+/**
+ * Props that are used to automatically add a counter for the remaining letters
+ * available for the text field. The counter will always be created to the right
+ * of the optional message.
+ *
+ * The counter is really a simple string of: `${length} / ${maxLength}`.
+ *
+ * If you need additional customization, it is recommended to create your own
+ * implementation such as:
+ *
+ * ```tsx
+ * <FormMessage>
+ *   {errorMessage}
+ *   <MyCounter {...props} />
+ * </FormMessage>
+ * ```
+ *
+ * Note: this should not be used alongside form-level messages.
+ *
+ * @remarks \@since 2.9.0 Renamed from `FormMessageCounterProps` to
+ * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component
+ * was added
+ */
+export interface FormMessageInputLengthCounterProps {
+    /**
+     * The current length of the value in the related text field.
+     */
+    length: number;
+    /**
+     * The max length allowed for the value in the related text field.
+     */
+    maxLength: number;
+    /**
+     * An optional style to apply to the counter wrapper element.
+     */
+    counterStyle?: CSSProperties;
+    /**
+     * An optional className to apply to the counter wrapper element.
+     */
+    counterClassName?: string;
+}
+export interface FormMessageWithCounterProps extends FormMessageProps, FormMessageInputLengthCounterProps {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface FormMessageWithoutCounterProps extends FormMessageProps {
+    length?: never;
+    maxLength?: never;
+    counterStyle?: never;
+    counterClassName?: never;
+}
+export interface FormMessageContainerExtension {
+    /**
+     * If the extension doesn't actually want to render the `FormMessage`
+     * component, these props are optional. It kind of eliminates the whole
+     * purpose of this component though.
+     */
+    messageProps?: PropsWithRef<FormMessageProps & Partial<FormMessageInputLengthCounterProps>, HTMLDivElement>;
+    /**
+     * Any props (and an optional ref) to provide to the `<div>` surrounding the
+     * children and `FormMessage` component.
+     *
+     * Note: This will not be used if the `messageProps` are not provided since
+     * only the `children` will be returned without the container.
+     */
+    messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+}
+/** @remarks \@since 6.0.0 */
+export interface LabelClassNameOptions {
+    className?: string;
+    /**
+     * Set this to `true` to remove the `gap` style from the label.
+     *
+     * @see `$label-gap`
+     * @defaultValue `false`
+     */
+    gap?: boolean;
+    /**
+     * Set this to `true` when the parent `TextFieldContainer` has the `dense`
+     * spec enabled. This updates the floating styles to match the smaller height.
+     *
+     * @defaultValue `false`
+     */
+    dense?: boolean;
+    /**
+     * Set this to `true` to update the label's color to the error color.
+     *
+     * @see `$error-color`
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * Set this to `true` to update the label's color to the active color.
+     *
+     * @see `$active-color`
+     * @defaultValue `false`
+     */
+    active?: boolean;
+    /**
+     * Set this to `true` if the label should gain `flex-direction: column`
+     * styling.
+     *
+     * @defaultValue `false`
+     */
+    stacked?: boolean;
+    /**
+     * Set this to `true` to update the label's color to be the disabled color.
+     *
+     * @see `$disabled-color`
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * Set this to true when label can floating above an input, textarea, or
+     * select inside of a `TextFieldContainer`.
+     *
+     * @defaultValue `false`
+     */
+    floating?: boolean;
+    /**
+     * Set this to true when label is currently floating above an input,
+     * textarea, or selected inside of a `TextFieldContainer`.
+     *
+     * @see {@link active}
+     * @defaultValue `active`
+     */
+    floatingActive?: boolean;
+    /**
+     * Set this to `true` to gain `flex-direction: row-reversed` styling. If the
+     * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will
+     * be applied.
+     *
+     * @defaultValue `false`
+     */
+    reversed?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    inactive?: boolean;
+}
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, LabelClassNameOptions {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ConfigurableTextFieldAddonProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Boolean if the addon should be presentational only and prevent pointer
+     * events.
+     *
+     * @defaultValue `false`
+     */
+    pointerEvents?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0 Added support for `leftAddonProps` and
+ * `rightAddonProps`.
+ */
+export interface TextFieldContainerOptions extends FormThemeOptions, FormComponentStates {
+    /**
+     * Set this to `true` to enable the dense spec which reduces the height.
+     *
+     * @defaultValue `false`
+     */
+    dense?: boolean;
+    /**
+     * Set this to `true` to change the style from `display: flex` to
+     * `display: inline-flex`.
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+    /**
+     * Set this to `true` if this component should stretch to fill a flex or grid
+     * container using `flex: 1 1 auto`.
+     *
+     * @defaultValue `false`
+     */
+    stretch?: boolean;
+    /**
+     * This should generally be an icon or a button that will be placed before the
+     * `TextField` or `TextArea`.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.
+     *
+     * @remarks \@since 6.0.0
+     */
+    leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps, HTMLSpanElement>;
+    /**
+     * @see {@link TextFieldAddonProps.disabled}
+     *
+     * @defaultValue `false`
+     */
+    disableLeftAddonStyles?: boolean;
+    /**
+     * This should generally be an icon or a button that will be placed after the
+     * `TextField` or `TextArea`.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.
+     *
+     * @remarks \@since 6.0.0
+     */
+    rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps, HTMLSpanElement>;
+    /**
+     * @see {@link TextFieldAddonProps.disabled}
+     *
+     * @defaultValue `false`
+     */
+    disableRightAddonStyles?: boolean;
+}
+export interface FormFieldOptions extends TextFieldContainerOptions, FormMessageContainerExtension {
+    /**
+     * An optional floating label to use with the text field. A label is generally
+     * recommended for accessibility, but can be omitted if an `aria-label` or
+     * `aria-labelledby` is provided.
+     */
+    label?: ReactNode;
+    /**
+     * Any additional props and/or ref that should be passed to the `<label>`
+     * element when a {@link label} is provided.
+     *
+     * @example
+     * ```tsx
+     * labelProps={{
+     *   ref: labelRef,
+     *   style: {},
+     *   className: "some-custom-class-name",
+     *   onClick: (event) => {
+     *     // do something
+     *   }
+     * }}
+     * ```
+     */
+    labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;
+    /**
+     * A convenience prop to apply a custom style to a label. This is equivalent
+     * to:
+     *
+     * ```ts
+     * labelProps={{
+     *   style: // some style here
+     * }}
+     * ```
+     */
+    labelStyle?: CSSProperties;
+    /**
+     * A convenience prop to apply a custom className to a label. This is
+     * equivalent to:
+     *
+     * ```ts
+     * labelProps={{
+     *   className: "some-class-name",
+     * }}
+     * ```
+     */
+    labelClassName?: string;
+}

package/dist/form/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/form/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-error-color\"?: string;\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n    \"--rmd-form-disabled-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutoCompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutoCompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutoCompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutoCompleteProps.name}\n   */\n  autoCompleteValue?: AutoCompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAmhBA,WAmDC"}