Pin Input

---
import type { HTMLAttributes } from "astro/types";

import PinInputSlot from "./PinInputSlot.astro";

type Props = HTMLAttributes<"div"> & {
  length?: number;
  name?: string;
  value?: string;
  mode?: "numeric" | "alphanumeric";
  mask?: boolean;
  label?: string;
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const {
  length = 6,
  name,
  value = "",
  mode = "numeric",
  mask = false,
  label = "Verification code",
  size = "md",
  state = "default",
  class: className,
  ...rest
} = Astro.props;

const characters = [...value];
---

<div
  role="group"
  aria-label={label}
  data-slot="pin-input"
  data-mode={mode}
  data-value={value}
  data-size={size}
  data-state={state}
  class={className}
  {...rest}
>
  {
    Array.from({ length }, (_, i) => (
      <PinInputSlot
        index={i}
        length={length}
        mode={mode}
        mask={mask}
        size={size}
        state={state}
        value={characters[i] ?? ""}
      />
    ))
  }
  {name && <input type="hidden" name={name} value={value} data-slot="pin-input-value" />}
</div>

<script>
  import { onReadyOnce } from "../../_once";
  import { distribute } from "./pin-code";

  function wire(root: HTMLElement) {
    const boxes = [...root.querySelectorAll<HTMLInputElement>('[data-slot="pin-input-slot"]')];
    if (boxes.length === 0) return;
    const hidden = root.querySelector<HTMLInputElement>('[data-slot="pin-input-value"]');
    const mode = root.dataset.mode === "alphanumeric" ? "alphanumeric" : "numeric";

    const publish = () => {
      const code = boxes.map((box) => box.value).join("");
      root.dataset.value = code;
      if (hidden) hidden.value = code;
      root.dispatchEvent(new Event("change", { bubbles: true }));
    };

    const fill = (text: string, start: number) => {
      const chars = distribute(text, mode, boxes.length, start);
      if (chars.length === 0) return;
      chars.forEach((char, i) => (boxes[start + i].value = char));
      boxes[Math.min(start + chars.length, boxes.length - 1)].focus();
      publish();
    };

    boxes.forEach((box, i) => {
      box.addEventListener("input", () => {
        if (box.value.length > 1) {
          const text = box.value;
          box.value = "";
          fill(text, i);
          return;
        }
        if (box.value && !distribute(box.value, mode, 1).length) {
          box.value = "";
          return;
        }
        if (box.value) boxes[i + 1]?.focus();
        publish();
      });

      box.addEventListener("keydown", (event) => {
        if (event.key === "Backspace" && !box.value && i > 0) {
          event.preventDefault();
          boxes[i - 1].value = "";
          boxes[i - 1].focus();
          publish();
          return;
        }
        if (event.key === "ArrowLeft" && i > 0) {
          event.preventDefault();
          boxes[i - 1].focus();
        }
        if (event.key === "ArrowRight" && i < boxes.length - 1) {
          event.preventDefault();
          boxes[i + 1].focus();
        }
      });

      box.addEventListener("paste", (event) => {
        event.preventDefault();
        fill(event.clipboardData?.getData("text") ?? "", i);
      });

      box.addEventListener("focus", () => box.select());
    });
  }

  onReadyOnce('[data-slot="pin-input"]', wire);
</script>

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"input"> & {
  index: number;
  length: number;
  mode?: "numeric" | "alphanumeric";
  mask?: boolean;
  label?: string;
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const {
  index,
  length,
  mode = "numeric",
  mask = false,
  label,
  size = "md",
  state = "default",
  class: className,
  ...rest
} = Astro.props;
---

<input
  type={mask ? "password" : "text"}
  inputmode={mode === "numeric" ? "numeric" : "text"}
  maxlength="1"
  autocomplete={index === 0 ? "one-time-code" : "off"}
  autocorrect="off"
  spellcheck="false"
  aria-label={label ?? `${mode === "numeric" ? "Digit" : "Character"} ${index + 1} of ${length}`}
  data-slot="pin-input-slot"
  data-index={index}
  data-size={size}
  data-state={state}
  class={className}
  {...rest}
/>

import PinInput from "./PinInput.astro";
import PinInputSlot from "./PinInputSlot.astro";

export { PinInput, PinInputSlot };
export default PinInput;

const ALLOWED: Readonly<Record<"numeric" | "alphanumeric", RegExp>> = {
  numeric: /[0-9]/,
  alphanumeric: /[0-9a-z]/i,
};

export function distribute(
  text: string,
  type: "numeric" | "alphanumeric",
  length: number,
  from = 0,
): string[] {
  const allowed = ALLOWED[type] ?? ALLOWED.alphanumeric;
  return [...text].filter((char) => allowed.test(char)).slice(0, Math.max(0, length - from));
}