@danxbot/ui 26.3.0 → 26.5.0

package/dist/index.js

@@ -19390,9 +19390,9 @@ function Ko({
   children: d,
   ref: f
 }) {
-  const p = FE({ size: l }), h = pe().dialog, m = l === "full" ? "xs" : "sm", g = $E(t), v = LE(t, n), [b, x] = re(null), y = Ne(
-    (w) => {
-      x(w), typeof f == "function" ? f(w) : f && (f.current = w);
+  const p = FE({ size: l }), h = pe().dialog, m = l === "full" ? "xs" : "sm", g = $E(t), v = LE(t, n), [b, x] = re(null), y = be(null), w = () => a ? b : y.current?.querySelector("[data-autofocus]") ?? !0, S = Ne(
+    (C) => {
+      y.current = C, x(C), typeof f == "function" ? f(C) : f && (f.current = C);
     },
     [f]
   );
@@ -19403,10 +19403,10 @@ function Ko({
       /* @__PURE__ */ M(
         xl,
         {
-          ref: y,
+          ref: S,
           className: B(p.popup(), c),
           finalFocus: g,
-          initialFocus: a ? () => b : void 0,
+          initialFocus: w,
           children: [
             /* @__PURE__ */ M("div", { className: p.header(), children: [
               /* @__PURE__ */ M("div", { className: "min-w-0 flex-1 basis-40", children: [
@@ -36315,37 +36315,57 @@ 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,
+            {
+              "data-autofocus": r && l === 0 ? "" : void 0,
+              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))
     }
   );
 }