@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/radio/RadioGroup.d.ts

@@ -0,0 +1,121 @@
+import { Density } from "../../tokens/density.js";
+import { RootDOMProps, WrapperRootDOMProps } from "../../utils/root-props.js";
+import { SelectionControlClassNames } from "../../primitives/SelectionControl.js";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { AriaRadioGroupProps, AriaRadioProps } from "react-aria";
+//#region src/components/radio/RadioGroup.d.ts
+export interface RadioGroupClassNames {
+  /** The group's outer element. */
+  root?: string;
+  /** The visible group label. */
+  label?: string;
+  /** The wrapper around the radio buttons. */
+  options?: string;
+  /** The helper text below the options. */
+  supportingText?: string;
+  /** The error message, shown in place of the helper text while invalid. */
+  errorText?: string;
+}
+type RenamedGroupProps = 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'description' | 'label' | 'onChange' | 'validationState';
+interface RadioGroupOwnProps extends Omit<AriaRadioGroupProps, RenamedGroupProps>, Omit<RootDOMProps, keyof AriaRadioGroupProps> {
+  /** Visible group label. */
+  label?: ReactNode;
+  /** Helper text below the options. */
+  supportingText?: ReactNode;
+  /** Called with the selected option's value when the selection changes. */
+  onChange?: (value: string) => void;
+  /** Turns every option off: none can be selected or focused. @default false */
+  disabled?: boolean;
+  /** The options can be focused but the selection can't change. @default false */
+  readOnly?: boolean;
+  /** An option must be selected before the form submits. @default false */
+  required?: boolean;
+  /** Shows the error state. @default false */
+  invalid?: boolean;
+  /**
+   * Web density, `0` to `-3`, for every option: each step takes 4px off their round state
+   * layers (40px at 0, 28px at -3) and puts 2px more between rows, so each option keeps a
+   * 48px touch target that never reaches the next one's ring. Left out, the group takes the
+   * density of the nearest `ThemeProvider` or `ThemeScope`; M3 asks for density to be the
+   * reader's choice, so prefer setting it there.
+   * @default 0
+   */
+  density?: Density;
+  /** The options: `Radio` elements. */
+  children?: ReactNode;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: RadioGroupClassNames;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+}
+type GroupLabel = {
+  label: ReactNode;
+} | {
+  label?: undefined;
+  'aria-label': string;
+} | {
+  label?: undefined;
+  'aria-labelledby': string;
+};
+export type RadioGroupProps = RadioGroupOwnProps & GroupLabel;
+/**
+ * A set of radio buttons with one selection. Provides the selection state, arrow-key
+ * navigation, the group label, supporting text and validation (React Aria `useRadioGroup`).
+ *
+ * @example
+ * <RadioGroup label="Delivery" defaultValue="standard" name="delivery">
+ *   <Radio value="standard">Standard</Radio>
+ *   <Radio value="express">Express</Radio>
+ * </RadioGroup>
+ */
+export declare function RadioGroup(props: RadioGroupProps): import("react").JSX.Element;
+export interface RadioClassNames extends SelectionControlClassNames {
+  /** The outer ring. */
+  ring?: string;
+  /** The dot inside the ring while selected. */
+  dot?: string;
+}
+interface RadioOwnProps extends Omit<AriaRadioProps, 'isDisabled' | 'children'>, Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaRadioProps> {
+  /** The value this option selects. */
+  value: string;
+  /** Turns this option off: it can't be selected or focused. @default false */
+  disabled?: boolean;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the round state layer (40px at 0, 28px
+   * at -3); the ring stays 20px and the touch target 48px. Left out, the option takes its
+   * group's density, or the nearest `ThemeProvider`'s or `ThemeScope`'s.
+   * @default 0
+   */
+  density?: Density;
+  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: RadioClassNames;
+  /** Inline styles for the root `<label>`. */
+  style?: CSSProperties;
+  /** The root `<label>`. Use `inputRef` for the radio input. */
+  ref?: Ref<HTMLLabelElement>;
+  /** Ref to the visually hidden radio `<input>`. */
+  inputRef?: Ref<HTMLInputElement>;
+}
+type RadioLabel = {
+  children: ReactNode;
+} | {
+  children?: undefined;
+  'aria-label': string;
+} | {
+  children?: undefined;
+  'aria-labelledby': string;
+};
+export type RadioProps = RadioOwnProps & RadioLabel;
+/**
+ * M3 radio button: a 20px ring whose dot grows when selected, with a 40px state layer
+ * and a 48px touch target. Must be rendered inside a `RadioGroup`.
+ */
+export declare function Radio({ disabled, density, className, classNames, style, ref, inputRef, children, ...otherProps }: RadioProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/radio/RadioGroup.js

@@ -0,0 +1,163 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { useRippleHold } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { pickWidgetAria, splitRootProps } from "../../utils/root-props.js";
+import { ErrorText, SupportingText } from "../../primitives/Field.js";
+import { SelectionControl } from "../../primitives/SelectionControl.js";
+import { radioGroupStyles, radioStyles } from "./radio-styles.js";
+import { RadioRing } from "./radio-ring.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, mergeRefs, useFocusRing, useHover, useObjectRef, useRadio, useRadioGroup } from "react-aria";
+import { useRadioGroupState } from "react-stately";
+//#region src/components/radio/RadioGroup.tsx
+const RadioGroupContext = createContext(null);
+/**
+* A set of radio buttons with one selection. Provides the selection state, arrow-key
+* navigation, the group label, supporting text and validation (React Aria `useRadioGroup`).
+*
+* @example
+* <RadioGroup label="Delivery" defaultValue="standard" name="delivery">
+*   <Radio value="standard">Standard</Radio>
+*   <Radio value="express">Express</Radio>
+* </RadioGroup>
+*/
+function RadioGroup(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(RadioGroupRoot, {
+		...props,
+		directionRef
+	}) });
+}
+const ARROW_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+]);
+/**
+* Arrow keys on a radio stay in the group (WAI-ARIA APG: they wrap). With one radio React
+* Aria finds nowhere to move and leaves the key alone, so it scrolled the page (2026-10-15).
+*/
+function keepArrowKeys(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || !ARROW_KEYS.has(event.key)) return;
+	if (event.target.matches("input[type=\"radio\"]")) event.preventDefault();
+}
+function RadioGroupRoot({ label, supportingText, errorMessage, onChange, disabled = false, readOnly, required, invalid, density, orientation = "vertical", children, className, classNames, style, ref, directionRef, ...otherProps }) {
+	const { root: data, rest } = splitRootProps(otherProps);
+	const rootRef = useMemo(() => mergeRefs(ref, directionRef), [ref, directionRef]);
+	const options = {
+		...rest,
+		label,
+		description: supportingText,
+		errorMessage,
+		onChange,
+		orientation,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isRequired: required,
+		isInvalid: invalid
+	};
+	const state = useRadioGroupState(options);
+	const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails } = useRadioGroup(options, state);
+	const resolvedError = typeof errorMessage === "function" ? errorMessage({
+		isInvalid,
+		validationErrors,
+		validationDetails
+	}) : errorMessage ?? validationErrors.join(" ");
+	const styles = radioGroupStyles({
+		orientation,
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...mergeProps(data, radioGroupProps, { onKeyDown: keepArrowKeys }),
+		ref: rootRef,
+		style,
+		"data-orientation": orientation,
+		...densityAttribute(density),
+		"data-disabled": disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [
+			label !== void 0 && label !== null && /* @__PURE__ */ jsx("span", {
+				...labelProps,
+				className: styles.label({ class: classNames?.label }),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.options({ class: classNames?.options }),
+				children: /* @__PURE__ */ jsx(RadioGroupContext, {
+					value: state,
+					children
+				})
+			}),
+			supportingText && !(isInvalid && resolvedError) && /* @__PURE__ */ jsx(SupportingText, {
+				...descriptionProps,
+				className: styles.supporting({ class: classNames?.supportingText }),
+				children: supportingText
+			}),
+			isInvalid && resolvedError && /* @__PURE__ */ jsx(ErrorText, {
+				...errorMessageProps,
+				className: styles.supporting({ class: classNames?.errorText }),
+				children: resolvedError
+			})
+		]
+	});
+}
+/**
+* M3 radio button: a 20px ring whose dot grows when selected, with a 40px state layer
+* and a 48px touch target. Must be rendered inside a `RadioGroup`.
+*/
+function Radio({ disabled = false, density, className, classNames, style, ref, inputRef, children, ...otherProps }) {
+	const state = useContext(RadioGroupContext);
+	if (!state) throw new Error("[@windmorph/react] <Radio> must be used inside <RadioGroup>.");
+	const { root: data, rest } = splitRootProps(otherProps, { wrapper: true });
+	const domInputRef = useObjectRef(inputRef);
+	const { inputProps, labelProps, isSelected, isDisabled, isPressed } = useRadio({
+		...rest,
+		children,
+		isDisabled: disabled
+	}, state, domInputRef);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const rippling = useRippleHold(isPressed && !isDisabled);
+	const styles = radioStyles();
+	const widgetAria = pickWidgetAria(rest);
+	if (state.isInvalid) delete widgetAria["aria-invalid"];
+	if (state.isRequired) delete widgetAria["aria-required"];
+	return /* @__PURE__ */ jsx(SelectionControl, {
+		ref,
+		rootProps: mergeProps(labelProps, hoverProps),
+		inputProps: mergeProps(widgetAria, inputProps, focusProps),
+		inputRef: domInputRef,
+		rootData: {
+			...data,
+			...densityAttribute(density),
+			"data-tokens": mergeDataTokens("md-comp-radio-button", data)
+		},
+		state: {
+			"data-checked": isSelected || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-hovered": isHovered && !isDisabled || void 0,
+			"data-pressed": isPressed && !isDisabled || void 0,
+			"data-rippling": rippling || void 0,
+			"data-focus-visible": isFocusVisible || void 0
+		},
+		styles,
+		className,
+		classNames,
+		style,
+		indicator: /* @__PURE__ */ jsx(RadioRing, {
+			styles,
+			className: classNames?.ring,
+			dotClassName: classNames?.dot
+		}),
+		children
+	});
+}
+//#endregion
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/radio/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useRadio,\n  useRadioGroup,\n  type AriaRadioGroupProps,\n  type AriaRadioProps,\n} from 'react-aria';\nimport { useRadioGroupState, type RadioGroupState } from 'react-stately';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport { ErrorText, SupportingText } from '../../primitives/Field';\nimport {\n  SelectionControl,\n  type SelectionControlClassNames,\n} from '../../primitives/SelectionControl';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport {\n  pickWidgetAria,\n  splitRootProps,\n  type RootDOMProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { radioGroupStyles, radioStyles } from './radio-styles';\nimport { useRippleHold } from '../../primitives/use-m3-interaction';\nimport { RadioRing } from './radio-ring';\n\nconst RadioGroupContext = createContext<RadioGroupState | null>(null);\n\nexport interface RadioGroupClassNames {\n  /** The group's outer element. */\n  root?: string;\n  /** The visible group label. */\n  label?: string;\n  /** The wrapper around the radio buttons. */\n  options?: string;\n  /** The helper text below the options. */\n  supportingText?: string;\n  /** The error message, shown in place of the helper text while invalid. */\n  errorText?: string;\n}\n\ntype RenamedGroupProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'description'\n  | 'label'\n  | 'onChange'\n  // The deprecated `validationState` is left out: `invalid` replaces it.\n  | 'validationState';\n\ninterface RadioGroupOwnProps\n  extends\n    Omit<AriaRadioGroupProps, RenamedGroupProps>,\n    Omit<RootDOMProps, keyof AriaRadioGroupProps> {\n  /** Visible group label. */\n  label?: ReactNode;\n  /** Helper text below the options. */\n  supportingText?: ReactNode;\n  /** Called with the selected option's value when the selection changes. */\n  onChange?: (value: string) => void;\n  /** Turns every option off: none can be selected or focused. @default false */\n  disabled?: boolean;\n  /** The options can be focused but the selection can't change. @default false */\n  readOnly?: boolean;\n  /** An option must be selected before the form submits. @default false */\n  required?: boolean;\n  /** Shows the error state. @default false */\n  invalid?: boolean;\n  /**\n   * Web density, `0` to `-3`, for every option: each step takes 4px off their round state\n   * layers (40px at 0, 28px at -3) and puts 2px more between rows, so each option keeps a\n   * 48px touch target that never reaches the next one's ring. Left out, the group takes the\n   * density of the nearest `ThemeProvider` or `ThemeScope`; M3 asks for density to be the\n   * reader's choice, so prefer setting it there.\n   * @default 0\n   */\n  density?: Density;\n  /** The options: `Radio` elements. */\n  children?: ReactNode;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: RadioGroupClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype GroupLabel =\n  | { label: ReactNode }\n  | { label?: undefined; 'aria-label': string }\n  | { label?: undefined; 'aria-labelledby': string };\n\nexport type RadioGroupProps = RadioGroupOwnProps & GroupLabel;\n\n/**\n * A set of radio buttons with one selection. Provides the selection state, arrow-key\n * navigation, the group label, supporting text and validation (React Aria `useRadioGroup`).\n *\n * @example\n * <RadioGroup label=\"Delivery\" defaultValue=\"standard\" name=\"delivery\">\n *   <Radio value=\"standard\">Standard</Radio>\n *   <Radio value=\"express\">Express</Radio>\n * </RadioGroup>\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  // React Aria swaps ← / → by the locale's direction, so a horizontal group in an RTL region\n  // under an LTR locale would move the wrong way; the laid-out direction drives it instead.\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <RadioGroupRoot {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nconst ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);\n\n/**\n * Arrow keys on a radio stay in the group (WAI-ARIA APG: they wrap). With one radio React\n * Aria finds nowhere to move and leaves the key alone, so it scrolled the page (2026-10-15).\n */\nfunction keepArrowKeys(event: KeyboardEvent<HTMLDivElement>) {\n  if (event.altKey || event.ctrlKey || event.metaKey || !ARROW_KEYS.has(event.key)) return;\n  if ((event.target as Element).matches('input[type=\"radio\"]')) event.preventDefault();\n}\n\nfunction RadioGroupRoot({\n  label,\n  supportingText,\n  errorMessage,\n  onChange,\n  disabled = false,\n  readOnly,\n  required,\n  invalid,\n  density,\n  orientation = 'vertical',\n  children,\n  className,\n  classNames,\n  style,\n  ref,\n  directionRef,\n  ...otherProps\n}: RadioGroupProps & { directionRef: RefCallback<HTMLElement> }) {\n  // The root is the radio group itself: its DOM attributes join the hook's.\n  const { root: data, rest } = splitRootProps(otherProps);\n  const rootRef = useMemo(\n    () => mergeRefs<HTMLDivElement>(ref, directionRef as RefCallback<HTMLDivElement>),\n    [ref, directionRef],\n  );\n  const options: AriaRadioGroupProps = {\n    ...rest,\n    label,\n    description: supportingText,\n    errorMessage,\n    onChange,\n    orientation,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n    isInvalid: invalid,\n  };\n  const state = useRadioGroupState(options);\n  const {\n    radioGroupProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useRadioGroup(options, state);\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const styles = radioGroupStyles({ orientation, disabled });\n\n  return (\n    <div\n      {...mergeProps(data, radioGroupProps, { onKeyDown: keepArrowKeys })}\n      ref={rootRef}\n      style={style}\n      data-orientation={orientation}\n      {...densityAttribute(density)}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {label !== undefined && label !== null && (\n        <span {...labelProps} className={styles.label({ class: classNames?.label })}>\n          {label}\n        </span>\n      )}\n      <div className={styles.options({ class: classNames?.options })}>\n        <RadioGroupContext value={state}>{children}</RadioGroupContext>\n      </div>\n      {supportingText && !(isInvalid && resolvedError) && (\n        <SupportingText\n          {...descriptionProps}\n          className={styles.supporting({ class: classNames?.supportingText })}\n        >\n          {supportingText}\n        </SupportingText>\n      )}\n      {isInvalid && resolvedError && (\n        <ErrorText\n          {...errorMessageProps}\n          className={styles.supporting({ class: classNames?.errorText })}\n        >\n          {resolvedError}\n        </ErrorText>\n      )}\n    </div>\n  );\n}\n\nexport interface RadioClassNames extends SelectionControlClassNames {\n  /** The outer ring. */\n  ring?: string;\n  /** The dot inside the ring while selected. */\n  dot?: string;\n}\n\ninterface RadioOwnProps\n  extends\n    Omit<AriaRadioProps, 'isDisabled' | 'children'>,\n    Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaRadioProps> {\n  /** The value this option selects. */\n  value: string;\n  /** Turns this option off: it can't be selected or focused. @default false */\n  disabled?: boolean;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the round state layer (40px at 0, 28px\n   * at -3); the ring stays 20px and the touch target 48px. Left out, the option takes its\n   * group's density, or the nearest `ThemeProvider`'s or `ThemeScope`'s.\n   * @default 0\n   */\n  density?: Density;\n  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: RadioClassNames;\n  /** Inline styles for the root `<label>`. */\n  style?: CSSProperties;\n  /** The root `<label>`. Use `inputRef` for the radio input. */\n  ref?: Ref<HTMLLabelElement>;\n  /** Ref to the visually hidden radio `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n}\n\ntype RadioLabel =\n  | { children: ReactNode }\n  | { children?: undefined; 'aria-label': string }\n  | { children?: undefined; 'aria-labelledby': string };\n\nexport type RadioProps = RadioOwnProps & RadioLabel;\n\n/**\n * M3 radio button: a 20px ring whose dot grows when selected, with a 40px state layer\n * and a 48px touch target. Must be rendered inside a `RadioGroup`.\n */\nexport function Radio({\n  disabled = false,\n  density,\n  className,\n  classNames,\n  style,\n  ref,\n  inputRef,\n  children,\n  ...otherProps\n}: RadioProps) {\n  const state = useContext(RadioGroupContext);\n  if (!state) throw new Error('[@windmorph/react] <Radio> must be used inside <RadioGroup>.');\n  const { root: data, rest } = splitRootProps(otherProps, { wrapper: true });\n  const domInputRef = useObjectRef(inputRef);\n  const { inputProps, labelProps, isSelected, isDisabled, isPressed } = useRadio(\n    { ...rest, children, isDisabled: disabled },\n    state,\n    domInputRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const rippling = useRippleHold(isPressed && !isDisabled);\n  const styles = radioStyles();\n  // The group's own state wins, as a field's does: the radiogroup carries it.\n  const widgetAria = pickWidgetAria(rest);\n  if (state.isInvalid) delete widgetAria['aria-invalid'];\n  if (state.isRequired) delete widgetAria['aria-required'];\n\n  return (\n    <SelectionControl\n      ref={ref}\n      rootProps={mergeProps(labelProps, hoverProps)}\n      inputProps={mergeProps(widgetAria, inputProps, focusProps)}\n      inputRef={domInputRef}\n      // The ring resolves the component tokens itself (list items draw it too); the root\n      // is marked as well, so the tokens sit on the element that carries the state.\n      rootData={{\n        ...data,\n        ...densityAttribute(density),\n        'data-tokens': mergeDataTokens('md-comp-radio-button', data),\n      }}\n      state={{\n        'data-checked': isSelected || undefined,\n        'data-disabled': isDisabled || undefined,\n        'data-hovered': (isHovered && !isDisabled) || undefined,\n        'data-pressed': (isPressed && !isDisabled) || undefined,\n        'data-rippling': rippling || undefined,\n        'data-focus-visible': isFocusVisible || undefined,\n      }}\n      styles={styles}\n      className={className}\n      classNames={classNames}\n      style={style}\n      indicator={\n        <RadioRing styles={styles} className={classNames?.ring} dotClassName={classNames?.dot} />\n      }\n    >\n      {children}\n    </SelectionControl>\n  );\n}\n"],"mappings":"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"}

package/dist/components/radio/radio-ring.js

@@ -0,0 +1,21 @@
+import { radioStyles } from "./radio-styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/radio/radio-ring.tsx
+/**
+* The drawn ring and dot, styled from a `group/control` ancestor's state attributes.
+* Shared with list items that are radio buttons, so it carries the radio button's component
+* tokens (`radio-tokens.ts`) itself.
+*/
+function RadioRing({ styles = radioStyles(), className, dotClassName }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-tokens": "md-comp-radio-button",
+		"data-slot": "ring",
+		className: styles.ring({ class: className }),
+		children: /* @__PURE__ */ jsx("span", { className: styles.dot({ class: dotClassName }) })
+	});
+}
+//#endregion
+export { RadioRing };
+
+//# sourceMappingURL=radio-ring.js.map

