@danxbot/ui 26.3.0 → 26.4.0

package/dist/index.js

@@ -36315,37 +36315,56 @@ function bte({
   length: e = 6,
   groupAfter: t,
   className: n,
-  ref: r,
-  ...o
+  autoFocus: r,
+  ref: o,
+  ...s
 }) {
-  return /* @__PURE__ */ u(
+  const i = be(null);
+  return De(() => {
+    r && i.current?.querySelector("input")?.focus();
+  }, [r]), /* @__PURE__ */ u(
     dI,
     {
-      ref: r,
+      ref: (a) => {
+        i.current = a, typeof o == "function" ? o(a) : o && (o.current = a);
+      },
       length: e,
       className: B("flex items-center gap-2", n),
-      ...o,
-      children: Array.from({ length: e }, (s, i) => /* @__PURE__ */ M("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ u(
-          fI,
-          {
-            className: B(
-              "grid h-control-md w-11 place-items-center rounded-md",
-              "border border-field-border bg-field",
-              "text-center font-mono text-lg tabular-nums text-primary",
-              "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
-              "hover:not-disabled:border-field-border-hover",
-              /* The active box is marked by the box itself, not by a caret —
-                 see the note above. */
-              "data-active:border-control data-active:shadow-[0_0_0_3px_var(--control-focus-halo)]",
-              "data-invalid:border-danger",
-              "disabled:opacity-45",
-              "outline-none"
-            )
-          }
-        ),
-        t && i === t - 1 && i < e - 1 && /* @__PURE__ */ u("span", { "aria-hidden": !0, className: "h-px w-2.5 rounded-full bg-border-strong" })
-      ] }, i))
+      ...s,
+      children: Array.from({ length: e }, (a, l) => /* @__PURE__ */ M("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ M("span", { className: "relative", children: [
+          /* @__PURE__ */ u(
+            fI,
+            {
+              className: B(
+                "peer",
+                "grid h-control-md w-11 place-items-center rounded-md",
+                "border border-field-border bg-field",
+                "text-center font-mono text-lg tabular-nums text-primary",
+                "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+                "hover:not-disabled:border-field-border-hover",
+                /* DX-5127: the box holding real focus IS the active slot (the
+                   next digit goes into the focused box), so it gets the ring;
+                   Base UI has no per-slot "active" attribute. A filled box
+                   reads as filled: stronger border and a tinted background. */
+                "focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+                "data-filled:border-border-strong data-filled:bg-surface-sunken",
+                "data-invalid:border-danger",
+                "disabled:opacity-45",
+                "outline-none"
+              )
+            }
+          ),
+          /* @__PURE__ */ u(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: "pointer-events-none absolute left-1/2 top-1/2 hidden h-5 w-px -translate-x-1/2 -translate-y-1/2 bg-primary peer-focus:peer-not-data-filled:block motion-safe:peer-focus:peer-not-data-filled:animate-[dx-otp-caret_1s_steps(1)_infinite]"
+            }
+          )
+        ] }),
+        t && l === t - 1 && l < e - 1 && /* @__PURE__ */ u("span", { "aria-hidden": !0, className: "h-px w-2.5 rounded-full bg-border-strong" })
+      ] }, l))
     }
   );
 }