@babelize/elements 1.1.2 → 1.1.4

package/dist/index.js

@@ -1,21 +1,26 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import * as React3 from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
 
 // src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/registry/components/language-switcher.tsx
+import * as React2 from "react";
+
+// src/lib/use-controllable-state.ts
+import * as React from "react";
 function useControllableState(value, defaultValue, onChange) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React3.useState(defaultValue);
-  const onChangeRef = React3.useRef(onChange);
-  React3.useEffect(() => {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
   const current = isControlled ? value : uncontrolled;
-  const setValue = React3.useCallback(
+  const setValue = React.useCallback(
     (next) => {
       var _a;
       if (!isControlled) setUncontrolled(next);
@@ -25,6 +30,9 @@ function useControllableState(value, defaultValue, onChange) {
   );
   return [current, setValue];
 }
+
+// src/registry/components/language-switcher.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var RTL_LOCALES = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "yi"]);
 function isRtl(code) {
   const lang = code.split("-")[0].toLowerCase();
@@ -225,7 +233,7 @@ function getLabel(code, mode) {
   if (!names) return code;
   return mode === "native" ? names[0] : names[1];
 }
-var LanguageSwitcher = React3.forwardRef(
+var LanguageSwitcher = React2.forwardRef(
   function LanguageSwitcher2({
     locales,
     value,
@@ -242,11 +250,11 @@ var LanguageSwitcher = React3.forwardRef(
       (_b = defaultValue != null ? defaultValue : (_a = locales[0]) == null ? void 0 : _a.code) != null ? _b : "",
       onValueChange
     );
-    const [open, setOpen] = React3.useState(false);
-    const [search, setSearch] = React3.useState("");
-    const ref = React3.useRef(null);
-    const inputRef = React3.useRef(null);
-    React3.useImperativeHandle(forwardedRef, () => ref.current);
+    const [open, setOpen] = React2.useState(false);
+    const [search, setSearch] = React2.useState("");
+    const ref = React2.useRef(null);
+    const inputRef = React2.useRef(null);
+    React2.useImperativeHandle(forwardedRef, () => ref.current);
     const resolveLabel = (l) => {
       var _a2;
       return (_a2 = l.label) != null ? _a2 : getLabel(l.code, labelMode);
@@ -256,7 +264,7 @@ var LanguageSwitcher = React3.forwardRef(
       (l) => resolveLabel(l).toLowerCase().includes(search.toLowerCase()) || l.code.toLowerCase().includes(search.toLowerCase())
     );
     const dir = isRtl(locale) ? "rtl" : "ltr";
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       function handleClickOutside(e) {
         if (ref.current && !ref.current.contains(e.target)) {
           setOpen(false);
@@ -266,11 +274,11 @@ var LanguageSwitcher = React3.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       var _a2;
       if (open) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [open]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       function handleKeyDown(e) {
         if (e.key === "Escape") {
           setOpen(false);
@@ -282,106 +290,118 @@ var LanguageSwitcher = React3.forwardRef(
         return () => document.removeEventListener("keydown", handleKeyDown);
       }
     }, [open]);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-block text-sm z-50", className), ...rest, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen(!open),
-          className: cn(
-            "inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-100 px-3 py-2 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:hover:text-zinc-50",
-            dir === "rtl" && "flex-row-reverse"
-          ),
-          "aria-expanded": open,
-          "aria-haspopup": "listbox",
-          "aria-label": `Current language: ${activeLocale ? resolveLabel(activeLocale) : locale}`,
-          children: [
-            showFlags && /* @__PURE__ */ jsx("span", { className: "text-base", children: (_c = activeLocale == null ? void 0 : activeLocale.flag) != null ? _c : getFlag(locale) }),
-            /* @__PURE__ */ jsx("span", { children: activeLocale ? resolveLabel(activeLocale) : locale }),
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: cn(
-                  "size-4 text-zinc-500 transition-transform dark:text-zinc-400",
-                  open && "rotate-180"
-                ),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-              }
-            )
-          ]
-        }
-      ),
-      open && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "absolute z-50 mt-1 min-w-[200px] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-950",
-          role: "listbox",
-          "aria-label": "Select language",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                placeholder: "Search...",
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                className: "w-full rounded-lg bg-zinc-100 px-3 py-1.5 text-sm text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-1 focus:ring-emerald-500/50 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto p-1", children: [
-              filtered.map((l) => {
-                var _a2;
-                const isActive = l.code === locale;
-                const itemDir = l.rtl || isRtl(l.code) ? "rtl" : "ltr";
-                return /* @__PURE__ */ jsxs(
-                  "button",
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        dir,
+        className: cn("relative inline-block text-sm z-50", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen(!open),
+              className: cn(
+                "inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-100 px-3 py-2 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:hover:text-zinc-50"
+              ),
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-label": `Current language: ${activeLocale ? resolveLabel(activeLocale) : locale}`,
+              children: [
+                showFlags && /* @__PURE__ */ jsx("span", { className: "text-base", children: (_c = activeLocale == null ? void 0 : activeLocale.flag) != null ? _c : getFlag(locale) }),
+                /* @__PURE__ */ jsx("span", { children: activeLocale ? resolveLabel(activeLocale) : locale }),
+                /* @__PURE__ */ jsx(
+                  "svg",
                   {
-                    type: "button",
-                    role: "option",
-                    "aria-selected": isActive,
-                    dir: itemDir,
-                    onClick: () => {
-                      setLocale(l.code);
-                      setOpen(false);
-                      setSearch("");
-                    },
                     className: cn(
-                      "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
-                      itemDir === "rtl" && "flex-row-reverse text-right",
-                      isActive ? "bg-emerald-500/10 text-emerald-600 font-medium dark:text-emerald-400" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+                      "size-4 text-zinc-500 transition-transform dark:text-zinc-400",
+                      open && "rotate-180"
                     ),
-                    children: [
-                      showFlags && /* @__PURE__ */ jsx("span", { className: "text-base", children: (_a2 = l.flag) != null ? _a2 : getFlag(l.code) }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: resolveLabel(l) }),
-                      isActive && /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          className: "size-4 text-emerald-600 dark:text-emerald-400",
-                          fill: "none",
-                          viewBox: "0 0 24 24",
-                          stroke: "currentColor",
-                          strokeWidth: 2,
-                          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
-                        }
-                      )
-                    ]
-                  },
-                  l.code
-                );
-              }),
-              filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No results" })
-            ] })
-          ]
-        }
-      )
-    ] });
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute z-50 mt-1 min-w-[200px] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-950",
+              role: "listbox",
+              "aria-label": "Select language",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    placeholder: "Search...",
+                    "aria-label": "Search languages",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    className: "w-full rounded-lg bg-zinc-100 px-3 py-1.5 text-sm text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-1 focus:ring-emerald-500/50 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+                  filtered.map((l) => {
+                    var _a2;
+                    const isActive = l.code === locale;
+                    const itemDir = l.rtl || isRtl(l.code) ? "rtl" : "ltr";
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        role: "option",
+                        "aria-selected": isActive,
+                        dir: itemDir,
+                        onClick: () => {
+                          setLocale(l.code);
+                          setOpen(false);
+                          setSearch("");
+                        },
+                        className: cn(
+                          "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-sm transition-colors",
+                          isActive ? "bg-emerald-500/10 text-emerald-600 font-medium dark:text-emerald-400" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+                        ),
+                        children: [
+                          showFlags && /* @__PURE__ */ jsx("span", { className: "text-base", children: (_a2 = l.flag) != null ? _a2 : getFlag(l.code) }),
+                          /* @__PURE__ */ jsx("span", { className: "flex-1", children: resolveLabel(l) }),
+                          isActive && /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: "size-4 text-emerald-600 dark:text-emerald-400",
+                              fill: "none",
+                              viewBox: "0 0 24 24",
+                              stroke: "currentColor",
+                              strokeWidth: 2,
+                              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                            }
+                          )
+                        ]
+                      },
+                      l.code
+                    );
+                  }),
+                  filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No results" })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
+
+// src/registry/components/phone-input.tsx
+import * as React3 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var COUNTRIES = [
   { code: "US", dialCode: "+1", name: "United States", flag: "\u{1F1FA}\u{1F1F8}" },
   { code: "GB", dialCode: "+44", name: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" },
@@ -441,30 +461,26 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
   value,
   defaultValue,
   onValueChange,
-  onChange,
   defaultCountry = "US",
   placeholder = "Phone number",
   disabled = false,
   className,
-  showFlags,
-  showFlag,
+  showFlags = true,
   label = "Phone number",
   ...rest
 }, forwardedRef) {
-  var _a;
-  const flagsVisible = (_a = showFlags != null ? showFlags : showFlag) != null ? _a : true;
   const [selectedCountry, setSelectedCountry] = React3.useState(
     () => {
-      var _a2;
-      return (_a2 = getCountryByCode(defaultCountry)) != null ? _a2 : COUNTRIES[0];
+      var _a;
+      return (_a = getCountryByCode(defaultCountry)) != null ? _a : COUNTRIES[0];
     }
   );
-  const notify = onValueChange != null ? onValueChange : onChange;
   const [inputValue, setInputValue] = useControllableState(value, defaultValue != null ? defaultValue : "", void 0);
   const [open, setOpen] = React3.useState(false);
   const [search, setSearch] = React3.useState("");
   const ref = React3.useRef(null);
   const inputRef = React3.useRef(null);
+  const searchRef = React3.useRef(null);
   React3.useImperativeHandle(forwardedRef, () => inputRef.current);
   const filtered = COUNTRIES.filter(
     (c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.dialCode.includes(search) || c.code.toLowerCase().includes(search.toLowerCase())
@@ -480,8 +496,8 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   React3.useEffect(() => {
-    var _a2;
-    if (open) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    var _a;
+    if (open) (_a = searchRef.current) == null ? void 0 : _a.focus();
   }, [open]);
   React3.useEffect(() => {
     function handleKeyDown(e) {
@@ -496,20 +512,20 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
     }
   }, [open]);
   const handleCountrySelect = (country) => {
-    var _a2;
+    var _a;
     setSelectedCountry(country);
     setOpen(false);
     setSearch("");
-    notify == null ? void 0 : notify(inputValue, country);
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    onValueChange == null ? void 0 : onValueChange(inputValue, country);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
   };
   const handleInputChange = (e) => {
     const newValue = e.target.value;
     setInputValue(newValue);
-    notify == null ? void 0 : notify(newValue, selectedCountry);
+    onValueChange == null ? void 0 : onValueChange(newValue, selectedCountry);
   };
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-block text-sm", className), children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative inline-block text-sm", className), children: [
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         className: cn(
@@ -518,7 +534,7 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
           disabled && "opacity-50 cursor-not-allowed"
         ),
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
@@ -533,9 +549,9 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
               "aria-expanded": open,
               "aria-haspopup": "listbox",
               children: [
-                flagsVisible && /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
-                /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: selectedCountry.dialCode }),
-                /* @__PURE__ */ jsx(
+                showFlags && /* @__PURE__ */ jsx2("span", { className: "text-base leading-none", children: selectedCountry.flag }),
+                /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ jsx2(
                   "svg",
                   {
                     className: cn(
@@ -546,13 +562,13 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                    children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "input",
             {
               ref: inputRef,
@@ -574,28 +590,29 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         className: "absolute z-50 mt-1 min-w-[280px] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-950",
         role: "listbox",
         "aria-label": "Select country",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsx2(
             "input",
             {
-              ref: inputRef,
+              ref: searchRef,
               type: "text",
               placeholder: "Search countries...",
+              "aria-label": "Search countries",
               value: search,
               onChange: (e) => setSearch(e.target.value),
               className: "w-full rounded-lg bg-zinc-100 px-3 py-1.5 text-sm text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-1 focus:ring-emerald-500/50 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "max-h-60 overflow-y-auto p-1", children: [
             filtered.map((country) => {
               const isActive = country.code === selectedCountry.code;
-              return /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsxs2(
                 "button",
                 {
                   type: "button",
@@ -607,10 +624,10 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
                     isActive ? "bg-emerald-500/10 text-emerald-600 font-medium dark:text-emerald-400" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: country.flag }),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: country.name }),
-                    /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-zinc-500 dark:text-zinc-400", children: country.dialCode }),
-                    isActive && /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("span", { className: "text-base leading-none", children: country.flag }),
+                    /* @__PURE__ */ jsx2("span", { className: "flex-1", children: country.name }),
+                    /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-zinc-500 dark:text-zinc-400", children: country.dialCode }),
+                    isActive && /* @__PURE__ */ jsx2(
                       "svg",
                       {
                         className: "size-4 text-emerald-600 dark:text-emerald-400",
@@ -618,7 +635,7 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
                         strokeWidth: 2,
-                        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                        children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                       }
                     )
                   ]
@@ -626,13 +643,17 @@ var PhoneInput = React3.forwardRef(function PhoneInput2({
                 country.code
               );
             }),
-            filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No countries found" })
+            filtered.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No countries found" })
           ] })
         ]
       }
     )
   ] });
 });
