@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/form/SliderThumb.js.map

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

package/dist/form/SliderTrack.d.ts

@@ -2,9 +2,8 @@ import { type HTMLAttributes } from "react";
 import { type ClosestThumbEventHandlersOptions, type ThumbOffsetsOptions } from "./sliderUtils.js";
 /**
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Updated to be internal only.
+ * @since 2.5.0
+ * @since 6.0.0 Updated to be internal only.
  */
 export interface SliderTrackProps extends HTMLAttributes<HTMLSpanElement>, ClosestThumbEventHandlersOptions, ThumbOffsetsOptions {
     animate: boolean;
@@ -14,8 +13,7 @@ export interface SliderTrackProps extends HTMLAttributes<HTMLSpanElement>, Close
  * **Server Component**
  *
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Updated to be internal only.
+ * @since 2.5.0
+ * @since 6.0.0 Updated to be internal only.
  */
 export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/form/SliderTrack.js

@@ -8,9 +8,8 @@ const styles = bem("rmd-slider-track");
  * **Server Component**
  *
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Updated to be internal only.
+ * @since 2.5.0
+ * @since 6.0.0 Updated to be internal only.
  */ export const SliderTrack = /*#__PURE__*/ forwardRef(function SliderTrack(props, ref) {
     const { style, className, animate, vertical, disabled, min, max, thumb1Ref, thumb1Value, thumb1Dragging, thumb1DragPercentage, thumb1OnMouseUp, thumb1OnMouseDown, thumb1OnMouseMove, thumb1OnTouchStart, thumb1OnTouchMove, thumb2Ref, thumb2Value, thumb2Dragging, thumb2DragPercentage, thumb2OnMouseUp, thumb2OnMouseDown, thumb2OnMouseMove, thumb2OnTouchStart, thumb2OnTouchMove, isRangeSlider, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {

package/dist/form/SliderTrack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  getClosestThumbEventHandlers,\n  getThumbOffsets,\n  type ClosestThumbEventHandlersOptions,\n  type ThumbOffsetsOptions,\n} from \"./sliderUtils.js\";\n\nconst styles = bem(\"rmd-slider-track\");\n\n/**\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Updated to be internal only.\n */\nexport interface SliderTrackProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ClosestThumbEventHandlersOptions,\n    ThumbOffsetsOptions {\n  animate: boolean;\n  disabled: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Updated to be internal only.\n */\nexport const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(\n  function SliderTrack(props, ref) {\n    const {\n      style,\n      className,\n      animate,\n      vertical,\n      disabled,\n      min,\n      max,\n      thumb1Ref,\n      thumb1Value,\n      thumb1Dragging,\n      thumb1DragPercentage,\n      thumb1OnMouseUp,\n      thumb1OnMouseDown,\n      thumb1OnMouseMove,\n      thumb1OnTouchStart,\n      thumb1OnTouchMove,\n      thumb2Ref,\n      thumb2Value,\n      thumb2Dragging,\n      thumb2DragPercentage,\n      thumb2OnMouseUp,\n      thumb2OnMouseDown,\n      thumb2OnMouseMove,\n      thumb2OnTouchStart,\n      thumb2OnTouchMove,\n      isRangeSlider,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        style={{\n          ...style,\n          ...getThumbOffsets({\n            min,\n            max,\n            thumb1Value,\n            thumb1Dragging,\n            thumb1DragPercentage,\n            thumb2Value,\n            thumb2Dragging,\n            thumb2DragPercentage,\n            isRangeSlider,\n          }),\n        }}\n        className={cnb(\n          styles({\n            animate,\n            disabled,\n            hoverable: !disabled,\n            h: !vertical,\n            h1: !vertical && !isRangeSlider,\n            h2: !vertical && isRangeSlider,\n            v: vertical,\n            v1: vertical && !isRangeSlider,\n            v2: vertical && isRangeSlider,\n          }),\n          className\n        )}\n        {...getClosestThumbEventHandlers({\n          vertical,\n          isRangeSlider,\n          thumb1Ref,\n          thumb1Dragging,\n          thumb1OnMouseUp,\n          thumb1OnMouseDown,\n          thumb1OnMouseMove,\n          thumb1OnTouchStart,\n          thumb1OnTouchMove,\n          thumb2Ref,\n          thumb2Dragging,\n          thumb2OnMouseUp,\n          thumb2OnMouseDown,\n          thumb2OnMouseMove,\n          thumb2OnTouchStart,\n          thumb2OnTouchMove,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","getClosestThumbEventHandlers","getThumbOffsets","styles","SliderTrack","props","ref","style","className","animate","vertical","disabled","min","max","thumb1Ref","thumb1Value","thumb1Dragging","thumb1DragPercentage","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnMouseMove","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Value","thumb2Dragging","thumb2DragPercentage","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","children","remaining","span","hoverable","h","h1","h2","v","v1","v2"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,4BAA4B,EAC5BC,eAAe,QAGV,mBAAmB;AAE1B,MAAMC,SAASH,IAAI;AAgBnB;;;;;;;CAOC,GACD,OAAO,MAAMI,4BAAcL,WACzB,SAASK,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,aAAa,EACbC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IAEJ,qBACE,KAAC8B;QACE,GAAGD,SAAS;QACb5B,KAAKA;QACLC,OAAO;YACL,GAAGA,KAAK;YACR,GAAGL,gBAAgB;gBACjBU;gBACAC;gBACAE;gBACAC;gBACAC;gBACAO;gBACAC;gBACAC;gBACAM;YACF,EAAE;QACJ;QACAxB,WAAWV,IACTK,OAAO;YACLM;YACAE;YACAyB,WAAW,CAACzB;YACZ0B,GAAG,CAAC3B;YACJ4B,IAAI,CAAC5B,YAAY,CAACsB;YAClBO,IAAI,CAAC7B,YAAYsB;YACjBQ,GAAG9B;YACH+B,IAAI/B,YAAY,CAACsB;YACjBU,IAAIhC,YAAYsB;QAClB,IACAxB;QAED,GAAGP,6BAA6B;YAC/BS;YACAsB;YACAlB;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/SliderTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  getClosestThumbEventHandlers,\n  getThumbOffsets,\n  type ClosestThumbEventHandlersOptions,\n  type ThumbOffsetsOptions,\n} from \"./sliderUtils.js\";\n\nconst styles = bem(\"rmd-slider-track\");\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport interface SliderTrackProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ClosestThumbEventHandlersOptions,\n    ThumbOffsetsOptions {\n  animate: boolean;\n  disabled: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Updated to be internal only.\n */\nexport const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(\n  function SliderTrack(props, ref) {\n    const {\n      style,\n      className,\n      animate,\n      vertical,\n      disabled,\n      min,\n      max,\n      thumb1Ref,\n      thumb1Value,\n      thumb1Dragging,\n      thumb1DragPercentage,\n      thumb1OnMouseUp,\n      thumb1OnMouseDown,\n      thumb1OnMouseMove,\n      thumb1OnTouchStart,\n      thumb1OnTouchMove,\n      thumb2Ref,\n      thumb2Value,\n      thumb2Dragging,\n      thumb2DragPercentage,\n      thumb2OnMouseUp,\n      thumb2OnMouseDown,\n      thumb2OnMouseMove,\n      thumb2OnTouchStart,\n      thumb2OnTouchMove,\n      isRangeSlider,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        style={{\n          ...style,\n          ...getThumbOffsets({\n            min,\n            max,\n            thumb1Value,\n            thumb1Dragging,\n            thumb1DragPercentage,\n            thumb2Value,\n            thumb2Dragging,\n            thumb2DragPercentage,\n            isRangeSlider,\n          }),\n        }}\n        className={cnb(\n          styles({\n            animate,\n            disabled,\n            hoverable: !disabled,\n            h: !vertical,\n            h1: !vertical && !isRangeSlider,\n            h2: !vertical && isRangeSlider,\n            v: vertical,\n            v1: vertical && !isRangeSlider,\n            v2: vertical && isRangeSlider,\n          }),\n          className\n        )}\n        {...getClosestThumbEventHandlers({\n          vertical,\n          isRangeSlider,\n          thumb1Ref,\n          thumb1Dragging,\n          thumb1OnMouseUp,\n          thumb1OnMouseDown,\n          thumb1OnMouseMove,\n          thumb1OnTouchStart,\n          thumb1OnTouchMove,\n          thumb2Ref,\n          thumb2Dragging,\n          thumb2OnMouseUp,\n          thumb2OnMouseDown,\n          thumb2OnMouseMove,\n          thumb2OnTouchStart,\n          thumb2OnTouchMove,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","getClosestThumbEventHandlers","getThumbOffsets","styles","SliderTrack","props","ref","style","className","animate","vertical","disabled","min","max","thumb1Ref","thumb1Value","thumb1Dragging","thumb1DragPercentage","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnMouseMove","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Value","thumb2Dragging","thumb2DragPercentage","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","children","remaining","span","hoverable","h","h1","h2","v","v1","v2"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,4BAA4B,EAC5BC,eAAe,QAGV,mBAAmB;AAE1B,MAAMC,SAASH,IAAI;AAenB;;;;;;CAMC,GACD,OAAO,MAAMI,4BAAcL,WACzB,SAASK,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,WAAW,EACXC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,aAAa,EACbC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IAEJ,qBACE,KAAC8B;QACE,GAAGD,SAAS;QACb5B,KAAKA;QACLC,OAAO;YACL,GAAGA,KAAK;YACR,GAAGL,gBAAgB;gBACjBU;gBACAC;gBACAE;gBACAC;gBACAC;gBACAO;gBACAC;gBACAC;gBACAM;YACF,EAAE;QACJ;QACAxB,WAAWV,IACTK,OAAO;YACLM;YACAE;YACAyB,WAAW,CAACzB;YACZ0B,GAAG,CAAC3B;YACJ4B,IAAI,CAAC5B,YAAY,CAACsB;YAClBO,IAAI,CAAC7B,YAAYsB;YACjBQ,GAAG9B;YACH+B,IAAI/B,YAAY,CAACsB;YACjBU,IAAIhC,YAAYsB;QAClB,IACAxB;QAED,GAAGP,6BAA6B;YAC/BS;YACAsB;YACAlB;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDE;;AAGP,GACA"}

package/dist/form/SliderValueMarks.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { type RangeStepsOptions } from "../utils/getRangeSteps.js";
 import { type CustomizableSliderMarkLabelProps } from "./SliderMarkLabel.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderValueMark {
     /**
@@ -17,7 +17,7 @@ export interface SliderValueMark {
     value: number;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderValueMarkState {
     /** The {@link SliderValueMark.value} */
@@ -35,7 +35,7 @@ export interface SliderValueMarkState {
     active: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderMarksOptions {
     /**
@@ -44,8 +44,7 @@ export interface SliderMarksOptions {
      * {@link getMarkLabelProps} to customize the styles or display a label for
      * the mark.
      *
-     * @example
-     * Custom Marks
+     * @example Custom Marks
      * ```tsx
      * const slider = useSlider({ step: 10 });
      *
@@ -76,8 +75,7 @@ export interface SliderMarksOptions {
      * This can be used to override any styles for a specific mark's label or
      * display a label dynamically.
      *
-     * @example
-     * Dynamic Labels
+     * @example Dynamic Labels
      * ```tsx
      * <Slider
      *   {...slider}
@@ -99,7 +97,7 @@ export interface SliderMarksOptions {
 }
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderValueMarksProps extends RangeStepsOptions, Required<SliderMarksOptions> {
     vertical: boolean;
@@ -111,6 +109,6 @@ export interface SliderValueMarksProps extends RangeStepsOptions, Required<Slide
  * **Server Component**
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function SliderValueMarks(props: SliderValueMarksProps): ReactElement;

package/dist/form/SliderValueMarks.js

@@ -8,7 +8,7 @@ import { SliderMarkLabel } from "./SliderMarkLabel.js";
  * **Server Component**
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function SliderValueMarks(props) {
     const { min, max, step, marks: propMarks, vertical, thumb1Value, thumb2Value, isRangeSlider, getMarkProps, getMarkLabelProps } = props;
     let marks;

package/dist/form/SliderValueMarks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderValueMarks.tsx"],"sourcesContent":["import {\n  Fragment,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  getRangeSteps,\n  type RangeStepsOptions,\n} from \"../utils/getRangeSteps.js\";\nimport { SliderMark } from \"./SliderMark.js\";\nimport {\n  SliderMarkLabel,\n  type CustomizableSliderMarkLabelProps,\n} from \"./SliderMarkLabel.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderValueMark {\n  /**\n   * An optional label to display alongside the current mark. This will be\n   * positioned below the mark for horizontal sliders and to the right for\n   * vertical sliders.\n   */\n  label?: ReactNode;\n\n  /**\n   * The value of the mark that should be a valid step within the slider.\n   */\n  value: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderValueMarkState {\n  /** The {@link SliderValueMark.value} */\n  value: number;\n\n  /**\n   * No idea if this is actually useful (maybe custom styles?), but it is the\n   * current percentage the mark is offset and is what is set as the\n   * `left`/`top` values for the mark.\n   */\n  offset: string;\n\n  /**\n   * This will be `true` when the mark is being covered by the slider track's\n   * active state.\n   */\n  active: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderMarksOptions {\n  /**\n   * Set this to `true` to display a mark for each step within the slider. This\n   * can be used alongside the {@link getMarkProps} and\n   * {@link getMarkLabelProps} to customize the styles or display a label for\n   * the mark.\n   *\n   * @example\n   * Custom Marks\n   * ```tsx\n   * const slider = useSlider({ step: 10 });\n   *\n   * <Slider\n   *   {...slider}\n   *   marks={[\n   *     { value: 0, label: \"Minimum\" },\n   *     { value: 10 },\n   *     { value: 20 },\n   *     { value: 30 },\n   *     { value: 40 },\n   *     { value: 50, label: \"Medium\" },\n   *     { value: 60 },\n   *     { value: 70 },\n   *     { value: 80 },\n   *     { value: 90 },\n   *     { value: 100, label: \"Maximum\" },\n   *   ]}\n   * />\n   * ```\n   */\n  marks?: boolean | readonly SliderValueMark[];\n\n  /**\n   * This can be used to override any styles for the specific mark.\n   */\n  getMarkProps?(\n    options: SliderValueMarkState\n  ): HTMLAttributes<HTMLSpanElement> | void;\n\n  /**\n   * This can be used to override any styles for a specific mark's label or\n   * display a label dynamically.\n   *\n   * @example\n   * Dynamic Labels\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   marks\n   *   getMarkLabelProps={({ active, value }) => {\n   *     if (value % 10 !== 0) {\n   *       return;\n   *     }\n   *\n   *     return {\n   *       children: `${value} degrees`,\n   *       className: cnb(active && styles.somethingCustom),\n   *     };\n   *   }}\n   * />\n   * ```\n   */\n  getMarkLabelProps?(\n    options: SliderValueMarkState\n  ): Partial<CustomizableSliderMarkLabelProps> | void;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SliderValueMarksProps\n  extends RangeStepsOptions,\n    Required<SliderMarksOptions> {\n  vertical: boolean;\n  thumb1Value: number;\n  thumb2Value: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function SliderValueMarks(props: SliderValueMarksProps): ReactElement {\n  const {\n    min,\n    max,\n    step,\n    marks: propMarks,\n    vertical,\n    thumb1Value,\n    thumb2Value,\n    isRangeSlider,\n    getMarkProps,\n    getMarkLabelProps,\n  } = props;\n\n  let marks: readonly SliderValueMark[];\n  if (typeof propMarks === \"boolean\") {\n    const steps = getRangeSteps({ min, max, step }) + 1;\n    marks = Array.from({ length: steps }, (_, i) => ({\n      value: min + i * step,\n    }));\n  } else {\n    marks = propMarks;\n  }\n\n  return (\n    <>\n      {marks.map(({ value, label: markLabel }) => {\n        // I can't think of a good name, but this is when the slider's track's\n        // active color is covering the mark which requires different styles\n        let active: boolean;\n        let percentage = getPercentage({ min, max, value }) * 100;\n        let markValue = value;\n        if (vertical) {\n          // need to reverse the percentage since it uses `top` for positioning\n          // where the max value is at the top instead of bottom\n          percentage = 100 - percentage;\n\n          // need to reverse the mark's value as well for the same reason as\n          // above\n          markValue = max - value;\n        }\n\n        if (isRangeSlider) {\n          active = markValue > thumb1Value && markValue < thumb2Value;\n        } else {\n          active = markValue < thumb1Value;\n        }\n\n        const offset = `${percentage}%`;\n        const markProps = getMarkProps({ value, active, offset });\n        const labelProps = getMarkLabelProps({ value, active, offset });\n        const label = markLabel ?? labelProps?.children ?? null;\n\n        return (\n          <Fragment key={value}>\n            <SliderMark\n              {...markProps}\n              offset={offset}\n              active={active}\n              vertical={vertical}\n            />\n            {label !== null && (\n              <SliderMarkLabel\n                {...labelProps}\n                offset={offset}\n                vertical={vertical}\n              >\n                {label}\n              </SliderMarkLabel>\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["Fragment","getPercentage","getRangeSteps","SliderMark","SliderMarkLabel","SliderValueMarks","props","min","max","step","marks","propMarks","vertical","thumb1Value","thumb2Value","isRangeSlider","getMarkProps","getMarkLabelProps","steps","Array","from","length","_","i","value","map","label","markLabel","active","percentage","markValue","offset","markProps","labelProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,QAAQ,QAIH,QAAQ;AACf,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,aAAa,QAER,4BAA4B;AACnC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,eAAe,QAEV,uBAAuB;AA2H9B;;;;;CAKC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAGX;IAEJ,IAAII;IACJ,IAAI,OAAOC,cAAc,WAAW;QAClC,MAAMO,QAAQhB,cAAc;YAAEK;YAAKC;YAAKC;QAAK,KAAK;QAClDC,QAAQS,MAAMC,IAAI,CAAC;YAAEC,QAAQH;QAAM,GAAG,CAACI,GAAGC,IAAO,CAAA;gBAC/CC,OAAOjB,MAAMgB,IAAId;YACnB,CAAA;IACF,OAAO;QACLC,QAAQC;IACV;IAEA,qBACE;kBACGD,MAAMe,GAAG,CAAC,CAAC,EAAED,KAAK,EAAEE,OAAOC,SAAS,EAAE;YACrC,sEAAsE;YACtE,oEAAoE;YACpE,IAAIC;YACJ,IAAIC,aAAa5B,cAAc;gBAAEM;gBAAKC;gBAAKgB;YAAM,KAAK;YACtD,IAAIM,YAAYN;YAChB,IAAIZ,UAAU;gBACZ,qEAAqE;gBACrE,sDAAsD;gBACtDiB,aAAa,MAAMA;gBAEnB,kEAAkE;gBAClE,QAAQ;gBACRC,YAAYtB,MAAMgB;YACpB;YAEA,IAAIT,eAAe;gBACjBa,SAASE,YAAYjB,eAAeiB,YAAYhB;YAClD,OAAO;gBACLc,SAASE,YAAYjB;YACvB;YAEA,MAAMkB,SAAS,CAAC,EAAEF,WAAW,CAAC,CAAC;YAC/B,MAAMG,YAAYhB,aAAa;gBAAEQ;gBAAOI;gBAAQG;YAAO;YACvD,MAAME,aAAahB,kBAAkB;gBAAEO;gBAAOI;gBAAQG;YAAO;YAC7D,MAAML,QAAQC,aAAaM,YAAYC,YAAY;YAEnD,qBACE,MAAClC;;kCACC,KAACG;wBACE,GAAG6B,SAAS;wBACbD,QAAQA;wBACRH,QAAQA;wBACRhB,UAAUA;;oBAEXc,UAAU,sBACT,KAACtB;wBACE,GAAG6B,UAAU;wBACdF,QAAQA;wBACRnB,UAAUA;kCAETc;;;eAbQF;QAkBnB;;AAGN"}
+{"version":3,"sources":["../../src/form/SliderValueMarks.tsx"],"sourcesContent":["import {\n  Fragment,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  getRangeSteps,\n  type RangeStepsOptions,\n} from \"../utils/getRangeSteps.js\";\nimport { SliderMark } from \"./SliderMark.js\";\nimport {\n  SliderMarkLabel,\n  type CustomizableSliderMarkLabelProps,\n} from \"./SliderMarkLabel.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SliderValueMark {\n  /**\n   * An optional label to display alongside the current mark. This will be\n   * positioned below the mark for horizontal sliders and to the right for\n   * vertical sliders.\n   */\n  label?: ReactNode;\n\n  /**\n   * The value of the mark that should be a valid step within the slider.\n   */\n  value: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderValueMarkState {\n  /** The {@link SliderValueMark.value} */\n  value: number;\n\n  /**\n   * No idea if this is actually useful (maybe custom styles?), but it is the\n   * current percentage the mark is offset and is what is set as the\n   * `left`/`top` values for the mark.\n   */\n  offset: string;\n\n  /**\n   * This will be `true` when the mark is being covered by the slider track's\n   * active state.\n   */\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderMarksOptions {\n  /**\n   * Set this to `true` to display a mark for each step within the slider. This\n   * can be used alongside the {@link getMarkProps} and\n   * {@link getMarkLabelProps} to customize the styles or display a label for\n   * the mark.\n   *\n   * @example Custom Marks\n   * ```tsx\n   * const slider = useSlider({ step: 10 });\n   *\n   * <Slider\n   *   {...slider}\n   *   marks={[\n   *     { value: 0, label: \"Minimum\" },\n   *     { value: 10 },\n   *     { value: 20 },\n   *     { value: 30 },\n   *     { value: 40 },\n   *     { value: 50, label: \"Medium\" },\n   *     { value: 60 },\n   *     { value: 70 },\n   *     { value: 80 },\n   *     { value: 90 },\n   *     { value: 100, label: \"Maximum\" },\n   *   ]}\n   * />\n   * ```\n   */\n  marks?: boolean | readonly SliderValueMark[];\n\n  /**\n   * This can be used to override any styles for the specific mark.\n   */\n  getMarkProps?(\n    options: SliderValueMarkState\n  ): HTMLAttributes<HTMLSpanElement> | void;\n\n  /**\n   * This can be used to override any styles for a specific mark's label or\n   * display a label dynamically.\n   *\n   * @example Dynamic Labels\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   marks\n   *   getMarkLabelProps={({ active, value }) => {\n   *     if (value % 10 !== 0) {\n   *       return;\n   *     }\n   *\n   *     return {\n   *       children: `${value} degrees`,\n   *       className: cnb(active && styles.somethingCustom),\n   *     };\n   *   }}\n   * />\n   * ```\n   */\n  getMarkLabelProps?(\n    options: SliderValueMarkState\n  ): Partial<CustomizableSliderMarkLabelProps> | void;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SliderValueMarksProps\n  extends RangeStepsOptions,\n    Required<SliderMarksOptions> {\n  vertical: boolean;\n  thumb1Value: number;\n  thumb2Value: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport function SliderValueMarks(props: SliderValueMarksProps): ReactElement {\n  const {\n    min,\n    max,\n    step,\n    marks: propMarks,\n    vertical,\n    thumb1Value,\n    thumb2Value,\n    isRangeSlider,\n    getMarkProps,\n    getMarkLabelProps,\n  } = props;\n\n  let marks: readonly SliderValueMark[];\n  if (typeof propMarks === \"boolean\") {\n    const steps = getRangeSteps({ min, max, step }) + 1;\n    marks = Array.from({ length: steps }, (_, i) => ({\n      value: min + i * step,\n    }));\n  } else {\n    marks = propMarks;\n  }\n\n  return (\n    <>\n      {marks.map(({ value, label: markLabel }) => {\n        // I can't think of a good name, but this is when the slider's track's\n        // active color is covering the mark which requires different styles\n        let active: boolean;\n        let percentage = getPercentage({ min, max, value }) * 100;\n        let markValue = value;\n        if (vertical) {\n          // need to reverse the percentage since it uses `top` for positioning\n          // where the max value is at the top instead of bottom\n          percentage = 100 - percentage;\n\n          // need to reverse the mark's value as well for the same reason as\n          // above\n          markValue = max - value;\n        }\n\n        if (isRangeSlider) {\n          active = markValue > thumb1Value && markValue < thumb2Value;\n        } else {\n          active = markValue < thumb1Value;\n        }\n\n        const offset = `${percentage}%`;\n        const markProps = getMarkProps({ value, active, offset });\n        const labelProps = getMarkLabelProps({ value, active, offset });\n        const label = markLabel ?? labelProps?.children ?? null;\n\n        return (\n          <Fragment key={value}>\n            <SliderMark\n              {...markProps}\n              offset={offset}\n              active={active}\n              vertical={vertical}\n            />\n            {label !== null && (\n              <SliderMarkLabel\n                {...labelProps}\n                offset={offset}\n                vertical={vertical}\n              >\n                {label}\n              </SliderMarkLabel>\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["Fragment","getPercentage","getRangeSteps","SliderMark","SliderMarkLabel","SliderValueMarks","props","min","max","step","marks","propMarks","vertical","thumb1Value","thumb2Value","isRangeSlider","getMarkProps","getMarkLabelProps","steps","Array","from","length","_","i","value","map","label","markLabel","active","percentage","markValue","offset","markProps","labelProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,QAAQ,QAIH,QAAQ;AACf,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,aAAa,QAER,4BAA4B;AACnC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,eAAe,QAEV,uBAAuB;AAyH9B;;;;;CAKC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAGX;IAEJ,IAAII;IACJ,IAAI,OAAOC,cAAc,WAAW;QAClC,MAAMO,QAAQhB,cAAc;YAAEK;YAAKC;YAAKC;QAAK,KAAK;QAClDC,QAAQS,MAAMC,IAAI,CAAC;YAAEC,QAAQH;QAAM,GAAG,CAACI,GAAGC,IAAO,CAAA;gBAC/CC,OAAOjB,MAAMgB,IAAId;YACnB,CAAA;IACF,OAAO;QACLC,QAAQC;IACV;IAEA,qBACE;kBACGD,MAAMe,GAAG,CAAC,CAAC,EAAED,KAAK,EAAEE,OAAOC,SAAS,EAAE;YACrC,sEAAsE;YACtE,oEAAoE;YACpE,IAAIC;YACJ,IAAIC,aAAa5B,cAAc;gBAAEM;gBAAKC;gBAAKgB;YAAM,KAAK;YACtD,IAAIM,YAAYN;YAChB,IAAIZ,UAAU;gBACZ,qEAAqE;gBACrE,sDAAsD;gBACtDiB,aAAa,MAAMA;gBAEnB,kEAAkE;gBAClE,QAAQ;gBACRC,YAAYtB,MAAMgB;YACpB;YAEA,IAAIT,eAAe;gBACjBa,SAASE,YAAYjB,eAAeiB,YAAYhB;YAClD,OAAO;gBACLc,SAASE,YAAYjB;YACvB;YAEA,MAAMkB,SAAS,CAAC,EAAEF,WAAW,CAAC,CAAC;YAC/B,MAAMG,YAAYhB,aAAa;gBAAEQ;gBAAOI;gBAAQG;YAAO;YACvD,MAAME,aAAahB,kBAAkB;gBAAEO;gBAAOI;gBAAQG;YAAO;YAC7D,MAAML,QAAQC,aAAaM,YAAYC,YAAY;YAEnD,qBACE,MAAClC;;kCACC,KAACG;wBACE,GAAG6B,SAAS;wBACbD,QAAQA;wBACRH,QAAQA;wBACRhB,UAAUA;;oBAEXc,UAAU,sBACT,KAACtB;wBACE,GAAG6B,UAAU;wBACdF,QAAQA;wBACRnB,UAAUA;kCAETc;;;eAbQF;QAkBnB;;AAGN"}

package/dist/form/SliderValueTooltip.d.ts

@@ -2,9 +2,8 @@ import { type ReactElement, type ReactNode } from "react";
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 /**
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.
+ * @since 2.5.0
+ * @since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.
  */
 export interface SliderValueTooltipProps extends TooltipProps {
     index: 1 | 2;
@@ -19,8 +18,7 @@ export interface SliderValueTooltipProps extends TooltipProps {
  * tooltip when needed.
  *
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
+ * @since 2.5.0
+ * @since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
  */
 export declare function SliderValueTooltip(props: SliderValueTooltipProps): ReactElement;

package/dist/form/SliderValueTooltip.js

@@ -23,9 +23,8 @@ const VERTICAL_CLASS_NAMES = {
  * tooltip when needed.
  *
  * @internal
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
+ * @since 2.5.0
+ * @since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
  */ export function SliderValueTooltip(props) {
     const { index, animate, vertical, className, children, classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Tooltip, {

package/dist/form/SliderValueTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderValueTooltip.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport { type CSSTransitionClassNames } from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-tooltip\");\n\nconst HORIZONTAL_CLASS_NAMES: CSSTransitionClassNames = {\n  enter: \"rmd-slider-tooltip--h-off\",\n  enterActive: \"rmd-slider-tooltip--h-on rmd-slider-tooltip--animate\",\n  exit: \"rmd-slider-tooltip--animate\",\n  exitActive: \"rmd-slider-tooltip--h-off\",\n};\n\nconst VERTICAL_CLASS_NAMES: CSSTransitionClassNames = {\n  enter: \"rmd-slider-tooltip--v-off\",\n  enterActive: \"rmd-slider-tooltip--v-on rmd-slider-tooltip--animate\",\n  exit: \"rmd-slider-tooltip--animate\",\n  exitActive: \"rmd-slider-tooltip--v-off\",\n};\n\n/**\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.\n */\nexport interface SliderValueTooltipProps extends TooltipProps {\n  index: 1 | 2;\n  animate: boolean;\n  vertical: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component creates the \"discrete\" slider thumb value by rendering a\n * tooltip when needed.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.\n */\nexport function SliderValueTooltip(\n  props: SliderValueTooltipProps\n): ReactElement {\n  const {\n    index,\n    animate,\n    vertical,\n    className,\n    children,\n    classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES,\n    ...remaining\n  } = props;\n\n  return (\n    <Tooltip\n      dense\n      disablePortal\n      textOverflow=\"nowrap\"\n      className={cnb(\n        styles({ h: !vertical, v: vertical }),\n        animate && \"rmd-slider-thumb--animate\",\n        `rmd-slider-thumb--${vertical ? \"v\" : \"h\"}${index}`,\n        className\n      )}\n      classNames={classNames}\n      {...remaining}\n    >\n      {children}\n    </Tooltip>\n  );\n}\n"],"names":["cnb","Tooltip","bem","styles","HORIZONTAL_CLASS_NAMES","enter","enterActive","exit","exitActive","VERTICAL_CLASS_NAMES","SliderValueTooltip","props","index","animate","vertical","className","children","classNames","remaining","dense","disablePortal","textOverflow","h","v"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,OAAO,QAA2B,wBAAwB;AAEnE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAEnB,MAAME,yBAAkD;IACtDC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd;AAEA,MAAMC,uBAAgD;IACpDJ,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd;AAeA;;;;;;;;;;CAUC,GACD,OAAO,SAASE,mBACdC,KAA8B;IAE9B,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,aAAaH,WAAWL,uBAAuBL,sBAAsB,EACrE,GAAGc,WACJ,GAAGP;IAEJ,qBACE,KAACV;QACCkB,KAAK;QACLC,aAAa;QACbC,cAAa;QACbN,WAAWf,IACTG,OAAO;YAAEmB,GAAG,CAACR;YAAUS,GAAGT;QAAS,IACnCD,WAAW,6BACX,CAAC,kBAAkB,EAAEC,WAAW,MAAM,IAAI,EAAEF,MAAM,CAAC,EACnDG;QAEFE,YAAYA;QACX,GAAGC,SAAS;kBAEZF;;AAGP"}
+{"version":3,"sources":["../../src/form/SliderValueTooltip.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport { type CSSTransitionClassNames } from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-tooltip\");\n\nconst HORIZONTAL_CLASS_NAMES: CSSTransitionClassNames = {\n  enter: \"rmd-slider-tooltip--h-off\",\n  enterActive: \"rmd-slider-tooltip--h-on rmd-slider-tooltip--animate\",\n  exit: \"rmd-slider-tooltip--animate\",\n  exitActive: \"rmd-slider-tooltip--h-off\",\n};\n\nconst VERTICAL_CLASS_NAMES: CSSTransitionClassNames = {\n  enter: \"rmd-slider-tooltip--v-off\",\n  enterActive: \"rmd-slider-tooltip--v-on rmd-slider-tooltip--animate\",\n  exit: \"rmd-slider-tooltip--animate\",\n  exitActive: \"rmd-slider-tooltip--v-off\",\n};\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.\n */\nexport interface SliderValueTooltipProps extends TooltipProps {\n  index: 1 | 2;\n  animate: boolean;\n  vertical: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component creates the \"discrete\" slider thumb value by rendering a\n * tooltip when needed.\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.\n */\nexport function SliderValueTooltip(\n  props: SliderValueTooltipProps\n): ReactElement {\n  const {\n    index,\n    animate,\n    vertical,\n    className,\n    children,\n    classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES,\n    ...remaining\n  } = props;\n\n  return (\n    <Tooltip\n      dense\n      disablePortal\n      textOverflow=\"nowrap\"\n      className={cnb(\n        styles({ h: !vertical, v: vertical }),\n        animate && \"rmd-slider-thumb--animate\",\n        `rmd-slider-thumb--${vertical ? \"v\" : \"h\"}${index}`,\n        className\n      )}\n      classNames={classNames}\n      {...remaining}\n    >\n      {children}\n    </Tooltip>\n  );\n}\n"],"names":["cnb","Tooltip","bem","styles","HORIZONTAL_CLASS_NAMES","enter","enterActive","exit","exitActive","VERTICAL_CLASS_NAMES","SliderValueTooltip","props","index","animate","vertical","className","children","classNames","remaining","dense","disablePortal","textOverflow","h","v"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,OAAO,QAA2B,wBAAwB;AAEnE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAEnB,MAAME,yBAAkD;IACtDC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd;AAEA,MAAMC,uBAAgD;IACpDJ,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd;AAcA;;;;;;;;;CASC,GACD,OAAO,SAASE,mBACdC,KAA8B;IAE9B,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,aAAaH,WAAWL,uBAAuBL,sBAAsB,EACrE,GAAGc,WACJ,GAAGP;IAEJ,qBACE,KAACV;QACCkB,KAAK;QACLC,aAAa;QACbC,cAAa;QACbN,WAAWf,IACTG,OAAO;YAAEmB,GAAG,CAACR;YAAUS,GAAGT;QAAS,IACnCD,WAAW,6BACX,CAAC,kBAAkB,EAAEC,WAAW,MAAM,IAAI,EAAEF,MAAM,CAAC,EACnDG;QAEFE,YAAYA;QACX,GAAGC,SAAS;kBAEZF;;AAGP"}

package/dist/form/Switch.d.ts

@@ -3,7 +3,7 @@ import { type PropsWithRef } from "../types.js";
 import { type InputToggleLabelProps } from "./InputToggle.js";
 import { type FormComponentStates, type FormMessageContainerExtension } from "./types.js";
 /**
- * @remarks \@since 6.0.0 Added `containerProps` and support for the
+ * @since 6.0.0 Added `containerProps` and support for the
  * `FormMessage` behavior.
  */
 export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, InputToggleLabelProps, FormMessageContainerExtension, FormComponentStates {
@@ -19,8 +19,7 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, Inpu
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Form, Switch } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -42,6 +41,6 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, Inpu
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Added support for `FormMessage` behavior.
+ * @since 6.0.0 Added support for `FormMessage` behavior.
  */
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/Switch.js

@@ -9,8 +9,7 @@ import { switchStyles } from "./switchStyles.js";
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Form, Switch } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -32,7 +31,7 @@ import { switchStyles } from "./switchStyles.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Added support for `FormMessage` behavior.
+ * @since 6.0.0 Added support for `FormMessage` behavior.
  */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
     const { id: propId, label, labelProps, style, className, containerProps, ballProps, ballStyle, ballClassName, ballAddon, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, ...remaining } = props;
     const id = useEnsuredId(propId, "switch");

package/dist/form/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { 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/**\n * @remarks \\@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>, HTMLDivElement>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Switch } from \"@react-md/core\";\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 * @remarks \\@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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AAEf,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;AAyBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,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  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { 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/**\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>, HTMLDivElement>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Form, Switch } from \"@react-md/core\";\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 * @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AAEf,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;AAyBjD;;;;;;;;;;;;;;;;;;;;;;;;;;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.d.ts

@@ -3,7 +3,7 @@ import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions } from "./types.js";
 import { type TextAreaResize } from "./useResizingTextArea.js";
 /**
- * @remarks \@since 6.0.0 Added `containerProps`.
+ * @since 6.0.0 Added `containerProps`.
  */
 export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** @defaultValue `"text-area-" + useId()` */
@@ -66,8 +66,7 @@ export interface TextAreaProps extends FormFieldOptions, TextareaHTMLAttributes<
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { TextArea } from "@react-md/core";
  * import type { ReactElement } from "react";

package/dist/form/TextArea.js

@@ -13,8 +13,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { TextArea } from "@react-md/core";
  * import type { ReactElement } from "react";

package/dist/form/TextArea.js.map

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

package/dist/form/TextField.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
@@ -6,19 +6,18 @@ import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.
  * render reasonably well by default. There is no built-in validation or
  * anything adding onto existing browser functionality for these types.
  *
- * @remarks
- * \@since 2.5.0 - `"search"` was added
- * \@since 6.0.0 Dropped support for `"week"` and `"month"` input types since
+ * @since 2.5.0 - `"search"` was added
+ * @since 6.0.0 Dropped support for `"week"` and `"month"` input types since
  * they are not available in Firefox and Safari at this time.
  */
 export type SupportedInputTypes = "text" | "password" | "number" | "tel" | "email" | "date" | "time" | "datetime-local" | "url" | "color" | "search";
 /**
- * @remarks \@since 6.0.0 Renamed from `TextFieldAttributes` to
+ * @since 6.0.0 Renamed from `TextFieldAttributes` to
  * `TextFieldInputAttributes`
  */
 export type TextFieldInputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
 /**
- * @remarks \@since 6.0.0 Removed the `containerRef` prop.
+ * @since 6.0.0 Removed the `containerRef` prop.
  */
 export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutocompleteProps, FormFieldOptions {
     /**
@@ -51,22 +50,12 @@ export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoc
      * add a `ref` for some DOM behavior.
      */
     containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    /**
-     * The `children` will be rendered within the `TextFieldContainer` and before
-     * the `<input />` element. This was added to support the new `Select`
-     * component implementation
-     *
-     * @internal
-     * @remarks \@since 6.0.0
-     */
-    children?: ReactNode;
 }
 /**
  * **Server Component**
  *
  * The structure for this component is:
- * @example
- * Component Structure
+ * @example Component Structure
  * ```tsx
  * <FormMessageContainer {...messageContainerProps}>
  *   <TextFieldContainer {...containerProps}>
@@ -76,8 +65,7 @@ export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoc
  * </FormMessageContainer>
  * ```
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { TextField } from "@react-md/core";
  * import type { ReactElement } from "react";

package/dist/form/TextField.js

@@ -9,8 +9,7 @@ import { textField } from "./textFieldStyles.js";
  * **Server Component**
  *
  * The structure for this component is:
- * @example
- * Component Structure
+ * @example Component Structure
  * ```tsx
  * <FormMessageContainer {...messageContainerProps}>
  *   <TextFieldContainer {...containerProps}>
@@ -20,8 +19,7 @@ import { textField } from "./textFieldStyles.js";
  * </FormMessageContainer>
  * ```
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { TextField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -37,7 +35,7 @@ import { textField } from "./textFieldStyles.js";
  * }
  * ```
  */ export const TextField = /*#__PURE__*/ forwardRef(function TextField(props, ref) {
-    const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, stretch, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
+    const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, stretch, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, ...remaining } = props;
     const { disabled, readOnly } = props;
     const id = useEnsuredId(propId, "text-field");
     let { placeholder = "" } = props;
@@ -73,7 +71,6 @@ import { textField } from "./textFieldStyles.js";
             disableLeftAddonStyles: disableLeftAddonStyles,
             disableRightAddonStyles: disableRightAddonStyles,
             children: [
-                children,
                 /*#__PURE__*/ _jsx("input", {
                     ...remaining,
                     id: id,