@alfadocs/ui-kit 0.21.0 → 0.24.0

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

@@ -0,0 +1,575 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as z, useId as B, useState as D, useCallback as I, useMemo as R, useRef as T, useImperativeHandle as q, useEffect as M } from "react";
+import { c as _ } from "./index-D2ZczOXr.js";
+import { useTranslation as j } from "react-i18next";
+import { _ as b, 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 { LOCALES_WITH_BUNDLES as O } from "../i18n/config.js";
+import { u as J } from "./use-locale-BkCIHujH.js";
+import { u as U } from "./registry-C9nwlNyL.js";
+import { G as E } from "./globe-BkEFMNSg.js";
+import { C as Y } from "./check-DPdL_Sm7.js";
+const P = {
+  en: {
+    code: "en",
+    nativeName: "English",
+    englishName: "English",
+    flag: "🇬🇧",
+    dir: "ltr"
+  },
+  it: {
+    code: "it",
+    nativeName: "Italiano",
+    englishName: "Italian",
+    flag: "🇮🇹",
+    dir: "ltr"
+  },
+  de: {
+    code: "de",
+    nativeName: "Deutsch",
+    englishName: "German",
+    flag: "🇩🇪",
+    dir: "ltr"
+  },
+  ar: {
+    code: "ar",
+    nativeName: "العربية",
+    englishName: "Arabic",
+    flag: "🇸🇦",
+    dir: "rtl"
+  },
+  fr: {
+    code: "fr",
+    nativeName: "Français",
+    englishName: "French",
+    flag: "🇫🇷",
+    dir: "ltr"
+  },
+  es: {
+    code: "es",
+    nativeName: "Español",
+    englishName: "Spanish",
+    flag: "🇪🇸",
+    dir: "ltr"
+  },
+  pt: {
+    code: "pt",
+    nativeName: "Português",
+    englishName: "Portuguese",
+    flag: "🇵🇹",
+    dir: "ltr"
+  },
+  nl: {
+    code: "nl",
+    nativeName: "Nederlands",
+    englishName: "Dutch",
+    flag: "🇳🇱",
+    dir: "ltr"
+  },
+  ro: {
+    code: "ro",
+    nativeName: "Română",
+    englishName: "Romanian",
+    flag: "🇷🇴",
+    dir: "ltr"
+  },
+  sq: {
+    code: "sq",
+    nativeName: "Shqip",
+    englishName: "Albanian",
+    flag: "🇦🇱",
+    dir: "ltr"
+  },
+  tr: {
+    code: "tr",
+    nativeName: "Türkçe",
+    englishName: "Turkish",
+    flag: "🇹🇷",
+    dir: "ltr"
+  },
+  pl: {
+    code: "pl",
+    nativeName: "Polski",
+    englishName: "Polish",
+    flag: "🇵🇱",
+    dir: "ltr"
+  },
+  sv: {
+    code: "sv",
+    nativeName: "Svenska",
+    englishName: "Swedish",
+    flag: "🇸🇪",
+    dir: "ltr"
+  },
+  ru: {
+    code: "ru",
+    nativeName: "Русский",
+    englishName: "Russian",
+    flag: "🇷🇺",
+    dir: "ltr"
+  },
+  el: {
+    code: "el",
+    nativeName: "Ελληνικά",
+    englishName: "Greek",
+    flag: "🇬🇷",
+    dir: "ltr"
+  },
+  ja: {
+    code: "ja",
+    nativeName: "日本語",
+    englishName: "Japanese",
+    flag: "🇯🇵",
+    dir: "ltr"
+  },
+  zh: {
+    code: "zh",
+    nativeName: "中文",
+    englishName: "Chinese",
+    flag: "🇨🇳",
+    dir: "ltr"
+  },
+  hi: {
+    code: "hi",
+    nativeName: "हिन्दी",
+    englishName: "Hindi",
+    flag: "🇮🇳",
+    dir: "ltr"
+  }
+}, $ = O.map(
+  (e) => P[e]
+), Q = {
+  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."
+    }
+  }
+}, y = "alfadocs-ui.locale";
+let A = !1;
+function u(e) {
+  return typeof e == "string" && O.includes(e);
+}
+function X(e) {
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage.getItem(e);
+  } catch {
+    return null;
+  }
+}
+function C(e, a) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(e, a);
+    } catch {
+    }
+}
+function Z() {
+  if (typeof navigator > "u") return "en";
+  const e = navigator.language;
+  if (!e) return "en";
+  const a = e.toLowerCase().split("-")[0];
+  return u(a) ? a : "en";
+}
+function x(e) {
+  if (typeof document > "u") return;
+  const a = document.documentElement;
+  a.lang = e, a.dir = P[e].dir;
+}
+function V() {
+  const { locale: e, setLocale: a } = J(), d = u(e) ? e : "en", o = I(
+    (s) => {
+      u(s) && (a(s), x(s), C(y, s));
+    },
+    [a]
+  );
+  return M(() => {
+    if (A) return;
+    A = !0;
+    const s = X(y);
+    if (u(s)) {
+      s !== e && a(s), x(s);
+      return;
+    }
+    const n = Z();
+    a(n), x(n), C(y, n);
+  }, []), { locale: d, setLocale: o };
+}
+const F = _("ds:inline-flex ds:items-center", {
+  variants: {
+    variant: {
+      icon: "",
+      compact: ""
+    }
+  },
+  defaultVariants: { variant: "icon" }
+}), ee = [
+  "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(" "), G = [
+  "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(" "), ae = _("ds:flex ds:flex-col", {
+  variants: {
+    loading: {
+      true: "ds:opacity-60 ds:pointer-events-none",
+      false: ""
+    }
+  },
+  defaultVariants: { loading: !1 }
+}), S = z(
+  ({
+    value: e,
+    onValueChange: a,
+    inputId: d,
+    disabled: o = !1,
+    loading: s = !1,
+    className: n
+  }, l) => {
+    const { t: r } = j(), h = V(), L = e ?? h.locale, v = B(), k = d ?? `${v}-search`, [w, g] = D(""), N = I(
+      (i) => {
+        !u(i) || o || s || (a ? a(i) : h.setLocale(i));
+      },
+      [o, s, a, h]
+    );
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: l,
+        className: [ae({ loading: s }), n].filter(Boolean).join(" "),
+        "data-component": "locale-picker-search-list",
+        children: /* @__PURE__ */ m(
+          b,
+          {
+            label: r("navigation.localePicker.commandLabel"),
+            filter: K,
+            shouldFilter: !0,
+            children: [
+              /* @__PURE__ */ m(
+                "div",
+                {
+                  className: [
+                    "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+                    "ds:border-b ds:border-border ds:px-[var(--spacing-sm)]",
+                    "ds:py-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ t(
+                      E,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:size-4 ds:text-muted-foreground ds:shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      b.Input,
+                      {
+                        id: k,
+                        value: w,
+                        onValueChange: g,
+                        placeholder: r("navigation.localePicker.searchPlaceholder"),
+                        "aria-label": r("navigation.localePicker.searchLabel"),
+                        disabled: o || s,
+                        className: [
+                          "ds:flex-1 ds:bg-transparent ds:border-0 ds:outline-none",
+                          "ds:placeholder:text-muted-foreground ds:text-foreground",
+                          "type-body-sm"
+                        ].join(" ")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ m(
+                b.List,
+                {
+                  className: [
+                    "ds:max-h-[18rem] ds:overflow-y-auto",
+                    "ds:p-[var(--spacing-xs)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ t(
+                      b.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")
+                      }
+                    ),
+                    $.map((i) => {
+                      const f = i.code === L;
+                      return /* @__PURE__ */ m(
+                        b.Item,
+                        {
+                          value: i.code,
+                          keywords: [i.nativeName, i.englishName],
+                          disabled: o || 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: i.code,
+                          dir: i.dir,
+                          children: [
+                            /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "ds:text-base ds:shrink-0", children: i.flag }),
+                            /* @__PURE__ */ t("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate type-body-sm", children: i.nativeName }),
+                            f ? /* @__PURE__ */ t(
+                              Y,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:text-primary ds:shrink-0"
+                              }
+                            ) : null,
+                            f ? /* @__PURE__ */ t("span", { className: "ds:sr-only", children: r("navigation.localePicker.currentSelection") }) : null
+                          ]
+                        },
+                        i.code
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+S.displayName = "LocalePicker.SearchList";
+function se({
+  state: e,
+  rest: a,
+  forwardedRef: d,
+  className: o,
+  disabled: s,
+  loading: n
+}) {
+  const { t: l } = j(), r = P[e.locale];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: F({ variant: "icon", className: o }),
+      ...a,
+      children: /* @__PURE__ */ m(p.Root, { children: [
+        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+          W,
+          {
+            disabled: s || n,
+            icon: /* @__PURE__ */ m("span", { className: "ds:relative ds:inline-flex ds:items-center ds:justify-center", children: [
+              /* @__PURE__ */ t(E, { "aria-hidden": !0, className: "ds:size-5" }),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: [
+                    "ds:absolute ds:bottom-[-2px] ds:end-[-4px]",
+                    "ds:text-[length:var(--font-size-xs)] ds:leading-none",
+                    "ds:bg-background ds:rounded-full ds:px-0.5"
+                  ].join(" "),
+                  children: r.flag
+                }
+              )
+            ] }),
+            "aria-label": l("navigation.localePicker.trigger", {
+              locale: r.nativeName
+            })
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          p.Content,
+          {
+            align: "end",
+            sideOffset: 8,
+            className: G,
+            "aria-label": l("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ t(
+              S,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: s,
+                loading: n
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function te({
+  state: e,
+  rest: a,
+  forwardedRef: d,
+  className: o,
+  disabled: s,
+  loading: n
+}) {
+  const { t: l } = j(), r = P[e.locale];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      "data-component": "locale-picker",
+      "data-component-id": a.id,
+      className: F({ variant: "compact", className: o }),
+      ...a,
+      children: /* @__PURE__ */ m(p.Root, { children: [
+        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            disabled: s || n,
+            className: ee,
+            "aria-label": l("navigation.localePicker.trigger", {
+              locale: r.nativeName
+            }),
+            children: [
+              /* @__PURE__ */ t(E, { "aria-hidden": !0, className: "ds:size-4 ds:shrink-0" }),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "ds:flex-1 ds:truncate type-body-sm",
+                  lang: r.code,
+                  children: r.nativeName
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          p.Content,
+          {
+            align: "end",
+            sideOffset: 8,
+            className: G,
+            "aria-label": l("navigation.localePicker.popupLabel"),
+            children: /* @__PURE__ */ t(
+              S,
+              {
+                value: e.locale,
+                onValueChange: e.setLocale,
+                disabled: s,
+                loading: n
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+const H = z(
+  (e, a) => {
+    const {
+      variant: d = "icon",
+      value: o,
+      onValueChange: s,
+      disabled: n = !1,
+      loading: l = !1,
+      className: r,
+      id: h,
+      ...L
+    } = e, v = V(), k = o ?? v.locale, w = I(
+      (c) => {
+        if (u(c)) {
+          if (s) {
+            s(c), x(c), C(y, c);
+            return;
+          }
+          v.setLocale(c);
+        }
+      },
+      [s, v]
+    ), g = R(
+      () => ({ locale: k, setLocale: w }),
+      [k, w]
+    ), N = T(null);
+    q(a, () => N.current, []);
+    const i = T(g);
+    i.current = g;
+    const f = R(
+      () => ({
+        setLocale: (c) => {
+          u(c) && i.current.setLocale(c);
+        }
+      }),
+      []
+    );
+    return U(Q, f, h), d === "compact" ? /* @__PURE__ */ t(
+      te,
+      {
+        state: g,
+        rest: L,
+        forwardedRef: N,
+        className: r,
+        disabled: n,
+        loading: l
+      }
+    ) : /* @__PURE__ */ t(
+      se,
+      {
+        state: g,
+        rest: L,
+        forwardedRef: N,
+        className: r,
+        disabled: n,
+        loading: l
+      }
+    );
+  }
+);
+H.displayName = "LocalePicker";
+const he = Object.assign(H, {
+  SearchList: S
+});
+export {
+  y as L,
+  he as a,
+  S as b,
+  P as c
+};
+//# sourceMappingURL=locale-picker-CYBhgSHR.js.map