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

package/dist/select/select-trigger.d.mts

@@ -0,0 +1,29 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SelectRootState } from "./select-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/select/select-trigger.d.ts
+export interface SelectTriggerProps extends Omit<ComponentPropsWithRef<"button">, "type" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  /**
+   * Non-interactive content only (HTML content model of a select's button), usually
+   * `<Select.Value />`. Not rendered by engines without customizable select (Firefox today).
+   */
+  children?: StateValue<ReactNode, SelectRootState>;
+  /** Replace the rendered element. Must keep a `<button>`. */
+  render?: RenderProp<ComponentPropsWithRef<"button">, SelectRootState>;
+}
+/**
+ * The select's own `<button>` (customizable select): replaces the UA button in engines with
+ * `appearance: base-select`. Optional; **must be the first child** of `Select.Root`. Its state is
+ * the Root's state, so a pending indicator next to `<Select.Value />` goes in its function
+ * `children`.
+ *
+ * Owned keys: `type` (always `"button"`), `data-pending`, `data-disabled`.
+ */
+export declare function SelectTrigger({ className, style, children, render, ...rest }: SelectTriggerProps): ReactNode;
+export declare namespace SelectTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-trigger.d.mts.map

package/dist/select/select-trigger.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-trigger.d.mts","names":[],"sources":["../../src/select/select-trigger.tsx"],"mappings":";;;;iBASiB,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBAoBvC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/select/select-trigger.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+//#region src/select/select-trigger.tsx
+function firstChildOfSelect(el) {
+	const parent = el.parentElement;
+	if (parent?.tagName === "SELECT" && parent.firstElementChild === el) return null;
+	return "must be the first child of Select.Root's <select> (HTML content model); elsewhere the browser does not use it as the select's button.";
+}
+/**
+* The select's own `<button>` (customizable select): replaces the UA button in engines with
+* `appearance: base-select`. Optional; **must be the first child** of `Select.Root`. Its state is
+* the Root's state, so a pending indicator next to `<Select.Value />` goes in its function
+* `children`.
+*
+* Owned keys: `type` (always `"button"`), `data-pending`, `data-disabled`.
+*/
+function SelectTrigger({ className, style, children, render, ...rest }) {
+	const ctx = useSelectContext("Select.Trigger");
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	const { ref } = useSelectPartRef("Select.Trigger", "button", firstChildOfSelect);
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			type: "button",
+			"data-pending": dataAttr(ctx.pending),
+			"data-disabled": dataAttr(ctx.disabled)
+		},
+		ref
+	});
+}
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+export { SelectTrigger };
+
+//# sourceMappingURL=select-trigger.mjs.map

