@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/slider/slider-arithmetic.mjs

@@ -0,0 +1,120 @@
+//#region src/slider/slider-arithmetic.ts
+/** Number of decimal places of `n` as written (`0.1` → 1, `1e-7` → 7, `5` → 0). */
+function decimalsOf(n) {
+	if (!Number.isFinite(n)) return 0;
+	const text = String(n);
+	const exponent = /e-(\d+)$/i.exec(text);
+	if (exponent !== null) {
+		const mantissa = text.slice(0, exponent.index);
+		const dot = mantissa.indexOf(".");
+		return Number(exponent[1]) + (dot === -1 ? 0 : mantissa.length - dot - 1);
+	}
+	const dot = text.indexOf(".");
+	return dot === -1 ? 0 : text.length - dot - 1;
+}
+function roundTo(value, decimals) {
+	if (decimals <= 0) return Math.round(value);
+	return Number(value.toFixed(Math.min(decimals, 100)));
+}
+/** Tolerance for grid computations on binary floating point (`0.3 / 0.1` is `2.9999999999999996`). */
+const EPSILON = 1e-9;
+/**
+* The value a native range with these bounds would hold for `value`: snapped to
+* `min + n × step` (ties toward +∞, the HTML step-mismatch rule), clamped to `[min, max]`, and,
+* when the snapped value exceeds `max`, the last grid point below `max` (so `min 0, max 5,
+* step 2` caps at `4`). Rounded to the decimal places of `step` and `min`. With `max < min` the
+* platform's maximum is `min`.
+*/
+function snap(value, min, max, step) {
+	const decimals = Math.max(decimalsOf(step), decimalsOf(min));
+	if (!Number.isFinite(value)) return min;
+	if (!(max > min)) return roundTo(min, decimals);
+	const lastIndex = Math.floor((max - min) / step + EPSILON);
+	let index = Math.floor((value - min) / step + .5 + EPSILON);
+	if (index > lastIndex) index = lastIndex;
+	if (index < 0) index = 0;
+	return roundTo(min + index * step, decimals);
+}
+/** Whether `max` is reachable: `max - min` is a whole number of steps. */
+function isMaxReachable(min, max, step) {
+	if (!(max > min)) return true;
+	const steps = (max - min) / step;
+	return Math.abs(steps - Math.round(steps)) < EPSILON * Math.max(1, steps);
+}
+/** Whether `value` is a value a native range with these bounds can hold unchanged. */
+function isOnGrid(value, min, max, step) {
+	return Math.abs(snap(value, min, max, step) - value) < EPSILON * Math.max(1, Math.abs(value));
+}
+/** The native `min` / `max` of thumb `index`: the slider's bounds, narrowed by its neighbours. */
+function thumbBounds(values, index, min, max, gap) {
+	const decimals = Math.max(decimalsOf(gap), decimalsOf(min));
+	const before = values[index - 1];
+	const after = values[index + 1];
+	return {
+		lower: before === void 0 ? min : roundTo(before + gap, decimals),
+		upper: after === void 0 ? max : roundTo(after - gap, decimals)
+	};
+}
+/**
+* `next` for thumb `index`, snapped to the slider's grid and clamped between its neighbours
+* (`values[i - 1] + gap`, `values[i + 1] - gap`; on the grid, because every thumb shares `step`
+* and `min`). With no room between the neighbours the thumb keeps its value.
+*/
+function clampToNeighbours(values, index, next, min, max, step, gap) {
+	const { lower, upper } = thumbBounds(values, index, min, max, gap);
+	const current = values[index] ?? next;
+	if (lower > upper + EPSILON) return current;
+	return Math.min(Math.max(snap(next, min, max, step), lower), upper);
+}
+/**
+* The value a native input with these attributes would hold for `value` (each thumb's bounds come
+* from `reference`, the values it is rendered against). Used to compare a DOM read with the shown
+* value: jsdom does not sanitise a range's value, browsers do, and a consumer's off-grid value is
+* rendered as given and sanitised by the DOM.
+*/
+function sanitize(values, reference, min, max, step, gap) {
+	return values.map((value, index) => {
+		const { lower, upper } = thumbBounds(reference, index, min, max, gap);
+		return snap(value, lower, Math.max(lower, upper), step);
+	});
+}
+/** Position of `value` in `[min, max]`, in percent, clamped to `0`–`100`. */
+function percent(value, min, max) {
+	if (!(max > min)) return 0;
+	const fraction = (value - min) / (max - min);
+	return Math.min(100, Math.max(0, fraction * 100));
+}
+/**
+* The thumb a track press at `target` moves: the nearest by value. On a tie (two thumbs at one
+* value, or equidistant thumbs) the thumb that can move toward the pointer: the later one when
+* the pointer is above it, else the earlier one.
+*/
+function nearestThumb(values, target) {
+	let best = 0;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	values.forEach((value, index) => {
+		const distance = Math.abs(value - target);
+		if (distance < bestDistance - EPSILON) {
+			best = index;
+			bestDistance = distance;
+		} else if (Math.abs(distance - bestDistance) <= EPSILON && target > value) best = index;
+	});
+	return best;
+}
+/** The platform's default value: the midpoint, snapped to the grid; `min` when `max < min`. */
+function platformDefault(min, max, step) {
+	if (!(max > min)) return min;
+	return snap(min + (max - min) / 2, min, max, step);
+}
+/** Element-wise equality of two value arrays (within floating-point tolerance). */
+function equalValues(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((value, index) => {
+		const other = b[index];
+		return value === other || Math.abs(value - other) < EPSILON * Math.max(1, Math.abs(value));
+	});
+}
+//#endregion
+export { clampToNeighbours, decimalsOf, equalValues, isMaxReachable, isOnGrid, nearestThumb, percent, platformDefault, sanitize, snap, thumbBounds };
+
+//# sourceMappingURL=slider-arithmetic.mjs.map

