@react-md/core 6.2.1 → 6.3.1

package/dist/form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\n\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type LabelRequiredForA11y,\n  type PropsWithRef,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { type SliderAddonProps, SliderContainer } from \"./SliderContainer.js\";\nimport {\n  type ConfigurableSliderThumbProps,\n  SliderThumb,\n  type SliderThumbPresentation,\n  type SliderThumbProps,\n} from \"./SliderThumb.js\";\nimport { SliderTrack } from \"./SliderTrack.js\";\nimport {\n  type SliderMarksOptions,\n  SliderValueMarks,\n} from \"./SliderValueMarks.js\";\nimport { getJumpValue, getSliderInputName } from \"./sliderUtils.js\";\nimport { type RangeSliderState } from \"./useRangeSlider.js\";\nimport { type SliderState, type SliderValueOptions } from \"./useSlider.js\";\nimport { useSliderDraggable } from \"./useSliderDraggable.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slider-color\"?: string;\n    \"--rmd-slider-active-color\"?: string;\n    \"--rmd-slider-inactive-color\"?: string;\n    \"--rmd-slider-size\"?: string | number;\n    \"--rmd-slider-active-size\"?: string | number;\n    \"--rmd-slider-inactive-size\"?: string | number;\n    \"--rmd-slider-vertical-size\"?: string | number;\n    \"--rmd-slider-offset-1\"?: string;\n    \"--rmd-slider-offset-2\"?: string;\n    \"--rmd-slider-tooltip-scale\"?: string | number;\n    \"--rmd-slider-tooltip-translate\"?: string | number;\n    \"--rmd-slider-mark-offset\"?: string;\n  }\n}\n\nconst emptyString = (): string => \"\";\nconst noop = (): undefined => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n */\nexport interface BaseSliderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderThumbPresentation,\n    SliderValueOptions,\n    SliderAddonProps,\n    SliderMarksOptions {\n  /**\n   * This can be used to apply a ref to the container element since this\n   * component does not use `forwardRef`.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The amount to jump the slider's value when the `PageUp` or `PageDown`\n   * key is pressed.\n   *\n   * The default value is 1/10th of the range.\n   *\n   * @defaultValue `(numberOfSteps / 10) * step`\n   */\n  jump?: number;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /**\n   * This can be used to apply custom styles or a `ref` to the track element if\n   * needed.\n   */\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This can be used to configure any additional tooltip props like the\n   * CSS transition `classNames`, styles, etc.\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * Note: The `position` will always be `\"above\"` for horizontal sliders and\n   * `\"left\"` for vertical sliders.\n   */\n  tooltipProps?: Omit<Partial<TooltipProps>, \"position\">;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Only requires `value` and `setValue` props instead of all the\n * slider controls.\n * @since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use\n * the `aria-label` or `aria-labelledby` props instead.\n * @since 6.0.0 The `baseId` prop was removed in favor of `id` or `*Props.id`\n */\nexport interface SliderProps extends BaseSliderProps, SliderState {\n  /**\n   * Convenience pass-through prop to {@link ConfigurableSliderThumbProps.name} which\n   * will be applied to the hidden `<input type=\"range\" />`\n   */\n  name?: string;\n\n  /**\n   * Any additional props that should be provided to the thumb element. This can\n   * be useful for applying additional styling.\n   */\n  thumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?: (value: number) => Partial<TooltipProps> | undefined;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value) => (\n   *     <TextIconSpacing icon={<FavoriteIcon />}>\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?: (value: number) => ReactNode;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of\n * all the slider controls.\n * @since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,\n * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to\n * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,\n * `maxThumbLabelledBy`, and `maxThumbProps` respectively.\n */\nexport interface RangeSliderProps extends BaseSliderProps, RangeSliderState {\n  /**\n   * Convenience pass-through prop for {@link\n   * ConfigurableSliderThumbProps.name} for both the {@link minThumbProps} and\n   * {@link maxThumbProps}.\n   */\n  name?: string;\n\n  /**\n   * Any additional props that should be provided to the min value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  minThumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * Any additional props that should be provided to the max value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  maxThumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * The `aria-label` to apply to the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Min\"`\n   */\n  minThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabel} are required for\n   * accessibility.\n   */\n  minThumbLabelledBy?: string;\n\n  /**\n   * The `aria-label` to apply to the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Max\"`\n   */\n  maxThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabel} are required for\n   * accessibility.\n   */\n  maxThumbLabelledBy?: string;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value, isFirstThumb) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 && isFirstThumb ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?: (\n    value: number,\n    isFirstThumb: boolean\n  ) => Partial<TooltipProps>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example More Value Information\n   * ```tsx\n   * <Slider\n   *   {...rangeSlider}\n   *   discrete\n   *   getTooltipChildren={(value, isFirstThumb) => (\n   *     <TextIconSpacing\n   *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}\n   *       iconAfter={!isFirstValue}\n   *     >\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?: (value: number, isFirstThumb: boolean) => ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useSlider } from \"@react-md/core/form/useSlider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useRangeSlider } from \"@react-md/core/form/useRangeSlider\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slider | Slider Demos}\n * @since 2.5.0\n * @since 6.0.0 The `Slider` and `RangeSlider` have been combined into the\n * single `Slider` component and removed the `label` support.\n * @since 6.0.0 Each thumb includes an invisible `<input type=\"range\">` instead\n * of an `<input type=\"hidden\">`.\n */\nexport function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;\nexport function Slider(props: RangeSliderProps): ReactElement;\nexport function Slider(\n  props: LabelRequiredForA11y<SliderProps> | RangeSliderProps\n): ReactElement {\n  const {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    id: propId,\n    name,\n    min = 0,\n    max = 100,\n    step = 1,\n    jump: propJump,\n    vertical = false,\n    discrete = false,\n    disabled = false,\n    getValueText = emptyString,\n    children,\n    marks = false,\n    value,\n    setValue,\n    rangeValue,\n    setRangeValue,\n    trackProps,\n    thumbProps,\n    minThumbProps,\n    minThumbLabel,\n    minThumbLabelledBy,\n    maxThumbProps,\n    maxThumbLabel,\n    maxThumbLabelledBy,\n    tooltipProps,\n    containerRef,\n    getMarkProps = noop,\n    getMarkLabelProps = noop,\n    tooltipVisibility = \"auto\",\n    getTooltipProps = noop,\n    getTooltipChildren = identity,\n    disableSmoothDragging = !!marks,\n    ...remaining\n  } = props as SliderProps & RangeSliderProps;\n\n  const jump = getJumpValue({ min, max, step, jump: propJump });\n  const isRangeSlider = typeof value !== \"number\";\n\n  const thumb1Id = useEnsuredId(propId, \"slider\");\n  const thumb2Id = `${thumb1Id}-2`;\n  const thumb1Ref = useRef<HTMLSpanElement>(null);\n  const thumb2Ref = useRef<HTMLSpanElement>(null);\n  const { thumb1Name, thumb2Name } = getSliderInputName(name, isRangeSlider);\n\n  let thumb1Max = max;\n  let thumb2Min = min;\n  let thumb1Label: string | undefined;\n  let thumb1LabelledBy: string | undefined;\n  let thumb2Label: string | undefined;\n  let thumb2LabelledBy: string | undefined;\n  let thumb1Value: number;\n  let thumb2Value: number;\n  let setThumb1Value: UseStateSetter<number>;\n  let setThumb2Value: UseStateSetter<number>;\n  if (!isRangeSlider) {\n    thumb1Value = value;\n    setThumb1Value = setValue;\n    thumb2Value = max;\n    setThumb2Value = noop;\n    thumb1Label = ariaLabel;\n    thumb1LabelledBy = ariaLabelledBy;\n  } else {\n    thumb1LabelledBy = minThumbLabelledBy;\n    thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : \"Min\");\n    thumb2LabelledBy = maxThumbLabelledBy;\n    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : \"Max\");\n\n    [thumb1Value, thumb2Value] = rangeValue;\n\n    thumb1Max = thumb2Value - step;\n    thumb2Min = thumb1Value + step;\n\n    setThumb1Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[0]);\n\n        return [value, prevRangeValue[1]];\n      });\n    };\n    setThumb2Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[1]);\n\n        return [prevRangeValue[0], value];\n      });\n    };\n  }\n\n  const {\n    onKeyDown: thumb1OnKeyDown,\n    onMouseUp: thumb1OnMouseUp,\n    onMouseDown: thumb1OnMouseDown,\n    onMouseMove: thumb1OnMouseMove,\n    onTouchStart: thumb1OnTouchStart,\n    onTouchMove: thumb1OnTouchMove,\n    dragPercentage: thumb1DragPercentage,\n    draggableRef: thumb1DraggableRef,\n    dragging: thumb1Dragging,\n  } = useSliderDraggable({\n    jump,\n    ref: thumb1Ref,\n    min,\n    max: thumb1Max,\n    rangeMax: max,\n    step,\n    value: thumb1Value,\n    setValue: setThumb1Value,\n    disabled,\n    vertical,\n  });\n\n  const {\n    onKeyDown: thumb2OnKeyDown,\n    onMouseUp: thumb2OnMouseUp,\n    onMouseDown: thumb2OnMouseDown,\n    onMouseMove: thumb2OnMouseMove,\n    onTouchStart: thumb2OnTouchStart,\n    onTouchMove: thumb2OnTouchMove,\n    dragPercentage: thumb2DragPercentage,\n    draggableRef: thumb2DraggableRef,\n    dragging: thumb2Dragging,\n  } = useSliderDraggable({\n    jump,\n    ref: thumb2Ref,\n    min: thumb2Min,\n    max,\n    rangeMin: min,\n    step,\n    value: thumb2Value,\n    setValue: setThumb2Value,\n    vertical,\n    disabled,\n  });\n\n  const dragging = thumb1Dragging || thumb2Dragging;\n  const sharedThumbProps = {\n    step,\n    animate: !dragging,\n    discrete,\n    disabled,\n    vertical,\n    getValueText,\n    tooltipProps,\n    getTooltipProps,\n    getTooltipChildren,\n    tooltipVisibility,\n    disableSmoothDragging,\n  } as const satisfies Partial<SliderThumbProps>;\n\n  return (\n    <SliderContainer {...remaining} ref={containerRef} vertical={vertical}>\n      <SliderTrack\n        {...trackProps}\n        min={min}\n        max={max}\n        thumb1Ref={thumb1Ref}\n        thumb1Value={thumb1Value}\n        thumb1Dragging={!disableSmoothDragging && thumb1Dragging}\n        thumb1DragPercentage={thumb1DragPercentage}\n        thumb1OnMouseUp={thumb1OnMouseUp}\n        thumb1OnMouseDown={thumb1OnMouseDown}\n        thumb1OnMouseMove={thumb1OnMouseMove}\n        thumb1OnTouchStart={thumb1OnTouchStart}\n        thumb1OnTouchMove={thumb1OnTouchMove}\n        thumb2Ref={thumb2Ref}\n        thumb2Value={thumb2Value}\n        thumb2Dragging={!disableSmoothDragging && thumb2Dragging}\n        thumb2DragPercentage={thumb2DragPercentage}\n        thumb2OnMouseUp={thumb2OnMouseUp}\n        thumb2OnMouseDown={thumb2OnMouseDown}\n        thumb2OnMouseMove={thumb2OnMouseMove}\n        thumb2OnTouchStart={thumb2OnTouchStart}\n        thumb2OnTouchMove={thumb2OnTouchMove}\n        animate={!disableSmoothDragging && !dragging}\n        disabled={disabled}\n        vertical={vertical}\n        isRangeSlider={isRangeSlider}\n      >\n        <SliderThumb\n          aria-label={thumb1Label as string}\n          aria-labelledby={thumb1LabelledBy}\n          id={thumb1Id}\n          name={thumb1Name}\n          {...thumbProps}\n          {...minThumbProps}\n          {...sharedThumbProps}\n          ref={thumb1DraggableRef}\n          min={min}\n          max={thumb1Max}\n          value={thumb1Value}\n          index={1}\n          active={thumb1Dragging}\n          onChange={(event) => {\n            setThumb1Value(event.currentTarget.valueAsNumber);\n          }}\n          onKeyDown={thumb1OnKeyDown}\n        />\n        {isRangeSlider && (\n          <SliderThumb\n            aria-label={thumb2Label as string}\n            aria-labelledby={thumb2LabelledBy}\n            id={thumb2Id}\n            name={thumb2Name}\n            {...maxThumbProps}\n            {...sharedThumbProps}\n            ref={thumb2DraggableRef}\n            min={thumb2Min}\n            max={max}\n            value={thumb2Value}\n            index={2}\n            active={thumb2Dragging}\n            onChange={(event) => {\n              setThumb2Value(event.currentTarget.valueAsNumber);\n            }}\n            onKeyDown={thumb2OnKeyDown}\n          />\n        )}\n        {marks && (\n          <SliderValueMarks\n            min={min}\n            max={max}\n            step={step}\n            marks={marks}\n            vertical={vertical}\n            thumb1Value={thumb1Value}\n            thumb2Value={thumb2Value}\n            isRangeSlider={isRangeSlider}\n            getMarkProps={getMarkProps}\n            getMarkLabelProps={getMarkLabelProps}\n          />\n        )}\n        {children}\n      </SliderTrack>\n    </SliderContainer>\n  );\n}\n"],"names":["useRef","useEnsuredId","identity","SliderContainer","SliderThumb","SliderTrack","SliderValueMarks","getJumpValue","getSliderInputName","useSliderDraggable","emptyString","noop","Slider","props","ariaLabel","ariaLabelledBy","id","propId","name","min","max","step","jump","propJump","vertical","discrete","disabled","getValueText","children","marks","value","setValue","rangeValue","setRangeValue","trackProps","thumbProps","minThumbProps","minThumbLabel","minThumbLabelledBy","maxThumbProps","maxThumbLabel","maxThumbLabelledBy","tooltipProps","containerRef","getMarkProps","getMarkLabelProps","tooltipVisibility","getTooltipProps","getTooltipChildren","disableSmoothDragging","remaining","isRangeSlider","thumb1Id","thumb2Id","thumb1Ref","thumb2Ref","thumb1Name","thumb2Name","thumb1Max","thumb2Min","thumb1Label","thumb1LabelledBy","thumb2Label","thumb2LabelledBy","thumb1Value","thumb2Value","setThumb1Value","setThumb2Value","undefined","valueOrSetter","prevRangeValue","onKeyDown","thumb1OnKeyDown","onMouseUp","thumb1OnMouseUp","onMouseDown","thumb1OnMouseDown","onMouseMove","thumb1OnMouseMove","onTouchStart","thumb1OnTouchStart","onTouchMove","thumb1OnTouchMove","dragPercentage","thumb1DragPercentage","draggableRef","thumb1DraggableRef","dragging","thumb1Dragging","ref","rangeMax","thumb2OnKeyDown","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","thumb2DragPercentage","thumb2DraggableRef","thumb2Dragging","rangeMin","sharedThumbProps","animate","aria-label","aria-labelledby","index","active","onChange","event","currentTarget","valueAsNumber"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\n\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type LabelRequiredForA11y,\n  type PropsWithRef,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { type SliderAddonProps, SliderContainer } from \"./SliderContainer.js\";\nimport {\n  type ConfigurableSliderThumbProps,\n  SliderThumb,\n  type SliderThumbPresentation,\n  type SliderThumbProps,\n} from \"./SliderThumb.js\";\nimport { SliderTrack } from \"./SliderTrack.js\";\nimport {\n  type SliderMarksOptions,\n  SliderValueMarks,\n} from \"./SliderValueMarks.js\";\nimport { getJumpValue, getSliderInputName } from \"./sliderUtils.js\";\nimport { type RangeSliderState } from \"./useRangeSlider.js\";\nimport { type SliderState, type SliderValueOptions } from \"./useSlider.js\";\nimport { useSliderDraggable } from \"./useSliderDraggable.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `sliderStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slider-color\"?: string;\n    \"--rmd-slider-active-color\"?: string;\n    \"--rmd-slider-inactive-color\"?: string;\n    \"--rmd-slider-size\"?: string | number;\n    \"--rmd-slider-active-size\"?: string | number;\n    \"--rmd-slider-inactive-size\"?: string | number;\n    \"--rmd-slider-vertical-size\"?: string | number;\n    \"--rmd-slider-offset-1\"?: string;\n    \"--rmd-slider-offset-2\"?: string;\n    \"--rmd-slider-tooltip-scale\"?: string | number;\n    \"--rmd-slider-tooltip-translate\"?: string | number;\n    \"--rmd-slider-mark-offset\"?: string;\n    \"--rmd-slider-mark-active-color\"?: string;\n    \"--rmd-slider-mark-active-opacity\"?: string | number;\n    \"--rmd-slider-mark-inactive-color\"?: string;\n    \"--rmd-slider-mark-inactive-opacity\"?: string | number;\n  }\n}\n\nconst emptyString = (): string => \"\";\nconst noop = (): undefined => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n */\nexport interface BaseSliderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderThumbPresentation,\n    SliderValueOptions,\n    SliderAddonProps,\n    SliderMarksOptions {\n  /**\n   * This can be used to apply a ref to the container element since this\n   * component does not use `forwardRef`.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The amount to jump the slider's value when the `PageUp` or `PageDown`\n   * key is pressed.\n   *\n   * The default value is 1/10th of the range.\n   *\n   * @defaultValue `(numberOfSteps / 10) * step`\n   */\n  jump?: number;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /**\n   * This can be used to apply custom styles or a `ref` to the track element if\n   * needed.\n   */\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This can be used to configure any additional tooltip props like the\n   * CSS transition `classNames`, styles, etc.\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * Note: The `position` will always be `\"above\"` for horizontal sliders and\n   * `\"left\"` for vertical sliders.\n   */\n  tooltipProps?: Omit<Partial<TooltipProps>, \"position\">;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Only requires `value` and `setValue` props instead of all the\n * slider controls.\n * @since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use\n * the `aria-label` or `aria-labelledby` props instead.\n * @since 6.0.0 The `baseId` prop was removed in favor of `id` or `*Props.id`\n */\nexport interface SliderProps extends BaseSliderProps, SliderState {\n  /**\n   * Convenience pass-through prop to {@link ConfigurableSliderThumbProps.name} which\n   * will be applied to the hidden `<input type=\"range\" />`\n   */\n  name?: string;\n\n  /**\n   * Any additional props that should be provided to the thumb element. This can\n   * be useful for applying additional styling.\n   */\n  thumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?: (value: number) => Partial<TooltipProps> | undefined;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value) => (\n   *     <TextIconSpacing icon={<FavoriteIcon />}>\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?: (value: number) => ReactNode;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of\n * all the slider controls.\n * @since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,\n * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to\n * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,\n * `maxThumbLabelledBy`, and `maxThumbProps` respectively.\n */\nexport interface RangeSliderProps extends BaseSliderProps, RangeSliderState {\n  /**\n   * Convenience pass-through prop for {@link\n   * ConfigurableSliderThumbProps.name} for both the {@link minThumbProps} and\n   * {@link maxThumbProps}.\n   */\n  name?: string;\n\n  /**\n   * Any additional props that should be provided to the min value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  minThumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * Any additional props that should be provided to the max value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  maxThumbProps?: ConfigurableSliderThumbProps;\n\n  /**\n   * The `aria-label` to apply to the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Min\"`\n   */\n  minThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabel} are required for\n   * accessibility.\n   */\n  minThumbLabelledBy?: string;\n\n  /**\n   * The `aria-label` to apply to the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Max\"`\n   */\n  maxThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabel} are required for\n   * accessibility.\n   */\n  maxThumbLabelledBy?: string;\n\n  /**\n   * This can be used to update the discrete slider's tooltip props.\n   *\n   * @example Custom Styles\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipProps={(value, isFirstThumb) => ({\n   *     className: cssUtils({\n   *       backgroundColor: value < 30 && isFirstThumb ? \"warning\" : undefined,\n   *     }),\n   *   })}\n   * />\n   * ```\n   */\n  getTooltipProps?: (\n    value: number,\n    isFirstThumb: boolean\n  ) => Partial<TooltipProps>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example More Value Information\n   * ```tsx\n   * <Slider\n   *   {...rangeSlider}\n   *   discrete\n   *   getTooltipChildren={(value, isFirstThumb) => (\n   *     <TextIconSpacing\n   *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}\n   *       iconAfter={!isFirstValue}\n   *     >\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?: (value: number, isFirstThumb: boolean) => ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useSlider } from \"@react-md/core/form/useSlider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useRangeSlider } from \"@react-md/core/form/useRangeSlider\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slider | Slider Demos}\n * @since 2.5.0\n * @since 6.0.0 The `Slider` and `RangeSlider` have been combined into the\n * single `Slider` component and removed the `label` support.\n * @since 6.0.0 Each thumb includes an invisible `<input type=\"range\">` instead\n * of an `<input type=\"hidden\">`.\n */\nexport function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;\nexport function Slider(props: RangeSliderProps): ReactElement;\nexport function Slider(\n  props: LabelRequiredForA11y<SliderProps> | RangeSliderProps\n): ReactElement {\n  const {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    id: propId,\n    name,\n    min = 0,\n    max = 100,\n    step = 1,\n    jump: propJump,\n    vertical = false,\n    discrete = false,\n    disabled = false,\n    getValueText = emptyString,\n    children,\n    marks = false,\n    value,\n    setValue,\n    rangeValue,\n    setRangeValue,\n    trackProps,\n    thumbProps,\n    minThumbProps,\n    minThumbLabel,\n    minThumbLabelledBy,\n    maxThumbProps,\n    maxThumbLabel,\n    maxThumbLabelledBy,\n    tooltipProps,\n    containerRef,\n    getMarkProps = noop,\n    getMarkLabelProps = noop,\n    tooltipVisibility = \"auto\",\n    getTooltipProps = noop,\n    getTooltipChildren = identity,\n    disableSmoothDragging = !!marks,\n    ...remaining\n  } = props as SliderProps & RangeSliderProps;\n\n  const jump = getJumpValue({ min, max, step, jump: propJump });\n  const isRangeSlider = typeof value !== \"number\";\n\n  const thumb1Id = useEnsuredId(propId, \"slider\");\n  const thumb2Id = `${thumb1Id}-2`;\n  const thumb1Ref = useRef<HTMLSpanElement>(null);\n  const thumb2Ref = useRef<HTMLSpanElement>(null);\n  const { thumb1Name, thumb2Name } = getSliderInputName(name, isRangeSlider);\n\n  let thumb1Max = max;\n  let thumb2Min = min;\n  let thumb1Label: string | undefined;\n  let thumb1LabelledBy: string | undefined;\n  let thumb2Label: string | undefined;\n  let thumb2LabelledBy: string | undefined;\n  let thumb1Value: number;\n  let thumb2Value: number;\n  let setThumb1Value: UseStateSetter<number>;\n  let setThumb2Value: UseStateSetter<number>;\n  if (!isRangeSlider) {\n    thumb1Value = value;\n    setThumb1Value = setValue;\n    thumb2Value = max;\n    setThumb2Value = noop;\n    thumb1Label = ariaLabel;\n    thumb1LabelledBy = ariaLabelledBy;\n  } else {\n    thumb1LabelledBy = minThumbLabelledBy;\n    thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : \"Min\");\n    thumb2LabelledBy = maxThumbLabelledBy;\n    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : \"Max\");\n\n    [thumb1Value, thumb2Value] = rangeValue;\n\n    thumb1Max = thumb2Value - step;\n    thumb2Min = thumb1Value + step;\n\n    setThumb1Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[0]);\n\n        return [value, prevRangeValue[1]];\n      });\n    };\n    setThumb2Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[1]);\n\n        return [prevRangeValue[0], value];\n      });\n    };\n  }\n\n  const {\n    onKeyDown: thumb1OnKeyDown,\n    onMouseUp: thumb1OnMouseUp,\n    onMouseDown: thumb1OnMouseDown,\n    onMouseMove: thumb1OnMouseMove,\n    onTouchStart: thumb1OnTouchStart,\n    onTouchMove: thumb1OnTouchMove,\n    dragPercentage: thumb1DragPercentage,\n    draggableRef: thumb1DraggableRef,\n    dragging: thumb1Dragging,\n  } = useSliderDraggable({\n    jump,\n    ref: thumb1Ref,\n    min,\n    max: thumb1Max,\n    rangeMax: max,\n    step,\n    value: thumb1Value,\n    setValue: setThumb1Value,\n    disabled,\n    vertical,\n  });\n\n  const {\n    onKeyDown: thumb2OnKeyDown,\n    onMouseUp: thumb2OnMouseUp,\n    onMouseDown: thumb2OnMouseDown,\n    onMouseMove: thumb2OnMouseMove,\n    onTouchStart: thumb2OnTouchStart,\n    onTouchMove: thumb2OnTouchMove,\n    dragPercentage: thumb2DragPercentage,\n    draggableRef: thumb2DraggableRef,\n    dragging: thumb2Dragging,\n  } = useSliderDraggable({\n    jump,\n    ref: thumb2Ref,\n    min: thumb2Min,\n    max,\n    rangeMin: min,\n    step,\n    value: thumb2Value,\n    setValue: setThumb2Value,\n    vertical,\n    disabled,\n  });\n\n  const dragging = thumb1Dragging || thumb2Dragging;\n  const sharedThumbProps = {\n    step,\n    animate: !dragging,\n    discrete,\n    disabled,\n    vertical,\n    getValueText,\n    tooltipProps,\n    getTooltipProps,\n    getTooltipChildren,\n    tooltipVisibility,\n    disableSmoothDragging,\n  } as const satisfies Partial<SliderThumbProps>;\n\n  return (\n    <SliderContainer {...remaining} ref={containerRef} vertical={vertical}>\n      <SliderTrack\n        {...trackProps}\n        min={min}\n        max={max}\n        thumb1Ref={thumb1Ref}\n        thumb1Value={thumb1Value}\n        thumb1Dragging={!disableSmoothDragging && thumb1Dragging}\n        thumb1DragPercentage={thumb1DragPercentage}\n        thumb1OnMouseUp={thumb1OnMouseUp}\n        thumb1OnMouseDown={thumb1OnMouseDown}\n        thumb1OnMouseMove={thumb1OnMouseMove}\n        thumb1OnTouchStart={thumb1OnTouchStart}\n        thumb1OnTouchMove={thumb1OnTouchMove}\n        thumb2Ref={thumb2Ref}\n        thumb2Value={thumb2Value}\n        thumb2Dragging={!disableSmoothDragging && thumb2Dragging}\n        thumb2DragPercentage={thumb2DragPercentage}\n        thumb2OnMouseUp={thumb2OnMouseUp}\n        thumb2OnMouseDown={thumb2OnMouseDown}\n        thumb2OnMouseMove={thumb2OnMouseMove}\n        thumb2OnTouchStart={thumb2OnTouchStart}\n        thumb2OnTouchMove={thumb2OnTouchMove}\n        animate={!disableSmoothDragging && !dragging}\n        disabled={disabled}\n        vertical={vertical}\n        isRangeSlider={isRangeSlider}\n      >\n        <SliderThumb\n          aria-label={thumb1Label as string}\n          aria-labelledby={thumb1LabelledBy}\n          id={thumb1Id}\n          name={thumb1Name}\n          {...thumbProps}\n          {...minThumbProps}\n          {...sharedThumbProps}\n          ref={thumb1DraggableRef}\n          min={min}\n          max={thumb1Max}\n          value={thumb1Value}\n          index={1}\n          active={thumb1Dragging}\n          onChange={(event) => {\n            setThumb1Value(event.currentTarget.valueAsNumber);\n          }}\n          onKeyDown={thumb1OnKeyDown}\n        />\n        {isRangeSlider && (\n          <SliderThumb\n            aria-label={thumb2Label as string}\n            aria-labelledby={thumb2LabelledBy}\n            id={thumb2Id}\n            name={thumb2Name}\n            {...maxThumbProps}\n            {...sharedThumbProps}\n            ref={thumb2DraggableRef}\n            min={thumb2Min}\n            max={max}\n            value={thumb2Value}\n            index={2}\n            active={thumb2Dragging}\n            onChange={(event) => {\n              setThumb2Value(event.currentTarget.valueAsNumber);\n            }}\n            onKeyDown={thumb2OnKeyDown}\n          />\n        )}\n        {marks && (\n          <SliderValueMarks\n            min={min}\n            max={max}\n            step={step}\n            marks={marks}\n            vertical={vertical}\n            thumb1Value={thumb1Value}\n            thumb2Value={thumb2Value}\n            isRangeSlider={isRangeSlider}\n            getMarkProps={getMarkProps}\n            getMarkLabelProps={getMarkLabelProps}\n          />\n        )}\n        {children}\n      </SliderTrack>\n    </SliderContainer>\n  );\n}\n"],"names":["useRef","useEnsuredId","identity","SliderContainer","SliderThumb","SliderTrack","SliderValueMarks","getJumpValue","getSliderInputName","useSliderDraggable","emptyString","noop","Slider","props","ariaLabel","ariaLabelledBy","id","propId","name","min","max","step","jump","propJump","vertical","discrete","disabled","getValueText","children","marks","value","setValue","rangeValue","setRangeValue","trackProps","thumbProps","minThumbProps","minThumbLabel","minThumbLabelledBy","maxThumbProps","maxThumbLabel","maxThumbLabelledBy","tooltipProps","containerRef","getMarkProps","getMarkLabelProps","tooltipVisibility","getTooltipProps","getTooltipChildren","disableSmoothDragging","remaining","isRangeSlider","thumb1Id","thumb2Id","thumb1Ref","thumb2Ref","thumb1Name","thumb2Name","thumb1Max","thumb2Min","thumb1Label","thumb1LabelledBy","thumb2Label","thumb2LabelledBy","thumb1Value","thumb2Value","setThumb1Value","setThumb2Value","undefined","valueOrSetter","prevRangeValue","onKeyDown","thumb1OnKeyDown","onMouseUp","thumb1OnMouseUp","onMouseDown","thumb1OnMouseDown","onMouseMove","thumb1OnMouseMove","onTouchStart","thumb1OnTouchStart","onTouchMove","thumb1OnTouchMove","dragPercentage","thumb1DragPercentage","draggableRef","thumb1DraggableRef","dragging","thumb1Dragging","ref","rangeMax","thumb2OnKeyDown","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","thumb2DragPercentage","thumb2DraggableRef","thumb2Dragging","rangeMin","sharedThumbProps","animate","aria-label","aria-labelledby","index","active","onChange","event","currentTarget","valueAsNumber"],"mappings":"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"}

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\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 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;AAgCjD;;;;;;;;;;;;;;;;;;;;;;;;;;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 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 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;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/form/TextArea.js

