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

package/dist/form/SliderThumb.js

@@ -40,8 +40,9 @@ const noop = ()=>{
  * \@since 2.5.0
  * \@since 6.0.0 Internal only component.
  */ export const SliderThumb = /*#__PURE__*/ forwardRef(function SliderThumb(props, ref) {
-    const { id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
+    const { id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
     const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+    const isFirstThumb = index === 1;
     const mode = useUserInteractionMode();
     const keyboard = mode === "keyboard";
     const touch = mode === "touch";
@@ -162,8 +163,9 @@ const noop = ()=>{
                 animate: !disableSmoothDragging && !active,
                 visible: tooltipVisibility === "always" || active || keyboardVisible || mouseVisible,
                 ...tooltipProps,
+                ...getTooltipProps(value, isFirstThumb),
                 index: index,
-                children: getTooltipChildren(value, index === 1)
+                children: getTooltipChildren(value, isFirstThumb)
             })
         ]
     });

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 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?: \"auto\" | \"hover\" | \"always\";\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  getTooltipChildren(value: number, isMinValue: 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    getTooltipChildren,\n    disableSmoothDragging,\n    tooltipVisibility = \"auto\",\n    ...remaining\n  } = props;\n  const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } = props;\n\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          index={index}\n        >\n          {getTooltipChildren(value, index === 1)}\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","getTooltipChildren","disableSmoothDragging","tooltipVisibility","remaining","ariaLabel","ariaLabelledBy","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"],"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 * @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"],"mappings":"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"}

package/dist/form/SliderValueMarks.js

@@ -21,7 +21,7 @@ import { SliderMarkLabel } from "./SliderMarkLabel.js";
         marks = Array.from({
             length: steps
         }, (_, i)=>({
-                value: i * step
+                value: min + i * step
             }));
     } else {
         marks = propMarks;

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) => ({ value: i * step }));\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"],"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;gBAAEC,OAAOD,IAAId;YAAK,CAAA;IACrE,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 * @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"],"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"}

package/dist/form/SliderValueTooltip.js