package/dist/slider/slider-arithmetic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-arithmetic.mjs","names":[],"sources":["../../src/slider/slider-arithmetic.ts"],"sourcesContent":["// Pure value arithmetic of the Slider (design/components/slider.md 5). No directive: no React,\n// no client-only API. The library computes exactly what the platform's range sanitisation would,\n// so the number it renders is the number the DOM holds and `FormData` posts.\n\n/** Number of decimal places of `n` as written (`0.1` → 1, `1e-7` → 7, `5` → 0). */\nexport function decimalsOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const text = String(n);\n  const exponent = /e-(\\d+)$/i.exec(text);\n  if (exponent !== null) {\n    const mantissa = text.slice(0, exponent.index);\n    const dot = mantissa.indexOf(\".\");\n    return Number(exponent[1]) + (dot === -1 ? 0 : mantissa.length - dot - 1);\n  }\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\nfunction roundTo(value: number, decimals: number): number {\n  if (decimals <= 0) return Math.round(value);\n  // `toFixed` takes at most 100 digits; anything near that is already exact.\n  return Number(value.toFixed(Math.min(decimals, 100)));\n}\n\n/** Tolerance for grid computations on binary floating point (`0.3 / 0.1` is `2.9999999999999996`). */\nconst EPSILON = 1e-9;\n\n/**\n * The value a native range with these bounds would hold for `value`: snapped to\n * `min + n × step` (ties toward +∞, the HTML step-mismatch rule), clamped to `[min, max]`, and,\n * when the snapped value exceeds `max`, the last grid point below `max` (so `min 0, max 5,\n * step 2` caps at `4`). Rounded to the decimal places of `step` and `min`. With `max < min` the\n * platform's maximum is `min`.\n */\nexport function snap(value: number, min: number, max: number, step: number): number {\n  const decimals = Math.max(decimalsOf(step), decimalsOf(min));\n  if (!Number.isFinite(value)) return min;\n  if (!(max > min)) return roundTo(min, decimals);\n  const lastIndex = Math.floor((max - min) / step + EPSILON);\n  let index = Math.floor((value - min) / step + 0.5 + EPSILON);\n  if (index > lastIndex) index = lastIndex;\n  if (index < 0) index = 0;\n  return roundTo(min + index * step, decimals);\n}\n\n/** Whether `max` is reachable: `max - min` is a whole number of steps. */\nexport function isMaxReachable(min: number, max: number, step: number): boolean {\n  if (!(max > min)) return true;\n  const steps = (max - min) / step;\n  return Math.abs(steps - Math.round(steps)) < EPSILON * Math.max(1, steps);\n}\n\n/** Whether `value` is a value a native range with these bounds can hold unchanged. */\nexport function isOnGrid(value: number, min: number, max: number, step: number): boolean {\n  return Math.abs(snap(value, min, max, step) - value) < EPSILON * Math.max(1, Math.abs(value));\n}\n\n/** The native `min` / `max` of thumb `index`: the slider's bounds, narrowed by its neighbours. */\nexport function thumbBounds(\n  values: readonly number[],\n  index: number,\n  min: number,\n  max: number,\n  gap: number,\n): { readonly lower: number; readonly upper: number } {\n  const decimals = Math.max(decimalsOf(gap), decimalsOf(min));\n  const before = values[index - 1];\n  const after = values[index + 1];\n  const lower = before === undefined ? min : roundTo(before + gap, decimals);\n  const upper = after === undefined ? max : roundTo(after - gap, decimals);\n  return { lower, upper };\n}\n\n/**\n * `next` for thumb `index`, snapped to the slider's grid and clamped between its neighbours\n * (`values[i - 1] + gap`, `values[i + 1] - gap`; on the grid, because every thumb shares `step`\n * and `min`). With no room between the neighbours the thumb keeps its value.\n */\nexport function clampToNeighbours(\n  values: readonly number[],\n  index: number,\n  next: number,\n  min: number,\n  max: number,\n  step: number,\n  gap: number,\n): number {\n  const { lower, upper } = thumbBounds(values, index, min, max, gap);\n  const current = values[index] ?? next;\n  if (lower > upper + EPSILON) return current;\n  return Math.min(Math.max(snap(next, min, max, step), lower), upper);\n}\n\n/**\n * The value a native input with these attributes would hold for `value` (each thumb's bounds come\n * from `reference`, the values it is rendered against). Used to compare a DOM read with the shown\n * value: jsdom does not sanitise a range's value, browsers do, and a consumer's off-grid value is\n * rendered as given and sanitised by the DOM.\n */\nexport function sanitize(\n  values: readonly number[],\n  reference: readonly number[],\n  min: number,\n  max: number,\n  step: number,\n  gap: number,\n): readonly number[] {\n  return values.map((value, index) => {\n    const { lower, upper } = thumbBounds(reference, index, min, max, gap);\n    // The native step base is the input's own `min` attribute (the neighbour-adjusted bound).\n    return snap(value, lower, Math.max(lower, upper), step);\n  });\n}\n\n/** Position of `value` in `[min, max]`, in percent, clamped to `0`–`100`. */\nexport function percent(value: number, min: number, max: number): number {\n  if (!(max > min)) return 0;\n  const fraction = (value - min) / (max - min);\n  return Math.min(100, Math.max(0, fraction * 100));\n}\n\n/**\n * The thumb a track press at `target` moves: the nearest by value. On a tie (two thumbs at one\n * value, or equidistant thumbs) the thumb that can move toward the pointer: the later one when\n * the pointer is above it, else the earlier one.\n */\nexport function nearestThumb(values: readonly number[], target: number): number {\n  let best = 0;\n  let bestDistance = Number.POSITIVE_INFINITY;\n  values.forEach((value, index) => {\n    const distance = Math.abs(value - target);\n    if (distance < bestDistance - EPSILON) {\n      best = index;\n      bestDistance = distance;\n    } else if (Math.abs(distance - bestDistance) <= EPSILON && target > value) {\n      best = index;\n    }\n  });\n  return best;\n}\n\n/** The platform's default value: the midpoint, snapped to the grid; `min` when `max < min`. */\nexport function platformDefault(min: number, max: number, step: number): number {\n  if (!(max > min)) return min;\n  return snap(min + (max - min) / 2, min, max, step);\n}\n\n/** Element-wise equality of two value arrays (within floating-point tolerance). */\nexport function equalValues(a: readonly number[], b: readonly number[]): boolean {\n  if (a.length !== b.length) return false;\n  return a.every((value, index) => {\n    const other = b[index] as number;\n    return value === other || Math.abs(value - other) < EPSILON * Math.max(1, Math.abs(value));\n  });\n}\n"],"mappings":";;AAKA,SAAgB,WAAW,GAAmB;CAC5C,IAAI,CAAC,OAAO,SAAS,CAAC,GAAG,OAAO;CAChC,MAAM,OAAO,OAAO,CAAC;CACrB,MAAM,WAAW,YAAY,KAAK,IAAI;CACtC,IAAI,aAAa,MAAM;EACrB,MAAM,WAAW,KAAK,MAAM,GAAG,SAAS,KAAK;EAC7C,MAAM,MAAM,SAAS,QAAQ,GAAG;EAChC,OAAO,OAAO,SAAS,EAAE,KAAK,QAAQ,KAAK,IAAI,SAAS,SAAS,MAAM;CACzE;CACA,MAAM,MAAM,KAAK,QAAQ,GAAG;CAC5B,OAAO,QAAQ,KAAK,IAAI,KAAK,SAAS,MAAM;AAC9C;AAEA,SAAS,QAAQ,OAAe,UAA0B;CACxD,IAAI,YAAY,GAAG,OAAO,KAAK,MAAM,KAAK;CAE1C,OAAO,OAAO,MAAM,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC,CAAC;AACtD;;AAGA,MAAM,UAAU;;;;;;;;AAShB,SAAgB,KAAK,OAAe,KAAa,KAAa,MAAsB;CAClF,MAAM,WAAW,KAAK,IAAI,WAAW,IAAI,GAAG,WAAW,GAAG,CAAC;CAC3D,IAAI,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO;CACpC,IAAI,EAAE,MAAM,MAAM,OAAO,QAAQ,KAAK,QAAQ;CAC9C,MAAM,YAAY,KAAK,OAAO,MAAM,OAAO,OAAO,OAAO;CACzD,IAAI,QAAQ,KAAK,OAAO,QAAQ,OAAO,OAAO,KAAM,OAAO;CAC3D,IAAI,QAAQ,WAAW,QAAQ;CAC/B,IAAI,QAAQ,GAAG,QAAQ;CACvB,OAAO,QAAQ,MAAM,QAAQ,MAAM,QAAQ;AAC7C;;AAGA,SAAgB,eAAe,KAAa,KAAa,MAAuB;CAC9E,IAAI,EAAE,MAAM,MAAM,OAAO;CACzB,MAAM,SAAS,MAAM,OAAO;CAC5B,OAAO,KAAK,IAAI,QAAQ,KAAK,MAAM,KAAK,CAAC,IAAI,UAAU,KAAK,IAAI,GAAG,KAAK;AAC1E;;AAGA,SAAgB,SAAS,OAAe,KAAa,KAAa,MAAuB;CACvF,OAAO,KAAK,IAAI,KAAK,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,CAAC;AAC9F;;AAGA,SAAgB,YACd,QACA,OACA,KACA,KACA,KACoD;CACpD,MAAM,WAAW,KAAK,IAAI,WAAW,GAAG,GAAG,WAAW,GAAG,CAAC;CAC1D,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,QAAQ,OAAO,QAAQ;CAG7B,OAAO;EAAE,OAFK,WAAW,KAAA,IAAY,MAAM,QAAQ,SAAS,KAAK,QAAQ;EAEzD,OADF,UAAU,KAAA,IAAY,MAAM,QAAQ,QAAQ,KAAK,QAAQ;CACjD;AACxB;;;;;;AAOA,SAAgB,kBACd,QACA,OACA,MACA,KACA,KACA,MACA,KACQ;CACR,MAAM,EAAE,OAAO,UAAU,YAAY,QAAQ,OAAO,KAAK,KAAK,GAAG;CACjE,MAAM,UAAU,OAAO,UAAU;CACjC,IAAI,QAAQ,QAAQ,SAAS,OAAO;CACpC,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK;AACpE;;;;;;;AAQA,SAAgB,SACd,QACA,WACA,KACA,KACA,MACA,KACmB;CACnB,OAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,EAAE,OAAO,UAAU,YAAY,WAAW,OAAO,KAAK,KAAK,GAAG;EAEpE,OAAO,KAAK,OAAO,OAAO,KAAK,IAAI,OAAO,KAAK,GAAG,IAAI;CACxD,CAAC;AACH;;AAGA,SAAgB,QAAQ,OAAe,KAAa,KAAqB;CACvE,IAAI,EAAE,MAAM,MAAM,OAAO;CACzB,MAAM,YAAY,QAAQ,QAAQ,MAAM;CACxC,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,WAAW,GAAG,CAAC;AAClD;;;;;;AAOA,SAAgB,aAAa,QAA2B,QAAwB;CAC9E,IAAI,OAAO;CACX,IAAI,eAAe,OAAO;CAC1B,OAAO,SAAS,OAAO,UAAU;EAC/B,MAAM,WAAW,KAAK,IAAI,QAAQ,MAAM;EACxC,IAAI,WAAW,eAAe,SAAS;GACrC,OAAO;GACP,eAAe;EACjB,OAAO,IAAI,KAAK,IAAI,WAAW,YAAY,KAAK,WAAW,SAAS,OAClE,OAAO;CAEX,CAAC;CACD,OAAO;AACT;;AAGA,SAAgB,gBAAgB,KAAa,KAAa,MAAsB;CAC9E,IAAI,EAAE,MAAM,MAAM,OAAO;CACzB,OAAO,KAAK,OAAO,MAAM,OAAO,GAAG,KAAK,KAAK,IAAI;AACnD;;AAGA,SAAgB,YAAY,GAAsB,GAA+B;CAC/E,IAAI,EAAE,WAAW,EAAE,QAAQ,OAAO;CAClC,OAAO,EAAE,OAAO,OAAO,UAAU;EAC/B,MAAM,QAAQ,EAAE;EAChB,OAAO,UAAU,SAAS,KAAK,IAAI,QAAQ,KAAK,IAAI,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,CAAC;CAC3F,CAAC;AACH"}

