@mieweb/ui 0.2.4 → 0.3.0-dev.100

package/dist/chunk-WFS6R2F5.js

@@ -0,0 +1,328 @@
+import { useClickOutside } from './chunk-OKBR6PX4.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import * as libphonenumber from 'google-libphonenumber';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PhoneNumberUtil2 = libphonenumber.default?.PhoneNumberUtil ?? libphonenumber.PhoneNumberUtil;
+var PhoneNumberFormat2 = libphonenumber.default?.PhoneNumberFormat ?? libphonenumber.PhoneNumberFormat;
+function isoToEmoji(code) {
+  return [...code.toUpperCase()].map((c) => String.fromCodePoint(127462 - 65 + c.charCodeAt(0))).join("");
+}
+function buildCountryList() {
+  const phoneUtil = PhoneNumberUtil2.getInstance();
+  const regions = phoneUtil.getSupportedRegions();
+  const list = regions.map((code) => {
+    const callingCode = phoneUtil.getCountryCodeForRegion(code);
+    return {
+      code,
+      name: regionDisplayName(code),
+      dialCode: `+${callingCode}`,
+      flag: isoToEmoji(code)
+    };
+  });
+  list.sort((a, b) => a.name.localeCompare(b.name));
+  return list;
+}
+var _countries = null;
+function getCountries() {
+  if (!_countries) _countries = buildCountryList();
+  return _countries;
+}
+var _regionDisplayNames = null;
+function getRegionDisplayNames() {
+  if (_regionDisplayNames === null) {
+    try {
+      const locales = typeof navigator !== "undefined" && navigator.languages?.length ? [...navigator.languages] : ["en"];
+      _regionDisplayNames = new Intl.DisplayNames(locales, { type: "region" });
+    } catch {
+      return null;
+    }
+  }
+  return _regionDisplayNames;
+}
+function regionDisplayName(code) {
+  const dn = getRegionDisplayNames();
+  if (!dn) return code;
+  return dn.of(code) ?? code;
+}
+function validatePhoneNumber(phoneNumber, countryCode) {
+  try {
+    const phoneUtil = PhoneNumberUtil2.getInstance();
+    const parsed = phoneUtil.parse(phoneNumber, countryCode);
+    return phoneUtil.isValidNumberForRegion(parsed, countryCode);
+  } catch {
+    return false;
+  }
+}
+function formatE164(phoneNumber, countryCode) {
+  try {
+    const phoneUtil = PhoneNumberUtil2.getInstance();
+    const parsed = phoneUtil.parse(phoneNumber, countryCode);
+    return phoneUtil.format(parsed, PhoneNumberFormat2.E164);
+  } catch {
+    return phoneNumber;
+  }
+}
+function CountryCodeDropdown({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  placement = "bottom-start",
+  searchPlaceholder = "Search countries\u2026",
+  "aria-label": ariaLabel = "Select country code"
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [internalValue, setInternalValue] = React.useState(value ?? "US");
+  const containerRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const menuId = React.useId();
+  const isControlled = value !== void 0;
+  const activeValue = isControlled ? value : internalValue;
+  const [countriesLoaded, setCountriesLoaded] = React.useState(false);
+  const countries = React.useMemo(
+    () => countriesLoaded ? getCountries() : [],
+    [countriesLoaded]
+  );
+  React.useEffect(() => {
+    if (isOpen && !countriesLoaded) setCountriesLoaded(true);
+  }, [isOpen, countriesLoaded]);
+  const selected = React.useMemo(() => {
+    if (countries.length) {
+      return countries.find((c) => c.code === activeValue) ?? countries.find((c) => c.code === "US");
+    }
+    return {
+      code: activeValue ?? "US",
+      name: regionDisplayName(activeValue ?? "US"),
+      dialCode: `+${PhoneNumberUtil2.getInstance().getCountryCodeForRegion(activeValue ?? "US")}`,
+      flag: isoToEmoji(activeValue ?? "US")
+    };
+  }, [activeValue, countries]);
+  const filtered = React.useMemo(() => {
+    if (!search) return countries;
+    const q = search.toLowerCase();
+    return countries.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.dialCode.includes(q) || c.code.toLowerCase().includes(q)
+    );
+  }, [search, countries]);
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+    setSearch("");
+  }, []);
+  useClickOutside(containerRef, close);
+  useEscapeKey(close, isOpen);
+  React.useEffect(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen]);
+  const handleToggle = React.useCallback(() => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  }, [disabled]);
+  const handleSelect = React.useCallback(
+    (country) => {
+      if (!isControlled) {
+        setInternalValue(country.code);
+      }
+      onChange?.(country);
+      close();
+    },
+    [isControlled, onChange, close]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (!isOpen) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const items = listRef.current?.querySelectorAll(
+          '[role="option"]'
+        );
+        if (!items?.length) return;
+        const current = document.activeElement;
+        const idx = Array.from(items).indexOf(current);
+        let next;
+        if (e.key === "ArrowDown") {
+          next = idx < items.length - 1 ? idx + 1 : 0;
+        } else {
+          next = idx > 0 ? idx - 1 : items.length - 1;
+        }
+        items[next].focus();
+      }
+    },
+    [isOpen]
+  );
+  const placementClass = placement === "bottom-end" ? "top-full right-0 mt-1" : "top-full left-0 mt-1";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "country-dropdown",
+      className: "relative inline-flex",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-slot": "country-dropdown-trigger",
+            onClick: handleToggle,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? menuId : void 0,
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm",
+              "border-input bg-background text-foreground",
+              "transition-colors duration-200",
+              "hover:bg-neutral-50 dark:hover:bg-neutral-700",
+              "focus:ring-ring focus:ring-2 focus:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "country-dropdown-flag",
+                  className: "text-base leading-none",
+                  "aria-hidden": "true",
+                  children: selected.flag
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "data-slot": "country-dropdown-dialcode", children: selected.dialCode }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-slot": "country-dropdown-chevron",
+                  className: cn(
+                    "h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200",
+                    isOpen && "rotate-180"
+                  ),
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: menuId,
+            role: "listbox",
+            "data-slot": "country-dropdown-panel",
+            "aria-label": ariaLabel,
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            className: cn(
+              "absolute z-50 w-72",
+              "rounded-xl border border-neutral-200 bg-white shadow-lg",
+              "dark:border-neutral-700 dark:bg-neutral-800",
+              "animate-in fade-in zoom-in-95 duration-100",
+              placementClass
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "country-dropdown-search",
+                  className: "border-b border-neutral-200 p-2 dark:border-neutral-700",
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: searchInputRef,
+                      type: "text",
+                      "data-slot": "country-dropdown-search-input",
+                      value: search,
+                      onChange: (e) => setSearch(e.target.value),
+                      placeholder: searchPlaceholder,
+                      "aria-label": "Search countries",
+                      className: cn(
+                        "w-full rounded-lg border border-neutral-200 px-3 py-1.5 text-sm",
+                        "text-foreground placeholder:text-muted-foreground bg-white",
+                        "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
+                        "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  "data-slot": "country-dropdown-list",
+                  className: "max-h-60 overflow-y-auto p-1",
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: "No countries found" }) : filtered.map((country) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "data-slot": "country-dropdown-option",
+                      "aria-selected": country.code === selected.code,
+                      onClick: () => handleSelect(country),
+                      className: cn(
+                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+                        "transition-colors duration-150",
+                        "focus:outline-none",
+                        country.code === selected.code ? "bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-700 dark:text-white" : "text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-700/50",
+                        "focus:bg-neutral-100 dark:focus:bg-neutral-700"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-flag",
+                            className: "text-base leading-none",
+                            "aria-hidden": "true",
+                            children: country.flag
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-name",
+                            className: "flex-1 truncate",
+                            children: country.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-dialcode",
+                            className: "text-muted-foreground shrink-0 text-xs",
+                            children: country.dialCode
+                          }
+                        )
+                      ]
+                    },
+                    country.code
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+CountryCodeDropdown.displayName = "CountryCodeDropdown";
+
+export { CountryCodeDropdown, formatE164, validatePhoneNumber };
+//# sourceMappingURL=chunk-WFS6R2F5.js.map
+//# sourceMappingURL=chunk-WFS6R2F5.js.map

