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

package/dist/form/MenuItemInputToggle.js

@@ -38,8 +38,8 @@ const styles = bem("rmd-menu-item-input-toggle");
         if (type === "switch") {
             icon = /*#__PURE__*/ _jsx(SwitchTrack, {
                 style: trackStyle,
-                className: trackClassName,
                 ...trackProps,
+                className: cnb(styles("track"), trackClassName, trackProps?.className),
                 active: checked,
                 ballProps: ballProps,
                 ballStyle: ballStyle,
@@ -89,7 +89,6 @@ const styles = bem("rmd-menu-item-input-toggle");
     }
     return /*#__PURE__*/ _jsx(ListItem, {
         ...remaining,
-        "aria-disabled": disabled || undefined,
         // I'm not actually sure if this is correct
         "aria-checked": indeterminate && checked ? "mixed" : checked,
         id: id,
@@ -106,6 +105,7 @@ const styles = bem("rmd-menu-item-input-toggle");
             type,
             className
         }),
+        disabled: disabled,
         tabIndex: tabIndex,
         leftAddon: leftAddon,
         leftAddonType: leftAddonType,

package/dist/form/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\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 * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          className={trackClassName}\n          {...trackProps}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      aria-disabled={disabled || undefined}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-disabled","undefined","aria-checked","role","event","stopPropagation"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  threeLines?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\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 * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          {...trackProps}\n          className={cnb(\n            styles(\"track\"),\n            trackClassName,\n            trackProps?.className\n          )}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/form/MenuItemTextField.d.ts

@@ -9,6 +9,8 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
      * Any additional props or a `ref` to apply to the surrounding `<li>` element.
      */
     liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+    /** @defaultValue `true` */
+    stretch?: boolean;
 }
 /**
  * **Client Component**

package/dist/form/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @remarks \\@since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @remarks \\@since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAYhE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @remarks \\@since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @remarks \\@since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/form/Slider.d.ts

@@ -74,6 +74,24 @@ export interface SliderProps extends BaseSliderProps, SliderState {
      * be useful for applying additional styling.
      */
     thumbProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * This can be used to update the discrete slider's tooltip props.
+     *
+     * @example
+     * Custom Styles
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipProps={(value) => ({
+     *     className: cssUtils({
+     *       backgroundColor: value < 30 ? "warning" : undefined,
+     *     }),
+     *   })}
+     * />
+     * ```
+     */
+    getTooltipProps?(value: number): Partial<TooltipProps>;
     /**
      * This can be used to update the discrete slider's value tooltip.
      *
@@ -150,6 +168,24 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      * accessibility.
      */
     maxThumbLabelledBy?: string;
+    /**
+     * This can be used to update the discrete slider's tooltip props.
+     *
+     * @example
+     * Custom Styles
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipProps={(value, isFirstThumb) => ({
+     *     className: cssUtils({
+     *       backgroundColor: value < 30 && isFirstThumb ? "warning" : undefined,
+     *     }),
+     *   })}
+     * />
+     * ```
+     */
+    getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;
     /**
      * This can be used to update the discrete slider's value tooltip.
      *
@@ -157,12 +193,12 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      * More Value Information
      * ```tsx
      * <Slider
-     *   {...slider}
+     *   {...rangeSlider}
      *   discrete
-     *   getTooltipChildren={(value, isMinValue) => (
+     *   getTooltipChildren={(value, isFirstThumb) => (
      *     <TextIconSpacing
-     *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}
-     *       iconAfter={!isMinValue}
+     *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}
+     *       iconAfter={!isFirstValue}
      *     >
      *       {value}
      *     </TextIconSpacing>
@@ -174,7 +210,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
      *
      * @defaultValue `(value) => value`
      */
-    getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;
+    getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;
 }
 /**
  * **Client Component**

package/dist/form/Slider.js

@@ -15,7 +15,7 @@ const noop = ()=>{
 // do nothing
 };
 export function Slider(props) {
-    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
+    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipProps = noop, getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
     const jump = getJumpValue({
         min,
         max,
@@ -156,6 +156,7 @@ export function Slider(props) {
         vertical,
         getValueText,
         tooltipProps,
+        getTooltipProps,
         getTooltipChildren,
         tooltipVisibility,
         disableSmoothDragging

package/dist/form/Slider.js.map

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

package/dist/form/SliderThumb.d.ts

@@ -2,6 +2,10 @@ import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "re
 import { type TooltipProps } from "../tooltip/Tooltip.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type SliderValueOptions } from "./useSlider.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type SliderTooltipVisibility = "auto" | "hover" | "always";
 /**
  * @remarks \@since 2.5.0
  */
@@ -51,7 +55,7 @@ export interface SliderThumbPresentation {
      *
      * @defaultValue `"auto"`
      */
-    tooltipVisibility?: "auto" | "hover" | "always";
+    tooltipVisibility?: SliderTooltipVisibility;
 }
 /**
  * @internal
@@ -70,7 +74,8 @@ export interface SliderThumbProps extends Omit<HTMLAttributes<HTMLSpanElement>,
     vertical: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
     tooltipProps?: Partial<TooltipProps>;
-    getTooltipChildren(value: number, isMinValue: boolean): ReactNode;
+    getTooltipProps(value: number, isFirstThumb: boolean): Partial<TooltipProps> | void;
+    getTooltipChildren(value: number, isFirstThumb: boolean): ReactNode;
 }
 /**
  * **Client Component**

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