package/dist/slider/slider-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/slider/slider-context.ts
+const SliderContext = createContext(null);
+function useSliderContext(part) {
+	const context = use(SliderContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Slider.Root.`);
+	return context;
+}
+//#endregion
+export { SliderContext, useSliderContext };
+
+//# sourceMappingURL=slider-context.mjs.map

package/dist/slider/slider-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-context.mjs","names":[],"sources":["../../src/slider/slider-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { RefCallback, RefObject } from \"react\";\nimport type { SliderOrientation, SliderRootState, SliderValue } from \"./slider-root.js\";\n\n/** What the Root routes from an enclosing `Field.Root` to its Thumbs (design 9.4.1). */\nexport interface SliderFieldWiring {\n  /** One thumb only: Thumb `index` 0 merges it into its input ref (registers the input). */\n  readonly inputRef: RefCallback<HTMLElement> | undefined;\n  /** One thumb only: token-merged into Thumb 0's input `aria-describedby`. */\n  readonly describedBy: string | undefined;\n  /** On every Thumb's input (ARIA 1.2: never on the group element). */\n  readonly invalid: \"true\" | \"false\" | undefined;\n  /** On every Thumb's styled element. */\n  readonly dataInvalid: \"\" | undefined;\n  /** The Field's own `name`, for the Thumb's \"name differs from the Field's\" warning. */\n  readonly name: string | undefined;\n}\n\nexport interface SliderContextValue {\n  /** The Root's state, for `Slider.Label` and `Slider.Value`. */\n  readonly state: SliderRootState<SliderValue>;\n  /** The values the thumbs show (design 2.2): `live` while held, else optimistic. */\n  readonly shown: readonly number[];\n  /** `shown` in the prop's shape (`number` or array). */\n  readonly shownValue: number | readonly number[];\n  readonly min: number;\n  readonly max: number;\n  readonly step: number;\n  /** `minStepsBetweenThumbs × step`. */\n  readonly gap: number;\n  readonly orientation: SliderOrientation;\n  readonly disabled: boolean;\n  /** A step or commit dispatched through this Slider is in flight. */\n  readonly pending: boolean;\n  /** The thumb a pointer is captured on, or `null`. */\n  readonly draggingThumb: number | null;\n  /** The thumb the latest step or commit moved, or `null` (platform dispatches). */\n  readonly pendingThumb: number | null;\n  readonly name: string | undefined;\n  readonly form: string | undefined;\n  readonly getAriaValueText: ((value: number, index: number) => string) | undefined;\n  readonly labelId: string;\n  readonly thumbId: (index: number) => string;\n  /** The Track's element: the geometry reference for pointer math. */\n  readonly trackRef: RefObject<HTMLElement | null>;\n\n  /** The native `input` of thumb `index` (React `onChange`): one step. */\n  readonly inputStep: (index: number, value: number, event: Event) => void;\n  /** The native `change` of thumb `index`: the key press's commit. */\n  readonly inputCommit: (index: number, event: Event) => void;\n  /** `keydown` on thumb `index`: ArrowLeft / ArrowRight normalisation of a vertical slider. */\n  readonly inputKeyDown: (index: number, event: KeyboardEvent) => void;\n  /** `pointerdown` on a Thumb (`index`) or on the Track (`null`: the nearest thumb). */\n  readonly beginGesture: (index: number | null, event: PointerEvent, element: HTMLElement) => void;\n  /** Called by each Thumb from a layout effect; returns the unregistration. */\n  readonly registerThumb: (index: number, input: HTMLInputElement) => () => void;\n  /** Called by each Label from a layout effect; returns the unregistration. */\n  readonly registerLabel: () => () => void;\n  /** The enclosing Field's wiring (design 9.4), `null` outside a `Field.Root`. */\n  readonly field: SliderFieldWiring | null;\n  /** Late-mounting Thumbs report here (useNativeGroupReconciliation). */\n  readonly onItemMounted: () => void;\n}\n\nexport const SliderContext = createContext<SliderContextValue | null>(null);\n\nexport function useSliderContext(part: string): SliderContextValue {\n  const context = use(SliderContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Slider.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAiEA,MAAa,gBAAgB,cAAyC,IAAI;AAE1E,SAAgB,iBAAiB,MAAkC;CACjE,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,wCAAwC;CAElE,OAAO;AACT"}

package/dist/slider/slider-indicator.d.mts

@@ -0,0 +1,22 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SliderTrackState } from "./slider-track.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/slider/slider-indicator.d.ts
+export type SliderIndicatorState = SliderTrackState;
+export interface SliderIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, SliderIndicatorState>;
+  style?: StateValue<CSSProperties | undefined, SliderIndicatorState>;
+  children?: StateValue<ReactNode, SliderIndicatorState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, SliderIndicatorState>;
+}
+/**
+ * The fill between the first and last thumb (from `min` to the value for one thumb). Renders no
+ * inline position: the consumer's CSS places it from the Root's inherited `--slider-start` /
+ * `--slider-end`. Owned keys: `data-orientation`, `data-disabled`.
+ */
+export declare function SliderIndicator({ className, style, children, render, ...rest }: SliderIndicatorProps): ReactNode;
+export declare namespace SliderIndicator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=slider-indicator.d.mts.map

package/dist/slider/slider-indicator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-indicator.d.mts","names":[],"sources":["../../src/slider/slider-indicator.tsx"],"mappings":";;;;YAQY,uBAAuB;iBAElB,6BAA6B,KAC5C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;;;wBAQrC,kBACd,WACA,OACA,UACA,WACG,QACF,uBAAoB;yBANP"}

package/dist/slider/slider-indicator.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useSliderContext } from "./slider-context.mjs";
+//#region src/slider/slider-indicator.tsx
+/**
+* The fill between the first and last thumb (from `min` to the value for one thumb). Renders no
+* inline position: the consumer's CSS places it from the Root's inherited `--slider-start` /
+* `--slider-end`. Owned keys: `data-orientation`, `data-disabled`.
+*/
+function SliderIndicator({ className, style, children, render, ...rest }) {
+	const ctx = useSliderContext("Slider.Indicator");
+	const state = {
+		orientation: ctx.orientation,
+		dragging: ctx.draggingThumb !== null,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			"data-orientation": ctx.orientation,
+			"data-disabled": dataAttr(ctx.disabled)
+		}
+	});
+}
+SliderIndicator.displayName = "SliderIndicator";
+//#endregion
+export { SliderIndicator };
+
+//# sourceMappingURL=slider-indicator.mjs.map

package/dist/slider/slider-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-indicator.mjs","names":[],"sources":["../../src/slider/slider-indicator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSliderContext } from \"./slider-context.js\";\nimport type { SliderTrackState } from \"./slider-track.js\";\n\nexport type SliderIndicatorState = SliderTrackState;\n\nexport interface SliderIndicatorProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SliderIndicatorState>;\n  style?: StateValue<CSSProperties | undefined, SliderIndicatorState>;\n  children?: StateValue<ReactNode, SliderIndicatorState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, SliderIndicatorState>;\n}\n\n/**\n * The fill between the first and last thumb (from `min` to the value for one thumb). Renders no\n * inline position: the consumer's CSS places it from the Root's inherited `--slider-start` /\n * `--slider-end`. Owned keys: `data-orientation`, `data-disabled`.\n */\nexport function SliderIndicator({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SliderIndicatorProps) {\n  const ctx = useSliderContext(\"Slider.Indicator\");\n  const state: SliderIndicatorState = {\n    orientation: ctx.orientation,\n    dragging: ctx.draggingThumb !== null,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"span\">, SliderIndicatorState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-orientation\": ctx.orientation,\n      \"data-disabled\": dataAttr(ctx.disabled),\n    },\n  });\n}\n\nSliderIndicator.displayName = \"SliderIndicator\";\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,gBAAgB,EAC9B,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,iBAAiB,kBAAkB;CAC/C,MAAM,QAA8B;EAClC,aAAa,IAAI;EACjB,UAAU,IAAI,kBAAkB;EAChC,UAAU,IAAI;CAChB;CACA,OAAO,UAA+D;EACpE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,oBAAoB,IAAI;GACxB,iBAAiB,SAAS,IAAI,QAAQ;EACxC;CACF,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/slider/slider-label.d.mts

@@ -0,0 +1,23 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SliderRootState, SliderValue } from "./slider-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/slider/slider-label.d.ts
+/** `T` defaults to `SliderValue`; pass it to narrow the state (`<Slider.Label<number>>`). */
+export interface SliderLabelProps<T extends SliderValue = SliderValue> extends Omit<ComponentPropsWithRef<"label">, "htmlFor" | "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, SliderRootState<T>>;
+  style?: StateValue<CSSProperties | undefined, SliderRootState<T>>;
+  children?: StateValue<ReactNode, SliderRootState<T>>;
+  /** Must stay a `<label>` when the slider has one thumb (the `for` association). */
+  render?: RenderProp<ComponentPropsWithRef<"label">, SliderRootState<T>>;
+}
+/**
+ * The visible name of the slider: `<label for>` naming the only thumb's input, or, with several
+ * thumbs, the element whose `id` the Root's `aria-labelledby` (`role="group"`) points at, emitted
+ * only while a Label is mounted. Owned keys: `id`, `htmlFor`.
+ */
+export declare function SliderLabel<T extends SliderValue = SliderValue>({ className, style, children, render, ...rest }: SliderLabelProps<T>): ReactNode;
+export declare namespace SliderLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=slider-label.d.mts.map

package/dist/slider/slider-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-label.d.mts","names":[],"sources":["../../src/slider/slider-label.tsx"],"mappings":";;;;;iBAWiB,iBAAiB,UAAU,cAAc,qBAAqB,KAC7E;EAGA,YAAY,+BAA+B,gBAAgB;EAC3D,QAAQ,WAAW,2BAA2B,gBAAgB;EAC9D,WAAW,WAAW,WAAW,gBAAgB;;EAEjD,SAAS,WAAW,gCAAgC,gBAAgB;;;;;;;wBAQtD,YAAY,UAAU,cAAc,eAClD,WACA,OACA,UACA,WACG,QACF,iBAAiB,KAAE;yBANN"}

package/dist/slider/slider-label.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useSliderContext } from "./slider-context.mjs";
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/slider/slider-label.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* The visible name of the slider: `<label for>` naming the only thumb's input, or, with several
+* thumbs, the element whose `id` the Root's `aria-labelledby` (`role="group"`) points at, emitted
+* only while a Label is mounted. Owned keys: `id`, `htmlFor`.
+*/
+function SliderLabel({ className, style, children, render, ...rest }) {
+	const ctx = useSliderContext("Slider.Label");
+	const { registerLabel } = ctx;
+	useLayoutEffect(registerLabel, [registerLabel]);
+	const single = ctx.shown.length === 1;
+	const warnedElement = useRef(false);
+	const libraryRef = useCallback((element) => {
+		if (isDev && single && !warnedElement.current && element.tagName !== "LABEL") {
+			warnedElement.current = true;
+			console.error(`Slider.Label: expected a <label> element but got <${element.tagName.toLowerCase()}>. With one thumb the Label names the input through \`for\`, which only a <label> has.`);
+		}
+		return () => {};
+	}, [single]);
+	return useRender({
+		defaultElement: "label",
+		render,
+		state: ctx.state,
+		className,
+		style,
+		children,
+		props: rest,
+		ref: libraryRef,
+		libraryProps: {
+			id: ctx.labelId,
+			htmlFor: single ? ctx.thumbId(0) : void 0
+		}
+	});
+}
+SliderLabel.displayName = "SliderLabel";
+//#endregion
+export { SliderLabel };
+
+//# sourceMappingURL=slider-label.mjs.map

