@cronus-ui/ui 0.6.0

package/dist/components/context-menu.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+/** Non-modal by default — same scroll-lock trap as {@link DropdownMenu}. */
+export function ContextMenu({ modal = false, ...props }) {
+    return _jsx(ContextMenuPrimitive.Root, { modal: modal, ...props });
+}
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuPortal = ContextMenuPrimitive.Portal;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+export const ContextMenuSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => {
+    return (_jsxs(ContextMenuPrimitive.SubTrigger, { ref: ref, "data-slot": "context-menu-sub-trigger", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[state=open]:bg-surface-overlay data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ms-auto" })] }));
+});
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+export const ContextMenuSubContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(ContextMenuPrimitive.SubContent, { ref: ref, "data-slot": "context-menu-sub-content", className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }));
+});
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+export const ContextMenuContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { ref: ref, "data-slot": "context-menu-content", className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }) }));
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+export const ContextMenuItem = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(ContextMenuPrimitive.Item, { ref: ref, "data-slot": "context-menu-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props }));
+});
+ContextMenuItem.displayName = "ContextMenuItem";
+export const ContextMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => {
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { ref: ref, "data-slot": "context-menu-checkbox-item", checked: checked, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] }));
+});
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+export const ContextMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(ContextMenuPrimitive.RadioItem, { ref: ref, "data-slot": "context-menu-radio-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] }));
+});
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+export const ContextMenuLabel = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(ContextMenuPrimitive.Label, { ref: ref, "data-slot": "context-menu-label", className: cn("px-2 py-1.5 text-xs text-fg-tertiary", inset && "ps-8", className), ...props }));
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+export const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(ContextMenuPrimitive.Separator, { ref: ref, "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+export const ContextMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ms-auto text-xs tracking-widest text-fg-tertiary", className), ...props }));
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+//# sourceMappingURL=context-menu.js.map

package/dist/components/copy-button.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps } from "./button.js";
+export interface CopyButtonProps extends Omit<ButtonProps, "value" | "children"> {
+    /** Text written to the clipboard when the button is pressed. */
+    value: string;
+    /** Milliseconds the "copied" state stays visible before reverting. Defaults to 1500. */
+    timeout?: number;
+    /** Accessible label shown to assistive tech in the idle state. Defaults to "Copy". */
+    copyLabel?: string;
+    /** Accessible label announced after a successful copy. Defaults to "Copied". */
+    copiedLabel?: string;
+}
+export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+/**
+ * Write `text` to the clipboard, returning whether it succeeded. Prefers the
+ * async Clipboard API and falls back to a temporary textarea + `execCommand`
+ * for insecure (http) contexts or browsers without `navigator.clipboard`.
+ */
+async function copyToClipboard(text) {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        catch {
+            // Permission denied or insecure context — fall through to execCommand.
+        }
+    }
+    if (typeof document === "undefined")
+        return false;
+    try {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        // Keep it out of view and out of the layout/scroll flow.
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.top = "0";
+        textarea.style.left = "0";
+        textarea.style.opacity = "0";
+        textarea.style.pointerEvents = "none";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        return ok;
+    }
+    catch {
+        return false;
+    }
+}
+export const CopyButton = forwardRef(({ value, timeout = 1500, copyLabel = "Copy", copiedLabel = "Copied", variant = "ghost", size = "icon", className, onClick, "aria-label": ariaLabel, ...props }, ref) => {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    const handleClick = useCallback(async (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const ok = await copyToClipboard(value);
+        // Only enter the "copied" state when the write actually succeeded, so we
+        // never announce success in an insecure context or when the API is
+        // missing and the fallback also fails.
+        if (!ok)
+            return;
+        setCopied(true);
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), timeout);
+    }, [onClick, value, timeout]);
+    return (_jsxs(Button, { ref: ref, type: "button", "data-slot": "copy-button", "data-copied": copied || undefined, variant: variant, size: size, "aria-label": ariaLabel ?? copyLabel, className: cn(className), onClick: handleClick, ...props, children: [copied ? (_jsx(Check, { className: "text-success", "aria-hidden": "true" })) : (_jsx(Copy, { "aria-hidden": "true" })), _jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })] }));
+});
+CopyButton.displayName = "CopyButton";
+//# sourceMappingURL=copy-button.js.map

