@alfadocs/ui-kit-debug 0.70.0 → 0.72.0

package/dist/_chunks/locale-picker-DzF7Q5Y8.js

@@ -0,0 +1,739 @@
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as H, useId as $, useState as M, useCallback as R, useMemo as D, useRef as F, useImperativeHandle as Q, useEffect as Z } from "react";
+import { c as B } from "./index-D2ZczOXr.js";
+import { useTranslation as T } from "react-i18next";
+import { _ as y, R as ee } from "./index-4xgbg-sn.js";
+import { I as ae } from "./icon-button-LqoiKcUN.js";
+import { P as C } from "./popover-uJ6BvEU3.js";
+import { h as A, a as _ } from "./flag-DZ6V7-hU.js";
+import { c as se, a as te, d as re } from "./input-surface-xyERuLU_.js";
+import { LOCALES_WITH_BUNDLES as j } from "../i18n/config.js";
+import { u as oe } from "./use-locale-BkCIHujH.js";
+import { u as ne } from "./registry-DvAUVLHh.js";
+import { G as z } from "./globe-sHBW1JN5.js";
+import { M as ie } from "./monitor-xXSrufmP.js";
+import { C as O } from "./check-DrFSN__t.js";
+const k = {
+  en: {
+    code: "en",
+    nativeName: "English",
+    englishName: "English",
+    countryCode: "GB",
+    flag: "🇬🇧",
+    dir: "ltr"
+  },
+  it: {
+    code: "it",
+    nativeName: "Italiano",
+    englishName: "Italian",
+    countryCode: "IT",
+    flag: "🇮🇹",
+    dir: "ltr"
+  },
+  de: {
+    code: "de",
+    nativeName: "Deutsch",
+    englishName: "German",
+    countryCode: "DE",
+    flag: "🇩🇪",
+    dir: "ltr"
+  },
+  ar: {
+    code: "ar",
+    nativeName: "العربية",
+    englishName: "Arabic",
+    countryCode: "SA",
+    flag: "🇸🇦",
+    dir: "rtl"
+  },
+  fr: {
+    code: "fr",
+    nativeName: "Français",
+    englishName: "French",
+    countryCode: "FR",
+    flag: "🇫🇷",
+    dir: "ltr"
+  },
+  es: {
+    code: "es",
+    nativeName: "Español",
+    englishName: "Spanish",
+    countryCode: "ES",
+    flag: "🇪🇸",
+    dir: "ltr"
+  },
+  pt: {
+    code: "pt",
+    nativeName: "Português",
+    englishName: "Portuguese",
+    countryCode: "PT",
+    flag: "🇵🇹",
+    dir: "ltr"
+  },
+  nl: {
+    code: "nl",
+    nativeName: "Nederlands",
+    englishName: "Dutch",
+    countryCode: "NL",
+    flag: "🇳🇱",
+    dir: "ltr"
+  },
+  ro: {
+    code: "ro",
+    nativeName: "Română",
+    englishName: "Romanian",
+    countryCode: "RO",
+    flag: "🇷🇴",
+    dir: "ltr"
+  },
+  sq: {
+    code: "sq",
+    nativeName: "Shqip",
+    englishName: "Albanian",
+    countryCode: "AL",
+    flag: "🇦🇱",
+    dir: "ltr"
+  },
+  tr: {
+    code: "tr",
+    nativeName: "Türkçe",
+    englishName: "Turkish",
+    countryCode: "TR",
+    flag: "🇹🇷",
+    dir: "ltr"
+  },
+  pl: {
+    code: "pl",
+    nativeName: "Polski",
+    englishName: "Polish",
+    countryCode: "PL",
+    flag: "🇵🇱",
+    dir: "ltr"
+  },
+  sv: {
+    code: "sv",
+    nativeName: "Svenska",
+    englishName: "Swedish",
+    countryCode: "SE",
+    flag: "🇸🇪",
+    dir: "ltr"
+  },
+  ru: {
+    code: "ru",
+    nativeName: "Русский",
+    englishName: "Russian",
+    countryCode: "RU",
+    flag: "🇷🇺",
+    dir: "ltr"
+  },
+  el: {
+    code: "el",
+    nativeName: "Ελληνικά",
+    englishName: "Greek",
+    countryCode: "GR",
+    flag: "🇬🇷",
+    dir: "ltr"
+  },
+  ja: {
+    code: "ja",
+    nativeName: "日本語",
+    englishName: "Japanese",
+    countryCode: "JP",
+    flag: "🇯🇵",
+    dir: "ltr"
+  },
+  zh: {
+    code: "zh",
+    nativeName: "中文",
+    englishName: "Chinese",
+    countryCode: "CN",
+    flag: "🇨🇳",
+    dir: "ltr"
+  },
+  hi: {
+    code: "hi",
+    nativeName: "हिन्दी",
+    englishName: "Hindi",
+    countryCode: "IN",
+    flag: "🇮🇳",
+    dir: "ltr"
+  }
+};
+j.map((e) => k[e]);
+const de = [
+  ...j.map((e) => k[e])
+].sort((e, a) => e.englishName.localeCompare(a.englishName, "en")), le = {
+  id: "locale-picker",
+  // Persists a single locale choice via the handle's `setLocale` → set_value.
+  capabilities: ["set_value"],
+  state: {},
+  actions: {
+    set_locale: {
+      safety: "write",
+      argsType: "{ locale: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          locale: {
+            type: "string",
+            description: 'IETF language tag (e.g. "en", "it"). Unsupported tags are a no-op.'
+          }
+        },
+        required: ["locale"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.localePicker.actions.setLocale",
+      description: "Switch the active locale to the given IETF tag.",
+      invoke: (e, a) => {
+        e.setLocale(a.locale);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "locale-picker",
+      description: "Marks the LocalePicker wrapper."
+    }
+  }
+}, b = "alfadocs-ui.locale", g = "system";
+let U = !1;
+function h(e) {
+  return typeof e == "string" && j.includes(e);
+}
+function G(e) {
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage.getItem(e);
+  } catch {
+    return null;
+  }
+}
+function q(e, a) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(e, a);
+    } catch {
+    }
+}
+function x() {
+  if (typeof navigator > "u") return "en";
+  const e = navigator.language;
+  if (!e) return "en";
+  const a = e.toLowerCase().split("-")[0];
+  return h(a) ? a : "en";
+}
+function L(e) {
+  if (typeof document > "u") return;
+  const a = document.documentElement;
+  a.lang = e, a.dir = k[e].dir;
+}
+function V(e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.removeItem(e);
+    } catch {
+    }
+}
+function J() {
+  const { locale: e, setLocale: a } = oe(), [u, d] = M(
+    () => G(b) === null
+  ), i = h(e) ? e : "en", l = R(
+    (o) => {
+      if (o === g) {
+        V(b);
+        const r = x();
+        a(r), L(r), d(!0);
+        return;
+      }
+      h(o) && (a(o), L(o), q(b, o), d(!1));
+    },
+    [a]
+  );
+  return Z(() => {
+    if (U) return;
+    U = !0;
+    const o = G(b);
+    if (h(o)) {
+      o !== e && a(o), L(o);
+      return;
+    }
+    const r = x();
+    a(r), L(r);
+  }, []), { locale: i, isSystemDefault: u, setLocale: l };
+}
+const K = B("ds:inline-flex ds:items-center", {
+  variants: {
+    variant: {
+      icon: "",
+      compact: ""
+    }
+  },
+  defaultVariants: { variant: "icon" }
+}), ce = [
+  "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+  "ds:rounded-[var(--radius-sm)] ds:px-[var(--spacing-sm)]",
+  "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]",
+  "ds:bg-transparent ds:text-foreground",
+  "ds:hover:bg-muted",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed",
+  "type-body-sm"
+].join(" "), W = [
+  "ds:w-[18rem] ds:rounded-[var(--radius-md)]",
+  "ds:bg-background ds:text-foreground ds:border ds:border-border",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:overflow-hidden"
+].join(" "), ue = B("ds:flex ds:flex-col", {
+  variants: {
+    loading: {
+      true: "ds:opacity-60 ds:pointer-events-none",
+      false: ""
+    }
+  },
+  defaultVariants: { loading: !1 }
+}), I = H(
+  ({
+    value: e,
+    onValueChange: a,
+    inputId: u,
+    disabled: d = !1,
+    loading: i = !1,
+    className: l
+  }, o) => {
+    const { t: r } = T(), n = J(), E = n.locale, S = e ?? (n.isSystemDefault ? g : n.locale), p = $(), w = u ?? `${p}-search`, [P, v] = M(""), N = R(
+      (t) => {
+        if (!(d || i)) {
+          if (t === g) {
+            a ? a(g) : n.setLocale(g);
+            return;
+          }
+          h(t) && (a ? a(t) : n.setLocale(t));
+        }
+      },
+      [d, i, a, n]
+    );
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: o,
+        className: [ue({ loading: i }), l].filter(Boolean).join(" "),
+        "data-component": "locale-picker-search-list",
+        children: /* @__PURE__ */ f(
+          y,
+          {
+            label: r("navigation.localePicker.commandLabel"),
+            filter: ee,
+            shouldFilter: !0,
+            children: [
+              /* @__PURE__ */ f(
+                "div",
+                {
+                  className: [
+                    se,
+                    te.sm,
+                    re.sm,
+                    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+                    "ds:m-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ s(
+                      z,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:size-4 ds:text-muted-foreground ds:shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      y.Input,
+                      {
+                        id: w,
+                        value: P,
+                        onValueChange: v,
+                        placeholder: r("navigation.localePicker.searchPlaceholder"),
+                        "aria-label": r("navigation.localePicker.searchLabel"),
+                        disabled: d || i,
+                        className: [
+                          "ds:peer ds:flex-1 ds:bg-transparent ds:border-0 ds:outline-none",
+                          "ds:placeholder:text-muted-foreground ds:text-foreground",
+                          "ds:text-[length:var(--font-size-sm)]"
+                        ].join(" ")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ f(
+                y.List,
+                {
+                  className: [
+                    "ds:max-h-[18rem] ds:overflow-y-auto",
+                    "ds:p-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ s(
+                      y.Empty,
+                      {
+                        className: [
+                          "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]",
+                          "type-body-sm ds:text-muted-foreground"
+                        ].join(" "),
+                        children: r("navigation.localePicker.empty")
+                      }
+                    ),
+                    (() => {
+                      const t = S === g, c = k[E];
+                      return /* @__PURE__ */ f(
+                        y.Item,
+                        {
+                          value: g,
+                          keywords: [
+                            "system",
+                            "default",
+                            "auto",
+                            "browser",
+                            c.nativeName,
+                            c.englishName
+                          ],
+                          disabled: d || i,
+                          onSelect: N,
+                          className: [
+                            "ds:relative ds:flex ds:cursor-pointer ds:select-none",
+                            "ds:items-center ds:gap-[var(--spacing-sm)]",
+                            "ds:rounded-[var(--radius-sm)]",
+                            "ds:min-h-[var(--min-target-size)]",
+                            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+                            "ds:text-foreground ds:outline-none",
+                            "ds:data-[highlighted]:bg-muted",
+                            "ds:aria-selected:bg-muted",
+                            "ds:aria-disabled:opacity-50 ds:aria-disabled:cursor-not-allowed"
+                          ].join(" "),
+                          "aria-selected": t || void 0,
+                          "data-current": t ? "true" : void 0,
+                          children: [
+                            /* @__PURE__ */ s(
+                              ie,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:text-muted-foreground ds:shrink-0"
+                              }
+                            ),
+                            /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate type-body-sm", children: r("navigation.localePicker.systemDefault", {
+                              locale: c.nativeName
+                            }) }),
+                            t ? /* @__PURE__ */ s(
+                              O,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:text-primary ds:shrink-0"
+                              }
+                            ) : null,
+                            t ? /* @__PURE__ */ s("span", { className: "ds:sr-only", children: r("navigation.localePicker.currentSelection") }) : null
+                          ]
+                        },
+                        g
+                      );
+                    })(),
+                    de.map((t) => {
+                      const c = S === t.code;
+                      return /* @__PURE__ */ f(
+                        y.Item,
+                        {
+                          value: t.code,
+                          keywords: [t.nativeName, t.englishName],
+                          disabled: d || i,
+                          onSelect: N,
+                          className: [
+                            "ds:relative ds:flex ds:cursor-pointer ds:select-none",
+                            "ds:items-center ds:gap-[var(--spacing-sm)]",
+                            "ds:rounded-[var(--radius-sm)]",
+                            "ds:min-h-[var(--min-target-size)]",
+                            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+                            "ds:text-foreground ds:outline-none",
+                            "ds:data-[highlighted]:bg-muted",
+                            "ds:aria-selected:bg-muted",
+                            "ds:aria-disabled:opacity-50 ds:aria-disabled:cursor-not-allowed"
+                          ].join(" "),
+                          "aria-selected": c || void 0,
+                          "data-current": c ? "true" : void 0,
+                          lang: t.code,
+                          children: [
+                            A(t.countryCode) ? /* @__PURE__ */ s(
+                              _,
+                              {
+                                country: t.countryCode,
+                                size: "sm",
+                                shape: "rectangle",
+                                rounded: "sm",
+                                className: "ds:shrink-0"
+                              }
+                            ) : (
+                              /* hasFlag fallback: render the emoji glyph only
+                                 when the kit doesn't ship an SVG for this
+                                 country code. All 18 bundled locales currently
+                                 have SVG flags, so this is dead code on the
+                                 canonical set — kept for resilience when
+                                 consumers extend the registry. */
+                              /* @__PURE__ */ s(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: "ds:text-base ds:shrink-0",
+                                  children: t.flag
+                                }
+                              )
+                            ),
+                            /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate type-body-sm", children: t.nativeName }),
+                            c ? /* @__PURE__ */ s(
+                              O,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:text-primary ds:shrink-0"
+                              }
+                            ) : null,
+                            c ? /* @__PURE__ */ s("span", { className: "ds:sr-only", children: r("navigation.localePicker.currentSelection") }) : null
+                          ]
+                        },
+                        t.code
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = "LocalePicker.SearchList";
+function me({
+  state: e,
+  rest: a,
+  forwardedRef: u,
+  className: d,
+  disabled: i,
+  loading: l,
+  popoverSide: o
+}) {
+  const { t: r } = T(), n = k[e.locale];
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: u,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: K({ variant: "icon", className: d }),
+      ...a,
+      children: /* @__PURE__ */ f(C.Root, { children: [
+        /* @__PURE__ */ s(C.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+          ae,
+          {
+            disabled: i || l,
+            icon: /* @__PURE__ */ f("span", { className: "ds:relative ds:inline-flex ds:items-center ds:justify-center", children: [
+              /* @__PURE__ */ s(z, { "aria-hidden": !0, className: "ds:size-5" }),
+              A(n.countryCode) ? /* @__PURE__ */ s(
+                _,
+                {
+                  country: n.countryCode,
+                  size: "sm",
+                  shape: "rectangle",
+                  rounded: "sm",
+                  className: [
+                    // Corner chip overlaying the globe glyph.
+                    // `outline` paints a thin background-coloured
+                    // ring around the flag so it reads as a chip
+                    // rather than blending into the globe edge.
+                    "ds:absolute ds:bottom-[-3px] ds:end-[-5px]",
+                    "ds:outline ds:outline-2 ds:outline-background",
+                    // Scale down to chip size — Flag's sm tile is
+                    // larger than the original emoji glyph.
+                    "ds:scale-75 ds:origin-bottom-end"
+                  ].join(" ")
+                }
+              ) : null
+            ] }),
+            "aria-label": r("navigation.localePicker.trigger", {
+              locale: n.nativeName
+            })
+          }
+        ) }),
+        /* @__PURE__ */ s(
+          C.Content,
+          {
+            side: o,
+            align: "start",
+            sideOffset: 8,
+            className: W,
+            "aria-label": r("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ s(
+              I,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: i,
+                loading: l
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function ge({
+  state: e,
+  rest: a,
+  forwardedRef: u,
+  className: d,
+  disabled: i,
+  loading: l,
+  popoverSide: o
+}) {
+  const { t: r } = T(), n = k[e.locale];
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: u,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: K({ variant: "compact", className: d }),
+      ...a,
+      children: /* @__PURE__ */ f(C.Root, { children: [
+        /* @__PURE__ */ s(C.Trigger, { asChild: !0, children: /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            disabled: i || l,
+            className: ce,
+            "aria-label": r("navigation.localePicker.trigger", {
+              locale: n.nativeName
+            }),
+            children: [
+              A(n.countryCode) ? /* @__PURE__ */ s(
+                _,
+                {
+                  country: n.countryCode,
+                  size: "sm",
+                  shape: "rectangle",
+                  rounded: "sm",
+                  className: "ds:shrink-0"
+                }
+              ) : /* @__PURE__ */ s(z, { "aria-hidden": !0, className: "ds:size-4 ds:shrink-0" }),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: "ds:flex-1 ds:truncate type-body-sm",
+                  lang: n.code,
+                  children: n.nativeName
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(
+          C.Content,
+          {
+            side: o,
+            align: "start",
+            sideOffset: 8,
+            className: W,
+            "aria-label": r("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ s(
+              I,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: i,
+                loading: l
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+const Y = H(
+  (e, a) => {
+    const {
+      variant: u = "icon",
+      value: d,
+      onValueChange: i,
+      disabled: l = !1,
+      loading: o = !1,
+      popoverSide: r = "bottom",
+      className: n,
+      id: E,
+      ...S
+    } = e, p = J(), w = d ?? p.locale, P = R(
+      (m) => {
+        if (i) {
+          if (i(m), m === g) {
+            V(b);
+            const X = x();
+            L(X);
+          } else h(m) && (L(m), q(b, m));
+          return;
+        }
+        p.setLocale(m);
+      },
+      [i, p]
+    ), v = D(
+      () => ({
+        locale: w,
+        isSystemDefault: p.isSystemDefault,
+        setLocale: P
+      }),
+      [w, p.isSystemDefault, P]
+    ), N = F(null);
+    Q(a, () => N.current, []);
+    const t = F(v);
+    t.current = v;
+    const c = D(
+      () => ({
+        setLocale: (m) => {
+          h(m) && t.current.setLocale(m);
+        }
+      }),
+      []
+    );
+    return ne(le, c, E), u === "compact" ? /* @__PURE__ */ s(
+      ge,
+      {
+        state: v,
+        rest: S,
+        forwardedRef: N,
+        className: n,
+        disabled: l,
+        loading: o,
+        popoverSide: r
+      }
+    ) : /* @__PURE__ */ s(
+      me,
+      {
+        state: v,
+        rest: S,
+        forwardedRef: N,
+        className: n,
+        disabled: l,
+        loading: o,
+        popoverSide: r
+      }
+    );
+  }
+);
+Y.displayName = "LocalePicker";
+const xe = Object.assign(Y, {
+  SearchList: I
+});
+export {
+  b as L,
+  xe as a,
+  I as b,
+  k as c
+};
+//# sourceMappingURL=locale-picker-DzF7Q5Y8.js.map