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

package/dist/progress/progress-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-root.mjs","names":[],"sources":["../../src/progress/progress-root.tsx"],"sourcesContent":["// No \"use client\": `Progress.Root` uses only `useId`, arithmetic and `Intl`, and renders the\n// client context's provider (conventions 7.1's second exception). Rendered by a Server Component\n// it runs once, on the server (design/components/progress.md 8.1). It must not import from any\n// \"use client\" module except its context (checked by src/__tests__/directives.test.ts).\nimport { useId } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { warnOnce } from \"../internal/dev-warn.js\";\nimport { clamp, formatRangeValue, isDegenerate, percentage } from \"../internal/range-value.js\";\nimport { mergeRenderRef, renderElement, resolveStateValue } from \"../internal/render-element.js\";\nimport type { DataAttributes } from \"../internal/render-element.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { ProgressContext } from \"./progress-context.js\";\n\n/** The state every Progress part receives. */\nexport interface ProgressState {\n  /** The value clamped to `[min, max]`, or `null` while indeterminate. */\n  readonly value: number | null;\n  readonly min: number;\n  readonly max: number;\n  /** `(value - min) / (max - min) * 100`, a number 0–100; `null` while indeterminate. */\n  readonly percentage: number | null;\n  /**\n   * The `Intl.NumberFormat` text of the value (or of the fraction, for the percent style): what\n   * `Progress.Value` shows. `null` while indeterminate.\n   */\n  readonly formattedValue: string | null;\n  /** What `aria-valuetext` carries: `getAriaValueText`'s result, else `formattedValue`. */\n  readonly valueText: string | null;\n  /** `value` is `null`. */\n  readonly indeterminate: boolean;\n  /** The clamped value has reached `max`. */\n  readonly complete: boolean;\n}\n\nexport interface ProgressRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"role\"\n  | \"aria-valuemin\"\n  | \"aria-valuemax\"\n  | \"aria-valuenow\"\n  | \"aria-valuetext\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The current value. Absent or `null`: indeterminate. Clamped to `[min, max]`. */\n  value?: number | null;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /**\n   * `Intl.NumberFormat` options for `aria-valuetext` and `Progress.Value`. Default\n   * `{ style: \"percent\" }`. A `percent` style formats the fraction of the range; any other style\n   * formats the value. Serialisable: a Server Component may pass it.\n   */\n  format?: Intl.NumberFormatOptions;\n  /**\n   * BCP 47 tag for `Intl.NumberFormat`; default: the runtime's locale. Pass it when a client\n   * tree is server-rendered.\n   */\n  locale?: string;\n  /**\n   * The `aria-valuetext` to render instead of `formattedValue`. Called with the clamped value\n   * (`null` while indeterminate) and the state as it would be without this prop. Return `null`\n   * to render no `aria-valuetext`. A function: from a Server Component it works when this Root\n   * is rendered by that Server Component (the Root runs on the server), not when the Root is\n   * rendered by a client component.\n   */\n  getAriaValueText?: (value: number | null, state: ProgressState) => string | null | undefined;\n  className?: StateValue<string | undefined, ProgressState>;\n  style?: StateValue<CSSProperties | undefined, ProgressState>;\n  children?: StateValue<ReactNode, ProgressState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ProgressState>;\n}\n\n/**\n * `Progress.Root`: a `div[role=progressbar]` with the ARIA values, `aria-valuetext` from\n * `Intl.NumberFormat`, `data-indeterminate` / `data-complete`, and `--progress-value` (the\n * percentage, absent while indeterminate) in `style`, where the consumer's entries win. Owned\n * keys: `role`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`,\n * `aria-labelledby` (token-merged: the consumer's tokens, then `Progress.Label`'s id, always),\n * `data-indeterminate`, `data-complete`.\n */\nexport function ProgressRoot({\n  value = null,\n  min = 0,\n  max = 100,\n  format,\n  locale,\n  getAriaValueText,\n  className,\n  style,\n  children,\n  render,\n  ref,\n  ...rest\n}: ProgressRootProps) {\n  const id = useId();\n\n  let given = value;\n  if (given !== null && !Number.isFinite(given)) {\n    warnOnce(\n      `Progress.Root:non-finite:${given}`,\n      `Progress.Root: \\`value\\` is ${given}, which is not a finite number; the bar is rendered ` +\n        \"as indeterminate. Pass `null` for an unknown value.\",\n    );\n    given = null;\n  }\n  const degenerate = isDegenerate(min, max);\n  if (degenerate) {\n    warnOnce(\n      `Progress.Root:degenerate:${min}:${max}`,\n      `Progress.Root: \\`max\\` (${max}) must be greater than \\`min\\` (${min}); the percentage is ` +\n        \"rendered as 0. Pass `value={null}` while the total is unknown or empty.\",\n    );\n  }\n\n  const clamped = given === null ? null : clamp(given, min, max);\n  const formattedValue =\n    clamped === null ? null : formatRangeValue(clamped, min, max, format, locale);\n  const base: ProgressState = {\n    value: clamped,\n    min,\n    max,\n    percentage: clamped === null ? null : percentage(clamped, min, max),\n    formattedValue,\n    valueText: formattedValue,\n    indeterminate: clamped === null,\n    complete: clamped !== null && !degenerate && clamped >= max,\n  };\n  const valueText =\n    getAriaValueText === undefined ? formattedValue : (getAriaValueText(clamped, base) ?? null);\n  const state: ProgressState = valueText === base.valueText ? base : { ...base, valueText };\n\n  const variables = state.percentage === null ? {} : { \"--progress-value\": `${state.percentage}%` };\n\n  const libraryProps: Partial<ComponentPropsWithRef<\"div\">> & DataAttributes = {\n    role: \"progressbar\",\n    \"aria-valuemin\": min,\n    \"aria-valuemax\": max,\n    \"aria-valuenow\": clamped ?? undefined,\n    \"aria-valuetext\": valueText ?? undefined,\n    \"aria-labelledby\": `${id}-label`,\n    \"data-indeterminate\": dataAttr(state.indeterminate),\n    \"data-complete\": dataAttr(state.complete),\n  };\n\n  const element = renderElement<ComponentPropsWithRef<\"div\">, ProgressState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // The custom property loses to the consumer's own entry (design 3.1).\n    style: (s) => ({ ...(variables as CSSProperties), ...resolveStateValue(style, s) }),\n    children,\n    props: rest,\n    libraryProps,\n    // Passed through to the element, never read during render.\n    // oxlint-disable-next-line react/refs\n    ref: mergeRenderRef(ref, render),\n  });\n\n  return <ProgressContext value={{ id, state }}>{element}</ProgressContext>;\n}\n\nProgressRoot.displayName = \"ProgressRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;AAuFA,SAAgB,aAAa,EAC3B,QAAQ,MACR,MAAM,GACN,MAAM,KACN,QACA,QACA,kBACA,WACA,OACA,UACA,QACA,KACA,GAAG,QACiB;CACpB,MAAM,KAAK,MAAM;CAEjB,IAAI,QAAQ;CACZ,IAAI,UAAU,QAAQ,CAAC,OAAO,SAAS,KAAK,GAAG;EAC7C,SACE,4BAA4B,SAC5B,+BAA+B,MAAM,0GAEvC;EACA,QAAQ;CACV;CACA,MAAM,aAAa,aAAa,KAAK,GAAG;CACxC,IAAI,YACF,SACE,4BAA4B,IAAI,GAAG,OACnC,2BAA2B,IAAI,kCAAkC,IAAI,+FAEvE;CAGF,MAAM,UAAU,UAAU,OAAO,OAAO,MAAM,OAAO,KAAK,GAAG;CAC7D,MAAM,iBACJ,YAAY,OAAO,OAAO,iBAAiB,SAAS,KAAK,KAAK,QAAQ,MAAM;CAC9E,MAAM,OAAsB;EAC1B,OAAO;EACP;EACA;EACA,YAAY,YAAY,OAAO,OAAO,WAAW,SAAS,KAAK,GAAG;EAClE;EACA,WAAW;EACX,eAAe,YAAY;EAC3B,UAAU,YAAY,QAAQ,CAAC,cAAc,WAAW;CAC1D;CACA,MAAM,YACJ,qBAAqB,KAAA,IAAY,iBAAkB,iBAAiB,SAAS,IAAI,KAAK;CACxF,MAAM,QAAuB,cAAc,KAAK,YAAY,OAAO;EAAE,GAAG;EAAM;CAAU;CAExF,MAAM,YAAY,MAAM,eAAe,OAAO,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,WAAW,GAAG;CAEhG,MAAM,eAAuE;EAC3E,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB,WAAW,KAAA;EAC5B,kBAAkB,aAAa,KAAA;EAC/B,mBAAmB,GAAG,GAAG;EACzB,sBAAsB,SAAS,MAAM,aAAa;EAClD,iBAAiB,SAAS,MAAM,QAAQ;CAC1C;CAEA,MAAM,UAAU,cAA2D;EACzE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,GAAI;GAA6B,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACjF;EACA,OAAO;EACP;EAGA,KAAK,eAAe,KAAK,MAAM;CACjC,CAAC;CAED,OAAO,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAI;EAAM;EAAI,UAAA;CAAyB,CAAA;AAC1E;AAEA,aAAa,cAAc"}

