@radix-ui/react-password-toggle-field 0.1.0-rc.1745439717073

package/dist/index.mjs

@@ -0,0 +1,307 @@
+"use client";
+
+// src/password-toggle-field.tsx
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useId } from "@radix-ui/react-id";
+import { useIsHydrated } from "@radix-ui/react-use-is-hydrated";
+import { useEffectEvent } from "@radix-ui/react-use-effect-event";
+import { createContextScope } from "@radix-ui/react-context";
+import { jsx } from "react/jsx-runtime";
+var PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
+var [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);
+var [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
+var INITIAL_FOCUS_STATE = {
+  clickTriggered: false,
+  selectionStart: null,
+  selectionEnd: null
+};
+var PasswordToggleField = ({
+  __scopePasswordToggleField,
+  ...props
+}) => {
+  const baseId = useId(props.id);
+  const defaultInputId = `${baseId}-input`;
+  const [inputIdState, setInputIdState] = React.useState(defaultInputId);
+  const inputId = inputIdState ?? defaultInputId;
+  const syncInputId = React.useCallback(
+    (providedId) => setInputIdState(providedId != null ? String(providedId) : null),
+    []
+  );
+  const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;
+  const [visible = false, setVisible] = useControllableState({
+    caller: PASSWORD_TOGGLE_FIELD_NAME,
+    prop: visibleProp,
+    defaultProp: defaultVisible ?? false,
+    onChange: onVisiblityChange
+  });
+  const inputRef = React.useRef(null);
+  const focusState = React.useRef(INITIAL_FOCUS_STATE);
+  return /* @__PURE__ */ jsx(
+    PasswordToggleFieldProvider,
+    {
+      scope: __scopePasswordToggleField,
+      inputId,
+      inputRef,
+      setVisible,
+      syncInputId,
+      visible,
+      focusState,
+      children
+    }
+  );
+};
+PasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;
+var PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
+var PasswordToggleFieldInput = React.forwardRef(
+  ({
+    __scopePasswordToggleField,
+    autoComplete = "current-password",
+    autoCapitalize = "off",
+    spellCheck = false,
+    id: idProp,
+    ...props
+  }, forwardedRef) => {
+    const { visible, inputRef, inputId, syncInputId, setVisible, focusState } = usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);
+    React.useEffect(() => {
+      syncInputId(idProp);
+    }, [idProp, syncInputId]);
+    const _setVisible = useEffectEvent(setVisible);
+    React.useEffect(() => {
+      const inputElement = inputRef.current;
+      const form = inputElement?.form;
+      if (!form) {
+        return;
+      }
+      const controller = new AbortController();
+      form.addEventListener(
+        "reset",
+        (event) => {
+          if (!event.defaultPrevented) {
+            _setVisible(false);
+          }
+        },
+        { signal: controller.signal }
+      );
+      form.addEventListener(
+        "submit",
+        () => {
+          _setVisible(false);
+        },
+        { signal: controller.signal }
+      );
+      return () => {
+        controller.abort();
+      };
+    }, [inputRef, _setVisible]);
+    return /* @__PURE__ */ jsx(
+      Primitive.input,
+      {
+        ...props,
+        id: idProp ?? inputId,
+        autoCapitalize,
+        autoComplete,
+        ref: useComposedRefs(forwardedRef, inputRef),
+        spellCheck,
+        type: visible ? "text" : "password",
+        onBlur: composeEventHandlers(props.onBlur, (event) => {
+          const { selectionStart, selectionEnd } = event.currentTarget;
+          focusState.current.selectionStart = selectionStart;
+          focusState.current.selectionEnd = selectionEnd;
+        })
+      }
+    );
+  }
+);
+PasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;
+var PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
+var PasswordToggleFieldToggle = React.forwardRef(
+  ({
+    __scopePasswordToggleField,
+    onClick,
+    onPointerDown,
+    onPointerCancel,
+    onPointerUp,
+    onFocus,
+    children,
+    "aria-label": ariaLabelProp,
+    "aria-controls": ariaControls,
+    "aria-hidden": ariaHidden,
+    tabIndex,
+    ...props
+  }, forwardedRef) => {
+    const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(
+      PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
+      __scopePasswordToggleField
+    );
+    const [internalAriaLabel, setInternalAriaLabel] = React.useState(void 0);
+    const elementRef = React.useRef(null);
+    const ref = useComposedRefs(forwardedRef, elementRef);
+    const isHydrated = useIsHydrated();
+    React.useEffect(() => {
+      const element = elementRef.current;
+      if (!element || ariaLabelProp) {
+        setInternalAriaLabel(void 0);
+        return;
+      }
+      const DEFAULT_ARIA_LABEL = visible ? "Hide password" : "Show password";
+      function checkForInnerTextLabel(textContent) {
+        const text = textContent ? textContent : void 0;
+        setInternalAriaLabel(text ? void 0 : DEFAULT_ARIA_LABEL);
+      }
+      checkForInnerTextLabel(element.textContent);
+      const observer = new MutationObserver((entries) => {
+        let textContent;
+        for (const entry of entries) {
+          if (entry.type === "characterData") {
+            if (element.textContent) {
+              textContent = element.textContent;
+            }
+          }
+        }
+        checkForInnerTextLabel(textContent);
+      });
+      observer.observe(element, { characterData: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }, [visible, ariaLabelProp]);
+    const ariaLabel = ariaLabelProp || internalAriaLabel;
+    if (!isHydrated) {
+      ariaHidden ??= true;
+      tabIndex ??= -1;
+    } else {
+      ariaControls ??= inputId;
+    }
+    React.useEffect(() => {
+      let cleanup = () => {
+      };
+      const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;
+      const reset = () => focusState.current.clickTriggered = false;
+      const handlePointerUp = () => cleanup = requestIdleCallback(ownerWindow, reset);
+      ownerWindow.addEventListener("pointerup", handlePointerUp);
+      return () => {
+        cleanup();
+        ownerWindow.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [focusState]);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        "aria-controls": ariaControls,
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaLabel,
+        ref,
+        id: inputId,
+        ...props,
+        onPointerDown: composeEventHandlers(onPointerDown, () => {
+          focusState.current.clickTriggered = true;
+        }),
+        onPointerCancel: (event) => {
+          onPointerCancel?.(event);
+          focusState.current = INITIAL_FOCUS_STATE;
+        },
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) {
+            focusState.current = INITIAL_FOCUS_STATE;
+            return;
+          }
+          flushSync(() => {
+            setVisible((s) => !s);
+          });
+          if (focusState.current.clickTriggered) {
+            const input = inputRef.current;
+            if (input) {
+              const { selectionStart, selectionEnd } = focusState.current;
+              input.focus();
+              if (selectionStart !== null || selectionEnd !== null) {
+                requestAnimationFrame(() => {
+                  if (input.ownerDocument.activeElement === input) {
+                    input.selectionStart = selectionStart;
+                    input.selectionEnd = selectionEnd;
+                  }
+                });
+              }
+            }
+          }
+          focusState.current = INITIAL_FOCUS_STATE;
+        },
+        onPointerUp: (event) => {
+          onPointerUp?.(event);
+          setTimeout(() => {
+            focusState.current = INITIAL_FOCUS_STATE;
+          }, 50);
+        },
+        type: "button",
+        children
+      }
+    );
+  }
+);
+PasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;
+var PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
+var PasswordToggleFieldSlot = ({
+  __scopePasswordToggleField,
+  ...props
+}) => {
+  const { visible } = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_SLOT_NAME,
+    __scopePasswordToggleField
+  );
+  return "render" in props ? (
+    //
+    props.render({ visible })
+  ) : visible ? props.visible : props.hidden;
+};
+PasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;
+var PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
+var PasswordToggleFieldIcon = React.forwardRef(
+  ({
+    __scopePasswordToggleField,
+    // @ts-expect-error
+    children,
+    ...props
+  }, forwardedRef) => {
+    const { visible } = usePasswordToggleFieldContext(
+      PASSWORD_TOGGLE_FIELD_ICON_NAME,
+      __scopePasswordToggleField
+    );
+    const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;
+    return /* @__PURE__ */ jsx(Primitive.svg, { ...domProps, ref: forwardedRef, "aria-hidden": true, asChild: true, children: visible ? visibleIcon : hiddenIcon });
+  }
+);
+PasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;
+function requestIdleCallback(window2, callback, options) {
+  if (window2.requestIdleCallback) {
+    const id2 = window2.requestIdleCallback(callback, options);
+    return () => {
+      window2.cancelIdleCallback(id2);
+    };
+  }
+  const start = Date.now();
+  const id = window2.setTimeout(() => {
+    const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));
+    callback({ didTimeout: false, timeRemaining });
+  }, 1);
+  return () => {
+    window2.clearTimeout(id);
+  };
+}
+export {
+  PasswordToggleFieldIcon as Icon,
+  PasswordToggleFieldInput as Input,
+  PasswordToggleField,
+  PasswordToggleFieldIcon,
+  PasswordToggleFieldInput,
+  PasswordToggleFieldSlot,
+  PasswordToggleFieldToggle,
+  PasswordToggleField as Root,
+  PasswordToggleFieldSlot as Slot,
+  PasswordToggleFieldToggle as Toggle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/password-toggle-field.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useId } from '@radix-ui/react-id';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\n\nconst PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype InternalFocusState = {\n  clickTriggered: boolean;\n  selectionStart: number | null;\n  selectionEnd: number | null;\n};\n\ninterface PasswordToggleFieldContextValue {\n  inputId: string;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  visible: boolean;\n  setVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  syncInputId: (providedId: string | number | undefined) => void;\n  focusState: React.RefObject<InternalFocusState>;\n}\n\nconst [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);\nconst [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =\n  createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };\n\ninterface PasswordToggleFieldProps {\n  id?: string;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onVisiblityChange?: (visible: boolean) => void;\n  children?: React.ReactNode;\n}\n\nconst INITIAL_FOCUS_STATE: InternalFocusState = {\n  clickTriggered: false,\n  selectionStart: null,\n  selectionEnd: null,\n};\n\nconst PasswordToggleField: React.FC<PasswordToggleFieldProps> = ({\n  __scopePasswordToggleField,\n  ...props\n}: ScopedProps<PasswordToggleFieldProps>) => {\n  const baseId = useId(props.id);\n  const defaultInputId = `${baseId}-input`;\n  const [inputIdState, setInputIdState] = React.useState<null | string>(defaultInputId);\n  const inputId = inputIdState ?? defaultInputId;\n  const syncInputId = React.useCallback(\n    (providedId: string | number | undefined) =>\n      setInputIdState(providedId != null ? String(providedId) : null),\n    []\n  );\n\n  const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;\n  const [visible = false, setVisible] = useControllableState({\n    caller: PASSWORD_TOGGLE_FIELD_NAME,\n    prop: visibleProp,\n    defaultProp: defaultVisible ?? false,\n    onChange: onVisiblityChange,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const focusState = React.useRef<InternalFocusState>(INITIAL_FOCUS_STATE);\n\n  return (\n    <PasswordToggleFieldProvider\n      scope={__scopePasswordToggleField}\n      inputId={inputId}\n      inputRef={inputRef}\n      setVisible={setVisible}\n      syncInputId={syncInputId}\n      visible={visible}\n      focusState={focusState}\n    >\n      {children}\n    </PasswordToggleFieldProvider>\n  );\n};\nPasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';\n\ntype PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;\n\ninterface PasswordToggleFieldOwnProps {\n  autoComplete?: 'current-password' | 'new-password';\n}\n\ninterface PasswordToggleFieldInputProps\n  extends PasswordToggleFieldOwnProps,\n    Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {\n  autoComplete?: 'current-password' | 'new-password';\n}\n\nconst PasswordToggleFieldInput = React.forwardRef<HTMLInputElement, PasswordToggleFieldInputProps>(\n  (\n    {\n      __scopePasswordToggleField,\n      autoComplete = 'current-password',\n      autoCapitalize = 'off',\n      spellCheck = false,\n      id: idProp,\n      ...props\n    }: ScopedProps<PasswordToggleFieldInputProps>,\n    forwardedRef\n  ) => {\n    const { visible, inputRef, inputId, syncInputId, setVisible, focusState } =\n      usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);\n\n    React.useEffect(() => {\n      syncInputId(idProp);\n    }, [idProp, syncInputId]);\n\n    // We want to reset the visibility to `false` to revert the input to\n    // `type=\"password\"` when:\n    // - The form is reset (for consistency with other form controls)\n    // - The form is submitted (to prevent the browser from remembering the\n    //   input's value.\n    //\n    // See \"Keeping things secure\":\n    //   https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/)\n    const _setVisible = useEffectEvent(setVisible);\n    React.useEffect(() => {\n      const inputElement = inputRef.current;\n      const form = inputElement?.form;\n      if (!form) {\n        return;\n      }\n\n      const controller = new AbortController();\n      form.addEventListener(\n        'reset',\n        (event) => {\n          if (!event.defaultPrevented) {\n            _setVisible(false);\n          }\n        },\n        { signal: controller.signal }\n      );\n      form.addEventListener(\n        'submit',\n        () => {\n          // always reset the visibility on submit regardless of whether the\n          // default action is prevented\n          _setVisible(false);\n        },\n        { signal: controller.signal }\n      );\n      return () => {\n        controller.abort();\n      };\n    }, [inputRef, _setVisible]);\n\n    return (\n      <Primitive.input\n        {...props}\n        id={idProp ?? inputId}\n        autoCapitalize={autoCapitalize}\n        autoComplete={autoComplete}\n        ref={useComposedRefs(forwardedRef, inputRef)}\n        spellCheck={spellCheck}\n        type={visible ? 'text' : 'password'}\n        onBlur={composeEventHandlers(props.onBlur, (event) => {\n          // get the cursor position\n          const { selectionStart, selectionEnd } = event.currentTarget;\n          focusState.current.selectionStart = selectionStart;\n          focusState.current.selectionEnd = selectionEnd;\n        })}\n      />\n    );\n  }\n);\nPasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldToggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';\n\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;\n\ninterface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {}\n\nconst PasswordToggleFieldToggle = React.forwardRef<\n  HTMLButtonElement,\n  PasswordToggleFieldToggleProps\n>(\n  (\n    {\n      __scopePasswordToggleField,\n      onClick,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onFocus,\n      children,\n      'aria-label': ariaLabelProp,\n      'aria-controls': ariaControls,\n      'aria-hidden': ariaHidden,\n      tabIndex,\n      ...props\n    }: ScopedProps<PasswordToggleFieldToggleProps>,\n    forwardedRef\n  ) => {\n    const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(\n      PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,\n      __scopePasswordToggleField\n    );\n    const [internalAriaLabel, setInternalAriaLabel] = React.useState<string | undefined>(undefined);\n    const elementRef = React.useRef<HTMLButtonElement>(null);\n    const ref = useComposedRefs(forwardedRef, elementRef);\n    const isHydrated = useIsHydrated();\n\n    React.useEffect(() => {\n      const element = elementRef.current;\n      if (!element || ariaLabelProp) {\n        setInternalAriaLabel(undefined);\n        return;\n      }\n\n      const DEFAULT_ARIA_LABEL = visible ? 'Hide password' : 'Show password';\n\n      function checkForInnerTextLabel(textContent: string | undefined | null) {\n        const text = textContent ? textContent : undefined;\n        // If the element has inner text, no need to force an aria-label.\n        setInternalAriaLabel(text ? undefined : DEFAULT_ARIA_LABEL);\n      }\n\n      checkForInnerTextLabel(element.textContent);\n\n      const observer = new MutationObserver((entries) => {\n        let textContent: string | undefined;\n        for (const entry of entries) {\n          if (entry.type === 'characterData') {\n            if (element.textContent) {\n              textContent = element.textContent;\n            }\n          }\n        }\n        checkForInnerTextLabel(textContent);\n      });\n      observer.observe(element, { characterData: true, subtree: true });\n      return () => {\n        observer.disconnect();\n      };\n    }, [visible, ariaLabelProp]);\n\n    const ariaLabel = ariaLabelProp || internalAriaLabel;\n\n    // Before hydration the button will not work, but we want to render it\n    // regardless to prevent potential layout shift. Hide it from assistive tech\n    // by default. Post-hydration it will be visible, focusable and associated\n    // with the input via aria-controls.\n    if (!isHydrated) {\n      ariaHidden ??= true;\n      tabIndex ??= -1;\n    } else {\n      ariaControls ??= inputId;\n    }\n\n    React.useEffect(() => {\n      let cleanup = () => {};\n      const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;\n      const reset = () => (focusState.current.clickTriggered = false);\n      const handlePointerUp = () => (cleanup = requestIdleCallback(ownerWindow, reset));\n      ownerWindow.addEventListener('pointerup', handlePointerUp);\n      return () => {\n        cleanup();\n        ownerWindow.removeEventListener('pointerup', handlePointerUp);\n      };\n    }, [focusState]);\n\n    return (\n      <Primitive.button\n        aria-controls={ariaControls}\n        aria-hidden={ariaHidden}\n        aria-label={ariaLabel}\n        ref={ref}\n        id={inputId}\n        {...props}\n        onPointerDown={composeEventHandlers(onPointerDown, () => {\n          focusState.current.clickTriggered = true;\n        })}\n        onPointerCancel={(event) => {\n          // do not use `composeEventHandlers` here because we always want to\n          // reset the ref on cancellation, regardless of whether the user has\n          // called preventDefault on the event\n          onPointerCancel?.(event);\n          focusState.current = INITIAL_FOCUS_STATE;\n        }}\n        // do not use `composeEventHandlers` here because we always want to\n        // reset the ref after click, regardless of whether the user has\n        // called preventDefault on the event\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) {\n            focusState.current = INITIAL_FOCUS_STATE;\n            return;\n          }\n\n          flushSync(() => {\n            setVisible((s) => !s);\n          });\n          if (focusState.current.clickTriggered) {\n            const input = inputRef.current;\n            if (input) {\n              const { selectionStart, selectionEnd } = focusState.current;\n              input.focus();\n              if (selectionStart !== null || selectionEnd !== null) {\n                // wait a tick so that focus has settled, then restore select position\n                requestAnimationFrame(() => {\n                  // make sure the input still has focus (developer may have\n                  // programatically moved focus elsewhere)\n                  if (input.ownerDocument.activeElement === input) {\n                    input.selectionStart = selectionStart;\n                    input.selectionEnd = selectionEnd;\n                  }\n                });\n              }\n            }\n          }\n          focusState.current = INITIAL_FOCUS_STATE;\n        }}\n        onPointerUp={(event) => {\n          onPointerUp?.(event);\n          // if click handler hasn't been called at this point, it may have been\n          // intercepted, in which case we still want to reset our internal\n          // state\n          setTimeout(() => {\n            focusState.current = INITIAL_FOCUS_STATE;\n          }, 50);\n        }}\n        type=\"button\"\n      >\n        {children}\n      </Primitive.button>\n    );\n  }\n);\nPasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldSlot\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';\n\ninterface PasswordToggleFieldSlotDeclarativeProps {\n  visible: React.ReactNode;\n  hidden: React.ReactNode;\n}\n\ninterface PasswordToggleFieldSlotRenderProps {\n  render: (args: { visible: boolean }) => React.ReactElement;\n}\n\ntype PasswordToggleFieldSlotProps =\n  | PasswordToggleFieldSlotDeclarativeProps\n  | PasswordToggleFieldSlotRenderProps;\n\nconst PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps> = ({\n  __scopePasswordToggleField,\n  ...props\n}: ScopedProps<PasswordToggleFieldSlotProps>) => {\n  const { visible } = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_SLOT_NAME,\n    __scopePasswordToggleField\n  );\n\n  return 'render' in props\n    ? //\n      props.render({ visible })\n    : visible\n      ? props.visible\n      : props.hidden;\n};\nPasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';\n\ntype PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;\n\ninterface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {\n  visible: React.ReactElement;\n  hidden: React.ReactElement;\n}\n\nconst PasswordToggleFieldIcon = React.forwardRef<SVGSVGElement, PasswordToggleFieldIconProps>(\n  (\n    {\n      __scopePasswordToggleField,\n      // @ts-expect-error\n      children,\n      ...props\n    }: ScopedProps<PasswordToggleFieldIconProps>,\n    forwardedRef\n  ) => {\n    const { visible } = usePasswordToggleFieldContext(\n      PASSWORD_TOGGLE_FIELD_ICON_NAME,\n      __scopePasswordToggleField\n    );\n    const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;\n    return (\n      <Primitive.svg {...domProps} ref={forwardedRef} aria-hidden asChild>\n        {visible ? visibleIcon : hiddenIcon}\n      </Primitive.svg>\n    );\n  }\n);\nPasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;\n\nexport {\n  PasswordToggleField,\n  PasswordToggleFieldInput,\n  PasswordToggleFieldToggle,\n  PasswordToggleFieldSlot,\n  PasswordToggleFieldIcon,\n  //\n  PasswordToggleField as Root,\n  PasswordToggleFieldInput as Input,\n  PasswordToggleFieldToggle as Toggle,\n  PasswordToggleFieldSlot as Slot,\n  PasswordToggleFieldIcon as Icon,\n};\nexport type {\n  PasswordToggleFieldProps,\n  PasswordToggleFieldInputProps,\n  PasswordToggleFieldToggleProps,\n  PasswordToggleFieldIconProps,\n  PasswordToggleFieldSlotProps,\n};\n\nfunction requestIdleCallback(\n  window: Window,\n  callback: IdleRequestCallback,\n  options?: IdleRequestOptions\n): () => void {\n  if ((window as any).requestIdleCallback) {\n    const id = window.requestIdleCallback(callback, options);\n    return () => {\n      window.cancelIdleCallback(id);\n    };\n  }\n  const start = Date.now();\n  const id = window.setTimeout(() => {\n    const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));\n    callback({ didTimeout: false, timeRemaining });\n  }, 1);\n  return () => {\n    window.clearTimeout(id);\n  };\n}\n"],
+  "mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAyE/B;AAvEJ,IAAM,6BAA6B;AAqBnC,IAAM,CAAC,gCAAgC,IAAI,mBAAmB,0BAA0B;AACxF,IAAM,CAAC,6BAA6B,6BAA6B,IAC/D,iCAAkE,0BAA0B;AAgB9F,IAAM,sBAA0C;AAAA,EAC9C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAChB;AAEA,IAAM,sBAA0D,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MAA6C;AAC3C,QAAM,SAAS,MAAM,MAAM,EAAE;AAC7B,QAAM,iBAAiB,GAAG,MAAM;AAChC,QAAM,CAAC,cAAc,eAAe,IAAU,eAAwB,cAAc;AACpF,QAAM,UAAU,gBAAgB;AAChC,QAAM,cAAoB;AAAA,IACxB,CAAC,eACC,gBAAgB,cAAc,OAAO,OAAO,UAAU,IAAI,IAAI;AAAA,IAChE,CAAC;AAAA,EACH;AAEA,QAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmB,SAAS,IAAI;AAC9E,QAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,IACzD,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,WAAiB,aAAgC,IAAI;AAC3D,QAAM,aAAmB,aAA2B,mBAAmB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AACA,oBAAoB,cAAc;AAMlC,IAAM,mCAAmC,6BAA6B;AActE,IAAM,2BAAiC;AAAA,EACrC,CACE;AAAA,IACE;AAAA,IACA,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,EAAE,SAAS,UAAU,SAAS,aAAa,YAAY,WAAW,IACtE,8BAA8B,kCAAkC,0BAA0B;AAE5F,IAAM,gBAAU,MAAM;AACpB,kBAAY,MAAM;AAAA,IACpB,GAAG,CAAC,QAAQ,WAAW,CAAC;AAUxB,UAAM,cAAc,eAAe,UAAU;AAC7C,IAAM,gBAAU,MAAM;AACpB,YAAM,eAAe,SAAS;AAC9B,YAAM,OAAO,cAAc;AAC3B,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AAEA,YAAM,aAAa,IAAI,gBAAgB;AACvC,WAAK;AAAA,QACH;AAAA,QACA,CAAC,UAAU;AACT,cAAI,CAAC,MAAM,kBAAkB;AAC3B,wBAAY,KAAK;AAAA,UACnB;AAAA,QACF;AAAA,QACA,EAAE,QAAQ,WAAW,OAAO;AAAA,MAC9B;AACA,WAAK;AAAA,QACH;AAAA,QACA,MAAM;AAGJ,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,EAAE,QAAQ,WAAW,OAAO;AAAA,MAC9B;AACA,aAAO,MAAM;AACX,mBAAW,MAAM;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,WACE;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACE,GAAG;AAAA,QACJ,IAAI,UAAU;AAAA,QACd;AAAA,QACA;AAAA,QACA,KAAK,gBAAgB,cAAc,QAAQ;AAAA,QAC3C;AAAA,QACA,MAAM,UAAU,SAAS;AAAA,QACzB,QAAQ,qBAAqB,MAAM,QAAQ,CAAC,UAAU;AAEpD,gBAAM,EAAE,gBAAgB,aAAa,IAAI,MAAM;AAC/C,qBAAW,QAAQ,iBAAiB;AACpC,qBAAW,QAAQ,eAAe;AAAA,QACpC,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;AAMvC,IAAM,oCAAoC,6BAA6B;AAMvE,IAAM,4BAAkC;AAAA,EAItC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,EAAE,YAAY,SAAS,UAAU,SAAS,WAAW,IAAI;AAAA,MAC7D;AAAA,MACA;AAAA,IACF;AACA,UAAM,CAAC,mBAAmB,oBAAoB,IAAU,eAA6B,MAAS;AAC9F,UAAM,aAAmB,aAA0B,IAAI;AACvD,UAAM,MAAM,gBAAgB,cAAc,UAAU;AACpD,UAAM,aAAa,cAAc;AAEjC,IAAM,gBAAU,MAAM;AACpB,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,WAAW,eAAe;AAC7B,6BAAqB,MAAS;AAC9B;AAAA,MACF;AAEA,YAAM,qBAAqB,UAAU,kBAAkB;AAEvD,eAAS,uBAAuB,aAAwC;AACtE,cAAM,OAAO,cAAc,cAAc;AAEzC,6BAAqB,OAAO,SAAY,kBAAkB;AAAA,MAC5D;AAEA,6BAAuB,QAAQ,WAAW;AAE1C,YAAM,WAAW,IAAI,iBAAiB,CAAC,YAAY;AACjD,YAAI;AACJ,mBAAW,SAAS,SAAS;AAC3B,cAAI,MAAM,SAAS,iBAAiB;AAClC,gBAAI,QAAQ,aAAa;AACvB,4BAAc,QAAQ;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AACA,+BAAuB,WAAW;AAAA,MACpC,CAAC;AACD,eAAS,QAAQ,SAAS,EAAE,eAAe,MAAM,SAAS,KAAK,CAAC;AAChE,aAAO,MAAM;AACX,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,UAAM,YAAY,iBAAiB;AAMnC,QAAI,CAAC,YAAY;AACf,qBAAe;AACf,mBAAa;AAAA,IACf,OAAO;AACL,uBAAiB;AAAA,IACnB;AAEA,IAAM,gBAAU,MAAM;AACpB,UAAI,UAAU,MAAM;AAAA,MAAC;AACrB,YAAM,cAAc,WAAW,SAAS,eAAe,eAAe;AACtE,YAAM,QAAQ,MAAO,WAAW,QAAQ,iBAAiB;AACzD,YAAM,kBAAkB,MAAO,UAAU,oBAAoB,aAAa,KAAK;AAC/E,kBAAY,iBAAiB,aAAa,eAAe;AACzD,aAAO,MAAM;AACX,gBAAQ;AACR,oBAAY,oBAAoB,aAAa,eAAe;AAAA,MAC9D;AAAA,IACF,GAAG,CAAC,UAAU,CAAC;AAEf,WACE;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,iBAAe;AAAA,QACf,eAAa;AAAA,QACb,cAAY;AAAA,QACZ;AAAA,QACA,IAAI;AAAA,QACH,GAAG;AAAA,QACJ,eAAe,qBAAqB,eAAe,MAAM;AACvD,qBAAW,QAAQ,iBAAiB;AAAA,QACtC,CAAC;AAAA,QACD,iBAAiB,CAAC,UAAU;AAI1B,4BAAkB,KAAK;AACvB,qBAAW,UAAU;AAAA,QACvB;AAAA,QAIA,SAAS,CAAC,UAAU;AAClB,oBAAU,KAAK;AACf,cAAI,MAAM,kBAAkB;AAC1B,uBAAW,UAAU;AACrB;AAAA,UACF;AAEA,oBAAU,MAAM;AACd,uBAAW,CAAC,MAAM,CAAC,CAAC;AAAA,UACtB,CAAC;AACD,cAAI,WAAW,QAAQ,gBAAgB;AACrC,kBAAM,QAAQ,SAAS;AACvB,gBAAI,OAAO;AACT,oBAAM,EAAE,gBAAgB,aAAa,IAAI,WAAW;AACpD,oBAAM,MAAM;AACZ,kBAAI,mBAAmB,QAAQ,iBAAiB,MAAM;AAEpD,sCAAsB,MAAM;AAG1B,sBAAI,MAAM,cAAc,kBAAkB,OAAO;AAC/C,0BAAM,iBAAiB;AACvB,0BAAM,eAAe;AAAA,kBACvB;AAAA,gBACF,CAAC;AAAA,cACH;AAAA,YACF;AAAA,UACF;AACA,qBAAW,UAAU;AAAA,QACvB;AAAA,QACA,aAAa,CAAC,UAAU;AACtB,wBAAc,KAAK;AAInB,qBAAW,MAAM;AACf,uBAAW,UAAU;AAAA,UACvB,GAAG,EAAE;AAAA,QACP;AAAA,QACA,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,0BAA0B,cAAc;AAMxC,IAAM,kCAAkC,6BAA6B;AAerE,IAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MAAiD;AAC/C,QAAM,EAAE,QAAQ,IAAI;AAAA,IAClB;AAAA,IACA;AAAA,EACF;AAEA,SAAO,YAAY;AAAA;AAAA,IAEf,MAAM,OAAO,EAAE,QAAQ,CAAC;AAAA,MACxB,UACE,MAAM,UACN,MAAM;AACd;AACA,wBAAwB,cAAc;AAMtC,IAAM,kCAAkC,6BAA6B;AASrE,IAAM,0BAAgC;AAAA,EACpC,CACE;AAAA,IACE;AAAA;AAAA,IAEA;AAAA,IACA,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,EAAE,QAAQ,IAAI;AAAA,MAClB;AAAA,MACA;AAAA,IACF;AACA,UAAM,EAAE,SAAS,aAAa,QAAQ,YAAY,GAAG,SAAS,IAAI;AAClE,WACE,oBAAC,UAAU,KAAV,EAAe,GAAG,UAAU,KAAK,cAAc,eAAW,MAAC,SAAO,MAChE,oBAAU,cAAc,YAC3B;AAAA,EAEJ;AACF;AACA,wBAAwB,cAAc;AAuBtC,SAAS,oBACPA,SACA,UACA,SACY;AACZ,MAAKA,QAAe,qBAAqB;AACvC,UAAMC,MAAKD,QAAO,oBAAoB,UAAU,OAAO;AACvD,WAAO,MAAM;AACX,MAAAA,QAAO,mBAAmBC,GAAE;AAAA,IAC9B;AAAA,EACF;AACA,QAAM,QAAQ,KAAK,IAAI;AACvB,QAAM,KAAKD,QAAO,WAAW,MAAM;AACjC,UAAM,gBAAgB,MAAM,KAAK,IAAI,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM;AACjE,aAAS,EAAE,YAAY,OAAO,cAAc,CAAC;AAAA,EAC/C,GAAG,CAAC;AACJ,SAAO,MAAM;AACX,IAAAA,QAAO,aAAa,EAAE;AAAA,EACxB;AACF;",
+  "names": ["window", "id"]
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@radix-ui/react-password-toggle-field",
+  "version": "0.1.0-rc.1745439717073",
+  "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/primitive": "1.1.2",
+    "@radix-ui/react-primitive": "2.1.1-rc.1745439717073",
+    "@radix-ui/react-context": "1.1.2",
+    "@radix-ui/react-use-effect-event": "0.0.2",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
+    "@radix-ui/react-use-is-hydrated": "0.1.0",
+    "@radix-ui/react-id": "1.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "eslint": "^9.18.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.3",
+    "@repo/builder": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "homepage": "https://radix-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radix-ui/primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/radix-ui/primitives/issues"
+  },
+  "scripts": {
+    "lint": "eslint --max-warnings 0 src",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "build": "radix-build"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+'use client';
+export type {
+  PasswordToggleFieldProps,
+  PasswordToggleFieldInputProps,
+  PasswordToggleFieldToggleProps,
+  PasswordToggleFieldIconProps,
+  PasswordToggleFieldSlotProps,
+} from './password-toggle-field';
+export {
+  PasswordToggleField,
+  PasswordToggleFieldInput,
+  PasswordToggleFieldToggle,
+  PasswordToggleFieldIcon,
+  PasswordToggleFieldSlot,
+  //
+  Root,
+  Input,
+  Toggle,
+  Icon,
+  Slot,
+} from './password-toggle-field';

package/src/password-toggle-field.test.tsx

@@ -0,0 +1,219 @@
+import { axe } from 'vitest-axe';
+import type { RenderResult } from '@testing-library/react';
+import { act, cleanup, render, screen } from '@testing-library/react';
+import * as PasswordToggleField from './password-toggle-field';
+import { afterEach, describe, it, beforeEach, expect } from 'vitest';
+import { userEvent, type UserEvent } from '@testing-library/user-event';
+
+describe('given a default PasswordToggleField', () => {
+  let rendered: RenderResult;
+  let user: UserEvent;
+
+  afterEach(cleanup);
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    rendered = render(
+      <>
+        <label htmlFor="password">Password</label>
+        <PasswordToggleField.Root>
+          <PasswordToggleField.Input id="password" />
+          <PasswordToggleField.Toggle>
+            <PasswordToggleField.Slot visible="Hide" hidden="Show" />
+          </PasswordToggleField.Toggle>
+        </PasswordToggleField.Root>
+      </>
+    );
+  });
+
+  afterEach(cleanup);
+
+  it('should have no accessibility violations', async () => {
+    expect(await axe(rendered.container)).toHaveNoViolations();
+  });
+
+  it('should initially be hidden', () => {
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    expect(toggle.textContent).toBe('Show');
+  });
+
+  it('toggles the children when clicked', async () => {
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    await act(async () => await user.click(toggle));
+    expect(toggle.textContent).toBe('Hide');
+  });
+
+  it('should initially render input as `type=password`', async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    expect(input.type).toBe('password');
+  });
+
+  it('should initially render input as `type=text` when toggled', async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    await act(async () => await user.click(toggle));
+    expect(input.type).toBe('text');
+  });
+
+  it('should re-focus the input after toggling', async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    await act(async () => await user.click(toggle));
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("should restore the input's selection after toggling", async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    await act(async () => await user.click(input));
+    await act(async () => await user.type(input, 'p'));
+    await act(async () => await user.click(toggle));
+    // selection should be at the end of the input value
+    expect(input.selectionStart).toBe(1);
+    expect(input.selectionEnd).toBe(1);
+
+    await act(async () => await user.type(input, 'assword'));
+    input.selectionStart = 0;
+    input.selectionEnd = 4;
+
+    await act(async () => await user.click(toggle));
+    expect(input.selectionStart).toBe(0);
+    expect(input.selectionEnd).toBe(4);
+  });
+});
+
+describe('given a PasswordToggleField with an Icon', () => {
+  let rendered: RenderResult;
+  let user: UserEvent;
+
+  afterEach(cleanup);
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    rendered = render(
+      <>
+        <label htmlFor="password">Password</label>
+        <PasswordToggleField.Root>
+          <PasswordToggleField.Input id="password" />
+          <PasswordToggleField.Toggle>
+            <PasswordToggleField.Icon
+              visible={<EyeOpenIcon data-testid="open" />}
+              hidden={<EyeClosedIcon data-testid="closed" />}
+            />
+          </PasswordToggleField.Toggle>
+        </PasswordToggleField.Root>
+      </>
+    );
+  });
+
+  afterEach(cleanup);
+
+  it('should have no accessibility violations', async () => {
+    expect(await axe(rendered.container)).toHaveNoViolations();
+  });
+
+  it('should initially be hidden', () => {
+    const icon = screen.getByTestId('closed');
+    expect(icon).toBeVisible();
+    expect(screen.queryByTestId('open')).not.toBeInTheDocument();
+  });
+
+  it('toggles the icon when clicked', async () => {
+    const toggle = screen.getByRole('button', { name: 'Show password' });
+    await act(async () => await user.click(toggle));
+    expect(screen.getByTestId('open')).toBeVisible();
+    expect(screen.queryByTestId('closed')).not.toBeInTheDocument();
+  });
+
+  it('should initially render input as `type=password`', async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    expect(input.type).toBe('password');
+  });
+
+  it('should initially render input as `type=text` when toggled', async () => {
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    const toggle = screen.getByRole('button', { name: 'Show password' });
+    await act(async () => await user.click(toggle));
+    expect(input.type).toBe('text');
+  });
+
+  it('should retain its value when toggled', async () => {
+    const input = screen.getByLabelText('Password');
+    const toggle = screen.getByRole('button', { name: 'Show password' });
+    await act(async () => await user.type(input, 'pass123'));
+    await act(async () => await user.click(toggle));
+    expect(input).toHaveValue('pass123');
+  });
+});
+
+describe('given a PasswordToggleField in a form', () => {
+  let user: UserEvent;
+
+  afterEach(cleanup);
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    render(
+      <form onSubmit={(e) => e.preventDefault()}>
+        <label htmlFor="password">Password</label>
+        <PasswordToggleField.Root>
+          <PasswordToggleField.Input id="password" />
+          <PasswordToggleField.Toggle>
+            <PasswordToggleField.Slot visible="Hide" hidden="Show" />
+          </PasswordToggleField.Toggle>
+        </PasswordToggleField.Root>
+        <button>Submit</button>
+      </form>
+    );
+  });
+
+  afterEach(cleanup);
+
+  it('should reset visibility to hidden after submission', async () => {
+    const toggle = screen.getByRole('button', { name: 'Show' });
+    const input = screen.getByLabelText<HTMLInputElement>('Password');
+    await act(() => user.click(toggle));
+    expect(input.type).toBe('text');
+    const submitButton = screen.getByText('Submit');
+    await act(() => user.click(submitButton));
+    expect(input.type).toBe('password');
+  });
+});
+
+function EyeClosedIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function EyeOpenIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}