@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/slider/Slider.js

@@ -0,0 +1,295 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { useTouchTrack } from "./use-touch-track.js";
+import { iconSizeWhenFits, movedStartIcon, segmentLength, trackGeometry } from "./slider-geometry.js";
+import { sliderStyles } from "./slider-styles.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden, mergeProps, useFocusRing, useLocale, useNumberFormatter, useObjectRef, useSlider, useSliderThumb } from "react-aria";
+import { useSliderState } from "react-stately";
+//#region src/components/slider/Slider.tsx
+const DEFAULT_LABELS = {
+	start: "Minimum",
+	end: "Maximum"
+};
+/**
+* M3 Expressive slider: XS–XL sizes, horizontal or vertical, continuous or discrete with
+* stop indicators, optionally centred, with inset icons and a value indicator. Arrow keys,
+* Page Up / Down and Home / End adjust it (mirrored in RTL).
+*
+* @example
+* <Slider aria-label="Volume" size="md" leadingIcon={<VolumeIcon />} defaultValue={40} />
+*/
+function Slider(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(SliderRoot, {
+		...props,
+		range: false,
+		directionRef
+	}) });
+}
+/**
+* M3 Expressive range slider: two thumbs selecting a range, with the same sizes,
+* orientations and discrete stops as {@link Slider}.
+*
+* @example
+* <RangeSlider aria-label="Price" defaultValue={[20, 80]} />
+*/
+function RangeSlider(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(SliderRoot, {
+		...props,
+		range: true,
+		directionRef
+	}) });
+}
+function SliderRoot(props) {
+	const { size = "xs", orientation = "horizontal", min = 0, max = 100, step = 1, ticks = false, disabled = false, valueLabel = false, formatOptions, name, id, ref, className, style, classNames, range, directionRef, value, defaultValue, onChange, onChangeEnd, ...rest } = props;
+	const { centered = false, leadingIcon: startIconProp, trailingIcon: endIconProp } = props;
+	const iconSize = size === "md" || size === "lg" || size === "xl";
+	const startIcon = iconSize && !centered ? startIconProp : void 0;
+	const endIcon = iconSize && !centered ? endIconProp : void 0;
+	const labels = {
+		...DEFAULT_LABELS,
+		...props.labels
+	};
+	const { root: data, rest: labelling } = splitRootProps(rest);
+	const { "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-details": details, "aria-errormessage": errorMessage } = labelling;
+	const numberFormatter = useNumberFormatter(formatOptions);
+	const wrap = (v) => v === void 0 ? void 0 : Array.isArray(v) ? v : [v];
+	const unwrap = (v) => range ? v : v[0];
+	const ariaProps = {
+		id,
+		minValue: min,
+		maxValue: max,
+		step,
+		orientation,
+		isDisabled: disabled,
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy,
+		"aria-details": details,
+		value: wrap(value),
+		defaultValue: wrap(defaultValue) ?? (range ? [min, max] : [min]),
+		onChange: onChange && ((v) => onChange(unwrap(v))),
+		onChangeEnd: onChangeEnd && ((v) => onChangeEnd(unwrap(v)))
+	};
+	const state = useSliderState({
+		...ariaProps,
+		numberFormatter
+	});
+	const rootRef = useObjectRef(ref);
+	const trackRef = useRef(null);
+	const { groupProps, trackProps } = useSlider(ariaProps, state, trackRef);
+	const { direction } = useLocale();
+	const count = Math.round((max - min) / step);
+	const touchTrackProps = useTouchTrack(trackProps, {
+		state,
+		trackRef,
+		orientation,
+		direction,
+		disabled,
+		discrete: ticks && count > 0
+	});
+	const tickFractions = ticks && count > 0 ? Array.from({ length: count + 1 }, (_, i) => i / count) : [];
+	const fractions = state.values.map((_, index) => state.getThumbPercent(index));
+	const geometry = trackGeometry({
+		fractions,
+		ticks: tickFractions,
+		centered: centered && !range
+	});
+	const styles = sliderStyles({
+		size,
+		orientation
+	});
+	if (process.env.NODE_ENV !== "production" && (startIconProp != null || endIconProp != null)) {
+		if (centered) console.warn("Slider: inset icons are not used on centred sliders (M3), so they are ignored.");
+		else if (!iconSize) console.warn("Slider: inset icons need size md, lg or xl (M3), so they are ignored.");
+	}
+	if (process.env.NODE_ENV !== "production" && range && orientation === "vertical") console.warn("RangeSlider: M3 advises against vertical range sliders.");
+	const activeSegment = geometry.segments.find((segment) => segment.icon === "start");
+	const moved = activeSegment && startIcon != null && movedStartIcon(activeSegment, geometry.thumbs[0]);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(data, groupProps),
+		ref: (element) => {
+			rootRef.current = element;
+			directionRef(element);
+		},
+		style,
+		"data-tokens": mergeDataTokens("md-comp-slider", data),
+		"data-size": size,
+		"data-orientation": orientation,
+		"data-disabled": disabled || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsxs("div", {
+			...touchTrackProps,
+			ref: trackRef,
+			className: styles.track({ class: classNames?.track }),
+			children: [
+				geometry.segments.map((segment, index) => /* @__PURE__ */ jsx(Segment, {
+					segment,
+					styles,
+					classNames,
+					icon: segment.icon === "start" ? startIcon : segment.icon === "end" ? endIcon : void 0
+				}, index)),
+				moved && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-moved-icon": "",
+					style: {
+						marginInlineStart: moved.start,
+						inlineSize: moved.size
+					},
+					className: styles.movedIcon({ class: classNames?.icon }),
+					children: startIcon
+				}),
+				geometry.ticks.map((tick, index) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "stop-indicator",
+					"data-active": tick.active || void 0,
+					style: { marginInlineStart: `calc(${tick.at} - 2px)` },
+					className: styles.tick({ class: classNames?.stop })
+				}, index)),
+				geometry.thumbs.map((at, index) => /* @__PURE__ */ jsx(Thumb, {
+					index,
+					at,
+					state,
+					trackRef,
+					name,
+					label: range ? index === 0 ? labels.start : labels.end : void 0,
+					errorMessage,
+					valueLabel,
+					styles,
+					classNames
+				}, index))
+			]
+		})
+	});
+}
+function Segment({ segment, styles, classNames, icon }) {
+	const radius = {
+		borderStartStartRadius: segment.startRadius,
+		borderEndStartRadius: segment.startRadius,
+		borderStartEndRadius: segment.endRadius,
+		borderEndEndRadius: segment.endRadius
+	};
+	const iconBox = /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		style: {
+			inlineSize: iconSizeWhenFits("100%"),
+			marginInlineStart: segment.icon === "start" ? "10px" : "auto",
+			marginInlineEnd: segment.icon === "end" ? "10px" : void 0
+		},
+		className: styles.icon({ class: classNames?.icon }),
+		children: icon
+	});
+	const stop = (at) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "stop-indicator",
+		style: at === "start" ? { marginInlineStart: "calc(var(--m3-slider-corner) - 2px)" } : {
+			marginInlineStart: "auto",
+			marginInlineEnd: "calc(var(--m3-slider-corner) - 2px)"
+		},
+		className: styles.stop({ class: classNames?.stop })
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-tone": segment.tone,
+		"data-slot": `${segment.tone}-track`,
+		style: {
+			marginInlineStart: segment.start,
+			inlineSize: segmentLength(segment),
+			...radius
+		},
+		className: styles.segment({ class: segment.tone === "active" ? classNames?.activeTrack : classNames?.inactiveTrack }),
+		children: [
+			segment.stopAtStart && stop("start"),
+			icon != null && iconBox,
+			segment.stopAtEnd && icon == null && stop("end")
+		]
+	});
+}
+/** Whether each arrow key increases the value (true) or decreases it (false), by direction. */
+const INCREASE_KEYS = {
+	ltr: {
+		ArrowRight: true,
+		ArrowUp: true,
+		ArrowLeft: false,
+		ArrowDown: false
+	},
+	rtl: {
+		ArrowLeft: true,
+		ArrowUp: true,
+		ArrowRight: false,
+		ArrowDown: false
+	}
+};
+function Thumb({ index, at, state, trackRef, name, label, errorMessage, valueLabel, styles, classNames }) {
+	const inputRef = useRef(null);
+	const { thumbProps, inputProps, isDragging } = useSliderThumb({
+		index,
+		trackRef,
+		inputRef,
+		name,
+		"aria-label": label,
+		"aria-errormessage": errorMessage
+	}, state);
+	const thumbInputProps = {
+		...inputProps,
+		"aria-describedby": inputProps["aria-describedby"] || void 0,
+		"aria-details": inputProps["aria-details"] || void 0
+	};
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { direction } = useLocale();
+	const [spaceHeld, setSpaceHeld] = useState(false);
+	const intervalKeys = {
+		onKeyDown: (event) => {
+			if (event.key === " ") {
+				event.preventDefault();
+				setSpaceHeld(true);
+				return;
+			}
+			const increase = INCREASE_KEYS[direction][event.key];
+			if (!spaceHeld || increase === void 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			state.setThumbDragging(index, true);
+			if (increase) state.incrementThumb(index, state.pageSize);
+			else state.decrementThumb(index, state.pageSize);
+			state.setThumbDragging(index, false);
+		},
+		onKeyUp: (event) => {
+			if (event.key === " ") setSpaceHeld(false);
+		},
+		onBlur: () => setSpaceHeld(false)
+	};
+	const active = isDragging || isFocusVisible;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		...thumbProps,
+		"data-thumb": index,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-dragging": isDragging || void 0,
+		style: { marginInlineStart: `calc(${at} - 2px)` },
+		className: styles.thumb({ class: classNames?.thumb }),
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "handle",
+			"data-active": active || void 0,
+			className: styles.handle({ class: classNames?.handle })
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			...mergeProps(thumbInputProps, focusProps, intervalKeys)
+		}) })]
+	}), valueLabel && (isDragging || isFocusVisible) && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		style: { marginInlineStart: at },
+		className: styles.labelAnchor(),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "value-indicator",
+			className: styles.label({ class: classNames?.label }),
+			children: state.getThumbValueLabel(index)
+		})
+	})] });
+}
+//#endregion
+export { RangeSlider, Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useLocale,\n  useNumberFormatter,\n  useObjectRef,\n  useSlider,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\nimport { useSliderState, type SliderState } from 'react-stately';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { splitRootProps, type RootDOMProps } from '../../utils/root-props';\nimport { useTouchTrack } from './use-touch-track';\nimport {\n  iconSizeWhenFits,\n  movedStartIcon,\n  segmentLength,\n  trackGeometry,\n  type TrackSegment,\n} from './slider-geometry';\nimport { sliderStyles, type SliderOrientation, type SliderSize } from './slider-styles';\n\nexport interface SliderClassNames {\n  /** The outer element. */\n  root?: string;\n  /** The track, holding the active and inactive segments and the stop indicators. */\n  track?: string;\n  /** Each active track segment (the filled part, from the start or the centre). */\n  activeTrack?: string;\n  /** Each inactive track segment. */\n  inactiveTrack?: string;\n  /** The stop indicators: at the track's ends, and at every step with `ticks`. */\n  stop?: string;\n  /** The inset icons (`leadingIcon`, `trailingIcon`). */\n  icon?: string;\n  /** Each thumb, the pressable area around its handle. */\n  thumb?: string;\n  /** The handle bar drawn inside each thumb. */\n  handle?: string;\n  /** The value indicator above a thumb (`valueLabel`). */\n  label?: string;\n}\n\n/** A slider needs a name: `aria-label`, or `aria-labelledby` pointing at a visible label. */\ntype Naming =\n  | {\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the visible label that names the slider. */\n      'aria-labelledby': string;\n    };\n\ninterface SliderCommonProps extends RootDOMProps {\n  /** The track's thickness, from XS (a 16px track) to XL. @default \"xs\" */\n  size?: SliderSize;\n  /**\n   * The direction the slider runs. Vertical sliders run bottom to top and default to 240px\n   * tall. @default \"horizontal\"\n   */\n  orientation?: SliderOrientation;\n  /** The lowest value. @default 0 */\n  min?: number;\n  /** The highest value. @default 100 */\n  max?: number;\n  /** The amount the value changes by in one step. @default 1 */\n  step?: number;\n  /** Discrete: show a stop indicator at every step (use a coarse `step`). @default false */\n  ticks?: boolean;\n  /** Turns the slider off: it can't be moved or focused. @default false */\n  disabled?: boolean;\n  /** Show the value above the thumb while it is dragged or keyboard-focused. @default false */\n  valueLabel?: boolean;\n  /** Formats the value for the value indicator and assistive tech. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** Form field name (one hidden input per thumb). */\n  name?: string;\n  /** The id of the slider's root, its `group` (an error summary can link to it). */\n  id?: string;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: SliderClassNames;\n  /** `data-*` attributes, like the other DOM attributes, go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport type SliderProps = SliderCommonProps &\n  Naming & {\n    /** The value (controlled). */\n    value?: number;\n    /** The initial value when uncontrolled. @default min */\n    defaultValue?: number;\n    /** Called as the value changes, while dragging too. */\n    onChange?: (value: number) => void;\n    /** Called when the user stops dragging or releases a key. */\n    onChangeEnd?: (value: number) => void;\n    /**\n     * Fill the track from its centre (for values around a midpoint). M3 doesn't use inset\n     * icons on centred sliders, so `leadingIcon` and `trailingIcon` are ignored. @default false\n     */\n    centered?: boolean;\n    /**\n     * An icon inside the active track at its start (sizes md and up; ignored, with a dev\n     * warning, on xs and sm). When the active track is too short for it, it moves to the\n     * start of the inactive track.\n     */\n    leadingIcon?: ReactNode;\n    /** An icon inside the inactive track at its end (sizes md and up; ignored on xs and sm). */\n    trailingIcon?: ReactNode;\n  };\n\nexport interface RangeSliderLabels {\n  /** Name of the start thumb. @default \"Minimum\" */\n  start: string;\n  /** Name of the end thumb. @default \"Maximum\" */\n  end: string;\n}\n\nconst DEFAULT_LABELS: RangeSliderLabels = { start: 'Minimum', end: 'Maximum' };\n\nexport type RangeSliderProps = SliderCommonProps &\n  Naming & {\n    /** The range, as `[start, end]` (controlled). */\n    value?: [number, number];\n    /** The initial range when uncontrolled. @default [min, max] */\n    defaultValue?: [number, number];\n    /** Called as the range changes, while dragging too. */\n    onChange?: (value: [number, number]) => void;\n    /** Called when the user stops dragging or releases a key. */\n    onChangeEnd?: (value: [number, number]) => void;\n    /** Words the range slider announces (its thumbs' names), with English defaults. */\n    labels?: Partial<RangeSliderLabels>;\n  };\n\n/**\n * M3 Expressive slider: XS–XL sizes, horizontal or vertical, continuous or discrete with\n * stop indicators, optionally centred, with inset icons and a value indicator. Arrow keys,\n * Page Up / Down and Home / End adjust it (mirrored in RTL).\n *\n * @example\n * <Slider aria-label=\"Volume\" size=\"md\" leadingIcon={<VolumeIcon />} defaultValue={40} />\n */\nexport function Slider(props: SliderProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <SliderRoot {...props} range={false} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\n/**\n * M3 Expressive range slider: two thumbs selecting a range, with the same sizes,\n * orientations and discrete stops as {@link Slider}.\n *\n * @example\n * <RangeSlider aria-label=\"Price\" defaultValue={[20, 80]} />\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <SliderRoot {...props} range directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\ntype RootProps = (SliderProps | RangeSliderProps) & {\n  range: boolean;\n  directionRef: (element: HTMLElement | null) => void;\n};\n\nfunction SliderRoot(props: RootProps) {\n  const {\n    size = 'xs',\n    orientation = 'horizontal',\n    min = 0,\n    max = 100,\n    step = 1,\n    ticks = false,\n    disabled = false,\n    valueLabel = false,\n    formatOptions,\n    name,\n    id,\n    ref,\n    className,\n    style,\n    classNames,\n    range,\n    directionRef,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    ...rest\n  } = props;\n  const {\n    centered = false,\n    leadingIcon: startIconProp,\n    trailingIcon: endIconProp,\n  } = props as SliderProps;\n  // M3: only M, L and XL standard sliders take inset icons (\"Avoid adding inset icons to XS\n  // or S\"; none on centred sliders).\n  const iconSize = size === 'md' || size === 'lg' || size === 'xl';\n  const startIcon = iconSize && !centered ? startIconProp : undefined;\n  const endIcon = iconSize && !centered ? endIconProp : undefined;\n  const labels = { ...DEFAULT_LABELS, ...(props as RangeSliderProps).labels };\n  // The root is the slider's group: its DOM attributes join the hook's.\n  const { root: data, rest: labelling } = splitRootProps(rest);\n  // The naming attributes: the name goes to the group and each thumb (React Aria), and the\n  // description, details and error message to each thumb's input, which takes focus.\n  const {\n    'aria-label': label,\n    'aria-labelledby': labelledBy,\n    'aria-describedby': describedBy,\n    'aria-details': details,\n    'aria-errormessage': errorMessage,\n  } = labelling as {\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-details'?: string;\n    'aria-errormessage'?: string;\n  };\n\n  const numberFormatter = useNumberFormatter(formatOptions);\n  // React Stately works with arrays; a single slider wraps and unwraps its number.\n  const wrap = (v: number | [number, number] | undefined) =>\n    v === undefined ? undefined : Array.isArray(v) ? v : [v];\n  const unwrap = (v: number[]) => (range ? (v as [number, number]) : v[0]!);\n  const ariaProps = {\n    id,\n    minValue: min,\n    maxValue: max,\n    step,\n    orientation,\n    isDisabled: disabled,\n    'aria-label': label,\n    'aria-labelledby': labelledBy,\n    'aria-describedby': describedBy,\n    'aria-details': details,\n    value: wrap(value),\n    defaultValue: wrap(defaultValue) ?? (range ? [min, max] : [min]),\n    onChange: onChange && ((v: number[]) => (onChange as (x: unknown) => void)(unwrap(v))),\n    onChangeEnd: onChangeEnd && ((v: number[]) => (onChangeEnd as (x: unknown) => void)(unwrap(v))),\n  };\n  const state = useSliderState({ ...ariaProps, numberFormatter });\n  const rootRef = useObjectRef(ref);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { groupProps, trackProps } = useSlider(ariaProps, state, trackRef);\n  const { direction } = useLocale();\n  const count = Math.round((max - min) / step);\n  const touchTrackProps = useTouchTrack(trackProps, {\n    state,\n    trackRef,\n    orientation,\n    direction,\n    disabled,\n    discrete: ticks && count > 0,\n  });\n\n  const tickFractions =\n    ticks && count > 0 ? Array.from({ length: count + 1 }, (_, i) => i / count) : [];\n  const fractions = state.values.map((_, index) => state.getThumbPercent(index));\n  const geometry = trackGeometry({ fractions, ticks: tickFractions, centered: centered && !range });\n  const styles = sliderStyles({ size, orientation });\n  if (process.env.NODE_ENV !== 'production' && (startIconProp != null || endIconProp != null)) {\n    if (centered) {\n      console.warn(\n        'Slider: inset icons are not used on centred sliders (M3), so they are ignored.',\n      );\n    } else if (!iconSize) {\n      console.warn('Slider: inset icons need size md, lg or xl (M3), so they are ignored.');\n    }\n  }\n  if (process.env.NODE_ENV !== 'production' && range && orientation === 'vertical') {\n    console.warn('RangeSlider: M3 advises against vertical range sliders.');\n  }\n  const activeSegment = geometry.segments.find((segment) => segment.icon === 'start');\n  const moved =\n    activeSegment && startIcon != null && movedStartIcon(activeSegment, geometry.thumbs[0]!);\n\n  return (\n    <div\n      {...mergeProps(data, groupProps)}\n      ref={(element) => {\n        rootRef.current = element;\n        directionRef(element);\n      }}\n      style={style}\n      data-tokens={mergeDataTokens('md-comp-slider', data)}\n      data-size={size}\n      data-orientation={orientation}\n      data-disabled={disabled || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <div\n        {...touchTrackProps}\n        ref={trackRef}\n        className={styles.track({ class: classNames?.track })}\n      >\n        {geometry.segments.map((segment, index) => (\n          <Segment\n            key={index}\n            segment={segment}\n            styles={styles}\n            classNames={classNames}\n            icon={\n              segment.icon === 'start' ? startIcon : segment.icon === 'end' ? endIcon : undefined\n            }\n          />\n        ))}\n        {moved && (\n          <span\n            aria-hidden=\"true\"\n            data-moved-icon=\"\"\n            style={{ marginInlineStart: moved.start, inlineSize: moved.size }}\n            className={styles.movedIcon({ class: classNames?.icon })}\n          >\n            {startIcon}\n          </span>\n        )}\n        {geometry.ticks.map((tick, index) => (\n          <span\n            key={index}\n            aria-hidden=\"true\"\n            data-slot=\"stop-indicator\"\n            data-active={tick.active || undefined}\n            style={{ marginInlineStart: `calc(${tick.at} - 2px)` }}\n            className={styles.tick({ class: classNames?.stop })}\n          />\n        ))}\n        {geometry.thumbs.map((at, index) => (\n          <Thumb\n            key={index}\n            index={index as 0 | 1}\n            at={at}\n            state={state}\n            trackRef={trackRef}\n            name={name}\n            label={range ? (index === 0 ? labels.start : labels.end) : undefined}\n            errorMessage={errorMessage}\n            valueLabel={valueLabel}\n            styles={styles}\n            classNames={classNames}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction Segment({\n  segment,\n  styles,\n  classNames,\n  icon,\n}: {\n  segment: TrackSegment;\n  styles: ReturnType<typeof sliderStyles>;\n  classNames: SliderClassNames | undefined;\n  icon: ReactNode;\n}) {\n  const radius = {\n    borderStartStartRadius: segment.startRadius,\n    borderEndStartRadius: segment.startRadius,\n    borderStartEndRadius: segment.endRadius,\n    borderEndEndRadius: segment.endRadius,\n  };\n  // Inset icons sit 10px inside and show only when the segment fits them (MDC).\n  const iconBox = (\n    <span\n      aria-hidden=\"true\"\n      style={{\n        inlineSize: iconSizeWhenFits('100%'),\n        marginInlineStart: segment.icon === 'start' ? '10px' : 'auto',\n        marginInlineEnd: segment.icon === 'end' ? '10px' : undefined,\n      }}\n      className={styles.icon({ class: classNames?.icon })}\n    >\n      {icon}\n    </span>\n  );\n  // Stop indicators sit a corner's length in from the track's ends.\n  const stop = (at: 'start' | 'end') => (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"stop-indicator\"\n      style={\n        at === 'start'\n          ? { marginInlineStart: 'calc(var(--m3-slider-corner) - 2px)' }\n          : { marginInlineStart: 'auto', marginInlineEnd: 'calc(var(--m3-slider-corner) - 2px)' }\n      }\n      className={styles.stop({ class: classNames?.stop })}\n    />\n  );\n  return (\n    <span\n      data-tone={segment.tone}\n      data-slot={`${segment.tone}-track`}\n      style={{ marginInlineStart: segment.start, inlineSize: segmentLength(segment), ...radius }}\n      className={styles.segment({\n        class: segment.tone === 'active' ? classNames?.activeTrack : classNames?.inactiveTrack,\n      })}\n    >\n      {segment.stopAtStart && stop('start')}\n      {icon != null && iconBox}\n      {/* An end icon takes the stop indicator's place. */}\n      {segment.stopAtEnd && icon == null && stop('end')}\n    </span>\n  );\n}\n\n/** Whether each arrow key increases the value (true) or decreases it (false), by direction. */\nconst INCREASE_KEYS: Record<'ltr' | 'rtl', Record<string, boolean>> = {\n  ltr: { ArrowRight: true, ArrowUp: true, ArrowLeft: false, ArrowDown: false },\n  rtl: { ArrowLeft: true, ArrowUp: true, ArrowRight: false, ArrowDown: false },\n};\n\nfunction Thumb({\n  index,\n  at,\n  state,\n  trackRef,\n  name,\n  label,\n  errorMessage,\n  valueLabel,\n  styles,\n  classNames,\n}: {\n  index: 0 | 1;\n  at: string;\n  state: SliderState;\n  trackRef: RefObject<HTMLDivElement | null>;\n  name?: string;\n  label?: string;\n  errorMessage?: string;\n  valueLabel: boolean;\n  styles: ReturnType<typeof sliderStyles>;\n  classNames?: SliderClassNames;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { thumbProps, inputProps, isDragging } = useSliderThumb(\n    { index, trackRef, inputRef, name, 'aria-label': label, 'aria-errormessage': errorMessage },\n    state,\n  );\n  // React Aria joins the description's ids into an empty string when there are none.\n  const thumbInputProps = {\n    ...inputProps,\n    'aria-describedby': inputProps['aria-describedby'] || undefined,\n    'aria-details': inputProps['aria-details'] || undefined,\n  };\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { direction } = useLocale();\n  // M3: \"Space & Arrows — Increase and decrease the value by one interval\", so arrows step\n  // by React Aria's page size while Space is held (as Shift + arrows already do).\n  const [spaceHeld, setSpaceHeld] = useState(false);\n  const intervalKeys = {\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === ' ') {\n        event.preventDefault();\n        setSpaceHeld(true);\n        return;\n      }\n      const increase = INCREASE_KEYS[direction][event.key];\n      if (!spaceHeld || increase === undefined) return;\n      event.preventDefault();\n      event.stopPropagation();\n      state.setThumbDragging(index, true);\n      if (increase) state.incrementThumb(index, state.pageSize);\n      else state.decrementThumb(index, state.pageSize);\n      state.setThumbDragging(index, false);\n    },\n    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === ' ') setSpaceHeld(false);\n    },\n    onBlur: () => setSpaceHeld(false),\n  };\n  // The handle narrows to 2px while it is pressed or dragged (M3), or keyboard-focused.\n  const active = isDragging || isFocusVisible;\n  return (\n    <>\n      <div\n        {...thumbProps}\n        data-thumb={index}\n        data-focus-visible={isFocusVisible || undefined}\n        data-dragging={isDragging || undefined}\n        style={{ marginInlineStart: `calc(${at} - 2px)` }}\n        className={styles.thumb({ class: classNames?.thumb })}\n      >\n        <span\n          data-slot=\"handle\"\n          data-active={active || undefined}\n          className={styles.handle({ class: classNames?.handle })}\n        />\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(thumbInputProps, focusProps, intervalKeys)} />\n        </VisuallyHidden>\n      </div>\n      {valueLabel && (isDragging || isFocusVisible) && (\n        <span aria-hidden=\"true\" style={{ marginInlineStart: at }} className={styles.labelAnchor()}>\n          <span data-slot=\"value-indicator\" className={styles.label({ class: classNames?.label })}>\n            {state.getThumbValueLabel(index)}\n          </span>\n        </span>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/slider/slider-geometry.js

@@ -0,0 +1,138 @@
+//#region src/components/slider/slider-geometry.ts
+const CORNER = "var(--m3-slider-corner)";
+const gap = (thumb) => `var(--m3-slider-gap-${thumb})`;
+const halfAndGap = (thumb) => `(2px + ${gap(thumb)})`;
+/**
+* Where a fraction sits: Compose spreads discrete values between the corners, except at
+* the first and last ticks, so the thumb lines up with the stop indicators.
+*/
+function positionOf(fraction, ticks) {
+	const onEnd = fraction === ticks[0] || fraction === ticks[ticks.length - 1];
+	return ticks.length > 0 && !onEnd ? `calc(${CORNER} + (100% - 2 * ${CORNER}) * ${fraction})` : `calc(100% * ${fraction})`;
+}
+/** The CSS length of a segment, or 0 when Compose wouldn't draw it. */
+function segmentLength(segment) {
+	const length = `(${segment.end} - ${segment.start})`;
+	return `max(0px, min(${length}, max(0px, (${length} - ${segment.threshold}) * 10000)))`;
+}
+/** Shows an inset icon when `length` fits it plus 10px on each side, else 0 (MDC). */
+const ICON = "var(--m3-slider-icon, 0px)";
+const iconSizeWhenFits = (length) => `min(${ICON}, max(0px, (${length} - ${ICON} - 20px) * 10000))`;
+/**
+* Where the start icon goes when the active track is too short for it (M3: "the icon moves
+* to the inactive track"): 10px after the inactive track's start, shown only while the
+* active segment (`active`, from {@link trackGeometry}) is shorter than the icon plus 20px.
+*/
+function movedStartIcon(active, thumb) {
+	return {
+		start: `calc(${thumb} + ${halfAndGap(0)} + 10px)`,
+		size: `min(${ICON}, max(0px, (${ICON} + 20px - ${segmentLength(active)}) * 10000))`
+	};
+}
+function trackGeometry({ fractions, ticks, centered }) {
+	const discrete = ticks.length > 0;
+	const thumbs = fractions.map((fraction) => positionOf(fraction, ticks));
+	const segments = [];
+	let activeRange;
+	if (fractions.length === 2) {
+		const [start, end] = thumbs;
+		segments.push({
+			tone: "inactive",
+			start: "0px",
+			end: `calc(${start} - ${halfAndGap(0)})`,
+			threshold: CORNER,
+			startRadius: CORNER,
+			endRadius: "2px",
+			stopAtStart: true
+		}, {
+			tone: "active",
+			start: `calc(${start} + ${halfAndGap(0)})`,
+			end: `calc(${end} - ${halfAndGap(1)})`,
+			threshold: "2px",
+			startRadius: "2px",
+			endRadius: "2px"
+		}, {
+			tone: "inactive",
+			start: `calc(${end} + ${halfAndGap(1)})`,
+			end: "100%",
+			threshold: CORNER,
+			startRadius: "2px",
+			endRadius: CORNER,
+			stopAtEnd: true
+		});
+		activeRange = [fractions[0], fractions[1]];
+	} else if (centered) {
+		const fraction = fractions[0];
+		const thumb = thumbs[0];
+		const threshold = discrete ? CORNER : "0px";
+		const activeThreshold = discrete ? "2px" : "0px";
+		const startGap = fraction <= .5 ? halfAndGap(0) : gap(0);
+		const endGap = fraction >= .5 ? halfAndGap(0) : gap(0);
+		segments.push({
+			tone: "inactive",
+			start: "0px",
+			end: fraction < .5 ? `calc(${thumb} - ${startGap})` : `calc(50% - ${startGap})`,
+			threshold,
+			startRadius: CORNER,
+			endRadius: "2px",
+			stopAtStart: true
+		});
+		segments.push({
+			tone: "active",
+			start: fraction < .5 ? `calc(${thumb} + ${startGap})` : "50%",
+			end: fraction > .5 ? `calc(${thumb} - ${endGap})` : "50%",
+			threshold: activeThreshold,
+			startRadius: "2px",
+			endRadius: "2px"
+		});
+		segments.push({
+			tone: "inactive",
+			start: fraction > .5 ? `calc(${thumb} + ${endGap})` : `calc(50% + ${endGap})`,
+			end: "100%",
+			threshold,
+			startRadius: "2px",
+			endRadius: CORNER,
+			stopAtEnd: true
+		});
+		activeRange = [Math.min(fraction, .5), Math.max(fraction, .5)];
+	} else {
+		const thumb = thumbs[0];
+		segments.push({
+			tone: "active",
+			start: "0px",
+			end: `calc(${thumb} - ${halfAndGap(0)})`,
+			threshold: CORNER,
+			startRadius: CORNER,
+			endRadius: "2px",
+			icon: "start"
+		}, {
+			tone: "inactive",
+			start: `calc(${thumb} + ${halfAndGap(0)})`,
+			end: "100%",
+			threshold: CORNER,
+			startRadius: "2px",
+			endRadius: CORNER,
+			stopAtEnd: true,
+			icon: "end"
+		});
+		activeRange = [0, fractions[0]];
+	}
+	const hasStartStop = centered || fractions.length === 2;
+	const near = (a, b) => Math.abs(a - b) < 1e-9;
+	return {
+		segments,
+		ticks: ticks.filter((tick, index) => {
+			if (index === ticks.length - 1 || hasStartStop && index === 0) return false;
+			if (fractions.some((fraction) => near(fraction, tick))) return false;
+			return !(centered && near(tick, .5));
+		}).map((tick) => ({
+			at: `calc(${CORNER} + (100% - 2 * ${CORNER}) * ${tick})`,
+			active: tick > activeRange[0] - 1e-9 && tick < activeRange[1] + 1e-9
+		})),
+		thumbs
+	};
+}
+//#endregion
+export { CORNER, iconSizeWhenFits, movedStartIcon, positionOf, segmentLength, trackGeometry };
+
+//# sourceMappingURL=slider-geometry.js.map

package/dist/components/slider/slider-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-geometry.js","names":[],"sources":["../../../src/components/slider/slider-geometry.ts"],"sourcesContent":["/*\n * Track geometry, ported from Compose's `SliderDefaults.drawTrack` (Slider.kt) and the\n * thumb placement in `SliderImpl`, as CSS length expressions along the track's inline axis\n * (0 = the minimum end, 100% = the maximum end). Expressions use custom properties set by\n * the slider: `--m3-slider-corner` (the track corner) and `--m3-slider-gap-0` / `-1` (the\n * gap between each thumb and the track, 6px, 10px while focused). The thumb is 4px wide,\n * so a thumb's half plus its gap is `2px + gap`.\n *\n * Pure functions, so they can be unit-tested against Compose's drawing rules.\n */\n\nexport const CORNER = 'var(--m3-slider-corner)';\nconst gap = (thumb: 0 | 1) => `var(--m3-slider-gap-${thumb})`;\nconst halfAndGap = (thumb: 0 | 1) => `(2px + ${gap(thumb)})`;\n\nexport interface TrackSegment {\n  tone: 'active' | 'inactive';\n  /** Start and end along the track. */\n  start: string;\n  end: string;\n  /** Compose draws a segment only when it is longer than this. */\n  threshold: string;\n  startRadius: string;\n  endRadius: string;\n  /** Draw the track's stop indicator at this segment's start / end. */\n  stopAtStart?: boolean;\n  stopAtEnd?: boolean;\n  /** Which inset icon this segment holds (active start / inactive end). */\n  icon?: 'start' | 'end';\n}\n\nexport interface TrackTick {\n  at: string;\n  active: boolean;\n}\n\nexport interface SliderGeometryInput {\n  /** Thumb positions as fractions (one, or two for a range). */\n  fractions: number[];\n  /** Tick fractions (discrete sliders), including both ends; empty when continuous. */\n  ticks: number[];\n  centered: boolean;\n}\n\n/**\n * Where a fraction sits: Compose spreads discrete values between the corners, except at\n * the first and last ticks, so the thumb lines up with the stop indicators.\n */\nexport function positionOf(fraction: number, ticks: number[]): string {\n  const onEnd = fraction === ticks[0] || fraction === ticks[ticks.length - 1];\n  return ticks.length > 0 && !onEnd\n    ? `calc(${CORNER} + (100% - 2 * ${CORNER}) * ${fraction})`\n    : `calc(100% * ${fraction})`;\n}\n\n/** The CSS length of a segment, or 0 when Compose wouldn't draw it. */\nexport function segmentLength(segment: TrackSegment): string {\n  const length = `(${segment.end} - ${segment.start})`;\n  // min(length, max(0, (length − threshold) × 10⁴)) is the length when it exceeds the\n  // threshold and 0 otherwise.\n  return `max(0px, min(${length}, max(0px, (${length} - ${segment.threshold}) * 10000)))`;\n}\n\n/** Shows an inset icon when `length` fits it plus 10px on each side, else 0 (MDC). */\nconst ICON = 'var(--m3-slider-icon, 0px)';\nexport const iconSizeWhenFits = (length: string) =>\n  `min(${ICON}, max(0px, (${length} - ${ICON} - 20px) * 10000))`;\n\n/**\n * Where the start icon goes when the active track is too short for it (M3: \"the icon moves\n * to the inactive track\"): 10px after the inactive track's start, shown only while the\n * active segment (`active`, from {@link trackGeometry}) is shorter than the icon plus 20px.\n */\nexport function movedStartIcon(active: TrackSegment, thumb: string) {\n  return {\n    start: `calc(${thumb} + ${halfAndGap(0)} + 10px)`,\n    size: `min(${ICON}, max(0px, (${ICON} + 20px - ${segmentLength(active)}) * 10000))`,\n  };\n}\n\nexport function trackGeometry({ fractions, ticks, centered }: SliderGeometryInput): {\n  segments: TrackSegment[];\n  ticks: TrackTick[];\n  thumbs: string[];\n} {\n  const discrete = ticks.length > 0;\n  const thumbs = fractions.map((fraction) => positionOf(fraction, ticks));\n  const segments: TrackSegment[] = [];\n  let activeRange: [number, number];\n\n  if (fractions.length === 2) {\n    const [start, end] = thumbs as [string, string];\n    segments.push(\n      {\n        tone: 'inactive',\n        start: '0px',\n        end: `calc(${start} - ${halfAndGap(0)})`,\n        threshold: CORNER,\n        startRadius: CORNER,\n        endRadius: '2px',\n        stopAtStart: true,\n      },\n      {\n        tone: 'active',\n        start: `calc(${start} + ${halfAndGap(0)})`,\n        end: `calc(${end} - ${halfAndGap(1)})`,\n        threshold: '2px',\n        startRadius: '2px',\n        endRadius: '2px',\n      },\n      {\n        tone: 'inactive',\n        start: `calc(${end} + ${halfAndGap(1)})`,\n        end: '100%',\n        threshold: CORNER,\n        startRadius: '2px',\n        endRadius: CORNER,\n        stopAtEnd: true,\n      },\n    );\n    activeRange = [fractions[0]!, fractions[1]!];\n  } else if (centered) {\n    const fraction = fractions[0]!;\n    const thumb = thumbs[0]!;\n    // Compose shrinks corners in a centred track, so segments draw down to 0 length\n    // (or the corner, with ticks). The gap at the centre omits the thumb's half.\n    const threshold = discrete ? CORNER : '0px';\n    const activeThreshold = discrete ? '2px' : '0px';\n    const startGap = fraction <= 0.5 ? halfAndGap(0) : gap(0);\n    const endGap = fraction >= 0.5 ? halfAndGap(0) : gap(0);\n    segments.push({\n      tone: 'inactive',\n      start: '0px',\n      end: fraction < 0.5 ? `calc(${thumb} - ${startGap})` : `calc(50% - ${startGap})`,\n      threshold,\n      startRadius: CORNER,\n      endRadius: '2px',\n      stopAtStart: true,\n    });\n    segments.push({\n      tone: 'active',\n      start: fraction < 0.5 ? `calc(${thumb} + ${startGap})` : '50%',\n      end: fraction > 0.5 ? `calc(${thumb} - ${endGap})` : '50%',\n      threshold: activeThreshold,\n      startRadius: '2px',\n      endRadius: '2px',\n    });\n    segments.push({\n      tone: 'inactive',\n      start: fraction > 0.5 ? `calc(${thumb} + ${endGap})` : `calc(50% + ${endGap})`,\n      end: '100%',\n      threshold,\n      startRadius: '2px',\n      endRadius: CORNER,\n      stopAtEnd: true,\n    });\n    activeRange = [Math.min(fraction, 0.5), Math.max(fraction, 0.5)];\n  } else {\n    const thumb = thumbs[0]!;\n    segments.push(\n      {\n        tone: 'active',\n        start: '0px',\n        end: `calc(${thumb} - ${halfAndGap(0)})`,\n        threshold: CORNER,\n        startRadius: CORNER,\n        endRadius: '2px',\n        icon: 'start',\n      },\n      {\n        tone: 'inactive',\n        start: `calc(${thumb} + ${halfAndGap(0)})`,\n        end: '100%',\n        threshold: CORNER,\n        startRadius: '2px',\n        endRadius: CORNER,\n        stopAtEnd: true,\n        icon: 'end',\n      },\n    );\n    activeRange = [0, fractions[0]!];\n  }\n\n  // Ticks: the stop indicators replace the last tick (and the first, when both ends have\n  // one); ticks under a thumb, or at the centre of a centred track, are left out.\n  const hasStartStop = centered || fractions.length === 2;\n  const near = (a: number, b: number) => Math.abs(a - b) < 1e-9;\n  const trackTicks = ticks\n    .filter((tick, index) => {\n      if (index === ticks.length - 1 || (hasStartStop && index === 0)) return false;\n      if (fractions.some((fraction) => near(fraction, tick))) return false;\n      return !(centered && near(tick, 0.5));\n    })\n    .map((tick) => ({\n      at: `calc(${CORNER} + (100% - 2 * ${CORNER}) * ${tick})`,\n      active: tick > activeRange[0] - 1e-9 && tick < activeRange[1] + 1e-9,\n    }));\n\n  return { segments, ticks: trackTicks, thumbs };\n}\n"],"mappings":"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"}

package/dist/components/slider/slider-styles.d.ts

@@ -0,0 +1,133 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/slider/slider-styles.d.ts
+/** Variant definitions for {@link Slider} and {@link RangeSlider}; extend them to add sizes. */
+export declare const sliderStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      root: string;
+      track: string;
+    };
+    vertical: {
+      root: string;
+      track: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  track: string[];
+  segment: string[];
+  stop: string[];
+  tick: string[];
+  icon: string[];
+  movedIcon: string[];
+  thumb: string[];
+  handle: string[];
+  labelAnchor: string;
+  label: string[];
+}, undefined, {
+  orientation: {
+    horizontal: {
+      root: string;
+      track: string;
+    };
+    vertical: {
+      root: string;
+      track: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  track: string[];
+  segment: string[];
+  stop: string[];
+  tick: string[];
+  icon: string[];
+  movedIcon: string[];
+  thumb: string[];
+  handle: string[];
+  labelAnchor: string;
+  label: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      root: string;
+      track: string;
+    };
+    vertical: {
+      root: string;
+      track: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  track: string[];
+  segment: string[];
+  stop: string[];
+  tick: string[];
+  icon: string[];
+  movedIcon: string[];
+  thumb: string[];
+  handle: string[];
+  labelAnchor: string;
+  label: string[];
+}>>;
+/**
+ * The variants of {@link sliderStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type SliderStyleProps = VariantProps<typeof sliderStyles>;
+export type SliderSize = NonNullable<SliderStyleProps['size']>;
+export type SliderOrientation = NonNullable<SliderStyleProps['orientation']>;
+//#endregion
+//# sourceMappingURL=slider-styles.d.ts.map