@react-md/core 6.5.2 → 7.0.0

package/dist/form/SliderContainer.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 /**
  * @since 2.5.0
  * @since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`
@@ -27,6 +27,7 @@ export interface SliderAddonProps {
  * a `Fieldset` instead.
  */
 export interface SliderContainerProps extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {
+    ref?: Ref<HTMLDivElement>;
     vertical: boolean;
 }
 /**
@@ -40,4 +41,4 @@ export interface SliderContainerProps extends HTMLAttributes<HTMLDivElement>, Sl
  * @since 6.0.0 Removed the `label` support since you'll generally want to use
  * a `Fieldset` instead.
  */
-export declare const SliderContainer: import("react").ForwardRefExoticComponent<SliderContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SliderContainer(props: SliderContainerProps): ReactElement;

package/dist/form/SliderContainer.js

@@ -1,5 +1,4 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { sliderContainer } from "./sliderStyles.js";
 /**
  * The `SliderContainer` component is mostly an internal component that is
@@ -11,8 +10,8 @@ import { sliderContainer } from "./sliderStyles.js";
  * @since 2.5.0
  * @since 6.0.0 Removed the `label` support since you'll generally want to use
  * a `Fieldset` instead.
- */ export const SliderContainer = /*#__PURE__*/ forwardRef(function SliderContainer(props, ref) {
-    const { className, children, beforeAddon, afterAddon, vertical, ...remaining } = props;
+ */ export function SliderContainer(props) {
+    const { ref, className, children, beforeAddon, afterAddon, vertical, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
@@ -28,6 +27,6 @@ import { sliderContainer } from "./sliderStyles.js";
             afterAddon
         ]
     });
-});
+}
 
 //# sourceMappingURL=SliderContainer.js.map

package/dist/form/SliderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { sliderContainer } from \"./sliderStyles.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`\n */\nexport interface SliderAddonProps {\n  /**\n   * An optional addon to render before the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear underneath the\n   * track.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear above the track.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport interface SliderContainerProps\n  extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {\n  vertical: boolean;\n}\n\n/**\n * The `SliderContainer` component is mostly an internal component that is\n * built-in to the `Slider` and `RangeSlider` components to add addons to the\n * left or right of the `SliderTrack`. When vertical, it will add addons to the\n * bottom or top instead.\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(\n  function SliderContainer(props, ref) {\n    const {\n      className,\n      children,\n      beforeAddon,\n      afterAddon,\n      vertical,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={sliderContainer({\n          className,\n          vertical,\n          beforeAddon: !!beforeAddon,\n          afterAddon: !!afterAddon,\n        })}\n      >\n        {beforeAddon}\n        {children}\n        {afterAddon}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","sliderContainer","SliderContainer","props","ref","className","children","beforeAddon","afterAddon","vertical","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,eAAe,QAAQ,oBAAoB;AAoCpD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,gCAAkBF,WAC7B,SAASE,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,MAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,gBAAgB;YACzBI;YACAI;YACAF,aAAa,CAAC,CAACA;YACfC,YAAY,CAAC,CAACA;QAChB;;YAECD;YACAD;YACAE;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/SliderContainer.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { sliderContainer } from \"./sliderStyles.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`\n */\nexport interface SliderAddonProps {\n  /**\n   * An optional addon to render before the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear underneath the\n   * track.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear above the track.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport interface SliderContainerProps\n  extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {\n  ref?: Ref<HTMLDivElement>;\n\n  vertical: boolean;\n}\n\n/**\n * The `SliderContainer` component is mostly an internal component that is\n * built-in to the `Slider` and `RangeSlider` components to add addons to the\n * left or right of the `SliderTrack`. When vertical, it will add addons to the\n * bottom or top instead.\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport function SliderContainer(props: SliderContainerProps): ReactElement {\n  const {\n    ref,\n    className,\n    children,\n    beforeAddon,\n    afterAddon,\n    vertical,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={sliderContainer({\n        className,\n        vertical,\n        beforeAddon: !!beforeAddon,\n        afterAddon: !!afterAddon,\n      })}\n    >\n      {beforeAddon}\n      {children}\n      {afterAddon}\n    </div>\n  );\n}\n"],"names":["sliderContainer","SliderContainer","props","ref","className","children","beforeAddon","afterAddon","vertical","remaining","div"],"mappings":";AAOA,SAASA,eAAe,QAAQ,oBAAoB;AAsCpD;;;;;;;;;;CAUC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,MAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,gBAAgB;YACzBI;YACAI;YACAF,aAAa,CAAC,CAACA;YACfC,YAAY,CAAC,CAACA;QAChB;;YAECD;YACAD;YACAE;;;AAGP"}