package/dist/select/select-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-trigger.mjs","names":[],"sources":["../../src/select/select-trigger.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 { useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"type\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  /**\n   * Non-interactive content only (HTML content model of a select's button), usually\n   * `<Select.Value />`. Not rendered by engines without customizable select (Firefox today).\n   */\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, SelectRootState>;\n}\n\nfunction firstChildOfSelect(el: HTMLButtonElement): string | null {\n  const parent = el.parentElement;\n  if (parent?.tagName === \"SELECT\" && parent.firstElementChild === el) return null;\n  return (\n    \"must be the first child of Select.Root's <select> (HTML content model); elsewhere the \" +\n    \"browser does not use it as the select's button.\"\n  );\n}\n\n/**\n * The select's own `<button>` (customizable select): replaces the UA button in engines with\n * `appearance: base-select`. Optional; **must be the first child** of `Select.Root`. Its state is\n * the Root's state, so a pending indicator next to `<Select.Value />` goes in its function\n * `children`.\n *\n * Owned keys: `type` (always `\"button\"`), `data-pending`, `data-disabled`.\n */\nexport function SelectTrigger({ className, style, children, render, ...rest }: SelectTriggerProps) {\n  const ctx = useSelectContext(\"Select.Trigger\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLButtonElement>(\n    \"Select.Trigger\",\n    \"button\",\n    firstChildOfSelect,\n  );\n  return useRender<ComponentPropsWithRef<\"button\">, SelectRootState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      // Explicit: Chromium 156 reports `.type === \"submit\"` for a select's button.\n      type: \"button\",\n      \"data-pending\": dataAttr(ctx.pending),\n      \"data-disabled\": dataAttr(ctx.disabled),\n    },\n    ref,\n  });\n}\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";;;;;;AAwBA,SAAS,mBAAmB,IAAsC;CAChE,MAAM,SAAS,GAAG;CAClB,IAAI,QAAQ,YAAY,YAAY,OAAO,sBAAsB,IAAI,OAAO;CAC5E,OACE;AAGJ;;;;;;;;;AAUA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,MAAM,iBAAiB,gBAAgB;CAC7C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBACd,kBACA,UACA,kBACF;CACA,OAAO,UAA4D;EACjE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GAEZ,MAAM;GACN,gBAAgB,SAAS,IAAI,OAAO;GACpC,iBAAiB,SAAS,IAAI,QAAQ;EACxC;EACA;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/select/select-value.d.mts

@@ -0,0 +1,31 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SelectRootState } from "./select-root.mjs";
+import { CSSProperties, ComponentPropsWithRef } from "react";
+//#region src/select/select-value.d.ts
+export interface SelectValueProps extends Omit<ComponentPropsWithRef<"selectedcontent">, "children" | "dangerouslySetInnerHTML" | "className" | "style"> {
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  /** Replace the rendered element. Must keep a `<selectedcontent>`. */
+  render?: RenderProp<ComponentPropsWithRef<"selectedcontent">, SelectRootState>;
+}
+/**
+ * `<selectedcontent>`: the browser clones the selected option's content into it (inside
+ * `Select.Trigger`). It has no `children`. Rendered with `suppressHydrationWarning` and an empty
+ * `dangerouslySetInnerHTML` so that hydration accepts the content the parser cloned before React
+ * ran (design/components/select.md 3.3).
+ *
+ * Also keeps it fresh: the platform re-clones only on selection changes, so when React changes
+ * the selected option's content (a label, a state function, a Suspense boundary resolving inside
+ * it), a `MutationObserver` re-assigns `select.value = select.value`, which re-clones without
+ * events and without touching the selection or an open picker (6.3). The same refresh follows a
+ * form reset, which Chromium does not re-clone for. Not installed where
+ * `HTMLSelectedContentElement` is undefined (Firefox today, jsdom): nothing is cloned there.
+ *
+ * Owned keys: `dangerouslySetInnerHTML`, `suppressHydrationWarning`, `children`.
+ */
+export declare function SelectValue({ className, style, render, ...rest }: SelectValueProps): import("react").ReactNode;
+export declare namespace SelectValue {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-value.d.mts.map

package/dist/select/select-value.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-value.d.mts","names":[],"sources":["../../src/select/select-value.tsx"],"mappings":";;;;iBAYiB,yBAAyB,KACxC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,0CAA0C;;;;;;;;;;;;;;;;;wBA2ChD,cAAc,WAAW,OAAO,WAAW,QAAQ,mCAAgB;yBAAnE"}

package/dist/select/select-value.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useFormReset } from "../internal/use-form-reset.mjs";
+import { useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+import { useLayoutEffect, useMemo } from "react";
+//#region src/select/select-value.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/** Where the browser clones options into `<selectedcontent>` (Chromium 135+, Safari 27). */
+function supportsSelectedContent() {
+	return typeof globalThis !== "undefined" && "HTMLSelectedContentElement" in globalThis;
+}
+/**
+* Whether a mutation record changes what `<selectedcontent>` shows: a record inside the selected
+* option. Attribute records on the option element itself are ignored (option attributes are not
+* cloned, and the library writes `data-*` there); records inside `<selectedcontent>` are never
+* inside an option, so the refresh's own clone does not loop.
+*/
+function touchesSelected(record, selected) {
+	if (record.type === "attributes" && record.target === selected) return false;
+	return selected.contains(record.target);
+}
+/** Re-clones the selected option into `<selectedcontent>`. */
+function refresh(select) {
+	if (select.selectedIndex === -1) return;
+	select.value = select.value;
+}
+/**
+* `<selectedcontent>`: the browser clones the selected option's content into it (inside
+* `Select.Trigger`). It has no `children`. Rendered with `suppressHydrationWarning` and an empty
+* `dangerouslySetInnerHTML` so that hydration accepts the content the parser cloned before React
+* ran (design/components/select.md 3.3).
+*
+* Also keeps it fresh: the platform re-clones only on selection changes, so when React changes
+* the selected option's content (a label, a state function, a Suspense boundary resolving inside
+* it), a `MutationObserver` re-assigns `select.value = select.value`, which re-clones without
+* events and without touching the selection or an open picker (6.3). The same refresh follows a
+* form reset, which Chromium does not re-clone for. Not installed where
+* `HTMLSelectedContentElement` is undefined (Firefox today, jsdom): nothing is cloned there.
+*
+* Owned keys: `dangerouslySetInnerHTML`, `suppressHydrationWarning`, `children`.
+*/
+function SelectValue({ className, style, render, ...rest }) {
+	const ctx = useSelectContext("Select.Value");
+	const { ref, node } = useSelectPartRef("Select.Value", "selectedcontent");
+	useLayoutEffect(() => {
+		const el = node.current;
+		if (el === null) return;
+		const select = el.closest("select");
+		if (select === null) {
+			if (isDev) console.error("Select.Value: rendered outside the Select.Root's <select>; put it inside Select.Trigger, the select's first child.");
+			return;
+		}
+		if (!supportsSelectedContent()) return;
+		const observer = new MutationObserver((records) => {
+			const selected = select.options[select.selectedIndex];
+			if (selected === void 0) return;
+			if (records.some((record) => touchesSelected(record, selected))) refresh(select);
+		});
+		observer.observe(select, {
+			childList: true,
+			characterData: true,
+			attributes: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [node]);
+	const selectRef = useMemo(() => ({ get current() {
+		return node.current?.closest("select") ?? null;
+	} }), [node]);
+	useFormReset(selectRef, () => {
+		const select = selectRef.current;
+		if (select !== null && supportsSelectedContent()) refresh(select);
+	});
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "selectedcontent",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: rest,
+		libraryProps: {
+			suppressHydrationWarning: true,
+			dangerouslySetInnerHTML: { __html: "" }
+		},
+		ref
+	});
+}
+SelectValue.displayName = "SelectValue";
+//#endregion
+export { SelectValue };
+
+//# sourceMappingURL=select-value.mjs.map

package/dist/select/select-value.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-value.mjs","names":[],"sources":["../../src/select/select-value.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useMemo } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useFormReset } from \"../internal/use-form-reset.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface SelectValueProps extends Omit<\n  ComponentPropsWithRef<\"selectedcontent\">,\n  \"children\" | \"dangerouslySetInnerHTML\" | \"className\" | \"style\"\n> {\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<selectedcontent>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"selectedcontent\">, SelectRootState>;\n}\n\n/** Where the browser clones options into `<selectedcontent>` (Chromium 135+, Safari 27). */\nfunction supportsSelectedContent(): boolean {\n  return typeof globalThis !== \"undefined\" && \"HTMLSelectedContentElement\" in globalThis;\n}\n\n/**\n * Whether a mutation record changes what `<selectedcontent>` shows: a record inside the selected\n * option. Attribute records on the option element itself are ignored (option attributes are not\n * cloned, and the library writes `data-*` there); records inside `<selectedcontent>` are never\n * inside an option, so the refresh's own clone does not loop.\n */\nfunction touchesSelected(record: MutationRecord, selected: HTMLOptionElement): boolean {\n  if (record.type === \"attributes\" && record.target === selected) return false;\n  return selected.contains(record.target);\n}\n\n/** Re-clones the selected option into `<selectedcontent>`. */\nfunction refresh(select: HTMLSelectElement): void {\n  // Nothing selected: assigning the value would select the placeholder (probe case 7).\n  if (select.selectedIndex === -1) return;\n  // The assignment is the re-clone trigger; it fires no event and keeps the selection.\n  const current = select.value;\n  select.value = current;\n}\n\n/**\n * `<selectedcontent>`: the browser clones the selected option's content into it (inside\n * `Select.Trigger`). It has no `children`. Rendered with `suppressHydrationWarning` and an empty\n * `dangerouslySetInnerHTML` so that hydration accepts the content the parser cloned before React\n * ran (design/components/select.md 3.3).\n *\n * Also keeps it fresh: the platform re-clones only on selection changes, so when React changes\n * the selected option's content (a label, a state function, a Suspense boundary resolving inside\n * it), a `MutationObserver` re-assigns `select.value = select.value`, which re-clones without\n * events and without touching the selection or an open picker (6.3). The same refresh follows a\n * form reset, which Chromium does not re-clone for. Not installed where\n * `HTMLSelectedContentElement` is undefined (Firefox today, jsdom): nothing is cloned there.\n *\n * Owned keys: `dangerouslySetInnerHTML`, `suppressHydrationWarning`, `children`.\n */\nexport function SelectValue({ className, style, render, ...rest }: SelectValueProps) {\n  const ctx = useSelectContext(\"Select.Value\");\n  const { ref, node } = useSelectPartRef<HTMLElement>(\"Select.Value\", \"selectedcontent\");\n\n  useLayoutEffect(() => {\n    const el = node.current;\n    if (el === null) return;\n    const select = el.closest(\"select\");\n    if (select === null) {\n      if (isDev) {\n        console.error(\n          \"Select.Value: rendered outside the Select.Root's <select>; put it inside \" +\n            \"Select.Trigger, the select's first child.\",\n        );\n      }\n      return;\n    }\n    if (!supportsSelectedContent()) return;\n    const observer = new MutationObserver((records) => {\n      const selected = select.options[select.selectedIndex];\n      if (selected === undefined) return;\n      if (records.some((record) => touchesSelected(record, selected))) refresh(select);\n    });\n    observer.observe(select, {\n      childList: true,\n      characterData: true,\n      attributes: true,\n      subtree: true,\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [node]);\n\n  // A form reset changes the selection without re-cloning (Chromium 156: `form.reset()` leaves\n  // the old option's content in <selectedcontent>; memo/developer/select.md). `useFormReset`\n  // listens on the select's form owner itself (so neither `stopPropagation()` on the form nor a\n  // shadow root hides the event), follows a changed owner or `form` attribute, and calls back in\n  // a microtask after an uncancelled reset. React's own reset after a form action is a\n  // `form.reset()` too.\n  const selectRef = useMemo(\n    () => ({\n      get current(): HTMLSelectElement | null {\n        return node.current?.closest(\"select\") ?? null;\n      },\n    }),\n    [node],\n  );\n  useFormReset(selectRef, () => {\n    const select = selectRef.current;\n    if (select !== null && supportsSelectedContent()) refresh(select);\n  });\n\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"selectedcontent\">, SelectRootState>({\n    defaultElement: \"selectedcontent\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n    libraryProps: {\n      suppressHydrationWarning: true,\n      dangerouslySetInnerHTML: { __html: \"\" },\n    },\n    ref,\n  });\n}\n\nSelectValue.displayName = \"SelectValue\";\n"],"mappings":";;;;;;;AAUA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;AAavC,SAAS,0BAAmC;CAC1C,OAAO,OAAO,eAAe,eAAe,gCAAgC;AAC9E;;;;;;;AAQA,SAAS,gBAAgB,QAAwB,UAAsC;CACrF,IAAI,OAAO,SAAS,gBAAgB,OAAO,WAAW,UAAU,OAAO;CACvE,OAAO,SAAS,SAAS,OAAO,MAAM;AACxC;;AAGA,SAAS,QAAQ,QAAiC;CAEhD,IAAI,OAAO,kBAAkB,IAAI;CAGjC,OAAO,QADS,OAAO;AAEzB;;;;;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA0B;CACnF,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,EAAE,KAAK,SAAS,iBAA8B,gBAAgB,iBAAiB;CAErF,sBAAsB;EACpB,MAAM,KAAK,KAAK;EAChB,IAAI,OAAO,MAAM;EACjB,MAAM,SAAS,GAAG,QAAQ,QAAQ;EAClC,IAAI,WAAW,MAAM;GACnB,IAAI,OACF,QAAQ,MACN,oHAEF;GAEF;EACF;EACA,IAAI,CAAC,wBAAwB,GAAG;EAChC,MAAM,WAAW,IAAI,kBAAkB,YAAY;GACjD,MAAM,WAAW,OAAO,QAAQ,OAAO;GACvC,IAAI,aAAa,KAAA,GAAW;GAC5B,IAAI,QAAQ,MAAM,WAAW,gBAAgB,QAAQ,QAAQ,CAAC,GAAG,QAAQ,MAAM;EACjF,CAAC;EACD,SAAS,QAAQ,QAAQ;GACvB,WAAW;GACX,eAAe;GACf,YAAY;GACZ,SAAS;EACX,CAAC;EACD,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,IAAI,CAAC;CAQT,MAAM,YAAY,eACT,EACL,IAAI,UAAoC;EACtC,OAAO,KAAK,SAAS,QAAQ,QAAQ,KAAK;CAC5C,EACF,IACA,CAAC,IAAI,CACP;CACA,aAAa,iBAAiB;EAC5B,MAAM,SAAS,UAAU;EACzB,IAAI,WAAW,QAAQ,wBAAwB,GAAG,QAAQ,MAAM;CAClE,CAAC;CAED,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,OAAO,UAAqE;EAC1E,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,KAAA;EACV,OAAO;EACP,cAAc;GACZ,0BAA0B;GAC1B,yBAAyB,EAAE,QAAQ,GAAG;EACxC;EACA;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/slider/index.d.mts