package/dist/chunk-WFS6R2F5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CountryCodeDropdown/CountryCodeDropdown.tsx"],"names":["PhoneNumberUtil","PhoneNumberFormat"],"mappings":"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","file":"chunk-WFS6R2F5.js","sourcesContent":["import * as React from 'react';\nimport * as libphonenumber from 'google-libphonenumber';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\nconst PhoneNumberUtil =\n  (libphonenumber as unknown as { default?: typeof libphonenumber }).default\n    ?.PhoneNumberUtil ?? libphonenumber.PhoneNumberUtil;\nconst PhoneNumberFormat =\n  (libphonenumber as unknown as { default?: typeof libphonenumber }).default\n    ?.PhoneNumberFormat ?? libphonenumber.PhoneNumberFormat;\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CountryData {\n  /** ISO 3166-1 alpha-2 country code (e.g. \"US\") */\n  code: string;\n  /** Country name (e.g. \"United States\") */\n  name: string;\n  /** Dial code (e.g. \"+1\") */\n  dialCode: string;\n  /** Emoji flag (e.g. \"🇺🇸\") */\n  flag: string;\n}\n\nexport interface CountryCodeDropdownProps {\n  /** The currently selected country code (ISO alpha-2, e.g. \"US\") */\n  value?: string;\n  /** Called when a country is selected */\n  onChange?: (country: CountryData) => void;\n  /** Whether the dropdown is disabled */\n  disabled?: boolean;\n  /** Additional class name for the trigger button */\n  className?: string;\n  /** Placement of the dropdown panel */\n  placement?: 'bottom-start' | 'bottom-end';\n  /** Placeholder text for the search field */\n  searchPlaceholder?: string;\n  /** Label for accessibility — visually hidden */\n  'aria-label'?: string;\n}\n\n// =============================================================================\n// Country Data (generated from libphonenumber)\n// =============================================================================\n\n/** Convert an ISO alpha-2 code to an emoji flag. */\nfunction isoToEmoji(code: string): string {\n  return [...code.toUpperCase()]\n    .map((c) => String.fromCodePoint(0x1f1e6 - 65 + c.charCodeAt(0)))\n    .join('');\n}\n\n/** Build the full sorted list of countries from libphonenumber. */\nfunction buildCountryList(): CountryData[] {\n  const phoneUtil = PhoneNumberUtil.getInstance();\n  const regions = phoneUtil.getSupportedRegions() as string[];\n  const list: CountryData[] = regions.map((code: string) => {\n    const callingCode = phoneUtil.getCountryCodeForRegion(code);\n    return {\n      code,\n      name: regionDisplayName(code),\n      dialCode: `+${callingCode}`,\n      flag: isoToEmoji(code),\n    };\n  });\n  list.sort((a, b) => a.name.localeCompare(b.name));\n  return list;\n}\n\n/** Lazy singleton so we only build the list once. */\nlet _countries: CountryData[] | null = null;\nfunction getCountries(): CountryData[] {\n  if (!_countries) _countries = buildCountryList();\n  return _countries;\n}\n\n// =============================================================================\n// Region display name mapping\n// =============================================================================\n\n/** Lazy singleton for Intl.DisplayNames so we only construct it once. */\nlet _regionDisplayNames: Intl.DisplayNames | null = null;\n\nfunction getRegionDisplayNames(): Intl.DisplayNames | null {\n  if (_regionDisplayNames === null) {\n    try {\n      const locales =\n        typeof navigator !== 'undefined' && navigator.languages?.length\n          ? [...navigator.languages]\n          : ['en'];\n      _regionDisplayNames = new Intl.DisplayNames(locales, { type: 'region' });\n    } catch {\n      return null;\n    }\n  }\n  return _regionDisplayNames;\n}\n\n/**\n * Use the browser Intl API for display names where available,\n * falling back to the raw ISO code.\n */\nfunction regionDisplayName(code: string): string {\n  const dn = getRegionDisplayNames();\n  if (!dn) return code;\n  return dn.of(code) ?? code;\n}\n\n// =============================================================================\n// Validation helper (exported for consumers)\n// =============================================================================\n\n/**\n * Validate a phone number string for a given country code using libphonenumber.\n *\n * @param phoneNumber - The phone number (digits, may include formatting)\n * @param countryCode - ISO alpha-2 code (e.g. \"US\")\n * @returns Whether the number is valid for the given region.\n */\nexport function validatePhoneNumber(\n  phoneNumber: string,\n  countryCode: string\n): boolean {\n  try {\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const parsed = phoneUtil.parse(phoneNumber, countryCode);\n    return phoneUtil.isValidNumberForRegion(parsed, countryCode);\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Format a phone number into E.164 international format.\n *\n * @param phoneNumber - The phone number (digits, may include formatting)\n * @param countryCode - ISO alpha-2 code (e.g. \"US\")\n * @returns The formatted number (e.g. \"+15551234567\") or the original string if parsing fails.\n */\nexport function formatE164(phoneNumber: string, countryCode: string): string {\n  try {\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const parsed = phoneUtil.parse(phoneNumber, countryCode);\n    return phoneUtil.format(parsed, PhoneNumberFormat.E164);\n  } catch {\n    return phoneNumber;\n  }\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * A country-code selector dropdown designed to sit beside a phone number input.\n *\n * Defaults to United States (+1) with the 🇺🇸 flag. Clicking the trigger opens\n * a searchable list of all supported countries with their dial codes and flags.\n *\n * Uses Google's libphonenumber for the canonical country/code list and provides\n * a `validatePhoneNumber` helper for phone validation.\n *\n * @example\n * ```tsx\n * const [country, setCountry] = useState<CountryData>();\n *\n * <div className=\"flex gap-2\">\n *   <CountryCodeDropdown value={country?.code} onChange={setCountry} />\n *   <Input placeholder=\"Phone number\" />\n * </div>\n * ```\n */\nfunction CountryCodeDropdown({\n  value,\n  onChange,\n  disabled = false,\n  className,\n  placement = 'bottom-start',\n  searchPlaceholder = 'Search countries…',\n  'aria-label': ariaLabel = 'Select country code',\n}: CountryCodeDropdownProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [search, setSearch] = React.useState('');\n  const [internalValue, setInternalValue] = React.useState(value ?? 'US');\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const menuId = React.useId();\n\n  const isControlled = value !== undefined;\n  const activeValue = isControlled ? value : internalValue;\n\n  // Defer building the full country list until the dropdown is first opened\n  const [countriesLoaded, setCountriesLoaded] = React.useState(false);\n  const countries = React.useMemo(\n    () => (countriesLoaded ? getCountries() : []),\n    [countriesLoaded]\n  );\n\n  React.useEffect(() => {\n    if (isOpen && !countriesLoaded) setCountriesLoaded(true);\n  }, [isOpen, countriesLoaded]);\n\n  const selected = React.useMemo(() => {\n    if (countries.length) {\n      return (\n        countries.find((c) => c.code === activeValue) ??\n        countries.find((c) => c.code === 'US')!\n      );\n    }\n    // Lightweight fallback while list hasn't loaded yet\n    return {\n      code: activeValue ?? 'US',\n      name: regionDisplayName(activeValue ?? 'US'),\n      dialCode: `+${PhoneNumberUtil.getInstance().getCountryCodeForRegion(activeValue ?? 'US')}`,\n      flag: isoToEmoji(activeValue ?? 'US'),\n    };\n  }, [activeValue, countries]);\n\n  const filtered = React.useMemo(() => {\n    if (!search) return countries;\n    const q = search.toLowerCase();\n    return countries.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        c.dialCode.includes(q) ||\n        c.code.toLowerCase().includes(q)\n    );\n  }, [search, countries]);\n\n  // Close helpers\n  const close = React.useCallback(() => {\n    setIsOpen(false);\n    setSearch('');\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  // Focus search input when opening\n  React.useEffect(() => {\n    if (isOpen) {\n      // Defer to let the DOM render\n      requestAnimationFrame(() => searchInputRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleToggle = React.useCallback(() => {\n    if (!disabled) setIsOpen((prev) => !prev);\n  }, [disabled]);\n\n  const handleSelect = React.useCallback(\n    (country: CountryData) => {\n      if (!isControlled) {\n        setInternalValue(country.code);\n      }\n      onChange?.(country);\n      close();\n    },\n    [isControlled, onChange, close]\n  );\n\n  // Keyboard navigation inside the list\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isOpen) return;\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        const items =\n          listRef.current?.querySelectorAll<HTMLButtonElement>(\n            '[role=\"option\"]'\n          );\n        if (!items?.length) return;\n\n        const current = document.activeElement as HTMLElement;\n        const idx = Array.from(items).indexOf(current as HTMLButtonElement);\n        let next: number;\n        if (e.key === 'ArrowDown') {\n          next = idx < items.length - 1 ? idx + 1 : 0;\n        } else {\n          next = idx > 0 ? idx - 1 : items.length - 1;\n        }\n        items[next].focus();\n      }\n    },\n    [isOpen]\n  );\n\n  const placementClass =\n    placement === 'bottom-end'\n      ? 'top-full right-0 mt-1'\n      : 'top-full left-0 mt-1';\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"country-dropdown\"\n      className=\"relative inline-flex\"\n    >\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        data-slot=\"country-dropdown-trigger\"\n        onClick={handleToggle}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? menuId : undefined}\n        className={cn(\n          'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm',\n          'border-input bg-background text-foreground',\n          'transition-colors duration-200',\n          'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n          'focus:ring-ring focus:ring-2 focus:outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n      >\n        <span\n          data-slot=\"country-dropdown-flag\"\n          className=\"text-base leading-none\"\n          aria-hidden=\"true\"\n        >\n          {selected.flag}\n        </span>\n        <span data-slot=\"country-dropdown-dialcode\">{selected.dialCode}</span>\n        <svg\n          data-slot=\"country-dropdown-chevron\"\n          className={cn(\n            'h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200',\n            isOpen && 'rotate-180'\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      </button>\n\n      {/* Dropdown panel */}\n      {isOpen && (\n        <div\n          id={menuId}\n          role=\"listbox\"\n          data-slot=\"country-dropdown-panel\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'absolute z-50 w-72',\n            'rounded-xl border border-neutral-200 bg-white shadow-lg',\n            'dark:border-neutral-700 dark:bg-neutral-800',\n            'animate-in fade-in zoom-in-95 duration-100',\n            placementClass\n          )}\n        >\n          {/* Search input */}\n          <div\n            data-slot=\"country-dropdown-search\"\n            className=\"border-b border-neutral-200 p-2 dark:border-neutral-700\"\n          >\n            <input\n              ref={searchInputRef}\n              type=\"text\"\n              data-slot=\"country-dropdown-search-input\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              placeholder={searchPlaceholder}\n              aria-label=\"Search countries\"\n              className={cn(\n                'w-full rounded-lg border border-neutral-200 px-3 py-1.5 text-sm',\n                'text-foreground placeholder:text-muted-foreground bg-white',\n                'focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none',\n                'dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'\n              )}\n            />\n          </div>\n\n          {/* Country list */}\n          <div\n            ref={listRef}\n            data-slot=\"country-dropdown-list\"\n            className=\"max-h-60 overflow-y-auto p-1\"\n          >\n            {filtered.length === 0 ? (\n              <div className=\"text-muted-foreground px-3 py-4 text-center text-sm\">\n                No countries found\n              </div>\n            ) : (\n              filtered.map((country) => (\n                <button\n                  key={country.code}\n                  type=\"button\"\n                  role=\"option\"\n                  data-slot=\"country-dropdown-option\"\n                  aria-selected={country.code === selected.code}\n                  onClick={() => handleSelect(country)}\n                  className={cn(\n                    'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm',\n                    'transition-colors duration-150',\n                    'focus:outline-none',\n                    country.code === selected.code\n                      ? 'bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-700 dark:text-white'\n                      : 'text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-700/50',\n                    'focus:bg-neutral-100 dark:focus:bg-neutral-700'\n                  )}\n                >\n                  <span\n                    data-slot=\"country-dropdown-option-flag\"\n                    className=\"text-base leading-none\"\n                    aria-hidden=\"true\"\n                  >\n                    {country.flag}\n                  </span>\n                  <span\n                    data-slot=\"country-dropdown-option-name\"\n                    className=\"flex-1 truncate\"\n                  >\n                    {country.name}\n                  </span>\n                  <span\n                    data-slot=\"country-dropdown-option-dialcode\"\n                    className=\"text-muted-foreground shrink-0 text-xs\"\n                  >\n                    {country.dialCode}\n                  </span>\n                </button>\n              ))\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nCountryCodeDropdown.displayName = 'CountryCodeDropdown';\n\nexport { CountryCodeDropdown };\n"]}