package/dist/form/SliderThumb.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
+import { type ChangeEventHandler, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type SliderValueOptions } from "./useSlider.js";
@@ -69,6 +69,7 @@ export interface ConfigurableSliderThumbProps extends Omit<HTMLAttributes<HTMLSp
  * @since 6.0.0 Internal only component.
  */
 export interface SliderThumbProps extends ConfigurableSliderThumbProps, Required<SliderValueOptions>, Required<SliderThumbPresentation> {
+    ref?: Ref<HTMLSpanElement>;
     id: string;
     value: number;
     index: 1 | 2;
@@ -88,4 +89,4 @@ export interface SliderThumbProps extends ConfigurableSliderThumbProps, Required
  * @since 2.5.0
  * @since 6.0.0 Internal only component.
  */
-export declare const SliderThumb: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<SliderThumbProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function SliderThumb(props: LabelRequiredForA11y<SliderThumbProps>): ReactElement;

package/dist/form/SliderThumb.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { SliderValueTooltip } from "./SliderValueTooltip.js";
 import { sliderThumb, sliderThumbInput } from "./sliderStyles.js";
@@ -13,8 +13,8 @@ const noop = ()=>{
  * @internal
  * @since 2.5.0
  * @since 6.0.0 Internal only component.
- */ export const SliderThumb = /*#__PURE__*/ forwardRef(function SliderThumb(props, ref) {
-    const { id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
+ */ export function SliderThumb(props) {
+    const { ref, id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
     const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
     const isFirstThumb = index === 1;
     const mode = useUserInteractionMode();
@@ -144,6 +144,6 @@ const noop = ()=>{
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=SliderThumb.js.map

package/dist/form/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderThumb.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { SliderValueTooltip } from \"./SliderValueTooltip.js\";\nimport { sliderThumb, sliderThumbInput } from \"./sliderStyles.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type SliderTooltipVisibility = \"auto\" | \"hover\" | \"always\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderThumbPresentation {\n  /**\n   * Boolean if the slider should act as a discrete slider which will render a\n   * tooltip above the thumb while dragging to visualize the current value for\n   * the slider.\n   *\n   * @defaultValue `false`\n   */\n  discrete?: boolean;\n\n  /**\n   * A function that is used to help with accessibility by creating a better\n   * value string if just a number isn't representative enough of your range.\n   *\n   * Example:\n   *\n   * ```tsx\n   * const [value, controls] = useSlider(0, {\n   *   // format to be `$100`, etc\n   *   getValueText: value => `$${value}`,\n   * });\n   *\n   * return <Slider baseId=\"price-slider\" label=\"Price\" {...controls} />;\n   * ```\n   *\n   * @defaultValue `() => \"\"`\n   */\n  getValueText?: (value: number) => string;\n\n  /**\n   * Set this to `true` if the slider's thumb position should only update when\n   * the user has dragged to the next value instead of with the mouse.\n   *\n   * @see {@link marks}\n   * @defaultValue `!!marks`\n   */\n  disableSmoothDragging?: boolean;\n\n  /**\n   * The discrete slider's value tooltip will only become visible when:\n   *\n   * - `\"auto\"` - the user is dragging with touch/mouse or focused with a keyboard\n   * - `\"hover\"` - the behavior of `\"auto\"` plus while hovering the thumb with a mouse\n   * - `\"always\"` - ... always\n   *\n   * This only applies when the {@link discrete} prop is `true`.\n   *\n   * @defaultValue `\"auto\"`\n   */\n  tooltipVisibility?: SliderTooltipVisibility;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableSliderThumbProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  \"onChange\"\n> {\n  name?: string;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Internal only component.\n */\nexport interface SliderThumbProps\n  extends\n    ConfigurableSliderThumbProps,\n    Required<SliderValueOptions>,\n    Required<SliderThumbPresentation> {\n  id: string;\n  value: number;\n  index: 1 | 2;\n  active: boolean;\n  animate: boolean;\n  disabled: boolean;\n  vertical: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  tooltipProps?: Partial<TooltipProps>;\n  getTooltipProps: (\n    value: number,\n    isFirstThumb: boolean\n  ) => Partial<TooltipProps> | undefined;\n  getTooltipChildren: (value: number, isFirstThumb: boolean) => ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Internal only component.\n */\nexport const SliderThumb = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<SliderThumbProps>\n>(function SliderThumb(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    name,\n    value,\n    onChange,\n    index,\n    getValueText,\n    step,\n    active,\n    animate,\n    disabled,\n    vertical,\n    discrete,\n    tabIndex = disabled ? -1 : 0,\n    className,\n    onFocus = noop,\n    onKeyDown = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    tooltipProps,\n    getTooltipProps,\n    getTooltipChildren,\n    disableSmoothDragging,\n    tooltipVisibility = \"auto\",\n    ...remaining\n  } = props;\n  const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } = props;\n\n  const isFirstThumb = index === 1;\n  const mode = useUserInteractionMode();\n  const keyboard = mode === \"keyboard\";\n  const touch = mode === \"touch\";\n  const [mouseVisible, setMouseVisible] = useState(false);\n  const [keyboardVisible, setKeyboardVisible] = useState(false);\n  useEffect(() => {\n    if (disabled || !discrete) {\n      setKeyboardVisible(false);\n      return;\n    }\n\n    // if the mode changes away from keyboard, need to disable the keyboard\n    // state\n    setKeyboardVisible((prevVisible) => prevVisible && mode === \"keyboard\");\n  }, [disabled, discrete, mode]);\n  useEffect(() => {\n    if (disabled || !discrete) {\n      setMouseVisible(false);\n      return;\n    }\n\n    setMouseVisible((prevVisible) => prevVisible && mode !== \"touch\");\n  }, [disabled, discrete, mode]);\n  useEffect(() => {\n    if (!keyboardVisible) {\n      return;\n    }\n\n    const callback = (): void => {\n      setKeyboardVisible(false);\n    };\n\n    window.addEventListener(\"blur\", callback, true);\n    return () => {\n      window.removeEventListener(\"blur\", callback);\n    };\n  }, [keyboardVisible]);\n\n  const classNameOptions = {\n    index,\n    active,\n    animate: !disableSmoothDragging && animate,\n    disabled,\n    vertical,\n    className,\n  } as const;\n\n  return (\n    <>\n      {disabled && (\n        <span\n          className={sliderThumb({\n            ...classNameOptions,\n            mask: true,\n          })}\n        />\n      )}\n      <span\n        {...remaining}\n        id={id}\n        ref={ref}\n        role=\"slider\"\n        aria-disabled={disabled || undefined}\n        aria-orientation={vertical ? \"vertical\" : undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value}\n        aria-valuetext={getValueText(value) || undefined}\n        tabIndex={tabIndex}\n        className={sliderThumb(classNameOptions)}\n        onFocus={(event) => {\n          onFocus(event);\n\n          if (discrete && keyboard) {\n            setKeyboardVisible(true);\n          }\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n\n          // this allows the tooltip to be visible when switching from mouse to\n          // keyboard\n          if (discrete && event.key !== \"Tab\") {\n            setKeyboardVisible(true);\n          }\n        }}\n        onMouseEnter={(event) => {\n          onMouseEnter(event);\n          if (discrete && tooltipVisibility === \"hover\" && !touch) {\n            setMouseVisible(true);\n          }\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave(event);\n          if (discrete && tooltipVisibility === \"hover\" && !touch) {\n            setMouseVisible(false);\n          }\n        }}\n      />\n      <input\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-hidden\n        id={`${id}-value`}\n        type=\"range\"\n        name={name}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={disabled}\n        tabIndex={-1}\n        onChange={onChange}\n        className={sliderThumbInput()}\n      />\n      {discrete && (\n        <SliderValueTooltip\n          position={vertical ? \"left\" : \"above\"}\n          vertical={vertical}\n          animate={!disableSmoothDragging && !active}\n          visible={\n            tooltipVisibility === \"always\" ||\n            active ||\n            keyboardVisible ||\n            mouseVisible\n          }\n          {...tooltipProps}\n          {...getTooltipProps(value, isFirstThumb)}\n          index={index}\n        >\n          {getTooltipChildren(value, isFirstThumb)}\n        </SliderValueTooltip>\n      )}\n    </>\n  );\n});\n"],"names":["forwardRef","useEffect","useState","useUserInteractionMode","SliderValueTooltip","sliderThumb","sliderThumbInput","noop","SliderThumb","props","ref","id","min","max","name","value","onChange","index","getValueText","step","active","animate","disabled","vertical","discrete","tabIndex","className","onFocus","onKeyDown","onMouseEnter","onMouseLeave","tooltipProps","getTooltipProps","getTooltipChildren","disableSmoothDragging","tooltipVisibility","remaining","ariaLabel","ariaLabelledBy","isFirstThumb","mode","keyboard","touch","mouseVisible","setMouseVisible","keyboardVisible","setKeyboardVisible","prevVisible","callback","window","addEventListener","removeEventListener","classNameOptions","span","mask","role","aria-disabled","undefined","aria-orientation","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","event","key","input","aria-label","aria-labelledby","aria-hidden","type","position","visible"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/SliderThumb.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { SliderValueTooltip } from \"./SliderValueTooltip.js\";\nimport { sliderThumb, sliderThumbInput } from \"./sliderStyles.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type SliderTooltipVisibility = \"auto\" | \"hover\" | \"always\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderThumbPresentation {\n  /**\n   * Boolean if the slider should act as a discrete slider which will render a\n   * tooltip above the thumb while dragging to visualize the current value for\n   * the slider.\n   *\n   * @defaultValue `false`\n   */\n  discrete?: boolean;\n\n  /**\n   * A function that is used to help with accessibility by creating a better\n   * value string if just a number isn't representative enough of your range.\n   *\n   * Example:\n   *\n   * ```tsx\n   * const [value, controls] = useSlider(0, {\n   *   // format to be `$100`, etc\n   *   getValueText: value => `$${value}`,\n   * });\n   *\n   * return <Slider baseId=\"price-slider\" label=\"Price\" {...controls} />;\n   * ```\n   *\n   * @defaultValue `() => \"\"`\n   */\n  getValueText?: (value: number) => string;\n\n  /**\n   * Set this to `true` if the slider's thumb position should only update when\n   * the user has dragged to the next value instead of with the mouse.\n   *\n   * @see {@link marks}\n   * @defaultValue `!!marks`\n   */\n  disableSmoothDragging?: boolean;\n\n  /**\n   * The discrete slider's value tooltip will only become visible when:\n   *\n   * - `\"auto\"` - the user is dragging with touch/mouse or focused with a keyboard\n   * - `\"hover\"` - the behavior of `\"auto\"` plus while hovering the thumb with a mouse\n   * - `\"always\"` - ... always\n   *\n   * This only applies when the {@link discrete} prop is `true`.\n   *\n   * @defaultValue `\"auto\"`\n   */\n  tooltipVisibility?: SliderTooltipVisibility;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableSliderThumbProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  \"onChange\"\n> {\n  name?: string;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Internal only component.\n */\nexport interface SliderThumbProps\n  extends\n    ConfigurableSliderThumbProps,\n    Required<SliderValueOptions>,\n    Required<SliderThumbPresentation> {\n  ref?: Ref<HTMLSpanElement>;\n  id: string;\n  value: number;\n  index: 1 | 2;\n  active: boolean;\n  animate: boolean;\n  disabled: boolean;\n  vertical: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  tooltipProps?: Partial<TooltipProps>;\n  getTooltipProps: (\n    value: number,\n    isFirstThumb: boolean\n  ) => Partial<TooltipProps> | undefined;\n  getTooltipChildren: (value: number, isFirstThumb: boolean) => ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Internal only component.\n */\nexport function SliderThumb(\n  props: LabelRequiredForA11y<SliderThumbProps>\n): ReactElement {\n  const {\n    ref,\n    id,\n    min,\n    max,\n    name,\n    value,\n    onChange,\n    index,\n    getValueText,\n    step,\n    active,\n    animate,\n    disabled,\n    vertical,\n    discrete,\n    tabIndex = disabled ? -1 : 0,\n    className,\n    onFocus = noop,\n    onKeyDown = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    tooltipProps,\n    getTooltipProps,\n    getTooltipChildren,\n    disableSmoothDragging,\n    tooltipVisibility = \"auto\",\n    ...remaining\n  } = props;\n  const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } = props;\n\n  const isFirstThumb = index === 1;\n  const mode = useUserInteractionMode();\n  const keyboard = mode === \"keyboard\";\n  const touch = mode === \"touch\";\n  const [mouseVisible, setMouseVisible] = useState(false);\n  const [keyboardVisible, setKeyboardVisible] = useState(false);\n  useEffect(() => {\n    if (disabled || !discrete) {\n      setKeyboardVisible(false);\n      return;\n    }\n\n    // if the mode changes away from keyboard, need to disable the keyboard\n    // state\n    setKeyboardVisible((prevVisible) => prevVisible && mode === \"keyboard\");\n  }, [disabled, discrete, mode]);\n  useEffect(() => {\n    if (disabled || !discrete) {\n      setMouseVisible(false);\n      return;\n    }\n\n    setMouseVisible((prevVisible) => prevVisible && mode !== \"touch\");\n  }, [disabled, discrete, mode]);\n  useEffect(() => {\n    if (!keyboardVisible) {\n      return;\n    }\n\n    const callback = (): void => {\n      setKeyboardVisible(false);\n    };\n\n    window.addEventListener(\"blur\", callback, true);\n    return () => {\n      window.removeEventListener(\"blur\", callback);\n    };\n  }, [keyboardVisible]);\n\n  const classNameOptions = {\n    index,\n    active,\n    animate: !disableSmoothDragging && animate,\n    disabled,\n    vertical,\n    className,\n  } as const;\n\n  return (\n    <>\n      {disabled && (\n        <span\n          className={sliderThumb({\n            ...classNameOptions,\n            mask: true,\n          })}\n        />\n      )}\n      <span\n        {...remaining}\n        id={id}\n        ref={ref}\n        role=\"slider\"\n        aria-disabled={disabled || undefined}\n        aria-orientation={vertical ? \"vertical\" : undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value}\n        aria-valuetext={getValueText(value) || undefined}\n        tabIndex={tabIndex}\n        className={sliderThumb(classNameOptions)}\n        onFocus={(event) => {\n          onFocus(event);\n\n          if (discrete && keyboard) {\n            setKeyboardVisible(true);\n          }\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n\n          // this allows the tooltip to be visible when switching from mouse to\n          // keyboard\n          if (discrete && event.key !== \"Tab\") {\n            setKeyboardVisible(true);\n          }\n        }}\n        onMouseEnter={(event) => {\n          onMouseEnter(event);\n          if (discrete && tooltipVisibility === \"hover\" && !touch) {\n            setMouseVisible(true);\n          }\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave(event);\n          if (discrete && tooltipVisibility === \"hover\" && !touch) {\n            setMouseVisible(false);\n          }\n        }}\n      />\n      <input\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-hidden\n        id={`${id}-value`}\n        type=\"range\"\n        name={name}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={disabled}\n        tabIndex={-1}\n        onChange={onChange}\n        className={sliderThumbInput()}\n      />\n      {discrete && (\n        <SliderValueTooltip\n          position={vertical ? \"left\" : \"above\"}\n          vertical={vertical}\n          animate={!disableSmoothDragging && !active}\n          visible={\n            tooltipVisibility === \"always\" ||\n            active ||\n            keyboardVisible ||\n            mouseVisible\n          }\n          {...tooltipProps}\n          {...getTooltipProps(value, isFirstThumb)}\n          index={index}\n        >\n          {getTooltipChildren(value, isFirstThumb)}\n        </SliderValueTooltip>\n      )}\n    </>\n  );\n}\n"],"names":["useEffect","useState","useUserInteractionMode","SliderValueTooltip","sliderThumb","sliderThumbInput","noop","SliderThumb","props","ref","id","min","max","name","value","onChange","index","getValueText","step","active","animate","disabled","vertical","discrete","tabIndex","className","onFocus","onKeyDown","onMouseEnter","onMouseLeave","tooltipProps","getTooltipProps","getTooltipChildren","disableSmoothDragging","tooltipVisibility","remaining","ariaLabel","ariaLabelledBy","isFirstThumb","mode","keyboard","touch","mouseVisible","setMouseVisible","keyboardVisible","setKeyboardVisible","prevVisible","callback","window","addEventListener","removeEventListener","classNameOptions","span","mask","role","aria-disabled","undefined","aria-orientation","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","event","key","input","aria-label","aria-labelledby","aria-hidden","type","position","visible"],"mappings":"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"}

package/dist/form/SliderTrack.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ClosestThumbEventHandlersOptions, type ThumbOffsetsOptions } from "./sliderUtils.js";
 /**
  * @internal
@@ -6,6 +6,7 @@ import { type ClosestThumbEventHandlersOptions, type ThumbOffsetsOptions } from
  * @since 6.0.0 Updated to be internal only.
  */
 export interface SliderTrackProps extends HTMLAttributes<HTMLSpanElement>, ClosestThumbEventHandlersOptions, ThumbOffsetsOptions {
+    ref?: Ref<HTMLSpanElement>;
     animate: boolean;
     disabled: boolean;
 }
@@ -14,4 +15,4 @@ export interface SliderTrackProps extends HTMLAttributes<HTMLSpanElement>, Close
  * @since 2.5.0
  * @since 6.0.0 Updated to be internal only.
  */
-export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function SliderTrack(props: SliderTrackProps): ReactElement;

package/dist/form/SliderTrack.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { sliderTrack } from "./sliderStyles.js";
 import { getClosestThumbEventHandlers, getThumbOffsets } from "./sliderUtils.js";
 /**
  * @internal
  * @since 2.5.0
  * @since 6.0.0 Updated to be internal only.
- */ export const SliderTrack = /*#__PURE__*/ forwardRef(function SliderTrack(props, ref) {
-    const { style, className, animate, vertical, disabled, min, max, thumb1Ref, thumb1Value, thumb1Dragging, thumb1DragPercentage, thumb1OnMouseUp, thumb1OnMouseDown, thumb1OnMouseMove, thumb1OnTouchStart, thumb1OnTouchMove, thumb2Ref, thumb2Value, thumb2Dragging, thumb2DragPercentage, thumb2OnMouseUp, thumb2OnMouseDown, thumb2OnMouseMove, thumb2OnTouchStart, thumb2OnTouchMove, isRangeSlider, children, ...remaining } = props;
+ */ export function SliderTrack(props) {
+    const { ref, style, className, animate, vertical, disabled, min, max, thumb1Ref, thumb1Value, thumb1Dragging, thumb1DragPercentage, thumb1OnMouseUp, thumb1OnMouseDown, thumb1OnMouseMove, thumb1OnTouchStart, thumb1OnTouchMove, thumb2Ref, thumb2Value, thumb2Dragging, thumb2DragPercentage, thumb2OnMouseUp, thumb2OnMouseDown, thumb2OnMouseMove, thumb2OnTouchStart, thumb2OnTouchMove, isRangeSlider, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         ref: ref,
@@ -52,6 +51,6 @@ import { getClosestThumbEventHandlers, getThumbOffsets } from "./sliderUtils.js"
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=SliderTrack.js.map

package/dist/form/SliderTrack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderTrack.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { sliderTrack } from \"./sliderStyles.js\";\nimport {\n  type ClosestThumbEventHandlersOptions,\n  type ThumbOffsetsOptions,\n  getClosestThumbEventHandlers,\n  getThumbOffsets,\n} from \"./sliderUtils.js\";\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport interface SliderTrackProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    ClosestThumbEventHandlersOptions,\n    ThumbOffsetsOptions {\n  animate: boolean;\n  disabled: boolean;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(\n  function SliderTrack(props, ref) {\n    const {\n      style,\n      className,\n      animate,\n      vertical,\n      disabled,\n      min,\n      max,\n      thumb1Ref,\n      thumb1Value,\n      thumb1Dragging,\n      thumb1DragPercentage,\n      thumb1OnMouseUp,\n      thumb1OnMouseDown,\n      thumb1OnMouseMove,\n      thumb1OnTouchStart,\n      thumb1OnTouchMove,\n      thumb2Ref,\n      thumb2Value,\n      thumb2Dragging,\n      thumb2DragPercentage,\n      thumb2OnMouseUp,\n      thumb2OnMouseDown,\n      thumb2OnMouseMove,\n      thumb2OnTouchStart,\n      thumb2OnTouchMove,\n      isRangeSlider,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        style={{\n          ...style,\n          ...getThumbOffsets({\n            min,\n            max,\n            thumb1Value,\n            thumb1Dragging,\n            thumb1DragPercentage,\n            thumb2Value,\n            thumb2Dragging,\n            thumb2DragPercentage,\n            isRangeSlider,\n          }),\n        }}\n        className={sliderTrack({\n          className,\n          animate,\n          disabled,\n          vertical,\n          isRangeSlider,\n        })}\n        {...getClosestThumbEventHandlers({\n          vertical,\n          isRangeSlider,\n          thumb1Ref,\n          thumb1Dragging,\n          thumb1OnMouseUp,\n          thumb1OnMouseDown,\n          thumb1OnMouseMove,\n          thumb1OnTouchStart,\n          thumb1OnTouchMove,\n          thumb2Ref,\n          thumb2Dragging,\n          thumb2OnMouseUp,\n          thumb2OnMouseDown,\n          thumb2OnMouseMove,\n          thumb2OnTouchStart,\n          thumb2OnTouchMove,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","sliderTrack","getClosestThumbEventHandlers","getThumbOffsets","SliderTrack","props","ref","style","className","animate","vertical","disabled","min","max","thumb1Ref","thumb1Value","thumb1Dragging","thumb1DragPercentage","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnMouseMove","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Value","thumb2Dragging","thumb2DragPercentage","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","children","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,WAAW,QAAQ,oBAAoB;AAChD,SAGEC,4BAA4B,EAC5BC,eAAe,QACV,mBAAmB;AAgB1B;;;;CAIC,GACD,OAAO,MAAMC,4BAAcJ,WACzB,SAASI,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,aAAa,EACbC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IAEJ,qBACE,KAAC8B;QACE,GAAGD,SAAS;QACb5B,KAAKA;QACLC,OAAO;YACL,GAAGA,KAAK;YACR,GAAGJ,gBAAgB;gBACjBS;gBACAC;gBACAE;gBACAC;gBACAC;gBACAO;gBACAC;gBACAC;gBACAM;YACF,EAAE;QACJ;QACAxB,WAAWP,YAAY;YACrBO;YACAC;YACAE;YACAD;YACAsB;QACF;QACC,GAAG9B,6BAA6B;YAC/BQ;YACAsB;YACAlB;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/SliderTrack.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { sliderTrack } from \"./sliderStyles.js\";\nimport {\n  type ClosestThumbEventHandlersOptions,\n  type ThumbOffsetsOptions,\n  getClosestThumbEventHandlers,\n  getThumbOffsets,\n} from \"./sliderUtils.js\";\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport interface SliderTrackProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    ClosestThumbEventHandlersOptions,\n    ThumbOffsetsOptions {\n  ref?: Ref<HTMLSpanElement>;\n  animate: boolean;\n  disabled: boolean;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport function SliderTrack(props: SliderTrackProps): ReactElement {\n  const {\n    ref,\n    style,\n    className,\n    animate,\n    vertical,\n    disabled,\n    min,\n    max,\n    thumb1Ref,\n    thumb1Value,\n    thumb1Dragging,\n    thumb1DragPercentage,\n    thumb1OnMouseUp,\n    thumb1OnMouseDown,\n    thumb1OnMouseMove,\n    thumb1OnTouchStart,\n    thumb1OnTouchMove,\n    thumb2Ref,\n    thumb2Value,\n    thumb2Dragging,\n    thumb2DragPercentage,\n    thumb2OnMouseUp,\n    thumb2OnMouseDown,\n    thumb2OnMouseMove,\n    thumb2OnTouchStart,\n    thumb2OnTouchMove,\n    isRangeSlider,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      style={{\n        ...style,\n        ...getThumbOffsets({\n          min,\n          max,\n          thumb1Value,\n          thumb1Dragging,\n          thumb1DragPercentage,\n          thumb2Value,\n          thumb2Dragging,\n          thumb2DragPercentage,\n          isRangeSlider,\n        }),\n      }}\n      className={sliderTrack({\n        className,\n        animate,\n        disabled,\n        vertical,\n        isRangeSlider,\n      })}\n      {...getClosestThumbEventHandlers({\n        vertical,\n        isRangeSlider,\n        thumb1Ref,\n        thumb1Dragging,\n        thumb1OnMouseUp,\n        thumb1OnMouseDown,\n        thumb1OnMouseMove,\n        thumb1OnTouchStart,\n        thumb1OnTouchMove,\n        thumb2Ref,\n        thumb2Dragging,\n        thumb2OnMouseUp,\n        thumb2OnMouseDown,\n        thumb2OnMouseMove,\n        thumb2OnTouchStart,\n        thumb2OnTouchMove,\n      })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["sliderTrack","getClosestThumbEventHandlers","getThumbOffsets","SliderTrack","props","ref","style","className","animate","vertical","disabled","min","max","thumb1Ref","thumb1Value","thumb1Dragging","thumb1DragPercentage","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnMouseMove","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Value","thumb2Dragging","thumb2DragPercentage","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","children","remaining","span"],"mappings":";AAEA,SAASA,WAAW,QAAQ,oBAAoB;AAChD,SAGEC,4BAA4B,EAC5BC,eAAe,QACV,mBAAmB;AAiB1B;;;;CAIC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,aAAa,EACbC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IAEJ,qBACE,KAAC8B;QACE,GAAGD,SAAS;QACb5B,KAAKA;QACLC,OAAO;YACL,GAAGA,KAAK;YACR,GAAGJ,gBAAgB;gBACjBS;gBACAC;gBACAE;gBACAC;gBACAC;gBACAO;gBACAC;gBACAC;gBACAM;YACF,EAAE;QACJ;QACAxB,WAAWP,YAAY;YACrBO;YACAC;YACAE;YACAD;YACAsB;QACF;QACC,GAAG9B,6BAA6B;YAC/BQ;YACAsB;YACAlB;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDE;;AAGP"}

package/dist/form/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type InputToggleLabelProps } from "./InputToggle.js";
 import { type FormComponentStates, type FormMessageContainerExtension } from "./types.js";
@@ -13,6 +13,7 @@ declare module "react" {
  * `FormMessage` behavior.
  */
 export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, InputToggleLabelProps, FormMessageContainerExtension, FormComponentStates {
+    ref?: Ref<HTMLInputElement>;
     containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
     trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
     trackStyle?: CSSProperties;
@@ -49,4 +50,4 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, Inpu
  * @see {@link https://react-md.dev/components/switch | Switch Demos}
  * @since 6.0.0 Added support for `FormMessage` behavior.
  */
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Switch(props: SwitchProps): ReactElement;

package/dist/form/Switch.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
@@ -32,8 +31,8 @@ import { switchStyles } from "./switchStyles.js";
  *
  * @see {@link https://react-md.dev/components/switch | Switch Demos}
  * @since 6.0.0 Added support for `FormMessage` behavior.
- */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
-    const { id: propId, label, labelProps, style, className, containerProps, ballProps, ballStyle, ballClassName, ballAddon, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, ...remaining } = props;
+ */ export function Switch(props) {
+    const { ref, id: propId, label, labelProps, style, className, containerProps, ballProps, ballStyle, ballClassName, ballAddon, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, ...remaining } = props;
     const id = useEnsuredId(propId, "switch");
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
@@ -80,6 +79,6 @@ import { switchStyles } from "./switchStyles.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=Switch.js.map

package/dist/form/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { type InputToggleLabelProps } from \"./InputToggle.js\";\nimport { Label } from \"./Label.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { switchStyles } from \"./switchStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `switchStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps` and support for the\n * `FormMessage` behavior.\n */\nexport interface SwitchProps\n  extends\n    InputHTMLAttributes<HTMLInputElement>,\n    InputToggleLabelProps,\n    FormMessageContainerExtension,\n    FormComponentStates {\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Switch } from \"@react-md/core/form/Switch\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <Form>\n *       <Switch\n *         label=\"Label\"\n *         name=\"enabled\"\n *         checked={checked}\n *         onChange={(event) => setChecked(event.currentTarget.checked)}\n *       />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/switch | Switch Demos}\n * @since 6.0.0 Added support for `FormMessage` behavior.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  function Switch(props, ref) {\n    const {\n      id: propId,\n      label,\n      labelProps,\n      style,\n      className,\n      containerProps,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      ballAddon,\n      trackProps,\n      trackStyle,\n      trackClassName,\n      messageProps,\n      messageContainerProps,\n      disableLabelGap = false,\n      error = false,\n      active = false,\n      stacked = false,\n      iconAfter = false,\n      disabled = false,\n      readOnly = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"switch\");\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          style={style}\n          {...labelProps}\n          className={cnb(className, labelProps?.className)}\n          gap={!disableLabelGap}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n        >\n          {label}\n          <div\n            {...containerProps}\n            className={switchStyles({\n              clickable: !disabled && !readOnly,\n              className: containerProps?.className,\n              currentColor: active || error,\n            })}\n          >\n            <SwitchTrack\n              style={trackStyle}\n              {...trackProps}\n              className={cnb(trackClassName, trackProps?.className)}\n              disabled={disabled}\n              ballAddon={ballAddon}\n              ballProps={ballProps}\n              ballStyle={ballStyle}\n              ballClassName={ballClassName}\n            >\n              <input\n                {...remaining}\n                id={id}\n                ref={ref}\n                role=\"switch\"\n                type=\"checkbox\"\n                className={cnb(\n                  \"rmd-switch__input rmd-hidden-input\",\n                  disabled && \"rmd-hidden-input--disabled\"\n                )}\n                disabled={disabled}\n              />\n            </SwitchTrack>\n          </div>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEnsuredId","FormMessageContainer","Label","SwitchTrack","switchStyles","Switch","props","ref","id","propId","label","labelProps","style","className","containerProps","ballProps","ballStyle","ballClassName","ballAddon","trackProps","trackStyle","trackClassName","messageProps","messageContainerProps","disableLabelGap","error","active","stacked","iconAfter","disabled","readOnly","remaining","gap","reversed","div","clickable","currentColor","input","role","type"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAKEC,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AAmCjD;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,uBAASN,WACpB,SAASM,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,qBAAqB,EACrBC,kBAAkB,KAAK,EACvBC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGsB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACCU,OAAOA;YACN,GAAGD,UAAU;YACdE,WAAWf,IAAIe,WAAWF,YAAYE;YACtCmB,KAAK,CAACR;YACNG,SAASA;YACTM,UAAU,CAACL;YACXF,QAAQA;YACRD,OAAOA;YACPI,UAAUA;;gBAETnB;8BACD,KAACwB;oBACE,GAAGpB,cAAc;oBAClBD,WAAWT,aAAa;wBACtB+B,WAAW,CAACN,YAAY,CAACC;wBACzBjB,WAAWC,gBAAgBD;wBAC3BuB,cAAcV,UAAUD;oBAC1B;8BAEA,cAAA,KAACtB;wBACCS,OAAOQ;wBACN,GAAGD,UAAU;wBACdN,WAAWf,IAAIuB,gBAAgBF,YAAYN;wBAC3CgB,UAAUA;wBACVX,WAAWA;wBACXH,WAAWA;wBACXC,WAAWA;wBACXC,eAAeA;kCAEf,cAAA,KAACoB;4BACE,GAAGN,SAAS;4BACbvB,IAAIA;4BACJD,KAAKA;4BACL+B,MAAK;4BACLC,MAAK;4BACL1B,WAAWf,IACT,sCACA+B,YAAY;4BAEdA,UAAUA;;;;;;;AAOxB,GACA"}
+{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { type InputToggleLabelProps } from \"./InputToggle.js\";\nimport { Label } from \"./Label.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { switchStyles } from \"./switchStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `switchStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps` and support for the\n * `FormMessage` behavior.\n */\nexport interface SwitchProps\n  extends\n    InputHTMLAttributes<HTMLInputElement>,\n    InputToggleLabelProps,\n    FormMessageContainerExtension,\n    FormComponentStates {\n  ref?: Ref<HTMLInputElement>;\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Switch } from \"@react-md/core/form/Switch\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <Form>\n *       <Switch\n *         label=\"Label\"\n *         name=\"enabled\"\n *         checked={checked}\n *         onChange={(event) => setChecked(event.currentTarget.checked)}\n *       />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/switch | Switch Demos}\n * @since 6.0.0 Added support for `FormMessage` behavior.\n */\nexport function Switch(props: SwitchProps): ReactElement {\n  const {\n    ref,\n    id: propId,\n    label,\n    labelProps,\n    style,\n    className,\n    containerProps,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    ballAddon,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    messageProps,\n    messageContainerProps,\n    disableLabelGap = false,\n    error = false,\n    active = false,\n    stacked = false,\n    iconAfter = false,\n    disabled = false,\n    readOnly = false,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"switch\");\n\n  return (\n    <FormMessageContainer\n      {...messageContainerProps}\n      messageProps={messageProps}\n    >\n      <Label\n        style={style}\n        {...labelProps}\n        className={cnb(className, labelProps?.className)}\n        gap={!disableLabelGap}\n        stacked={stacked}\n        reversed={!iconAfter}\n        active={active}\n        error={error}\n        disabled={disabled}\n      >\n        {label}\n        <div\n          {...containerProps}\n          className={switchStyles({\n            clickable: !disabled && !readOnly,\n            className: containerProps?.className,\n            currentColor: active || error,\n          })}\n        >\n          <SwitchTrack\n            style={trackStyle}\n            {...trackProps}\n            className={cnb(trackClassName, trackProps?.className)}\n            disabled={disabled}\n            ballAddon={ballAddon}\n            ballProps={ballProps}\n            ballStyle={ballStyle}\n            ballClassName={ballClassName}\n          >\n            <input\n              {...remaining}\n              id={id}\n              ref={ref}\n              role=\"switch\"\n              type=\"checkbox\"\n              className={cnb(\n                \"rmd-switch__input rmd-hidden-input\",\n                disabled && \"rmd-hidden-input--disabled\"\n              )}\n              disabled={disabled}\n            />\n          </SwitchTrack>\n        </div>\n      </Label>\n    </FormMessageContainer>\n  );\n}\n"],"names":["cnb","useEnsuredId","FormMessageContainer","Label","SwitchTrack","switchStyles","Switch","props","ref","id","propId","label","labelProps","style","className","containerProps","ballProps","ballStyle","ballClassName","ballAddon","trackProps","trackStyle","trackClassName","messageProps","messageContainerProps","disableLabelGap","error","active","stacked","iconAfter","disabled","readOnly","remaining","gap","reversed","div","clickable","currentColor","input","role","type"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAWhC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AAoCjD;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,qBAAqB,EACrBC,kBAAkB,KAAK,EACvBC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGsB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACCU,OAAOA;YACN,GAAGD,UAAU;YACdE,WAAWd,IAAIc,WAAWF,YAAYE;YACtCmB,KAAK,CAACR;YACNG,SAASA;YACTM,UAAU,CAACL;YACXF,QAAQA;YACRD,OAAOA;YACPI,UAAUA;;gBAETnB;8BACD,KAACwB;oBACE,GAAGpB,cAAc;oBAClBD,WAAWT,aAAa;wBACtB+B,WAAW,CAACN,YAAY,CAACC;wBACzBjB,WAAWC,gBAAgBD;wBAC3BuB,cAAcV,UAAUD;oBAC1B;8BAEA,cAAA,KAACtB;wBACCS,OAAOQ;wBACN,GAAGD,UAAU;wBACdN,WAAWd,IAAIsB,gBAAgBF,YAAYN;wBAC3CgB,UAAUA;wBACVX,WAAWA;wBACXH,WAAWA;wBACXC,WAAWA;wBACXC,eAAeA;kCAEf,cAAA,KAACoB;4BACE,GAAGN,SAAS;4BACbvB,IAAIA;4BACJD,KAAKA;4BACL+B,MAAK;4BACLC,MAAK;4BACL1B,WAAWd,IACT,sCACA8B,YAAY;4BAEdA,UAAUA;;;;;;;AAOxB"}

package/dist/form/SwitchTrack.d.ts

@@ -1,6 +1,7 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type PropsWithRef } from "../types.js";
 export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
     active?: boolean;
     disabled?: boolean;
     ballAddon?: ReactNode;
@@ -12,4 +13,4 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
  * Used to create the switch track styles
  * @internal
  */
-export declare const SwitchTrack: import("react").ForwardRefExoticComponent<SwitchTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SwitchTrack(props: SwitchTrackProps): ReactElement;

package/dist/form/SwitchTrack.js

@@ -1,11 +1,10 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { switchBall, switchTrack } from "./switchStyles.js";
 /**
  * Used to create the switch track styles
  * @internal
- */ export const SwitchTrack = /*#__PURE__*/ forwardRef(function SwitchTrack(props, ref) {
-    const { style, className, ballAddon, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
+ */ export function SwitchTrack(props) {
+    const { ref, style, className, ballAddon, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
@@ -30,6 +29,6 @@ import { switchBall, switchTrack } from "./switchStyles.js";
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=SwitchTrack.js.map

package/dist/form/SwitchTrack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { switchBall, switchTrack } from \"./switchStyles.js\";\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  disabled?: boolean;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * Used to create the switch track styles\n * @internal\n */\nexport const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(\n  function SwitchTrack(props, ref) {\n    const {\n      style,\n      className,\n      ballAddon,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      active,\n      children,\n      disabled = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        style={style}\n        className={switchTrack({ disabled, className })}\n      >\n        {children}\n        <span\n          style={ballStyle}\n          {...ballProps}\n          className={switchBall({ className: ballClassName, active })}\n        >\n          {ballAddon}\n          {ballProps?.children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","switchBall","switchTrack","SwitchTrack","props","ref","style","className","ballAddon","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAW5D;;;CAGC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,OAAOA;QACPC,WAAWL,YAAY;YAAEY;YAAUP;QAAU;;YAE5CM;0BACD,MAACI;gBACCX,OAAOI;gBACN,GAAGD,SAAS;gBACbF,WAAWN,WAAW;oBAAEM,WAAWI;oBAAeC;gBAAO;;oBAExDJ;oBACAC,WAAWI;;;;;AAIpB,GACA"}
+{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { switchBall, switchTrack } from \"./switchStyles.js\";\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  active?: boolean;\n  disabled?: boolean;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * Used to create the switch track styles\n * @internal\n */\nexport function SwitchTrack(props: SwitchTrackProps): ReactElement {\n  const {\n    ref,\n    style,\n    className,\n    ballAddon,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    active,\n    children,\n    disabled = false,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={switchTrack({ disabled, className })}\n    >\n      {children}\n      <span\n        style={ballStyle}\n        {...ballProps}\n        className={switchBall({ className: ballClassName, active })}\n      >\n        {ballAddon}\n        {ballProps?.children}\n      </span>\n    </div>\n  );\n}\n"],"names":["switchBall","switchTrack","SwitchTrack","props","ref","style","className","ballAddon","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AASA,SAASA,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAY5D;;;CAGC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,OAAOA;QACPC,WAAWL,YAAY;YAAEY;YAAUP;QAAU;;YAE5CM;0BACD,MAACI;gBACCX,OAAOI;gBACN,GAAGD,SAAS;gBACbF,WAAWN,WAAW;oBAAEM,WAAWI;oBAAeC;gBAAO;;oBAExDJ;oBACAC,WAAWI;;;;;AAIpB"}

package/dist/form/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type Ref, type TextareaHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions } from "./types.js";
 import { type TextAreaResize } from "./useResizingTextArea.js";
@@ -12,6 +12,7 @@ declare module "react" {
  * @since 6.0.0 Added `containerProps`.
  */
 export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    ref?: Ref<HTMLTextAreaElement>;
     /** @defaultValue `"text-area-" + useId()` */
     id?: string;
     /**
@@ -89,4 +90,4 @@ export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<
  *
  * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}
  */
-export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare function TextArea(props: TextAreaProps): ReactElement;

package/dist/form/TextArea.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
@@ -29,8 +28,8 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}
- */ export const TextArea = /*#__PURE__*/ forwardRef(function TextArea(props, ref) {
-    const { id: propId, style, className, label, labelProps, labelStyle, labelClassName, areaStyle, areaClassName, resizeContainerProps, resize = "auto", dense, error, active, inline: propInline, leftAddon, rightAddon, disableLeftAddonStyles, disableRightAddonStyles, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, rows = 2, maxRows = -1, onChange: propOnChange, disableTransition: propDisableTransition, ...remaining } = props;
+ */ export function TextArea(props) {
+    const { ref, id: propId, style, className, label, labelProps, labelStyle, labelClassName, areaStyle, areaClassName, resizeContainerProps, resize = "auto", dense, error, active, inline: propInline, leftAddon, rightAddon, disableLeftAddonStyles, disableRightAddonStyles, 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-area");
     const theme = getFormConfig("theme", propTheme);
@@ -140,6 +139,6 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=TextArea.js.map

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `textAreaStylesStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions, 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<HTMLAttributes<HTMLDivElement>>;\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>>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\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 *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\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,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\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        inline={inline}\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-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          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","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":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,sBAAsB;AAElE,SAEEC,mBAAmB,QACd,2BAA2B;AAmFlC;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,yBAAWX,WACtB,SAASW,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,oBAAoB,EACpBC,SAAS,MAAM,EACfC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,QAAQC,UAAU,EAClBC,SAAS,EACTC,UAAU,EACVC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,OAAO,CAAC,EACRC,UAAU,CAAC,CAAC,EACZC,UAAUC,YAAY,EACtBC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGxC;IACpE,MAAME,KAAKb,aAAac,QAAQ;IAChC,MAAMoB,QAAQ5B,cAAc,SAAS6B;IACrC,MAAMC,qBAAqB9B,cACzB,sBACA+B;IAEF,MAAM,CAACe,SAASC,gBAAgB,GAAGpD,cAAcW;IAEjD,MAAM,EACJ0C,OAAO,EACPC,YAAY,EACZC,MAAM,EACNb,QAAQ,EACRc,UAAU,EACVZ,iBAAiB,EAClB,GAAGpC,oBAAoB;QACtBiC;QACAlB;QACAmB,UAAUC;QACVW,cAAcf,gBAAgB5B;QAC9BiC,mBAAmBC;IACrB;IAEA,IAAI,EAAEY,cAAc,EAAE,EAAE,GAAG/C;IAC3B,IAAIM,SAAS,CAACyC,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,8DAA8D;IAC9D,mBAAmB;IACnB,MAAM9B,SAASJ,WAAW,gBAAgBA,WAAW,UAAUK;IAE/D,MAAM8B,qBACJ,KAACC;QACE,GAAGb,SAAS;QACblC,IAAIA;QACJD,KAAKyC;QACLZ,MAAMA;QACNO,UAAUA;QACVL,UAAUA;QACVe,aAAaA;QACb3C,OAAOM;QACPL,WAAWT,SAAS;YAClBiB;YACAiC;YACAzC,WAAWM;YACXuC,mBAAmB,CAAC,CAAC5C,SAAS,CAACU;QACjC;;IAIJ,MAAMmC,YAAY7C,uBAChB,KAACd;QACE,GAAGe,UAAU;QACd6C,SAASlD;QACTE,OAAOG,YAAYH,SAASI;QAC5BH,WAAWE,YAAYF,aAAaI;QACpC4C,QAAQ;QACRvC,OAAOA;QACPC,OAAOA;QACPC,QAAQA;QACRqB,UAAUA;kBAET/B;;IAIL,IAAIgD,yBACF;;YACGN;YACAG;;;IAIL,IAAItC,WAAW,QAAQ;QACrByC,yBACE,KAAC7D;YACE,GAAGmB,oBAAoB;YACxB2C,QAAQ,GAAGrD,GAAG,KAAK,CAAC;YACpByC,SAASA;YACTb,MAAMA;YACNpB,WAAWA;YACXC,eAAeA;YACf6B,cAAcD,SAASC;YACvBN,mBAAmBA;sBAElBoB;;IAGP;IAEA,qBACE,KAAC/D;QACC0B,QAAQA;QACP,GAAGW,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,KAACjC;YACE,GAAGmC,cAAc;YAClB5B,KAAK2C;YACLxC,OAAO;gBACL,GAAGA,KAAK;gBACR,0BAA0ByC;YAC5B;YACAxC,WAAWR,kBAAkB;gBAC3B2D,SAAS,CAACtB,qBAAqBrB,WAAW;gBAC1CwB;gBACAQ,QAAQ,CAAC,CAACA;gBACVY,mBACE,CAAC,CAACnD,SAAUiB,CAAAA,UAAU,eAAeA,UAAU,QAAO;gBACxDlB;YACF;YACAkB,OAAOA;YACPjB,OAAO,CAAC,CAACA;YACTS,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRsB,UAAUA;YACVD,UAAUA;YACVlB,WAAWA;YACXC,YAAYA;YACZK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;YACzBoC,SAAS,CAACC;gBACR,mEAAmE;gBACnE,iEAAiE;gBACjE,+DAA+D;gBAC/D,IAAI,CAACtB,YAAYsB,MAAMC,MAAM,KAAKD,MAAME,aAAa,EAAE;oBACrDpB,QAAQqB,OAAO,EAAEC;gBACnB;YACF;sBAECT;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\n\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  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `textAreaStylesStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {\n  ref?: Ref<HTMLTextAreaElement>;\n\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<HTMLAttributes<HTMLDivElement>>;\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>>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\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 *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n */\nexport function TextArea(props: TextAreaProps): ReactElement {\n  const {\n    ref,\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,\n    error,\n    active,\n    inline: propInline,\n    leftAddon,\n    rightAddon,\n    disableLeftAddonStyles,\n    disableRightAddonStyles,\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      inline={inline}\n      {...messageContainerProps}\n      messageProps={messageProps}\n    >\n      <TextFieldContainer\n        {...containerProps}\n        ref={containerRef}\n        style={{\n          ...style,\n          \"--rmd-text-area-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        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"],"names":["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","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":"AAAA;;AAWA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,sBAAsB;AAElE,SAEEC,mBAAmB,QACd,2BAA2B;AAqFlC;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,oBAAoB,EACpBC,SAAS,MAAM,EACfC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,QAAQC,UAAU,EAClBC,SAAS,EACTC,UAAU,EACVC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,OAAO,CAAC,EACRC,UAAU,CAAC,CAAC,EACZC,UAAUC,YAAY,EACtBC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGxC;IACpE,MAAME,KAAKb,aAAac,QAAQ;IAChC,MAAMoB,QAAQ5B,cAAc,SAAS6B;IACrC,MAAMC,qBAAqB9B,cACzB,sBACA+B;IAEF,MAAM,CAACe,SAASC,gBAAgB,GAAGpD,cAAcW;IAEjD,MAAM,EACJ0C,OAAO,EACPC,YAAY,EACZC,MAAM,EACNb,QAAQ,EACRc,UAAU,EACVZ,iBAAiB,EAClB,GAAGpC,oBAAoB;QACtBiC;QACAlB;QACAmB,UAAUC;QACVW,cAAcf,gBAAgB5B;QAC9BiC,mBAAmBC;IACrB;IAEA,IAAI,EAAEY,cAAc,EAAE,EAAE,GAAG/C;IAC3B,IAAIM,SAAS,CAACyC,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,8DAA8D;IAC9D,mBAAmB;IACnB,MAAM9B,SAASJ,WAAW,gBAAgBA,WAAW,UAAUK;IAE/D,MAAM8B,qBACJ,KAACC;QACE,GAAGb,SAAS;QACblC,IAAIA;QACJD,KAAKyC;QACLZ,MAAMA;QACNO,UAAUA;QACVL,UAAUA;QACVe,aAAaA;QACb3C,OAAOM;QACPL,WAAWT,SAAS;YAClBiB;YACAiC;YACAzC,WAAWM;YACXuC,mBAAmB,CAAC,CAAC5C,SAAS,CAACU;QACjC;;IAIJ,MAAMmC,YAAY7C,uBAChB,KAACd;QACE,GAAGe,UAAU;QACd6C,SAASlD;QACTE,OAAOG,YAAYH,SAASI;QAC5BH,WAAWE,YAAYF,aAAaI;QACpC4C,QAAQ;QACRvC,OAAOA;QACPC,OAAOA;QACPC,QAAQA;QACRqB,UAAUA;kBAET/B;;IAIL,IAAIgD,yBACF;;YACGN;YACAG;;;IAIL,IAAItC,WAAW,QAAQ;QACrByC,yBACE,KAAC7D;YACE,GAAGmB,oBAAoB;YACxB2C,QAAQ,GAAGrD,GAAG,KAAK,CAAC;YACpByC,SAASA;YACTb,MAAMA;YACNpB,WAAWA;YACXC,eAAeA;YACf6B,cAAcD,SAASC;YACvBN,mBAAmBA;sBAElBoB;;IAGP;IAEA,qBACE,KAAC/D;QACC0B,QAAQA;QACP,GAAGW,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,KAACjC;YACE,GAAGmC,cAAc;YAClB5B,KAAK2C;YACLxC,OAAO;gBACL,GAAGA,KAAK;gBACR,0BAA0ByC;YAC5B;YACAxC,WAAWR,kBAAkB;gBAC3B2D,SAAS,CAACtB,qBAAqBrB,WAAW;gBAC1CwB;gBACAQ,QAAQ,CAAC,CAACA;gBACVY,mBACE,CAAC,CAACnD,SAAUiB,CAAAA,UAAU,eAAeA,UAAU,QAAO;gBACxDlB;YACF;YACAkB,OAAOA;YACPjB,OAAO,CAAC,CAACA;YACTS,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRsB,UAAUA;YACVD,UAAUA;YACVlB,WAAWA;YACXC,YAAYA;YACZK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;YACzBoC,SAAS,CAACC;gBACR,mEAAmE;gBACnE,iEAAiE;gBACjE,+DAA+D;gBAC/D,IAAI,CAACtB,YAAYsB,MAAMC,MAAM,KAAKD,MAAME,aAAa,EAAE;oBACrDpB,QAAQqB,OAAO,EAAEC;gBACnB;YACF;sBAECT;;;AAIT"}

package/dist/form/TextField.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type Ref } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
@@ -20,6 +20,7 @@ export type TextFieldInputAttributes = Omit<InputHTMLAttributes<HTMLInputElement
  * @since 6.0.0 Removed the `containerRef` prop.
  */
 export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutocompleteProps, FormFieldOptions {
+    ref?: Ref<HTMLInputElement>;
     /**
      * @defaultValue `"text-field-" + useId()`
      */
@@ -81,4 +82,4 @@ export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoc
  *
  * @see {@link https://react-md.dev/components/textfield | TextField Demos}
  */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function TextField(props: TextFieldProps): ReactElement;

package/dist/form/TextField.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
@@ -34,8 +33,8 @@ import { textField } from "./textFieldStyles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/textfield | TextField Demos}
- */ 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, error, active, inline, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, ...remaining } = props;
+ */ export function TextField(props) {
+    const { ref, id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, ...remaining } = props;
     const { disabled, readOnly } = props;
     const id = useEnsuredId(propId, "text-field");
     let { placeholder = "" } = props;
@@ -101,6 +100,6 @@ import { textField } from "./textFieldStyles.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=TextField.js.map