@@ -0,0 +1,32 @@
+import "../internal/platform-attributes.mjs";
+import { SliderOrientation, SliderRootProps, SliderRootState, SliderValue, SliderValueChangeDetails, SliderValueCommitDetails } from "./slider-root.mjs";
+import { SliderTrack, SliderTrackProps, SliderTrackState } from "./slider-track.mjs";
+import { SliderIndicator, SliderIndicatorProps, SliderIndicatorState } from "./slider-indicator.mjs";
+import { SliderLabel, SliderLabelProps } from "./slider-label.mjs";
+import { SliderThumb, SliderThumbProps, SliderThumbState } from "./slider-thumb.mjs";
+import { SliderValuePart, SliderValueProps, SliderValueState } from "./slider-value.mjs";
+//#region src/slider/index.d.ts
+/**
+ * Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role="group"` with
+ * several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per
+ * value (a styled element containing a visually hidden native `<input type="range">`), and
+ * `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and
+ * `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it
+ * resolves and rolls back when it rejects).
+ */
+export declare const Slider: {
+  readonly Root: {
+    (props: SliderRootProps<number>): import("react").ReactNode;
+    (props: SliderRootProps<readonly number[]>): import("react").ReactNode;
+    (props: SliderRootProps<SliderValue>): import("react").ReactNode;
+    displayName?: string;
+  };
+  readonly Label: typeof SliderLabel;
+  readonly Track: typeof SliderTrack;
+  readonly Indicator: typeof SliderIndicator;
+  readonly Thumb: typeof SliderThumb;
+  readonly Value: typeof SliderValuePart;
+};
+//#endregion
+export type { SliderIndicatorProps, SliderIndicatorState, SliderLabelProps, SliderOrientation, SliderRootProps, SliderRootState, SliderThumbProps, SliderThumbState, SliderTrackProps, SliderTrackState, SliderValue, SliderValueChangeDetails, SliderValueCommitDetails, SliderValueProps, SliderValueState };
+//# sourceMappingURL=index.d.mts.map