package/dist/slider/slider-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-label.mjs","names":[],"sources":["../../src/slider/slider-label.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSliderContext } from \"./slider-context.js\";\nimport type { SliderRootState, SliderValue } from \"./slider-root.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** `T` defaults to `SliderValue`; pass it to narrow the state (`<Slider.Label<number>>`). */\nexport interface SliderLabelProps<T extends SliderValue = SliderValue> extends Omit<\n  ComponentPropsWithRef<\"label\">,\n  \"htmlFor\" | \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SliderRootState<T>>;\n  style?: StateValue<CSSProperties | undefined, SliderRootState<T>>;\n  children?: StateValue<ReactNode, SliderRootState<T>>;\n  /** Must stay a `<label>` when the slider has one thumb (the `for` association). */\n  render?: RenderProp<ComponentPropsWithRef<\"label\">, SliderRootState<T>>;\n}\n\n/**\n * The visible name of the slider: `<label for>` naming the only thumb's input, or, with several\n * thumbs, the element whose `id` the Root's `aria-labelledby` (`role=\"group\"`) points at, emitted\n * only while a Label is mounted. Owned keys: `id`, `htmlFor`.\n */\nexport function SliderLabel<T extends SliderValue = SliderValue>({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SliderLabelProps<T>) {\n  const ctx = useSliderContext(\"Slider.Label\");\n  const { registerLabel } = ctx;\n  useLayoutEffect(registerLabel, [registerLabel]);\n\n  const single = ctx.shown.length === 1;\n  const warnedElement = useRef(false);\n  const libraryRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev && single && !warnedElement.current && element.tagName !== \"LABEL\") {\n        warnedElement.current = true;\n        console.error(\n          `Slider.Label: expected a <label> element but got <${element.tagName.toLowerCase()}>. ` +\n            `With one thumb the Label names the input through \\`for\\`, which only a <label> has.`,\n        );\n      }\n      // A cleanup, so the ref is never called with `null`.\n      return () => {};\n    },\n    [single],\n  );\n\n  return useRender<ComponentPropsWithRef<\"label\">, SliderRootState<T>>({\n    defaultElement: \"label\",\n    render,\n    state: ctx.state as SliderRootState<T>,\n    className,\n    style,\n    children,\n    props: rest,\n    ref: libraryRef,\n    libraryProps: {\n      id: ctx.labelId,\n      htmlFor: single ? ctx.thumbId(0) : undefined,\n    },\n  });\n}\n\nSliderLabel.displayName = \"SliderLabel\";\n"],"mappings":";;;;;AAQA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAmBvC,SAAgB,YAAiD,EAC/D,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,EAAE,kBAAkB;CAC1B,gBAAgB,eAAe,CAAC,aAAa,CAAC;CAE9C,MAAM,SAAS,IAAI,MAAM,WAAW;CACpC,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,aAAa,aAChB,YAAyB;EACxB,IAAI,SAAS,UAAU,CAAC,cAAc,WAAW,QAAQ,YAAY,SAAS;GAC5E,cAAc,UAAU;GACxB,QAAQ,MACN,qDAAqD,QAAQ,QAAQ,YAAY,EAAE,uFAErF;EACF;EAEA,aAAa,CAAC;CAChB,GACA,CAAC,MAAM,CACT;CAEA,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA,OAAO,IAAI;EACX;EACA;EACA;EACA,OAAO;EACP,KAAK;EACL,cAAc;GACZ,IAAI,IAAI;GACR,SAAS,SAAS,IAAI,QAAQ,CAAC,IAAI,KAAA;EACrC;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/slider/slider-root.d.mts