package/dist/components/countdown.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes } from "react";
+/** Visible caption under each unit tile. Override any subset to localize. */
+export interface CountdownLabels {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+export interface CountdownProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The moment the countdown reaches zero: a `Date`, an ISO-8601 string, or an
+     * epoch-ms number. An unparsable target keeps the `--` placeholder and never
+     * ticks or completes.
+     */
+    target: Date | string | number;
+    /**
+     * Fired exactly once when the countdown reaches zero (immediately after
+     * mount when the target is already in the past). Re-arms if `target` later
+     * changes to a new future moment.
+     */
+    onComplete?: () => void;
+    /** Smaller tiles + type for tight spots (toolbars, banners, table cells). */
+    compact?: boolean;
+    /** Override any subset of the unit captions, e.g. `{ days: "dias" }`. */
+    labels?: Partial<CountdownLabels>;
+}
+/**
+ * A countdown to a target moment, rendered as four `tabular-nums` tiles
+ * (days / hours / minutes / seconds) on `bg-surface-raised` with
+ * `text-fg-tertiary` captions.
+ *
+ * How it works: the remaining time is re-derived from `Date.now()` on every
+ * tick, and the next tick is scheduled with a `setTimeout` aligned to the next
+ * whole-second boundary (`remaining % 1000`), so the display never drifts and
+ * wakes up only once per second. State stores whole seconds — sub-second
+ * re-computations that land on the same second are free (React bails out of
+ * identical state). At zero the timer stops scheduling and `onComplete` fires
+ * exactly once (guarded by a ref).
+ *
+ * Digit motion: each cell's value lives in a span keyed by its text, so a
+ * change remounts the span and a `starting:` (`@starting-style`) CSS
+ * transition slides it in with a subtle vertical drift + fade — no JS
+ * animation, no re-render churn beyond the one-per-second state update.
+ * Under `prefers-reduced-motion` the transition is disabled and digits swap
+ * instantly.
+ *
+ * SSR-safe: the server (and the first client paint) renders a stable `--`
+ * placeholder in every cell; the real values only appear after mount, so
+ * hydration never mismatches on wall-clock time.
+ *
+ * Accessibility: the root is `role="timer"` with `aria-live="off"` (per the
+ * ARIA timer pattern — ticking values should not be announced every second),
+ * and the once-a-second remounting tiles are `aria-hidden`. A visually hidden
+ * summary sentence built from the same labels gives screen readers a stable,
+ * readable value on focus.
+ */
+export declare const Countdown: import("react").ForwardRefExoticComponent<CountdownProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=countdown.d.ts.map