package/dist/slider/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":["_$__slider_root_js0.SliderRootProps","_$__slider_root_js0.SliderValue"],"sources":["../../src/slider/index.ts"],"mappings":";;;;;;;;;;;;;;;;qBAkBa;WACX;K,OADWA,0C;;;;;WAEX,cAAK;WACL,cAAK;WACL,kBAAS;WACT,cAAK;WACL,cAAK"}

package/dist/slider/index.mjs

@@ -0,0 +1,27 @@
+import { SliderIndicator } from "./slider-indicator.mjs";
+import { SliderLabel } from "./slider-label.mjs";
+import { SliderRoot } from "./slider-root.mjs";
+import { SliderThumb } from "./slider-thumb.mjs";
+import { SliderTrack } from "./slider-track.mjs";
+import { SliderValuePart } from "./slider-value.mjs";
+//#region src/slider/index.ts
+/**
+* Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role="group"` with
+* several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per
+* value (a styled element containing a visually hidden native `<input type="range">`), and
+* `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and
+* `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it
+* resolves and rolls back when it rejects).
+*/
+const Slider = {
+	Root: SliderRoot,
+	Label: SliderLabel,
+	Track: SliderTrack,
+	Indicator: SliderIndicator,
+	Thumb: SliderThumb,
+	Value: SliderValuePart
+};
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=index.mjs.map