@@ -31,7 +31,7 @@ const VERTICAL_CLASS_NAMES = {
     return /*#__PURE__*/ _jsx(Tooltip, {
         dense: true,
         disablePortal: true,
-        disableLineWrap: true,
+        textOverflow: "nowrap",
         className: cnb(styles({
             h: !vertical,
             v: vertical

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      disableLineWrap\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","disableLineWrap","h","v"],"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,eAAe;QACfN,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 * @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"],"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"}

package/dist/form/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type InputToggleLabelProps } from "./InputToggle.js";
 import { type FormComponentStates, type FormMessageContainerExtension } from "./types.js";
@@ -11,12 +11,13 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, Inpu
     trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     trackStyle?: CSSProperties;
     trackClassName?: string;
+    ballAddon?: ReactNode;
     ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     ballStyle?: CSSProperties;
     ballClassName?: string;
 }
 /**
- * **Client Component**
+ * **Server Component**
  *
  * @example
  * Simple Example

package/dist/form/Switch.js

@@ -1,17 +1,13 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef, useState } from "react";
+import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
 import { SwitchTrack } from "./SwitchTrack.js";
 import { switchStyles } from "./switchStyles.js";
-const noop = ()=>{
-// do nothing
-};
 /**
- * **Client Component**
+ * **Server Component**
  *
  * @example
  * Simple Example
@@ -38,10 +34,8 @@ const noop = ()=>{
  *
  * @remarks \@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, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, onChange = noop, defaultChecked = false, ...remaining } = props;
+    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");
-    const [isChecked, setChecked] = useState(defaultChecked);
-    const checked = props.checked ?? isChecked;
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
         messageProps: messageProps,
@@ -61,13 +55,15 @@ const noop = ()=>{
                     ...containerProps,
                     className: switchStyles({
                         clickable: !disabled && !readOnly,
-                        className: containerProps?.className
+                        className: containerProps?.className,
+                        currentColor: active || error
                     }),
                     children: /*#__PURE__*/ _jsx(SwitchTrack, {
                         style: trackStyle,
                         ...trackProps,
                         className: cnb(trackClassName, trackProps?.className),
                         disabled: disabled,
+                        ballAddon: ballAddon,
                         ballProps: ballProps,
                         ballStyle: ballStyle,
                         ballClassName: ballClassName,
@@ -78,22 +74,7 @@ const noop = ()=>{
                             role: "switch",
                             type: "checkbox",
                             className: cnb("rmd-switch__input rmd-hidden-input", disabled && "rmd-hidden-input--disabled"),
-                            disabled: disabled,
-                            checked: checked,
-                            onChange: (event)=>{
-                                // checkboxes do not natively support the readOnly attribute, so
-                                // polyfill it in. can't use `disabled` since the checkbox's
-                                // checked/unchecked state would then not be submitted in forms.
-                                if (readOnly) {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    return;
-                                }
-                                onChange(event);
-                                if (typeof props.checked === "undefined") {
-                                    setChecked(event.currentTarget.checked);
-                                }
-                            }
+                            disabled: disabled
                         })
                     })
                 })

package/dist/form/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\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\nconst noop = (): void => {\n  // do nothing\n};\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  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Client 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      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      onChange = noop,\n      defaultChecked = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"switch\");\n    const [isChecked, setChecked] = useState(defaultChecked);\n    const checked = props.checked ?? isChecked;\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            })}\n          >\n            <SwitchTrack\n              style={trackStyle}\n              {...trackProps}\n              className={cnb(trackClassName, trackProps?.className)}\n              disabled={disabled}\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                checked={checked}\n                onChange={(event) => {\n                  // checkboxes do not natively support the readOnly attribute, so\n                  // polyfill it in. can't use `disabled` since the checkbox's\n                  // checked/unchecked state would then not be submitted in forms.\n                  if (readOnly) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    return;\n                  }\n\n                  onChange(event);\n                  if (typeof props.checked === \"undefined\") {\n                    setChecked(event.currentTarget.checked);\n                  }\n                }}\n              />\n            </SwitchTrack>\n          </div>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useState","useEnsuredId","FormMessageContainer","Label","SwitchTrack","switchStyles","noop","Switch","props","ref","id","propId","label","labelProps","style","className","containerProps","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","messageProps","messageContainerProps","disableLabelGap","error","active","stacked","iconAfter","disabled","readOnly","onChange","defaultChecked","remaining","isChecked","setChecked","checked","gap","reversed","div","clickable","input","role","type","event","preventDefault","stopPropagation","currentTarget"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,QAAQ,QAIH,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;AAMjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,uBAASR,WACpB,SAASQ,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,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,EAChBC,WAAW1B,IAAI,EACf2B,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAM,CAACwB,WAAWC,WAAW,GAAGpC,SAASiC;IACzC,MAAMI,UAAU7B,MAAM6B,OAAO,IAAIF;IAEjC,qBACE,KAACjC;QACE,GAAGsB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACCW,OAAOA;YACN,GAAGD,UAAU;YACdE,WAAWjB,IAAIiB,WAAWF,YAAYE;YACtCuB,KAAK,CAACb;YACNG,SAASA;YACTW,UAAU,CAACV;YACXF,QAAQA;YACRD,OAAOA;YACPI,UAAUA;;gBAETlB;8BACD,KAAC4B;oBACE,GAAGxB,cAAc;oBAClBD,WAAWV,aAAa;wBACtBoC,WAAW,CAACX,YAAY,CAACC;wBACzBhB,WAAWC,gBAAgBD;oBAC7B;8BAEA,cAAA,KAACX;wBACCU,OAAOO;wBACN,GAAGD,UAAU;wBACdL,WAAWjB,IAAIwB,gBAAgBF,YAAYL;wBAC3Ce,UAAUA;wBACVb,WAAWA;wBACXC,WAAWA;wBACXC,eAAeA;kCAEf,cAAA,KAACuB;4BACE,GAAGR,SAAS;4BACbxB,IAAIA;4BACJD,KAAKA;4BACLkC,MAAK;4BACLC,MAAK;4BACL7B,WAAWjB,IACT,sCACAgC,YAAY;4BAEdA,UAAUA;4BACVO,SAASA;4BACTL,UAAU,CAACa;gCACT,gEAAgE;gCAChE,4DAA4D;gCAC5D,gEAAgE;gCAChE,IAAId,UAAU;oCACZc,MAAMC,cAAc;oCACpBD,MAAME,eAAe;oCACrB;gCACF;gCAEAf,SAASa;gCACT,IAAI,OAAOrC,MAAM6B,OAAO,KAAK,aAAa;oCACxCD,WAAWS,MAAMG,aAAa,CAACX,OAAO;gCACxC;4BACF;;;;;;;AAOd,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 * @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"],"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"}

package/dist/form/SwitchTrack.d.ts

@@ -1,8 +1,9 @@
-import { type CSSProperties, type HTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
 import { type PropsWithRef } from "../types.js";
 export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     disabled?: boolean;
+    ballAddon?: ReactNode;
     ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     ballStyle?: CSSProperties;
     ballClassName?: string;

package/dist/form/SwitchTrack.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { bem } from "../utils/bem.js";
@@ -6,7 +6,7 @@ const styles = bem("rmd-switch");
 /**
  * **Server Component**
  */ export const SwitchTrack = /*#__PURE__*/ forwardRef(function SwitchTrack(props, ref) {
-    const { style, className, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
+    const { style, className, ballAddon, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
@@ -16,12 +16,16 @@ const styles = bem("rmd-switch");
         }), className),
         children: [
             children,
-            /*#__PURE__*/ _jsx("span", {
+            /*#__PURE__*/ _jsxs("span", {
                 style: ballStyle,
                 ...ballProps,
                 className: cnb(styles("ball", {
                     active
-                }), ballClassName)
+                }), ballClassName),
+                children: [
+                    ballAddon,
+                    ballProps?.children
+                ]
             })
         ]
     });

package/dist/form/SwitchTrack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-switch\");\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  disabled?: boolean;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n */\nexport const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(\n  function SwitchTrack(props, ref) {\n    const {\n      style,\n      className,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      active,\n      children,\n      disabled = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        style={style}\n        className={cnb(styles(\"track\", { disabled }), className)}\n      >\n        {children}\n        <span\n          style={ballStyle}\n          {...ballProps}\n          className={cnb(styles(\"ball\", { active }), ballClassName)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SwitchTrack","props","ref","style","className","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAiD,QAAQ;AAE5E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;CAEC,GACD,OAAO,MAAME,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,qBACE,MAACW;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,OAAOA;QACPC,WAAWR,IAAIG,OAAO,SAAS;YAAEW;QAAS,IAAIN;;YAE7CK;0BACD,KAACI;gBACCV,OAAOG;gBACN,GAAGD,SAAS;gBACbD,WAAWR,IAAIG,OAAO,QAAQ;oBAAES;gBAAO,IAAID;;;;AAInD,GACA"}
+{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-switch\");\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  disabled?: boolean;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n */\nexport const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(\n  function SwitchTrack(props, ref) {\n    const {\n      style,\n      className,\n      ballAddon,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      active,\n      children,\n      disabled = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        style={style}\n        className={cnb(styles(\"track\", { disabled }), className)}\n      >\n        {children}\n        <span\n          style={ballStyle}\n          {...ballProps}\n          className={cnb(styles(\"ball\", { active }), ballClassName)}\n        >\n          {ballAddon}\n          {ballProps?.children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SwitchTrack","props","ref","style","className","ballAddon","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AAEf,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,MAAME,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,OAAOA;QACPC,WAAWR,IAAIG,OAAO,SAAS;YAAEY;QAAS,IAAIP;;YAE7CM;0BACD,MAACI;gBACCX,OAAOI;gBACN,GAAGD,SAAS;gBACbF,WAAWR,IAAIG,OAAO,QAAQ;oBAAEU;gBAAO,IAAID;;oBAE1CH;oBACAC,WAAWI;;;;;AAIpB,GACA"}