@@ -0,0 +1,111 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/slider/slider-root.d.ts
+/** One number (one thumb) or one number per thumb, in ascending order. */
+export type SliderValue = number | readonly number[];
+export type SliderOrientation = "horizontal" | "vertical";
+/** Details passed as the second argument of `Slider.Root`'s `valueChangeAction` (each step). */
+export interface SliderValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user moved a thumb (`details.event` is the native `input` event for a key
+   * press, the `pointerdown` / `pointermove` / `pointerup` for a drag, the `keydown` for a
+   * JS-normalised key).
+   * `"platform"`: a form reset (the `reset` event) or a value found in the inputs at mount
+   * (`undefined`).
+   * `"dismiss"`: the commit action rejected and the slider reverted to the committed value
+   * (uncontrolled mode; `undefined`).
+   */
+  readonly reason: ChangeReason;
+  /** Index of the thumb that moved; `null` on a platform path or a revert, where several may change. */
+  readonly thumb: number | null;
+}
+/** Details passed as the second argument of `Slider.Root`'s `valueCommitAction` (each gesture). */
+export interface SliderValueCommitDetails extends ActionDetails {
+  /**
+   * `"activate"`: a gesture ended (`details.event` is the native `change` event for a key press,
+   * the `pointerup` / `pointercancel` / `lostpointercapture` for a drag, the `keydown` for a
+   * JS-normalised key). `"platform"`: a form reset (the `reset` event) or mount reconciliation
+   * (`undefined`). Never `"dismiss"`.
+   */
+  readonly reason: ChangeReason;
+  /** Index of the thumb the gesture moved; `null` on a platform path. */
+  readonly thumb: number | null;
+}
+export interface SliderRootState<T extends SliderValue = number> {
+  /**
+   * The value the thumbs show: the value a gesture has reached while a pointer is captured or a
+   * step or commit is in flight, else the optimistic value. Content rendered from it must not
+   * suspend.
+   */
+  readonly value: T;
+  /** `value` as an array, one entry per thumb, in thumb order. */
+  readonly values: readonly number[];
+  /** A step or commit dispatched through this Slider is in flight. */
+  readonly pending: boolean;
+  /** A pointer is captured on a thumb. */
+  readonly dragging: boolean;
+  readonly orientation: SliderOrientation;
+  readonly disabled: boolean;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+}
+export interface SliderRootProps<T extends SliderValue = number> extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "role" | "className" | "style" | "children" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow" | "aria-valuetext" | "aria-orientation"> {
+  /** Controlled value: one number, or one per thumb in ascending order. `undefined`: uncontrolled. */
+  value?: T;
+  /**
+   * Initial value in uncontrolled mode; also the form-reset target (latest value). Default: the
+   * platform's midpoint, `min + (max - min) / 2`, snapped to `step`.
+   */
+  defaultValue?: T;
+  /**
+   * Runs inside the Root's step transition on every step: each pointer move, each key press,
+   * each platform change, and the revert after a rejected commit (`reason: "dismiss"`,
+   * uncontrolled). Awaited; `data-pending` meanwhile (without this action a step starts no
+   * transition and is never pending). Adopt the value here in a controlled
+   * parent (`setValue(next)` in the sync prefix is a transition update). Not the place for a
+   * save: a pending async action entangles every transition in the app, and a drag is many
+   * steps. A `setState` after your own `await` needs `startTransition`.
+   */
+  valueChangeAction?: ChangeAction<T, SliderValueChangeDetails>;
+  /**
+   * Runs inside the Root's commit transition once per gesture: pointer release, each key press,
+   * a form reset, a value found at mount. Awaited; the thumb keeps the gesture's value and shows
+   * `data-pending` until it settles; in uncontrolled mode the value is committed when it
+   * resolves and reverts to the previous value if it rejects. May be a Server Function.
+   */
+  valueCommitAction?: ChangeAction<T, SliderValueCommitDetails>;
+  /** Default `0`. */
+  min?: number;
+  /**
+   * Default `100`. A `max` that is not on the step grid from `min` is unreachable, as on a
+   * native range (dev warning).
+   */
+  max?: number;
+  /** Default `1`. Must be positive. Values snap to `min + n × step`. */
+  step?: number;
+  /** Minimum number of steps between two adjacent thumbs. Default `0` (thumbs may share a value). */
+  minStepsBetweenThumbs?: number;
+  /** Default `"horizontal"`. Vertical sliders have `min` at the bottom. */
+  orientation?: SliderOrientation;
+  /**
+   * `aria-valuetext` for a thumb, from the value it shows. Set it when the number alone is not
+   * meaningful ("3 of 5 stars", "Tuesday"). Default: none (the number is announced).
+   */
+  getAriaValueText?: (value: number, index: number) => string;
+  /**
+   * Form field name for every thumb's input (a Thumb's own `name` wins). With several thumbs,
+   * read with `FormData.getAll()`.
+   */
+  name?: string;
+  /** The `form` attribute for every thumb's input (a Thumb's own `form` wins). */
+  form?: string;
+  /** Disables every input (native `disabled`; not submitted) and the pointer. Never set while pending. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, SliderRootState<T>>;
+  style?: StateValue<CSSProperties | undefined, SliderRootState<T>>;
+  children?: StateValue<ReactNode, SliderRootState<T>>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, SliderRootState<T>>;
+}
+//#endregion
+//# sourceMappingURL=slider-root.d.mts.map

package/dist/slider/slider-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-root.d.mts","names":[],"sources":["../../src/slider/slider-root.tsx"],"mappings":";;;;YAmDY;YAEA;;iBAGK,iCAAiC;;;;;;;;;;WAUvC,QAAQ;;WAER;;;iBAIM,iCAAiC;;;;;;;WAOvC,QAAQ;;WAER;;iBAGM,gBAAgB,UAAU;;;;;;WAMhC,OAAO;;WAEP;;WAEA;;WAEA;WACA,aAAa;WACb;WACA;WACA;WACA;;iBAGM,gBAAgB,UAAU,8BAA8B,KACvE;;EAcA,QAAQ;;;;;EAKR,eAAe;;;;;;;;;;EAUf,oBAAoB,aAAa,GAAG;;;;;;;EAOpC,oBAAoB,aAAa,GAAG;;EAEpC;;;;;EAKA;;EAEA;;EAEA;;EAEA,cAAc;;;;;EAKd,oBAAoB,eAAe;;;;;EAKnC;;EAEA;;EAEA;EACA,YAAY,+BAA+B,gBAAgB;EAC3D,QAAQ,WAAW,2BAA2B,gBAAgB;EAC9D,WAAW,WAAW,WAAW,gBAAgB;EACjD,SAAS,WAAW,8BAA8B,gBAAgB"}