package/dist/components/radio/radio-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-ring.js","names":[],"sources":["../../../src/components/radio/radio-ring.tsx"],"sourcesContent":["import { radioStyles } from './radio-styles';\n\n/**\n * The drawn ring and dot, styled from a `group/control` ancestor's state attributes.\n * Shared with list items that are radio buttons, so it carries the radio button's component\n * tokens (`radio-tokens.ts`) itself.\n */\nexport function RadioRing({\n  styles = radioStyles(),\n  className,\n  dotClassName,\n}: {\n  styles?: ReturnType<typeof radioStyles>;\n  className?: string;\n  dotClassName?: string;\n}) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-tokens=\"md-comp-radio-button\"\n      data-slot=\"ring\"\n      className={styles.ring({ class: className })}\n    >\n      <span className={styles.dot({ class: dotClassName })} />\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,UAAU,EACxB,SAAS,YAAY,GACrB,WACA,gBAKC;CACD,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,eAAY;EACZ,aAAU;EACV,WAAW,OAAO,KAAK,EAAE,OAAO,UAAU,CAAC;EAE3C,UAAA,oBAAC,QAAD,EAAM,WAAW,OAAO,IAAI,EAAE,OAAO,aAAa,CAAC,EAAI,CAAA;CACnD,CAAA;AAEV"}

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