package/dist/progress/progress-track.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ProgressState } from "./progress-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/progress/progress-track.d.ts
+export interface ProgressTrackProps extends Omit<ComponentPropsWithRef<"div">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ProgressState>;
+  style?: StateValue<CSSProperties | undefined, ProgressState>;
+  children?: StateValue<ReactNode, ProgressState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ProgressState>;
+}
+/**
+ * `Progress.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-indeterminate`, `data-complete`.
+ */
+export declare function ProgressTrack({ className, style, children, render, ...rest }: ProgressTrackProps): ReactNode;
+export declare namespace ProgressTrack {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=progress-track.d.mts.map

package/dist/progress/progress-track.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-track.d.mts","names":[],"sources":["../../src/progress/progress-track.tsx"],"mappings":";;;;iBAQiB,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;wBAMpC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/progress/progress-track.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useProgressContext } from "./progress-context.mjs";
+//#region src/progress/progress-track.tsx
+/**
+* `Progress.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-indeterminate`, `data-complete`.
+*/
+function ProgressTrack({ className, style, children, render, ...rest }) {
+	const { state } = useProgressContext("Progress.Track");
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			"data-indeterminate": dataAttr(state.indeterminate),
+			"data-complete": dataAttr(state.complete)
+		}
+	});
+}
+ProgressTrack.displayName = "ProgressTrack";
+//#endregion
+export { ProgressTrack };
+
+//# sourceMappingURL=progress-track.mjs.map

package/dist/progress/progress-track.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-track.mjs","names":[],"sources":["../../src/progress/progress-track.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 { useProgressContext } from \"./progress-context.js\";\nimport type { ProgressState } from \"./progress-root.js\";\n\nexport interface ProgressTrackProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ProgressState>;\n  style?: StateValue<CSSProperties | undefined, ProgressState>;\n  children?: StateValue<ReactNode, ProgressState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ProgressState>;\n}\n\n/**\n * `Progress.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-indeterminate`, `data-complete`.\n */\nexport function ProgressTrack({ className, style, children, render, ...rest }: ProgressTrackProps) {\n  const { state } = useProgressContext(\"Progress.Track\");\n  return useRender<ComponentPropsWithRef<\"div\">, ProgressState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-indeterminate\": dataAttr(state.indeterminate),\n      \"data-complete\": dataAttr(state.complete),\n    },\n  });\n}\n\nProgressTrack.displayName = \"ProgressTrack\";\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,EAAE,UAAU,mBAAmB,gBAAgB;CACrD,OAAO,UAAuD;EAC5D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,sBAAsB,SAAS,MAAM,aAAa;GAClD,iBAAiB,SAAS,MAAM,QAAQ;EAC1C;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,20 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ProgressState } from "./progress-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/progress/progress-value.d.ts
+export interface ProgressValueProps extends Omit<ComponentPropsWithRef<"span">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ProgressState>;
+  style?: StateValue<CSSProperties | undefined, ProgressState>;
+  /** Default: `state.formattedValue` (nothing while indeterminate). */
+  children?: StateValue<ReactNode, ProgressState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, ProgressState>;
+}
+/**
+ * `Progress.Value`: shows `state.formattedValue` or `children(state)`. `aria-hidden="true"` is a default the consumer may override, not an owned key: the same text is in the Root's `aria-valuetext`. Owned keys: `data-indeterminate`, `data-complete`.
+ */
+export declare function ProgressValue({ className, style, children, render, ...rest }: ProgressValueProps): ReactNode;
+export declare namespace ProgressValue {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=progress-value.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-value.d.mts","names":[],"sources":["../../src/progress/progress-value.tsx"],"mappings":";;;;iBAQiB,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/progress/progress-value.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useProgressContext } from "./progress-context.mjs";
+//#region src/progress/progress-value.tsx
+/**
+* `Progress.Value`: shows `state.formattedValue` or `children(state)`. `aria-hidden="true"` is a default the consumer may override, not an owned key: the same text is in the Root's `aria-valuetext`. Owned keys: `data-indeterminate`, `data-complete`.
+*/
+function ProgressValue({ className, style, children, render, ...rest }) {
+	const { state } = useProgressContext("Progress.Value");
+	const props = {
+		...rest,
+		"aria-hidden": rest["aria-hidden"] ?? true
+	};
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children: children ?? state.formattedValue,
+		props,
+		libraryProps: {
+			"data-indeterminate": dataAttr(state.indeterminate),
+			"data-complete": dataAttr(state.complete)
+		}
+	});
+}
+ProgressValue.displayName = "ProgressValue";
+//#endregion
+export { ProgressValue };
+
+//# sourceMappingURL=progress-value.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-value.mjs","names":[],"sources":["../../src/progress/progress-value.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 { useProgressContext } from \"./progress-context.js\";\nimport type { ProgressState } from \"./progress-root.js\";\n\nexport interface ProgressValueProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ProgressState>;\n  style?: StateValue<CSSProperties | undefined, ProgressState>;\n  /** Default: `state.formattedValue` (nothing while indeterminate). */\n  children?: StateValue<ReactNode, ProgressState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, ProgressState>;\n}\n\n/**\n * `Progress.Value`: shows `state.formattedValue` or `children(state)`. `aria-hidden=\"true\"` is a default the consumer may override, not an owned key: the same text is in the Root's `aria-valuetext`. Owned keys: `data-indeterminate`, `data-complete`.\n */\nexport function ProgressValue({ className, style, children, render, ...rest }: ProgressValueProps) {\n  const { state } = useProgressContext(\"Progress.Value\");\n  const props = { ...rest, \"aria-hidden\": rest[\"aria-hidden\"] ?? true };\n  return useRender<ComponentPropsWithRef<\"span\">, ProgressState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children: children ?? state.formattedValue,\n    props,\n    libraryProps: {\n      \"data-indeterminate\": dataAttr(state.indeterminate),\n      \"data-complete\": dataAttr(state.complete),\n    },\n  });\n}\n\nProgressValue.displayName = \"ProgressValue\";\n"],"mappings":";;;;;;;;AAsBA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,EAAE,UAAU,mBAAmB,gBAAgB;CACrD,MAAM,QAAQ;EAAE,GAAG;EAAM,eAAe,KAAK,kBAAkB;CAAK;CACpE,OAAO,UAAwD;EAC7D,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,YAAY,MAAM;EAC5B;EACA,cAAc;GACZ,sBAAsB,SAAS,MAAM,aAAa;GAClD,iBAAiB,SAAS,MAAM,QAAQ;EAC1C;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/radio-group/radio-group-root.d.mts

@@ -76,7 +76,9 @@ export interface RadioGroupRootProps extends Omit<ComponentPropsWithRef<"fieldse
  * Carries `data-pending` while `valueChangeAction` is in flight.
  *
  * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