package/dist/form/_form.scss

@@ -40,6 +40,7 @@ $disable-radio: $disable-everything !default;
 $disable-uncontrolled-input-toggles: false !default;
 $disable-switch: $disable-everything !default;
 $disable-switch-circular-progress: progress.$disable-circular !default;
+$disable-switch-icon: false !default;
 $disable-menu-item-checkbox: $disable-checkbox !default;
 $disable-menu-item-radio: $disable-radio !default;
 $disable-menu-item-switch: $disable-switch !default;
@@ -78,7 +79,7 @@ $label-typography: map.merge(
 ) !default;
 $label-floating-top: 1rem !default;
 $label-floating-top-dense: 0.9rem !default;
-$label-floating-font-size: 0.75em !default;
+$label-floating-scale: 0.75 !default;
 $label-floating-padding: 0.25rem !default;
 
 $message-typography-styles: map.merge(
@@ -196,9 +197,9 @@ $switch-track-background-color: theme.get-default-color(
   $switch-track-light-background-color,
   $switch-track-dark-background-color
 ) !default;
+$switch-icon-size: 1em !default;
 $switch-circular-progress-width: 12 !default;
-
-$menu-item-switch-spacing: calc(icon.$spacing + $switch-ball-size) !default;
+$switch-circular-progress-size: 1em !default;
 
 $slider-size: 2rem !default;
 $slider-vertical-size: 15rem !default;
@@ -255,6 +256,7 @@ $slider-thumb-mask-scale: 0.8 !default;
 $slider-thumb-disabled-color: $slider-track-disabled-color !default;
 $slider-tooltip-caret-size: 0.3rem !default;
 $slider-tooltip-offset: -($slider-thumb-size + icon.$spacing) !default;
+$slider-tooltip-z-index: 0 !default;
 $slider-container-padding: $slider-thumb-size * 0.5 !default;
 $slider-container-addon-spacing: $slider-thumb-size !default;
 $slider-transition-duration: transition.$linear-duration !default;
@@ -604,7 +606,7 @@ $var-lookup: (
     align-items: center;
     display: inline-flex;
     transition-duration: transition.$linear-duration;
-    transition-property: background-color, color, font-size, transform;
+    transition-property: background-color, transform;
 
     $active-selector: "&--active";
     @if not $_disable-text-field-container {
@@ -635,7 +637,6 @@ $var-lookup: (
         position: absolute;
         top: 0;
         transform: translate(get-var(text-padding-left), get-var(floating-top));
-        will-change: font-size, transform;
       }
 
       &--floating-dense {
@@ -660,19 +661,17 @@ $var-lookup: (
 
       #{$floating-active-selector} {
         @include utils.rtl {
-          transform: translate(
-            utils.negate-var(get-var(label-left-offset)),
-            get-var(label-top-offset)
-          );
+          transform: scale($label-floating-scale)
+            translate(
+              utils.negate-var(get-var(label-left-offset)),
+              get-var(label-top-offset)
+            );
         }
         @include use-var(background-color, label-active-background-color);
         @include use-var(padding, label-active-padding);
 
-        font-size: $label-floating-font-size;
-        transform: translate(
-          get-var(label-left-offset),
-          get-var(label-top-offset)
-        );
+        transform: scale($label-floating-scale)
+          translate(get-var(label-left-offset), get-var(label-top-offset));
         z-index: 1;
       }
     }
@@ -1241,6 +1240,10 @@ $var-lookup: (
       @include use-var(margin-top, addon-margin-top);
     }
 
+    // this makes it so that this container element is the same size as the
+    // child (normally icons). without this, icons would have a height of 30.5px
+    // and no longer be centered
+    display: inline-flex;
     position: absolute;
 
     // Note: Can't use `:first-child` and `:last-child` since
@@ -1361,6 +1364,11 @@ $var-lookup: (
       cursor: pointer;
     }
 
+    &--current-color,
+    &--current-color .rmd-switch__input:checked + .rmd-switch__ball {
+      @include set-var(switch-ball-background-color, currentcolor);
+    }
+
     &__input {
       @include utils.keyboard-only {
         &:focus + .rmd-switch__ball::before {
@@ -1378,6 +1386,19 @@ $var-lookup: (
     }
 
     &__track {
+      @if not $disable-switch-circular-progress {
+        @include progress.set-var(
+          circular-stroke-width,
+          $switch-circular-progress-width
+        );
+        @include progress.set-var(
+          circular-size,
+          $switch-circular-progress-size
+        );
+      }
+      @if not $disable-switch-icon {
+        @include icon.set-var(size, $switch-icon-size);
+      }
       @include use-var(background-color, switch-track-background-color);
 
       border-radius: $switch-track-border-radius;
@@ -1390,16 +1411,6 @@ $var-lookup: (
       &--disabled {
         opacity: $switch-disabled-opacity;
       }
-
-      @if not $disable-switch-circular-progress {
-        &--async {
-          @include progress.set-var(
-            circular-stroke-width,
-            $switch-circular-progress-width
-          );
-          @include progress.set-var(circular-size, $switch-ball-size);
-        }
-      }
     }
 
     &__ball {
@@ -1436,7 +1447,7 @@ $var-lookup: (
         position: absolute;
         top: 25%;
         width: $switch-ball-size;
-        z-index: 1;
+        z-index: 0;
       }
 
       $active-selector: ".rmd-switch__input:checked + &" +
@@ -1471,15 +1482,10 @@ $var-lookup: (
     }
 
     @if not $disable-menu-item-switch {
-      // increase the spacing because the switch's ball extends past the
-      // container's width
-      @if $menu-item-switch-spacing and
-        $menu-item-switch-spacing !=
-        icon.$spacing
-      {
-        &--switch {
-          @include icon.set-var(spacing, $menu-item-switch-spacing);
-        }
+      // this makes it so that the spacing between the switch and the text
+      // aligns with other menu items/icons
+      &__track {
+        @include icon.set-var(size, $switch-track-width);
       }
 
       // decrease the ball size and remove the hover states since it's handled
@@ -1832,6 +1838,7 @@ $var-lookup: (
     .rmd-slider-tooltip {
       opacity: 1;
       position: absolute;
+      z-index: $slider-tooltip-z-index;
 
       // this is used to generate the triangle
       &::after {

package/dist/form/switchStyles.d.ts

@@ -10,6 +10,7 @@ declare module "react" {
 export interface SwitchClassNameOptions {
     className?: string;
     clickable?: boolean;
+    currentColor?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/form/switchStyles.js

@@ -4,8 +4,9 @@ const styles = bem("rmd-switch");
 /**
  * @remarks \@since 6.0.0
  */ export function switchStyles(options = {}) {
-    const { className, clickable } = options;
+    const { className, clickable, currentColor } = options;
     return cnb(styles({
+        "current-color": currentColor,
         clickable
     }), className);
 }

package/dist/form/switchStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/switchStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-switch\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SwitchClassNameOptions {\n  className?: string;\n\n  clickable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function switchStyles(options: SwitchClassNameOptions = {}): string {\n  const { className, clickable } = options;\n\n  return cnb(styles({ clickable }), className);\n}\n"],"names":["cnb","bem","styles","switchStyles","options","className","clickable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,aAAaC,UAAkC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOJ,IAAIE,OAAO;QAAEI;IAAU,IAAID;AACpC"}
+{"version":3,"sources":["../../src/form/switchStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-switch\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SwitchClassNameOptions {\n  className?: string;\n  clickable?: boolean;\n  currentColor?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function switchStyles(options: SwitchClassNameOptions = {}): string {\n  const { className, clickable, currentColor } = options;\n\n  return cnb(styles({ \"current-color\": currentColor, clickable }), className);\n}\n"],"names":["cnb","bem","styles","switchStyles","options","className","clickable","currentColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,aAAaC,UAAkC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE/C,OAAOJ,IAAIE,OAAO;QAAE,iBAAiBK;QAAcD;IAAU,IAAID;AACnE"}

package/dist/hoverMode/useHoverMode.d.ts

@@ -10,11 +10,11 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
     /**
      * This can be used to override the `HoverModeContext`'s hover time.
      */
-    hoverTime?: number;
+    hoverTimeout?: number;
     /**
      * This can be used to override the `HoverModeContext`'s leave time.
      */
-    leaveTime?: number;
+    leaveTimeout?: number;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/hoverMode/useHoverMode.js

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 export function useHoverMode(options) {
-    const { disabled, hoverTime, hoverTimeoutRef, leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
+    const { disabled, hoverTimeout: hoverTime, hoverTimeoutRef, leaveTimeout: leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
     const state = useState(defaultVisible);
     let visible;
     let setVisible;