@react-md/core 6.3.0 → 6.3.1

package/dist/form/Slider.d.ts

@@ -20,6 +20,10 @@ declare module "react" {
         "--rmd-slider-tooltip-scale"?: string | number;
         "--rmd-slider-tooltip-translate"?: string | number;
         "--rmd-slider-mark-offset"?: string;
+        "--rmd-slider-mark-active-color"?: string;
+        "--rmd-slider-mark-active-opacity"?: string | number;
+        "--rmd-slider-mark-inactive-color"?: string;
+        "--rmd-slider-mark-inactive-opacity"?: string | number;
     }
 }
 /**

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.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        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":"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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":"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"}

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/_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

@@ -665,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/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;
     }
 }
 /**

package/dist/form/types.js.map

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

package/dist/interaction/types.d.ts

@@ -1,7 +1,6 @@
 import type { DragEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from "react";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-ripple-background-color"?: string;
         "--rmd-interaction-background-color"?: string;
         "--rmd-hover-background-color"?: string;
         "--rmd-focus-background-color"?: string;
@@ -9,6 +8,11 @@ declare module "react" {
         "--rmd-selected-background-color"?: string;
         "--rmd-focus-color"?: string;
         "--rmd-focus-width"?: string | number;
+        "--rmd-ripple-inset"?: string | number;
+        "--rmd-ripple-border-radius"?: string | number;
+        "--rmd-ripple-background-color"?: string;
+        "--rmd-surface-inset"?: string | number;
+        "--rmd-surface-border-radius"?: string | number;
     }
 }
 /**

package/dist/interaction/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps\n  extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AA8LA;;;CAGC,GACD,WAGC"}
+{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps\n  extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AAkMA;;;CAGC,GACD,WAGC"}

package/dist/link/Link.d.ts

@@ -1,12 +1,5 @@
 import { type AnchorHTMLAttributes, type ForwardRefExoticComponent } from "react";
 import { type LinkClassNameOptions } from "./styles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-link-color"?: string;
-        "--rmd-link-visited-color"?: string;
-        "--rmd-link-hover-color"?: string;
-    }
-}
 /**
  * @since 6.0.0
  */

package/dist/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-link-color\"?: string;\n    \"--rmd-link-visited-color\"?: string;\n    \"--rmd-link-hover-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AA4C9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AAoC9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}

package/dist/link/styles.d.ts

@@ -1,3 +1,10 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-link-color"?: string;
+        "--rmd-link-visited-color"?: string;
+        "--rmd-link-hover-color"?: string;
+    }
+}
 /** @since 6.0.0 */
 export interface LinkClassNameOptions {
     className?: string;

package/dist/link/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\n/** @since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SkipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function skipToMainContent(\n  options: SkipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-link-color\"?: string;\n    \"--rmd-link-visited-color\"?: string;\n    \"--rmd-link-hover-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SkipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function skipToMainContent(\n  options: SkipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkBnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}

package/dist/list/List.d.ts

@@ -1,23 +1,14 @@
 import { type HTMLAttributes } from "react";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-list-padding-h"?: string | number;
-        "--rmd-list-padding-v"?: string | number;
-    }
-}
+import { type ListClassNameOptions } from "./listStyles.js";
 export type ListElement = HTMLUListElement | HTMLOListElement;
-export interface ListProps extends HTMLAttributes<ListElement> {
+/**
+ * @since 6.3.1 Extends the ListClassNameOptions
+ */
+export interface ListProps extends HTMLAttributes<ListElement>, ListClassNameOptions {
     /**
      * @defaultValue `"none"`
      */
     role?: HTMLAttributes<ListElement>["role"];
-    /**
-     * Set to `true` to decrease the amount of padding and font size within the
-     * list.
-     *
-     * @defaultValue `false`
-     */
-    dense?: boolean;
     /**
      * Set this to `true` to render as `<ol>` instead of `<ul>` when the children
      * are in a specific order. For example: steps within a recipe.
@@ -25,12 +16,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
      * @defaultValue `false`
      */
     ordered?: boolean;
-    /**
-     * Set this to `true` to render horizontally instead of vertically.
-     *
-     * @defaultValue `false`
-     */
-    horizontal?: boolean;
 }
 /**
  * The `List` component is used to render a collection of clickable actions