@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/ConfirmDialog.tsx

@@ -1,95 +1,95 @@
-// File: packages/react/src/components/ConfirmDialog.tsx
-// Map: ConfirmDialog = dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm)
-// A variant of AlertDialog with `.oc-alert-dialog--confirm`. The form is submitted with the confirm button;
-// with `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
-"use client";
-
-import { forwardRef, useId, useRef } from "react";
-import type { DialogHTMLAttributes, FormEvent, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { useDialog, useMergedRef } from "../hooks";
-import type { DialogState } from "../hooks";
-import type { AlertDialogType } from "./AlertDialog";
-
-const GLYPHS: Record<AlertDialogType, string> = { success: "✓", error: "×", warning: "!", info: "i", question: "?" };
-
-export interface ConfirmDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
-  /** Icon color; default `error` (destructive confirm). */
-  type?: AlertDialogType;
-  icon?: ReactNode;
-  title: ReactNode;
-  /** Message: pass as `message` or as children. */
-  message?: ReactNode;
-  confirmLabel?: ReactNode;
-  cancelLabel?: ReactNode;
-  /** Optional third action at the footer start ("Don't save"). */
-  discardLabel?: ReactNode;
-  /** The user must type this word before confirming, e.g. "DELETE". */
-  confirmWord?: string;
-  /** Label above the typed field; defaults to "Type WORD to confirm". */
-  confirmWordLabel?: ReactNode;
-  closeLabel?: string;
-  onConfirm?: () => void;
-  onDiscard?: () => void;
-}
-
-/** Confirm variant of the alert dialog (`.oc-alert-dialog--confirm`). */
-export const ConfirmDialog = forwardRef<HTMLDialogElement, ConfirmDialogProps>(function ConfirmDialog(
-  {
-    open, defaultOpen, onOpenChange, type = "error", icon, title, message, children,
-    confirmLabel = "Confirm", cancelLabel = "Cancel", discardLabel, confirmWord, confirmWordLabel,
-    closeLabel = "Close", onConfirm, onDiscard, className, ...rest
-  },
-  forwardedRef,
-) {
-  const inner = useRef<HTMLDialogElement>(null);
-  const ref = useMergedRef(inner, forwardedRef);
-  const id = useId();
-  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
-
-  // We close through state (not method="dialog"), so React stays the source of truth.
-  const submit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onConfirm?.();
-    dlg.close();
-  };
-  const destructive = type === "error";
-
-  return (
-    <dialog
-      ref={ref}
-      className={cx("oc-modal", className)}
-      aria-labelledby={`${id}-title`}
-      aria-describedby={`${id}-text`}
-      {...attrs({ closedby: "any" })}
-      {...rest}
-      onClose={dlg.onClose}
-    >
-      <div className={`oc-modal-content oc-alert-dialog oc-alert-dialog--${type} oc-alert-dialog--confirm`}>
-        <button className="oc-alert-dialog-close" type="button" aria-label={closeLabel} onClick={dlg.close}>×</button>
-        <span className="oc-alert-dialog-icon" aria-hidden="true">{icon ?? GLYPHS[type]}</span>
-        <h2 className="oc-modal-title" id={`${id}-title`}>{title}</h2>
-        <form className="oc-alert-dialog-form" onSubmit={submit}>
-          <div className="oc-modal-body" id={`${id}-text`}>{message ?? children}</div>
-          {confirmWord && (
-            <label className="oc-alert-dialog-typed">
-              <span>{confirmWordLabel ?? <>Type <code>{confirmWord}</code> to confirm</>}</span>
-              <input className="oc-input" name="confirm" pattern={confirmWord} required autoComplete="off" />
-            </label>
-          )}
-          <div className="oc-modal-footer">
-            {discardLabel != null && (
-              <button className="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" onClick={() => { onDiscard?.(); dlg.close(); }}>
-                {discardLabel}
-              </button>
-            )}
-            <button className="oc-btn oc-btn--outline" type="button" onClick={dlg.close}>{cancelLabel}</button>
-            <button className={cx("oc-btn", destructive && "oc-btn--destructive", "oc-alert-dialog-confirm")} type="submit" value="confirm">
-              {confirmLabel}
-            </button>
-          </div>
-        </form>
-      </div>
-    </dialog>
-  );
-});
+// File: packages/react/src/components/ConfirmDialog.tsx
+// Map: ConfirmDialog = dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm)
+// A variant of AlertDialog with `.oc-alert-dialog--confirm`. The form is submitted with the confirm button;
+// with `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, FormEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+import type { AlertDialogType } from "./AlertDialog";
+
+const GLYPHS: Record<AlertDialogType, string> = { success: "✓", error: "×", warning: "!", info: "i", question: "?" };
+
+export interface ConfirmDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Icon color; default `error` (destructive confirm). */
+  type?: AlertDialogType;
+  icon?: ReactNode;
+  title: ReactNode;
+  /** Message: pass as `message` or as children. */
+  message?: ReactNode;
+  confirmLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  /** Optional third action at the footer start ("Don't save"). */
+  discardLabel?: ReactNode;
+  /** The user must type this word before confirming, e.g. "DELETE". */
+  confirmWord?: string;
+  /** Label above the typed field; defaults to "Type WORD to confirm". */
+  confirmWordLabel?: ReactNode;
+  closeLabel?: string;
+  onConfirm?: () => void;
+  onDiscard?: () => void;
+}
+
+/** Confirm variant of the alert dialog (`.oc-alert-dialog--confirm`). */
+export const ConfirmDialog = forwardRef<HTMLDialogElement, ConfirmDialogProps>(function ConfirmDialog(
+  {
+    open, defaultOpen, onOpenChange, type = "error", icon, title, message, children,
+    confirmLabel = "Confirm", cancelLabel = "Cancel", discardLabel, confirmWord, confirmWordLabel,
+    closeLabel = "Close", onConfirm, onDiscard, className, ...rest
+  },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const id = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+
+  // We close through state (not method="dialog"), so React stays the source of truth.
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onConfirm?.();
+    dlg.close();
+  };
+  const destructive = type === "error";
+
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-modal", className)}
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-text`}
+      {...attrs({ closedby: "any" })}
+      {...rest}
+      onClose={dlg.onClose}
+    >
+      <div className={`oc-modal-content oc-alert-dialog oc-alert-dialog--${type} oc-alert-dialog--confirm`}>
+        <button className="oc-alert-dialog-close" type="button" aria-label={closeLabel} onClick={dlg.close}>×</button>
+        <span className="oc-alert-dialog-icon" aria-hidden="true">{icon ?? GLYPHS[type]}</span>
+        <h2 className="oc-modal-title" id={`${id}-title`}>{title}</h2>
+        <form className="oc-alert-dialog-form" onSubmit={submit}>
+          <div className="oc-modal-body" id={`${id}-text`}>{message ?? children}</div>
+          {confirmWord && (
+            <label className="oc-alert-dialog-typed">
+              <span>{confirmWordLabel ?? <>Type <code>{confirmWord}</code> to confirm</>}</span>
+              <input className="oc-input" name="confirm" pattern={confirmWord} required autoComplete="off" />
+            </label>
+          )}
+          <div className="oc-modal-footer">
+            {discardLabel != null && (
+              <button className="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" onClick={() => { onDiscard?.(); dlg.close(); }}>
+                {discardLabel}
+              </button>
+            )}
+            <button className="oc-btn oc-btn--outline" type="button" onClick={dlg.close}>{cancelLabel}</button>
+            <button className={cx("oc-btn", destructive && "oc-btn--destructive", "oc-alert-dialog-confirm")} type="submit" value="confirm">
+              {confirmLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  );
+});

package/src/components/CookieConsent.tsx

@@ -1,137 +1,137 @@
-// File: packages/react/src/components/CookieConsent.tsx
-// Map: types + demo categories -> storage helpers -> CookieConsent (reopen button, popover: title, text, categories, actions) -> effect
-// Same markup as packages/ui/snippets/cookie-consent.html on popover="manual". The effect does what the snippet script does:
-// show the banner when no choice is stored, save the choice in localStorage and fire "oc-consent" on document.
-"use client";
-
-import { forwardRef, useEffect, useRef } from "react";
-import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
-import { attrs, callAll, cx } from "../utils";
-import { useMergedRef } from "../hooks";
-
-export interface CookieCategory {
-  /** Input name and key in the stored choice (e.g. "statistics"). */
-  name: string;
-  label: string;
-  text?: ReactNode;
-  /** Always on (checked + disabled), e.g. necessary cookies. */
-  required?: boolean;
-}
-
-/** Stored choice: `{ necessary: true, statistics, marketing, date }`. */
-export type ConsentChoice = { necessary: boolean; date: string } & Record<string, boolean | string>;
-
-export interface CookieConsentProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  categories?: CookieCategory[];
-  title?: ReactNode;
-  /** Replaces the whole text paragraph (put your policy link in it). */
-  text?: ReactNode;
-  policyHref?: string;
-  customizeLabel?: ReactNode;
-  necessaryLabel?: ReactNode;
-  selectedLabel?: ReactNode;
-  allLabel?: ReactNode;
-  /** Text of the "Cookie settings" button that opens the banner again; null hides it. */
-  openLabel?: ReactNode;
-  /** Full-width bar at the bottom (`--bar`). */
-  bar?: boolean;
-  /** Never open by itself (`data-oc-consent-manual`). */
-  manual?: boolean;
-  storageKey?: string;
-  /** Called with the stored choice on load and after every choice. */
-  onConsent?: (choice: ConsentChoice) => void;
-}
-
-const DEMO: CookieCategory[] = [
-  { name: "necessary", label: "Necessary", text: "Session, security and your cookie choice. Always on.", required: true },
-  { name: "statistics", label: "Statistics", text: "Anonymous visit counts." },
-  { name: "marketing", label: "Marketing", text: "Embedded videos and ads that track you." },
-];
-
-const read = (key: string): ConsentChoice | null => {
-  try { return JSON.parse(localStorage.getItem(key) ?? "null"); } catch { return null; }
-};
-
-/** `aside.oc-cookie-consent[popover=manual]` plus an optional `[data-oc-consent-open]` button. */
-export const CookieConsent = forwardRef<HTMLElement, CookieConsentProps>(function CookieConsent(
-  {
-    categories = DEMO, title = "We use cookies", text, policyHref = "#cookie-policy", customizeLabel = "Customize",
-    necessaryLabel = "Only necessary", selectedLabel = "Save choice", allLabel = "Accept all", openLabel = "Cookie settings",
-    bar, manual, storageKey = "oc-consent", onConsent, id = "oc-cookie-consent", className, onClick, ...rest
-  },
-  forwardedRef,
-) {
-  const box = useRef<HTMLElement>(null);
-  const ref = useMergedRef(box, forwardedRef);
-  const cb = useRef(onConsent);
-  cb.current = onConsent;
-  const inputs = () => Array.from(box.current?.querySelectorAll<HTMLInputElement>("input[name]") ?? []);
-  const tell = (choice: ConsentChoice) => {
-    document.dispatchEvent(new CustomEvent("oc-consent", { detail: choice }));
-    cb.current?.(choice);
-  };
-
-  // On load: report a stored choice or show the banner; any [data-oc-consent-open] opens it again.
-  useEffect(() => {
-    const stored = read(storageKey);
-    if (stored) tell(stored);
-    else if (!manual) box.current?.showPopover?.();
-    const reopen = (e: Event) => {
-      if (!(e.target as Element | null)?.closest?.("[data-oc-consent-open]")) return;
-      const choice = read(storageKey);
-      for (const i of inputs()) if (!i.disabled) i.checked = !!choice?.[i.name];
-      box.current?.showPopover?.();
-    };
-    document.addEventListener("click", reopen);
-    return () => document.removeEventListener("click", reopen);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [storageKey, manual]);
-
-  const choose = (e: MouseEvent<HTMLElement>) => {
-    const mode = (e.target as HTMLElement).closest<HTMLElement>("[data-oc-consent]")?.dataset.ocConsent;
-    if (!mode) return;
-    const choice: ConsentChoice = { necessary: true, date: new Date().toISOString() };
-    for (const i of inputs()) if (!i.disabled) choice[i.name] = mode === "all" || (mode === "selected" && i.checked);
-    try { localStorage.setItem(storageKey, JSON.stringify(choice)); } catch { /* storage blocked */ }
-    box.current?.hidePopover?.();
-    tell(choice);
-  };
-
-  return (
-    <>
-      {openLabel != null && <button type="button" className="oc-btn oc-btn--outline oc-btn--sm" data-oc-consent-open="">{openLabel}</button>}
-      <aside
-        ref={ref}
-        className={cx("oc-cookie-consent", bar && "oc-cookie-consent--bar", className)}
-        id={id}
-        {...attrs({ popover: "manual", "data-oc-consent-manual": manual ? "" : undefined })}
-        aria-labelledby={`${id}-title`}
-        onClick={callAll(choose, onClick)}
-        {...rest}
-      >
-        <h2 className="oc-cookie-consent__title" id={`${id}-title`}><span aria-hidden="true">&#127850;</span> {title}</h2>
-        <p className="oc-cookie-consent__text">
-          {text ?? <>Necessary cookies keep the site working. With your permission we also measure visits to improve the site. Read the <a href={policyHref}>cookie policy</a>.</>}
-        </p>
-        <details className="oc-cookie-consent__prefs">
-          <summary>{customizeLabel}</summary>
-          {categories.map((c) => (
-            <div key={c.name} className="oc-cookie-consent__category">
-              <span className="oc-cookie-consent__category-name">{c.label}</span>
-              {c.text != null && <span className="oc-cookie-consent__category-text">{c.text}</span>}
-              <label className="oc-switch">
-                <input type="checkbox" role="switch" name={c.name} defaultChecked={c.required} disabled={c.required} aria-label={`${c.label} cookies`} />
-                <span className="oc-switch-track" />
-              </label>
-            </div>
-          ))}
-        </details>
-        <div className="oc-cookie-consent__actions">
-          <button type="button" className="oc-btn oc-btn--outline" data-oc-consent="necessary">{necessaryLabel}</button>
-          <button type="button" className="oc-btn oc-btn--secondary" data-oc-consent="selected">{selectedLabel}</button>
-          <button type="button" className="oc-btn" data-oc-consent="all">{allLabel}</button>
-        </div>
-      </aside>
-    </>
-  );
-});
+// File: packages/react/src/components/CookieConsent.tsx
+// Map: types + demo categories -> storage helpers -> CookieConsent (reopen button, popover: title, text, categories, actions) -> effect
+// Same markup as packages/ui/snippets/cookie-consent.html on popover="manual". The effect does what the snippet script does:
+// show the banner when no choice is stored, save the choice in localStorage and fire "oc-consent" on document.
+"use client";
+
+import { forwardRef, useEffect, useRef } from "react";
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, callAll, cx } from "../utils";
+import { useMergedRef } from "../hooks";
+
+export interface CookieCategory {
+  /** Input name and key in the stored choice (e.g. "statistics"). */
+  name: string;
+  label: string;
+  text?: ReactNode;
+  /** Always on (checked + disabled), e.g. necessary cookies. */
+  required?: boolean;
+}
+
+/** Stored choice: `{ necessary: true, statistics, marketing, date }`. */
+export type ConsentChoice = { necessary: boolean; date: string } & Record<string, boolean | string>;
+
+export interface CookieConsentProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  categories?: CookieCategory[];
+  title?: ReactNode;
+  /** Replaces the whole text paragraph (put your policy link in it). */
+  text?: ReactNode;
+  policyHref?: string;
+  customizeLabel?: ReactNode;
+  necessaryLabel?: ReactNode;
+  selectedLabel?: ReactNode;
+  allLabel?: ReactNode;
+  /** Text of the "Cookie settings" button that opens the banner again; null hides it. */
+  openLabel?: ReactNode;
+  /** Full-width bar at the bottom (`--bar`). */
+  bar?: boolean;
+  /** Never open by itself (`data-oc-consent-manual`). */
+  manual?: boolean;
+  storageKey?: string;
+  /** Called with the stored choice on load and after every choice. */
+  onConsent?: (choice: ConsentChoice) => void;
+}
+
+const DEMO: CookieCategory[] = [
+  { name: "necessary", label: "Necessary", text: "Session, security and your cookie choice. Always on.", required: true },
+  { name: "statistics", label: "Statistics", text: "Anonymous visit counts." },
+  { name: "marketing", label: "Marketing", text: "Embedded videos and ads that track you." },
+];
+
+const read = (key: string): ConsentChoice | null => {
+  try { return JSON.parse(localStorage.getItem(key) ?? "null"); } catch { return null; }
+};
+
+/** `aside.oc-cookie-consent[popover=manual]` plus an optional `[data-oc-consent-open]` button. */
+export const CookieConsent = forwardRef<HTMLElement, CookieConsentProps>(function CookieConsent(
+  {
+    categories = DEMO, title = "We use cookies", text, policyHref = "#cookie-policy", customizeLabel = "Customize",
+    necessaryLabel = "Only necessary", selectedLabel = "Save choice", allLabel = "Accept all", openLabel = "Cookie settings",
+    bar, manual, storageKey = "oc-consent", onConsent, id = "oc-cookie-consent", className, onClick, ...rest
+  },
+  forwardedRef,
+) {
+  const box = useRef<HTMLElement>(null);
+  const ref = useMergedRef(box, forwardedRef);
+  const cb = useRef(onConsent);
+  cb.current = onConsent;
+  const inputs = () => Array.from(box.current?.querySelectorAll<HTMLInputElement>("input[name]") ?? []);
+  const tell = (choice: ConsentChoice) => {
+    document.dispatchEvent(new CustomEvent("oc-consent", { detail: choice }));
+    cb.current?.(choice);
+  };
+
+  // On load: report a stored choice or show the banner; any [data-oc-consent-open] opens it again.
+  useEffect(() => {
+    const stored = read(storageKey);
+    if (stored) tell(stored);
+    else if (!manual) box.current?.showPopover?.();
+    const reopen = (e: Event) => {
+      if (!(e.target as Element | null)?.closest?.("[data-oc-consent-open]")) return;
+      const choice = read(storageKey);
+      for (const i of inputs()) if (!i.disabled) i.checked = !!choice?.[i.name];
+      box.current?.showPopover?.();
+    };
+    document.addEventListener("click", reopen);
+    return () => document.removeEventListener("click", reopen);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storageKey, manual]);
+
+  const choose = (e: MouseEvent<HTMLElement>) => {
+    const mode = (e.target as HTMLElement).closest<HTMLElement>("[data-oc-consent]")?.dataset.ocConsent;
+    if (!mode) return;
+    const choice: ConsentChoice = { necessary: true, date: new Date().toISOString() };
+    for (const i of inputs()) if (!i.disabled) choice[i.name] = mode === "all" || (mode === "selected" && i.checked);
+    try { localStorage.setItem(storageKey, JSON.stringify(choice)); } catch { /* storage blocked */ }
+    box.current?.hidePopover?.();
+    tell(choice);
+  };
+
+  return (
+    <>
+      {openLabel != null && <button type="button" className="oc-btn oc-btn--outline oc-btn--sm" data-oc-consent-open="">{openLabel}</button>}
+      <aside
+        ref={ref}
+        className={cx("oc-cookie-consent", bar && "oc-cookie-consent--bar", className)}
+        id={id}
+        {...attrs({ popover: "manual", "data-oc-consent-manual": manual ? "" : undefined })}
+        aria-labelledby={`${id}-title`}
+        onClick={callAll(choose, onClick)}
+        {...rest}
+      >
+        <h2 className="oc-cookie-consent__title" id={`${id}-title`}><span aria-hidden="true">&#127850;</span> {title}</h2>
+        <p className="oc-cookie-consent__text">
+          {text ?? <>Necessary cookies keep the site working. With your permission we also measure visits to improve the site. Read the <a href={policyHref}>cookie policy</a>.</>}
+        </p>
+        <details className="oc-cookie-consent__prefs">
+          <summary>{customizeLabel}</summary>
+          {categories.map((c) => (
+            <div key={c.name} className="oc-cookie-consent__category">
+              <span className="oc-cookie-consent__category-name">{c.label}</span>
+              {c.text != null && <span className="oc-cookie-consent__category-text">{c.text}</span>}
+              <label className="oc-switch">
+                <input type="checkbox" role="switch" name={c.name} defaultChecked={c.required} disabled={c.required} aria-label={`${c.label} cookies`} />
+                <span className="oc-switch-track" />
+              </label>
+            </div>
+          ))}
+        </details>
+        <div className="oc-cookie-consent__actions">
+          <button type="button" className="oc-btn oc-btn--outline" data-oc-consent="necessary">{necessaryLabel}</button>
+          <button type="button" className="oc-btn oc-btn--secondary" data-oc-consent="selected">{selectedLabel}</button>
+          <button type="button" className="oc-btn" data-oc-consent="all">{allLabel}</button>
+        </div>
+      </aside>
+    </>
+  );
+});

package/src/components/CopyField.tsx

@@ -1,44 +1,44 @@
-"use client";
-
-import { forwardRef, useEffect, useRef, useState } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
-  value: string;
-  /** Accessible name of the read-only input. */
-  label?: string;
-  buttonLabel?: string;
-  /** How long the `is-copied` feedback stays (ms). */
-  feedbackMs?: number;
-  onCopy?: (value: string) => void;
-}
-
-/** Read-only monospace value with a copy button (`is-copied` feedback for 2s). */
-export const CopyField = forwardRef<HTMLDivElement, CopyFieldProps>(function CopyField(
-  { value, label = "Value", buttonLabel = "Copy", feedbackMs = 2000, onCopy, className, ...rest },
-  ref,
-) {
-  const [copied, setCopied] = useState(false);
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  useEffect(() => () => clearTimeout(timer.current), []);
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-      return;
-    }
-    setCopied(true);
-    onCopy?.(value);
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setCopied(false), feedbackMs);
-  };
-
-  return (
-    <div ref={ref} className={cx("oc-copy-field", className)} {...rest}>
-      <input className="oc-copy-field-value" type="text" readOnly value={value} aria-label={label} />
-      <button className={cx("oc-copy-field-button", copied && "is-copied")} type="button" onClick={copy}>{buttonLabel}</button>
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useEffect, useRef, useState } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+  value: string;
+  /** Accessible name of the read-only input. */
+  label?: string;
+  buttonLabel?: string;
+  /** How long the `is-copied` feedback stays (ms). */
+  feedbackMs?: number;
+  onCopy?: (value: string) => void;
+}
+
+/** Read-only monospace value with a copy button (`is-copied` feedback for 2s). */
+export const CopyField = forwardRef<HTMLDivElement, CopyFieldProps>(function CopyField(
+  { value, label = "Value", buttonLabel = "Copy", feedbackMs = 2000, onCopy, className, ...rest },
+  ref,
+) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    onCopy?.(value);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), feedbackMs);
+  };
+
+  return (
+    <div ref={ref} className={cx("oc-copy-field", className)} {...rest}>
+      <input className="oc-copy-field-value" type="text" readOnly value={value} aria-label={label} />
+      <button className={cx("oc-copy-field-button", copied && "is-copied")} type="button" onClick={copy}>{buttonLabel}</button>
+    </div>
+  );
+});

package/src/components/Counter.tsx

@@ -1,21 +1,21 @@
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface CounterProps extends HTMLAttributes<HTMLElement> {
-  /** Target number (`--oc-counter-to`). */
-  to: number;
-  /** Text after the number, e.g. `+` or `%` (`--oc-counter-suffix`). */
-  suffix?: string;
-  /** Start animating when scrolled into view (default true). */
-  onView?: boolean;
-}
-
-/** `<strong class="oc-counter oc-counter--on-view">`: animated number, CSS only. */
-export const Counter = forwardRef<HTMLElement, CounterProps>(function Counter(
-  { to, suffix, onView = true, className, style, ...rest },
-  ref,
-) {
-  const vars = { "--oc-counter-to": to, ...(suffix ? { "--oc-counter-suffix": `'${suffix}'` } : {}) } as CSSProperties;
-  return <strong ref={ref} className={cx("oc-counter", onView && "oc-counter--on-view", className)} style={{ ...vars, ...style }} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface CounterProps extends HTMLAttributes<HTMLElement> {
+  /** Target number (`--oc-counter-to`). */
+  to: number;
+  /** Text after the number, e.g. `+` or `%` (`--oc-counter-suffix`). */
+  suffix?: string;
+  /** Start animating when scrolled into view (default true). */
+  onView?: boolean;
+}
+
+/** `<strong class="oc-counter oc-counter--on-view">`: animated number, CSS only. */
+export const Counter = forwardRef<HTMLElement, CounterProps>(function Counter(
+  { to, suffix, onView = true, className, style, ...rest },
+  ref,
+) {
+  const vars = { "--oc-counter-to": to, ...(suffix ? { "--oc-counter-suffix": `'${suffix}'` } : {}) } as CSSProperties;
+  return <strong ref={ref} className={cx("oc-counter", onView && "oc-counter--on-view", className)} style={{ ...vars, ...style }} {...rest} />;
+});