package/dist/slider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { SliderIndicator } from \"./slider-indicator.js\";\nimport { SliderLabel } from \"./slider-label.js\";\nimport { SliderRoot } from \"./slider-root.js\";\nimport { SliderThumb } from \"./slider-thumb.js\";\nimport { SliderTrack } from \"./slider-track.js\";\nimport { SliderValuePart } from \"./slider-value.js\";\n\n/**\n * Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role=\"group\"` with\n * several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per\n * value (a styled element containing a visually hidden native `<input type=\"range\">`), and\n * `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and\n * `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it\n * resolves and rolls back when it rejects).\n */\nexport const Slider = {\n  Root: SliderRoot,\n  Label: SliderLabel,\n  Track: SliderTrack,\n  Indicator: SliderIndicator,\n  Thumb: SliderThumb,\n  Value: SliderValuePart,\n} as const;\n\nexport type {\n  SliderValue,\n  SliderOrientation,\n  SliderRootProps,\n  SliderRootState,\n  SliderValueChangeDetails,\n  SliderValueCommitDetails,\n} from \"./slider-root.js\";\nexport type { SliderLabelProps } from \"./slider-label.js\";\nexport type { SliderTrackProps, SliderTrackState } from \"./slider-track.js\";\nexport type { SliderIndicatorProps, SliderIndicatorState } from \"./slider-indicator.js\";\nexport type { SliderThumbProps, SliderThumbState } from \"./slider-thumb.js\";\nexport type { SliderValueProps, SliderValueState } from \"./slider-value.js\";\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,SAAS;CACpB,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,OAAO;CACP,OAAO;AACT"}

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":"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"}

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