@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/dist/form/TextArea.d.ts

@@ -2,7 +2,12 @@ import { type CSSProperties, type HTMLAttributes, type TextareaHTMLAttributes }
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions } from "./types.js";
 import { type TextAreaResize } from "./useResizingTextArea.js";
+/**
+ * @remarks \@since 6.0.0 Added `containerProps`.
+ */
 export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** @defaultValue `"text-area-" + useId()` */
+    id?: string;
     /**
      * Optional placeholder text to display in the text field.
      *
@@ -51,6 +56,12 @@ export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<
      * This will only be applied when {@link resize} is set to `"auto"`.
      */
     resizeContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Optional props to provide to the {@link TextFieldContainer} component.
+     * There probably isn't any real use for this prop other than if you need to
+     * add a `ref` for some DOM behavior.
+     */
+    containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
  * **Client Component**

package/dist/form/TextArea.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
-import { forwardRef, useRef } from "react";
+import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
+import { ResizingTextAreaWrapper } from "./ResizingTextAreaWrapper.js";
 import { TextFieldContainer } from "./TextFieldContainer.js";
 import { getFormConfig } from "./formConfig.js";
 import { textArea, textAreaContainer } from "./textAreaStyles.js";
@@ -29,18 +29,18 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
  * }
  * ```
  */ export const TextArea = /*#__PURE__*/ forwardRef(function TextArea(props, ref) {
-    const { id: propId, style, className, label, labelProps, labelStyle, labelClassName, areaStyle, areaClassName, resizeContainerProps, resize = "auto", dense = false, error = false, active = false, inline: propInline = false, stretch = false, leftAddon, rightAddon, disableLeftAddonStyles = false, disableRightAddonStyles = false, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, rows = 2, maxRows = -1, onChange: propOnChange, disableTransition = false, ...remaining } = props;
+    const { id: propId, style, className, label, labelProps, labelStyle, labelClassName, areaStyle, areaClassName, resizeContainerProps, resize = "auto", dense = false, error = false, active = false, inline: propInline = false, stretch = false, leftAddon, rightAddon, disableLeftAddonStyles = false, disableRightAddonStyles = false, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, rows = 2, maxRows = -1, onChange: propOnChange, disableTransition: propDisableTransition, ...remaining } = props;
     const { disabled = false, readOnly = false, value, defaultValue } = props;
-    const id = useEnsuredId(propId, "text-field");
+    const id = useEnsuredId(propId, "text-area");
     const theme = getFormConfig("theme", propTheme);
     const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
     const [areaRef, areaRefCallback] = useEnsuredRef(ref);
-    const containerRef = useRef(null);
-    const { maskRef, height, onChange, scrollable } = useResizingTextArea({
+    const { maskRef, containerRef, height, onChange, scrollable, disableTransition } = useResizingTextArea({
         maxRows,
         resize,
         onChange: propOnChange,
-        containerRef
+        containerRef: containerProps?.ref,
+        disableTransition: propDisableTransition
     });
     let { placeholder = "" } = props;
     if (label && !placeholder) {
@@ -57,6 +57,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
         rows: rows,
         disabled: disabled,
         onChange: onChange,
+        placeholder: placeholder,
         style: areaStyle,
         className: textArea({
             resize,
@@ -84,38 +85,27 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
         ]
     });
     if (resize === "auto") {
-        children = /*#__PURE__*/ _jsxs("div", {
+        children = /*#__PURE__*/ _jsx(ResizingTextAreaWrapper, {
             ...resizeContainerProps,
-            className: cnb("rmd-textarea-container__inner", !disableTransition && "rmd-textarea-container__inner--animate", resizeContainerProps?.className),
-            children: [
-                area,
-                labelNode,
-                /*#__PURE__*/ _jsx("textarea", {
-                    "aria-hidden": true,
-                    id: `${id}-mask`,
-                    ref: maskRef,
-                    defaultValue: value ?? defaultValue,
-                    readOnly: true,
-                    tabIndex: -1,
-                    rows: rows,
-                    style: areaStyle,
-                    className: textArea({
-                        mask: true,
-                        resize,
-                        className: areaClassName
-                    })
-                })
-            ]
+            maskId: `${id}-mask`,
+            maskRef: maskRef,
+            rows: rows,
+            areaStyle: areaStyle,
+            areaClassName: areaClassName,
+            defaultValue: value ?? defaultValue,
+            disableTransition: disableTransition,
+            children: children
         });
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
         messageProps: messageProps,
         children: /*#__PURE__*/ _jsx(TextFieldContainer, {
+            ...containerProps,
             ref: containerRef,
             style: {
                 ...style,
-                "--rmd-form-textarea-height": height
+                "--rmd-textarea-height": height
             },
             className: textAreaContainer({
                 animate: !disableTransition && resize == "auto",

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  useResizingTextArea,\n  type TextAreaResize,\n} from \"./useResizingTextArea.js\";\n\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense = false,\n      error = false,\n      active = false,\n      inline: propInline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition = false,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { maskRef, height, onChange, scrollable } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <div\n          {...resizeContainerProps}\n          className={cnb(\n            \"rmd-textarea-container__inner\",\n            !disableTransition && \"rmd-textarea-container__inner--animate\",\n            resizeContainerProps?.className\n          )}\n        >\n          {area}\n          {labelNode}\n          <textarea\n            aria-hidden\n            id={`${id}-mask`}\n            ref={maskRef}\n            defaultValue={value ?? defaultValue}\n            readOnly\n            tabIndex={-1}\n            rows={rows}\n            style={areaStyle}\n            className={textArea({\n              mask: true,\n              resize,\n              className: areaClassName,\n            })}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-form-textarea-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","stretch","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","rows","maxRows","onChange","propOnChange","disableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","containerRef","maskRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","div","aria-hidden","tabIndex","mask","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  useResizingTextArea,\n  type TextAreaResize,\n} from \"./useResizingTextArea.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense = false,\n      error = false,\n      active = false,\n      inline: propInline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        placeholder={placeholder}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-textarea-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","stretch","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}

package/dist/form/TextField.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
+import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
  * These are all the "supported" input types for react-md so that they at least
  * render reasonably well by default. There is no built-in validation or
@@ -20,7 +20,7 @@ export type TextFieldInputAttributes = Omit<InputHTMLAttributes<HTMLInputElement
 /**
  * @remarks \@since 6.0.0 Removed the `containerRef` prop.
  */
-export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoCompleteProps, FormFieldOptions {
+export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutocompleteProps, FormFieldOptions {
     /**
      * @defaultValue `"text-field-" + useId()`
      */

package/dist/form/TextField.js

@@ -4,7 +4,6 @@ import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
 import { TextFieldContainer } from "./TextFieldContainer.js";
-import { getFormConfig } from "./formConfig.js";
 import { textField } from "./textFieldStyles.js";
 /**
  * **Server Component**
@@ -38,11 +37,9 @@ import { textField } from "./textFieldStyles.js";
  * }
  * ```
  */ export const TextField = /*#__PURE__*/ forwardRef(function TextField(props, ref) {
-    const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense = false, error = false, active = false, inline = false, stretch = false, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles = false, disableRightAddonStyles = false, inputStyle, inputClassName, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
-    const { disabled = false, readOnly = false } = props;
+    const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, stretch, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
+    const { disabled, readOnly } = props;
     const id = useEnsuredId(propId, "text-field");
-    const theme = getFormConfig("theme", propTheme);
-    const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
     let { placeholder = "" } = props;
     if (label && !placeholder) {
         // See the placeholder type definition comments for information
@@ -50,7 +47,11 @@ import { textField } from "./textFieldStyles.js";
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
-        messageProps: messageProps,
+        messageProps: messageProps && {
+            error,
+            theme,
+            ...messageProps
+        },
         children: /*#__PURE__*/ _jsxs(TextFieldContainer, {
             ...containerProps,
             style: style,

package/dist/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @remarks\n * \\@since 2.5.0 - `\"search\"` was added\n * \\@since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n  /**\n   * The `children` will be rendered within the `TextFieldContainer` and before\n   * the `<input />` element. This was added to support the new `Select`\n   * component implementation\n   *\n   * @internal\n   * @remarks \\@since 6.0.0\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The structure for this component is:\n * @example\n * Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      inputStyle,\n      inputClassName,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          {children}\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAAS,QAAQ,uBAAuB;AA4FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,0BAAYP,WACvB,SAASO,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,UAAU,EACVC,cAAc,EACdC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAM,EAAEoC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGrC;IAC/C,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAMwB,QAAQ9B,cAAc,SAAS+B;IACrC,MAAMC,qBAAqBhC,cACzB,sBACAiC;IAGF,IAAI,EAAEQ,cAAc,EAAE,EAAE,GAAGtC;IAC3B,IAAIO,SAAS,CAAC+B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAAC5C;QACE,GAAGsC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACnC;YACE,GAAGqC,cAAc;YAClB7B,OAAOA;YACPC,WAAWA;YACXsB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTmB,UAAUA;YACVD,UAAUA;YACVjB,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBO,oBAAoBA;YACpBN,wBAAwBA;YACxBC,yBAAyBA;;gBAExBU;8BACD,KAACK;oBACE,GAAGJ,SAAS;oBACbjC,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNuB,UAAUA;oBACVE,aAAaA;oBACb1B,cAAcA;oBACdR,OAAOqB;oBACPpB,WAAWP,UAAU;wBACnBO,WAAWqB;wBACXc,mBAAmB,CAAC,CAACjC,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACZ;oBACC8C,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRoB,UAAUA;oBACT,GAAG5B,UAAU;oBACdkC,SAASxC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @remarks\n * \\@since 2.5.0 - `\"search\"` was added\n * \\@since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n  /**\n   * The `children` will be rendered within the `TextFieldContainer` and before\n   * the `<input />` element. This was added to support the new `Select`\n   * component implementation\n   *\n   * @internal\n   * @remarks \\@since 6.0.0\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The structure for this component is:\n * @example\n * Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      stretch,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      inputStyle,\n      inputClassName,\n      theme,\n      underlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled, readOnly } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          {children}\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AA4FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,kBAAkB,EAClBC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGjC;IACJ,MAAM,EAAEkC,QAAQ,EAAEC,QAAQ,EAAE,GAAGnC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAEiC,cAAc,EAAE,EAAE,GAAGpC;IAC3B,IAAIO,SAAS,CAAC6B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACzC;QACE,GAAGmC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAY;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAChC;YACE,GAAGkC,cAAc;YAClB3B,OAAOA;YACPC,WAAWA;YACXsB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTiB,UAAUA;YACVD,UAAUA;YACVf,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;gBAExBQ;8BACD,KAACK;oBACE,GAAGJ,SAAS;oBACb/B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNqB,UAAUA;oBACVE,aAAaA;oBACbxB,cAAcA;oBACdR,OAAOqB;oBACPpB,WAAWP,UAAU;wBACnBO,WAAWqB;wBACXY,mBAAmB,CAAC,CAAC/B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACC2C,QAAQ;oBACRzB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;oBACT,GAAG1B,UAAU;oBACdgC,SAAStC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/TextFieldContainer.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getFormConfig } from "./formConfig.js";
 import { TextFieldAddon } from "./TextFieldAddon.js";
-import { textFieldContainer } from "./TextFieldContainerStyles.js";
+import { getFormConfig } from "./formConfig.js";
+import { textFieldContainer } from "./textFieldContainerStyles.js";
 /**
  * **Client Component**
  * This might be able to become a server component if I remove the useFormTheme hook

package/dist/form/TextFieldContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { textFieldContainer } from \"./TextFieldContainerStyles.js\";\nimport { type TextFieldContainerOptions } from \"./types.js\";\n\nexport interface TextFieldContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextFieldContainerOptions {\n  /**\n   * Set this to `true` if there is a floating label with the `TextField` or\n   * `TextArea`.\n   *\n   * @defaultValue `false`\n   */\n  label?: boolean;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the useFormTheme hook\n *\n * This component is used to add the additional `TextField`, `TextArea`, and\n * `Select` theme styles.\n *\n * @internal\n */\nexport const TextFieldContainer = forwardRef<\n  HTMLDivElement,\n  TextFieldContainerProps\n>(function TextFieldContainer(props, ref) {\n  const {\n    children,\n    className,\n    dense = false,\n    error = false,\n    label = false,\n    active = false,\n    inline = false,\n    stretch = false,\n    readOnly = false,\n    disabled = false,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles = false,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles = false,\n    theme: propTheme,\n    underlineDirection: propUnderlineDirection,\n    ...remaining\n  } = props;\n  const theme = getFormConfig(\"theme\", propTheme);\n  const underlineDirection = getFormConfig(\n    \"underlineDirection\",\n    propUnderlineDirection\n  );\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={textFieldContainer({\n        theme,\n        dense,\n        error,\n        label,\n        inline,\n        active,\n        stretch,\n        readOnly,\n        disabled,\n        className,\n        leftAddon: !!leftAddon && !disableLeftAddonStyles,\n        rightAddon: !!rightAddon && !disableRightAddonStyles,\n        underlineDirection,\n      })}\n    >\n      <TextFieldAddon {...leftAddonProps} disabled={disableLeftAddonStyles}>\n        {leftAddon}\n      </TextFieldAddon>\n      {children}\n      <TextFieldAddon\n        {...rightAddonProps}\n        disabled={disableRightAddonStyles}\n        after\n      >\n        {rightAddon}\n      </TextFieldAddon>\n    </div>\n  );\n});\n"],"names":["forwardRef","getFormConfig","TextFieldAddon","textFieldContainer","TextFieldContainer","props","ref","children","className","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,kBAAkB,QAAQ,gCAAgC;AAenE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,SAAS,EACTC,cAAc,EACdC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,eAAe,EACfC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGtB;IACJ,MAAMkB,QAAQtB,cAAc,SAASuB;IACrC,MAAMC,qBAAqBxB,cACzB,sBACAyB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbrB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BoB;YACAd;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAC;YACAR;YACAS,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFV;0BACD,KAACL;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textFieldContainer } from \"./textFieldContainerStyles.js\";\nimport { type TextFieldContainerOptions } from \"./types.js\";\n\nexport interface TextFieldContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextFieldContainerOptions {\n  /**\n   * Set this to `true` if there is a floating label with the `TextField` or\n   * `TextArea`.\n   *\n   * @defaultValue `false`\n   */\n  label?: boolean;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the useFormTheme hook\n *\n * This component is used to add the additional `TextField`, `TextArea`, and\n * `Select` theme styles.\n *\n * @internal\n */\nexport const TextFieldContainer = forwardRef<\n  HTMLDivElement,\n  TextFieldContainerProps\n>(function TextFieldContainer(props, ref) {\n  const {\n    children,\n    className,\n    dense = false,\n    error = false,\n    label = false,\n    active = false,\n    inline = false,\n    stretch = false,\n    readOnly = false,\n    disabled = false,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles = false,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles = false,\n    theme: propTheme,\n    underlineDirection: propUnderlineDirection,\n    ...remaining\n  } = props;\n  const theme = getFormConfig(\"theme\", propTheme);\n  const underlineDirection = getFormConfig(\n    \"underlineDirection\",\n    propUnderlineDirection\n  );\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={textFieldContainer({\n        theme,\n        dense,\n        error,\n        label,\n        inline,\n        active,\n        stretch,\n        readOnly,\n        disabled,\n        className,\n        leftAddon: !!leftAddon && !disableLeftAddonStyles,\n        rightAddon: !!rightAddon && !disableRightAddonStyles,\n        underlineDirection,\n      })}\n    >\n      <TextFieldAddon {...leftAddonProps} disabled={disableLeftAddonStyles}>\n        {leftAddon}\n      </TextFieldAddon>\n      {children}\n      <TextFieldAddon\n        {...rightAddonProps}\n        disabled={disableRightAddonStyles}\n        after\n      >\n        {rightAddon}\n      </TextFieldAddon>\n    </div>\n  );\n});\n"],"names":["forwardRef","TextFieldAddon","getFormConfig","textFieldContainer","TextFieldContainer","props","ref","children","className","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,kBAAkB,QAAQ,gCAAgC;AAenE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,SAAS,EACTC,cAAc,EACdC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,eAAe,EACfC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGtB;IACJ,MAAMkB,QAAQrB,cAAc,SAASsB;IACrC,MAAMC,qBAAqBvB,cACzB,sBACAwB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbrB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BoB;YACAd;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAC;YACAR;YACAS,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACxB;gBAAgB,GAAGiB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFV;0BACD,KAACN;gBACE,GAAGoB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}