@@ -0,0 +1,155 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/radio/radio-styles.d.ts
+/** Variant definitions for {@link Radio}. */
+export declare const radioStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      ring?: import("tailwind-variants").ClassValue;
+      dot?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  kind: {
+    circle: import("tailwind-variants").ClassValue | {
+      ring?: import("tailwind-variants").ClassValue;
+      dot?: import("tailwind-variants").ClassValue;
+    };
+    track: import("tailwind-variants").ClassValue | {
+      ring?: import("tailwind-variants").ClassValue;
+      dot?: import("tailwind-variants").ClassValue;
+    };
+  };
+}, {
+  ring: string[];
+  dot: string[];
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnType<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}>>>;
+/** Variant definitions for {@link RadioGroup}. */
+export declare const radioGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      options: string;
+    };
+    horizontal: {
+      options: string;
+    };
+  };
+  disabled: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  options: string;
+  supporting: string;
+}, undefined, {
+  orientation: {
+    vertical: {
+      options: string;
+    };
+    horizontal: {
+      options: string;
+    };
+  };
+  disabled: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  options: string;
+  supporting: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      options: string;
+    };
+    horizontal: {
+      options: string;
+    };
+  };
+  disabled: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  options: string;
+  supporting: string;
+}>>;
+/**
+ * The variants of {@link radioStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type RadioStyleProps = VariantProps<typeof radioStyles>;
+/**
+ * The variants of {@link radioGroupStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type RadioGroupStyleProps = VariantProps<typeof radioGroupStyles>;
+//#endregion
+//# sourceMappingURL=radio-styles.d.ts.map

package/dist/components/radio/radio-styles.js

@@ -0,0 +1,60 @@
+import { tv } from "../../utils/tv.js";
+import { selectionControlStyles } from "../../primitives/selection-control-styles.js";
+//#region src/components/radio/radio-styles.ts
+/** Variant definitions for {@link Radio}. */
+const radioStyles = tv({
+	extend: selectionControlStyles,
+	slots: {
+		ring: [
+			"relative inline-flex size-[20px] items-center justify-center rounded-full",
+			"border-2 border-solid border-[color:var(--_md-comp-radio-button-unselected-icon-color)]",
+			"text-[color:var(--_md-comp-radio-button-selected-icon-color)]",
+			"[transition-property:border-color,color]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"group-data-hovered/control:border-on-surface",
+			"group-data-focus-visible/control:border-on-surface",
+			"group-data-pressed/control:border-on-surface",
+			"control-checked:border-[color:var(--_md-comp-radio-button-selected-icon-color)]",
+			"group-data-disabled/control:border-on-surface/38 group-data-disabled/control:text-on-surface/38",
+			"group-data-disabled/control:control-checked:border-on-surface/38",
+			"group-data-disabled/control:[transition-duration:0s]",
+			"forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:text-[CanvasText]!",
+			"forced-colors:group-data-disabled/control:border-[GrayText]! forced-colors:group-data-disabled/control:text-[GrayText]!"
+		],
+		dot: [
+			"size-[10px] scale-0 rounded-full bg-current",
+			"[transition-property:scale]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"control-checked:scale-100"
+		]
+	}
+});
+/** Variant definitions for {@link RadioGroup}. */
+const radioGroupStyles = tv({
+	slots: {
+		root: "flex flex-col gap-[4px]",
+		label: "text-title-small text-on-surface",
+		options: "flex gap-y-[calc(0px-var(--md-sys-density,0)*2px)]",
+		supporting: "px-[4px]"
+	},
+	variants: {
+		orientation: {
+			vertical: { options: "flex-col" },
+			horizontal: { options: "flex-row flex-wrap gap-x-[16px]" }
+		},
+		disabled: {
+			true: { label: "text-on-surface/38" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		disabled: false
+	}
+});
+//#endregion
+export { radioGroupStyles, radioStyles };
+
+//# sourceMappingURL=radio-styles.js.map

package/dist/components/radio/radio-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-styles.js","names":[],"sources":["../../../src/components/radio/radio-styles.ts"],"sourcesContent":["import { selectionControlStyles } from '../../primitives/selection-control-styles';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (RadioButton.kt and RadioButtonTokens): a 20px ring\n * with a 2px stroke and a 10px dot that grows on the fast spatial spring; colours change\n * on the default effects spring. Unselected rings are on-surface-variant and darken to\n * on-surface on hover, focus and press; selected rings are primary; disabled are\n * on-surface at 38%. M3 radio buttons have no error colour. The control and state layer\n * come from `selectionControlStyles`. The selected and unselected colours come from the radio\n * button's component tokens (`radio-tokens.ts`, `--md-comp-radio-button-*`), resolved on the\n * ring; a consumer class (`classNames.ring`) still wins in `cn()`. Every class is written\n * out in full.\n */\n\n/** Variant definitions for {@link Radio}. */\nexport const radioStyles = tv({\n  extend: selectionControlStyles,\n  slots: {\n    ring: [\n      'relative inline-flex size-[20px] items-center justify-center rounded-full',\n      'border-2 border-solid border-[color:var(--_md-comp-radio-button-unselected-icon-color)]',\n      // The dot is `bg-current`.\n      'text-[color:var(--_md-comp-radio-button-selected-icon-color)]',\n      '[transition-property:border-color,color]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      'group-data-hovered/control:border-on-surface',\n      'group-data-focus-visible/control:border-on-surface',\n      'group-data-pressed/control:border-on-surface',\n      'control-checked:border-[color:var(--_md-comp-radio-button-selected-icon-color)]',\n      'group-data-disabled/control:border-on-surface/38 group-data-disabled/control:text-on-surface/38',\n      // Stacked so disabled also wins over the selected colour (equal specificity otherwise).\n      'group-data-disabled/control:control-checked:border-on-surface/38',\n      'group-data-disabled/control:[transition-duration:0s]',\n      // Forced colours: the ring and its dot (`bg-current`, a background forced colours would\n      // drop) in system colours, `GrayText` when disabled.\n      'forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:text-[CanvasText]!',\n      'forced-colors:group-data-disabled/control:border-[GrayText]! forced-colors:group-data-disabled/control:text-[GrayText]!',\n    ],\n    dot: [\n      'size-[10px] scale-0 rounded-full bg-current',\n      '[transition-property:scale]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'control-checked:scale-100',\n    ],\n  },\n});\n\n/** Variant definitions for {@link RadioGroup}. */\nexport const radioGroupStyles = tv({\n  slots: {\n    root: 'flex flex-col gap-[4px]',\n    label: 'text-title-small text-on-surface',\n    // Rows are 2px further apart per density step (half of what each option loses), so an\n    // option's 48px touch target never reaches the next one's ring (0px at 0, 6px at -3).\n    options: 'flex gap-y-[calc(0px-var(--md-sys-density,0)*2px)]',\n    supporting: 'px-[4px]',\n  },\n  variants: {\n    orientation: {\n      vertical: { options: 'flex-col' },\n      horizontal: { options: 'flex-row flex-wrap gap-x-[16px]' },\n    },\n    disabled: {\n      true: { label: 'text-on-surface/38' },\n      false: {},\n    },\n  },\n  defaultVariants: { orientation: 'vertical', disabled: false },\n});\n\n/**\n * The variants of {@link radioStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type RadioStyleProps = VariantProps<typeof radioStyles>;\n/**\n * The variants of {@link radioGroupStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type RadioGroupStyleProps = VariantProps<typeof radioGroupStyles>;\n"],"mappings":";;;;AAgBA,MAAa,cAAc,GAAG;CAC5B,QAAQ;CACR,OAAO;EACL,MAAM;GACJ;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GAGA;GACA;EACF;EACA,KAAK;GACH;GACA;GACA;GACA;GACA;EACF;CACF;AACF,CAAC;;AAGD,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,OAAO;EAGP,SAAS;EACT,YAAY;CACd;CACA,UAAU;EACR,aAAa;GACX,UAAU,EAAE,SAAS,WAAW;GAChC,YAAY,EAAE,SAAS,kCAAkC;EAC3D;EACA,UAAU;GACR,MAAM,EAAE,OAAO,qBAAqB;GACpC,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,aAAa;EAAY,UAAU;CAAM;AAC9D,CAAC"}

package/dist/components/radio/radio-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/radio/radio-tokens.d.ts
+/** The tokens of {@link Radio}: `--md-comp-radio-button-<part>`. */
+export declare const radioTokenSet: ComponentTokenSet<"selected-icon-color" | "unselected-icon-color">;
+//#endregion
+//# sourceMappingURL=radio-tokens.d.ts.map

package/dist/components/radio/radio-tokens.js

@@ -0,0 +1,31 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/radio/radio-tokens.ts
+/** The tokens of {@link Radio}: `--md-comp-radio-button-<part>`. */
+const radioTokenSet = defineComponentTokens({
+	name: "md-comp-radio-button",
+	tokens: {
+		"selected-icon-color": {
+			value: color("primary"),
+			description: "The ring and dot of a selected radio button.",
+			compose: "RadioButtonTokens.SelectedIconColor",
+			paints: {
+				property: "border-top-color",
+				slot: "ring",
+				state: "checked"
+			}
+		},
+		"unselected-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The ring of an unselected radio button.",
+			compose: "RadioButtonTokens.UnselectedIconColor",
+			paints: {
+				property: "border-top-color",
+				slot: "ring"
+			}
+		}
+	}
+});
+//#endregion
+export { radioTokenSet };
+
+//# sourceMappingURL=radio-tokens.js.map

package/dist/components/radio/radio-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-tokens.js","names":[],"sources":["../../../src/components/radio/radio-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The radio button's component tokens, M3's `md.comp.radio-button.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's RadioButtonTokens defaults. The\n * drawn ring (`radio-ring.tsx`) carries `data-tokens`, so list items that are radio buttons\n * read the same tokens; the radio's root carries it too. Hover, focus, pressed and disabled\n * values stay classes.\n */\n\n/** The tokens of {@link Radio}: `--md-comp-radio-button-<part>`. */\nexport const radioTokenSet = defineComponentTokens({\n  name: 'md-comp-radio-button',\n  tokens: {\n    'selected-icon-color': {\n      value: color('primary'),\n      description: 'The ring and dot of a selected radio button.',\n      compose: 'RadioButtonTokens.SelectedIconColor',\n      paints: { property: 'border-top-color', slot: 'ring', state: 'checked' },\n    },\n    'unselected-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The ring of an unselected radio button.',\n      compose: 'RadioButtonTokens.UnselectedIconColor',\n      paints: { property: 'border-top-color', slot: 'ring' },\n    },\n  },\n});\n"],"mappings":";;;AAWA,MAAa,gBAAgB,sBAAsB;CACjD,MAAM;CACN,QAAQ;EACN,uBAAuB;GACrB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAQ,OAAO;GAAU;EACzE;EACA,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAO;EACvD;CACF;AACF,CAAC"}

package/dist/components/search/SearchAppBar.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithRef, ReactNode, RefObject } from "react";
+//#region src/components/search/SearchAppBar.d.ts
+export interface SearchAppBarClassNames {
+  /** The `<header>` container, merged with `className`. */
+  root?: string;
+  /** The leading slot holding `navigationIcon`. */
+  navigation?: string;
+  /** The area holding the search bar. */
+  search?: string;
+  /** The trailing slot holding `actions`. */
+  actions?: string;
+}
+interface SearchAppBarOwnProps {
+  /** The `SearchBar`. It fills the free space, up to 720px, centred. */
+  children: ReactNode;
+  /** A leading control, e.g. a menu `IconButton`. */
+  navigationIcon?: ReactNode;
+  /** Trailing controls, e.g. an avatar or `IconButton`s. */
+  actions?: ReactNode;
+  /**
+   * Respond to content scrolling under the bar: it sticks to the top and turns
+   * `surface-container` (its search bar `surface-container-highest`); `enter-always` also
+   * hides it on scroll down and brings it back on any scroll up. Leave it out for a static
+   * bar positioned by the consumer.
+   */
+  scrollBehavior?: 'pinned' | 'enter-always';
+  /** The scroll container the bar responds to. Defaults to the window. */
+  scrollRef?: RefObject<HTMLElement | null>;
+  /** Classes for each part, by slot. */
+  classNames?: SearchAppBarClassNames;
+}
+export type SearchAppBarProps = SearchAppBarOwnProps & Omit<ComponentPropsWithRef<'header'>, keyof SearchAppBarOwnProps>;
+/**
+ * M3 Expressive app bar with search (Compose's `AppBarWithSearch`): a top bar whose middle
+ * is a search bar, with an optional navigation icon and actions.
+ *
+ * @example
+ * <SearchAppBar navigationIcon={<IconButton icon={<MenuIcon />} aria-label="Menu" />}
+ *   actions={<Avatar />} scrollBehavior="enter-always">
+ *   <SearchBar aria-label="Search" placeholder="Search" leadingIcon={<SearchIcon />} />
+ * </SearchAppBar>
+ */
+export declare function SearchAppBar({ children, navigationIcon, actions, scrollBehavior, scrollRef, classNames, className, ref, ...rest }: SearchAppBarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SearchAppBar.d.ts.map