- * `data-disabled`.
+ * `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),
+ * `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /
+ * `disabled` default from the Field.
  *
  * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial
  * hydration of a group (a boundary between Root and Items that stays dehydrated while the user
@@ -84,7 +86,7 @@ export interface RadioGroupRootProps extends Omit<ComponentPropsWithRef<"fieldse
  * still dehydrated makes react-dom throw "Mixing React and non-React radio inputs with the same
  * `name` is not supported". Development warns when Items hydrate after their Root.
  */
-export declare function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required, disabled, className, style, children, render, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
+export declare function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required: requiredProp, disabled: disabledProp, className, style, children, render, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
 export declare namespace RadioGroupRoot {
   var displayName: string;
 }

package/dist/radio-group/radio-group-root.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-root.d.mts","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"mappings":";;;;iBAsBiB,qCAAqC;;;;;;;WAO3C,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,4BAA4B,KAC3C;;;;;;;;;;;EAoBA;;;;;EAKA;;;;;;;;;;;;EAYA,oBAAoB,4BAA4B;;;;;;EAMhD;;EAEA;;;;;;EAMA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;;;;;;;;;;;wBAkCzC,iBACd,OACA,cACA,mBACA,MAAM,UACN,MACA,UACA,UACA,WACA,OACA,UACA,WACG,QACF,sCAAmB,IAAA;yBAbN"}
+{"version":3,"file":"radio-group-root.d.mts","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"mappings":";;;;iBA2BiB,qCAAqC;;;;;;;WAO3C,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,4BAA4B,KAC3C;;;;;;;;;;;EAoBA;;;;;EAKA;;;;;;;;;;;;EAYA,oBAAoB,4BAA4B;;;;;;EAMhD;;EAEA;;;;;;EAMA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;;;;;;;;;;;;;wBAoCzC,iBACd,OACA,cACA,mBACA,MAAM,UACN,MACA,UAAU,cACV,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,sCAAmB,IAAA;yBAbN"}

package/dist/radio-group/radio-group-root.mjs

@@ -4,9 +4,10 @@ import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { RadioGroupContext } from "./radio-group-context.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
-import { useCallback, useId, useLayoutEffect, useRef } from "react";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/radio-group/radio-group-root.tsx
 const isDev = process.env.NODE_ENV !== "production";
@@ -26,7 +27,9 @@ function readGroup(fieldset, name, prop) {
 * Carries `data-pending` while `valueChangeAction` is in flight.
 *
 * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
-* `data-disabled`.
+* `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),
+* `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /
+* `disabled` default from the Field.
 *
 * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial
 * hydration of a group (a boundary between Root and Items that stays dehydrated while the user
@@ -34,9 +37,18 @@ function readGroup(fieldset, name, prop) {
 * still dehydrated makes react-dom throw "Mixing React and non-React radio inputs with the same
 * `name` is not supported". Development warns when Items hydrate after their Root.
 */
-function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required = false, disabled = false, className, style, children, render, ...rest }) {
+function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required: requiredProp, disabled: disabledProp, className, style, children, render, ...rest }) {
+	const field = useFieldControl({
+		labelable: false,
+		name: nameProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		component: "RadioGroup.Root"
+	});
+	const required = field.required;
+	const disabled = field.disabled;
 	const fallbackName = useId();
-	const name = nameProp ?? fallbackName;
+	const name = field.name ?? fallbackName;
 	const fieldsetRef = useRef(null);
 	const warnedElement = useRef(false);
 	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
@@ -50,6 +62,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			prop: "value"
 		}
 	});
+	useFieldValueChange(optimistic);
 	/** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */
 	const base = () => {
 		const inFlight = latestInFlight();
@@ -89,20 +102,32 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			fieldsetRef.current = null;
 		};
 	}, []);
