@alfadocs/ui-kit 0.23.0 → 0.25.0

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

@@ -0,0 +1,638 @@
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as F, useId as B, useState as M, useCallback as R, useMemo as _, useRef as j, useImperativeHandle as q, useEffect as J } from "react";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as x } from "react-i18next";
+import { _ as y, R as K } from "./index-4xgbg-sn.js";
+import { I as W } from "./icon-button-C4CGcYuz.js";
+import { P as p } from "./popover--derJ_wq.js";
+import { h as E, a as T } from "./flag-DZ6V7-hU.js";
+import { c as X, a as Y, d as $ } from "./input-surface-xyERuLU_.js";
+import { LOCALES_WITH_BUNDLES as G } from "../i18n/config.js";
+import { u as Q } from "./use-locale-BkCIHujH.js";
+import { u as Z } from "./registry-C9nwlNyL.js";
+import { G as A } from "./globe-BkEFMNSg.js";
+import { C as ee } from "./check-DPdL_Sm7.js";
+const w = {
+  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"
+  }
+}, ae = G.map(
+  (e) => w[e]
+), se = {
+  id: "locale-picker",
+  capabilities: ["view_change"],
+  state: {},
+  actions: {
+    set_locale: {
+      safety: "write",
+      argsType: "{ locale: string }",
+      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."
+    }
+  }
+}, k = "alfadocs-ui.locale";
+let z = !1;
+function m(e) {
+  return typeof e == "string" && G.includes(e);
+}
+function te(e) {
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage.getItem(e);
+  } catch {
+    return null;
+  }
+}
+function I(e, a) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(e, a);
+    } catch {
+    }
+}
+function oe() {
+  if (typeof navigator > "u") return "en";
+  const e = navigator.language;
+  if (!e) return "en";
+  const a = e.toLowerCase().split("-")[0];
+  return m(a) ? a : "en";
+}
+function P(e) {
+  if (typeof document > "u") return;
+  const a = document.documentElement;
+  a.lang = e, a.dir = w[e].dir;
+}
+function H() {
+  const { locale: e, setLocale: a } = Q(), d = m(e) ? e : "en", i = R(
+    (s) => {
+      m(s) && (a(s), P(s), I(k, s));
+    },
+    [a]
+  );
+  return J(() => {
+    if (z) return;
+    z = !0;
+    const s = te(k);
+    if (m(s)) {
+      s !== e && a(s), P(s);
+      return;
+    }
+    const r = oe();
+    a(r), P(r), I(k, r);
+  }, []), { locale: d, setLocale: i };
+}
+const U = O("ds:inline-flex ds:items-center", {
+  variants: {
+    variant: {
+      icon: "",
+      compact: ""
+    }
+  },
+  defaultVariants: { variant: "icon" }
+}), ne = [
+  "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(" "), D = [
+  "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(" "), re = O("ds:flex ds:flex-col", {
+  variants: {
+    loading: {
+      true: "ds:opacity-60 ds:pointer-events-none",
+      false: ""
+    }
+  },
+  defaultVariants: { loading: !1 }
+}), S = F(
+  ({
+    value: e,
+    onValueChange: a,
+    inputId: d,
+    disabled: i = !1,
+    loading: s = !1,
+    className: r
+  }, l) => {
+    const { t: o } = x(), h = H(), b = e ?? h.locale, v = B(), C = d ?? `${v}-search`, [L, g] = M(""), N = R(
+      (n) => {
+        !m(n) || i || s || (a ? a(n) : h.setLocale(n));
+      },
+      [i, s, a, h]
+    );
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: l,
+        className: [re({ loading: s }), r].filter(Boolean).join(" "),
+        "data-component": "locale-picker-search-list",
+        children: /* @__PURE__ */ u(
+          y,
+          {
+            label: o("navigation.localePicker.commandLabel"),
+            filter: K,
+            shouldFilter: !0,
+            children: [
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: [
+                    X,
+                    Y.sm,
+                    $.sm,
+                    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+                    "ds:m-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ t(
+                      A,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:size-4 ds:text-muted-foreground ds:shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      y.Input,
+                      {
+                        id: C,
+                        value: L,
+                        onValueChange: g,
+                        placeholder: o("navigation.localePicker.searchPlaceholder"),
+                        "aria-label": o("navigation.localePicker.searchLabel"),
+                        disabled: i || s,
+                        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__ */ u(
+                y.List,
+                {
+                  className: [
+                    "ds:max-h-[18rem] ds:overflow-y-auto",
+                    "ds:p-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ t(
+                      y.Empty,
+                      {
+                        className: [
+                          "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]",
+                          "type-body-sm ds:text-muted-foreground"
+                        ].join(" "),
+                        children: o("navigation.localePicker.empty")
+                      }
+                    ),
+                    ae.map((n) => {
+                      const f = n.code === b;
+                      return /* @__PURE__ */ u(
+                        y.Item,
+                        {
+                          value: n.code,
+                          keywords: [n.nativeName, n.englishName],
+                          disabled: i || s,
+                          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": f || void 0,
+                          "data-current": f ? "true" : void 0,
+                          lang: n.code,
+                          dir: n.dir,
+                          children: [
+                            E(n.countryCode) ? /* @__PURE__ */ t(
+                              T,
+                              {
+                                country: n.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__ */ t(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: "ds:text-base ds:shrink-0",
+                                  children: n.flag
+                                }
+                              )
+                            ),
+                            /* @__PURE__ */ t("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate type-body-sm", children: n.nativeName }),
+                            f ? /* @__PURE__ */ t(
+                              ee,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:text-primary ds:shrink-0"
+                              }
+                            ) : null,
+                            f ? /* @__PURE__ */ t("span", { className: "ds:sr-only", children: o("navigation.localePicker.currentSelection") }) : null
+                          ]
+                        },
+                        n.code
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+S.displayName = "LocalePicker.SearchList";
+function ie({
+  state: e,
+  rest: a,
+  forwardedRef: d,
+  className: i,
+  disabled: s,
+  loading: r
+}) {
+  const { t: l } = x(), o = w[e.locale];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: U({ variant: "icon", className: i }),
+      ...a,
+      children: /* @__PURE__ */ u(p.Root, { children: [
+        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+          W,
+          {
+            disabled: s || r,
+            icon: /* @__PURE__ */ u("span", { className: "ds:relative ds:inline-flex ds:items-center ds:justify-center", children: [
+              /* @__PURE__ */ t(A, { "aria-hidden": !0, className: "ds:size-5" }),
+              E(o.countryCode) ? /* @__PURE__ */ t(
+                T,
+                {
+                  country: o.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": l("navigation.localePicker.trigger", {
+              locale: o.nativeName
+            })
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          p.Content,
+          {
+            align: "end",
+            sideOffset: 8,
+            className: D,
+            "aria-label": l("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ t(
+              S,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: s,
+                loading: r
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function le({
+  state: e,
+  rest: a,
+  forwardedRef: d,
+  className: i,
+  disabled: s,
+  loading: r
+}) {
+  const { t: l } = x(), o = w[e.locale];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: U({ variant: "compact", className: i }),
+      ...a,
+      children: /* @__PURE__ */ u(p.Root, { children: [
+        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ u(
+          "button",
+          {
+            type: "button",
+            disabled: s || r,
+            className: ne,
+            "aria-label": l("navigation.localePicker.trigger", {
+              locale: o.nativeName
+            }),
+            children: [
+              E(o.countryCode) ? /* @__PURE__ */ t(
+                T,
+                {
+                  country: o.countryCode,
+                  size: "sm",
+                  shape: "rectangle",
+                  rounded: "sm",
+                  className: "ds:shrink-0"
+                }
+              ) : /* @__PURE__ */ t(A, { "aria-hidden": !0, className: "ds:size-4 ds:shrink-0" }),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "ds:flex-1 ds:truncate type-body-sm",
+                  lang: o.code,
+                  children: o.nativeName
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          p.Content,
+          {
+            align: "end",
+            sideOffset: 8,
+            className: D,
+            "aria-label": l("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ t(
+              S,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: s,
+                loading: r
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+const V = F(
+  (e, a) => {
+    const {
+      variant: d = "icon",
+      value: i,
+      onValueChange: s,
+      disabled: r = !1,
+      loading: l = !1,
+      className: o,
+      id: h,
+      ...b
+    } = e, v = H(), C = i ?? v.locale, L = R(
+      (c) => {
+        if (m(c)) {
+          if (s) {
+            s(c), P(c), I(k, c);
+            return;
+          }
+          v.setLocale(c);
+        }
+      },
+      [s, v]
+    ), g = _(
+      () => ({ locale: C, setLocale: L }),
+      [C, L]
+    ), N = j(null);
+    q(a, () => N.current, []);
+    const n = j(g);
+    n.current = g;
+    const f = _(
+      () => ({
+        setLocale: (c) => {
+          m(c) && n.current.setLocale(c);
+        }
+      }),
+      []
+    );
+    return Z(se, f, h), d === "compact" ? /* @__PURE__ */ t(
+      le,
+      {
+        state: g,
+        rest: b,
+        forwardedRef: N,
+        className: o,
+        disabled: r,
+        loading: l
+      }
+    ) : /* @__PURE__ */ t(
+      ie,
+      {
+        state: g,
+        rest: b,
+        forwardedRef: N,
+        className: o,
+        disabled: r,
+        loading: l
+      }
+    );
+  }
+);
+V.displayName = "LocalePicker";
+const ke = Object.assign(V, {
+  SearchList: S
+});
+export {
+  k as L,
+  ke as a,
+  S as b,
+  w as c
+};
+//# sourceMappingURL=locale-picker-BxEUUPW7.js.map