@arun-dev/headless 2.1.0 → 3.0.1

package/dist/switch/index.cjs

@@ -31,11 +31,44 @@ __export(index_parts_exports, {
   Thumb: () => SwitchThumb
 });
 
-// src/switch/root/SwitchRoot.tsx
-var import_react5 = require("react");
+// src/switch/SwitchRoot.tsx
+var import_react4 = require("react");
 
-// src/useButton.ts
+// src/core/useControlled.ts
 var import_react = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/useRender.ts
+var import_react2 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -69,18 +102,9 @@ function isSyntheticEvent(event) {
 function makeEventPreventable(event) {
   if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
   const target = event;
-  const prevent = () => {
+  target.preventComponentHandler = () => {
     target.componentHandlerPrevented = true;
   };
-  target.preventComponentHandler = prevent;
-  const native = event.nativeEvent;
-  const stopImmediate = native?.stopImmediatePropagation?.bind(native);
-  if (native && stopImmediate) {
-    native.stopImmediatePropagation = () => {
-      stopImmediate();
-      prevent();
-    };
-  }
 }
 function isComponentHandlerPrevented(event) {
   return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
@@ -118,189 +142,45 @@ function mergeProps(...objects) {
   return merged;
 }
 
-// src/useButton.ts
-var ACTIVATION_HANDLERS = [
-  "onClick",
-  "onDoubleClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onPointerDown",
-  "onPointerUp",
-  "onTouchStart",
-  "onTouchEnd",
-  "onKeyDown",
-  "onKeyUp",
-  "onKeyPress"
-];
-function activationHandlers() {
-  return {
-    onKeyDown(event) {
-      if (event.target !== event.currentTarget || event.defaultPrevented) return;
-      if (event.key === " ") {
-        event.preventDefault();
-        return;
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-        click(event.currentTarget);
-      }
-    },
-    onKeyUp(event) {
-      if (event.target !== event.currentTarget || event.defaultPrevented) return;
-      if (event.key === " ") click(event.currentTarget);
-    }
-  };
-}
-function click(element) {
-  if (element && typeof element.click === "function") {
-    element.click();
-  }
-}
-function useButton({
-  disabled = false,
-  native,
-  props = {}
-}) {
-  const elementRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (process.env.NODE_ENV === "production") return;
-    const element = elementRef.current;
-    if (!element) return;
-    const isButtonTag = element.tagName === "BUTTON";
-    if (native && !isButtonTag) {
-      console.error(
-        `A component expected a native <button> but rendered <${element.tagName.toLowerCase()}>. Focus, keyboard activation and \`disabled\` will not behave natively.`
-      );
-    } else if (!native && isButtonTag) {
-      console.error(
-        "A component rendered a native <button> while treating it as a non-native element, so it carries synthesised attributes it does not need."
-      );
-    }
-  }, [native]);
-  return { props: buttonProps({ disabled, native, props }), ref: elementRef };
-}
-function buttonProps({ disabled, native, props }) {
-  if (!disabled) {
-    return native ? mergeProps({ type: "button" }, props) : mergeProps({ tabIndex: 0 }, activationHandlers(), props);
-  }
-  if (native) return mergeProps({ type: "button" }, props, { disabled: true, "data-disabled": "" });
-  const sanitised = {};
-  for (const key of Object.keys(props)) {
-    if (key === "href" || ACTIVATION_HANDLERS.includes(key)) continue;
-    sanitised[key] = props[key];
-  }
-  return {
-    ...sanitised,
-    "aria-disabled": true,
-    "data-disabled": "",
-    // Mirrors a native disabled button, which is not focusable.
-    tabIndex: -1
-  };
-}
-function retractActivationProps(props) {
-  const overrides = {};
-  for (const key of Object.keys(props)) {
-    if (key === "href" || ACTIVATION_HANDLERS.includes(key)) overrides[key] = void 0;
-  }
-  return overrides;
-}
-
-// src/core/useControlled.ts
-var import_react2 = require("react");
-function useControlled({
-  controlled,
-  default: defaultValue,
-  name = "Component",
-  state = "value"
-}) {
-  const { current: isControlled } = (0, import_react2.useRef)(controlled !== void 0);
-  const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(defaultValue);
-  const defaultRef = (0, import_react2.useRef)(defaultValue);
-  const value = isControlled ? controlled : uncontrolled;
-  if (process.env.NODE_ENV !== "production") {
-    if (isControlled !== (controlled !== void 0)) {
-      console.error(
-        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
-      );
-    }
-    if (!isControlled && defaultRef.current !== defaultValue) {
-      console.error(
-        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
-      );
-    }
-  }
-  const setValue = (0, import_react2.useCallback)(
-    (next) => {
-      if (!isControlled) setUncontrolled(next);
-    },
-    [isControlled]
-  );
-  return [value, setValue];
-}
-
-// src/core/useRender.ts
-var import_react3 = require("react");
-
-// src/core/stateAttributes.ts
-function getStateAttributes(state, mapping) {
-  if (!mapping) return {};
-  const attributes = {};
-  for (const key of Object.keys(state)) {
-    const toAttributes = mapping[key];
-    if (!toAttributes) continue;
-    const result = toAttributes(state[key]);
-    if (result) Object.assign(attributes, result);
-  }
-  return attributes;
-}
-function booleanAttribute(whenTrue, whenFalse) {
-  return (value) => {
-    if (value) return { [whenTrue]: "" };
-    return whenFalse ? { [whenFalse]: "" } : null;
-  };
-}
-var disabledAttribute = booleanAttribute("data-disabled");
-
 // src/core/useRender.ts
 function useRender({
   render,
   defaultTagName,
   props,
-  consumerProps,
-  state,
-  stateAttributes
+  consumerProps
 }) {
-  const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, props, consumerProps);
-  if ((0, import_react3.isValidElement)(render)) {
-    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react2.isValidElement)(render)) {
+    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react3.createElement)(defaultTagName, merged);
+  return (0, import_react2.createElement)(defaultTagName, merged);
 }
 
 // src/switch/SwitchRootContext.ts