package/dist/components/countdown.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_LABELS = {
+    days: "days",
+    hours: "hours",
+    minutes: "min",
+    seconds: "sec",
+};
+const UNITS = ["days", "hours", "minutes", "seconds"];
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PER_HOUR = 3_600;
+const SECONDS_PER_DAY = 86_400;
+/** Shown in every cell until the client clock is known (SSR + first paint). */
+const PLACEHOLDER = "--";
+/** Normalize the accepted target shapes to an epoch-ms number (NaN when unparsable). */
+function toTimestamp(target) {
+    return target instanceof Date ? target.getTime() : new Date(target).getTime();
+}
+function splitSeconds(totalSeconds) {
+    return {
+        days: Math.floor(totalSeconds / SECONDS_PER_DAY),
+        hours: Math.floor(totalSeconds / SECONDS_PER_HOUR) % 24,
+        minutes: Math.floor(totalSeconds / SECONDS_PER_MINUTE) % 60,
+        seconds: totalSeconds % SECONDS_PER_MINUTE,
+    };
+}
+function pad(value) {
+    return String(value).padStart(2, "0");
+}
+/**
+ * A countdown to a target moment, rendered as four `tabular-nums` tiles
+ * (days / hours / minutes / seconds) on `bg-surface-raised` with
+ * `text-fg-tertiary` captions.
+ *
+ * How it works: the remaining time is re-derived from `Date.now()` on every
+ * tick, and the next tick is scheduled with a `setTimeout` aligned to the next
+ * whole-second boundary (`remaining % 1000`), so the display never drifts and
+ * wakes up only once per second. State stores whole seconds — sub-second
+ * re-computations that land on the same second are free (React bails out of
+ * identical state). At zero the timer stops scheduling and `onComplete` fires
+ * exactly once (guarded by a ref).
+ *
+ * Digit motion: each cell's value lives in a span keyed by its text, so a
+ * change remounts the span and a `starting:` (`@starting-style`) CSS
+ * transition slides it in with a subtle vertical drift + fade — no JS
+ * animation, no re-render churn beyond the one-per-second state update.
+ * Under `prefers-reduced-motion` the transition is disabled and digits swap
+ * instantly.
+ *
+ * SSR-safe: the server (and the first client paint) renders a stable `--`
+ * placeholder in every cell; the real values only appear after mount, so
+ * hydration never mismatches on wall-clock time.
+ *
+ * Accessibility: the root is `role="timer"` with `aria-live="off"` (per the
+ * ARIA timer pattern — ticking values should not be announced every second),
+ * and the once-a-second remounting tiles are `aria-hidden`. A visually hidden
+ * summary sentence built from the same labels gives screen readers a stable,
+ * readable value on focus.
+ */
+export const Countdown = forwardRef(({ target, onComplete, compact = false, labels, className, ...props }, ref) => {
+    const targetMs = toTimestamp(target);
+    // `null` = clock not known yet (server render / first client paint).
+    const [remainingSeconds, setRemainingSeconds] = useState(null);
+    // Latest callback in a ref so a new inline `onComplete` never restarts the timer.
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const completedRef = useRef(false);
+    useEffect(() => {
+        if (Number.isNaN(targetMs)) {
+            setRemainingSeconds(null);
+            return;
+        }
+        // A new target re-arms completion (e.g. extending a sale deadline).
+        completedRef.current = false;
+        let timeoutId;
+        const tick = () => {
+            const remaining = Math.max(0, targetMs - Date.now());
+            // Ceil so the display reads "1" until the second truly elapses.
+            setRemainingSeconds(Math.ceil(remaining / 1_000));
+            if (remaining <= 0) {
+                if (!completedRef.current) {
+                    completedRef.current = true;
+                    onCompleteRef.current?.();
+                }
+                return; // Stop scheduling — the countdown is over.
+            }
+            // Wake exactly at the next whole-second boundary (drift-free).
+            timeoutId = window.setTimeout(tick, remaining % 1_000 || 1_000);
+        };
+        tick();
+        return () => window.clearTimeout(timeoutId);
+    }, [targetMs]);
+    const parts = remainingSeconds === null ? null : splitSeconds(remainingSeconds);
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const summary = parts
+        ? UNITS.map((unit) => `${parts[unit]} ${mergedLabels[unit]}`).join(", ")
+        : "Counting down";
+    return (_jsxs("div", { ref: ref, "data-slot": "countdown", role: "timer", "aria-live": "off", "data-compact": compact ? "" : undefined, className: cn("inline-flex items-start", compact ? "gap-1" : "gap-1.5", className), ...props, children: [_jsx("span", { className: "sr-only", children: summary }), UNITS.map((unit) => {
+                const value = parts ? pad(parts[unit]) : PLACEHOLDER;
+                return (_jsxs("div", { "aria-hidden": "true", "data-slot": "countdown-unit", "data-unit": unit, className: cn("flex flex-col items-center rounded-lg border border-border bg-surface-raised shadow-xs", compact ? "min-w-9 px-1.5 py-1" : "min-w-14 gap-0.5 px-2.5 py-2"), children: [_jsx("span", { "data-slot": "countdown-value", className: cn("block overflow-hidden font-semibold text-fg tabular-nums", compact ? "text-sm leading-5" : "text-2xl leading-8"), children: _jsx("span", { className: "block transition-[transform,opacity] duration-300 ease-[var(--ease-out-quart)] starting:-translate-y-1.5 starting:opacity-0 motion-reduce:transition-none motion-reduce:starting:translate-y-0 motion-reduce:starting:opacity-100", children: value }, value) }), _jsx("span", { "data-slot": "countdown-label", className: cn("font-medium uppercase tracking-[0.08em] text-fg-tertiary", compact ? "text-[0.5625rem]" : "text-[0.6875rem]"), children: mergedLabels[unit] })] }, unit));
+            })] }));
+});
+Countdown.displayName = "Countdown";
+//# sourceMappingURL=countdown.js.map