-	const context = {
+	const rootRef = useMergedRef(libraryRef, field.ref);
+	const contextDefault = value === void 0 ? defaultValue ?? null : void 0;
+	const context = useMemo(() => ({
 		name,
 		form,
 		required,
 		optimistic,
 		pending,
 		disabled,
-		defaultValue: value === void 0 ? defaultValue ?? null : void 0,
+		defaultValue: contextDefault,
 		onItemMounted: onItemMountedWithCheck,
 		select: (next, event) => {
 			if (next === optimistic) return;
 			dispatch(next, createActionDetails(event, { reason: "activate" }));
 		}
-	};
+	}), [
+		name,
+		form,
+		required,
+		optimistic,
+		pending,
+		disabled,
+		contextDefault,
+		onItemMountedWithCheck,
+		dispatch
+	]);
 	const element = useRender({
 		defaultElement: "fieldset",
 		render,
@@ -116,6 +141,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 		children,
 		props: rest,
 		libraryProps: {
+			...field.attributes,
 			role: "radiogroup",
 			"aria-required": required ? "true" : void 0,
 			disabled,
@@ -123,7 +149,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			"data-pending": dataAttr(pending),
 			"data-disabled": dataAttr(disabled)
 		},
-		ref: libraryRef
+		ref: rootRef
 	});
 	return /* @__PURE__ */ jsx(RadioGroupContext, {
 		value: context,

package/dist/radio-group/radio-group-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-root.mjs","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { RadioGroupContext } from \"./radio-group-context.js\";\nimport type { RadioGroupContextValue } from \"./radio-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface RadioGroupValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user checked a radio (click, Space, label click, or an arrow key, all of\n   * which arrive as a native `click`). `\"platform\"`: the browser changed the checked radio\n   * itself: a form reset (`details.event` is the `reset` event), or a click before hydration /\n   * Firefox form-state restoration found at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface RadioGroupRootState {\n  /** Optimistic checked value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface RadioGroupRootProps extends Omit<\n  ComponentPropsWithRef<\"fieldset\">,\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"name\"\n  | \"disabled\"\n  | \"form\"\n> {\n  /**\n   * Controlled checked value. `null` checks nothing; `undefined` means uncontrolled.\n   *\n   * A form reset returns each radio to the `checked` it had when *that radio* mounted (React sets\n   * `defaultChecked` once, from the initial `checked`). An Item added on the client while `value`\n   * equals its value therefore also gets `defaultChecked`, so two radios may carry it and the\n   * reset target is not necessarily the group's mount-time value. The reset is offered to\n   * `valueChangeAction` as usual; for a stable target remount the group with a `key` or use\n   * `defaultValue`, whose latest value every Item mirrors.\n   */\n  value?: string | null;\n  /**\n   * Initial value in uncontrolled mode. Defaults to `null` (nothing checked). Also the value a\n   * form reset returns to: the latest prop value is mirrored into the radios' `defaultChecked`.\n   */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the checked radio changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * `next` is a string for every user interaction. It is `null` only with\n   * `details.reason === \"platform\"`, when a form reset returned the group to \"nothing checked\".\n   * Every arrow key press dispatches; the latest dispatch wins. A `setState` placed after your\n   * own `await` is not a Transition update; wrap it in `startTransition` (React limitation).\n   * `details.event.preventDefault()` is not a veto; use controlled mode to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string | null, RadioGroupValueChangeDetails>;\n  /**\n   * The `name` shared by every radio in the group (form data key). Defaults to a `useId()` value;\n   * pass a real name when the group is inside a `<form>` you submit. Must be unique within the\n   * form: react-dom throws if a non-React radio shares it.\n   */\n  name?: string;\n  /** The `form` attribute, applied to the fieldset and to every radio. */\n  form?: string;\n  /**\n   * Marks every radio `required`, which makes the group required (one checked radio satisfies it),\n   * and renders `aria-required=\"true\"` on the fieldset so the radiogroup itself is exposed as\n   * required.\n   */\n  required?: boolean;\n  /** Renders `<fieldset disabled>`: every radio is disabled, unfocusable and skipped by arrows. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, RadioGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;\n  children?: StateValue<ReactNode, RadioGroupRootState>;\n  /** Replace the rendered element. Must keep a `<fieldset>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>;\n}\n\n/**\n * Value of the group's checked radio as the DOM shows it (`prop: \"checked\"`) or as a form reset\n * leaves it (`prop: \"defaultChecked\"`), or `null`. Only radios of this group's `name` count, so a\n * nested group is ignored.\n */\nfunction readGroup(\n  fieldset: HTMLFieldSetElement | null,\n  name: string,\n  prop: \"checked\" | \"defaultChecked\",\n): string | null {\n  if (fieldset === null) return null;\n  for (const radio of fieldset.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]')) {\n    if (radio.name === name && radio[prop]) return radio.value;\n  }\n  return null;\n}\n\n/**\n * `<fieldset role=\"radiogroup\">` that owns the group's state, the transition, the shared `name`,\n * the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).\n * Carries `data-pending` while `valueChangeAction` is in flight.\n *\n * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,\n * `data-disabled`.\n *\n * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial\n * hydration of a group (a boundary between Root and Items that stays dehydrated while the user\n * interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are\n * still dehydrated makes react-dom throw \"Mixing React and non-React radio inputs with the same\n * `name` is not supported\". Development warns when Items hydrate after their Root.\n */\nexport function RadioGroupRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  name: nameProp,\n  form,\n  required = false,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: RadioGroupRootProps) {\n  const fallbackName = useId();\n  const name = nameProp ?? fallbackName;\n  const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);\n  const warnedElement = useRef(false);\n\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    string | null,\n    RadioGroupValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"radio-group\"),\n    warn: { component: \"RadioGroup.Root\", prop: \"value\" },\n  });\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: an unchecked group\n  // is the HTML default (design decision 2).\n\n  /** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */\n  const base = (): string | null => {\n    const inFlight = latestInFlight();\n    // Not `?.next ?? optimistic`: an in-flight reset to `null` is a real intent.\n    return inFlight === null ? optimistic : inFlight.next;\n  };\n\n  // The residual browser paths (design section 5): one dispatch per group, from here. Items that\n  // mount after the Root report through `onItemMounted` so the group is reconciled again.\n  const { onItemMounted } = useNativeGroupReconciliation<string | null>({\n    element: fieldsetRef,\n    readCurrent: () => readGroup(fieldsetRef.current, name, \"checked\"),\n    readDefault: () => readGroup(fieldsetRef.current, name, \"defaultChecked\"),\n    base,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Dev-only partial-hydration detection. The radios present in the fieldset when the Root\n  // mounts are either mounted in the Root's commit or still dehydrated server HTML. An Item that\n  // mounts later on one of those elements hydrated after the Root (an Item created on the client\n  // gets a new element). Items of the Root's own commit run their mount effect before this one,\n  // while the snapshot is still `null`; StrictMode's re-run finds it reset by the cleanup.\n  const serverRadios = useRef<ReadonlySet<Element> | null>(null);\n  const warnedPartialHydration = useRef(false);\n  useLayoutEffect(() => {\n    if (!isDev) return;\n    const el = fieldsetRef.current;\n    serverRadios.current = new Set(el === null ? [] : el.querySelectorAll('input[type=\"radio\"]'));\n    return () => {\n      serverRadios.current = null;\n    };\n  }, []);\n  const onItemMountedWithCheck = useCallback(\n    (element?: Element | null) => {\n      if (\n        isDev &&\n        !warnedPartialHydration.current &&\n        element != null &&\n        serverRadios.current?.has(element) === true\n      ) {\n        warnedPartialHydration.current = true;\n        console.error(\n          `RadioGroup.Item: an Item hydrated after its RadioGroup.Root (a Suspense boundary ` +\n            `between them). Partial hydration of a radio group is not supported by React: ` +\n            `clicking a hydrated radio while same-name radios are still dehydrated makes ` +\n            `react-dom throw \"Mixing React and non-React radio inputs with the same name is not ` +\n            `supported\". Keep every Item in the same Suspense boundary as its Root.`,\n        );\n      }\n      onItemMounted(element);\n    },\n    [onItemMounted],\n  );\n\n  const libraryRef = useCallback((el: HTMLFieldSetElement) => {\n    fieldsetRef.current = el;\n    if (isDev && !warnedElement.current && el.tagName !== \"FIELDSET\") {\n      warnedElement.current = true;\n      console.error(\n        `RadioGroup.Root: expected to render a <fieldset> element but got ` +\n          `<${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled ` +\n          `inheritance, form reset) need a real <fieldset>.`,\n      );\n    }\n    return () => {\n      fieldsetRef.current = null;\n    };\n  }, []);\n\n  const context: RadioGroupContextValue = {\n    name,\n    form,\n    required,\n    optimistic,\n    pending,\n    disabled,\n    defaultValue: value === undefined ? (defaultValue ?? null) : undefined,\n    onItemMounted: onItemMountedWithCheck,\n    select: (next, event) => {\n      // No-op rule against the optimistic value (conventions 2.3 item 7, design 4.2).\n      if (next === optimistic) return;\n      dispatch(next, createActionDetails(event, { reason: \"activate\" }));\n    },\n  };\n\n  const state: RadioGroupRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>({\n    defaultElement: \"fieldset\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"radiogroup\",\n      \"aria-required\": required ? \"true\" : undefined,\n      disabled,\n      form,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: libraryRef,\n  });\n\n  return <RadioGroupContext value={context}>{element}</RadioGroupContext>;\n}\n\nRadioGroupRoot.displayName = \"RadioGroupRoot\";\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAyFvC,SAAS,UACP,UACA,MACA,MACe;CACf,IAAI,aAAa,MAAM,OAAO;CAC9B,KAAK,MAAM,SAAS,SAAS,iBAAmC,uBAAqB,GACnF,IAAI,MAAM,SAAS,QAAQ,MAAM,OAAO,OAAO,MAAM;CAEvD,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,MAAM,UACN,MACA,WAAW,OACX,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,eAAe,MAAM;CAC3B,MAAM,OAAO,YAAY;CACzB,MAAM,cAAc,OAAmC,IAAI;CAC3D,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,aAAa;EACpD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;;CAKD,MAAM,aAA4B;EAChC,MAAM,WAAW,eAAe;EAEhC,OAAO,aAAa,OAAO,aAAa,SAAS;CACnD;CAIA,MAAM,EAAE,kBAAkB,6BAA4C;EACpE,SAAS;EACT,mBAAmB,UAAU,YAAY,SAAS,MAAM,SAAS;EACjE,mBAAmB,UAAU,YAAY,SAAS,MAAM,gBAAgB;EACxE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAOD,MAAM,eAAe,OAAoC,IAAI;CAC7D,MAAM,yBAAyB,OAAO,KAAK;CAC3C,sBAAsB;EACpB,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,YAAY;EACvB,aAAa,UAAU,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,GAAG,iBAAiB,uBAAqB,CAAC;EAC5F,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,yBAAyB,aAC5B,YAA6B;EAC5B,IACE,SACA,CAAC,uBAAuB,WACxB,WAAW,QACX,aAAa,SAAS,IAAI,OAAO,MAAM,MACvC;GACA,uBAAuB,UAAU;GACjC,QAAQ,MACN,uYAKF;EACF;EACA,cAAc,OAAO;CACvB,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,aAAa,aAAa,OAA4B;EAC1D,YAAY,UAAU;EACtB,IAAI,SAAS,CAAC,cAAc,WAAW,GAAG,YAAY,YAAY;GAChE,cAAc,UAAU;GACxB,QAAQ,MACN,qEACM,GAAG,QAAQ,YAAY,EAAE,oGAEjC;EACF;EACA,aAAa;GACX,YAAY,UAAU;EACxB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,UAAkC;EACtC;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,KAAA,IAAa,gBAAgB,OAAQ,KAAA;EAC7D,eAAe;EACf,SAAS,MAAM,UAAU;GAEvB,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;EACnE;CACF;CAIA,MAAM,UAAU,UAAkE;EAChF,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;GAAS;EAK3D;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,MAAM;GACN,iBAAiB,WAAW,SAAS,KAAA;GACrC;GACA;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,mBAAD;EAAmB,OAAO;EAAU,UAAA;CAA2B,CAAA;AACxE;AAEA,eAAe,cAAc"}
+{"version":3,"file":"radio-group-root.mjs","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport {\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { RadioGroupContext } from \"./radio-group-context.js\";\nimport type { RadioGroupContextValue } from \"./radio-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface RadioGroupValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user checked a radio (click, Space, label click, or an arrow key, all of\n   * which arrive as a native `click`). `\"platform\"`: the browser changed the checked radio\n   * itself: a form reset (`details.event` is the `reset` event), or a click before hydration /\n   * Firefox form-state restoration found at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface RadioGroupRootState {\n  /** Optimistic checked value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface RadioGroupRootProps extends Omit<\n  ComponentPropsWithRef<\"fieldset\">,\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"name\"\n  | \"disabled\"\n  | \"form\"\n> {\n  /**\n   * Controlled checked value. `null` checks nothing; `undefined` means uncontrolled.\n   *\n   * A form reset returns each radio to the `checked` it had when *that radio* mounted (React sets\n   * `defaultChecked` once, from the initial `checked`). An Item added on the client while `value`\n   * equals its value therefore also gets `defaultChecked`, so two radios may carry it and the\n   * reset target is not necessarily the group's mount-time value. The reset is offered to\n   * `valueChangeAction` as usual; for a stable target remount the group with a `key` or use\n   * `defaultValue`, whose latest value every Item mirrors.\n   */\n  value?: string | null;\n  /**\n   * Initial value in uncontrolled mode. Defaults to `null` (nothing checked). Also the value a\n   * form reset returns to: the latest prop value is mirrored into the radios' `defaultChecked`.\n   */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the checked radio changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * `next` is a string for every user interaction. It is `null` only with\n   * `details.reason === \"platform\"`, when a form reset returned the group to \"nothing checked\".\n   * Every arrow key press dispatches; the latest dispatch wins. A `setState` placed after your\n   * own `await` is not a Transition update; wrap it in `startTransition` (React limitation).\n   * `details.event.preventDefault()` is not a veto; use controlled mode to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string | null, RadioGroupValueChangeDetails>;\n  /**\n   * The `name` shared by every radio in the group (form data key). Defaults to a `useId()` value;\n   * pass a real name when the group is inside a `<form>` you submit. Must be unique within the\n   * form: react-dom throws if a non-React radio shares it.\n   */\n  name?: string;\n  /** The `form` attribute, applied to the fieldset and to every radio. */\n  form?: string;\n  /**\n   * Marks every radio `required`, which makes the group required (one checked radio satisfies it),\n   * and renders `aria-required=\"true\"` on the fieldset so the radiogroup itself is exposed as\n   * required.\n   */\n  required?: boolean;\n  /** Renders `<fieldset disabled>`: every radio is disabled, unfocusable and skipped by arrows. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, RadioGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;\n  children?: StateValue<ReactNode, RadioGroupRootState>;\n  /** Replace the rendered element. Must keep a `<fieldset>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>;\n}\n\n/**\n * Value of the group's checked radio as the DOM shows it (`prop: \"checked\"`) or as a form reset\n * leaves it (`prop: \"defaultChecked\"`), or `null`. Only radios of this group's `name` count, so a\n * nested group is ignored.\n */\nfunction readGroup(\n  fieldset: HTMLFieldSetElement | null,\n  name: string,\n  prop: \"checked\" | \"defaultChecked\",\n): string | null {\n  if (fieldset === null) return null;\n  for (const radio of fieldset.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]')) {\n    if (radio.name === name && radio[prop]) return radio.value;\n  }\n  return null;\n}\n\n/**\n * `<fieldset role=\"radiogroup\">` that owns the group's state, the transition, the shared `name`,\n * the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).\n * Carries `data-pending` while `valueChangeAction` is in flight.\n *\n * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,\n * `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),\n * `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /\n * `disabled` default from the Field.\n *\n * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial\n * hydration of a group (a boundary between Root and Items that stays dehydrated while the user\n * interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are\n * still dehydrated makes react-dom throw \"Mixing React and non-React radio inputs with the same\n * `name` is not supported\". Development warns when Items hydrate after their Root.\n */\nexport function RadioGroupRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  name: nameProp,\n  form,\n  required: requiredProp,\n  disabled: disabledProp,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: RadioGroupRootProps) {\n  // Inside a Field.Root (design/components/field-form.md 7.2) the fieldset is the Field's group\n  // control: `aria-labelledby` → `Field.Label`, the ARIA wiring, and `name` / `required` /\n  // `disabled` defaulting from the Field.\n  const field = useFieldControl({\n    labelable: false,\n    name: nameProp,\n    disabled: disabledProp,\n    required: requiredProp,\n    component: \"RadioGroup.Root\",\n  });\n  const required = field.required;\n  const disabled = field.disabled;\n  const fallbackName = useId();\n  const name = field.name ?? fallbackName;\n  const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);\n  const warnedElement = useRef(false);\n\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    string | null,\n    RadioGroupValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"radio-group\"),\n    warn: { component: \"RadioGroup.Root\", prop: \"value\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: an unchecked group\n  // is the HTML default (design decision 2).\n\n  /** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */\n  const base = (): string | null => {\n    const inFlight = latestInFlight();\n    // Not `?.next ?? optimistic`: an in-flight reset to `null` is a real intent.\n    return inFlight === null ? optimistic : inFlight.next;\n  };\n\n  // The residual browser paths (design section 5): one dispatch per group, from here. Items that\n  // mount after the Root report through `onItemMounted` so the group is reconciled again.\n  const { onItemMounted } = useNativeGroupReconciliation<string | null>({\n    element: fieldsetRef,\n    readCurrent: () => readGroup(fieldsetRef.current, name, \"checked\"),\n    readDefault: () => readGroup(fieldsetRef.current, name, \"defaultChecked\"),\n    base,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Dev-only partial-hydration detection. The radios present in the fieldset when the Root\n  // mounts are either mounted in the Root's commit or still dehydrated server HTML. An Item that\n  // mounts later on one of those elements hydrated after the Root (an Item created on the client\n  // gets a new element). Items of the Root's own commit run their mount effect before this one,\n  // while the snapshot is still `null`; StrictMode's re-run finds it reset by the cleanup.\n  const serverRadios = useRef<ReadonlySet<Element> | null>(null);\n  const warnedPartialHydration = useRef(false);\n  useLayoutEffect(() => {\n    if (!isDev) return;\n    const el = fieldsetRef.current;\n    serverRadios.current = new Set(el === null ? [] : el.querySelectorAll('input[type=\"radio\"]'));\n    return () => {\n      serverRadios.current = null;\n    };\n  }, []);\n  const onItemMountedWithCheck = useCallback(\n    (element?: Element | null) => {\n      if (\n        isDev &&\n        !warnedPartialHydration.current &&\n        element != null &&\n        serverRadios.current?.has(element) === true\n      ) {\n        warnedPartialHydration.current = true;\n        console.error(\n          `RadioGroup.Item: an Item hydrated after its RadioGroup.Root (a Suspense boundary ` +\n            `between them). Partial hydration of a radio group is not supported by React: ` +\n            `clicking a hydrated radio while same-name radios are still dehydrated makes ` +\n            `react-dom throw \"Mixing React and non-React radio inputs with the same name is not ` +\n            `supported\". Keep every Item in the same Suspense boundary as its Root.`,\n        );\n      }\n      onItemMounted(element);\n    },\n    [onItemMounted],\n  );\n\n  const libraryRef = useCallback((el: HTMLFieldSetElement) => {\n    fieldsetRef.current = el;\n    if (isDev && !warnedElement.current && el.tagName !== \"FIELDSET\") {\n      warnedElement.current = true;\n      console.error(\n        `RadioGroup.Root: expected to render a <fieldset> element but got ` +\n          `<${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled ` +\n          `inheritance, form reset) need a real <fieldset>.`,\n      );\n    }\n    return () => {\n      fieldsetRef.current = null;\n    };\n  }, []);\n  const rootRef = useMergedRef<HTMLFieldSetElement>(libraryRef, field.ref);\n\n  // Memoised (#48): `dispatch` and `onItemMountedWithCheck` are stable, so this changes only with\n  // the state and the props below.\n  const contextDefault = value === undefined ? (defaultValue ?? null) : undefined;\n  const context = useMemo<RadioGroupContextValue>(\n    () => ({\n      name,\n      form,\n      required,\n      optimistic,\n      pending,\n      disabled,\n      defaultValue: contextDefault,\n      onItemMounted: onItemMountedWithCheck,\n      select: (next, event) => {\n        // No-op rule against the optimistic value (conventions 2.3 item 7, design 4.2).\n        if (next === optimistic) return;\n        dispatch(next, createActionDetails(event, { reason: \"activate\" }));\n      },\n    }),\n    [\n      name,\n      form,\n      required,\n      optimistic,\n      pending,\n      disabled,\n      contextDefault,\n      onItemMountedWithCheck,\n      dispatch,\n    ],\n  );\n\n  const state: RadioGroupRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>({\n    defaultElement: \"fieldset\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...field.attributes,\n      role: \"radiogroup\",\n      \"aria-required\": required ? \"true\" : undefined,\n      disabled,\n      form,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: rootRef,\n  });\n\n  return <RadioGroupContext value={context}>{element}</RadioGroupContext>;\n}\n\nRadioGroupRoot.displayName = \"RadioGroupRoot\";\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAyFvC,SAAS,UACP,UACA,MACA,MACe;CACf,IAAI,aAAa,MAAM,OAAO;CAC9B,KAAK,MAAM,SAAS,SAAS,iBAAmC,uBAAqB,GACnF,IAAI,MAAM,SAAS,QAAQ,MAAM,OAAO,OAAO,MAAM;CAEvD,OAAO;AACT;;;;;;;;;;;;;;;;;AAkBA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,MAAM,UACN,MACA,UAAU,cACV,UAAU,cACV,WACA,OACA,UACA,QACA,GAAG,QACmB;CAItB,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM;EACN,UAAU;EACV,UAAU;EACV,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM;CAC3B,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,cAAc,OAAmC,IAAI;CAC3D,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,aAAa;EACpD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;CAGD,oBAAoB,UAAU;;CAK9B,MAAM,aAA4B;EAChC,MAAM,WAAW,eAAe;EAEhC,OAAO,aAAa,OAAO,aAAa,SAAS;CACnD;CAIA,MAAM,EAAE,kBAAkB,6BAA4C;EACpE,SAAS;EACT,mBAAmB,UAAU,YAAY,SAAS,MAAM,SAAS;EACjE,mBAAmB,UAAU,YAAY,SAAS,MAAM,gBAAgB;EACxE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAOD,MAAM,eAAe,OAAoC,IAAI;CAC7D,MAAM,yBAAyB,OAAO,KAAK;CAC3C,sBAAsB;EACpB,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,YAAY;EACvB,aAAa,UAAU,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,GAAG,iBAAiB,uBAAqB,CAAC;EAC5F,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,yBAAyB,aAC5B,YAA6B;EAC5B,IACE,SACA,CAAC,uBAAuB,WACxB,WAAW,QACX,aAAa,SAAS,IAAI,OAAO,MAAM,MACvC;GACA,uBAAuB,UAAU;GACjC,QAAQ,MACN,uYAKF;EACF;EACA,cAAc,OAAO;CACvB,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,aAAa,aAAa,OAA4B;EAC1D,YAAY,UAAU;EACtB,IAAI,SAAS,CAAC,cAAc,WAAW,GAAG,YAAY,YAAY;GAChE,cAAc,UAAU;GACxB,QAAQ,MACN,qEACM,GAAG,QAAQ,YAAY,EAAE,oGAEjC;EACF;EACA,aAAa;GACX,YAAY,UAAU;EACxB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,UAAU,aAAkC,YAAY,MAAM,GAAG;CAIvE,MAAM,iBAAiB,UAAU,KAAA,IAAa,gBAAgB,OAAQ,KAAA;CACtE,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,eAAe;EACf,SAAS,MAAM,UAAU;GAEvB,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;EACnE;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAIA,MAAM,UAAU,UAAkE;EAChF,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;GAAS;EAK3D;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG,MAAM;GACT,MAAM;GACN,iBAAiB,WAAW,SAAS,KAAA;GACrC;GACA;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,mBAAD;EAAmB,OAAO;EAAU,UAAA;CAA2B,CAAA;AACxE;AAEA,eAAe,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"select-group.d.mts","names":[],"sources":["../../src/select/select-group.tsx"],"mappings":";;;;iBAQiB,yBAAyB,KACxC;;;;;EAOA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;wBAOzC,cACd,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBARH"}
+{"version":3,"file":"select-group.d.mts","names":[],"sources":["../../src/select/select-group.tsx"],"mappings":";;;;iBASiB,yBAAyB,KACxC;;;;;EAOA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;wBAOzC,cACd,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBARH"}

package/dist/select/select-group.mjs

@@ -2,6 +2,7 @@
 import { useRender } from "../internal/use-render.mjs";
 import { SelectContext, useSelectContext } from "./select-context.mjs";
 import { useSelectPartRef } from "./select-dom.mjs";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/select/select-group.tsx
 /**
@@ -30,11 +31,12 @@ function SelectGroup({ label, disabled = false, className, style, children, rend
 		libraryProps: { label },
 		ref
 	});
+	const context = useMemo(() => ({
+		...ctx,
+		groupDisabled: disabled
+	}), [ctx, disabled]);
 	return /* @__PURE__ */ jsx(SelectContext, {
-		value: {
-			...ctx,
-			groupDisabled: disabled
-		},
+		value: context,
 		children: element
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"select-group.mjs","names":[],"sources":["../../src/select/select-group.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext, useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupProps extends Omit<\n  ComponentPropsWithRef<\"optgroup\">,\n  \"label\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive\n   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.\n   */\n  label: string;\n  /** Native `disabled`: every option in the group is disabled. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep an `<optgroup>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"optgroup\">, SelectRootState>;\n}\n\n/**\n * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`\n * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.\n */\nexport function SelectGroup({\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupProps) {\n  const ctx = useSelectContext(\"Select.Group\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLOptGroupElement>(\"Select.Group\", \"optgroup\");\n  const element = useRender<ComponentPropsWithRef<\"optgroup\">, SelectRootState>({\n    defaultElement: \"optgroup\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: { ...rest, disabled },\n    libraryProps: { label },\n    ref,\n  });\n  // Nested groups are not valid HTML, so this only ever turns `false` into the group's value.\n  return <SelectContext value={{ ...ctx, groupDisabled: disabled }}>{element}</SelectContext>;\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n"],"mappings":";;;;;;;;;;AA8BA,SAAgB,YAAY,EAC1B,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBAAsC,gBAAgB,UAAU;CAChF,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;GAAE,GAAG;GAAM;EAAS;EAC3B,cAAc,EAAE,MAAM;EACtB;CACF,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;GAAE,GAAG;GAAK,eAAe;EAAS;EAAI,UAAA;CAAuB,CAAA;AAC5F;AAEA,YAAY,cAAc"}
+{"version":3,"file":"select-group.mjs","names":[],"sources":["../../src/select/select-group.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo } 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 { SelectContext, useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupProps extends Omit<\n  ComponentPropsWithRef<\"optgroup\">,\n  \"label\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive\n   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.\n   */\n  label: string;\n  /** Native `disabled`: every option in the group is disabled. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep an `<optgroup>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"optgroup\">, SelectRootState>;\n}\n\n/**\n * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`\n * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.\n */\nexport function SelectGroup({\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupProps) {\n  const ctx = useSelectContext(\"Select.Group\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLOptGroupElement>(\"Select.Group\", \"optgroup\");\n  const element = useRender<ComponentPropsWithRef<\"optgroup\">, SelectRootState>({\n    defaultElement: \"optgroup\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: { ...rest, disabled },\n    libraryProps: { label },\n    ref,\n  });\n  // Nested groups are not valid HTML, so this only ever turns `false` into the group's value.\n  const context = useMemo(() => ({ ...ctx, groupDisabled: disabled }), [ctx, disabled]);\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n"],"mappings":";;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBAAsC,gBAAgB,UAAU;CAChF,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;GAAE,GAAG;GAAM;EAAS;EAC3B,cAAc,EAAE,MAAM;EACtB;CACF,CAAC;CAED,MAAM,UAAU,eAAe;EAAE,GAAG;EAAK,eAAe;CAAS,IAAI,CAAC,KAAK,QAAQ,CAAC;CACpF,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,YAAY,cAAc"}

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

@@ -56,9 +56,11 @@ export interface SelectRootProps extends Omit<ComponentPropsWithRef<"select">, "
  * `value={optimistic}`: react-dom restores a controlled select to its props after every event,
  * and only the sync-lane optimistic value survives that restore.
  *
- * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.
+ * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+ * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+ * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
  */
-export declare function SelectRoot({ value, defaultValue, valueChangeAction, disabled, className, style, children, render, ...rest }: SelectRootProps): import("react").JSX.Element;
+export declare function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }: SelectRootProps): import("react").JSX.Element;
 export declare namespace SelectRoot {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.d.mts","names":[],"sources":["../../src/select/select-root.tsx"],"mappings":";;;;iBAqBiB,iCAAiC;;;;;;;;WAQvC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,wBAAwB,KACvC;;EAYA;;;;;;;;EAQA;;;;;;;;;;;EAWA,oBAAoB,qBAAqB;;EAEzC;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBAWvC,aACd,OACA,cACA,mBACA,UACA,WACA,OACA,UACA,WACG,QACF,kCAAe,IAAA;yBAVF"}
+{"version":3,"file":"select-root.d.mts","names":[],"sources":["../../src/select/select-root.tsx"],"mappings":";;;;iBA2BiB,iCAAiC;;;;;;;;WAQvC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,wBAAwB,KACvC;;EAYA;;;;;;;;EAQA;;;;;;;;;;;EAWA,oBAAoB,qBAAqB;;EAEzC;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,aACd,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,kCAAe,IAAA;yBAVF"}

package/dist/select/select-root.mjs

@@ -4,10 +4,11 @@ import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { SelectContext } from "./select-context.mjs";
 import { useSelectPartRef } from "./select-dom.mjs";
 import { useNativeSelectValue } from "../internal/use-native-select-value.mjs";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/select/select-root.tsx
 /**
@@ -16,10 +17,22 @@ import { jsx } from "react/jsx-runtime";
 * `value={optimistic}`: react-dom restores a controlled select to its props after every event,
 * and only the sync-lane optimistic value survives that restore.
 *
-* Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.
+* Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+* inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+* (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
 */
-function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false, className, style, children, render, ...rest }) {
+function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }) {
 	const { ref: libraryRef, node: selectRef } = useSelectPartRef("Select.Root", "select");
+	const field = useFieldControl({
+		labelable: true,
+		name: rest.name,
+		disabled: disabledProp,
+		required: rest.required,
+		id: rest.id,
+		component: "Select.Root"
+	});
+	const disabled = field.disabled;
+	const rootRef = useMergedRef(libraryRef, field.ref);
 	const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction({
 		controlled: value,
 		defaultValue,
@@ -31,6 +44,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 			prop: "value"
 		}
 	});
