@radix-solid-js/password-toggle-field 0.1.0

package/dist/index.cjs

@@ -0,0 +1,333 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var primitive = require('@radix-solid-js/primitive');
+var composeRefs = require('@radix-solid-js/compose-refs');
+var context = require('@radix-solid-js/context');
+var id = require('@radix-solid-js/id');
+var useControllableState = require('@radix-solid-js/use-controllable-state');
+var primitiveComponent = require('@radix-solid-js/primitive-component');
+
+// src/password-toggle-field.tsx
+var PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
+var INITIAL_FOCUS_STATE = {
+  clickTriggered: false,
+  selectionStart: null,
+  selectionEnd: null
+};
+var [createPasswordToggleFieldContext, createPasswordToggleFieldScope] = context.createContextScope(PASSWORD_TOGGLE_FIELD_NAME);
+var [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
+function PasswordToggleField(props) {
+  const [local] = solidJs.splitProps(props, [
+    "__scopePasswordToggleField",
+    "id",
+    "visible",
+    "defaultVisible",
+    "onVisibilityChange",
+    "children"
+  ]);
+  const baseId = id.createId(local.id);
+  const defaultInputId = `${baseId}-input`;
+  const [inputIdState, setInputIdState] = solidJs.createSignal(defaultInputId);
+  const inputId = () => inputIdState() ?? defaultInputId;
+  const syncInputId = (providedId) => {
+    setInputIdState(providedId != null ? String(providedId) : null);
+  };
+  const [visible, setVisible] = useControllableState.createControllableSignal({
+    prop: () => local.visible,
+    defaultProp: local.defaultVisible ?? false,
+    onChange: local.onVisibilityChange,
+    caller: PASSWORD_TOGGLE_FIELD_NAME
+  });
+  const [inputRef, setInputRef] = solidJs.createSignal(null);
+  const focusState = { ...INITIAL_FOCUS_STATE };
+  return /* @__PURE__ */ React.createElement(
+    PasswordToggleFieldProvider,
+    {
+      scope: local.__scopePasswordToggleField,
+      inputId,
+      inputRef,
+      setInputRef,
+      visible,
+      setVisible,
+      syncInputId,
+      focusState
+    },
+    local.children
+  );
+}
+var PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
+function PasswordToggleFieldInput(props) {
+  const [local, rest] = solidJs.splitProps(props, [
+    "__scopePasswordToggleField",
+    "autocomplete",
+    "autoCapitalize",
+    "spellcheck",
+    "id",
+    "ref",
+    "onBlur"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_INPUT_NAME,
+    local.__scopePasswordToggleField
+  );
+  solidJs.createEffect(() => {
+    context.syncInputId(local.id);
+  });
+  solidJs.createEffect(() => {
+    const inputElement = context.inputRef();
+    const form = inputElement?.form;
+    if (!form) return;
+    const controller = new AbortController();
+    form.addEventListener(
+      "reset",
+      (event) => {
+        if (!event.defaultPrevented) {
+          context.setVisible(false);
+        }
+      },
+      { signal: controller.signal }
+    );
+    form.addEventListener(
+      "submit",
+      () => {
+        context.setVisible(false);
+      },
+      { signal: controller.signal }
+    );
+    solidJs.onCleanup(() => {
+      controller.abort();
+    });
+  });
+  return /* @__PURE__ */ React.createElement(
+    primitiveComponent.Primitive.input,
+    {
+      ...rest,
+      id: local.id ?? context.inputId(),
+      autoCapitalize: local.autoCapitalize ?? "off",
+      autocomplete: local.autocomplete ?? "current-password",
+      ref: composeRefs.mergeRefs(local.ref, (el) => context.setInputRef(el)),
+      spellcheck: local.spellcheck ?? false,
+      type: context.visible() ? "text" : "password",
+      "data-state": getVisibilityState(context.visible()),
+      onBlur: primitive.composeEventHandlers(
+        local.onBlur,
+        (event) => {
+          const { selectionStart, selectionEnd } = event.currentTarget;
+          context.focusState.selectionStart = selectionStart;
+          context.focusState.selectionEnd = selectionEnd;
+        }
+      )
+    }
+  );
+}
+var PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
+function PasswordToggleFieldToggle(props) {
+  const [local, rest] = solidJs.splitProps(props, [
+    "__scopePasswordToggleField",
+    "onClick",
+    "onPointerDown",
+    "onPointerCancel",
+    "onPointerUp",
+    "children",
+    "aria-label",
+    "aria-controls",
+    "aria-hidden",
+    "tabIndex",
+    "ref"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
+    local.__scopePasswordToggleField
+  );
+  let elementRef;
+  const [internalAriaLabel, setInternalAriaLabel] = solidJs.createSignal(void 0);
+  solidJs.createEffect(() => {
+    const element = elementRef;
+    const ariaLabelProp = local["aria-label"];
+    if (!element || ariaLabelProp) {
+      setInternalAriaLabel(void 0);
+      return;
+    }
+    const DEFAULT_ARIA_LABEL = context.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 });
+    solidJs.onCleanup(() => {
+      observer.disconnect();
+    });
+  });
+  const ariaLabel = () => local["aria-label"] || internalAriaLabel();
+  solidJs.createEffect(() => {
+    const ownerWindow = elementRef?.ownerDocument?.defaultView || window;
+    let idleCleanup = () => {
+    };
+    const reset = () => {
+      context.focusState.clickTriggered = false;
+    };
+    const handlePointerUp = () => {
+      idleCleanup = requestIdleCallbackCompat(ownerWindow, reset);
+    };
+    ownerWindow.addEventListener("pointerup", handlePointerUp);
+    solidJs.onCleanup(() => {
+      idleCleanup();
+      ownerWindow.removeEventListener("pointerup", handlePointerUp);
+    });
+  });
+  return /* @__PURE__ */ React.createElement(
+    primitiveComponent.Primitive.button,
+    {
+      "aria-controls": local["aria-controls"] ?? context.inputId(),
+      "aria-label": ariaLabel(),
+      "data-state": getVisibilityState(context.visible()),
+      ...rest,
+      ref: composeRefs.mergeRefs(local.ref, (el) => {
+        elementRef = el;
+      }),
+      onPointerDown: primitive.composeEventHandlers(
+        local.onPointerDown,
+        () => {
+          context.focusState.clickTriggered = true;
+        }
+      ),
+      "on:pointercancel": (event) => {
+        const handler = local.onPointerCancel;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+      },
+      "on:click": (event) => {
+        const handler = local.onClick;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        if (event.defaultPrevented) {
+          Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+          return;
+        }
+        solidJs.batch(() => {
+          context.setVisible((prev) => !prev);
+        });
+        if (context.focusState.clickTriggered) {
+          const input = context.inputRef();
+          if (input) {
+            const { selectionStart, selectionEnd } = context.focusState;
+            input.focus();
+            if (selectionStart !== null || selectionEnd !== null) {
+              requestAnimationFrame(() => {
+                if (input.ownerDocument.activeElement === input) {
+                  input.selectionStart = selectionStart;
+                  input.selectionEnd = selectionEnd;
+                }
+              });
+            }
+          }
+        }
+        Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+      },
+      "on:pointerup": (event) => {
+        const handler = local.onPointerUp;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        setTimeout(() => {
+          Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+        }, 50);
+      },
+      type: "button"
+    },
+    local.children
+  );
+}
+var PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
+function PasswordToggleFieldSlot(props) {
+  const [local, rest] = solidJs.splitProps(props, [
+    "__scopePasswordToggleField"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_SLOT_NAME,
+    local.__scopePasswordToggleField
+  );
+  if ("render" in rest) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, rest.render({ visible: context.visible() }));
+  }
+  const declarativeProps = rest;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, context.visible() ? declarativeProps.visible : declarativeProps.hidden);
+}
+var PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
+function PasswordToggleFieldIcon(props) {
+  const [local, rest] = solidJs.splitProps(props, [
+    "__scopePasswordToggleField",
+    "visible",
+    "hidden",
+    "ref"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_ICON_NAME,
+    local.__scopePasswordToggleField
+  );
+  return /* @__PURE__ */ React.createElement(
+    primitiveComponent.Primitive.svg,
+    {
+      ...rest,
+      ref: local.ref,
+      "aria-hidden": true,
+      asChild: true,
+      "data-state": getVisibilityState(context.visible())
+    },
+    context.visible() ? local.visible : local.hidden
+  );
+}
+function getVisibilityState(visible) {
+  return visible ? "visible" : "hidden";
+}
+function requestIdleCallbackCompat(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);
+  };
+}
+var Root = PasswordToggleField;
+var Input = PasswordToggleFieldInput;
+var Toggle = PasswordToggleFieldToggle;
+var Slot = PasswordToggleFieldSlot;
+var Icon = PasswordToggleFieldIcon;
+
+exports.Icon = Icon;
+exports.Input = Input;
+exports.PasswordToggleField = PasswordToggleField;
+exports.PasswordToggleFieldIcon = PasswordToggleFieldIcon;
+exports.PasswordToggleFieldInput = PasswordToggleFieldInput;
+exports.PasswordToggleFieldSlot = PasswordToggleFieldSlot;
+exports.PasswordToggleFieldToggle = PasswordToggleFieldToggle;
+exports.Root = Root;
+exports.Slot = Slot;
+exports.Toggle = Toggle;
+exports.createPasswordToggleFieldScope = createPasswordToggleFieldScope;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/password-toggle-field.tsx"],"names":["createContextScope","splitProps","createId","createSignal","createControllableSignal","createEffect","onCleanup","Primitive","mergeRefs","composeEventHandlers","batch","window","id"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  splitProps,\n  batch,\n} from 'solid-js';\nimport { composeEventHandlers } from '@radix-solid-js/primitive';\nimport { mergeRefs } from '@radix-solid-js/compose-refs';\nimport { createContextScope } from '@radix-solid-js/context';\nimport { createId } from '@radix-solid-js/id';\nimport { createControllableSignal } from '@radix-solid-js/use-controllable-state';\nimport { Primitive, type PrimitiveProps } from '@radix-solid-js/primitive-component';\n\nimport type { Scope } from '@radix-solid-js/context';\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';\n\ntype ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };\n\ntype InternalFocusState = {\n  clickTriggered: boolean;\n  selectionStart: number | null;\n  selectionEnd: number | null;\n};\n\nconst INITIAL_FOCUS_STATE: InternalFocusState = {\n  clickTriggered: false,\n  selectionStart: null,\n  selectionEnd: null,\n};\n\ninterface PasswordToggleFieldContextValue {\n  inputId: Accessor<string>;\n  inputRef: Accessor<HTMLInputElement | null>;\n  setInputRef: (el: HTMLInputElement | null) => void;\n  visible: Accessor<boolean>;\n  setVisible: (value: boolean | ((prev: boolean) => boolean)) => void;\n  syncInputId: (providedId: string | number | undefined) => void;\n  focusState: InternalFocusState;\n}\n\nconst [createPasswordToggleFieldContext, createPasswordToggleFieldScope] =\n  createContextScope(PASSWORD_TOGGLE_FIELD_NAME);\n\nconst [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =\n  createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField (Root)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PasswordToggleFieldProps {\n  id?: string;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onVisibilityChange?: (visible: boolean) => void;\n  children?: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleField(props: PasswordToggleFieldProps) {\n  const [local] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'id',\n    'visible',\n    'defaultVisible',\n    'onVisibilityChange',\n    'children',\n  ]);\n\n  const baseId = createId(local.id);\n  const defaultInputId = `${baseId}-input`;\n  const [inputIdState, setInputIdState] = createSignal<string | null>(defaultInputId);\n  const inputId = () => inputIdState() ?? defaultInputId;\n\n  const syncInputId = (providedId: string | number | undefined) => {\n    setInputIdState(providedId != null ? String(providedId) : null);\n  };\n\n  const [visible, setVisible] = createControllableSignal<boolean>({\n    prop: () => local.visible,\n    defaultProp: local.defaultVisible ?? false,\n    onChange: local.onVisibilityChange,\n    caller: PASSWORD_TOGGLE_FIELD_NAME,\n  });\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n  const focusState: InternalFocusState = { ...INITIAL_FOCUS_STATE };\n\n  return (\n    <PasswordToggleFieldProvider\n      scope={local.__scopePasswordToggleField}\n      inputId={inputId}\n      inputRef={inputRef}\n      setInputRef={setInputRef}\n      visible={visible as Accessor<boolean>}\n      setVisible={setVisible}\n      syncInputId={syncInputId}\n      focusState={focusState}\n    >\n      {local.children}\n    </PasswordToggleFieldProvider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';\n\ninterface PasswordToggleFieldInputOwnProps {\n  autocomplete?: 'current-password' | 'new-password';\n}\n\ninterface PasswordToggleFieldInputProps\n  extends PasswordToggleFieldInputOwnProps,\n    Omit<PrimitiveProps<'input'>, keyof PasswordToggleFieldInputOwnProps | 'type'> {\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldInput(props: PasswordToggleFieldInputProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'autocomplete',\n    'autoCapitalize',\n    'spellcheck',\n    'id',\n    'ref',\n    'onBlur',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_INPUT_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  // Sync provided id to context\n  createEffect(() => {\n    context.syncInputId(local.id);\n  });\n\n  // Reset visibility on form reset/submit\n  createEffect(() => {\n    const inputElement = context.inputRef();\n    const form = inputElement?.form;\n    if (!form) return;\n\n    const controller = new AbortController();\n\n    form.addEventListener(\n      'reset',\n      (event) => {\n        if (!event.defaultPrevented) {\n          context.setVisible(false);\n        }\n      },\n      { signal: controller.signal },\n    );\n\n    form.addEventListener(\n      'submit',\n      () => {\n        // Always reset the visibility on submit regardless of whether the\n        // default action is prevented\n        context.setVisible(false);\n      },\n      { signal: controller.signal },\n    );\n\n    onCleanup(() => {\n      controller.abort();\n    });\n  });\n\n  return (\n    <Primitive.input\n      {...rest}\n      id={local.id ?? context.inputId()}\n      autoCapitalize={local.autoCapitalize ?? 'off'}\n      autocomplete={local.autocomplete ?? 'current-password'}\n      ref={mergeRefs(local.ref, (el: any) => context.setInputRef(el as HTMLInputElement))}\n      spellcheck={local.spellcheck ?? false}\n      type={context.visible() ? 'text' : 'password'}\n      data-state={getVisibilityState(context.visible())}\n      onBlur={composeEventHandlers(\n        local.onBlur as JSX.EventHandler<HTMLInputElement, FocusEvent>,\n        (event) => {\n          const { selectionStart, selectionEnd } = event.currentTarget;\n          context.focusState.selectionStart = selectionStart;\n          context.focusState.selectionEnd = selectionEnd;\n        },\n      )}\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldToggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';\n\ninterface PasswordToggleFieldToggleProps extends Omit<PrimitiveProps<'button'>, 'type'> {\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldToggle(props: PasswordToggleFieldToggleProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'onClick',\n    'onPointerDown',\n    'onPointerCancel',\n    'onPointerUp',\n    'children',\n    'aria-label',\n    'aria-controls',\n    'aria-hidden',\n    'tabIndex',\n    'ref',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // Auto-generate aria-label if no text content and no explicit aria-label\n  const [internalAriaLabel, setInternalAriaLabel] = createSignal<string | undefined>(undefined);\n\n  createEffect(() => {\n    const element = elementRef;\n    const ariaLabelProp = local['aria-label'];\n    if (!element || ariaLabelProp) {\n      setInternalAriaLabel(undefined);\n      return;\n    }\n\n    const DEFAULT_ARIA_LABEL = context.visible() ? 'Hide password' : 'Show password';\n\n    function checkForInnerTextLabel(textContent: string | undefined | null) {\n      const text = textContent ? textContent : undefined;\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\n    onCleanup(() => {\n      observer.disconnect();\n    });\n  });\n\n  const ariaLabel = () => local['aria-label'] || internalAriaLabel();\n\n  // Reset clickTriggered on global pointerup\n  createEffect(() => {\n    const ownerWindow = elementRef?.ownerDocument?.defaultView || window;\n\n    let idleCleanup = () => {};\n    const reset = () => {\n      context.focusState.clickTriggered = false;\n    };\n    const handlePointerUp = () => {\n      idleCleanup = requestIdleCallbackCompat(ownerWindow, reset);\n    };\n\n    ownerWindow.addEventListener('pointerup', handlePointerUp);\n\n    onCleanup(() => {\n      idleCleanup();\n      ownerWindow.removeEventListener('pointerup', handlePointerUp);\n    });\n  });\n\n  return (\n    <Primitive.button\n      aria-controls={local['aria-controls'] ?? context.inputId()}\n      aria-label={ariaLabel()}\n      data-state={getVisibilityState(context.visible())}\n      {...rest}\n      ref={mergeRefs(local.ref, (el: any) => {\n        elementRef = el as HTMLButtonElement;\n      })}\n      onPointerDown={composeEventHandlers(\n        local.onPointerDown as JSX.EventHandler<HTMLButtonElement, PointerEvent>,\n        () => {\n          context.focusState.clickTriggered = true;\n        },\n      )}\n      on:pointercancel={(event: PointerEvent) => {\n        const handler = local.onPointerCancel;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\n        // Always reset focus state on cancellation\n        Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n      }}\n      on:click={(event: MouseEvent) => {\n        const handler = local.onClick;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\n        if (event.defaultPrevented) {\n          Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n          return;\n        }\n\n        // Toggle visibility synchronously\n        batch(() => {\n          context.setVisible((prev) => !prev);\n        });\n\n        if (context.focusState.clickTriggered) {\n          const input = context.inputRef();\n          if (input) {\n            const { selectionStart, selectionEnd } = context.focusState;\n            input.focus();\n            if (selectionStart !== null || selectionEnd !== null) {\n              // Wait a tick so that focus has settled, then restore selection position\n              requestAnimationFrame(() => {\n                if (input.ownerDocument.activeElement === input) {\n                  input.selectionStart = selectionStart;\n                  input.selectionEnd = selectionEnd;\n                }\n              });\n            }\n          }\n        }\n        Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n      }}\n      on:pointerup={(event: PointerEvent) => {\n        const handler = local.onPointerUp;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\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 state\n        setTimeout(() => {\n          Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n        }, 50);\n      }}\n      type=\"button\"\n    >\n      {local.children}\n    </Primitive.button>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldSlot\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';\n\ninterface PasswordToggleFieldSlotDeclarativeProps {\n  visible: JSX.Element;\n  hidden: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\ninterface PasswordToggleFieldSlotRenderProps {\n  render: (args: { visible: boolean }) => JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\ntype PasswordToggleFieldSlotProps =\n  | PasswordToggleFieldSlotDeclarativeProps\n  | PasswordToggleFieldSlotRenderProps;\n\nfunction PasswordToggleFieldSlot(props: PasswordToggleFieldSlotProps) {\n  const [local, rest] = splitProps(props as ScopedProps<PasswordToggleFieldSlotProps>, [\n    '__scopePasswordToggleField',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_SLOT_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  if ('render' in rest) {\n    return <>{(rest as PasswordToggleFieldSlotRenderProps).render({ visible: context.visible() })}</>;\n  }\n\n  const declarativeProps = rest as PasswordToggleFieldSlotDeclarativeProps;\n  return <>{context.visible() ? declarativeProps.visible : declarativeProps.hidden}</>;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';\n\ninterface PasswordToggleFieldIconProps extends Omit<PrimitiveProps<'svg'>, 'children'> {\n  visible: JSX.Element;\n  hidden: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldIcon(props: PasswordToggleFieldIconProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'visible',\n    'hidden',\n    'ref',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_ICON_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  return (\n    <Primitive.svg\n      {...rest}\n      ref={local.ref}\n      aria-hidden\n      asChild\n      data-state={getVisibilityState(context.visible())}\n    >\n      {context.visible() ? local.visible : local.hidden}\n    </Primitive.svg>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\nfunction getVisibilityState(visible: boolean): 'visible' | 'hidden' {\n  return visible ? 'visible' : 'hidden';\n}\n\nfunction requestIdleCallbackCompat(\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\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = PasswordToggleField;\nconst Input = PasswordToggleFieldInput;\nconst Toggle = PasswordToggleFieldToggle;\nconst Slot = PasswordToggleFieldSlot;\nconst Icon = PasswordToggleFieldIcon;\n\nexport {\n  createPasswordToggleFieldScope,\n  //\n  PasswordToggleField,\n  PasswordToggleFieldInput,\n  PasswordToggleFieldToggle,\n  PasswordToggleFieldSlot,\n  PasswordToggleFieldIcon,\n  //\n  Root,\n  Input,\n  Toggle,\n  Slot,\n  Icon,\n};\nexport type {\n  PasswordToggleFieldProps,\n  PasswordToggleFieldInputProps,\n  PasswordToggleFieldToggleProps,\n  PasswordToggleFieldSlotProps,\n  PasswordToggleFieldIconProps,\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,52 @@
+import * as _radix_solid_js_context from '@radix-solid-js/context';
+import { Scope } from '@radix-solid-js/context';
+import { JSX } from 'solid-js';
+import { PrimitiveProps } from '@radix-solid-js/primitive-component';
+
+declare const createPasswordToggleFieldScope: _radix_solid_js_context.CreateScope;
+interface PasswordToggleFieldProps {
+    id?: string;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    children?: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleField(props: PasswordToggleFieldProps): JSX.Element;
+interface PasswordToggleFieldInputOwnProps {
+    autocomplete?: 'current-password' | 'new-password';
+}
+interface PasswordToggleFieldInputProps extends PasswordToggleFieldInputOwnProps, Omit<PrimitiveProps<'input'>, keyof PasswordToggleFieldInputOwnProps | 'type'> {
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldInput(props: PasswordToggleFieldInputProps): JSX.Element;
+interface PasswordToggleFieldToggleProps extends Omit<PrimitiveProps<'button'>, 'type'> {
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldToggle(props: PasswordToggleFieldToggleProps): JSX.Element;
+interface PasswordToggleFieldSlotDeclarativeProps {
+    visible: JSX.Element;
+    hidden: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+interface PasswordToggleFieldSlotRenderProps {
+    render: (args: {
+        visible: boolean;
+    }) => JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+type PasswordToggleFieldSlotProps = PasswordToggleFieldSlotDeclarativeProps | PasswordToggleFieldSlotRenderProps;
+declare function PasswordToggleFieldSlot(props: PasswordToggleFieldSlotProps): JSX.Element;
+interface PasswordToggleFieldIconProps extends Omit<PrimitiveProps<'svg'>, 'children'> {
+    visible: JSX.Element;
+    hidden: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldIcon(props: PasswordToggleFieldIconProps): JSX.Element;
+declare const Root: typeof PasswordToggleField;
+declare const Input: typeof PasswordToggleFieldInput;
+declare const Toggle: typeof PasswordToggleFieldToggle;
+declare const Slot: typeof PasswordToggleFieldSlot;
+declare const Icon: typeof PasswordToggleFieldIcon;
+
+export { Icon, Input, PasswordToggleField, PasswordToggleFieldIcon, type PasswordToggleFieldIconProps, PasswordToggleFieldInput, type PasswordToggleFieldInputProps, type PasswordToggleFieldProps, PasswordToggleFieldSlot, type PasswordToggleFieldSlotProps, PasswordToggleFieldToggle, type PasswordToggleFieldToggleProps, Root, Slot, Toggle, createPasswordToggleFieldScope };

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import * as _radix_solid_js_context from '@radix-solid-js/context';
+import { Scope } from '@radix-solid-js/context';
+import { JSX } from 'solid-js';
+import { PrimitiveProps } from '@radix-solid-js/primitive-component';
+
+declare const createPasswordToggleFieldScope: _radix_solid_js_context.CreateScope;
+interface PasswordToggleFieldProps {
+    id?: string;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    children?: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleField(props: PasswordToggleFieldProps): JSX.Element;
+interface PasswordToggleFieldInputOwnProps {
+    autocomplete?: 'current-password' | 'new-password';
+}
+interface PasswordToggleFieldInputProps extends PasswordToggleFieldInputOwnProps, Omit<PrimitiveProps<'input'>, keyof PasswordToggleFieldInputOwnProps | 'type'> {
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldInput(props: PasswordToggleFieldInputProps): JSX.Element;
+interface PasswordToggleFieldToggleProps extends Omit<PrimitiveProps<'button'>, 'type'> {
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldToggle(props: PasswordToggleFieldToggleProps): JSX.Element;
+interface PasswordToggleFieldSlotDeclarativeProps {
+    visible: JSX.Element;
+    hidden: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+interface PasswordToggleFieldSlotRenderProps {
+    render: (args: {
+        visible: boolean;
+    }) => JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+type PasswordToggleFieldSlotProps = PasswordToggleFieldSlotDeclarativeProps | PasswordToggleFieldSlotRenderProps;
+declare function PasswordToggleFieldSlot(props: PasswordToggleFieldSlotProps): JSX.Element;
+interface PasswordToggleFieldIconProps extends Omit<PrimitiveProps<'svg'>, 'children'> {
+    visible: JSX.Element;
+    hidden: JSX.Element;
+    __scopePasswordToggleField?: Scope;
+}
+declare function PasswordToggleFieldIcon(props: PasswordToggleFieldIconProps): JSX.Element;
+declare const Root: typeof PasswordToggleField;
+declare const Input: typeof PasswordToggleFieldInput;
+declare const Toggle: typeof PasswordToggleFieldToggle;
+declare const Slot: typeof PasswordToggleFieldSlot;
+declare const Icon: typeof PasswordToggleFieldIcon;
+
+export { Icon, Input, PasswordToggleField, PasswordToggleFieldIcon, type PasswordToggleFieldIconProps, PasswordToggleFieldInput, type PasswordToggleFieldInputProps, type PasswordToggleFieldProps, PasswordToggleFieldSlot, type PasswordToggleFieldSlotProps, PasswordToggleFieldToggle, type PasswordToggleFieldToggleProps, Root, Slot, Toggle, createPasswordToggleFieldScope };

package/dist/index.js

@@ -0,0 +1,321 @@
+import { splitProps, createSignal, createEffect, onCleanup, batch } from 'solid-js';
+import { composeEventHandlers } from '@radix-solid-js/primitive';
+import { mergeRefs } from '@radix-solid-js/compose-refs';
+import { createContextScope } from '@radix-solid-js/context';
+import { createId } from '@radix-solid-js/id';
+import { createControllableSignal } from '@radix-solid-js/use-controllable-state';
+import { Primitive } from '@radix-solid-js/primitive-component';
+
+// src/password-toggle-field.tsx
+var PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
+var INITIAL_FOCUS_STATE = {
+  clickTriggered: false,
+  selectionStart: null,
+  selectionEnd: null
+};
+var [createPasswordToggleFieldContext, createPasswordToggleFieldScope] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);
+var [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
+function PasswordToggleField(props) {
+  const [local] = splitProps(props, [
+    "__scopePasswordToggleField",
+    "id",
+    "visible",
+    "defaultVisible",
+    "onVisibilityChange",
+    "children"
+  ]);
+  const baseId = createId(local.id);
+  const defaultInputId = `${baseId}-input`;
+  const [inputIdState, setInputIdState] = createSignal(defaultInputId);
+  const inputId = () => inputIdState() ?? defaultInputId;
+  const syncInputId = (providedId) => {
+    setInputIdState(providedId != null ? String(providedId) : null);
+  };
+  const [visible, setVisible] = createControllableSignal({
+    prop: () => local.visible,
+    defaultProp: local.defaultVisible ?? false,
+    onChange: local.onVisibilityChange,
+    caller: PASSWORD_TOGGLE_FIELD_NAME
+  });
+  const [inputRef, setInputRef] = createSignal(null);
+  const focusState = { ...INITIAL_FOCUS_STATE };
+  return /* @__PURE__ */ React.createElement(
+    PasswordToggleFieldProvider,
+    {
+      scope: local.__scopePasswordToggleField,
+      inputId,
+      inputRef,
+      setInputRef,
+      visible,
+      setVisible,
+      syncInputId,
+      focusState
+    },
+    local.children
+  );
+}
+var PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
+function PasswordToggleFieldInput(props) {
+  const [local, rest] = splitProps(props, [
+    "__scopePasswordToggleField",
+    "autocomplete",
+    "autoCapitalize",
+    "spellcheck",
+    "id",
+    "ref",
+    "onBlur"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_INPUT_NAME,
+    local.__scopePasswordToggleField
+  );
+  createEffect(() => {
+    context.syncInputId(local.id);
+  });
+  createEffect(() => {
+    const inputElement = context.inputRef();
+    const form = inputElement?.form;
+    if (!form) return;
+    const controller = new AbortController();
+    form.addEventListener(
+      "reset",
+      (event) => {
+        if (!event.defaultPrevented) {
+          context.setVisible(false);
+        }
+      },
+      { signal: controller.signal }
+    );
+    form.addEventListener(
+      "submit",
+      () => {
+        context.setVisible(false);
+      },
+      { signal: controller.signal }
+    );
+    onCleanup(() => {
+      controller.abort();
+    });
+  });
+  return /* @__PURE__ */ React.createElement(
+    Primitive.input,
+    {
+      ...rest,
+      id: local.id ?? context.inputId(),
+      autoCapitalize: local.autoCapitalize ?? "off",
+      autocomplete: local.autocomplete ?? "current-password",
+      ref: mergeRefs(local.ref, (el) => context.setInputRef(el)),
+      spellcheck: local.spellcheck ?? false,
+      type: context.visible() ? "text" : "password",
+      "data-state": getVisibilityState(context.visible()),
+      onBlur: composeEventHandlers(
+        local.onBlur,
+        (event) => {
+          const { selectionStart, selectionEnd } = event.currentTarget;
+          context.focusState.selectionStart = selectionStart;
+          context.focusState.selectionEnd = selectionEnd;
+        }
+      )
+    }
+  );
+}
+var PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
+function PasswordToggleFieldToggle(props) {
+  const [local, rest] = splitProps(props, [
+    "__scopePasswordToggleField",
+    "onClick",
+    "onPointerDown",
+    "onPointerCancel",
+    "onPointerUp",
+    "children",
+    "aria-label",
+    "aria-controls",
+    "aria-hidden",
+    "tabIndex",
+    "ref"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
+    local.__scopePasswordToggleField
+  );
+  let elementRef;
+  const [internalAriaLabel, setInternalAriaLabel] = createSignal(void 0);
+  createEffect(() => {
+    const element = elementRef;
+    const ariaLabelProp = local["aria-label"];
+    if (!element || ariaLabelProp) {
+      setInternalAriaLabel(void 0);
+      return;
+    }
+    const DEFAULT_ARIA_LABEL = context.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 });
+    onCleanup(() => {
+      observer.disconnect();
+    });
+  });
+  const ariaLabel = () => local["aria-label"] || internalAriaLabel();
+  createEffect(() => {
+    const ownerWindow = elementRef?.ownerDocument?.defaultView || window;
+    let idleCleanup = () => {
+    };
+    const reset = () => {
+      context.focusState.clickTriggered = false;
+    };
+    const handlePointerUp = () => {
+      idleCleanup = requestIdleCallbackCompat(ownerWindow, reset);
+    };
+    ownerWindow.addEventListener("pointerup", handlePointerUp);
+    onCleanup(() => {
+      idleCleanup();
+      ownerWindow.removeEventListener("pointerup", handlePointerUp);
+    });
+  });
+  return /* @__PURE__ */ React.createElement(
+    Primitive.button,
+    {
+      "aria-controls": local["aria-controls"] ?? context.inputId(),
+      "aria-label": ariaLabel(),
+      "data-state": getVisibilityState(context.visible()),
+      ...rest,
+      ref: mergeRefs(local.ref, (el) => {
+        elementRef = el;
+      }),
+      onPointerDown: composeEventHandlers(
+        local.onPointerDown,
+        () => {
+          context.focusState.clickTriggered = true;
+        }
+      ),
+      "on:pointercancel": (event) => {
+        const handler = local.onPointerCancel;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+      },
+      "on:click": (event) => {
+        const handler = local.onClick;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        if (event.defaultPrevented) {
+          Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+          return;
+        }
+        batch(() => {
+          context.setVisible((prev) => !prev);
+        });
+        if (context.focusState.clickTriggered) {
+          const input = context.inputRef();
+          if (input) {
+            const { selectionStart, selectionEnd } = context.focusState;
+            input.focus();
+            if (selectionStart !== null || selectionEnd !== null) {
+              requestAnimationFrame(() => {
+                if (input.ownerDocument.activeElement === input) {
+                  input.selectionStart = selectionStart;
+                  input.selectionEnd = selectionEnd;
+                }
+              });
+            }
+          }
+        }
+        Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+      },
+      "on:pointerup": (event) => {
+        const handler = local.onPointerUp;
+        if (typeof handler === "function") {
+          handler(event);
+        }
+        setTimeout(() => {
+          Object.assign(context.focusState, INITIAL_FOCUS_STATE);
+        }, 50);
+      },
+      type: "button"
+    },
+    local.children
+  );
+}
+var PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
+function PasswordToggleFieldSlot(props) {
+  const [local, rest] = splitProps(props, [
+    "__scopePasswordToggleField"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_SLOT_NAME,
+    local.__scopePasswordToggleField
+  );
+  if ("render" in rest) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, rest.render({ visible: context.visible() }));
+  }
+  const declarativeProps = rest;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, context.visible() ? declarativeProps.visible : declarativeProps.hidden);
+}
+var PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
+function PasswordToggleFieldIcon(props) {
+  const [local, rest] = splitProps(props, [
+    "__scopePasswordToggleField",
+    "visible",
+    "hidden",
+    "ref"
+  ]);
+  const context = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_ICON_NAME,
+    local.__scopePasswordToggleField
+  );
+  return /* @__PURE__ */ React.createElement(
+    Primitive.svg,
+    {
+      ...rest,
+      ref: local.ref,
+      "aria-hidden": true,
+      asChild: true,
+      "data-state": getVisibilityState(context.visible())
+    },
+    context.visible() ? local.visible : local.hidden
+  );
+}
+function getVisibilityState(visible) {
+  return visible ? "visible" : "hidden";
+}
+function requestIdleCallbackCompat(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);
+  };
+}
+var Root = PasswordToggleField;
+var Input = PasswordToggleFieldInput;
+var Toggle = PasswordToggleFieldToggle;
+var Slot = PasswordToggleFieldSlot;
+var Icon = PasswordToggleFieldIcon;
+
+export { Icon, Input, PasswordToggleField, PasswordToggleFieldIcon, PasswordToggleFieldInput, PasswordToggleFieldSlot, PasswordToggleFieldToggle, Root, Slot, Toggle, createPasswordToggleFieldScope };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/password-toggle-field.tsx"],"names":["window","id"],"mappings":"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","file":"index.js","sourcesContent":["import {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  splitProps,\n  batch,\n} from 'solid-js';\nimport { composeEventHandlers } from '@radix-solid-js/primitive';\nimport { mergeRefs } from '@radix-solid-js/compose-refs';\nimport { createContextScope } from '@radix-solid-js/context';\nimport { createId } from '@radix-solid-js/id';\nimport { createControllableSignal } from '@radix-solid-js/use-controllable-state';\nimport { Primitive, type PrimitiveProps } from '@radix-solid-js/primitive-component';\n\nimport type { Scope } from '@radix-solid-js/context';\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';\n\ntype ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };\n\ntype InternalFocusState = {\n  clickTriggered: boolean;\n  selectionStart: number | null;\n  selectionEnd: number | null;\n};\n\nconst INITIAL_FOCUS_STATE: InternalFocusState = {\n  clickTriggered: false,\n  selectionStart: null,\n  selectionEnd: null,\n};\n\ninterface PasswordToggleFieldContextValue {\n  inputId: Accessor<string>;\n  inputRef: Accessor<HTMLInputElement | null>;\n  setInputRef: (el: HTMLInputElement | null) => void;\n  visible: Accessor<boolean>;\n  setVisible: (value: boolean | ((prev: boolean) => boolean)) => void;\n  syncInputId: (providedId: string | number | undefined) => void;\n  focusState: InternalFocusState;\n}\n\nconst [createPasswordToggleFieldContext, createPasswordToggleFieldScope] =\n  createContextScope(PASSWORD_TOGGLE_FIELD_NAME);\n\nconst [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =\n  createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField (Root)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PasswordToggleFieldProps {\n  id?: string;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onVisibilityChange?: (visible: boolean) => void;\n  children?: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleField(props: PasswordToggleFieldProps) {\n  const [local] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'id',\n    'visible',\n    'defaultVisible',\n    'onVisibilityChange',\n    'children',\n  ]);\n\n  const baseId = createId(local.id);\n  const defaultInputId = `${baseId}-input`;\n  const [inputIdState, setInputIdState] = createSignal<string | null>(defaultInputId);\n  const inputId = () => inputIdState() ?? defaultInputId;\n\n  const syncInputId = (providedId: string | number | undefined) => {\n    setInputIdState(providedId != null ? String(providedId) : null);\n  };\n\n  const [visible, setVisible] = createControllableSignal<boolean>({\n    prop: () => local.visible,\n    defaultProp: local.defaultVisible ?? false,\n    onChange: local.onVisibilityChange,\n    caller: PASSWORD_TOGGLE_FIELD_NAME,\n  });\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n  const focusState: InternalFocusState = { ...INITIAL_FOCUS_STATE };\n\n  return (\n    <PasswordToggleFieldProvider\n      scope={local.__scopePasswordToggleField}\n      inputId={inputId}\n      inputRef={inputRef}\n      setInputRef={setInputRef}\n      visible={visible as Accessor<boolean>}\n      setVisible={setVisible}\n      syncInputId={syncInputId}\n      focusState={focusState}\n    >\n      {local.children}\n    </PasswordToggleFieldProvider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';\n\ninterface PasswordToggleFieldInputOwnProps {\n  autocomplete?: 'current-password' | 'new-password';\n}\n\ninterface PasswordToggleFieldInputProps\n  extends PasswordToggleFieldInputOwnProps,\n    Omit<PrimitiveProps<'input'>, keyof PasswordToggleFieldInputOwnProps | 'type'> {\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldInput(props: PasswordToggleFieldInputProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'autocomplete',\n    'autoCapitalize',\n    'spellcheck',\n    'id',\n    'ref',\n    'onBlur',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_INPUT_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  // Sync provided id to context\n  createEffect(() => {\n    context.syncInputId(local.id);\n  });\n\n  // Reset visibility on form reset/submit\n  createEffect(() => {\n    const inputElement = context.inputRef();\n    const form = inputElement?.form;\n    if (!form) return;\n\n    const controller = new AbortController();\n\n    form.addEventListener(\n      'reset',\n      (event) => {\n        if (!event.defaultPrevented) {\n          context.setVisible(false);\n        }\n      },\n      { signal: controller.signal },\n    );\n\n    form.addEventListener(\n      'submit',\n      () => {\n        // Always reset the visibility on submit regardless of whether the\n        // default action is prevented\n        context.setVisible(false);\n      },\n      { signal: controller.signal },\n    );\n\n    onCleanup(() => {\n      controller.abort();\n    });\n  });\n\n  return (\n    <Primitive.input\n      {...rest}\n      id={local.id ?? context.inputId()}\n      autoCapitalize={local.autoCapitalize ?? 'off'}\n      autocomplete={local.autocomplete ?? 'current-password'}\n      ref={mergeRefs(local.ref, (el: any) => context.setInputRef(el as HTMLInputElement))}\n      spellcheck={local.spellcheck ?? false}\n      type={context.visible() ? 'text' : 'password'}\n      data-state={getVisibilityState(context.visible())}\n      onBlur={composeEventHandlers(\n        local.onBlur as JSX.EventHandler<HTMLInputElement, FocusEvent>,\n        (event) => {\n          const { selectionStart, selectionEnd } = event.currentTarget;\n          context.focusState.selectionStart = selectionStart;\n          context.focusState.selectionEnd = selectionEnd;\n        },\n      )}\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldToggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';\n\ninterface PasswordToggleFieldToggleProps extends Omit<PrimitiveProps<'button'>, 'type'> {\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldToggle(props: PasswordToggleFieldToggleProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'onClick',\n    'onPointerDown',\n    'onPointerCancel',\n    'onPointerUp',\n    'children',\n    'aria-label',\n    'aria-controls',\n    'aria-hidden',\n    'tabIndex',\n    'ref',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // Auto-generate aria-label if no text content and no explicit aria-label\n  const [internalAriaLabel, setInternalAriaLabel] = createSignal<string | undefined>(undefined);\n\n  createEffect(() => {\n    const element = elementRef;\n    const ariaLabelProp = local['aria-label'];\n    if (!element || ariaLabelProp) {\n      setInternalAriaLabel(undefined);\n      return;\n    }\n\n    const DEFAULT_ARIA_LABEL = context.visible() ? 'Hide password' : 'Show password';\n\n    function checkForInnerTextLabel(textContent: string | undefined | null) {\n      const text = textContent ? textContent : undefined;\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\n    onCleanup(() => {\n      observer.disconnect();\n    });\n  });\n\n  const ariaLabel = () => local['aria-label'] || internalAriaLabel();\n\n  // Reset clickTriggered on global pointerup\n  createEffect(() => {\n    const ownerWindow = elementRef?.ownerDocument?.defaultView || window;\n\n    let idleCleanup = () => {};\n    const reset = () => {\n      context.focusState.clickTriggered = false;\n    };\n    const handlePointerUp = () => {\n      idleCleanup = requestIdleCallbackCompat(ownerWindow, reset);\n    };\n\n    ownerWindow.addEventListener('pointerup', handlePointerUp);\n\n    onCleanup(() => {\n      idleCleanup();\n      ownerWindow.removeEventListener('pointerup', handlePointerUp);\n    });\n  });\n\n  return (\n    <Primitive.button\n      aria-controls={local['aria-controls'] ?? context.inputId()}\n      aria-label={ariaLabel()}\n      data-state={getVisibilityState(context.visible())}\n      {...rest}\n      ref={mergeRefs(local.ref, (el: any) => {\n        elementRef = el as HTMLButtonElement;\n      })}\n      onPointerDown={composeEventHandlers(\n        local.onPointerDown as JSX.EventHandler<HTMLButtonElement, PointerEvent>,\n        () => {\n          context.focusState.clickTriggered = true;\n        },\n      )}\n      on:pointercancel={(event: PointerEvent) => {\n        const handler = local.onPointerCancel;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\n        // Always reset focus state on cancellation\n        Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n      }}\n      on:click={(event: MouseEvent) => {\n        const handler = local.onClick;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\n        if (event.defaultPrevented) {\n          Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n          return;\n        }\n\n        // Toggle visibility synchronously\n        batch(() => {\n          context.setVisible((prev) => !prev);\n        });\n\n        if (context.focusState.clickTriggered) {\n          const input = context.inputRef();\n          if (input) {\n            const { selectionStart, selectionEnd } = context.focusState;\n            input.focus();\n            if (selectionStart !== null || selectionEnd !== null) {\n              // Wait a tick so that focus has settled, then restore selection position\n              requestAnimationFrame(() => {\n                if (input.ownerDocument.activeElement === input) {\n                  input.selectionStart = selectionStart;\n                  input.selectionEnd = selectionEnd;\n                }\n              });\n            }\n          }\n        }\n        Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n      }}\n      on:pointerup={(event: PointerEvent) => {\n        const handler = local.onPointerUp;\n        if (typeof handler === 'function') {\n          (handler as any)(event);\n        }\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 state\n        setTimeout(() => {\n          Object.assign(context.focusState, INITIAL_FOCUS_STATE);\n        }, 50);\n      }}\n      type=\"button\"\n    >\n      {local.children}\n    </Primitive.button>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldSlot\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';\n\ninterface PasswordToggleFieldSlotDeclarativeProps {\n  visible: JSX.Element;\n  hidden: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\ninterface PasswordToggleFieldSlotRenderProps {\n  render: (args: { visible: boolean }) => JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\ntype PasswordToggleFieldSlotProps =\n  | PasswordToggleFieldSlotDeclarativeProps\n  | PasswordToggleFieldSlotRenderProps;\n\nfunction PasswordToggleFieldSlot(props: PasswordToggleFieldSlotProps) {\n  const [local, rest] = splitProps(props as ScopedProps<PasswordToggleFieldSlotProps>, [\n    '__scopePasswordToggleField',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_SLOT_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  if ('render' in rest) {\n    return <>{(rest as PasswordToggleFieldSlotRenderProps).render({ visible: context.visible() })}</>;\n  }\n\n  const declarativeProps = rest as PasswordToggleFieldSlotDeclarativeProps;\n  return <>{context.visible() ? declarativeProps.visible : declarativeProps.hidden}</>;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';\n\ninterface PasswordToggleFieldIconProps extends Omit<PrimitiveProps<'svg'>, 'children'> {\n  visible: JSX.Element;\n  hidden: JSX.Element;\n  __scopePasswordToggleField?: Scope;\n}\n\nfunction PasswordToggleFieldIcon(props: PasswordToggleFieldIconProps) {\n  const [local, rest] = splitProps(props, [\n    '__scopePasswordToggleField',\n    'visible',\n    'hidden',\n    'ref',\n  ]);\n\n  const context = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_ICON_NAME,\n    local.__scopePasswordToggleField,\n  );\n\n  return (\n    <Primitive.svg\n      {...rest}\n      ref={local.ref}\n      aria-hidden\n      asChild\n      data-state={getVisibilityState(context.visible())}\n    >\n      {context.visible() ? local.visible : local.hidden}\n    </Primitive.svg>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\nfunction getVisibilityState(visible: boolean): 'visible' | 'hidden' {\n  return visible ? 'visible' : 'hidden';\n}\n\nfunction requestIdleCallbackCompat(\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\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = PasswordToggleField;\nconst Input = PasswordToggleFieldInput;\nconst Toggle = PasswordToggleFieldToggle;\nconst Slot = PasswordToggleFieldSlot;\nconst Icon = PasswordToggleFieldIcon;\n\nexport {\n  createPasswordToggleFieldScope,\n  //\n  PasswordToggleField,\n  PasswordToggleFieldInput,\n  PasswordToggleFieldToggle,\n  PasswordToggleFieldSlot,\n  PasswordToggleFieldIcon,\n  //\n  Root,\n  Input,\n  Toggle,\n  Slot,\n  Icon,\n};\nexport type {\n  PasswordToggleFieldProps,\n  PasswordToggleFieldInputProps,\n  PasswordToggleFieldToggleProps,\n  PasswordToggleFieldSlotProps,\n  PasswordToggleFieldIconProps,\n};\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@radix-solid-js/password-toggle-field",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@radix-solid-js/primitive": "workspace:*",
+    "@radix-solid-js/compose-refs": "workspace:*",
+    "@radix-solid-js/context": "workspace:*",
+    "@radix-solid-js/id": "workspace:*",
+    "@radix-solid-js/primitive-component": "workspace:*",
+    "@radix-solid-js/use-controllable-state": "workspace:*",
+    "@radix-solid-js/use-effect-event": "workspace:*"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "solid-js": "^1.9.3",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ljho01/shadcn-solid-js.git",
+    "directory": "packages/solid/password-toggle-field"
+  }
+}