@funstack/ui 0.0.0-stage → 0.1.0-alpha.1

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

@@ -0,0 +1,21 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { RadioGroupRootState } from "./radio-group-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/radio-group/radio-group-label.d.ts
+export interface RadioGroupLabelProps extends Omit<ComponentPropsWithRef<"legend">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, RadioGroupRootState>;
+  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;
+  /** Receives the Root's state: a group-level pending indicator goes here. */
+  children?: StateValue<ReactNode, RadioGroupRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"legend">, RadioGroupRootState>;
+}
+/**
+ * The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**
+ * of `RadioGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.
+ */
+export declare function RadioGroupLabel({ className, style, children, render, ...rest }: RadioGroupLabelProps): ReactNode;
+export declare namespace RadioGroupLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=radio-group-label.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-label.d.mts","names":[],"sources":["../../src/radio-group/radio-group-label.tsx"],"mappings":";;;;iBAOiB,6BAA6B,KAC5C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;wBAOvC,kBACd,WACA,OACA,UACA,WACG,QACF,uBAAoB;yBANP"}

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

@@ -0,0 +1,30 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useRadioGroupContext } from "./radio-group-context.mjs";
+//#region src/radio-group/radio-group-label.tsx
+/**
+* The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**
+* of `RadioGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.
+*/
+function RadioGroupLabel({ className, style, children, render, ...rest }) {
+	const ctx = useRadioGroupContext("RadioGroup.Label");
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "legend",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest
+	});
+}
+RadioGroupLabel.displayName = "RadioGroupLabel";
+//#endregion
+export { RadioGroupLabel };
+
+//# sourceMappingURL=radio-group-label.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-label.mjs","names":[],"sources":["../../src/radio-group/radio-group-label.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 { useRadioGroupContext } from \"./radio-group-context.js\";\nimport type { RadioGroupRootState } from \"./radio-group-root.js\";\n\nexport interface RadioGroupLabelProps extends Omit<\n  ComponentPropsWithRef<\"legend\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, RadioGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;\n  /** Receives the Root's state: a group-level pending indicator goes here. */\n  children?: StateValue<ReactNode, RadioGroupRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"legend\">, RadioGroupRootState>;\n}\n\n/**\n * The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**\n * of `RadioGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.\n */\nexport function RadioGroupLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: RadioGroupLabelProps) {\n  const ctx = useRadioGroupContext(\"RadioGroup.Label\");\n  const state: RadioGroupRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"legend\">, RadioGroupRootState>({\n    defaultElement: \"legend\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n  });\n}\n\nRadioGroupLabel.displayName = \"RadioGroupLabel\";\n"],"mappings":";;;;;;;;AAsBA,SAAgB,gBAAgB,EAC9B,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,qBAAqB,kBAAkB;CACnD,MAAM,QAA6B;EACjC,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,OAAO,UAAgE;EACrE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;CACT,CAAC;AACH;AAEA,gBAAgB,cAAc"}

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

