Copy Field

- Mask: dots (8–24) plus the last `visibleTail` characters; masked text is
  muted, widely tracked and unselectable.
- Regenerate: awaits `onRegenerate`, writes the value (uncontrolled) or calls
  `onValueChange`, then bumps a counter that keys a fading `bg-accent/12`
  overlay (1.2 s).
- Controls sit inside the field's ring, so the whole row reads as one input.

<!-- PEBBLE-LICENSE -->

registry/button/copy-field/copy-field.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: copy-field.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { AnimatePresence, motion, MotionConfig } from "motion/react";

import { cn } from "@/lib/utils";
import { CopyButton } from "@/registry/button/copy-button/copy-button";
import { ConfirmPopover } from "@/registry/overlay/confirm-popover/confirm-popover";

export type CopyFieldProps = {
  label: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Help line under the field. */
  description?: React.ReactNode;
  /** Hide the value behind dots with a reveal toggle (secrets). */
  secret?: boolean;
  /** Characters left visible at the end while masked. */
  visibleTail?: number;
  /** Issue a new value. Return it (or a promise of it); the old one stops working. */
  onRegenerate?: () => string | Promise<string>;
  /** Question in the regenerate confirm. */
  regenerateTitle?: string;
  regenerateDescription?: string;
  onCopy?: (value: string) => void;
  className?: string;
};

function mask(value: string, tail: number) {
  const keep = Math.min(tail, Math.max(0, value.length - 4));
  return (
    "•".repeat(Math.max(8, Math.min(24, value.length - keep))) + value.slice(value.length - keep)
  );
}

const glyph = (d: string) => (
  <svg
    viewBox="0 0 16 16"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
    className="size-4"
  >
    <path d={d} />
  </svg>
);

const eye = glyph(
  "M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8zM8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
);
const eyeOff = glyph(
  "M2.5 2.5l11 11M6.6 6.6a2 2 0 0 0 2.8 2.8M4.3 4.9C2.6 6.1 1.5 8 1.5 8S4 12.5 8 12.5c1.3 0 2.4-.4 3.3-1M7 3.6c.3-.1.7-.1 1-.1 4 0 6.5 4.5 6.5 4.5s-.6 1.1-1.7 2.3",
);
const refresh = glyph("M13 8a5 5 0 1 1-1.5-3.5M13 3v2.5h-2.5");

/** A read-only value (API key, invite link) with copy, optional mask/reveal and regenerate. */
export function CopyField({
  label,
  value: valueProp,
  defaultValue = "",
  onValueChange,
  description,
  secret = false,
  visibleTail = 4,
  onRegenerate,
  regenerateTitle = "Regenerate this key?",
  regenerateDescription = "The current key stops working right away. Apps using it will need the new one.",
  onCopy,
  className,
}: CopyFieldProps) {
  const id = React.useId();
  const [inner, setInner] = React.useState(defaultValue);
  const value = valueProp ?? inner;
  const [revealed, setRevealed] = React.useState(!secret);
  const [fresh, setFresh] = React.useState(0);

  const shown = revealed ? value : mask(value, visibleTail);

  async function regenerate() {
    if (!onRegenerate) return;
    const next = await onRegenerate();
    if (valueProp === undefined) setInner(next);
    onValueChange?.(next);
    setFresh((n) => n + 1);
  }

  const iconButton =
    "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-(--motion-fast) hover:bg-muted hover:text-foreground active:scale-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none motion-reduce:active:scale-100";

  return (
    <MotionConfig reducedMotion="user">
      <div data-slot="copy-field" className={cn("grid gap-1.5", className)}>
        <label htmlFor={id} className="text-[13px] font-medium">
          {label}
        </label>
        <div
          className={cn(
            "relative flex items-center gap-1 overflow-hidden rounded-md bg-card py-1 pr-1 pl-3 ring-1 inset-shadow-[0_1px_1px_var(--hairline)] ring-border-control dark:bg-muted",
            "focus-within:ring-2 focus-within:ring-ring",
          )}
        >
          {/* A brief ember wash marks a freshly regenerated value. */}
          <AnimatePresence>
            {fresh > 0 && (
              <motion.span
                key={fresh}
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 bg-accent/12"
                initial={{ opacity: 1 }}
                animate={{ opacity: 0 }}
                transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
              />
            )}
          </AnimatePresence>
          <input
            id={id}
            readOnly
            value={shown}
            aria-describedby={description ? `${id}-desc` : undefined}
            // A secret shown as dots shouldn't be selectable text.
            onFocus={(event) => revealed && event.currentTarget.select()}
            className={cn(
              "relative h-7 min-w-0 flex-1 truncate bg-transparent font-mono text-[13px] outline-none",
              !revealed && "tracking-wider text-muted-foreground select-none",
            )}
          />
          {secret && (
            <button
              type="button"
              aria-label={revealed ? `Hide ${label}` : `Show ${label}`}
              aria-pressed={revealed}
              aria-controls={id}
              onClick={() => setRevealed((v) => !v)}
              className={cn(iconButton, "relative")}
            >
              {revealed ? eyeOff : eye}
            </button>
          )}
          {onRegenerate && (
            <ConfirmPopover
              tone="danger"
              title={regenerateTitle}
              description={regenerateDescription}
              confirmLabel="Regenerate"
              pendingLabel="Regenerating…"
              align="end"
              onConfirm={regenerate}
            >
              <button
                type="button"
                aria-label={`Regenerate ${label}`}
                className={cn(iconButton, "relative")}
              >
                {refresh}
              </button>
            </ConfirmPopover>
          )}
          <CopyButton
            value={value}
            label
            variant="secondary"
            size="sm"
            onCopy={onCopy}
            className="relative"
          />
        </div>
        {description && (
          <p id={`${id}-desc`} className="text-[13px] text-pretty text-muted-foreground">
            {description}
          </p>
        )}
      </div>
    </MotionConfig>
  );
}