package/dist/components/credit-card-input.d.ts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes } from "react";
+/**
+ * A single, unified card-entry field group — card number (auto-spaced with live
+ * brand detection from the IIN/prefix), expiry (MM/YY auto-slash), and CVC
+ * (3–4 digits depending on brand). Values are validated with the Luhn algorithm,
+ * a not-in-the-past expiry check, and a brand-correct CVC length, then surfaced
+ * through a single `onChange({ number, expiry, cvc, brand, complete, valid })`.
+ *
+ * Behaviour:
+ * - Brand is detected as the user types and rendered as a monochrome glyph; the
+ *   detected brand is announced to assistive tech via a polite live region.
+ * - Focus auto-advances number → expiry → CVC once each field is complete/valid.
+ * - CVC is clamped to the brand's length when the brand narrows (Amex → Visa).
+ *
+ * Performance / a11y:
+ * - Brand detection and validation are pure and memoised; no timers, intervals,
+ *   or RAF are used, so there is nothing to leak on unmount.
+ * - The group is labelled; each field carries its own `aria-label`, and the
+ *   valid-state check icon transition is disabled under `prefers-reduced-motion`.
+ *
+ * @remarks SECURITY: this is a **display-side formatter/validator only** — it is
+ * NOT a PCI vault. It never stores, logs, autofill-persists, or transmits the
+ * PAN/CVC. Autocomplete is disabled and no `name` attributes are emitted. Send
+ * card data straight to a compliant tokenizer (e.g. a payment iframe/SDK); do
+ * not read it back out of `onChange` into your own persistence or telemetry.
+ */
+/** A payment network detected from the card's IIN/prefix. */
+export type CardBrand = "visa" | "mastercard" | "amex" | "elo" | "discover" | "unknown";
+/** The parsed, validated snapshot emitted by {@link CreditCardInput} `onChange`. */
+export interface CreditCardValue {
+    /** Digits only, no spaces (the raw PAN — treat as sensitive). */
+    number: string;
+    /** Expiry formatted as `MM/YY` (or a partial as typed). */
+    expiry: string;
+    /** The security code digits. */
+    cvc: string;
+    /** Payment network inferred from the prefix, or `"unknown"`. */
+    brand: CardBrand;
+    /** All three fields have a plausible, complete length for the brand. */
+    complete: boolean;
+    /** Passes Luhn + non-past expiry + brand-correct CVC length. */
+    valid: boolean;
+}
+export interface CreditCardInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Accessible group label announced to assistive tech. @default "Credit card" */
+    label?: string;
+    /** Uncontrolled initial card number (digits or already-spaced). */
+    defaultNumber?: string;
+    /**
+     * Fires on every keystroke with the parsed, validated card value.
+     * Display-side only — do not persist, log, or transmit the raw PAN/CVC.
+     */
+    onChange?: (value: CreditCardValue) => void;
+    /** Forces the invalid styling and sets `aria-invalid` on every field. */
+    invalid?: boolean;
+    /** Disables all three fields. */
+    disabled?: boolean;
+    /** Optional error message rendered under the group with `role="alert"`. */
+    error?: string;
+}
+export declare const CreditCardInput: import("react").ForwardRefExoticComponent<CreditCardInputProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=credit-card-input.d.ts.map