@@ -0,0 +1,92 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/radio-group/radio-group-root.d.ts
+/** Details passed as the second argument of `valueChangeAction`. */
+export interface RadioGroupValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user checked a radio (click, Space, label click, or an arrow key, all of
+   * which arrive as a native `click`). `"platform"`: the browser changed the checked radio
+   * itself: a form reset (`details.event` is the `reset` event), or a click before hydration /
+   * Firefox form-state restoration found at mount (`details.event` is `undefined`).
+   */
+  readonly reason: ChangeReason;
+}
+export interface RadioGroupRootState {
+  /** Optimistic checked value, or `null`. Content rendered from it must not suspend. */
+  readonly value: string | null;
+  /** An action dispatched through this group is in flight. */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+export interface RadioGroupRootProps extends Omit<ComponentPropsWithRef<"fieldset">, "className" | "style" | "children" | "defaultValue" | "defaultChecked" | "name" | "disabled" | "form"> {
+  /**
+   * Controlled checked value. `null` checks nothing; `undefined` means uncontrolled.
+   *
+   * A form reset returns each radio to the `checked` it had when *that radio* mounted (React sets
+   * `defaultChecked` once, from the initial `checked`). An Item added on the client while `value`
+   * equals its value therefore also gets `defaultChecked`, so two radios may carry it and the
+   * reset target is not necessarily the group's mount-time value. The reset is offered to
+   * `valueChangeAction` as usual; for a stable target remount the group with a `key` or use
+   * `defaultValue`, whose latest value every Item mirrors.
+   */
+  value?: string | null;
+  /**
+   * Initial value in uncontrolled mode. Defaults to `null` (nothing checked). Also the value a
+   * form reset returns to: the latest prop value is mirrored into the radios' `defaultChecked`.
+   */
+  defaultValue?: string | null;
+  /**
+   * Runs inside the Root's transition whenever the checked radio changes. May be sync or async
+   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection
+   * back.
+   *
+   * `next` is a string for every user interaction. It is `null` only with
+   * `details.reason === "platform"`, when a form reset returned the group to "nothing checked".
+   * Every arrow key press dispatches; the latest dispatch wins. A `setState` placed after your
+   * own `await` is not a Transition update; wrap it in `startTransition` (React limitation).
+   * `details.event.preventDefault()` is not a veto; use controlled mode to veto a change.
+   */
+  valueChangeAction?: ChangeAction<string | null, RadioGroupValueChangeDetails>;
+  /**
+   * The `name` shared by every radio in the group (form data key). Defaults to a `useId()` value;
+   * pass a real name when the group is inside a `<form>` you submit. Must be unique within the
+   * form: react-dom throws if a non-React radio shares it.
+   */
+  name?: string;
+  /** The `form` attribute, applied to the fieldset and to every radio. */
+  form?: string;
+  /**
+   * Marks every radio `required`, which makes the group required (one checked radio satisfies it),
+   * and renders `aria-required="true"` on the fieldset so the radiogroup itself is exposed as
+   * required.
+   */
+  required?: boolean;
+  /** Renders `<fieldset disabled>`: every radio is disabled, unfocusable and skipped by arrows. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, RadioGroupRootState>;
+  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;
+  children?: StateValue<ReactNode, RadioGroupRootState>;
+  /** Replace the rendered element. Must keep a `<fieldset>`. */
+  render?: RenderProp<ComponentPropsWithRef<"fieldset">, RadioGroupRootState>;
+}
+/**
+ * `<fieldset role="radiogroup">` that owns the group's state, the transition, the shared `name`,
+ * the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).
+ * Carries `data-pending` while `valueChangeAction` is in flight.
+ *
+ * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
+ * `data-disabled`.
+ *
+ * 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
+ * interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are
+ * 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 namespace RadioGroupRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=radio-group-root.d.mts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,137 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+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 { RadioGroupContext } from "./radio-group-context.mjs";
+import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
+import { useCallback, useId, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/radio-group/radio-group-root.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* Value of the group's checked radio as the DOM shows it (`prop: "checked"`) or as a form reset
+* leaves it (`prop: "defaultChecked"`), or `null`. Only radios of this group's `name` count, so a
+* nested group is ignored.
+*/
+function readGroup(fieldset, name, prop) {
+	if (fieldset === null) return null;
+	for (const radio of fieldset.querySelectorAll("input[type=\"radio\"]")) if (radio.name === name && radio[prop]) return radio.value;
+	return null;
+}
+/**
+* `<fieldset role="radiogroup">` that owns the group's state, the transition, the shared `name`,
+* the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).
+* Carries `data-pending` while `valueChangeAction` is in flight.
+*
+* Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
+* `data-disabled`.
+*
+* 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
+* interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are
+* 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 }) {
+	const fallbackName = useId();
+	const name = nameProp ?? fallbackName;
+	const fieldsetRef = useRef(null);
+	const warnedElement = useRef(false);
+	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
+		controlled: value,
+		defaultValue,
+		initialValue: null,
+		action: valueChangeAction,
+		transitionTypes: () => transitionTypes("radio-group"),
+		warn: {
+			component: "RadioGroup.Root",
+			prop: "value"
+		}
+	});
+	/** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */
+	const base = () => {
+		const inFlight = latestInFlight();
+		return inFlight === null ? optimistic : inFlight.next;
+	};
+	const { onItemMounted } = useNativeGroupReconciliation({
+		element: fieldsetRef,
+		readCurrent: () => readGroup(fieldsetRef.current, name, "checked"),
+		readDefault: () => readGroup(fieldsetRef.current, name, "defaultChecked"),
+		base,
+		onPlatformChange: (next, event) => dispatch(next, createActionDetails(event, { reason: "platform" }))
+	});
+	const serverRadios = useRef(null);
+	const warnedPartialHydration = useRef(false);
+	useLayoutEffect(() => {
+		if (!isDev) return;
+		const el = fieldsetRef.current;
+		serverRadios.current = new Set(el === null ? [] : el.querySelectorAll("input[type=\"radio\"]"));
+		return () => {
+			serverRadios.current = null;
+		};
+	}, []);
+	const onItemMountedWithCheck = useCallback((element) => {
+		if (isDev && !warnedPartialHydration.current && element != null && serverRadios.current?.has(element) === true) {
+			warnedPartialHydration.current = true;
+			console.error("RadioGroup.Item: an Item hydrated after its RadioGroup.Root (a Suspense boundary between them). Partial hydration of a radio group is not supported by React: clicking a hydrated radio while same-name radios are still dehydrated makes react-dom throw \"Mixing React and non-React radio inputs with the same name is not supported\". Keep every Item in the same Suspense boundary as its Root.");
+		}
+		onItemMounted(element);
+	}, [onItemMounted]);
+	const libraryRef = useCallback((el) => {
+		fieldsetRef.current = el;
+		if (isDev && !warnedElement.current && el.tagName !== "FIELDSET") {
+			warnedElement.current = true;
+			console.error(`RadioGroup.Root: expected to render a <fieldset> element but got <${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled inheritance, form reset) need a real <fieldset>.`);
+		}
+		return () => {
+			fieldsetRef.current = null;
+		};
+	}, []);
+	const context = {
+		name,
+		form,
+		required,
+		optimistic,
+		pending,
+		disabled,
+		defaultValue: value === void 0 ? defaultValue ?? null : void 0,
+		onItemMounted: onItemMountedWithCheck,
+		select: (next, event) => {
+			if (next === optimistic) return;
+			dispatch(next, createActionDetails(event, { reason: "activate" }));
+		}
+	};
+	const element = useRender({
+		defaultElement: "fieldset",
+		render,
+		state: {
+			value: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "radiogroup",
+			"aria-required": required ? "true" : void 0,
+			disabled,
+			form,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled)
+		},
+		ref: libraryRef
+	});
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: context,
+		children: element
+	});
+}
+RadioGroupRoot.displayName = "RadioGroupRoot";
+//#endregion
+export { RadioGroupRoot };
+
+//# sourceMappingURL=radio-group-root.mjs.map

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