+
+// src/registry/components/navbar.tsx
+import * as React4 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var LOCALE_MAP = {
   en: { label: "English", flag: "\u{1F1FA}\u{1F1F8}" },
   fr: { label: "Fran\xE7ais", flag: "\u{1F1EB}\u{1F1F7}" },
@@ -683,15 +704,13 @@ function getLocaleInfo(code) {
   var _a;
   return (_a = LOCALE_MAP[code]) != null ? _a : { label: code.toUpperCase(), flag: "\u{1F310}" };
 }
-var NavBar = React3.forwardRef(function NavBar2({
+var NavBar = React4.forwardRef(function NavBar2({
   logo,
   links = [],
   locales = [],
   value,
   defaultValue,
   onValueChange,
-  currentLocale,
-  onLocaleChange,
   cta,
   showGitHub = false,
   githubUrl = "https://github.com/babelize/babelize-elements",
@@ -701,75 +720,85 @@ var NavBar = React3.forwardRef(function NavBar2({
   linkComponent: Link = "a",
   ...rest
 }, forwardedRef) {
+  var _a, _b;
   const [locale, setLocale] = useControllableState(
-    value != null ? value : currentLocale,
-    defaultValue != null ? defaultValue : "en",
-    onValueChange != null ? onValueChange : onLocaleChange
+    value,
+    (_b = defaultValue != null ? defaultValue : (_a = locales[0]) == null ? void 0 : _a.code) != null ? _b : "en",
+    onValueChange
   );
-  const [mobileOpen, setMobileOpen] = React3.useState(false);
-  const [langOpen, setLangOpen] = React3.useState(false);
-  const langRef = React3.useRef(null);
-  const mobileLangRef = React3.useRef(null);
+  const [mobileOpen, setMobileOpen] = React4.useState(false);
+  const [langOpen, setLangOpen] = React4.useState(null);
+  const langRef = React4.useRef(null);
+  const mobileLangRef = React4.useRef(null);
+  const menuId = React4.useId();
   const currentLocaleInfo = getLocaleInfo(locale);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     function handleClickOutside(e) {
-      if (langRef.current && !langRef.current.contains(e.target)) {
-        setLangOpen(false);
-      }
+      var _a2, _b2;
+      const target = e.target;
+      if (((_a2 = langRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = mobileLangRef.current) == null ? void 0 : _b2.contains(target))) return;
+      setLangOpen(null);
     }
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  React3.useEffect(() => {
-    if (mobileOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
+  React4.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key !== "Escape") return;
+      setLangOpen(null);
+      setMobileOpen(false);
     }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  React4.useEffect(() => {
+    if (!mobileOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = "";
+      document.body.style.overflow = previous;
     };
   }, [mobileOpen]);
-  const langButton = /* @__PURE__ */ jsxs(
+  const langButton = /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
-      onClick: () => setLangOpen(!langOpen),
+      onClick: () => setLangOpen(langOpen === "desktop" ? null : "desktop"),
       className: "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
-      "aria-expanded": langOpen,
+      "aria-expanded": langOpen === "desktop",
       "aria-haspopup": "listbox",
       "aria-label": `Current language: ${currentLocaleInfo.label}`,
       children: [
-        showFlags && /* @__PURE__ */ jsx("span", { className: "text-sm leading-none", children: currentLocaleInfo.flag }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: currentLocaleInfo.label }),
-        /* @__PURE__ */ jsx(
+        showFlags && /* @__PURE__ */ jsx3("span", { className: "text-sm leading-none", children: currentLocaleInfo.flag }),
+        /* @__PURE__ */ jsx3("span", { className: "hidden sm:inline", children: currentLocaleInfo.label }),
+        /* @__PURE__ */ jsx3(
           "svg",
           {
             className: cn(
               "size-3 text-zinc-500 transition-transform dark:text-zinc-400",
-              langOpen && "rotate-180"
+              langOpen === "desktop" && "rotate-180"
             ),
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
             strokeWidth: 2,
-            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
           }
         )
       ]
     }
   );
-  const langDropdown = /* @__PURE__ */ jsx(
+  const langDropdown = /* @__PURE__ */ jsx3(
     "div",
     {
       className: "absolute right-0 top-full z-50 mt-1.5 min-w-[170px] rounded-xl border border-zinc-200 bg-white py-1.5 shadow-xl dark:border-zinc-800 dark:bg-zinc-950",
       role: "listbox",
       "aria-label": "Select language",
       children: locales.map((item) => {
-        var _a;
+        var _a2;
         const info = getLocaleInfo(item.code);
         const isActive = item.code === locale;
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -777,16 +806,16 @@ var NavBar = React3.forwardRef(function NavBar2({
             "aria-selected": isActive,
             onClick: () => {
               setLocale(item.code);
-              setLangOpen(false);
+              setLangOpen(null);
             },
             className: cn(
-              "flex w-full items-center gap-2.5 px-3 py-2 text-sm rounded-lg mx-1.5 w-[calc(100%-12px)] transition-colors",
+              "mx-1.5 flex w-[calc(100%-12px)] items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors",
               isActive ? "bg-emerald-500/10 text-emerald-600 font-medium dark:text-emerald-400" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
             ),
             children: [
-              showFlags && /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: info.flag }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: (_a = item.label) != null ? _a : info.label }),
-              isActive && /* @__PURE__ */ jsx(
+              showFlags && /* @__PURE__ */ jsx3("span", { className: "text-base leading-none", children: info.flag }),
+              /* @__PURE__ */ jsx3("span", { className: "flex-1", children: (_a2 = item.label) != null ? _a2 : info.label }),
+              isActive && /* @__PURE__ */ jsx3(
                 "svg",
                 {
                   className: "size-4 shrink-0 text-emerald-600 dark:text-emerald-400",
@@ -794,7 +823,7 @@ var NavBar = React3.forwardRef(function NavBar2({
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
                   strokeWidth: 2.5,
-                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                  children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                 }
               )
             ]
@@ -804,7 +833,7 @@ var NavBar = React3.forwardRef(function NavBar2({
       })
     }
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "nav",
     {
       ref: forwardedRef,
@@ -815,9 +844,9 @@ var NavBar = React3.forwardRef(function NavBar2({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto hidden max-w-6xl items-center justify-between px-5 py-3 md:flex", children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: links.map((link) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs3("div", { className: "mx-auto hidden max-w-6xl items-center justify-between px-5 py-3 md:flex", children: [
+          logo && /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1", children: links.map((link) => /* @__PURE__ */ jsx3(
             Link,
             {
               href: link.href,
@@ -826,12 +855,12 @@ var NavBar = React3.forwardRef(function NavBar2({
             },
             link.href
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            locales.length > 0 && /* @__PURE__ */ jsxs("div", { ref: langRef, className: "relative", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+            locales.length > 0 && /* @__PURE__ */ jsxs3("div", { ref: langRef, className: "relative", children: [
               langButton,
-              langOpen && langDropdown
+              langOpen === "desktop" && langDropdown
             ] }),
-            showGitHub && /* @__PURE__ */ jsx(
+            showGitHub && /* @__PURE__ */ jsx3(
               "a",
               {
                 href: githubUrl,
@@ -839,10 +868,10 @@ var NavBar = React3.forwardRef(function NavBar2({
                 rel: "noopener noreferrer",
                 className: "inline-flex size-8 items-center justify-center rounded-md transition-colors no-underline text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
                 "aria-label": "GitHub",
-                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" }) })
+                children: /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" }) })
               }
             ),
-            cta && /* @__PURE__ */ jsx(
+            cta && /* @__PURE__ */ jsx3(
               Link,
               {
                 href: cta.href,
@@ -852,29 +881,34 @@ var NavBar = React3.forwardRef(function NavBar2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 md:hidden", children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            locales.length > 0 && /* @__PURE__ */ jsxs("div", { ref: mobileLangRef, className: "relative", children: [
-              /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-4 py-3 md:hidden", children: [
+          logo && /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+            locales.length > 0 && /* @__PURE__ */ jsxs3("div", { ref: mobileLangRef, className: "relative", children: [
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
-                  onClick: () => setLangOpen(!langOpen),
+                  onClick: () => setLangOpen(langOpen === "mobile" ? null : "mobile"),
                   className: "inline-flex size-8 items-center justify-center rounded-md transition-colors text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
+                  "aria-expanded": langOpen === "mobile",
+                  "aria-haspopup": "listbox",
                   "aria-label": `Current language: ${currentLocaleInfo.label}`,
-                  children: showFlags && /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: currentLocaleInfo.flag })
+                  children: showFlags && /* @__PURE__ */ jsx3("span", { className: "text-base leading-none", children: currentLocaleInfo.flag })
                 }
               ),
-              langOpen && langDropdown
+              langOpen === "mobile" && langDropdown
             ] }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx3(
               "button",
               {
+                type: "button",
                 className: "inline-flex size-8 items-center justify-center rounded-md transition-colors text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
                 onClick: () => setMobileOpen(!mobileOpen),
                 "aria-label": "Toggle menu",
-                children: mobileOpen ? /* @__PURE__ */ jsx(
+                "aria-expanded": mobileOpen,
+                "aria-controls": mobileOpen ? menuId : void 0,
+                children: mobileOpen ? /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     className: "size-4",
@@ -882,9 +916,9 @@ var NavBar = React3.forwardRef(function NavBar2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                    children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
                   }
-                ) : /* @__PURE__ */ jsx(
+                ) : /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     className: "size-4",
@@ -892,39 +926,50 @@ var NavBar = React3.forwardRef(function NavBar2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" })
+                    children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" })
                   }
                 )
               }
             )
           ] })
         ] }),
-        mobileOpen && /* @__PURE__ */ jsxs("div", { className: "border-t border-zinc-200 bg-white px-4 py-3 md:hidden dark:border-zinc-800 dark:bg-zinc-900", children: [
-          links.map((link) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              href: link.href,
-              onClick: () => setMobileOpen(false),
-              className: "block py-2.5 text-sm transition-colors no-underline text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
-              children: link.label
-            },
-            link.href
-          )),
-          cta && /* @__PURE__ */ jsx(
-            Link,
-            {
-              href: cta.href,
-              onClick: () => setMobileOpen(false),
-              className: "mt-2 block rounded-md px-3.5 py-2 text-center text-sm font-medium transition-colors no-underline bg-emerald-500 text-white hover:opacity-90",
-              children: cta.label
-            }
-          )
-        ] })
+        mobileOpen && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            id: menuId,
+            className: "border-t border-zinc-200 bg-white px-4 py-3 md:hidden dark:border-zinc-800 dark:bg-zinc-900",
+            children: [
+              links.map((link) => /* @__PURE__ */ jsx3(
+                Link,
+                {
+                  href: link.href,
+                  onClick: () => setMobileOpen(false),
+                  className: "block py-2.5 text-sm transition-colors no-underline text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50",
+                  children: link.label
+                },
+                link.href
+              )),
+              cta && /* @__PURE__ */ jsx3(
+                Link,
+                {
+                  href: cta.href,
+                  onClick: () => setMobileOpen(false),
+                  className: "mt-2 block rounded-md px-3.5 py-2 text-center text-sm font-medium transition-colors no-underline bg-emerald-500 text-white hover:opacity-90",
+                  children: cta.label
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 });
-
-export { COUNTRIES, LanguageSwitcher, NavBar, PhoneInput, cn };
-//# sourceMappingURL=index.js.map
+export {
+  COUNTRIES,
+  LanguageSwitcher,
+  NavBar,
+  PhoneInput,
+  cn
+};
 //# sourceMappingURL=index.js.map