package/dist/{chunk-IY7UQPDO.cjs → chunk-WGPMTW36.cjs}

@@ -63,6 +63,7 @@ var Alert = React__namespace.forwardRef(
       {
         ref,
         role: "alert",
+        "data-slot": "alert",
         className: chunkOR5DRJCW_cjs.cn(
           alertVariants({ variant }),
           React__namespace.isValidElement(icon) && "pl-11",
@@ -77,6 +78,7 @@ var Alert = React__namespace.forwardRef(
             "button",
             {
               type: "button",
+              "data-slot": "alert-dismiss",
               onClick: onDismiss,
               className: chunkOR5DRJCW_cjs.cn(
                 "absolute top-2 right-2 rounded-md p-1",
@@ -98,6 +100,7 @@ var AlertTitle = React__namespace.forwardRef(({ className, children, ...props },
   "h5",
   {
     ref,
+    "data-slot": "alert-title",
     className: chunkOR5DRJCW_cjs.cn("mb-1 leading-none font-semibold tracking-tight", className),
     ...props,
     children
@@ -108,6 +111,7 @@ var AlertDescription = React__namespace.forwardRef(({ className, ...props }, ref
   "p",
   {
     ref,
+    "data-slot": "alert-description",
     className: chunkOR5DRJCW_cjs.cn("text-sm [&_p]:leading-relaxed", className),
     ...props
   }
@@ -118,5 +122,5 @@ exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
 exports.alertVariants = alertVariants;
-//# sourceMappingURL=chunk-IY7UQPDO.cjs.map
-//# sourceMappingURL=chunk-IY7UQPDO.cjs.map
+//# sourceMappingURL=chunk-WGPMTW36.cjs.map
+//# sourceMappingURL=chunk-WGPMTW36.cjs.map

package/dist/chunk-WGPMTW36.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":["cva","React","jsxs","cn","jsx","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,aAAA,GAAgBA,0BAAA;AAAA,EACpB;AAAA,IACE,uCAAA;AAAA,IACA,oEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,IAAA,EAAM,qHAAA;AAAA,QACN,OAAA,EACE,yGAAA;AAAA,QACF,OAAA,EACE,+GAAA;AAAA,QACF,MAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AA2BA,IAAM,KAAA,GAAcC,gBAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,GAAe,eAAA;AAAA,IACf,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAWC,oBAAA;AAAA,UACT,aAAA,CAAc,EAAE,OAAA,EAAS,CAAA;AAAA,UACnBF,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,OAAA;AAAA,UAC9B,WAAA,IAAe,OAAA;AAAA,UACf;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAMA,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA;AAAA,0BAC/BG,cAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAAA,UACd,WAAA,oBACCA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,WAAA,EAAU,eAAA;AAAA,cACV,OAAA,EAAS,SAAA;AAAA,cACT,SAAA,EAAWD,oBAAA;AAAA,gBACT,uCAAA;AAAA,gBACA,8BAAA;AAAA,gBACA,qGAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,YAAA;AAAA,cAEZ,QAAA,kBAAAC,cAAA,CAACC,aAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI,eAAY,MAAA,EAAO;AAAA;AAAA;AAClC;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAKpB,IAAM,UAAA,GAAmBJ,4BAGvB,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpCG,cAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,aAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,gDAAA,EAAkD,SAAS,CAAA;AAAA,IACxE,GAAG,KAAA;AAAA,IAEH;AAAA;AACH,CACD;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAKzB,IAAM,gBAAA,GAAyBF,4BAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BG,cAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,mBAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-WGPMTW36.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nconst alertVariants = cva(\n  [\n    'relative w-full rounded-lg border p-4',\n    '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current',\n    '[&>svg+div]:translate-y-[-3px]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        info: 'bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950 dark:text-primary-100 dark:border-primary-800',\n        success:\n          'bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800',\n        warning:\n          'bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800',\n        danger:\n          'bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Icon to display in the alert */\n  icon?: React.ReactElement | null;\n  /** Whether the alert can be dismissed */\n  dismissible?: boolean;\n  /** Callback when the alert is dismissed */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss button */\n  dismissLabel?: string;\n}\n\n/**\n * An alert component for displaying important messages.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\">\n *   <AlertTitle>Success!</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant,\n      icon,\n      dismissible,\n      onDismiss,\n      dismissLabel = 'Dismiss alert',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        className={cn(\n          alertVariants({ variant }),\n          React.isValidElement(icon) && 'pl-11',\n          dismissible && 'pr-10',\n          className\n        )}\n        {...props}\n      >\n        {React.isValidElement(icon) && icon}\n        <div>{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-slot=\"alert-dismiss\"\n            onClick={onDismiss}\n            className={cn(\n              'absolute top-2 right-2 rounded-md p-1',\n              'opacity-70 hover:opacity-100',\n              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n              'transition-opacity'\n            )}\n            aria-label={dismissLabel}\n          >\n            <X size={16} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\n/**\n * Title for an Alert component.\n */\nconst AlertTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  React.HTMLAttributes<globalThis.HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn('mb-1 leading-none font-semibold tracking-tight', className)}\n    {...props}\n  >\n    {children}\n  </h5>\n));\n\nAlertTitle.displayName = 'AlertTitle';\n\n/**\n * Description text for an Alert component.\n */\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\n\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"]}