@@ -0,0 +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"}

package/dist/switch/index.d.mts

@@ -0,0 +1,3 @@
+import "../internal/platform-attributes.mjs";
+import { Switch, SwitchCheckedChangeDetails, SwitchProps, SwitchState } from "./switch.mjs";
+export { Switch, type SwitchCheckedChangeDetails, type SwitchProps, type SwitchState };

package/dist/switch/index.mjs

@@ -0,0 +1 @@
+export { Switch } from "./switch.mjs";

package/dist/switch/switch.d.mts

@@ -0,0 +1,78 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ViewTransitionClass } from "react";
+//#region src/switch/switch.d.ts
+export interface SwitchState {
+  /** Optimistic checked state: what the user sees, including an in-flight change. */
+  readonly checked: boolean;
+  /** An action dispatched by this Switch is in flight (including the resulting render). */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+/** Details passed as the second argument of `checkedChangeAction`. */
+export interface SwitchCheckedChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user toggled the switch (click, Space, label click); `event` is the native
+   * `click` event. `"platform"`: the browser changed the value itself: a form reset (`event` is
+   * the `reset` event) or a click before hydration / Firefox form-state restoration found on
+   * mount (`event` is `undefined`).
+   */
+  readonly reason: ChangeReason;
+}
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "type" | "role" | "checked" | "defaultChecked" | "onChange" | "aria-checked" | "className" | "style" | "children"> {
+  /** Controlled checked state. `undefined` means uncontrolled. */
+  checked?: boolean;
+  /**
+   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset
+   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.
+   */
+  defaultChecked?: boolean;
+  /**
+   * Called with the next checked state on every change. Runs inside the Switch's transition; may
+   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.
+   * Also called with `details.reason === "platform"` for a form reset or a pre-hydration click.
+   *
+   * A `setState` placed after your own `await` is not a Transition update; wrap it in
+   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is
+   * unsupported here; use controlled mode to veto a change.
+   */
+  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;
+  /** Renders a natively disabled input; never dispatches. Default `false`. */
+  disabled?: boolean;
+  /** Submitted as the input's value when checked. Default `"on"` (platform). */
+  value?: string;
+  /**
+   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the
+   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, SwitchState>;
+  style?: StateValue<CSSProperties | undefined, SwitchState>;
+  /**
+   * Replace the rendered element (element form) or take over rendering (function form). Must keep
+   * an `<input type="checkbox">`.
+   */
+  render?: RenderProp<ComponentPropsWithRef<"input">, SwitchState>;
+}
+/**
+ * An on/off switch (WAI-ARIA "Switch" pattern, HTML checkbox input variant). Renders
+ * `<input type="checkbox" role="switch">` whose DOM `checked` is the optimistic state; the input
+ * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.
+ *
+ * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,
+ * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,
+ * `data-disabled`. Event handlers are merged rather than owned: a `render` element's own
+ * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls
+ * `preventDefault()` cancels the change (nothing is dispatched).
+ */
+export declare function Switch({ checked, defaultChecked, checkedChangeAction, disabled, transition, className, style, render, ...rest }: SwitchProps): import("react").ReactNode;
+export declare namespace Switch {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=switch.d.mts.map

package/dist/switch/switch.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;iBAiBiB;;WAEN;;WAEA;;WAEA;;;iBAIM,mCAAmC;;;;;;;WAOzC,QAAQ;;iBAGF,oBAAoB,KACnC;;EAYA;;;;;EAKA;;;;;;;;;;EAUA,sBAAsB,sBAAsB;;EAE5C;;EAEA;;;;;;;;;;EAUA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;wBActC,SACd,SACA,gBACA,qBACA,UACA,YACA,WACA,OACA,WACG,QACF,8BAAW;yBAVE"}

package/dist/switch/switch.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { createActionDetails } from "../internal/action-details.mjs";
+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 { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+//#region src/switch/switch.tsx
+/**
+* An on/off switch (WAI-ARIA "Switch" pattern, HTML checkbox input variant). Renders
+* `<input type="checkbox" role="switch">` whose DOM `checked` is the optimistic state; the input
+* carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.
+*
+* Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,
+* `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,
+* `data-disabled`. Event handlers are merged rather than owned: a `render` element's own
+* `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls
+* `preventDefault()` cancels the change (nothing is dispatched).
+*/
+function Switch({ checked, defaultChecked, checkedChangeAction, disabled = false, transition, className, style, render, ...rest }) {
+	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
+		controlled: checked,
+		defaultValue: defaultChecked,
+		initialValue: false,
+		action: checkedChangeAction,
+		transitionTypes: (next) => transitionTypes("switch", next ? "on" : "off"),
+		warn: {
+			component: "Switch",
+			prop: "checked"
+		}
+	});
+	const inputRef = useNativeChecked({
+		type: "checkbox",
+		component: "Switch",
+		checked: optimistic,
+		defaultChecked: checked === void 0 ? defaultChecked ?? false : void 0,
+		latestInFlight,
+		onPlatformChange: (next, event) => dispatch(next, createActionDetails(event, { reason: "platform" }))
+	});
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			checked: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref: inputRef,
+		props: rest,
+		libraryProps: {
+			type: "checkbox",
+			role: "switch",
+			checked: optimistic,
+			defaultChecked: void 0,
+			"aria-checked": void 0,
+			disabled,
+			"data-checked": dataAttr(optimistic),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: "activate" })), "Switch");
+			}
+		}
+	});
+	return useTransitionBoundary("Switch", transition, element);
+}
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.mjs.map

