@react-md/core 1.0.0-next.0

package/dist/form/SliderThumb.js

@@ -0,0 +1,172 @@
+"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");
+const noop = ()=>{
+// do nothing
+};
+/**
+ * @internal
+ * @remarks \@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**
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Internal only component.
+ */ export const SliderThumb = /*#__PURE__*/ forwardRef(function SliderThumb(props, ref) {
+    const { id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
+    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+    const mode = useUserInteractionMode();
+    const keyboard = mode === "keyboard";
+    const touch = mode === "touch";
+    const [mouseVisible, setMouseVisible] = useState(false);
+    const [keyboardVisible, setKeyboardVisible] = useState(false);
+    useEffect(()=>{
+        if (disabled || !discrete) {
+            setKeyboardVisible(false);
+            return;
+        }
+        // if the mode changes away from keyboard, need to disable the keyboard
+        // state
+        setKeyboardVisible((prevVisible)=>prevVisible && mode === "keyboard");
+    }, [
+        disabled,
+        discrete,
+        mode
+    ]);
+    useEffect(()=>{
+        if (disabled || !discrete) {
+            setMouseVisible(false);
+            return;
+        }
+        setMouseVisible((prevVisible)=>prevVisible && mode !== "touch");
+    }, [
+        disabled,
+        discrete,
+        mode
+    ]);
+    useEffect(()=>{
+        if (!keyboardVisible) {
+            return;
+        }
+        const callback = ()=>{
+            setKeyboardVisible(false);
+        };
+        window.addEventListener("blur", callback, true);
+        return ()=>{
+            window.removeEventListener("blur", callback);
+        };
+    }, [
+        keyboardVisible
+    ]);
+    const classNameOptions = {
+        index,
+        active,
+        animate: !disableSmoothDragging && animate,
+        disabled,
+        vertical,
+        className
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            disabled && /*#__PURE__*/ _jsx("span", {
+                className: sliderThumb({
+                    ...classNameOptions,
+                    mask: true
+                })
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                ...remaining,
+                id: id,
+                ref: ref,
+                role: "slider",
+                "aria-disabled": disabled || undefined,
+                "aria-orientation": vertical ? "vertical" : undefined,
+                "aria-valuemax": max,
+                "aria-valuemin": min,
+                "aria-valuenow": value,
+                "aria-valuetext": getValueText(value) || undefined,
+                tabIndex: tabIndex,
+                className: sliderThumb(classNameOptions),
+                onFocus: (event)=>{
+                    onFocus(event);
+                    if (discrete && keyboard) {
+                        setKeyboardVisible(true);
+                    }
+                },
+                onKeyDown: (event)=>{
+                    onKeyDown(event);
+                    // this allows the tooltip to be visible when switching from mouse to
+                    // keyboard
+                    if (discrete && event.key !== "Tab") {
+                        setKeyboardVisible(true);
+                    }
+                },
+                onMouseEnter: (event)=>{
+                    onMouseEnter(event);
+                    if (discrete && tooltipVisibility === "hover" && !touch) {
+                        setMouseVisible(true);
+                    }
+                },
+                onMouseLeave: (event)=>{
+                    onMouseLeave(event);
+                    if (discrete && tooltipVisibility === "hover" && !touch) {
+                        setMouseVisible(false);
+                    }
+                }
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                "aria-hidden": true,
+                id: `${id}-value`,
+                type: "range",
+                name: name,
+                min: min,
+                max: max,
+                step: step,
+                value: value,
+                tabIndex: -1,
+                onChange: onChange,
+                className: styles("input")
+            }),
+            discrete && /*#__PURE__*/ _jsx(SliderValueTooltip, {
+                position: vertical ? "left" : "above",
+                vertical: vertical,
+                animate: !disableSmoothDragging && !active,
+                visible: tooltipVisibility === "always" || active || keyboardVisible || mouseVisible,
+                ...tooltipProps,
+                index: index,
+                children: getTooltipChildren(value, index === 1)
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=SliderThumb.js.map

package/dist/form/SliderThumb.js.map

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

package/dist/form/SliderTrack.d.ts

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

package/dist/form/SliderTrack.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { bem } from "../utils/bem.js";
+import { getClosestThumbEventHandlers, getThumbOffsets } from "./sliderUtils.js";
+const styles = bem("rmd-slider-track");
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Updated to be internal only.
+ */ export const SliderTrack = /*#__PURE__*/ forwardRef(function SliderTrack(props, ref) {
+    const { style, className, animate, vertical, disabled, min, max, thumb1Ref, thumb1Value, thumb1Dragging, thumb1DragPercentage, thumb1OnMouseUp, thumb1OnMouseDown, thumb1OnMouseMove, thumb1OnTouchStart, thumb1OnTouchMove, thumb2Ref, thumb2Value, thumb2Dragging, thumb2DragPercentage, thumb2OnMouseUp, thumb2OnMouseDown, thumb2OnMouseMove, thumb2OnTouchStart, thumb2OnTouchMove, isRangeSlider, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("span", {
+        ...remaining,
+        ref: ref,
+        style: {
+            ...style,
+            ...getThumbOffsets({
+                min,
+                max,
+                thumb1Value,
+                thumb1Dragging,
+                thumb1DragPercentage,
+                thumb2Value,
+                thumb2Dragging,
+                thumb2DragPercentage,
+                isRangeSlider
+            })
+        },
+        className: cnb(styles({
+            animate,
+            disabled,
+            hoverable: !disabled,
+            h: !vertical,
+            h1: !vertical && !isRangeSlider,
+            h2: !vertical && isRangeSlider,
+            v: vertical,
+            v1: vertical && !isRangeSlider,
+            v2: vertical && isRangeSlider
+        }), className),
+        ...getClosestThumbEventHandlers({
+            vertical,
+            isRangeSlider,
+            thumb1Ref,
+            thumb1Dragging,
+            thumb1OnMouseUp,
+            thumb1OnMouseDown,
+            thumb1OnMouseMove,
+            thumb1OnTouchStart,
+            thumb1OnTouchMove,
+            thumb2Ref,
+            thumb2Dragging,
+            thumb2OnMouseUp,
+            thumb2OnMouseDown,
+            thumb2OnMouseMove,
+            thumb2OnTouchStart,
+            thumb2OnTouchMove
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=SliderTrack.js.map

package/dist/form/SliderTrack.js.map

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

package/dist/form/SliderValueMarks.d.ts

@@ -0,0 +1,116 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type RangeStepsOptions } from "../utils/getRangeSteps.js";
+import { type CustomizableSliderMarkLabelProps } from "./SliderMarkLabel.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SliderValueMark {
+    /**
+     * An optional label to display alongside the current mark. This will be
+     * positioned below the mark for horizontal sliders and to the right for
+     * vertical sliders.
+     */
+    label?: ReactNode;
+    /**
+     * The value of the mark that should be a valid step within the slider.
+     */
+    value: number;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SliderValueMarkState {
+    /** The {@link SliderValueMark.value} */
+    value: number;
+    /**
+     * No idea if this is actually useful (maybe custom styles?), but it is the
+     * current percentage the mark is offset and is what is set as the
+     * `left`/`top` values for the mark.
+     */
+    offset: string;
+    /**
+     * This will be `true` when the mark is being covered by the slider track's
+     * active state.
+     */
+    active: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SliderMarksOptions {
+    /**
+     * Set this to `true` to display a mark for each step within the slider. This
+     * can be used alongside the {@link getMarkProps} and
+     * {@link getMarkLabelProps} to customize the styles or display a label for
+     * the mark.
+     *
+     * @example
+     * Custom Marks
+     * ```tsx
+     * const slider = useSlider({ step: 10 });
+     *
+     * <Slider
+     *   {...slider}
+     *   marks={[
+     *     { value: 0, label: "Minimum" },
+     *     { value: 10 },
+     *     { value: 20 },
+     *     { value: 30 },
+     *     { value: 40 },
+     *     { value: 50, label: "Medium" },
+     *     { value: 60 },
+     *     { value: 70 },
+     *     { value: 80 },
+     *     { value: 90 },
+     *     { value: 100, label: "Maximum" },
+     *   ]}
+     * />
+     * ```
+     */
+    marks?: boolean | readonly SliderValueMark[];
+    /**
+     * This can be used to override any styles for the specific mark.
+     */
+    getMarkProps?(options: SliderValueMarkState): HTMLAttributes<HTMLSpanElement> | void;
+    /**
+     * This can be used to override any styles for a specific mark's label or
+     * display a label dynamically.
+     *
+     * @example
+     * Dynamic Labels
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   marks
+     *   getMarkLabelProps={({ active, value }) => {
+     *     if (value % 10 !== 0) {
+     *       return;
+     *     }
+     *
+     *     return {
+     *       children: `${value} degrees`,
+     *       className: cnb(active && styles.somethingCustom),
+     *     };
+     *   }}
+     * />
+     * ```
+     */
+    getMarkLabelProps?(options: SliderValueMarkState): Partial<CustomizableSliderMarkLabelProps> | void;
+}
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface SliderValueMarksProps extends RangeStepsOptions, Required<SliderMarksOptions> {
+    vertical: boolean;
+    thumb1Value: number;
+    thumb2Value: number;
+    isRangeSlider: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function SliderValueMarks(props: SliderValueMarksProps): ReactElement;

package/dist/form/SliderValueMarks.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { getPercentage } from "../utils/getPercentage.js";
+import { getRangeSteps } from "../utils/getRangeSteps.js";
+import { SliderMark } from "./SliderMark.js";
+import { SliderMarkLabel } from "./SliderMarkLabel.js";
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function SliderValueMarks(props) {
+    const { min, max, step, marks: propMarks, vertical, thumb1Value, thumb2Value, isRangeSlider, getMarkProps, getMarkLabelProps } = props;
+    let marks;
+    if (typeof propMarks === "boolean") {
+        const steps = getRangeSteps({
+            min,
+            max,
+            step
+        }) + 1;
+        marks = Array.from({
+            length: steps
+        }, (_, i)=>({
+                value: i * step
+            }));
+    } else {
+        marks = propMarks;
+    }
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: marks.map(({ value, label: markLabel })=>{
+            // I can't think of a good name, but this is when the slider's track's
+            // active color is covering the mark which requires different styles
+            let active;
+            let percentage = getPercentage({
+                min,
+                max,
+                value
+            }) * 100;
+            let markValue = value;
+            if (vertical) {
+                // need to reverse the percentage since it uses `top` for positioning
+                // where the max value is at the top instead of bottom
+                percentage = 100 - percentage;
+                // need to reverse the mark's value as well for the same reason as
+                // above
+                markValue = max - value;
+            }
+            if (isRangeSlider) {
+                active = markValue > thumb1Value && markValue < thumb2Value;
+            } else {
+                active = markValue < thumb1Value;
+            }
+            const offset = `${percentage}%`;
+            const markProps = getMarkProps({
+                value,
+                active,
+                offset
+            });
+            const labelProps = getMarkLabelProps({
+                value,
+                active,
+                offset
+            });
+            const label = markLabel ?? labelProps?.children ?? null;
+            return /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(SliderMark, {
+                        ...markProps,
+                        offset: offset,
+                        active: active,
+                        vertical: vertical
+                    }),
+                    label !== null && /*#__PURE__*/ _jsx(SliderMarkLabel, {
+                        ...labelProps,
+                        offset: offset,
+                        vertical: vertical,
+                        children: label
+                    })
+                ]
+            }, value);
+        })
+    });
+}
+
+//# sourceMappingURL=SliderValueMarks.js.map

package/dist/form/SliderValueMarks.js.map

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

package/dist/form/SliderValueTooltip.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+/**
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.
+ */
+export interface SliderValueTooltipProps extends TooltipProps {
+    index: 1 | 2;
+    animate: boolean;
+    vertical: boolean;
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * This component creates the "discrete" slider thumb value by rendering a
+ * tooltip when needed.
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
+ */
+export declare function SliderValueTooltip(props: SliderValueTooltipProps): ReactElement;

package/dist/form/SliderValueTooltip.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-slider-tooltip");
+const HORIZONTAL_CLASS_NAMES = {
+    enter: "rmd-slider-tooltip--h-off",
+    enterActive: "rmd-slider-tooltip--h-on rmd-slider-tooltip--animate",
+    exit: "rmd-slider-tooltip--animate",
+    exitActive: "rmd-slider-tooltip--h-off"
+};
+const VERTICAL_CLASS_NAMES = {
+    enter: "rmd-slider-tooltip--v-off",
+    enterActive: "rmd-slider-tooltip--v-on rmd-slider-tooltip--animate",
+    exit: "rmd-slider-tooltip--animate",
+    exitActive: "rmd-slider-tooltip--v-off"
+};
+/**
+ * **Client Component**
+ *
+ * This component creates the "discrete" slider thumb value by rendering a
+ * tooltip when needed.
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
+ */ export function SliderValueTooltip(props) {
+    const { index, animate, vertical, className, children, classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        dense: true,
+        disablePortal: true,
+        disableLineWrap: true,
+        className: cnb(styles({
+            h: !vertical,
+            v: vertical
+        }), animate && "rmd-slider-thumb--animate", `rmd-slider-thumb--${vertical ? "v" : "h"}${index}`, className),
+        classNames: classNames,
+        ...remaining,
+        children: children
+    });
+}
+
+//# sourceMappingURL=SliderValueTooltip.js.map

package/dist/form/SliderValueTooltip.js.map

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

package/dist/form/Switch.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes } from "react";
+import { type PropsWithRef } from "../types.js";
+import { type InputToggleLabelProps } from "./InputToggle.js";
+import { type FormComponentStates, type FormMessageContainerExtension } from "./types.js";
+/**
+ * @remarks \@since 6.0.0 Added `containerProps` and support for the
+ * `FormMessage` behavior.
+ */
+export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, InputToggleLabelProps, FormMessageContainerExtension, FormComponentStates {
+    containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    trackStyle?: CSSProperties;
+    trackClassName?: string;
+    ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    ballStyle?: CSSProperties;
+    ballClassName?: string;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Form, Switch } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ * import { useState } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [checked, setChecked] = useState(false);
+ *
+ *   return (
+ *     <Form>
+ *       <Switch
+ *         label="Label"
+ *         name="enabled"
+ *         checked={checked}
+ *         onChange={(event) => setChecked(event.currentTarget.checked)}
+ *       />
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 Added support for `FormMessage` behavior.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;