package/dist/components/credit-card-input.js

@@ -0,0 +1,211 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, CreditCard } from "lucide-react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+// Order matters — the first matching pattern wins. Elo (Brazilian) borrows ranges
+// from Visa/Discover, so it must be tested before them.
+const CARD_TYPES = [
+    {
+        brand: "elo",
+        label: "Elo",
+        pattern: /^(4011|4312|4389|4514|4576|5041|5066|5067|509|6277|6362|6363|650|651|655)/,
+        lengths: [16],
+        cvc: [3],
+        gaps: [4, 8, 12],
+    },
+    {
+        brand: "amex",
+        label: "American Express",
+        pattern: /^3[47]/,
+        lengths: [15],
+        cvc: [4],
+        gaps: [4, 10],
+    },
+    {
+        brand: "mastercard",
+        label: "Mastercard",
+        pattern: /^(5[1-5]|222[1-9]|22[3-9]|2[3-6]|27[01]|2720)/,
+        lengths: [16],
+        cvc: [3],
+        gaps: [4, 8, 12],
+    },
+    {
+        brand: "visa",
+        label: "Visa",
+        pattern: /^4/,
+        lengths: [16, 19],
+        cvc: [3],
+        gaps: [4, 8, 12],
+    },
+    {
+        brand: "discover",
+        label: "Discover",
+        pattern: /^(6011|64[4-9]|65|622)/,
+        lengths: [16, 19],
+        cvc: [3],
+        gaps: [4, 8, 12],
+    },
+];
+const UNKNOWN_CARD = {
+    brand: "unknown",
+    label: "Card",
+    pattern: /.*/,
+    lengths: [16, 19],
+    cvc: [3, 4],
+    gaps: [4, 8, 12],
+};
+function getCardType(digits) {
+    if (!digits)
+        return UNKNOWN_CARD;
+    for (const type of CARD_TYPES) {
+        if (type.pattern.test(digits))
+            return type;
+    }
+    return UNKNOWN_CARD;
+}
+/** Standard Luhn checksum over a digit string. */
+function luhnValid(digits) {
+    if (digits.length < 12)
+        return false;
+    let sum = 0;
+    let double = false;
+    for (let i = digits.length - 1; i >= 0; i--) {
+        let d = digits.charCodeAt(i) - 48;
+        if (double) {
+            d *= 2;
+            if (d > 9)
+                d -= 9;
+        }
+        sum += d;
+        double = !double;
+    }
+    return sum % 10 === 0;
+}
+function formatNumber(digits, gaps) {
+    let out = "";
+    for (let i = 0; i < digits.length; i++) {
+        if (i > 0 && gaps.includes(i))
+            out += " ";
+        out += digits[i];
+    }
+    return out;
+}
+function formatExpiry(digits) {
+    if (digits.length >= 2)
+        return `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
+    return digits;
+}
+/** True when a 4-digit `MMYY` string is a real month and not in the past. */
+function expiryNotPast(digits) {
+    if (digits.length !== 4)
+        return false;
+    const mm = Number(digits.slice(0, 2));
+    const yy = Number(digits.slice(2, 4));
+    if (mm < 1 || mm > 12)
+        return false;
+    const now = new Date();
+    const curYY = now.getFullYear() % 100;
+    const curMM = now.getMonth() + 1;
+    if (yy < curYY)
+        return false;
+    if (yy === curYY && mm < curMM)
+        return false;
+    return true;
+}
+function BrandGlyph({ brand }) {
+    const box = "h-5 w-8 shrink-0 text-fg-secondary transition-opacity duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none";
+    switch (brand) {
+        case "visa":
+            return (_jsx("svg", { viewBox: "0 0 32 20", "aria-hidden": "true", className: cn(box, "font-display"), children: _jsx("text", { x: "16", y: "15", textAnchor: "middle", fontSize: "10", fontStyle: "italic", fontWeight: "800", letterSpacing: "0.4", fill: "currentColor", children: "VISA" }) }));
+        case "mastercard":
+            return (_jsxs("svg", { viewBox: "0 0 32 20", "aria-hidden": "true", className: box, children: [_jsx("circle", { cx: "12", cy: "10", r: "6.5", fill: "currentColor", opacity: "0.9" }), _jsx("circle", { cx: "20", cy: "10", r: "6.5", fill: "currentColor", opacity: "0.45" })] }));
+        case "amex":
+            return (_jsx("svg", { viewBox: "0 0 32 20", "aria-hidden": "true", className: cn(box, "font-display"), children: _jsx("text", { x: "16", y: "14", textAnchor: "middle", fontSize: "8", fontWeight: "800", letterSpacing: "0.3", fill: "currentColor", children: "AMEX" }) }));
+        case "elo":
+            return (_jsx("svg", { viewBox: "0 0 32 20", "aria-hidden": "true", className: cn(box, "font-display"), children: _jsx("text", { x: "16", y: "15", textAnchor: "middle", fontSize: "11", fontWeight: "800", letterSpacing: "0.2", fill: "currentColor", children: "elo" }) }));
+        case "discover":
+            return (_jsxs("svg", { viewBox: "0 0 32 20", "aria-hidden": "true", className: cn(box, "font-display"), children: [_jsx("text", { x: "12", y: "14", textAnchor: "middle", fontSize: "8", fontWeight: "800", fill: "currentColor", children: "DISC" }), _jsx("circle", { cx: "26", cy: "10", r: "3.2", fill: "currentColor" })] }));
+        default:
+            return _jsx(CreditCard, { "aria-hidden": true, className: cn(box, "p-0.5") });
+    }
+}
+export const CreditCardInput = forwardRef(({ className, label = "Credit card", defaultNumber, onChange, invalid = false, disabled = false, error, ...props }, ref) => {
+    const [numberDigits, setNumberDigits] = useState(() => (defaultNumber ?? "").replace(/\D/g, "").slice(0, 19));
+    const [expiryDigits, setExpiryDigits] = useState("");
+    const [cvcDigits, setCvcDigits] = useState("");
+    const expiryInputRef = useRef(null);
+    const cvcInputRef = useRef(null);
+    const numberInputRef = useRef(null);
+    const prevExpiry = useRef("");
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    });
+    const errorId = useId();
+    const isInvalid = invalid || Boolean(error);
+    const cardType = useMemo(() => getCardType(numberDigits), [numberDigits]);
+    const maxCvc = Math.max(...cardType.cvc);
+    // Narrow the CVC to the brand's length when the brand changes (e.g. Amex→Visa).
+    useEffect(() => {
+        setCvcDigits((c) => (c.length > maxCvc ? c.slice(0, maxCvc) : c));
+    }, [maxCvc]);
+    const value = useMemo(() => {
+        const numberComplete = cardType.lengths.includes(numberDigits.length);
+        const cvcComplete = cardType.cvc.includes(cvcDigits.length);
+        const expiryComplete = expiryDigits.length === 4;
+        const complete = numberComplete && cvcComplete && expiryComplete;
+        const valid = complete && luhnValid(numberDigits) && expiryNotPast(expiryDigits) && cvcComplete;
+        return {
+            number: numberDigits,
+            expiry: formatExpiry(expiryDigits),
+            cvc: cvcDigits,
+            brand: cardType.brand,
+            complete,
+            valid,
+        };
+    }, [numberDigits, expiryDigits, cvcDigits, cardType]);
+    useEffect(() => {
+        onChangeRef.current?.(value);
+    }, [value]);
+    const handleNumberChange = (event) => {
+        let digits = event.target.value.replace(/\D/g, "");
+        const type = getCardType(digits);
+        digits = digits.slice(0, Math.max(...type.lengths));
+        setNumberDigits(digits);
+        if (type.lengths.includes(digits.length) && luhnValid(digits)) {
+            expiryInputRef.current?.focus();
+        }
+    };
+    const handleExpiryChange = (event) => {
+        let raw = event.target.value;
+        // Break the auto-slash backspace trap: if the previously rendered value ended
+        // in "/" and the user deleted a char landing on the month, drop a month digit
+        // instead of re-inserting the separator.
+        if (prevExpiry.current.endsWith("/") && raw === prevExpiry.current.slice(0, -1)) {
+            raw = raw.slice(0, -1);
+        }
+        let digits = raw.replace(/\D/g, "").slice(0, 4);
+        if (digits.length === 1 && Number(digits) > 1)
+            digits = `0${digits}`;
+        prevExpiry.current = formatExpiry(digits);
+        setExpiryDigits(digits);
+        if (expiryNotPast(digits)) {
+            cvcInputRef.current?.focus();
+        }
+    };
+    const handleCvcChange = (event) => {
+        setCvcDigits(event.target.value.replace(/\D/g, "").slice(0, maxCvc));
+    };
+    const focusNumberOnPadding = (event) => {
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+            numberInputRef.current?.focus();
+        }
+    };
+    const fieldClass = "bg-transparent tabular-nums text-fg outline-none placeholder:text-fg-tertiary disabled:cursor-not-allowed";
+    const brandAnnounce = cardType.brand === "unknown" ? "" : `${cardType.label} card`;
+    return (_jsxs("div", { ref: ref, "data-slot": "credit-card-input", className: cn("flex w-full flex-col gap-1.5", className), ...props, children: [_jsxs("fieldset", { disabled: disabled, "data-invalid": isInvalid || undefined, "data-brand": cardType.brand, onMouseDown: disabled ? undefined : focusNumberOnPadding, className: cn("m-0 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 rounded-xl border border-border bg-surface-inset px-3.5 py-2.5 text-sm text-fg shadow-xs", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)]", "focus-within:border-primary focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-surface-base", "data-[invalid=true]:border-error data-[invalid=true]:focus-within:ring-error/30", "disabled:opacity-60"), children: [_jsx("legend", { className: "sr-only", children: label }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: brandAnnounce }), _jsx(BrandGlyph, { brand: cardType.brand }), _jsx("input", { ref: numberInputRef, type: "text", inputMode: "numeric", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Card number", "aria-invalid": isInvalid || undefined, "aria-describedby": error ? errorId : undefined, placeholder: cardType.brand === "amex" ? "0000 000000 00000" : "0000 0000 0000 0000", value: formatNumber(numberDigits, cardType.gaps), onChange: handleNumberChange, className: cn(fieldClass, "min-w-[11ch] flex-1 tracking-[0.02em]") }), _jsx("input", { ref: expiryInputRef, type: "text", inputMode: "numeric", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Expiration date, M M slash Y Y", "aria-invalid": isInvalid || undefined, placeholder: "MM/YY", value: formatExpiry(expiryDigits), onChange: handleExpiryChange, className: cn(fieldClass, "w-[3.25rem] shrink-0") }), _jsx("input", { ref: cvcInputRef, type: "text", inputMode: "numeric", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": `Security code, ${maxCvc} digits`, "aria-invalid": isInvalid || undefined, placeholder: maxCvc === 4 ? "CVV" : "CVC", value: cvcDigits, onChange: handleCvcChange, className: cn(fieldClass, "w-[3rem] shrink-0") }), _jsx(Check, { "aria-hidden": true, className: cn("size-4 shrink-0 text-success transition-[opacity,transform] duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", value.valid ? "scale-100 opacity-100" : "scale-75 opacity-0") })] }), error ? (_jsx("p", { id: errorId, role: "alert", className: "text-xs text-error-strong", children: error })) : null] }));
+});
+CreditCardInput.displayName = "CreditCardInput";
+//# sourceMappingURL=credit-card-input.js.map