@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Input.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  fullWidth?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  /** Seat the well in the same bezel as a `size="lg"` button, so a field and
+      a button side by side (a newsletter, a waitlist) share one height. */
+  layered?: boolean;
+}
+
+/* Fields are sunken wells (see --field tokens in globals.css). Raised
+   means "press me", sunken means "fill me" — that is the whole system.
+   Layered keeps the well sunken; only the bezel around it is the button's. */
+
+export function Input({
+  label,
+  hint,
+  error,
+  fullWidth = false,
+  iconLeft,
+  iconRight,
+  layered = false,
+  className = "",
+  id,
+  ...rest
+}: InputProps) {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const messageId = inputId && (error || hint) ? `${inputId}-message` : undefined;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong"
+        >
+          {label}
+        </label>
+      )}
+      <div
+        className={layered ? "relative rounded-[15px] p-[3.5px]" : "contents"}
+        style={layered ? { background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" } : undefined}
+      >
+        <div className="relative group/input isolate">
+          {iconLeft && (
+            <span
+              className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+            >
+              {iconLeft}
+            </span>
+          )}
+          <input
+            id={inputId}
+            className={[
+              "field relative z-10 w-full text-ink caret-ink",
+              layered ? "rounded-[11.5px] py-3 text-[15px]" : "rounded-xl py-3 text-[13.5px]",
+              "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
+              "disabled:opacity-40 disabled:cursor-not-allowed",
+              iconLeft ? "pl-10" : "pl-4",
+              iconRight ? "pr-10" : "pr-4",
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={messageId}
+            {...rest}
+          />
+          <span
+            aria-hidden
+            className={["pointer-events-none absolute inset-0 z-15 overflow-hidden", layered ? "rounded-[11.5px]" : "rounded-xl"].join(" ")}
+          >
+            <span
+              className="block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer"
+              style={{
+                background:
+                  "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)",
+              }}
+            />
+          </span>
+          {iconRight && (
+            <span
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+            >
+              {iconRight}
+            </span>
+          )}
+        </div>
+      </div>
+      {error && (
+        <p id={messageId} role="alert" className="text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5">
+          <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" />
+            <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
+          </svg>
+          {error}
+        </p>
+      )}
+      {hint && !error && (
+        <p id={messageId} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>
+      )}
+    </div>
+  );
+}

package/dist/registry/Kbd.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+export function Kbd({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <kbd
+      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-ink-muted ${className}`}
+      style={{
+        /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */
+        background: "var(--face)",
+        boxShadow: "var(--key-shadow)",
+        textShadow: "var(--emboss)",
+      }}
+    >
+      {children}
+    </kbd>
+  );
+}

package/dist/registry/Modal.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating";
+import { CloseButton } from "./CloseButton";
+import { useModalBehavior } from "./useModalBehavior";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+const CLOSE_MS = 240;
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  className = "",
+}: ModalProps) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  /* Mounting on open and fading on close happen during render, so
+     neither waits for an extra commit; only the unmount is delayed */
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), CLOSE_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    void dialogRef.current?.getBoundingClientRect();
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+
+  // Escape, focus trap + restore, scroll lock
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose });
+
+  if (!mounted) return null;
+
+  return (
+    <Portal>
+    <div className="fixed inset-0 z-90 flex items-center justify-center p-4">
+      <div
+        aria-hidden
+        className={[
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200",
+        ].join(" ")}
+        style={{ background: "var(--scrim)" }}
+        onClick={onClose}
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? `${uid}-title` : undefined}
+        aria-describedby={description ? `${uid}-desc` : undefined}
+        className={[
+          "relative z-10 w-full max-w-lg rounded-[22px] p-1.5",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible
+            ? "opacity-100 scale-100 translate-y-0 duration-300"
+            : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" }}
+      >
+        <div
+          className="bg-panel-face rounded-[16px] overflow-hidden"
+          style={{ boxShadow: "var(--panel-face-shadow)" }}
+        >
+          <div className="pl-6 pr-4 pt-5 pb-4 flex items-start gap-4">
+            <div className="flex-1 min-w-0 flex flex-col gap-1.5 pt-1">
+              {title && (
+                <h2
+                  id={`${uid}-title`}
+                  className="text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug"
+                >
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p id={`${uid}-desc`} className="text-[13px] text-ink-muted leading-relaxed">
+                  {description}
+                </p>
+              )}
+            </div>
+            <CloseButton label="Close dialog" onClick={onClose} />
+          </div>
+
+          {children && <div className="px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed">{children}</div>}
+
+          {/* Footer sits in the bezel tone so actions read as a separate tray */}
+          {actions && (
+            <div
+              className="px-5 py-3.5 flex items-center justify-end gap-2"
+              style={{
+                background: "var(--panel-tray)",
+                boxShadow: "inset 0 1px 0 var(--hairline)",
+              }}
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+    </Portal>
+  );
+}

package/dist/registry/NumberInput.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useEffect, useId, useRef, useState } from "react";
+import { FieldKey, FieldLabel, FieldMessage } from "./FieldMessage";
+
+interface NumberInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size" | "prefix"> {
+  value?: number | null;
+  defaultValue?: number | null;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Digits after the decimal point; inferred from `step` when left out */
+  precision?: number;
+  label?: string;
+  hint?: string;
+  error?: string;
+  /** A unit shown before or after the number, like "$" or "kg" */
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+const decimals = (n: number) => (String(n).split(".")[1] ?? "").length;
+
+/* A sunken field with two small raised keys at its right edge. The keys
+   repeat while held, arrow keys step (shift for ten at a time), and
+   whatever you type is clamped and rounded when you leave the field.  */
+export function NumberInput({
+  value,
+  defaultValue = null,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  fullWidth = false,
+  disabled,
+  className = "",
+  id,
+  onBlur,
+  onKeyDown,
+  ...rest
+}: NumberInputProps) {
+  const uid = useId();
+  const inputId = id ?? `${uid}-input`;
+  const messageId = error || hint ? `${inputId}-message` : undefined;
+  const digits = precision ?? decimals(step);
+
+  const [internal, setInternal] = useState<number | null>(defaultValue);
+  const current = value !== undefined ? value : internal;
+  const format = (n: number | null) => (n === null ? "" : n.toFixed(digits));
+  const [draft, setDraft] = useState(format(current));
+  const editing = useRef(false);
+
+  // Follow the controlled value unless someone is mid-way through typing
+  useEffect(() => {
+    if (!editing.current) setDraft(format(current));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current, digits]);
+
+  const clamp = (n: number) => Math.min(max, Math.max(min, Number(n.toFixed(digits))));
+
+  // The hold-to-repeat timer reads the newest value from here, not a stale render
+  const latest = useRef(current);
+  useEffect(() => {
+    latest.current = current;
+  }, [current]);
+
+  const commit = (n: number | null) => {
+    const next = n === null || Number.isNaN(n) ? null : clamp(n);
+    const prev = latest.current;
+    latest.current = next;
+    setInternal(next);
+    setDraft(format(next));
+    if (next !== prev) onChange?.(next);
+  };
+
+  // An empty field starts from zero, or from the nearest edge of the range
+  const nudge = (dir: 1 | -1, times = 1) => {
+    const base = latest.current;
+    commit(base === null ? clamp(0) : base + dir * step * times);
+  };
+
+  const hold = useRef<{ t?: ReturnType<typeof setTimeout>; i?: ReturnType<typeof setInterval> }>({});
+  const stopHold = () => {
+    clearTimeout(hold.current.t);
+    clearInterval(hold.current.i);
+  };
+  useEffect(() => stopHold, []);
+  const startHold = (dir: 1 | -1) => {
+    stopHold();
+    nudge(dir);
+    hold.current.t = setTimeout(() => {
+      hold.current.i = setInterval(() => nudge(dir), 60);
+    }, 400);
+  };
+
+  const atMin = current !== null && current <= min;
+  const atMax = current !== null && current >= max;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && <FieldLabel htmlFor={inputId}>{label}</FieldLabel>}
+      <div className={["relative isolate", fullWidth ? "w-full" : "w-40", className].join(" ")}>
+        {prefix && (
+          <span className="pointer-events-none absolute left-3.5 top-1/2 z-20 -translate-y-1/2 text-[13.5px] text-ink-faint transition-colors duration-200 group-focus-within/field:text-ink-label">
+            {prefix}
+          </span>
+        )}
+        <input
+          {...rest}
+          id={inputId}
+          type="text"
+          inputMode={digits > 0 || min < 0 ? "decimal" : "numeric"}
+          autoComplete="off"
+          role="spinbutton"
+          aria-valuenow={current ?? undefined}
+          aria-valuemin={Number.isFinite(min) ? min : undefined}
+          aria-valuemax={Number.isFinite(max) ? max : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          disabled={disabled}
+          value={draft}
+          onChange={(e) => {
+            editing.current = true;
+            setDraft(e.target.value.replace(/[^\d.,\-]/g, ""));
+          }}
+          onBlur={(e) => {
+            editing.current = false;
+            const raw = draft.replace(",", ".").trim();
+            commit(raw === "" || raw === "-" ? null : parseFloat(raw));
+            onBlur?.(e);
+          }}
+          onKeyDown={(e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented) return;
+            const big = e.shiftKey ? 10 : 1;
+            if (e.key === "ArrowUp") { e.preventDefault(); editing.current = false; nudge(1, big); }
+            else if (e.key === "ArrowDown") { e.preventDefault(); editing.current = false; nudge(-1, big); }
+            else if (e.key === "PageUp") { e.preventDefault(); nudge(1, 10); }
+            else if (e.key === "PageDown") { e.preventDefault(); nudge(-1, 10); }
+            else if (e.key === "Home" && Number.isFinite(min)) { e.preventDefault(); commit(min); }
+            else if (e.key === "End" && Number.isFinite(max)) { e.preventDefault(); commit(max); }
+            else if (e.key === "Enter") { (e.target as HTMLInputElement).blur(); (e.target as HTMLInputElement).focus(); }
+          }}
+          className={[
+            "field relative z-10 w-full rounded-xl py-3 text-[13.5px] tabular-nums text-ink caret-ink",
+            "placeholder:text-ink-faint focus:placeholder:text-ink-ghost",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            prefix ? "pl-8" : "pl-4",
+            suffix ? "pr-[92px]" : "pr-[64px]",
+          ].join(" ")}
+        />
+        {suffix && (
+          <span className="pointer-events-none absolute right-[64px] top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint">
+            {suffix}
+          </span>
+        )}
+        <div
+          className={[
+            "absolute right-1.5 top-1/2 z-20 flex -translate-y-1/2 gap-1",
+            disabled ? "opacity-40 pointer-events-none" : "",
+          ].join(" ")}
+        >
+          <FieldKey label="decrease" focusable={false} disabled={atMin} onPress={() => startHold(-1)} onRelease={stopHold}>
+            <path d="M5 12h14" />
+          </FieldKey>
+          <FieldKey label="increase" focusable={false} disabled={atMax} onPress={() => startHold(1)} onRelease={stopHold}>
+            <path d="M12 5v14M5 12h14" />
+          </FieldKey>
+        </div>
+      </div>
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}

package/dist/registry/OtpInput.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+
+interface OtpInputProps {
+  /** How many characters */
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (code: string) => void;
+  /** Fires once every cell is filled, with the whole code */
+  onComplete?: (code: string) => void;
+  /** Digits only, or letters and digits */
+  type?: "numeric" | "alphanumeric";
+  /** Split the cells into wells of this many, like 123 456 */
+  groupSize?: number;
+  /** Show dots instead of the characters */
+  mask?: boolean;
+  label?: string;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  name?: string;
+}
+
+const CELL = 44;
+
+/* One real input sits underneath, so typing, backspace, paste and the
+   phone filling the code from a text all behave natively. What you see
+   is drawn over it: each group is a single sunken field, cut into cells
+   by scored grooves, that lifts flush and draws its border while you're
+   in it, exactly like Input. A caret glides from cell to cell on a
+   spring as you type, and characters press into place.             */
+export function OtpInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  groupSize,
+  mask = false,
+  label,
+  hint,
+  error,
+  disabled = false,
+  autoFocus = false,
+  name,
+}: OtpInputProps) {
+  const uid = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [internal, setInternal] = useState(defaultValue.slice(0, length));
+  const code = (value !== undefined ? value : internal).slice(0, length);
+  const [focused, setFocused] = useState(false);
+  // The cell the caret is in: the selection start, kept within the code
+  const [cursor, setCursor] = useState(0);
+  const messageId = error || hint ? `${uid}-message` : undefined;
+  const at = Math.min(cursor, code.length, length - 1);
+
+  const pattern = type === "numeric" ? /[^0-9]/g : /[^0-9a-z]/gi;
+
+  /* A filled cell is selected rather than sitting behind a caret, so
+     typing over it replaces it in place                              */
+  const selectCell = (i: number) => {
+    const el = inputRef.current;
+    if (!el) return;
+    const n = el.value.length;
+    const pos = Math.max(0, Math.min(i, n));
+    el.setSelectionRange(pos, pos < n ? pos + 1 : pos);
+    setCursor(pos);
+  };
+
+  const groups = groupSize && groupSize < length ? Math.ceil(length / groupSize) : 1;
+  const per = groups > 1 ? groupSize! : length;
+
+  return (
+    <div className="group/field flex flex-col gap-1.5">
+      {label && (
+        <FieldLabel id={`${uid}-label`} htmlFor={`${uid}-input`}>
+          {label}
+        </FieldLabel>
+      )}
+
+      <div
+        className={["relative flex w-fit items-center gap-3", disabled ? "opacity-40" : ""].join(" ")}
+      >
+        <input
+          ref={inputRef}
+          id={`${uid}-input`}
+          type={mask ? "password" : "text"}
+          inputMode={type === "numeric" ? "numeric" : "text"}
+          autoComplete="one-time-code"
+          autoCapitalize="characters"
+          autoFocus={autoFocus}
+          spellCheck={false}
+          maxLength={length}
+          disabled={disabled}
+          value={code}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          aria-label={label ? undefined : `${length}-character code`}
+          // The input lies over the cells; send the caret to whichever was clicked
+          onClick={(e) => {
+            const cell = document
+              .elementsFromPoint(e.clientX, e.clientY)
+              .find((el): el is HTMLElement => el instanceof HTMLElement && el.dataset.cell !== undefined);
+            selectCell(cell ? Number(cell.dataset.cell) : code.length);
+          }}
+          onFocus={() => {
+            setFocused(true);
+            requestAnimationFrame(() => selectCell(code.length));
+          }}
+          onBlur={() => setFocused(false)}
+          onChange={(e) => {
+            const next = e.target.value.replace(pattern, "").toUpperCase().slice(0, length);
+            setInternal(next);
+            onChange?.(next);
+            if (next.length === length && next !== code) onComplete?.(next);
+            const pos = Math.min(e.target.selectionStart ?? next.length, next.length);
+            requestAnimationFrame(() => selectCell(pos));
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+              e.preventDefault();
+              selectCell(at + (e.key === "ArrowLeft" ? -1 : 1));
+            } else if (e.key === "Home" || e.key === "End") {
+              e.preventDefault();
+              selectCell(e.key === "Home" ? 0 : code.length);
+            }
+          }}
+          onSelect={(e) => {
+            const el = e.currentTarget;
+            setCursor(Math.min(el.selectionStart ?? 0, length - 1));
+          }}
+          // Invisible, but it's what a tap lands on, so phones raise their keyboard
+          className="absolute inset-0 z-30 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed"
+          style={{ fontSize: 16 /* stops iOS zooming in on focus */ }}
+        />
+
+        {Array.from({ length: groups }, (_, g) => {
+          const start = g * per;
+          const cells = Math.min(per, length - start);
+          const caretHere = focused && at >= start && at < start + cells;
+          return (
+            <React.Fragment key={g}>
+              {g > 0 && (
+                <span
+                  aria-hidden
+                  className="h-[2px] w-2.5 shrink-0 rounded-full"
+                  style={{ background: "var(--groove)", boxShadow: "var(--groove-lip-below)" }}
+                />
+              )}
+              {/* One field per group: data-open gives it the focused well */}
+              <div
+                aria-hidden
+                data-open={caretHere || undefined}
+                data-invalid={error ? true : undefined}
+                className="field relative z-10 flex h-[52px] overflow-hidden rounded-xl"
+              >
+                {Array.from({ length: cells }, (_, k) => {
+                  const i = start + k;
+                  const ch = code[i];
+                  return (
+                    <div key={i} data-cell={i} className="relative grid place-items-center" style={{ width: CELL }}>
+                      {k > 0 && (
+                        <span
+                          className="absolute inset-y-3 left-0 w-px"
+                          style={{ background: "var(--groove)", boxShadow: "var(--groove-lip)" }}
+                        />
+                      )}
+                      {ch &&
+                        (mask ? (
+                          <span key={ch + i} className="animate-checkbox-in h-2.5 w-2.5 rounded-full bg-ink" />
+                        ) : (
+                          <span key={ch + i} className="animate-checkbox-in text-[20px] font-semibold tabular-nums text-ink">
+                            {ch}
+                          </span>
+                        ))}
+                      {/* A filled cell under the caret is picked out, ready to be typed over */}
+                      {caretHere && i === at && ch && (
+                        <span className="absolute inset-x-1.5 bottom-2 h-[2px] rounded-full bg-ink animate-otp-caret" />
+                      )}
+                    </div>
+                  );
+                })}
+
+                {/* The caret glides between the empty cells of this group */}
+                {caretHere && !code[at] && (
+                  <span
+                    className="pointer-events-none absolute top-1/2 h-[22px] w-[2px] -translate-y-1/2"
+                    style={{
+                      left: (at - start) * CELL + CELL / 2 - 1,
+                      transition: "left 260ms var(--ease-spring)",
+                    }}
+                  >
+                    <span className="block h-full w-full animate-otp-caret rounded-full bg-ink" />
+                  </span>
+                )}
+
+                {/* Input's sweep of light as the well comes up */}
+                {caretHere && (
+                  <span
+                    className="pointer-events-none absolute inset-y-0 -left-[30%] block w-[30%] animate-input-shimmer"
+                    style={{ background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)" }}
+                  />
+                )}
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {name && <input type="hidden" name={name} value={code} />}
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}