-var import_react4 = require("react");
-var SwitchRootContext = (0, import_react4.createContext)(null);
+var import_react3 = require("react");
+var SwitchRootContext = (0, import_react3.createContext)(null);
 function useSwitchRootContext() {
-  const context = (0, import_react4.useContext)(SwitchRootContext);
+  const context = (0, import_react3.useContext)(SwitchRootContext);
   if (context === null) {
     throw new Error("<Switch.Thumb> must be rendered inside <Switch.Root>.");
   }
   return context;
 }
 
-// src/switch/stateAttributes.ts
-var switchStateAttributes = {
-  checked: booleanAttribute("data-checked", "data-unchecked"),
-  disabled: disabledAttribute
-};
+// src/switch/switchDataAttributes.ts
+function switchDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked ? "" : void 0,
+    "data-unchecked": checked ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
 
-// src/switch/root/SwitchRoot.tsx
+// src/switch/SwitchRoot.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function SwitchRoot({
   checked: checkedProp,
   defaultChecked,
-  nativeButton,
   onCheckedChange,
   disabled = false,
   name,
@@ -316,54 +196,92 @@ function SwitchRoot({
     name: "Switch.Root",
     state: "checked"
   });
-  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
-  const isNativeButton = nativeButton ?? (render === void 0 || render.type === "button");
-  const { props: consumerProps, ref: buttonRef } = useButton({
-    disabled,
-    native: isNativeButton,
-    props: rest
-  });
-  const safeRender = disabled && !isNativeButton && render !== void 0 ? (0, import_react5.cloneElement)(render, retractActivationProps(render.props)) : render;
+  const state = (0, import_react4.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = (0, import_react4.useRef)(null);
+  const inputRef = (0, import_react4.useRef)(null);
+  useNativeButtonWarning(elementRef);
+  useFormReset({ elementRef, inputRef, checked, setChecked, onCheckedChange });
   const element = useRender({
-    render: safeRender,
+    render,
     defaultTagName: "button",
-    state,
-    stateAttributes: switchStateAttributes,
     props: {
+      // Without this a switch inside a form would submit it on every toggle.
+      type: "button",
       role: "switch",
       "aria-checked": checked,
+      // The platform suppresses activation, focus and the click handler below.
+      disabled: disabled || void 0,
+      ...switchDataAttributes(state),
       className,
       children,
-      ref: buttonRef,
+      ref: elementRef,
       onClick() {
-        if (disabled) return;
         const next = !checked;
         setChecked(next);
         onCheckedChange?.(next);
       }
     },
-    consumerProps
+    consumerProps: rest
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SwitchRootContext.Provider, { value: state, children: [
     element,
-    name !== void 0 && checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name, value }) : null
+    name !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        hidden: true,
+        readOnly: true,
+        name,
+        value,
+        checked,
+        disabled
+      }
+    ) : null
   ] });
 }
