@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/form/Select.js

@@ -7,11 +7,11 @@ import { getIcon } from "../icon/config.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { label as labelStyles } from "./Label.js";
 import { Listbox } from "./Listbox.js";
 import { SelectedOption } from "./SelectedOption.js";
 import { TextFieldContainer } from "./TextFieldContainer.js";
 import { getFormConfig } from "./formConfig.js";
+import { label as labelStyles } from "./labelStyles.js";
 import { select } from "./selectStyles.js";
 import { extractOptionsFromChildren } from "./selectUtils.js";
 import { textField } from "./textFieldStyles.js";
@@ -27,7 +27,8 @@ const noop = ()=>{
  *
  * @example Simple Example
  * ```tsx
- * import { Select, Option } from "react-md";
+ * import { Option } from "@react-md/core/form/Option";
+ * import { Select } from "@react-md/core/form/Select";
  * import { useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -49,31 +50,7 @@ const noop = ()=>{
  * }
  * ```
  *
- * @example Testing
- * ```tsx
- * rmdRender(
- *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
- *     <Option value="a">Option 1</Option>
- *     <Option value="b">Option 2</Option>
- *     <Option value="c">Option 3</Option>
- *     <Option value="d">Option 4</Option>
- *   </Select>
- * );
- *
- * const user = userEvent.setup();
- * const select = screen.getByRole("combobox", { name: "Select" });
- * const selected = screen.getByTestId("selected")
- * const selectInput = screen.getByRole("textbox", { hidden: true });
- * expect(selected).toHaveTextContent("");
- * expect(selectInput).toHaveValue("");
- *
- * await user.click(select);
- * await user.click(screen.getByRole("option"), { name: "Option 2" });
- *
- * expect(selected).toHaveTextContent("Option 2");
- * expect(selectInput).toHaveValue("b");
- * ```
- *
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
  * @since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
     const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;

package/dist/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { label as labelStyles } from \"./Label.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import type { SelectedChangeEvent } from \"@react-md/core\";\n * import { Select, Option } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Select, Option } from \"react-md\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @example Testing\n * ```tsx\n * rmdRender(\n *   <Select label=\"Select\" selectedOptionProps={{ \"data-testid\": \"selected\" }}>\n *     <Option value=\"a\">Option 1</Option>\n *     <Option value=\"b\">Option 2</Option>\n *     <Option value=\"c\">Option 3</Option>\n *     <Option value=\"d\">Option 4</Option>\n *   </Select>\n * );\n *\n * const user = userEvent.setup();\n * const select = screen.getByRole(\"combobox\", { name: \"Select\" });\n * const selected = screen.getByTestId(\"selected\")\n * const selectInput = screen.getByRole(\"textbox\", { hidden: true });\n * expect(selected).toHaveTextContent(\"\");\n * expect(selectInput).toHaveValue(\"\");\n *\n * await user.click(select);\n * await user.click(screen.getByRole(\"option\"), { name: \"Option 2\" });\n *\n * expect(selected).toHaveTextContent(\"Option 2\");\n * expect(selectInput).toHaveValue(\"b\");\n * ```\n *\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          placeholder={placeholder}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        />\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","label","labelStyles","Listbox","SelectedOption","TextFieldContainer","getFormConfig","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","placeholder","menuProps","labelProps","selectedOptionProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","children","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","options","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAOEC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,wBAAwB,QAAQ,6CAA6C;AAMtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,SAASC,WAAW,QAAQ,aAAa;AAClD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SACEC,kBAAkB,QAEb,0BAA0B;AACjC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,mBAAmB;AAC9D,SAASC,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,eAAe;AACrB,MAAMC,OAAO;AACX,aAAa;AACf;AA0KA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDC,GACD,OAAO,SAASC,OACdC,KAAuE;IAEvE,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY,EACZC,WAAW,EACXC,YAAY,CAAC,CAAC,EACd9B,KAAK,EACL+B,aAAa,CAAC,CAAC,EACfC,mBAAmB,EACnBC,MAAMC,QAAQ,EACdC,KAAK,EACLC,YAAY,EACZC,OAAOC,SAAS,EAChBC,WAAW1B,IAAI,EACf2B,YAAYC,cAAc,EAC1BC,SAAS,KAAK,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,qBAAqB,KAAK,EAC1BC,sBAAsB,KAAK,EAC3BC,QAAQ,EACR,GAAGC,WACJ,GAAGjC;IACJ,MAAM,EAAEkC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGpC;IAEnC,MAAMqC,aAAatD,aAAakB,IAAI;IACpC,MAAMqC,UAAUvD,aAAa6B,YAAYX,IAAI;IAC7C,MAAMsC,gBAAgBxD,aAAaiC,WAAWf,EAAE,EAAE;IAClD,MAAMuC,UAAUvD,QAAQsD,gBAAgBE;IAExC,MAAM,CAACC,YAAYC,cAAc,GAAGhE,SAAS;QAC3C,IAAI,OAAO0C,iBAAiB,aAAa;YACvC,OAAOA;QACT;QAEA,OAAO,OAAOD,UAAU,cAAcA,QAAQvB;IAChD;IACA,MAAM+C,eAAe,OAAOxB,UAAU,cAAcsB,aAAatB;IACjE,MAAMyB,eAAenE,OAAOkE;IAC5B,MAAM,EAAEE,OAAO,EAAEC,aAAa,EAAE,GAAGvD,2BACjCwC,UACAY;IAGF,MAAM,EAAEI,OAAO,EAAEC,aAAa,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAC7DxD,kBAAkB;QAChBO;QACAkB,OAAOwB;QACPQ,QAAQN;QACRvC;QACAC;QACAC;QACA2B;QACAiB,SAAStC,UAAUd,EAAE;QACrBqD,UAAUvC,UAAUwC,GAAG;QACvBlB;QACAmB,aAAa3C;IACf;IAEF,MAAM,CAACH,UAAU+C,iBAAiB,GAAGzE,cAAc2B;IACnDjB,aAAa;QACXQ;QACAwD,YAAYhD;QACZW,cAAcwB,aAAac,OAAO;IACpC;IAEA,MAAMzC,OAAOrC,QAAQ,YAAYsC;IACjC,MAAMG,QAAQhC,cAAc,SAASiC;IACrC,IAAIE,aAAaC;IACjB,IAAI,OAAOD,eAAe,eAAeP,MAAM;QAC7CO,2BAAa,KAAC7C;YAAYgF,SAASZ;sBAAU9B;;IAC/C;IAEA,MAAM,EAAEqC,KAAKM,UAAU,EAAE,GAAGC,cAAc,GAAGX,aAAapC;IAC1D,IAAIgD,oBAAoBhD,SAAS,CAAC,kBAAkB;IACpD,MAAMiD,eAAejD,SAAS,CAAC,aAAa;IAC5C,IAAI,CAACiD,gBAAgB,CAACD,mBAAmB;QACvCA,oBAAoBvB,WAAWH;IACjC;IAEA,qBACE,MAACvD;QAAyBsC,OAAO8B;;0BAC/B,MAAC7D;gBACC4E,mBAAiBzB;gBAChB,GAAGP,SAAS;gBACZ,GAAGgB,aAAa;gBACjBhE,OAAO,CAAC,CAACA;gBACTqC,OAAOA;gBACPK,QAAQA,UAAUqB;gBAClB1C,WAAW9B,IAAI,wBAAwB8B;gBACvCmB,YAAYA;;kCAEZ,KAACrC;wBACC8E,QAAQnB;wBACRjC,aAAaA;wBACbqD,cAAcrC;wBACb,GAAGb,mBAAmB;;kCAEzB,KAACmD;wBACCC,aAAW;wBACXpE,IAAIqC;wBACJiB,KAAKE;wBACLa,MAAK;wBACLlE,cAAcA;wBACdC,MAAMA;wBACNkE,UAAU,CAAC;wBACXnC,UAAUA;wBACVR,UAAUA;wBACVd,aAAY;wBACX,GAAGF,UAAU;wBACdQ,OAAOA;wBACPC,cAAcA;wBACdf,WAAW9B,IAAIe,OAAO;4BAAE+B;wBAAM,IAAI7B;wBAClC+B,UAAU,CAACgD;4BACThD,SAASgD;4BACT,IAAI,OAAOpD,UAAU,aAAa;gCAChC;4BACF;4BAEA,MAAMqD,YAAYD,MAAME,aAAa,CAACtD,KAAK;4BAC3C,MAAMuD,aAAa7B,QAAQ8B,IAAI,CAAC,CAACV,SAAWA,WAAWO;4BAEvD9B,cAAcgC,cAAc9B,aAAac,OAAO;wBAClD;;oBAED1E,uBACC,KAAC4F;wBACE,GAAG7D,UAAU;wBACdf,IAAIuC;wBACJlC,WAAWpB,YAAY;4BACrBgD;4BACAC;4BACAC;4BACAT,QAAQA,UAAUqB;4BAClB8B,UAAU;4BACVC,gBAAgB,CAAC,CAACjE,eAAe,CAAC,CAACiC;4BACnCzC,WAAWU,WAAWV,SAAS;wBACjC;kCAECrB;;;;0BAIP,KAACE;gBACE,GAAG2E,YAAY;gBAChBkB,cAAYhB;gBACZC,mBAAiBF;gBACjBkB,SAASpB;gBACTzC,OAAOwB;gBACPsC,UAAUzG,YACR,CAACyF;oBACCtE,yBAAyBc,SAASiD,OAAO,EAAEO;gBAC7C,GACA;oBAACxD;iBAAS;gBAEZmB,mBAAmBA;gBACnBE,qBAAqBA;0BAEpBC;;;;AAIT"}
+{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/select | Select Demos}\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          placeholder={placeholder}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        />\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","placeholder","menuProps","labelProps","selectedOptionProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","children","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","options","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"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"}

