@alfadocs/ui-kit-debug 1.73.3 → 1.75.0

package/dist/_chunks/{header-settings-DBlTL6Qj.js → header-settings-Coh1r41O.js}

@@ -1,22 +1,22 @@
-import { jsx as t, jsxs as g, Fragment as Q } from "react/jsx-runtime";
-import { forwardRef as se, useRef as d, useImperativeHandle as ie, useState as oe, useCallback as ce, useMemo as le } from "react";
-import { c as P } from "./index-D2ZczOXr.js";
-import { useTranslation as J } from "react-i18next";
-import { B as de } from "./button-DohK_Ak_.js";
-import { I as ue } from "./icon-button-S8_weU3g.js";
-import { D as r } from "./dropdown-menu-D1we7oAY.js";
-import { u as pe, c as v, a as X, L as ge } from "./locale-picker-KT-Vz3bx.js";
-import { u as me } from "./use-media-query-CcAx5SMM.js";
-import { u as he } from "./use-locale-BExNy9Dl.js";
-import { u as fe } from "./use-theme-CAuo6EYT.js";
-import { a as ye } from "./use-direction-Dp8h70PP.js";
-import { u as be } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { jsx as t, jsxs as m, Fragment as $ } from "react/jsx-runtime";
+import { forwardRef as ie, useRef as l, useImperativeHandle as oe, useState as ce, useCallback as le, useMemo as de } from "react";
+import { c as N } from "./index-D2ZczOXr.js";
+import { useTranslation as Y } from "react-i18next";
+import { B as ue } from "./button-DohK_Ak_.js";
+import { I as pe } from "./icon-button-S8_weU3g.js";
+import { D as n } from "./dropdown-menu-D1we7oAY.js";
+import { u as me, p as ge, c as w, a as Z } from "./locale-picker-DzdGDSBI.js";
+import { u as he } from "./use-media-query-CcAx5SMM.js";
+import { u as fe } from "./use-locale-BExNy9Dl.js";
+import { u as ye } from "./use-theme-CAuo6EYT.js";
+import { a as be } from "./use-direction-Dp8h70PP.js";
+import { u as ve } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { u as we } from "./registry-DvAUVLHh.js";
-import { u as ve } from "./length-token-DwMnGEYT.js";
-import { S as Se } from "./settings-d25ju_6L.js";
-import { A as Y } from "./arrow-left-BfaGqVam.js";
-import { C as $ } from "./chevron-right-I9AeSxH2.js";
-const ke = {
+import { u as Se } from "./length-token-DwMnGEYT.js";
+import { S as ke } from "./settings-d25ju_6L.js";
+import { A as J } from "./arrow-left-BfaGqVam.js";
+import { C as X } from "./chevron-right-I9AeSxH2.js";
+const Te = {
   id: "header-settings",
   // Each setter persists a single preference value (locale / theme /
   // accessibility) — `set_value` semantics, not an ephemeral view switch.
@@ -32,7 +32,7 @@ const ke = {
     locale: {
       type: "string",
       descriptionKey: "ui.agent.headerSettings.state.locale",
-      description: 'Active IETF language tag (e.g. "en", "it", "ar"). Read after `set_locale` to confirm the switch landed — an unknown tag is silently dropped and leaves this unchanged.',
+      description: 'Active IETF language tag (e.g. "en", "it", "ar"). Initially uses storage, then HTML lang when initialLocaleFromHtmlLang is enabled, then the browser. Read after set_locale to confirm the switch; unknown tags leave it unchanged.',
       read: (a) => a.getLocale()
     },
     theme: {
@@ -75,8 +75,8 @@ const ke = {
         "Silently ignored when the tag names a locale the kit ships no bundle for — `locale` is unchanged."
       ],
       examples: [{ args: { locale: "it" }, note: "Switch to Italian." }],
-      invoke: (a, n) => {
-        a.setLocale(n.locale);
+      invoke: (a, s) => {
+        a.setLocale(s.locale);
       }
     },
     set_theme: {
@@ -93,8 +93,8 @@ const ke = {
       examples: [
         { args: { theme: "dark" }, note: "Switch to the dark theme." }
       ],
-      invoke: (a, n) => {
-        a.setTheme(n.theme);
+      invoke: (a, s) => {
+        a.setTheme(s.theme);
       }
     },
     set_accessibility: {
@@ -119,8 +119,8 @@ const ke = {
           note: "Enable the AAA-accessible profile."
         }
       ],
-      invoke: (a, n) => {
-        a.setAccessibility(n.accessibility);
+      invoke: (a, s) => {
+        a.setAccessibility(s.accessibility);
       }
     }
   },
@@ -137,19 +137,12 @@ const ke = {
     }
   }
 };
-function Te(a, n) {
-  if (!(typeof window > "u"))
-    try {
-      window.localStorage.setItem(a, n);
-    } catch {
-    }
-}
 function Le(a) {
   if (typeof document > "u") return;
-  const n = document.documentElement;
-  n.lang = a, n.dir = v[a].dir;
+  const s = document.documentElement;
+  s.lang = a, s.dir = w[a].dir;
 }
-const Ae = P("ds:inline-flex ds:items-center", {
+const Ae = N("ds:inline-flex ds:items-center", {
   variants: {
     align: {
       start: "",
@@ -157,115 +150,116 @@ const Ae = P("ds:inline-flex ds:items-center", {
     }
   },
   defaultVariants: { align: "end" }
-}), Re = "ds:w-[var(--popover-size-md)]", Ce = P("", {
+}), Re = "ds:w-[var(--popover-size-md)]", De = N("", {
   variants: {
     language: {
       true: "ds:[inline-size:var(--popover-size-md)] ds:[min-inline-size:0] ds:[max-inline-size:calc(100vw_-_2_*_var(--spacing-lg))] ds:[&_input]:min-w-0",
       false: ""
     }
   }
-}), De = P(
+}), Ie = N(
   "ds:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]"
 );
 function A({
   label: a,
-  value: n,
-  lang: u
+  value: s,
+  lang: d
 }) {
-  return /* @__PURE__ */ g("span", { className: De(), children: [
+  return /* @__PURE__ */ m("span", { className: Ie(), children: [
     /* @__PURE__ */ t("span", { className: "ds:truncate", children: a }),
     /* @__PURE__ */ t(
       "span",
       {
-        lang: u,
+        lang: d,
         className: "ds:shrink-0 ds:text-muted-foreground ds:[[data-highlighted]_&]:text-current",
-        children: n
+        children: s
       }
     )
   ] });
 }
-function Z(a) {
-  return Object.prototype.hasOwnProperty.call(v, a);
+function ee(a) {
+  return Object.prototype.hasOwnProperty.call(w, a);
 }
-function Ie({ locale: a }) {
-  const { t: n } = J("ui"), u = v[Z(a) ? a : "en"], R = (s) => {
-    var l;
-    s.target === s.currentTarget && ((l = s.currentTarget.querySelector("input")) == null || l.focus({ preventScroll: !0 }));
-  }, C = (s) => {
-    const l = s.target;
-    if (l instanceof HTMLInputElement) {
-      if (s.nativeEvent.isComposing) {
-        s.stopPropagation();
+function Ce({ locale: a }) {
+  const { t: s } = Y("ui"), d = w[ee(a) ? a : "en"], R = (r) => {
+    var u;
+    r.target === r.currentTarget && ((u = r.currentTarget.querySelector("input")) == null || u.focus({ preventScroll: !0 }));
+  }, D = (r) => {
+    const u = r.target;
+    if (u instanceof HTMLInputElement) {
+      if (r.nativeEvent.isComposing) {
+        r.stopPropagation();
         return;
       }
-      s.key !== "ArrowLeft" && s.key !== "ArrowRight" || (l.selectionStart !== 0 || l.selectionEnd !== 0) && s.stopPropagation();
+      r.key !== "ArrowLeft" && r.key !== "ArrowRight" || (u.selectionStart !== 0 || u.selectionEnd !== 0) && r.stopPropagation();
     }
   };
-  return /* @__PURE__ */ g(r.Sub, { children: [
-    /* @__PURE__ */ t(r.SubTrigger, { "aria-haspopup": "dialog", "data-value": u.code, children: /* @__PURE__ */ g("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
-      /* @__PURE__ */ t("span", { className: "ds:truncate", children: n("navigation.headerSettings.language.label") }),
+  return /* @__PURE__ */ m(n.Sub, { children: [
+    /* @__PURE__ */ t(n.SubTrigger, { "aria-haspopup": "dialog", "data-value": d.code, children: /* @__PURE__ */ m("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ t("span", { className: "ds:truncate", children: s("navigation.headerSettings.language.label") }),
       /* @__PURE__ */ t(
         "span",
         {
-          lang: u.code,
+          lang: d.code,
           className: "ds:shrink-0 ds:text-[color:var(--muted-foreground)] ds:[[data-highlighted]_&]:text-current",
-          children: u.nativeName
+          children: d.nativeName
         }
       )
     ] }) }),
     /* @__PURE__ */ t(
-      r.SubContent,
+      n.SubContent,
       {
         role: "dialog",
         "aria-orientation": void 0,
         className: Re,
         onFocus: R,
-        onKeyDownCapture: C,
-        onEscapeKeyDown: (s) => {
-          s.isComposing && s.preventDefault();
+        onKeyDownCapture: D,
+        onEscapeKeyDown: (r) => {
+          r.isComposing && r.preventDefault();
         },
-        children: /* @__PURE__ */ t(X.SearchList, {})
+        children: /* @__PURE__ */ t(Z.SearchList, {})
       }
     )
   ] });
 }
-const Ke = se(
-  (a, n) => {
-    var B;
+const Ke = ie(
+  (a, s) => {
+    var U;
     const {
-      align: u = "end",
+      align: d = "end",
       size: R = "md",
-      disabled: C = !1,
-      className: s,
-      id: l,
-      ...ee
-    } = a, { t: p } = J("ui"), o = fe(), { locale: b, setLocale: _ } = he();
-    pe();
-    const D = d(null);
-    ie(n, () => D.current, []);
-    const m = me("(width < 48rem)"), z = ye(), [S, h] = oe("main"), c = m ? S : "main", k = d(null), H = d(null), O = d(null), f = d(null), T = d("keyboard");
-    be(() => {
-      var e, i, w, G, U;
-      if (!m && S !== "main" && (f.current = S, h("main")), c === "language")
+      disabled: D = !1,
+      initialLocaleFromHtmlLang: r = !1,
+      className: u,
+      id: _,
+      ...te
+    } = a, { t: p } = Y("ui"), o = ye(), { locale: b, setLocale: H } = fe();
+    me(r);
+    const I = l(null);
+    oe(s, () => I.current, []);
+    const g = he("(width < 48rem)"), z = be(), [S, h] = ce("main"), c = g ? S : "main", k = l(null), M = l(null), j = l(null), f = l(null), T = l("keyboard");
+    ve(() => {
+      var e, i, v, G, Q;
+      if (!g && S !== "main" && (f.current = S, h("main")), c === "language")
         (i = (e = k.current) == null ? void 0 : e.querySelector(
           T.current === "keyboard" ? "input" : "button"
         )) == null || i.focus({ preventScroll: !0 });
       else if (c === "appearance")
-        (G = (w = k.current) == null ? void 0 : w.querySelector('[role="menuitem"]')) == null || G.focus({ preventScroll: !0 });
+        (G = (v = k.current) == null ? void 0 : v.querySelector('[role="menuitem"]')) == null || G.focus({ preventScroll: !0 });
       else if (f.current) {
-        const W = f.current, N = m ? (W === "language" ? H : O).current : (U = k.current) == null ? void 0 : U.querySelector(
+        const W = f.current, E = g ? (W === "language" ? M : j).current : (Q = k.current) == null ? void 0 : Q.querySelector(
           `[role="menuitem"][aria-haspopup="${W === "language" ? "dialog" : "menu"}"]`
         );
-        N == null || N.focus({ preventScroll: !0 }), f.current = null;
+        E == null || E.focus({ preventScroll: !0 }), f.current = null;
       }
-    }, [m, S, c]);
-    const j = (e, i) => {
+    }, [g, S, c]);
+    const F = (e, i) => {
       if (e.nativeEvent.isComposing) return;
-      const w = z === "rtl" ? "ArrowLeft" : "ArrowRight";
-      (e.key === "Enter" || e.key === " " || e.key === w) && (T.current = "keyboard"), e.key === w && (e.preventDefault(), h(i));
-    }, I = () => {
+      const v = z === "rtl" ? "ArrowLeft" : "ArrowRight";
+      (e.key === "Enter" || e.key === " " || e.key === v) && (T.current = "keyboard"), e.key === v && (e.preventDefault(), h(i));
+    }, C = () => {
       c !== "main" && (f.current = c, h("main"));
-    }, te = (e) => {
+    }, ae = (e) => {
       if (c === "main") return;
       if (e.nativeEvent.isComposing) {
         e.stopPropagation();
@@ -274,22 +268,22 @@ const Ke = se(
       if (e.key !== (z === "rtl" ? "ArrowRight" : "ArrowLeft"))
         return;
       const i = e.target;
-      i instanceof HTMLInputElement && (i.selectionStart !== 0 || i.selectionEnd !== 0) || (e.preventDefault(), e.stopPropagation(), I());
-    }, M = ce(
+      i instanceof HTMLInputElement && (i.selectionStart !== 0 || i.selectionEnd !== 0) || (e.preventDefault(), e.stopPropagation(), C());
+    }, O = le(
       (e) => {
-        _(e), Le(e), Te(ge, e);
+        H(e), Le(e), ge(e);
       },
-      [_]
-    ), V = d(M);
-    V.current = M;
-    const q = d(b);
+      [H]
+    ), V = l(O);
+    V.current = O;
+    const q = l(b);
     q.current = b;
-    const y = d(o);
+    const y = l(o);
     y.current = o;
-    const ae = le(
+    const ne = de(
       () => ({
         setLocale: (e) => {
-          Object.prototype.hasOwnProperty.call(v, e) && V.current(e);
+          Object.prototype.hasOwnProperty.call(w, e) && V.current(e);
         },
         setTheme: (e) => y.current.setTheme(e),
         setAccessibility: (e) => y.current.setAccessibility(e),
@@ -305,8 +299,8 @@ const Ke = se(
       }),
       []
     );
-    we(ke, ae, l);
-    const ne = o.accessibility === "accessible", re = ve("--spacing-lg", D, 24), K = p("navigation.headerSettings.language.label"), L = p("navigation.headerSettings.appearance.label"), E = v[Z(b) ? b : "en"], x = [
+    we(Te, ne, _);
+    const re = o.accessibility === "accessible", se = Se("--spacing-lg", I, 24), K = p("navigation.headerSettings.language.label"), L = p("navigation.headerSettings.appearance.label"), P = w[ee(b) ? b : "en"], x = [
       {
         value: "light",
         label: p("navigation.headerSettings.appearance.light")
@@ -316,49 +310,49 @@ const Ke = se(
         value: "system",
         label: p("navigation.headerSettings.appearance.system")
       }
-    ], F = p("navigation.headerSettings.back");
+    ], B = p("navigation.headerSettings.back");
     return /* @__PURE__ */ t(
       "div",
       {
-        ref: D,
+        ref: I,
         "data-component": "header-settings",
-        "data-component-id": l,
-        className: Ae({ align: u, className: s }),
-        ...ee,
-        children: /* @__PURE__ */ g(
-          r.Root,
+        "data-component-id": _,
+        className: Ae({ align: d, className: u }),
+        ...te,
+        children: /* @__PURE__ */ m(
+          n.Root,
           {
             onOpenChange: (e) => {
               e || (f.current = null, h("main"));
             },
             children: [
-              /* @__PURE__ */ t(r.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
-                ue,
+              /* @__PURE__ */ t(n.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+                pe,
                 {
                   size: R,
-                  disabled: C,
-                  icon: /* @__PURE__ */ t(Se, { "aria-hidden": !0 }),
+                  disabled: D,
+                  icon: /* @__PURE__ */ t(ke, { "aria-hidden": !0 }),
                   "aria-label": p("navigation.headerSettings.trigger")
                 }
               ) }),
               /* @__PURE__ */ t(
-                r.Content,
+                n.Content,
                 {
                   ref: k,
-                  align: u,
-                  collisionPadding: re,
-                  className: Ce({ language: c === "language" }),
+                  align: d,
+                  collisionPadding: se,
+                  className: De({ language: c === "language" }),
                   ...c === "language" ? {
                     role: "dialog",
                     "aria-orientation": void 0,
                     "aria-label": K,
                     "aria-labelledby": void 0
                   } : {},
-                  onKeyDownCapture: te,
+                  onKeyDownCapture: ae,
                   onEscapeKeyDown: (e) => {
                     e.isComposing && e.preventDefault();
                   },
-                  children: c === "language" ? /* @__PURE__ */ g(
+                  children: c === "language" ? /* @__PURE__ */ m(
                     "div",
                     {
                       role: "presentation",
@@ -370,47 +364,47 @@ const Ke = se(
                       },
                       children: [
                         /* @__PURE__ */ t(
-                          de,
+                          ue,
                           {
                             intent: "ghost",
                             size: "sm",
                             className: "ds:w-full ds:justify-start ds:text-start ds:font-normal ds:min-h-[var(--min-target-size)] ds:sm:min-h-[var(--min-target-size)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:gap-[var(--spacing-sm)] ds:[&>span:last-child]:flex-1",
-                            startIcon: /* @__PURE__ */ t(Y, { "aria-hidden": !0, className: "ds:size-4" }),
+                            startIcon: /* @__PURE__ */ t(J, { "aria-hidden": !0, className: "ds:size-4" }),
                             flipIconInRtl: !0,
-                            onClick: I,
-                            children: /* @__PURE__ */ t(A, { label: F, value: K })
+                            onClick: C,
+                            children: /* @__PURE__ */ t(A, { label: B, value: K })
                           }
                         ),
-                        /* @__PURE__ */ t(r.Separator, {}),
-                        /* @__PURE__ */ t(X.SearchList, {})
+                        /* @__PURE__ */ t(n.Separator, {}),
+                        /* @__PURE__ */ t(Z.SearchList, {})
                       ]
                     }
-                  ) : c === "appearance" ? /* @__PURE__ */ g(Q, { children: [
+                  ) : c === "appearance" ? /* @__PURE__ */ m($, { children: [
                     /* @__PURE__ */ t(
-                      r.Item,
+                      n.Item,
                       {
                         startIcon: /* @__PURE__ */ t(
-                          Y,
+                          J,
                           {
                             "aria-hidden": !0,
                             className: "ds:size-4 ds:rtl:-scale-x-100"
                           }
                         ),
                         onSelect: (e) => {
-                          e.preventDefault(), I();
+                          e.preventDefault(), C();
                         },
-                        children: /* @__PURE__ */ t(A, { label: F, value: L })
+                        children: /* @__PURE__ */ t(A, { label: B, value: L })
                       }
                     ),
-                    /* @__PURE__ */ t(r.Separator, {}),
+                    /* @__PURE__ */ t(n.Separator, {}),
                     /* @__PURE__ */ t(
-                      r.RadioGroup,
+                      n.RadioGroup,
                       {
                         "aria-label": L,
                         value: o.theme,
                         onValueChange: (e) => o.setTheme(e),
                         children: x.map((e) => /* @__PURE__ */ t(
-                          r.RadioItem,
+                          n.RadioItem,
                           {
                             value: e.value,
                             onSelect: (i) => i.preventDefault(),
@@ -420,15 +414,15 @@ const Ke = se(
                         ))
                       }
                     )
-                  ] }) : /* @__PURE__ */ g(Q, { children: [
-                    m ? /* @__PURE__ */ t(
-                      r.Item,
+                  ] }) : /* @__PURE__ */ m($, { children: [
+                    g ? /* @__PURE__ */ t(
+                      n.Item,
                       {
-                        ref: H,
+                        ref: M,
                         "aria-haspopup": "dialog",
-                        "data-value": E.code,
+                        "data-value": P.code,
                         endIcon: /* @__PURE__ */ t(
-                          $,
+                          X,
                           {
                             "aria-hidden": !0,
                             className: "ds:size-4 ds:rtl:-scale-x-100"
@@ -437,7 +431,7 @@ const Ke = se(
                         onPointerDown: (e) => {
                           T.current = e.pointerType;
                         },
-                        onKeyDown: (e) => j(e, "language"),
+                        onKeyDown: (e) => F(e, "language"),
                         onSelect: (e) => {
                           e.preventDefault(), h("language");
                         },
@@ -445,21 +439,21 @@ const Ke = se(
                           A,
                           {
                             label: K,
-                            value: E.nativeName,
-                            lang: E.code
+                            value: P.nativeName,
+                            lang: P.code
                           }
                         )
                       }
-                    ) : /* @__PURE__ */ t(Ie, { locale: b }),
-                    /* @__PURE__ */ t(r.Separator, {}),
-                    m ? /* @__PURE__ */ t(
-                      r.Item,
+                    ) : /* @__PURE__ */ t(Ce, { locale: b }),
+                    /* @__PURE__ */ t(n.Separator, {}),
+                    g ? /* @__PURE__ */ t(
+                      n.Item,
                       {
-                        ref: O,
+                        ref: j,
                         "aria-haspopup": "menu",
                         "data-value": o.theme,
                         endIcon: /* @__PURE__ */ t(
-                          $,
+                          X,
                           {
                             "aria-hidden": !0,
                             className: "ds:size-4 ds:rtl:-scale-x-100"
@@ -468,7 +462,7 @@ const Ke = se(
                         onPointerDown: (e) => {
                           T.current = e.pointerType;
                         },
-                        onKeyDown: (e) => j(e, "appearance"),
+                        onKeyDown: (e) => F(e, "appearance"),
                         onSelect: (e) => {
                           e.preventDefault(), h("appearance");
                         },
@@ -476,14 +470,14 @@ const Ke = se(
                           A,
                           {
                             label: L,
-                            value: ((B = x.find(
+                            value: ((U = x.find(
                               (e) => e.value === o.theme
-                            )) == null ? void 0 : B.label) ?? ""
+                            )) == null ? void 0 : U.label) ?? ""
                           }
                         )
                       }
                     ) : /* @__PURE__ */ t(
-                      r.ChoiceSub,
+                      n.ChoiceSub,
                       {
                         label: L,
                         value: o.theme,
@@ -492,9 +486,9 @@ const Ke = se(
                       }
                     ),
                     /* @__PURE__ */ t(
-                      r.SwitchItem,
+                      n.SwitchItem,
                       {
-                        checked: ne,
+                        checked: re,
                         onCheckedChange: (e) => o.setAccessibility(e ? "accessible" : "default"),
                         children: p("navigation.headerSettings.appearance.accessible")
                       }
@@ -513,4 +507,4 @@ Ke.displayName = "HeaderSettings";
 export {
   Ke as H
 };
-//# sourceMappingURL=header-settings-DBlTL6Qj.js.map
+//# sourceMappingURL=header-settings-Coh1r41O.js.map