-
-// src/switch/thumb/SwitchThumb.tsx
-function SwitchThumb({
-  className,
-  children,
-  render,
-  ...rest
+function useFormReset({
+  elementRef,
+  inputRef,
+  checked,
+  setChecked,
+  onCheckedChange
 }) {
+  const { current: initialChecked } = (0, import_react4.useRef)(checked);
+  (0, import_react4.useEffect)(() => {
+    const form = elementRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (inputRef.current) inputRef.current.checked = checked;
+        if (checked === initialChecked) return;
+        setChecked(initialChecked);
+        onCheckedChange?.(initialChecked);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [elementRef, inputRef, checked, setChecked, onCheckedChange, initialChecked]);
+}
+function useNativeButtonWarning(elementRef) {
+  (0, import_react4.useEffect)(() => {
+    if (process.env.NODE_ENV === "production") return;
+    const element = elementRef.current;
+    if (!element || element.tagName === "BUTTON") return;
+    console.error(
+      `Switch.Root rendered <${element.tagName.toLowerCase()}> instead of <button>. Focus, Space and Enter activation and \`disabled\` all come from the button element; pass a \`render\` component that forwards its props to one.`
+    );
+  }, [elementRef]);
+}
+
+// src/switch/SwitchThumb.tsx
+function SwitchThumb({ className, children, render, ...rest }) {
   const state = useSwitchRootContext();
   return useRender({
     render,
     defaultTagName: "span",
-    state,
-    stateAttributes: switchStateAttributes,
-    props: { "aria-hidden": true, className, children },
+    props: { "aria-hidden": true, ...switchDataAttributes(state), className, children },
     consumerProps: rest
   });
 }

package/dist/switch/index.d.cts

@@ -1,7 +1,17 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, Ref } from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
 
-interface SwitchRootProps {
+/**
+ * Switch.Root's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*`, event handlers — comes from React's own `<button>` props, so it is typed
+ * and checked without being declared here.
+ *
+ * `id` in particular is how a switch gets an accessible name, paired with a
+ * `<label htmlFor>`. A wrapping `<label>` names the rendered `<button>` too, but
+ * `jsx-a11y/label-has-associated-control` rejects a button as a nested control, so the
+ * explicit pairing is the one that passes lint.
+ */
+type SwitchRootOwnProps = {
     /**
      * Controlled state. Provide `onCheckedChange` alongside it.
      *
@@ -12,64 +22,57 @@ interface SwitchRootProps {
     checked?: boolean;
     /** Initial state when uncontrolled. Read once, at mount. */
     defaultChecked?: boolean;
-    /**
-     * Whether the rendered element is a native `<button>`.
-     *
-     * Inferred from `render`, which is right for an element literal. Set it explicitly
-     * when rendering a *component* — `render={<Tooltip.Trigger />}` cannot be inspected,
-     * so it is treated as non-native and picks up attributes it does not need. A mismatch
-     * logs a development warning.
-     */
-    nativeButton?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     /**
      * Submits with the enclosing form when checked, mirroring a native checkbox:
-     * an unchecked control contributes nothing.
+     * an unchecked or disabled control contributes nothing.
      */
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
     /**
-     * Names the switch when paired with a `<label htmlFor>`.
-     *
-     * Declared rather than left to the prop spread because it is how a switch gets an
-     * accessible name: `Switch.Root` renders a `<button>`, which a wrapping `<label>`
-     * would name implicitly, but `jsx-a11y/label-has-associated-control` rejects a
-     * `<button>` as a nested control. The explicit association keeps the rule quiet
-     * without a disable at the call site.
-     */
-    id?: string;
-    className?: string;
-    children?: ReactNode;
-    /**
-     * Element to render instead of the default `<button>`. Props, className, event
+     * Component to render instead of the default `<button>`. Props, className, event
      * handlers and ref are merged onto it.
+     *
+     * It must render a native `<button>` — a wrapper such as `<Tooltip.Trigger />` that
+     * forwards its props to one. Anything else is reported in development.
      */
     render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchRootProps = SwitchRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof SwitchRootOwnProps>;
 /**
  * A switch — an immediate on/off control, distinct from a checkbox in that it takes
  * effect at once rather than on submit.
  *
- * Renders a native `<button>`, which supplies focusability, Space and Enter
- * activation, and the disabled semantics for free. Per the WAI-ARIA switch pattern
- * it carries `role="switch"` and `aria-checked`.
+ * Always a native `<button>`, which is the whole reason this component is short: the
+ * platform supplies focusability, Space and Enter activation, and `disabled`, so none
+ * of it is synthesised here. Per the WAI-ARIA switch pattern it carries `role="switch"`
+ * and `aria-checked`.
+ *
+ * Inside a form it behaves as a checkbox would there: `form.reset()` returns it to the
+ * state it mounted with. The change is reported through `onCheckedChange`, so a
+ * controlled switch moves only if its parent accepts it.
  *
  * It has no accessible name of its own — pair it with a `<label htmlFor>` by `id`, or
- * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not a headless
- * component should guess.
+ * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not one a
+ * headless component should guess.
  */
-declare function SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps): react.JSX.Element;
 
-interface SwitchThumbProps {
-    className?: string;
-    children?: ReactNode;
+/**
+ * Switch.Thumb's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*` — comes from React's own `<span>` props.
+ */
+type SwitchThumbOwnProps = {
     /** Element to render instead of the default `<span>`. */
     render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchThumbProps = SwitchThumbOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof SwitchThumbOwnProps>;
 /**
  * The moving part of the switch.
  *
@@ -83,17 +86,13 @@ interface SwitchThumbProps {
  * Purely presentational — hidden from assistive technology, since the Root already
  * announces the state.
  */
-declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps & Record<string, unknown>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare namespace index_parts {
   export { SwitchRoot as Root, SwitchThumb as Thumb };
 }
 
-/**
- * A type alias rather than an interface: only aliases get an implicit index
- * signature, which is what lets this satisfy the `Record<string, unknown>` the
- * state-attribute mapper is generic over.
- */
+/** The state Switch.Root shares with its parts, and projects as `data-*` attributes. */
 type SwitchState = {
     checked: boolean;
     disabled: boolean;

package/dist/switch/index.d.ts

@@ -1,7 +1,17 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, Ref } from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
 
-interface SwitchRootProps {
+/**
+ * Switch.Root's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*`, event handlers — comes from React's own `<button>` props, so it is typed
+ * and checked without being declared here.
+ *
+ * `id` in particular is how a switch gets an accessible name, paired with a
+ * `<label htmlFor>`. A wrapping `<label>` names the rendered `<button>` too, but
+ * `jsx-a11y/label-has-associated-control` rejects a button as a nested control, so the
+ * explicit pairing is the one that passes lint.
+ */
+type SwitchRootOwnProps = {
     /**
      * Controlled state. Provide `onCheckedChange` alongside it.
      *
@@ -12,64 +22,57 @@ interface SwitchRootProps {
     checked?: boolean;
     /** Initial state when uncontrolled. Read once, at mount. */
     defaultChecked?: boolean;
-    /**
-     * Whether the rendered element is a native `<button>`.
-     *
-     * Inferred from `render`, which is right for an element literal. Set it explicitly
-     * when rendering a *component* — `render={<Tooltip.Trigger />}` cannot be inspected,
-     * so it is treated as non-native and picks up attributes it does not need. A mismatch
-     * logs a development warning.
-     */
-    nativeButton?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     /**
      * Submits with the enclosing form when checked, mirroring a native checkbox:
-     * an unchecked control contributes nothing.
+     * an unchecked or disabled control contributes nothing.
      */
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
     /**
-     * Names the switch when paired with a `<label htmlFor>`.
-     *
-     * Declared rather than left to the prop spread because it is how a switch gets an
-     * accessible name: `Switch.Root` renders a `<button>`, which a wrapping `<label>`
-     * would name implicitly, but `jsx-a11y/label-has-associated-control` rejects a
-     * `<button>` as a nested control. The explicit association keeps the rule quiet
-     * without a disable at the call site.
-     */
-    id?: string;
-    className?: string;
-    children?: ReactNode;
-    /**
-     * Element to render instead of the default `<button>`. Props, className, event
+     * Component to render instead of the default `<button>`. Props, className, event
      * handlers and ref are merged onto it.
+     *
+     * It must render a native `<button>` — a wrapper such as `<Tooltip.Trigger />` that
+     * forwards its props to one. Anything else is reported in development.
      */
     render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchRootProps = SwitchRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof SwitchRootOwnProps>;
 /**
  * A switch — an immediate on/off control, distinct from a checkbox in that it takes
  * effect at once rather than on submit.
  *
- * Renders a native `<button>`, which supplies focusability, Space and Enter
- * activation, and the disabled semantics for free. Per the WAI-ARIA switch pattern
- * it carries `role="switch"` and `aria-checked`.
+ * Always a native `<button>`, which is the whole reason this component is short: the
+ * platform supplies focusability, Space and Enter activation, and `disabled`, so none
+ * of it is synthesised here. Per the WAI-ARIA switch pattern it carries `role="switch"`
+ * and `aria-checked`.
+ *
+ * Inside a form it behaves as a checkbox would there: `form.reset()` returns it to the
+ * state it mounted with. The change is reported through `onCheckedChange`, so a
+ * controlled switch moves only if its parent accepts it.
  *
  * It has no accessible name of its own — pair it with a `<label htmlFor>` by `id`, or
- * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not a headless
- * component should guess.
+ * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not one a
+ * headless component should guess.
  */
-declare function SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps): react.JSX.Element;
 
-interface SwitchThumbProps {
-    className?: string;
-    children?: ReactNode;
+/**
+ * Switch.Thumb's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*` — comes from React's own `<span>` props.
+ */
+type SwitchThumbOwnProps = {
     /** Element to render instead of the default `<span>`. */
     render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchThumbProps = SwitchThumbOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof SwitchThumbOwnProps>;
 /**
  * The moving part of the switch.
  *
@@ -83,17 +86,13 @@ interface SwitchThumbProps {
  * Purely presentational — hidden from assistive technology, since the Root already
  * announces the state.
  */
-declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps & Record<string, unknown>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare namespace index_parts {
   export { SwitchRoot as Root, SwitchThumb as Thumb };
 }
 
-/**
- * A type alias rather than an interface: only aliases get an implicit index
- * signature, which is what lets this satisfy the `Record<string, unknown>` the
- * state-attribute mapper is generic over.
- */
+/** The state Switch.Root shares with its parts, and projects as `data-*` attributes. */
 type SwitchState = {
     checked: boolean;
     disabled: boolean;