+	useFieldValueChange(optimistic);
 	const [mountValue] = useState(value);
 	const resetTarget = value === void 0 ? defaultValue : mountValue ?? value;
 	const established = useRef(false);
@@ -49,13 +63,18 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 		} : void 0,
 		onPlatformChange: (next, event) => dispatchChange(next, createActionDetails(event, { reason: "platform" }))
 	});
-	const context = {
+	const context = useMemo(() => ({
 		optimistic,
 		pending,
 		disabled,
 		groupDisabled: false,
 		optionMounted
-	};
+	}), [
+		optimistic,
+		pending,
+		disabled,
+		optionMounted
+	]);
 	const element = useRender({
 		defaultElement: "select",
 		render,
@@ -69,6 +88,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 		children,
 		props: rest,
 		libraryProps: {
+			...fieldInputProps(field),
 			value: optimistic,
 			disabled,
 			"data-pending": dataAttr(pending),
@@ -80,7 +100,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 				dispatchChange(next, createActionDetails(event.nativeEvent, { reason: "activate" }));
 			}
 		},
-		ref: libraryRef
+		ref: rootRef
 	});
 	return /* @__PURE__ */ jsx(SelectContext, {
 		value: context,

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.mjs","names":[],"sources":["../../src/select/select-root.tsx"],"sourcesContent":["\"use client\";\nimport { useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeSelectValue } from \"../internal/use-native-select-value.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext } from \"./select-context.js\";\nimport type { SelectContextValue } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface SelectValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,\n   * which the library cannot tell from a pick); `details.event` is the native `change` event.\n   * `\"platform\"`: the browser changed the value without a pick the library saw: a form reset\n   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state\n   * restoration reconciled at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SelectRootState {\n  /** Optimistic value. Content rendered from it must not suspend. */\n  readonly value: string;\n  /** An action dispatched through this Select is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface SelectRootProps extends Omit<\n  ComponentPropsWithRef<\"select\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"multiple\"\n  | \"size\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled value. `undefined` means uncontrolled. Use `\"\"` for the placeholder option. */\n  value?: string;\n  /**\n   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is\n   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option\n   * whose value is `\"\"`, else the first enabled option) is adopted at mount, without a dispatch,\n   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,\n   * options that mount later without the adopted one (a Suspense fallback) adopt again.\n   */\n  defaultValue?: string;\n  /**\n   * Runs inside the Root's transition whenever the selected option changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with\n   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed\n   * after your own `await` is not a Transition update; wrap it in `startTransition` (React\n   * limitation). Controlled mode is the way to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;\n  /** Native `disabled`. Never set by the library while pending. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<select>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"select\">, SelectRootState>;\n}\n\n/**\n * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount\n * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders\n * `value={optimistic}`: react-dom restores a controlled select to its props after every event,\n * and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.\n */\nexport function SelectRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectRootProps) {\n  const { ref: libraryRef, node: selectRef } = useSelectPartRef<HTMLSelectElement>(\n    \"Select.Root\",\n    \"select\",\n  );\n\n  const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction<\n    string,\n    SelectValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: \"\",\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"select\"),\n    warn: { component: \"Select.Root\", prop: \"value\" },\n  });\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: the browser's\n  // first-option default is adopted (design decision 3, product-owner decision 4).\n\n  // Controlled: the mount-time value is the reset target (conventions 3.8 rule 6). Neither\n  // `value` nor `defaultValue`: the value adopted at mount, chosen inside the hook.\n  const [mountValue] = useState(value);\n  const resetTarget = value === undefined ? defaultValue : (mountValue ?? value);\n\n  // Any dispatch, a pick or a platform change, ends the adoption of the browser's default.\n  const established = useRef(false);\n  const dispatchChange = (next: string, details: SelectValueChangeDetails) => {\n    established.current = true;\n    dispatch(next, details);\n  };\n\n  const { optionMounted } = useNativeSelectValue({\n    ref: selectRef,\n    optimistic,\n    latestInFlight,\n    resetTarget,\n    adoptDefault:\n      value === undefined && defaultValue === undefined\n        ? { adopt, established: () => established.current }\n        : undefined,\n    onPlatformChange: (next, event) =>\n      dispatchChange(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const context: SelectContextValue = {\n    optimistic,\n    pending,\n    disabled,\n    groupDisabled: false,\n    optionMounted,\n  };\n  const state: SelectRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"select\">, SelectRootState>({\n    defaultElement: \"select\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      value: optimistic,\n      disabled,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLSelectElement>) => {\n        // A natively disabled select fires no change; this covers `render` elements.\n        if (disabled) return;\n        const next = event.currentTarget.value;\n        // No-op rule against the optimistic value (conventions 2.3, design 4.2).\n        if (next === optimistic) return;\n        dispatchChange(next, createActionDetails(event.nativeEvent, { reason: \"activate\" }));\n      },\n    },\n    ref: libraryRef,\n  });\n\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectRoot.displayName = \"SelectRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2FA,SAAgB,WAAW,EACzB,OACA,cACA,mBACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,EAAE,KAAK,YAAY,MAAM,cAAc,iBAC3C,eACA,QACF;CAEA,MAAM,EAAE,YAAY,SAAS,UAAU,gBAAgB,UAAU,sBAG/D;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,QAAQ;EAC/C,MAAM;GAAE,WAAW;GAAe,MAAM;EAAQ;CAClD,CAAC;CAMD,MAAM,CAAC,cAAc,SAAS,KAAK;CACnC,MAAM,cAAc,UAAU,KAAA,IAAY,eAAgB,cAAc;CAGxE,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,kBAAkB,MAAc,YAAsC;EAC1E,YAAY,UAAU;EACtB,SAAS,MAAM,OAAO;CACxB;CAEA,MAAM,EAAE,kBAAkB,qBAAqB;EAC7C,KAAK;EACL;EACA;EACA;EACA,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,IACpC;GAAE;GAAO,mBAAmB,YAAY;EAAQ,IAChD,KAAA;EACN,mBAAmB,MAAM,UACvB,eAAe,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CAC3E,CAAC;CAED,MAAM,UAA8B;EAClC;EACA;EACA;EACA,eAAe;EACf;CACF;CAGA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAA;GAL+B,OAAO;GAAY;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,OAAO;GACP;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAA0C;IAEnD,IAAI,UAAU;IACd,MAAM,OAAO,MAAM,cAAc;IAEjC,IAAI,SAAS,YAAY;IACzB,eAAe,MAAM,oBAAoB,MAAM,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC;GACrF;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,WAAW,cAAc"}
+{"version":3,"file":"select-root.mjs","names":[],"sources":["../../src/select/select-root.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeSelectValue } from \"../internal/use-native-select-value.js\";\nimport {\n  fieldInputProps,\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext } from \"./select-context.js\";\nimport type { SelectContextValue } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface SelectValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,\n   * which the library cannot tell from a pick); `details.event` is the native `change` event.\n   * `\"platform\"`: the browser changed the value without a pick the library saw: a form reset\n   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state\n   * restoration reconciled at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SelectRootState {\n  /** Optimistic value. Content rendered from it must not suspend. */\n  readonly value: string;\n  /** An action dispatched through this Select is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface SelectRootProps extends Omit<\n  ComponentPropsWithRef<\"select\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"multiple\"\n  | \"size\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled value. `undefined` means uncontrolled. Use `\"\"` for the placeholder option. */\n  value?: string;\n  /**\n   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is\n   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option\n   * whose value is `\"\"`, else the first enabled option) is adopted at mount, without a dispatch,\n   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,\n   * options that mount later without the adopted one (a Suspense fallback) adopt again.\n   */\n  defaultValue?: string;\n  /**\n   * Runs inside the Root's transition whenever the selected option changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with\n   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed\n   * after your own `await` is not a Transition update; wrap it in `startTransition` (React\n   * limitation). Controlled mode is the way to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;\n  /** Native `disabled`. Never set by the library while pending. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<select>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"select\">, SelectRootState>;\n}\n\n/**\n * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount\n * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders\n * `value={optimistic}`: react-dom restores a controlled select to its props after every event,\n * and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;\n * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`\n * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.\n */\nexport function SelectRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  disabled: disabledProp,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectRootProps) {\n  const { ref: libraryRef, node: selectRef } = useSelectPartRef<HTMLSelectElement>(\n    \"Select.Root\",\n    \"select\",\n  );\n  // Inside a Field.Root (design/components/field-form.md 7.2) the Field owns the id and the ARIA\n  // wiring, and `name` / `required` / `disabled` default from it.\n  const field = useFieldControl({\n    labelable: true,\n    name: rest.name,\n    disabled: disabledProp,\n    required: rest.required,\n    id: rest.id,\n    component: \"Select.Root\",\n  });\n  const disabled = field.disabled;\n  const rootRef = useMergedRef<HTMLSelectElement>(libraryRef, field.ref);\n\n  const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction<\n    string,\n    SelectValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: \"\",\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"select\"),\n    warn: { component: \"Select.Root\", prop: \"value\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: the browser's\n  // first-option default is adopted (design decision 3, product-owner decision 4).\n\n  // Controlled: the mount-time value is the reset target (conventions 3.8 rule 6). Neither\n  // `value` nor `defaultValue`: the value adopted at mount, chosen inside the hook.\n  const [mountValue] = useState(value);\n  const resetTarget = value === undefined ? defaultValue : (mountValue ?? value);\n\n  // Any dispatch, a pick or a platform change, ends the adoption of the browser's default.\n  const established = useRef(false);\n  const dispatchChange = (next: string, details: SelectValueChangeDetails) => {\n    established.current = true;\n    dispatch(next, details);\n  };\n\n  const { optionMounted } = useNativeSelectValue({\n    ref: selectRef,\n    optimistic,\n    latestInFlight,\n    resetTarget,\n    adoptDefault:\n      value === undefined && defaultValue === undefined\n        ? { adopt, established: () => established.current }\n        : undefined,\n    onPlatformChange: (next, event) =>\n      dispatchChange(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Memoised (#48): every member is a state value, a prop or a stable callback.\n  const context = useMemo<SelectContextValue>(\n    () => ({ optimistic, pending, disabled, groupDisabled: false, optionMounted }),\n    [optimistic, pending, disabled, optionMounted],\n  );\n  const state: SelectRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"select\">, SelectRootState>({\n    defaultElement: \"select\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...fieldInputProps(field),\n      value: optimistic,\n      disabled,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLSelectElement>) => {\n        // A natively disabled select fires no change; this covers `render` elements.\n        if (disabled) return;\n        const next = event.currentTarget.value;\n        // No-op rule against the optimistic value (conventions 2.3, design 4.2).\n        if (next === optimistic) return;\n        dispatchChange(next, createActionDetails(event.nativeEvent, { reason: \"activate\" }));\n      },\n    },\n    ref: rootRef,\n  });\n\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectRoot.displayName = \"SelectRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAgB,WAAW,EACzB,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,EAAE,KAAK,YAAY,MAAM,cAAc,iBAC3C,eACA,QACF;CAGA,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM,KAAK;EACX,UAAU;EACV,UAAU,KAAK;EACf,IAAI,KAAK;EACT,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,UAAU,aAAgC,YAAY,MAAM,GAAG;CAErE,MAAM,EAAE,YAAY,SAAS,UAAU,gBAAgB,UAAU,sBAG/D;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,QAAQ;EAC/C,MAAM;GAAE,WAAW;GAAe,MAAM;EAAQ;CAClD,CAAC;CAGD,oBAAoB,UAAU;CAM9B,MAAM,CAAC,cAAc,SAAS,KAAK;CACnC,MAAM,cAAc,UAAU,KAAA,IAAY,eAAgB,cAAc;CAGxE,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,kBAAkB,MAAc,YAAsC;EAC1E,YAAY,UAAU;EACtB,SAAS,MAAM,OAAO;CACxB;CAEA,MAAM,EAAE,kBAAkB,qBAAqB;EAC7C,KAAK;EACL;EACA;EACA;EACA,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,IACpC;GAAE;GAAO,mBAAmB,YAAY;EAAQ,IAChD,KAAA;EACN,mBAAmB,MAAM,UACvB,eAAe,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CAC3E,CAAC;CAGD,MAAM,UAAU,eACP;EAAE;EAAY;EAAS;EAAU,eAAe;EAAO;CAAc,IAC5E;EAAC;EAAY;EAAS;EAAU;CAAa,CAC/C;CAGA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAA;GAL+B,OAAO;GAAY;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG,gBAAgB,KAAK;GACxB,OAAO;GACP;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAA0C;IAEnD,IAAI,UAAU;IACd,MAAM,OAAO,MAAM,cAAc;IAEjC,IAAI,SAAS,YAAY;IACzB,eAAe,MAAM,oBAAoB,MAAM,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC;GACrF;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,WAAW,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"}