@@ -99,6 +99,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
         });
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
+        inline: inline,
         ...messageContainerProps,
         messageProps: messageProps,
         children: /*#__PURE__*/ _jsx(TextFieldContainer, {

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\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,\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<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        {...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":"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"}
+{"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,\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<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;AAoFlC;;;;;;;;;;;;;;;;;;;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"}

package/dist/form/TextField.js

@@ -44,6 +44,7 @@ import { textField } from "./textFieldStyles.js";
         placeholder = " ";
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
+        inline: inline,
         ...messageContainerProps,
         messageProps: messageProps && {
             error,

package/dist/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 * @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 * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @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>>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\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 *\n * @see {@link https://react-md.dev/components/textfield | TextField Demos}\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      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      ...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          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          <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","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAiFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,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,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,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACE,GAAGkC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 * @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 * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @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>>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\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 *\n * @see {@link https://react-md.dev/components/textfield | TextField Demos}\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      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      ...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        inline={inline}\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          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          <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","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAiFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,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,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,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACCsB,QAAQA;QACP,GAAGY,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/TextFieldContainer.d.ts

@@ -1,18 +1,5 @@
 import { type HTMLAttributes } from "react";
 import { type TextFieldContainerOptions } from "./types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-text-field-height"?: string | number;
-        "--rmd-text-field-padding-left"?: string | number;
-        "--rmd-text-field-padding-right"?: string | number;
-        "--rmd-text-field-padding-top"?: string | number;
-        "--rmd-text-field-border-color"?: string;
-        "--rmd-text-field-hover-border-color"?: string;
-        "--rmd-text-field-filled-color"?: string;
-        "--rmd-form-addon-top"?: string | number;
-        "--rmd-form-addon-margin-top"?: string | number;
-    }
-}
 export interface TextFieldContainerProps extends HTMLAttributes<HTMLDivElement>, TextFieldContainerOptions {
     /**
      * Set this to `true` if there is a floating label with the `TextField` or

package/dist/form/TextFieldContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textFieldContainer } from \"./textFieldContainerStyles.js\";\nimport { type TextFieldContainerOptions } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-form-addon-top\"?: string | number;\n    \"--rmd-form-addon-margin-top\"?: string | number;\n  }\n}\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,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles,\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        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","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,kBAAkB,QAAQ,gCAAgC;AA6BnE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,sBAAsB,EACtBC,UAAU,EACVC,eAAe,EACfC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGrB;IACJ,MAAMiB,QAAQpB,cAAc,SAASqB;IACrC,MAAMC,qBAAqBtB,cACzB,sBACAuB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbpB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BmB;YACAb;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAP;YACAQ,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFT;0BACD,KAACN;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\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,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles,\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        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","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,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,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,sBAAsB,EACtBC,UAAU,EACVC,eAAe,EACfC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGrB;IACJ,MAAMiB,QAAQpB,cAAc,SAASqB;IACrC,MAAMC,qBAAqBtB,cACzB,sBACAuB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbpB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BmB;YACAb;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAP;YACAQ,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFT;0BACD,KAACN;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}

package/dist/form/_form-message.scss

@@ -22,6 +22,12 @@ $disable-everything: base.$form-disable-everything !default;
 /// @type Boolean
 $disable-counter: $disable-everything !default;
 
+/// Set to `true` to disable the inline styles for the container element.
+///
+/// @since 6.3.0
+/// @type Boolean
+$disable-inline: text-field.$disable-inline !default;
+
 /// Configure only the `font-size` for the `FormMessage` typography.
 /// @type String
 $font-size: 0.75rem !default;
@@ -64,6 +70,13 @@ $min-height: 2rem !default;
         display: flex;
         flex-direction: column;
         width: 100%;
+
+        @if not $disable-inline {
+          &--inline {
+            display: inline-flex;
+            width: auto;
+          }
+        }
       }
 
       .rmd-form-message {

package/dist/form/_select.scss

@@ -107,7 +107,11 @@ $option-selected-icon-spacing: $option-padding-left !default;
     @if not $disable-native-select-multiple {
       .rmd-native-select-container {
         &--multi {
-          @include text-field.set-var(addon-top, $native-select-addon-top);
+          @include text-field.set-var(addon-top, 0);
+          @include text-field.set-var(
+            addon-margin-top,
+            $native-select-addon-top
+          );
           @include text-field.use-var(min-height, height);
 
           height: auto;

package/dist/form/_text-area.scss

@@ -82,7 +82,8 @@ $variables: (height, padding);
 @mixin textarea-container-styles($disable-layer: false) {
   @include utils.optional-layer(text-area, $disable-layer) {
     .rmd-textarea-container {
-      @include text-field.set-var(addon-top, $addon-top);
+      @include text-field.set-var(addon-top, 0);
+      @include text-field.set-var(addon-margin-top, $addon-top);
 
       height: auto;
       max-width: 100%;

package/dist/form/_text-field.scss

@@ -31,6 +31,13 @@ $disable-addon: $disable-everything !default;
 /// @type Boolean
 $disable-placeholder-ellipsis: false !default;
 
+/// Set to `true` to disable the styles for allowing the `TextField` to be
+/// rendered inline instead of always spanning the full width of the container.
+///
+/// @since 6.3.0
+/// @type Boolean
+$disable-inline: false !default;
+
 /// Set to `true` to disable the `TextFieldContainer` dense styles.
 /// @type Boolean
 $disable-container-dense: false !default;
@@ -357,9 +364,11 @@ $variables: (
         }
       }
 
-      &--inline {
-        display: inline-flex;
-        width: auto;
+      @if not $disable-inline {
+        &--inline {
+          display: inline-flex;
+          width: auto;
+        }
       }
 
       &--label {
@@ -656,6 +665,7 @@ $variables: (
       {
         @include use-var(margin-top, addon-margin-top);
       }
+      @include use-var(top, addon-top);
 
       // this makes it so that this container element is the same size as the
       // child (normally icons). without this, icons would have a height of 30.5px

package/dist/form/formMessageContainerStyles.d.ts

@@ -3,6 +3,13 @@
  */
 export interface FormMessageContainerClassNameOptions {
     className?: string;
+    /**
+     * Set to `true` to enable `display: inline-flex; width: auto`.
+     *
+     * @defaultValue `false`
+     * @since 6.3.0
+     */
+    inline?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/form/formMessageContainerStyles.js

@@ -4,8 +4,10 @@ const styles = bem("rmd-form-message-container");
 /**
  * @since 6.0.0
  */ export function formMessageContainer(options = {}) {
-    const { className } = options;
-    return cnb(styles(), className);
+    const { className, inline } = options;
+    return cnb(styles({
+        inline
+    }), className);
 }
 
 //# sourceMappingURL=formMessageContainerStyles.js.map

package/dist/form/formMessageContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/formMessageContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-form-message-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageContainerClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function formMessageContainer(\n  options: FormMessageContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","formMessageContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}
+{"version":3,"sources":["../../src/form/formMessageContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-form-message-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageContainerClassNameOptions {\n  className?: string;\n\n  /**\n   * Set to `true` to enable `display: inline-flex; width: auto`.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  inline?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function formMessageContainer(\n  options: FormMessageContainerClassNameOptions = {}\n): string {\n  const { className, inline } = options;\n\n  return cnb(styles({ inline }), className);\n}\n"],"names":["cnb","bem","styles","formMessageContainer","options","className","inline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiBnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGF;IAE9B,OAAOJ,IAAIE,OAAO;QAAEI;IAAO,IAAID;AACjC"}

package/dist/form/sliderUtils.d.ts

@@ -1,13 +1,11 @@
 import { type RefObject } from "react";
 import { type DraggableEventHandlers, type DraggableImplementation, type DraggableMouseEventHandlers, type DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
-import { type RenameKeysWithPrefix } from "../types.js";
+import { type MinMaxRange, type RenameKeysWithPrefix } from "../types.js";
 /**
  * @since 6.0.0
  * @internal
  */
-interface JumpOptions {
-    min: number;
-    max: number;
+interface JumpOptions extends MinMaxRange {
     step: number;
     jump: number | undefined;
 }
@@ -42,9 +40,7 @@ export declare const getClosestThumbEventHandlers: (options: ClosestThumbEventHa
  * @since 6.0.0
  * @internal
  */
-export interface ThumbOffsetsOptions {
-    min: number;
-    max: number;
+export interface ThumbOffsetsOptions extends MinMaxRange {
     thumb1Value: number;
     thumb1Dragging: boolean;
     thumb1DragPercentage: number;

package/dist/form/sliderUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/sliderUtils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n  type DraggableEventHandlers,\n  type DraggableImplementation,\n  type DraggableMouseEventHandlers,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { type RenameKeysWithPrefix } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface JumpOptions {\n  min: number;\n  max: number;\n  step: number;\n  jump: number | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getJumpValue = (options: JumpOptions): number => {\n  const { min, max, step, jump } = options;\n\n  const steps = getRangeSteps({ min, max, step });\n  const value = jump ?? (steps / 10) * step;\n  if (Number.isInteger(step)) {\n    return Math.max(step, Math.ceil(value));\n  }\n\n  return value;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RequiredThumbProps = Pick<\n  DraggableImplementation,\n  | \"dragging\"\n  | keyof DraggableMouseEventHandlers<HTMLElement>\n  | keyof DraggableTouchEventHandlers<HTMLElement>\n> & { ref: RefObject<HTMLSpanElement> };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ClosestThumbEventHandlersOptions = RenameKeysWithPrefix<\n  RequiredThumbProps,\n  \"thumb1\"\n> &\n  RenameKeysWithPrefix<RequiredThumbProps, \"thumb2\"> & {\n    vertical: boolean;\n    isRangeSlider: boolean;\n  };\n\n/**\n * NOTE: I do not need the mousemove events for this one to work.\n *\n * @since 6.0.0\n * @internal\n */\nexport const getClosestThumbEventHandlers = (\n  options: ClosestThumbEventHandlersOptions\n): DraggableEventHandlers<HTMLElement> => {\n  const {\n    thumb1Ref,\n    thumb1Dragging,\n    thumb1OnMouseUp,\n    thumb1OnMouseDown,\n    thumb1OnTouchStart,\n    thumb1OnTouchMove,\n    thumb2Ref,\n    thumb2Dragging,\n    thumb2OnMouseUp,\n    thumb2OnMouseDown,\n    thumb2OnTouchStart,\n    thumb2OnTouchMove,\n    isRangeSlider,\n    vertical,\n  } = options;\n\n  if (!isRangeSlider) {\n    return {\n      onMouseDown: thumb1OnMouseDown,\n      onMouseUp: thumb1OnMouseUp,\n      onTouchStart: thumb1OnTouchStart,\n      onTouchMove: thumb1OnTouchMove,\n    };\n  }\n\n  const isThumbOneClosest = (event: ClientPositionEvent): boolean => {\n    if (thumb2Dragging) {\n      return false;\n    }\n\n    const thumb1 = thumb1Ref.current;\n    const thumb2 = thumb2Ref.current;\n    if (!thumb1Dragging && thumb1 && thumb2) {\n      const clientPosition = getClientPosition({ event, vertical });\n      const thumb1Rect = thumb1.getBoundingClientRect();\n      const thumb2Rect = thumb2.getBoundingClientRect();\n      const thumb1Position = vertical ? thumb1Rect.y : thumb1Rect.x;\n      const thumb2Position = vertical ? thumb2Rect.y : thumb2Rect.x;\n\n      return (\n        Math.abs(clientPosition - thumb1Position) <=\n        Math.abs(clientPosition - thumb2Position)\n      );\n    }\n\n    return true;\n  };\n\n  return {\n    onMouseDown(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseDown(event);\n      } else {\n        thumb2OnMouseDown(event);\n      }\n    },\n    onMouseUp(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseUp(event);\n      } else {\n        thumb2OnMouseUp(event);\n      }\n    },\n    onTouchStart(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchStart(event);\n      } else {\n        thumb2OnTouchStart(event);\n      }\n    },\n    onTouchMove(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchMove(event);\n      } else {\n        thumb2OnTouchMove(event);\n      }\n    },\n  };\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getThumbOffset(\n  offset: number | undefined,\n  fallback: number\n): string | undefined {\n  if (typeof offset !== \"number\") {\n    return;\n  }\n\n  // the `offset` will be NaN when there are no possible steps to take because\n  // the first thumb is at the maximum value or the second thumb is at the\n  // minimum value\n  const value = Number.isNaN(offset) ? fallback : offset;\n  return `${value * 100}%`;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ThumbOffsetsOptions {\n  min: number;\n  max: number;\n  thumb1Value: number;\n  thumb1Dragging: boolean;\n  thumb1DragPercentage: number;\n  thumb2Value: number;\n  thumb2Dragging: boolean;\n  thumb2DragPercentage: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbOffsets {\n  \"--rmd-slider-offset-1\"?: string;\n  \"--rmd-slider-offset-2\"?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getThumbOffsets(options: ThumbOffsetsOptions): ThumbOffsets {\n  const {\n    min,\n    max,\n    thumb1Value,\n    thumb1Dragging,\n    thumb1DragPercentage,\n    thumb2Value,\n    thumb2Dragging,\n    thumb2DragPercentage,\n    isRangeSlider,\n  } = options;\n  let thumb1Percentage = thumb1Dragging\n    ? thumb1DragPercentage\n    : getPercentage({ min, max, value: thumb1Value });\n\n  let thumb2Percentage: number | undefined;\n  if (isRangeSlider) {\n    const percentage = getPercentage({ min, max, value: thumb2Value });\n\n    thumb1Percentage = Math.min(thumb1Percentage, percentage);\n    thumb2Percentage = thumb2Dragging\n      ? Math.max(thumb1Percentage, thumb2DragPercentage)\n      : percentage;\n  }\n\n  return {\n    \"--rmd-slider-offset-1\": getThumbOffset(thumb1Percentage, 0),\n    \"--rmd-slider-offset-2\": getThumbOffset(thumb2Percentage, 1),\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbNames {\n  thumb1Name?: string;\n  thumb2Name?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getSliderInputName(\n  name: string | undefined,\n  isRangeSlider: boolean\n): ThumbNames {\n  let thumb1Name = name;\n  let thumb2Name = name;\n  if (name && isRangeSlider && !name.includes(\"[]\")) {\n    thumb1Name = `min${name}`;\n    thumb2Name = `max${name}`;\n  }\n\n  return { thumb1Name, thumb2Name };\n}\n"],"names":["getClientPosition","getPercentage","getRangeSteps","getJumpValue","options","min","max","step","jump","steps","value","Number","isInteger","Math","ceil","getClosestThumbEventHandlers","thumb1Ref","thumb1Dragging","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Dragging","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","vertical","onMouseDown","onMouseUp","onTouchStart","onTouchMove","isThumbOneClosest","event","thumb1","current","thumb2","clientPosition","thumb1Rect","getBoundingClientRect","thumb2Rect","thumb1Position","y","x","thumb2Position","abs","getThumbOffset","offset","fallback","isNaN","getThumbOffsets","thumb1Value","thumb1DragPercentage","thumb2Value","thumb2DragPercentage","thumb1Percentage","thumb2Percentage","percentage","getSliderInputName","name","thumb1Name","thumb2Name","includes"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/sliderUtils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n  type DraggableEventHandlers,\n  type DraggableImplementation,\n  type DraggableMouseEventHandlers,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { type MinMaxRange, type RenameKeysWithPrefix } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface JumpOptions extends MinMaxRange {\n  step: number;\n  jump: number | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getJumpValue = (options: JumpOptions): number => {\n  const { min, max, step, jump } = options;\n\n  const steps = getRangeSteps({ min, max, step });\n  const value = jump ?? (steps / 10) * step;\n  if (Number.isInteger(step)) {\n    return Math.max(step, Math.ceil(value));\n  }\n\n  return value;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RequiredThumbProps = Pick<\n  DraggableImplementation,\n  | \"dragging\"\n  | keyof DraggableMouseEventHandlers<HTMLElement>\n  | keyof DraggableTouchEventHandlers<HTMLElement>\n> & { ref: RefObject<HTMLSpanElement> };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ClosestThumbEventHandlersOptions = RenameKeysWithPrefix<\n  RequiredThumbProps,\n  \"thumb1\"\n> &\n  RenameKeysWithPrefix<RequiredThumbProps, \"thumb2\"> & {\n    vertical: boolean;\n    isRangeSlider: boolean;\n  };\n\n/**\n * NOTE: I do not need the mousemove events for this one to work.\n *\n * @since 6.0.0\n * @internal\n */\nexport const getClosestThumbEventHandlers = (\n  options: ClosestThumbEventHandlersOptions\n): DraggableEventHandlers<HTMLElement> => {\n  const {\n    thumb1Ref,\n    thumb1Dragging,\n    thumb1OnMouseUp,\n    thumb1OnMouseDown,\n    thumb1OnTouchStart,\n    thumb1OnTouchMove,\n    thumb2Ref,\n    thumb2Dragging,\n    thumb2OnMouseUp,\n    thumb2OnMouseDown,\n    thumb2OnTouchStart,\n    thumb2OnTouchMove,\n    isRangeSlider,\n    vertical,\n  } = options;\n\n  if (!isRangeSlider) {\n    return {\n      onMouseDown: thumb1OnMouseDown,\n      onMouseUp: thumb1OnMouseUp,\n      onTouchStart: thumb1OnTouchStart,\n      onTouchMove: thumb1OnTouchMove,\n    };\n  }\n\n  const isThumbOneClosest = (event: ClientPositionEvent): boolean => {\n    if (thumb2Dragging) {\n      return false;\n    }\n\n    const thumb1 = thumb1Ref.current;\n    const thumb2 = thumb2Ref.current;\n    if (!thumb1Dragging && thumb1 && thumb2) {\n      const clientPosition = getClientPosition({ event, vertical });\n      const thumb1Rect = thumb1.getBoundingClientRect();\n      const thumb2Rect = thumb2.getBoundingClientRect();\n      const thumb1Position = vertical ? thumb1Rect.y : thumb1Rect.x;\n      const thumb2Position = vertical ? thumb2Rect.y : thumb2Rect.x;\n\n      return (\n        Math.abs(clientPosition - thumb1Position) <=\n        Math.abs(clientPosition - thumb2Position)\n      );\n    }\n\n    return true;\n  };\n\n  return {\n    onMouseDown(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseDown(event);\n      } else {\n        thumb2OnMouseDown(event);\n      }\n    },\n    onMouseUp(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseUp(event);\n      } else {\n        thumb2OnMouseUp(event);\n      }\n    },\n    onTouchStart(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchStart(event);\n      } else {\n        thumb2OnTouchStart(event);\n      }\n    },\n    onTouchMove(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchMove(event);\n      } else {\n        thumb2OnTouchMove(event);\n      }\n    },\n  };\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getThumbOffset(\n  offset: number | undefined,\n  fallback: number\n): string | undefined {\n  if (typeof offset !== \"number\") {\n    return;\n  }\n\n  // the `offset` will be NaN when there are no possible steps to take because\n  // the first thumb is at the maximum value or the second thumb is at the\n  // minimum value\n  const value = Number.isNaN(offset) ? fallback : offset;\n  return `${value * 100}%`;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ThumbOffsetsOptions extends MinMaxRange {\n  thumb1Value: number;\n  thumb1Dragging: boolean;\n  thumb1DragPercentage: number;\n  thumb2Value: number;\n  thumb2Dragging: boolean;\n  thumb2DragPercentage: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbOffsets {\n  \"--rmd-slider-offset-1\"?: string;\n  \"--rmd-slider-offset-2\"?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getThumbOffsets(options: ThumbOffsetsOptions): ThumbOffsets {\n  const {\n    min,\n    max,\n    thumb1Value,\n    thumb1Dragging,\n    thumb1DragPercentage,\n    thumb2Value,\n    thumb2Dragging,\n    thumb2DragPercentage,\n    isRangeSlider,\n  } = options;\n  let thumb1Percentage = thumb1Dragging\n    ? thumb1DragPercentage\n    : getPercentage({ min, max, value: thumb1Value });\n\n  let thumb2Percentage: number | undefined;\n  if (isRangeSlider) {\n    const percentage = getPercentage({ min, max, value: thumb2Value });\n\n    thumb1Percentage = Math.min(thumb1Percentage, percentage);\n    thumb2Percentage = thumb2Dragging\n      ? Math.max(thumb1Percentage, thumb2DragPercentage)\n      : percentage;\n  }\n\n  return {\n    \"--rmd-slider-offset-1\": getThumbOffset(thumb1Percentage, 0),\n    \"--rmd-slider-offset-2\": getThumbOffset(thumb2Percentage, 1),\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbNames {\n  thumb1Name?: string;\n  thumb2Name?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getSliderInputName(\n  name: string | undefined,\n  isRangeSlider: boolean\n): ThumbNames {\n  let thumb1Name = name;\n  let thumb2Name = name;\n  if (name && isRangeSlider && !name.includes(\"[]\")) {\n    thumb1Name = `min${name}`;\n    thumb2Name = `max${name}`;\n  }\n\n  return { thumb1Name, thumb2Name };\n}\n"],"names":["getClientPosition","getPercentage","getRangeSteps","getJumpValue","options","min","max","step","jump","steps","value","Number","isInteger","Math","ceil","getClosestThumbEventHandlers","thumb1Ref","thumb1Dragging","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Dragging","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","vertical","onMouseDown","onMouseUp","onTouchStart","onTouchMove","isThumbOneClosest","event","thumb1","current","thumb2","clientPosition","thumb1Rect","getBoundingClientRect","thumb2Rect","thumb1Position","y","x","thumb2Position","abs","getThumbOffset","offset","fallback","isNaN","getThumbOffsets","thumb1Value","thumb1DragPercentage","thumb2Value","thumb2DragPercentage","thumb1Percentage","thumb2Percentage","percentage","getSliderInputName","name","thumb1Name","thumb2Name","includes"],"mappings":"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"}

package/dist/form/types.d.ts

@@ -4,6 +4,26 @@ declare module "react" {
     interface CSSProperties {
         "--rmd-form-active-color"?: string;
         "--rmd-form-focus-color"?: string;
+        "--rmd-label-floating-x"?: string | number;
+        "--rmd-label-floating-y"?: string | number;
+        "--rmd-label-floating-active-x"?: string | number;
+        "--rmd-label-floating-active-y"?: string | number;
+        "--rmd-label-active-padding"?: string | number;
+        "--rmd-label-active-background-color"?: string;
+        "--rmd-text-field-addon-top"?: string | number;
+        "--rmd-text-field-addon-spacing"?: string | number;
+        "--rmd-text-field-addon-margin-top"?: string | number;
+        "--rmd-text-field-addon-left-offset"?: string | number;
+        "--rmd-text-field-height"?: string | number;
+        "--rmd-text-field-padding-left"?: string | number;
+        "--rmd-text-field-padding-right"?: string | number;
+        "--rmd-text-field-padding-top"?: string | number;
+        "--rmd-text-field-border-color"?: string;
+        "--rmd-text-field-hover-border-color"?: string;
+        "--rmd-text-field-filled-color"?: string;
+        "--rmd-text-field-filled-padding"?: string | number;
+        "--rmd-text-field-outlined-padding"?: string | number;
+        "--rmd-text-field-underlined-padding"?: string | number;
     }
 }
 /**
@@ -172,6 +192,19 @@ export interface FormMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, "
      * @defaultValue `false`
      */
     disableWrap?: boolean;
+    /**
+     * Optional props to provide to inline counter.
+     *
+     * @since 6.3.0
+     */
+    counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Optional props to apply to the `<p>` tag that surrounds the `children`.
+     * This will not be used if `role="alert"` or `disableWrap={true}`.
+     *
+     * @since 6.3.0
+     */
+    messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;
     /**
      * An optional style to apply to the `<p>` tag that surrounds the `children`.
      * This will not be used if `role="alert"` or `disableWrap={true}`.