package/dist/switch/switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\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 { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\n\nexport interface SwitchState {\n  /** Optimistic checked state: what the user sees, including an in-flight change. */\n  readonly checked: boolean;\n  /** An action dispatched by this Switch is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `checkedChangeAction`. */\nexport interface SwitchCheckedChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled the switch (click, Space, label click); `event` is the native\n   * `click` event. `\"platform\"`: the browser changed the value itself: a form reset (`event` is\n   * the `reset` event) or a click before hydration / Firefox form-state restoration found on\n   * mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SwitchProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"role\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"onChange\"\n  | \"aria-checked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /**\n   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset\n   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Called with the next checked state on every change. Runs inside the Switch's transition; may\n   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.\n   * Also called with `details.reason === \"platform\"` for a form reset or a pre-hydration click.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is\n   * unsupported here; use controlled mode to veto a change.\n   */\n  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;\n  /** Renders a natively disabled input; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /** Submitted as the input's value when checked. Default `\"on\"` (platform). */\n  value?: string;\n  /**\n   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, SwitchState>;\n  style?: StateValue<CSSProperties | undefined, SwitchState>;\n  /**\n   * Replace the rendered element (element form) or take over rendering (function form). Must keep\n   * an `<input type=\"checkbox\">`.\n   */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, SwitchState>;\n}\n\n/**\n * An on/off switch (WAI-ARIA \"Switch\" pattern, HTML checkbox input variant). Renders\n * `<input type=\"checkbox\" role=\"switch\">` whose DOM `checked` is the optimistic state; the input\n * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.\n *\n * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,\n * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,\n * `data-disabled`. Event handlers are merged rather than owned: a `render` element's own\n * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls\n * `preventDefault()` cancels the change (nothing is dispatched).\n */\nexport function Switch({\n  checked,\n  defaultChecked,\n  checkedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: SwitchProps) {\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    SwitchCheckedChangeDetails\n  >({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: checkedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"switch\", next ? \"on\" : \"off\"),\n    warn: { component: \"Switch\", prop: \"checked\" },\n  });\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"Switch\",\n    checked: optimistic,\n    // Uncontrolled: the latest prop is the reset target. Controlled: React's mount-time value.\n    defaultChecked: checked === undefined ? (defaultChecked ?? false) : undefined,\n    latestInFlight,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const state: SwitchState = { checked: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, SwitchState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    // Library-controlled layer (owned keys, conventions 1.2).\n    libraryProps: {\n      type: \"checkbox\",\n      role: \"switch\",\n      // The DOM state is the optimistic state (conventions 3.2): react-dom restores a controlled\n      // input to its props after every event, and only the sync-lane optimistic value survives.\n      checked: optimistic,\n      defaultChecked: undefined,\n      \"aria-checked\": undefined,\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the input on its own.\n      disabled,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled input fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: \"activate\" })),\n          \"Switch\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Switch\", transition, element);\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoGA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,OAAO,KAAK;EACxE,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAED,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX,SAAS;EAET,gBAAgB,YAAY,KAAA,IAAa,kBAAkB,QAAS,KAAA;EACpE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAID,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EAEP,cAAc;GACZ,MAAM;GACN,MAAM;GAGN,SAAS;GACT,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAGhB;GACA,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBACE,mBACM,SAAS,CAAC,YAAY,oBAAoB,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC,GACpF,QACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}

package/dist/tabs/index.d.mts

@@ -0,0 +1,24 @@
+import "../internal/platform-attributes.mjs";
+import { TabsActivationMode, TabsOrientation } from "./tabs-context.mjs";
+import { TabsIndicator, TabsIndicatorProps, TabsIndicatorState } from "./tabs-indicator.mjs";
+import { TabsList, TabsListProps, TabsListState } from "./tabs-list.mjs";
+import { TabsPanel, TabsPanelProps, TabsPanelState } from "./tabs-panel.mjs";
+import { TabsRoot, TabsRootProps, TabsRootState, TabsValueChangeDetails } from "./tabs-root.mjs";
+import { TabsTab, TabsTabProps, TabsTabState } from "./tabs-tab.mjs";
+//#region src/tabs/index.d.ts
+/**
+ * Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an
+ * optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render
+ * the optimistic selection; Panels render the committed one, so a suspending panel keeps the
+ * current panel on screen while the Root and the selected Tab show `data-pending`.
+ */
+export declare const Tabs: {
+  readonly Root: typeof TabsRoot;
+  readonly List: typeof TabsList;
+  readonly Tab: typeof TabsTab;
+  readonly Panel: typeof TabsPanel;
+  readonly Indicator: typeof TabsIndicator;
+};
+//#endregion
+export type { TabsActivationMode, TabsIndicatorProps, TabsIndicatorState, TabsListProps, TabsListState, TabsOrientation, TabsPanelProps, TabsPanelState, TabsRootProps, TabsRootState, TabsTabProps, TabsTabState, TabsValueChangeDetails };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/tabs/index.ts"],"mappings":";;;;;;;;;;;;;;qBAea;WACX,aAAI;WACJ,aAAI;WACJ,YAAG;WACH,cAAK;WACL,kBAAS"}

package/dist/tabs/index.mjs

@@ -0,0 +1,23 @@
+import { TabsIndicator } from "./tabs-indicator.mjs";
+import { TabsList } from "./tabs-list.mjs";
+import { TabsPanel } from "./tabs-panel.mjs";
+import { TabsRoot } from "./tabs-root.mjs";
+import { TabsTab } from "./tabs-tab.mjs";
+//#region src/tabs/index.ts
+/**
+* Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an
+* optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render
+* the optimistic selection; Panels render the committed one, so a suspending panel keeps the
+* current panel on screen while the Root and the selected Tab show `data-pending`.
+*/
+const Tabs = {
+	Root: TabsRoot,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel,
+	Indicator: TabsIndicator
+};
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=index.mjs.map

package/dist/tabs/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tabs/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 { TabsIndicator } from \"./tabs-indicator.js\";\nimport { TabsList } from \"./tabs-list.js\";\nimport { TabsPanel } from \"./tabs-panel.js\";\nimport { TabsRoot } from \"./tabs-root.js\";\nimport { TabsTab } from \"./tabs-tab.js\";\n\n/**\n * Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an\n * optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render\n * the optimistic selection; Panels render the committed one, so a suspending panel keeps the\n * current panel on screen while the Root and the selected Tab show `data-pending`.\n */\nexport const Tabs = {\n  Root: TabsRoot,\n  List: TabsList,\n  Tab: TabsTab,\n  Panel: TabsPanel,\n  Indicator: TabsIndicator,\n} as const;\n\nexport type {\n  TabsRootProps,\n  TabsRootState,\n  TabsValueChangeDetails,\n  TabsOrientation,\n  TabsActivationMode,\n} from \"./tabs-root.js\";\nexport type { TabsListProps, TabsListState } from \"./tabs-list.js\";\nexport type { TabsTabProps, TabsTabState } from \"./tabs-tab.js\";\nexport type { TabsPanelProps, TabsPanelState } from \"./tabs-panel.js\";\nexport type { TabsIndicatorProps, TabsIndicatorState } from \"./tabs-indicator.js\";\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;CACP,WAAW;AACb"}

package/dist/tabs/tabs-context.d.mts

@@ -0,0 +1,7 @@
+//#region src/tabs/tabs-context.d.ts
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+/** Why a Tabs change was dispatched (design section 3.1). */
+export type TabsChangeReason = "activate" | "platform";
+//#endregion
+//# sourceMappingURL=tabs-context.d.mts.map

package/dist/tabs/tabs-context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-context.d.mts","names":[],"sources":["../../src/tabs/tabs-context.ts"],"mappings":";YAGY;YACA;;YAGA"}

package/dist/tabs/tabs-context.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-context.mjs","names":[],"sources":["../../src/tabs/tabs-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsActivationMode = \"automatic\" | \"manual\";\n\n/** Why a Tabs change was dispatched (design section 3.1). */\nexport type TabsChangeReason = \"activate\" | \"platform\";\n\nexport interface TabsContextValue {\n  readonly rootId: string;\n  /** Committed value: Panels render this. */\n  readonly committed: string | null;\n  /** Optimistic value: Tabs and the Indicator render this. */\n  readonly optimistic: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly activationMode: TabsActivationMode;\n  readonly loop: boolean;\n  readonly disabled: boolean;\n  /** Dispatches a change. No-op if `value` is the optimistic value. Never checks `disabled`. */\n  readonly select: (value: string, event: Event | undefined, reason: TabsChangeReason) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\n/** What a Tabs.List tells its Tabs about `experimental_focusgroup`. */\nexport interface TabsListContextValue {\n  /** `experimental_focusgroup` is on: the selected Tab carries `focusgroupstart`. */\n  readonly focusgroup: boolean;\n  /**\n   * The flag is on and the engine implements `focusgroup` (detected in an effect, so false during\n   * SSR and hydration). Unselected Tabs then drop `tabindex=\"-1\"`: Chromium leaves an element with\n   * a negative tabindex out of the focusgroup, so roving tabindex would disable the native arrows.\n   */\n  readonly nativeFocusgroup: boolean;\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | null>(null);\n\nexport function useTabsContext(part: string): TabsContextValue {\n  const context = use(TabsContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Tabs.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAwBA,MAAa,cAAc,cAAuC,IAAI;AActE,MAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,eAAe,MAAgC;CAC7D,MAAM,UAAU,IAAI,WAAW;CAC/B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,sCAAsC;CAEhE,OAAO;AACT"}