@alfadocs/ui-kit 0.24.0 → 0.25.0

package/dist/_chunks/{locale-picker-CYBhgSHR.js → locale-picker-BxEUUPW7.js}

@@ -1,20 +1,23 @@
-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 { 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 { 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 = {
+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"
   },
@@ -22,6 +25,7 @@ const P = {
     code: "it",
     nativeName: "Italiano",
     englishName: "Italian",
+    countryCode: "IT",
     flag: "🇮🇹",
     dir: "ltr"
   },
@@ -29,6 +33,7 @@ const P = {
     code: "de",
     nativeName: "Deutsch",
     englishName: "German",
+    countryCode: "DE",
     flag: "🇩🇪",
     dir: "ltr"
   },
@@ -36,6 +41,7 @@ const P = {
     code: "ar",
     nativeName: "العربية",
     englishName: "Arabic",
+    countryCode: "SA",
     flag: "🇸🇦",
     dir: "rtl"
   },
@@ -43,6 +49,7 @@ const P = {
     code: "fr",
     nativeName: "Français",
     englishName: "French",
+    countryCode: "FR",
     flag: "🇫🇷",
     dir: "ltr"
   },
@@ -50,6 +57,7 @@ const P = {
     code: "es",
     nativeName: "Español",
     englishName: "Spanish",
+    countryCode: "ES",
     flag: "🇪🇸",
     dir: "ltr"
   },
@@ -57,6 +65,7 @@ const P = {
     code: "pt",
     nativeName: "Português",
     englishName: "Portuguese",
+    countryCode: "PT",
     flag: "🇵🇹",
     dir: "ltr"
   },
@@ -64,6 +73,7 @@ const P = {
     code: "nl",
     nativeName: "Nederlands",
     englishName: "Dutch",
+    countryCode: "NL",
     flag: "🇳🇱",
     dir: "ltr"
   },
@@ -71,6 +81,7 @@ const P = {
     code: "ro",
     nativeName: "Română",
     englishName: "Romanian",
+    countryCode: "RO",
     flag: "🇷🇴",
     dir: "ltr"
   },
@@ -78,6 +89,7 @@ const P = {
     code: "sq",
     nativeName: "Shqip",
     englishName: "Albanian",
+    countryCode: "AL",
     flag: "🇦🇱",
     dir: "ltr"
   },
@@ -85,6 +97,7 @@ const P = {
     code: "tr",
     nativeName: "Türkçe",
     englishName: "Turkish",
+    countryCode: "TR",
     flag: "🇹🇷",
     dir: "ltr"
   },
@@ -92,6 +105,7 @@ const P = {
     code: "pl",
     nativeName: "Polski",
     englishName: "Polish",
+    countryCode: "PL",
     flag: "🇵🇱",
     dir: "ltr"
   },
@@ -99,6 +113,7 @@ const P = {
     code: "sv",
     nativeName: "Svenska",
     englishName: "Swedish",
+    countryCode: "SE",
     flag: "🇸🇪",
     dir: "ltr"
   },
@@ -106,6 +121,7 @@ const P = {
     code: "ru",
     nativeName: "Русский",
     englishName: "Russian",
+    countryCode: "RU",
     flag: "🇷🇺",
     dir: "ltr"
   },
@@ -113,6 +129,7 @@ const P = {
     code: "el",
     nativeName: "Ελληνικά",
     englishName: "Greek",
+    countryCode: "GR",
     flag: "🇬🇷",
     dir: "ltr"
   },
@@ -120,6 +137,7 @@ const P = {
     code: "ja",
     nativeName: "日本語",
     englishName: "Japanese",
+    countryCode: "JP",
     flag: "🇯🇵",
     dir: "ltr"
   },
@@ -127,6 +145,7 @@ const P = {
     code: "zh",
     nativeName: "中文",
     englishName: "Chinese",
+    countryCode: "CN",
     flag: "🇨🇳",
     dir: "ltr"
   },
@@ -134,12 +153,13 @@ const P = {
     code: "hi",
     nativeName: "हिन्दी",
     englishName: "Hindi",
+    countryCode: "IN",
     flag: "🇮🇳",
     dir: "ltr"
   }
-}, $ = O.map(
-  (e) => P[e]
-), Q = {
+}, ae = G.map(
+  (e) => w[e]
+), se = {
   id: "locale-picker",
   capabilities: ["view_change"],
   state: {},
@@ -161,12 +181,12 @@ const P = {
       description: "Marks the LocalePicker wrapper."
     }
   }
-}, y = "alfadocs-ui.locale";
-let A = !1;
-function u(e) {
-  return typeof e == "string" && O.includes(e);
+}, k = "alfadocs-ui.locale";
+let z = !1;
+function m(e) {
+  return typeof e == "string" && G.includes(e);
 }
