@babelize/elements 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -1,43 +1,65 @@
-'use strict';
-
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var React3 = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  n.default = e;
-  return Object.freeze(n);
-}
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+// src/registry/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  COUNTRIES: () => COUNTRIES,
+  LanguageSwitcher: () => LanguageSwitcher,
+  NavBar: () => NavBar,
+  PhoneInput: () => PhoneInput,
+  cn: () => cn
+});
+module.exports = __toCommonJS(components_exports);
 
 // src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
+
+// src/registry/components/language-switcher.tsx
+var React2 = __toESM(require("react"), 1);
+
+// src/lib/use-controllable-state.ts
+var React = __toESM(require("react"), 1);
 function useControllableState(value, defaultValue, onChange) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React3__namespace.useState(defaultValue);
-  const onChangeRef = React3__namespace.useRef(onChange);
-  React3__namespace.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__namespace.useCallback(
+  const setValue = React.useCallback(
     (next) => {
       var _a;
       if (!isControlled) setUncontrolled(next);
@@ -47,6 +69,9 @@ function useControllableState(value, defaultValue, onChange) {
   );
   return [current, setValue];
 }
+
+// src/registry/components/language-switcher.tsx
+var import_jsx_runtime = require("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();
@@ -247,7 +272,7 @@ function getLabel(code, mode) {
   if (!names) return code;
   return mode === "native" ? names[0] : names[1];
 }
-var LanguageSwitcher = React3__namespace.forwardRef(
+var LanguageSwitcher = React2.forwardRef(
   function LanguageSwitcher2({
     locales,
     value,
@@ -264,11 +289,11 @@ var LanguageSwitcher = React3__namespace.forwardRef(
       (_b = defaultValue != null ? defaultValue : (_a = locales[0]) == null ? void 0 : _a.code) != null ? _b : "",
       onValueChange
     );
-    const [open, setOpen] = React3__namespace.useState(false);
-    const [search, setSearch] = React3__namespace.useState("");
-    const ref = React3__namespace.useRef(null);
-    const inputRef = React3__namespace.useRef(null);
-    React3__namespace.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);
@@ -278,7 +303,7 @@ var LanguageSwitcher = React3__namespace.forwardRef(
       (l) => resolveLabel(l).toLowerCase().includes(search.toLowerCase()) || l.code.toLowerCase().includes(search.toLowerCase())
     );
     const dir = isRtl(locale) ? "rtl" : "ltr";
-    React3__namespace.useEffect(() => {
+    React2.useEffect(() => {
       function handleClickOutside(e) {
         if (ref.current && !ref.current.contains(e.target)) {
           setOpen(false);
@@ -288,11 +313,11 @@ var LanguageSwitcher = React3__namespace.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    React3__namespace.useEffect(() => {
+    React2.useEffect(() => {
       var _a2;
       if (open) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [open]);
-    React3__namespace.useEffect(() => {
+    React2.useEffect(() => {
       function handleKeyDown(e) {
         if (e.key === "Escape") {
           setOpen(false);
@@ -304,8 +329,8 @@ var LanguageSwitcher = React3__namespace.forwardRef(
         return () => document.removeEventListener("keydown", handleKeyDown);
       }
     }, [open]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative inline-block text-sm z-50", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: cn("relative inline-block text-sm z-50", className), ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "button",
         {
           type: "button",
@@ -318,9 +343,9 @@ var LanguageSwitcher = React3__namespace.forwardRef(
           "aria-haspopup": "listbox",
           "aria-label": `Current language: ${activeLocale ? resolveLabel(activeLocale) : locale}`,
           children: [
-            showFlags && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: (_c = activeLocale == null ? void 0 : activeLocale.flag) != null ? _c : getFlag(locale) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeLocale ? resolveLabel(activeLocale) : locale }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showFlags && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-base", children: (_c = activeLocale == null ? void 0 : activeLocale.flag) != null ? _c : getFlag(locale) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: activeLocale ? resolveLabel(activeLocale) : locale }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "svg",
               {
                 className: cn(
@@ -331,36 +356,37 @@ var LanguageSwitcher = React3__namespace.forwardRef(
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 strokeWidth: 2,
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
               }
             )
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxRuntime.jsxs(
+      open && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ jsxRuntime.jsx("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ jsxRuntime.jsxs("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ jsxRuntime.jsxs(
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -378,9 +404,9 @@ var LanguageSwitcher = React3__namespace.forwardRef(
                       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__ */ jsxRuntime.jsx("span", { className: "text-base", children: (_a2 = l.flag) != null ? _a2 : getFlag(l.code) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: resolveLabel(l) }),
-                      isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                      showFlags && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-base", children: (_a2 = l.flag) != null ? _a2 : getFlag(l.code) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1", children: resolveLabel(l) }),
+                      isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "svg",
                         {
                           className: "size-4 text-emerald-600 dark:text-emerald-400",
@@ -388,7 +414,7 @@ var LanguageSwitcher = React3__namespace.forwardRef(
                           viewBox: "0 0 24 24",
                           stroke: "currentColor",
                           strokeWidth: 2,
-                          children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                         }
                       )
                     ]
@@ -396,7 +422,7 @@ var LanguageSwitcher = React3__namespace.forwardRef(
                   l.code
                 );
               }),
-              filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No results" })
+              filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No results" })
             ] })
           ]
         }
@@ -404,6 +430,10 @@ var LanguageSwitcher = React3__namespace.forwardRef(
     ] });
   }
 );
+
+// src/registry/components/phone-input.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("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}" },
@@ -459,39 +489,35 @@ var COUNTRIES = [
 function getCountryByCode(code) {
   return COUNTRIES.find((c) => c.code === code.toUpperCase());
 }
-var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
+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__namespace.useState(
+  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__namespace.useState(false);
-  const [search, setSearch] = React3__namespace.useState("");
-  const ref = React3__namespace.useRef(null);
-  const inputRef = React3__namespace.useRef(null);
-  React3__namespace.useImperativeHandle(forwardedRef, () => inputRef.current);
+  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())
   );
-  React3__namespace.useEffect(() => {
+  React3.useEffect(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -501,11 +527,11 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  React3__namespace.useEffect(() => {
-    var _a2;
-    if (open) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  React3.useEffect(() => {
+    var _a;
+    if (open) (_a = searchRef.current) == null ? void 0 : _a.focus();
   }, [open]);
-  React3__namespace.useEffect(() => {
+  React3.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key === "Escape") {
         setOpen(false);
@@ -518,20 +544,20 @@ var PhoneInput = React3__namespace.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__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative inline-block text-sm", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: cn("relative inline-block text-sm", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         className: cn(
@@ -540,7 +566,7 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
           disabled && "opacity-50 cursor-not-allowed"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "button",
             {
               type: "button",
@@ -555,9 +581,9 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
               "aria-expanded": open,
               "aria-haspopup": "listbox",
               children: [
-                flagsVisible && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs", children: selectedCountry.dialCode }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showFlags && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-base leading-none", children: selectedCountry.flag }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono text-xs", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "svg",
                   {
                     className: cn(
@@ -568,13 +594,13 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "input",
             {
               ref: inputRef,
@@ -596,28 +622,29 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "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__ */ jsxRuntime.jsx("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "border-b border-zinc-200 p-2 dark:border-zinc-800", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "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__ */ jsxRuntime.jsxs("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "max-h-60 overflow-y-auto p-1", children: [
             filtered.map((country) => {
               const isActive = country.code === selectedCountry.code;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -629,10 +656,10 @@ var PhoneInput = React3__namespace.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__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: country.flag }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: country.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-zinc-500 dark:text-zinc-400", children: country.dialCode }),
-                    isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-base leading-none", children: country.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1", children: country.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono text-xs text-zinc-500 dark:text-zinc-400", children: country.dialCode }),
+                    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "svg",
                       {
                         className: "size-4 text-emerald-600 dark:text-emerald-400",
@@ -640,7 +667,7 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
                         strokeWidth: 2,
-                        children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                       }
                     )
                   ]
@@ -648,13 +675,17 @@ var PhoneInput = React3__namespace.forwardRef(function PhoneInput2({
                 country.code
               );
             }),
-            filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No countries found" })
+            filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400", children: "No countries found" })
           ] })
         ]
       }
     )
   ] });
 });
+
+// src/registry/components/navbar.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var LOCALE_MAP = {
   en: { label: "English", flag: "\u{1F1FA}\u{1F1F8}" },
   fr: { label: "Fran\xE7ais", flag: "\u{1F1EB}\u{1F1F7}" },
@@ -705,15 +736,13 @@ function getLocaleInfo(code) {
   var _a;
   return (_a = LOCALE_MAP[code]) != null ? _a : { label: code.toUpperCase(), flag: "\u{1F310}" };
 }
-var NavBar = React3__namespace.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",
@@ -723,75 +752,85 @@ var NavBar = React3__namespace.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__namespace.useState(false);
-  const [langOpen, setLangOpen] = React3__namespace.useState(false);
-  const langRef = React3__namespace.useRef(null);
-  const mobileLangRef = React3__namespace.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__namespace.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__namespace.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__ */ jsxRuntime.jsxs(
+  const langButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "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__ */ jsxRuntime.jsx("span", { className: "text-sm leading-none", children: currentLocaleInfo.flag }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: currentLocaleInfo.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        showFlags && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm leading-none", children: currentLocaleInfo.flag }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hidden sm:inline", children: currentLocaleInfo.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
           }
         )
       ]
     }
   );
-  const langDropdown = /* @__PURE__ */ jsxRuntime.jsx(
+  const langDropdown = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "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__ */ jsxRuntime.jsxs(
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "button",
           {
             type: "button",
@@ -799,16 +838,16 @@ var NavBar = React3__namespace.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__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: info.flag }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: (_a = item.label) != null ? _a : info.label }),
-              isActive && /* @__PURE__ */ jsxRuntime.jsx(
+              showFlags && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-base leading-none", children: info.flag }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1", children: (_a2 = item.label) != null ? _a2 : info.label }),
+              isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "svg",
                 {
                   className: "size-4 shrink-0 text-emerald-600 dark:text-emerald-400",
@@ -816,7 +855,7 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
                   strokeWidth: 2.5,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                 }
               )
             ]
@@ -826,7 +865,7 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
       })
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "nav",
     {
       ref: forwardedRef,
@@ -837,9 +876,9 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto hidden max-w-6xl items-center justify-between px-5 py-3 md:flex", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-auto hidden max-w-6xl items-center justify-between px-5 py-3 md:flex", children: [
+          logo && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-1", children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Link,
             {
               href: link.href,
@@ -848,12 +887,12 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
             },
             link.href
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            locales.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: langRef, className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
+            locales.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: langRef, className: "relative", children: [
               langButton,
-              langOpen && langDropdown
+              langOpen === "desktop" && langDropdown
             ] }),
-            showGitHub && /* @__PURE__ */ jsxRuntime.jsx(
+            showGitHub && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "a",
               {
                 href: githubUrl,
@@ -861,10 +900,10 @@ var NavBar = React3__namespace.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__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.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" }) })
               }
             ),
-            cta && /* @__PURE__ */ jsxRuntime.jsx(
+            cta && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               Link,
               {
                 href: cta.href,
@@ -874,29 +913,34 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 md:hidden", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            locales.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: mobileLangRef, className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 md:hidden", children: [
+          logo && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
+            locales.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: mobileLangRef, className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "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__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: currentLocaleInfo.flag })
+                  children: showFlags && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-base leading-none", children: currentLocaleInfo.flag })
                 }
               ),
-              langOpen && langDropdown
+              langOpen === "mobile" && langDropdown
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "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__ */ jsxRuntime.jsx(
+                "aria-expanded": mobileOpen,
+                "aria-controls": mobileOpen ? menuId : void 0,
+                children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "svg",
                   {
                     className: "size-4",
@@ -904,9 +948,9 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "svg",
                   {
                     className: "size-4",
@@ -914,43 +958,51 @@ var NavBar = React3__namespace.forwardRef(function NavBar2({
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     strokeWidth: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" })
                   }
                 )
               }
             )
           ] })
         ] }),
-        mobileOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ (0, import_jsx_runtime3.jsxs)(
+          "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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 });
-
-exports.COUNTRIES = COUNTRIES;
-exports.LanguageSwitcher = LanguageSwitcher;
-exports.NavBar = NavBar;
-exports.PhoneInput = PhoneInput;
-exports.cn = cn;
-//# sourceMappingURL=index.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COUNTRIES,
+  LanguageSwitcher,
+  NavBar,
+  PhoneInput,
+  cn
+});
 //# sourceMappingURL=index.cjs.map