package/dist/form/Slider.d.ts

@@ -211,7 +211,9 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  *
  * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -237,7 +239,11 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  *
  * @example Range Slider Example
  * ```tsx
- * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Legend } from "@react-md/core/form/Legend";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useRangeSlider } from "@react-md/core/form/useRangeSlider";
  * import type { ReactElement } from "react";
  * import { useId } from "react";
  *
@@ -266,6 +272,7 @@ export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @since 2.5.0
  * @since 6.0.0 The `Slider` and `RangeSlider` have been combined into the
  * single `Slider` component and removed the `label` support.

package/dist/form/Slider.js.map

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

package/dist/form/SliderContainer.js

@@ -1,8 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-slider-container");
+import { sliderContainer } from "./sliderStyles.js";
 /**
  * The `SliderContainer` component is mostly an internal component that is
  * built-in to the `Slider` and `RangeSlider` components to add addons to the
@@ -18,14 +16,12 @@ const styles = bem("rmd-slider-container");
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
-        className: cnb(styles({
-            h: !vertical,
-            "pad-left": !vertical && !beforeAddon,
-            "pad-right": !vertical && !afterAddon,
-            v: vertical,
-            "pad-bottom": vertical && !beforeAddon,
-            "pad-top": vertical && !afterAddon
-        }), className),
+        className: sliderContainer({
+            className,
+            vertical,
+            beforeAddon: !!beforeAddon,
+            afterAddon: !!afterAddon
+        }),
         children: [
             beforeAddon,
             children,

package/dist/form/SliderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-container\");\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`\n */\nexport interface SliderAddonProps {\n  /**\n   * An optional addon to render before the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear underneath the\n   * track.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear above the track.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport interface SliderContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderAddonProps {\n  vertical: boolean;\n}\n\n/**\n * The `SliderContainer` component is mostly an internal component that is\n * built-in to the `Slider` and `RangeSlider` components to add addons to the\n * left or right of the `SliderTrack`. When vertical, it will add addons to the\n * bottom or top instead.\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(\n  function SliderContainer(props, ref) {\n    const {\n      className,\n      children,\n      beforeAddon,\n      afterAddon,\n      vertical,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cnb(\n          styles({\n            h: !vertical,\n            \"pad-left\": !vertical && !beforeAddon,\n            \"pad-right\": !vertical && !afterAddon,\n            v: vertical,\n            \"pad-bottom\": vertical && !beforeAddon,\n            \"pad-top\": vertical && !afterAddon,\n          }),\n          className\n        )}\n      >\n        {beforeAddon}\n        {children}\n        {afterAddon}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SliderContainer","props","ref","className","children","beforeAddon","afterAddon","vertical","remaining","div","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAqCnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,gCAAkBH,WAC7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,MAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWP,IACTG,OAAO;YACLW,GAAG,CAACH;YACJ,YAAY,CAACA,YAAY,CAACF;YAC1B,aAAa,CAACE,YAAY,CAACD;YAC3BK,GAAGJ;YACH,cAAcA,YAAY,CAACF;YAC3B,WAAWE,YAAY,CAACD;QAC1B,IACAH;;YAGDE;YACAD;YACAE;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/SliderContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { sliderContainer } from \"./sliderStyles.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`\n */\nexport interface SliderAddonProps {\n  /**\n   * An optional addon to render before the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear underneath the\n   * track.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear above the track.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport interface SliderContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderAddonProps {\n  vertical: boolean;\n}\n\n/**\n * The `SliderContainer` component is mostly an internal component that is\n * built-in to the `Slider` and `RangeSlider` components to add addons to the\n * left or right of the `SliderTrack`. When vertical, it will add addons to the\n * bottom or top instead.\n *\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(\n  function SliderContainer(props, ref) {\n    const {\n      className,\n      children,\n      beforeAddon,\n      afterAddon,\n      vertical,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={sliderContainer({\n          className,\n          vertical,\n          beforeAddon: !!beforeAddon,\n          afterAddon: !!afterAddon,\n        })}\n      >\n        {beforeAddon}\n        {children}\n        {afterAddon}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","sliderContainer","SliderContainer","props","ref","className","children","beforeAddon","afterAddon","vertical","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,eAAe,QAAQ,oBAAoB;AAqCpD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,gCAAkBF,WAC7B,SAASE,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,MAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,gBAAgB;YACzBI;YACAI;YACAF,aAAa,CAAC,CAACA;YACfC,YAAY,CAAC,CAACA;QAChB;;YAECD;YACAD;YACAE;;;AAGP,GACA"}

package/dist/form/SliderMark.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-slider-mark");
+import { sliderMark } from "./sliderStyles.js";
 /**
  * @internal
  * @since 6.0.0
@@ -13,12 +11,11 @@ const styles = bem("rmd-slider-mark");
             ...style,
             "--rmd-slider-mark-offset": offset
         },
-        className: cnb(styles({
+        className: sliderMark({
+            className,
             active,
-            inactive: !active,
-            h: !vertical,
-            v: vertical
-        }), className)
+            vertical
+        })
     });
 }
 

package/dist/form/SliderMark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderMark.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactElement } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-mark\");\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {\n  active: boolean;\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function SliderMark(props: SliderMarkProps): ReactElement {\n  const { active, offset, vertical, style, className, ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={cnb(\n        styles({\n          active,\n          inactive: !active,\n          h: !vertical,\n          v: vertical,\n        }),\n        className\n      )}\n    />\n  );\n}\n"],"names":["cnb","bem","styles","SliderMark","props","active","offset","vertical","style","className","remaining","span","inactive","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;;CAGC,GACD,OAAO,SAASE,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGN;IAErE,qBACE,KAACO;QACE,GAAGD,SAAS;QACbF,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWT,IACTE,OAAO;YACLG;YACAO,UAAU,CAACP;YACXQ,GAAG,CAACN;YACJO,GAAGP;QACL,IACAE;;AAIR"}
+{"version":3,"sources":["../../src/form/SliderMark.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement } from \"react\";\n\nimport { sliderMark } from \"./sliderStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {\n  active: boolean;\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function SliderMark(props: SliderMarkProps): ReactElement {\n  const { active, offset, vertical, style, className, ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={sliderMark({ className, active, vertical })}\n    />\n  );\n}\n"],"names":["sliderMark","SliderMark","props","active","offset","vertical","style","className","remaining","span"],"mappings":";AAEA,SAASA,UAAU,QAAQ,oBAAoB;AAY/C;;;CAGC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGN;IAErE,qBACE,KAACO;QACE,GAAGD,SAAS;QACbF,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWP,WAAW;YAAEO;YAAWJ;YAAQE;QAAS;;AAG1D"}

package/dist/form/SliderMarkLabel.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { Typography } from "../typography/Typography.js";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-slider-mark-label");
+import { sliderMarkLabel } from "./sliderStyles.js";
 /**
  * @internal
  * @since 6.0.0
@@ -16,10 +14,10 @@ const styles = bem("rmd-slider-mark-label");
             ...style,
             "--rmd-slider-mark-offset": offset
         },
-        className: cnb(styles({
-            h: !vertical,
-            v: vertical
-        }), className),
+        className: sliderMarkLabel({
+            className,
+            vertical
+        }),
         children: children
     });
 }

package/dist/form/SliderMarkLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SliderMarkLabel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\n\nimport {\n  type CustomTypographyComponent,\n  Typography,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-mark-label\");\n\n/**\n * @since 6.0.0\n */\nexport interface CustomizableSliderMarkLabelProps extends TypographyProps {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /** @defaultValue `\"body-2\"` */\n  type?: TypographyType;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function SliderMarkLabel(props: SliderMarkLabelProps): ReactElement {\n  const {\n    as = \"span\",\n    type = \"body-2\",\n    offset,\n    vertical,\n    style,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <Typography\n      {...remaining}\n      as={as}\n      type={type}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={cnb(styles({ h: !vertical, v: vertical }), className)}\n    >\n      {children}\n    </Typography>\n  );\n}\n"],"names":["cnb","Typography","bem","styles","SliderMarkLabel","props","as","type","offset","vertical","style","className","children","remaining","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAEEC,UAAU,QAEL,8BAA8B;AAErC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAsBnB;;;CAGC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,KAAK,MAAM,EACXC,OAAO,QAAQ,EACfC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACJ;QACE,GAAGY,SAAS;QACbP,IAAIA;QACJC,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWX,IAAIG,OAAO;YAAEW,GAAG,CAACL;YAAUM,GAAGN;QAAS,IAAIE;kBAErDC;;AAGP"}
+{"version":3,"sources":["../../src/form/SliderMarkLabel.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport {\n  type CustomTypographyComponent,\n  Typography,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { sliderMarkLabel } from \"./sliderStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface CustomizableSliderMarkLabelProps extends TypographyProps {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /** @defaultValue `\"body-2\"` */\n  type?: TypographyType;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function SliderMarkLabel(props: SliderMarkLabelProps): ReactElement {\n  const {\n    as = \"span\",\n    type = \"body-2\",\n    offset,\n    vertical,\n    style,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <Typography\n      {...remaining}\n      as={as}\n      type={type}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={sliderMarkLabel({ className, vertical })}\n    >\n      {children}\n    </Typography>\n  );\n}\n"],"names":["Typography","sliderMarkLabel","SliderMarkLabel","props","as","type","offset","vertical","style","className","children","remaining"],"mappings":";AAEA,SAEEA,UAAU,QAEL,8BAA8B;AAErC,SAASC,eAAe,QAAQ,oBAAoB;AAsBpD;;;CAGC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,KAAK,MAAM,EACXC,OAAO,QAAQ,EACfC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACH;QACE,GAAGW,SAAS;QACbP,IAAIA;QACJC,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWR,gBAAgB;YAAEQ;YAAWF;QAAS;kBAEhDG;;AAGP"}

package/dist/form/SliderThumb.js

@@ -1,37 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useEffect, useState } from "react";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { bem } from "../utils/bem.js";
 import { SliderValueTooltip } from "./SliderValueTooltip.js";
-const styles = bem("rmd-slider-thumb");
+import { sliderThumb, sliderThumbInput } from "./sliderStyles.js";
 const noop = ()=>{
 // do nothing
 };
-/**
- * @internal
- * @since 6.0.0
- */ function sliderThumb(options) {
-    const { className, mask, index, active, animate, disabled, vertical } = options;
-    const isSecondThumb = index === 2;
-    return cnb(styles({
-        h: !vertical,
-        h1: !vertical && !isSecondThumb,
-        h2: !vertical && isSecondThumb,
-        v: vertical,
-        v1: vertical && !isSecondThumb,
-        v2: vertical && isSecondThumb,
-        mask,
-        "mask-h": mask && !vertical,
-        "mask-v": mask && vertical,
-        active,
-        animate,
-        disabled,
-        "disabled-h": disabled && !vertical && !mask,
-        "disabled-v": disabled && vertical && !mask
-    }), className);
-}
 /**
  * **Client Component**
  *
@@ -155,7 +130,7 @@ const noop = ()=>{
                 disabled: disabled,
                 tabIndex: -1,
                 onChange: onChange,
-                className: styles("input")
+                className: sliderThumbInput()
             }),
             discrete && /*#__PURE__*/ _jsx(SliderValueTooltip, {
                 position: vertical ? "left" : "above",

package/dist/form/SliderThumb.js.map

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
+import { sliderTrack } from "./sliderStyles.js";
 import { getClosestThumbEventHandlers, getThumbOffsets } from "./sliderUtils.js";
-const styles = bem("rmd-slider-track");
 /**
  * @internal
  * @since 2.5.0
@@ -27,17 +25,13 @@ const styles = bem("rmd-slider-track");
                 isRangeSlider
             })
         },
-        className: cnb(styles({
+        className: sliderTrack({
+            className,
             animate,
             disabled,
-            hoverable: !disabled,
-            h: !vertical,
-            h1: !vertical && !isRangeSlider,
-            h2: !vertical && isRangeSlider,
-            v: vertical,
-            v1: vertical && !isRangeSlider,
-            v2: vertical && isRangeSlider
-        }), className),
+            vertical,
+            isRangeSlider
+        }),
         ...getClosestThumbEventHandlers({
             vertical,
             isRangeSlider,

package/dist/form/SliderTrack.js.map

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