-function X(e) {
+function te(e) {
   if (typeof window > "u") return null;
   try {
     return window.localStorage.getItem(e);
@@ -174,45 +194,45 @@ function X(e) {
     return null;
   }
 }
-function C(e, a) {
+function I(e, a) {
   if (!(typeof window > "u"))
     try {
       window.localStorage.setItem(e, a);
     } catch {
     }
 }
-function Z() {
+function oe() {
   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";
+  return m(a) ? a : "en";
 }
-function x(e) {
+function P(e) {
   if (typeof document > "u") return;
   const a = document.documentElement;
-  a.lang = e, a.dir = P[e].dir;
+  a.lang = e, a.dir = w[e].dir;
 }
-function V() {
-  const { locale: e, setLocale: a } = J(), d = u(e) ? e : "en", o = I(
+function H() {
+  const { locale: e, setLocale: a } = Q(), d = m(e) ? e : "en", i = R(
     (s) => {
-      u(s) && (a(s), x(s), C(y, s));
+      m(s) && (a(s), P(s), I(k, s));
     },
     [a]
   );
-  return M(() => {
-    if (A) return;
-    A = !0;
-    const s = X(y);
-    if (u(s)) {
-      s !== e && a(s), x(s);
+  return J(() => {
+    if (z) return;
+    z = !0;
+    const s = te(k);
+    if (m(s)) {
+      s !== e && a(s), P(s);
       return;
     }
-    const n = Z();
-    a(n), x(n), C(y, n);
-  }, []), { locale: d, setLocale: o };
+    const r = oe();
+    a(r), P(r), I(k, r);
+  }, []), { locale: d, setLocale: i };
 }
-const F = _("ds:inline-flex ds:items-center", {
+const U = O("ds:inline-flex ds:items-center", {
   variants: {
     variant: {
       icon: "",
@@ -220,7 +240,7 @@ const F = _("ds:inline-flex ds:items-center", {
     }
   },
   defaultVariants: { variant: "icon" }
-}), ee = [
+}), 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)]",
@@ -231,12 +251,12 @@ const F = _("ds:inline-flex ds:items-center", {
   "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 = [
+].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(" "), ae = _("ds:flex ds:flex-col", {
+].join(" "), re = O("ds:flex ds:flex-col", {
   variants: {
     loading: {
       true: "ds:opacity-60 ds:pointer-events-none",
@@ -244,71 +264,73 @@ const F = _("ds:inline-flex ds:items-center", {
     }
   },
   defaultVariants: { loading: !1 }
-}), S = z(
+}), S = F(
   ({
     value: e,
     onValueChange: a,
     inputId: d,
-    disabled: o = !1,
+    disabled: i = !1,
     loading: s = !1,
-    className: n
+    className: r
   }, 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));
+    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));
       },
-      [o, s, a, h]
+      [i, s, a, h]
     );
     return /* @__PURE__ */ t(
       "div",
       {
         ref: l,
-        className: [ae({ loading: s }), n].filter(Boolean).join(" "),
+        className: [re({ loading: s }), r].filter(Boolean).join(" "),
         "data-component": "locale-picker-search-list",
-        children: /* @__PURE__ */ m(
-          b,
+        children: /* @__PURE__ */ u(
+          y,
           {
-            label: r("navigation.localePicker.commandLabel"),
+            label: o("navigation.localePicker.commandLabel"),
             filter: K,
             shouldFilter: !0,
             children: [
-              /* @__PURE__ */ m(
+              /* @__PURE__ */ u(
                 "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)]"
+                    X,
+                    Y.sm,
+                    $.sm,
+                    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+                    "ds:m-[var(--spacing-xs)]"
                   ].join(" "),
                   children: [
                     /* @__PURE__ */ t(
-                      E,
+                      A,
                       {
                         "aria-hidden": "true",
                         className: "ds:size-4 ds:text-muted-foreground ds:shrink-0"
                       }
                     ),
                     /* @__PURE__ */ t(
-                      b.Input,
+                      y.Input,
                       {
-                        id: k,
-                        value: w,
+                        id: C,
+                        value: L,
                         onValueChange: g,
-                        placeholder: r("navigation.localePicker.searchPlaceholder"),
-                        "aria-label": r("navigation.localePicker.searchLabel"),
-                        disabled: o || s,
+                        placeholder: o("navigation.localePicker.searchPlaceholder"),
+                        "aria-label": o("navigation.localePicker.searchLabel"),
+                        disabled: i || s,
                         className: [
-                          "ds:flex-1 ds:bg-transparent ds:border-0 ds:outline-none",
+                          "ds:peer ds:flex-1 ds:bg-transparent ds:border-0 ds:outline-none",
                           "ds:placeholder:text-muted-foreground ds:text-foreground",
-                          "type-body-sm"
+                          "ds:text-[length:var(--font-size-sm)]"
                         ].join(" ")
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ m(
-                b.List,
+              /* @__PURE__ */ u(
+                y.List,
                 {
                   className: [
                     "ds:max-h-[18rem] ds:overflow-y-auto",
@@ -316,23 +338,23 @@ const F = _("ds:inline-flex ds:items-center", {
                   ].join(" "),
                   children: [
                     /* @__PURE__ */ t(
-                      b.Empty,
+                      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")
+                        children: o("navigation.localePicker.empty")
                       }
                     ),
-                    $.map((i) => {
-                      const f = i.code === L;
-                      return /* @__PURE__ */ m(
-                        b.Item,
+                    ae.map((n) => {
+                      const f = n.code === b;
+                      return /* @__PURE__ */ u(
+                        y.Item,
                         {
-                          value: i.code,
-                          keywords: [i.nativeName, i.englishName],
-                          disabled: o || s,
+                          value: n.code,
+                          keywords: [n.nativeName, n.englishName],
+                          disabled: i || s,
                           onSelect: N,
                           className: [
                             "ds:relative ds:flex ds:cursor-pointer ds:select-none",
@@ -347,22 +369,46 @@ const F = _("ds:inline-flex ds:items-center", {
                           ].join(" "),
                           "aria-selected": f || void 0,
                           "data-current": f ? "true" : void 0,
-                          lang: i.code,
-                          dir: i.dir,
+                          lang: n.code,
+                          dir: n.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 }),
+                            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(
-                              Y,
+                              ee,
                               {
                                 "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
+                            f ? /* @__PURE__ */ t("span", { className: "ds:sr-only", children: o("navigation.localePicker.currentSelection") }) : null
                           ]
                         },
-                        i.code
+                        n.code
                       );
                     })
                   ]
@@ -376,45 +422,53 @@ const F = _("ds:inline-flex ds:items-center", {
   }
 );
 S.displayName = "LocalePicker.SearchList";
-function se({
+function ie({
   state: e,
   rest: a,
   forwardedRef: d,
-  className: o,
+  className: i,
   disabled: s,
-  loading: n
+  loading: r
 }) {
-  const { t: l } = j(), r = P[e.locale];
+  const { t: l } = x(), o = w[e.locale];
   return /* @__PURE__ */ t(
     "div",
     {
       ref: d,
       "data-component": "locale-picker",
       "data-component-id": a.id,
-      className: F({ variant: "icon", className: o }),
+      className: U({ variant: "icon", className: i }),
       ...a,
-      children: /* @__PURE__ */ m(p.Root, { children: [
+      children: /* @__PURE__ */ u(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",
+            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,
                 {
-                  "aria-hidden": "true",
+                  country: o.countryCode,
+                  size: "sm",
+                  shape: "rectangle",
+                  rounded: "sm",
                   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
+                    // 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: r.nativeName
+              locale: o.nativeName
             })
           }
         ) }),
@@ -423,7 +477,7 @@ function se({
           {
             align: "end",
             sideOffset: 8,
-            className: G,
+            className: D,
             "aria-label": l("navigation.localePicker.popupLabel"),
             children: /* @__PURE__ */ t(
               S,
@@ -431,7 +485,7 @@ function se({
                 value: e.locale,
                 onValueChange: e.setLocale,
                 disabled: s,
-                loading: n
+                loading: r
               }
             )
           }
@@ -440,41 +494,50 @@ function se({
     }
   );
 }
-function te({
+function le({
   state: e,
   rest: a,
   forwardedRef: d,
-  className: o,
+  className: i,
   disabled: s,
-  loading: n
+  loading: r
 }) {
-  const { t: l } = j(), r = P[e.locale];
+  const { t: l } = x(), o = w[e.locale];
   return /* @__PURE__ */ t(
     "div",
     {
       ref: d,
       "data-component": "locale-picker",
       "data-component-id": a.id,
-      className: F({ variant: "compact", className: o }),
+      className: U({ variant: "compact", className: i }),
       ...a,
-      children: /* @__PURE__ */ m(p.Root, { children: [
-        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ u(p.Root, { children: [
+        /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ u(
           "button",
           {
             type: "button",
-            disabled: s || n,
-            className: ee,
+            disabled: s || r,
+            className: ne,
             "aria-label": l("navigation.localePicker.trigger", {
-              locale: r.nativeName
+              locale: o.nativeName
             }),
             children: [
-              /* @__PURE__ */ t(E, { "aria-hidden": !0, className: "ds:size-4 ds:shrink-0" }),
+              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: r.code,
-                  children: r.nativeName
+                  lang: o.code,
+                  children: o.nativeName
                 }
               )
             ]
@@ -485,7 +548,7 @@ function te({
           {
             align: "end",
             sideOffset: 8,
-            className: G,
+            className: D,
             "aria-label": l("navigation.localePicker.popupLabel"),
             children: /* @__PURE__ */ t(
               S,
@@ -493,7 +556,7 @@ function te({
                 value: e.locale,
                 onValueChange: e.setLocale,
                 disabled: s,
-                loading: n
+                loading: r
               }
             )
           }
@@ -502,74 +565,74 @@ function te({
     }
   );
 }
-const H = z(
+const V = F(
   (e, a) => {
     const {
       variant: d = "icon",
-      value: o,
+      value: i,
       onValueChange: s,
-      disabled: n = !1,
+      disabled: r = !1,
       loading: l = !1,
-      className: r,
+      className: o,
       id: h,
-      ...L
-    } = e, v = V(), k = o ?? v.locale, w = I(
+      ...b
+    } = e, v = H(), C = i ?? v.locale, L = R(
       (c) => {
-        if (u(c)) {
+        if (m(c)) {
           if (s) {
-            s(c), x(c), C(y, c);
+            s(c), P(c), I(k, c);
             return;
           }
           v.setLocale(c);
         }
       },
       [s, v]
-    ), g = R(
-      () => ({ locale: k, setLocale: w }),
-      [k, w]
-    ), N = T(null);
+    ), g = _(
+      () => ({ locale: C, setLocale: L }),
+      [C, L]
+    ), N = j(null);
     q(a, () => N.current, []);
-    const i = T(g);
-    i.current = g;
-    const f = R(
+    const n = j(g);
+    n.current = g;
+    const f = _(
       () => ({
         setLocale: (c) => {
-          u(c) && i.current.setLocale(c);
+          m(c) && n.current.setLocale(c);
         }
       }),
       []
     );
-    return U(Q, f, h), d === "compact" ? /* @__PURE__ */ t(
-      te,
+    return Z(se, f, h), d === "compact" ? /* @__PURE__ */ t(
+      le,
       {
         state: g,
-        rest: L,
+        rest: b,
         forwardedRef: N,
-        className: r,
-        disabled: n,
+        className: o,
+        disabled: r,
         loading: l
       }
     ) : /* @__PURE__ */ t(
-      se,
+      ie,
       {
         state: g,
-        rest: L,
+        rest: b,
         forwardedRef: N,
-        className: r,
-        disabled: n,
+        className: o,
+        disabled: r,
         loading: l
       }
     );
   }
 );
-H.displayName = "LocalePicker";
-const he = Object.assign(H, {
+V.displayName = "LocalePicker";
+const ke = Object.assign(V, {
   SearchList: S
 });
 export {
-  y as L,
-  he as a,
+  k as L,
+  ke as a,
   S as b,
-  P as c
+  w as c
 };
-//# sourceMappingURL=locale-picker-CYBhgSHR.js.map
+//# sourceMappingURL=locale-picker-BxEUUPW7.js.map