@traky-app/ui 1.6.1 → 1.6.4

package/registry/traky/ui/phone-number-input.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { useEffect, useMemo, useState } from "react"
+
+import {
+  DEFAULT_PHONE_COUNTRY_ISO,
+  getPhoneCountryByIso,
+  PHONE_COUNTRIES,
+  type PhoneCountry,
+} from "@/lib/phone-countries"
+import {
+  buildPhoneE164,
+  digitsOnly,
+  isNationalNumberValidForCountry,
+  parsePhoneE164,
+  type ParsedPhone,
+} from "@/lib/phone-e164"
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { Input } from "@/components/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export type PhoneNumberValue = {
+  countryCode: string
+  countryName: string
+  dialCode: string
+  nationalNumber: string
+  e164: string
+  isValid: boolean
+}
+
+function sanitizeNational(country: PhoneCountry, raw: string): string {
+  let digits = digitsOnly(raw)
+  if (country.iso === "EC" && digits.startsWith("0")) {
+    digits = digits.slice(1)
+  }
+  return digits.slice(0, country.nationalMaxLength)
+}
+
+/** Acepta E.164 o dígitos nacionales (usa `defaultCountryIso` si no hay `+`). */
+function parseIncomingPhone(
+  raw: string,
+  defaultCountryIso: string,
+): ParsedPhone | null {
+  const trimmed = raw.trim()
+  if (!trimmed) {
+    return parsePhoneE164("", defaultCountryIso)
+  }
+  if (trimmed.startsWith("+") || trimmed.startsWith("00")) {
+    return parsePhoneE164(trimmed, defaultCountryIso)
+  }
+
+  const country =
+    getPhoneCountryByIso(defaultCountryIso) ??
+    getPhoneCountryByIso(DEFAULT_PHONE_COUNTRY_ISO)
+  if (!country) return null
+
+  const nationalNumber = sanitizeNational(country, trimmed)
+  return {
+    country,
+    nationalNumber,
+    e164: buildPhoneE164(country, nationalNumber),
+  }
+}
+
+function CountryFlag({ iso, name }: { iso: string; name: string }) {
+  const [visible, setVisible] = useState(true)
+  if (!visible || !iso) return null
+
+  return (
+    <img
+      src={`/assets/flags/${iso.toUpperCase()}.svg`}
+      alt=""
+      title={name}
+      width={22}
+      height={14}
+      className="h-[14px] w-[22px] shrink-0 rounded object-cover"
+      onError={() => setVisible(false)}
+    />
+  )
+}
+
+function toPhoneValue(
+  country: PhoneCountry,
+  nationalNumber: string,
+): PhoneNumberValue {
+  const digits = digitsOnly(nationalNumber)
+  return {
+    countryCode: country.iso,
+    countryName: country.name,
+    dialCode: country.dialCode,
+    nationalNumber: digits,
+    e164: buildPhoneE164(country, digits),
+    isValid: isNationalNumberValidForCountry(country, digits),
+  }
+}
+
+export type PhoneNumberInputProps = {
+  id?: string
+  /** Valor controlado en E.164 (`+593980061377`). */
+  value?: string
+  defaultCountryIso?: string
+  onChange?: (value: PhoneNumberValue) => void
+  disabled?: boolean
+  className?: string
+  placeholder?: string
+  searchPlaceholder?: string
+}
+
+export function PhoneNumberInput({
+  id,
+  value,
+  defaultCountryIso = DEFAULT_PHONE_COUNTRY_ISO,
+  onChange,
+  disabled = false,
+  className,
+  placeholder,
+  searchPlaceholder = "Buscar país…",
+}: PhoneNumberInputProps) {
+  const [open, setOpen] = useState(false)
+  const [countryIso, setCountryIso] = useState(() => {
+    const parsed = parseIncomingPhone(value ?? "", defaultCountryIso)
+    return parsed?.country.iso ?? defaultCountryIso
+  })
+  const [national, setNational] = useState(() => {
+    const parsed = parseIncomingPhone(value ?? "", defaultCountryIso)
+    return parsed?.nationalNumber ?? ""
+  })
+
+  const country = useMemo(
+    () =>
+      PHONE_COUNTRIES.find((c) => c.iso === countryIso) ??
+      PHONE_COUNTRIES.find((c) => c.iso === DEFAULT_PHONE_COUNTRY_ISO)!,
+    [countryIso],
+  )
+
+  useEffect(() => {
+    if (value == null) return
+    if (value === "") {
+      setNational("")
+      return
+    }
+    const parsed = parseIncomingPhone(value, defaultCountryIso)
+    if (!parsed) return
+    setCountryIso(parsed.country.iso)
+    setNational(parsed.nationalNumber)
+  }, [value, defaultCountryIso])
+
+  const emit = (nextCountry: PhoneCountry, nextNational: string) => {
+    const digits = sanitizeNational(nextCountry, nextNational)
+    setCountryIso(nextCountry.iso)
+    setNational(digits)
+    onChange?.(toPhoneValue(nextCountry, digits))
+  }
+
+  const resolvedPlaceholder =
+    placeholder ??
+    (country.nationalMinLength === country.nationalMaxLength
+      ? "9".repeat(country.nationalMaxLength)
+      : `${country.nationalMinLength}-${country.nationalMaxLength} dígitos`)
+
+  const isValid = isNationalNumberValidForCountry(country, national)
+
+  return (
+    <div className={cn("flex w-full items-stretch gap-2", className)}>
+      <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            role="combobox"
+            aria-expanded={open}
+            aria-label={`País: ${country.name} ${country.dialCode}`}
+            className="h-10 w-[7.75rem] shrink-0 justify-between gap-1.5 px-2.5 font-normal"
+          >
+            <span className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+              <CountryFlag iso={country.iso} name={country.name} />
+              <span className="truncate text-sm tabular-nums">
+                {country.dialCode}
+              </span>
+            </span>
+            <IconSelector className="size-3.5 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[min(100vw-2rem,18rem)] p-0" align="start">
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList className="max-h-72">
+              <CommandEmpty>No se encontró el país.</CommandEmpty>
+              <CommandGroup heading={`${PHONE_COUNTRIES.length} países`}>
+                {PHONE_COUNTRIES.map((item) => (
+                  <CommandItem
+                    key={item.iso}
+                    value={`${item.name} ${item.iso} ${item.dialCode}`}
+                    onSelect={() => {
+                      setOpen(false)
+                      emit(item, national)
+                    }}
+                    className="gap-2"
+                  >
+                    <CountryFlag iso={item.iso} name={item.name} />
+                    <span className="min-w-0 flex-1 truncate">{item.name}</span>
+                    <span className="text-xs tabular-nums text-muted-foreground">
+                      {item.dialCode}
+                    </span>
+                    {country.iso === item.iso ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <Input
+        id={id}
+        type="tel"
+        inputMode="numeric"
+        autoComplete="tel-national"
+        disabled={disabled}
+        value={national}
+        maxLength={country.nationalMaxLength}
+        placeholder={resolvedPlaceholder}
+        aria-invalid={national.length > 0 && !isValid}
+        className="h-10 flex-1"
+        onChange={(e) => emit(country, e.target.value)}
+      />
+    </div>
+  )
+}
+
+export function formatPhoneHint(country: PhoneCountry): string {
+  if (country.nationalMinLength === country.nationalMaxLength) {
+    return `Ingresa ${country.nationalMaxLength} dígitos después de ${country.dialCode}`
+  }
+  return `Ingresa entre ${country.nationalMinLength} y ${country.nationalMaxLength} dígitos después de ${country.dialCode}`
+}

package/registry/traky/ui/state-select.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchStates } from "@/lib/geo-locations";
+import type { GeoOption } from "@/lib/geo-types";
+import { GeoSearchSelect } from "@/components/ui/geo-search-select";
+
+export type StateSelectProps = {
+  id?: string;
+  /** ISO-2 del país. Sin este código el selector queda inactivo. */
+  countryCode?: string | null;
+  /** Código o nombre controlado. `undefined` deja el selector sin controlar; `""` lo deja vacío. */
+  value?: string;
+  /** Código o nombre inicial cuando `value` no se pasa. */
+  defaultValue?: string;
+  onChange?: (option: GeoOption | null) => void;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  showCode?: boolean;
+};
+
+export function StateSelect({
+  id,
+  countryCode,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  className,
+  placeholder = "Buscar estado, región o municipio…",
+  showCode = true,
+}: StateSelectProps) {
+  const cc = countryCode?.trim().toUpperCase() ?? "";
+  const isControlled = value !== undefined;
+  const [options, setOptions] = useState<GeoOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const onChangeRef = useRef(onChange);
+  const controlledRef = useRef(isControlled);
+  const selectionRef = useRef("");
+  const prevCc = useRef(cc);
+
+  onChangeRef.current = onChange;
+  controlledRef.current = isControlled;
+  selectionRef.current = (isControlled ? value : internal) ?? "";
+
+  useEffect(() => {
+    const previous = prevCc.current;
+    if (previous === cc) return;
+    prevCc.current = cc;
+    if (!previous) return;
+    if (!controlledRef.current) setInternal("");
+    if (selectionRef.current) onChangeRef.current?.(null);
+  }, [cc]);
+
+  useEffect(() => {
+    if (!cc) {
+      setOptions([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setOptions([]);
+    setIsLoading(true);
+    void fetchStates(cc)
+      .then((list) => {
+        if (!cancelled) setOptions(list);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cc]);
+
+  const current = isControlled ? (value ?? "") : internal;
+  const selected = useMemo(() => {
+    if (!current) return undefined;
+    return options.find(
+      (option) => option.code === current || option.name === current,
+    );
+  }, [current, options]);
+
+  return (
+    <GeoSearchSelect
+      id={id}
+      className={className}
+      placeholder={cc ? placeholder : "Indica un país"}
+      searchPlaceholder="Buscar estado, región o municipio…"
+      emptyMessage="Sin estados, regiones ni municipios."
+      options={options}
+      value={selected?.code}
+      displayValue={selected?.name}
+      onChange={(option) => {
+        if (!isControlled) setInternal(option.code);
+        onChange?.(option);
+      }}
+      disabled={disabled || !cc}
+      isLoading={Boolean(cc) && isLoading}
+      showCode={showCode}
+    />
+  );
+}

package/src/lib/geo-city-codes.ts

@@ -0,0 +1,234 @@
+/**
+ * Códigos cortos de ciudad (logística / etiquetas).
+ * Clave: `{ISO2}:{NombreCiudad}` → código de 3 letras.
+ */
+const CITY_CODE_OVERRIDES: Record<string, string> = {
+  // Ecuador
+  "EC:Guayaquil": "GYE",
+  "EC:Quito": "UIO",
+  "EC:Cuenca": "CUE",
+  "EC:Machala": "MCH",
+  "EC:Manta": "MEC",
+  "EC:Portoviejo": "PVO",
+  "EC:Ambato": "ATF",
+  "EC:Loja": "LOH",
+  "EC:Esmeraldas": "ESM",
+  "EC:Ibarra": "IBB",
+  "EC:Riobamba": "RIB",
+  "EC:Santo Domingo": "STD",
+  "EC:Milagro": "MLG",
+  "EC:Durán": "DUR",
+  "EC:Samborondón": "SBO",
+  // Colombia
+  "CO:Bogotá": "BOG",
+  "CO:Bogota": "BOG",
+  "CO:Medellín": "MDE",
+  "CO:Medellin": "MDE",
+  "CO:Cali": "CAL",
+  "CO:Barranquilla": "BAQ",
+  "CO:Cartagena": "CTG",
+  "CO:Bucaramanga": "BGA",
+  "CO:Pereira": "PEI",
+  "CO:Manizales": "MZL",
+  "CO:Cúcuta": "CUC",
+  "CO:Cucuta": "CUC",
+  "CO:Ibagué": "IBE",
+  "CO:Ibague": "IBE",
+  "CO:Santa Marta": "SMR",
+  // México
+  "MX:Ciudad de México": "CDM",
+  "MX:Guadalajara": "GDL",
+  "MX:Monterrey": "MTY",
+  "MX:Puebla": "PBC",
+  "MX:Tijuana": "TIJ",
+  "MX:León": "BJX",
+  "MX:Leon": "BJX",
+  // Perú
+  "PE:Lima": "LIM",
+  "PE:Arequipa": "AQP",
+  "PE:Trujillo": "TRU",
+  "PE:Cusco": "CUZ",
+  // Chile
+  "CL:Santiago": "SCL",
+  "CL:Valparaíso": "VAP",
+  "CL:Valparaiso": "VAP",
+  "CL:Concepción": "CCP",
+  "CL:Concepcion": "CCP",
+  // Argentina
+  "AR:Buenos Aires": "BUE",
+  "AR:Córdoba": "COR",
+  "AR:Cordoba": "COR",
+  "AR:Rosario": "ROS",
+  "AR:Mendoza": "MDZ",
+  // USA (casilleros)
+  "US:Miami": "MIA",
+  "US:New York": "NYC",
+  "US:Los Angeles": "LAX",
+  "US:Houston": "HOU",
+  "US:Chicago": "ORD",
+  // Nicaragua
+  "NI:Chontales": "CHO",
+  "NI:Juigalpa": "JUI",
+  "NI:Managua": "MGA",
+  "NI:León": "LEN",
+  "NI:Leon": "LEN",
+  "NI:Granada": "GRA",
+  "NI:Masaya": "MSY",
+  "NI:Matagalpa": "MTG",
+  // Reino Unido
+  "GB:London": "LON",
+  "GB:Greater London": "LON",
+  "GB:Manchester": "MAN",
+  "GB:Birmingham": "BHX",
+  "GB:Liverpool": "LIV",
+  "GB:Leeds": "LDS",
+  "GB:Glasgow": "GLA",
+  "GB:Edinburgh": "EDI",
+  "GB:Cardiff": "CDF",
+  "GB:Belfast": "BEL",
+  "GB:England": "ENG",
+  "GB:Scotland": "SCT",
+  "GB:Wales": "WLS",
+  "GB:Northern Ireland": "NIR",
+  // España
+  "ES:Madrid": "MAD",
+  "ES:Barcelona": "BCN",
+  "ES:L'Hospitalet de Llobregat": "LHO",
+  "ES:LHospitalet de Llobregat": "LHO",
+  "ES:Hospitalet de Llobregat": "LHO",
+  "ES:Valencia": "VLC",
+  "ES:Sevilla": "SVQ",
+  "ES:Zaragoza": "ZAZ",
+  "ES:Bilbao": "BIO",
+  "ES:Malaga": "AGP",
+  "ES:Málaga": "AGP",
+  "ES:Murcia": "MJV",
+  "ES:Palma": "PMI",
+  "ES:Las Palmas de Gran Canaria": "LPA",
+  "ES:Las Palmas": "LPA",
+  "ES:Alicante": "ALC",
+  "ES:Cordoba": "COR",
+  "ES:Córdoba": "COR",
+  "ES:Valladolid": "VLL",
+  "ES:Vigo": "VGO",
+  "ES:Gijon": "GIJ",
+  "ES:Gijón": "GIJ",
+  "ES:Oviedo": "OVD",
+  "ES:Leon": "LEN",
+  "ES:León": "LEN",
+  "ES:Burgos": "BUR",
+  "ES:Salamanca": "SLM",
+  "ES:San Sebastian": "EAS",
+  "ES:San Sebastián": "EAS",
+  "ES:Santander": "SDR",
+  "ES:Pamplona": "PNA",
+  "ES:Granada": "GRX",
+  "ES:Toledo": "TOL",
+  "ES:Badajoz": "BJZ",
+  "ES:Castilla y Leon": "CLY",
+  "ES:Castilla y León": "CLY",
+  "ES:Andalucia": "AND",
+  "ES:Andalucía": "AND",
+  "ES:Cataluna": "CAT",
+  "ES:Cataluña": "CAT",
+  "ES:Comunidad Valenciana": "VAL",
+  "ES:Comunidad de Madrid": "MAD",
+  "ES:Region de Murcia": "MUR",
+  "ES:Región de Murcia": "MUR",
+  "ES:Pais Vasco": "PV",
+  "ES:País Vasco": "PV",
+  "ES:Galicia": "GAL",
+  "ES:Extremadura": "EXT",
+  "ES:Asturias": "AST",
+  "ES:Navarra": "NAV",
+  "ES:Cantabria": "CAN",
+  "ES:La Rioja": "RIO",
+  "ES:Islas Baleares": "BAL",
+  "ES:Canarias": "CNR",
+  "ES:Ceuta": "CEU",
+  "ES:Melilla": "MEL",
+  // Venezuela
+  "VE:Caracas": "CCS",
+  "VE:Maracaibo": "MAR",
+  "VE:Valencia": "VLN",
+  "VE:Barquisimeto": "BRM",
+  "VE:Maracay": "MYC",
+  "VE:San Cristobal": "SCI",
+  "VE:San Cristóbal": "SCI",
+  "VE:Puerto La Cruz": "PLC",
+  "VE:Maturin": "MUN",
+  "VE:Maturín": "MUN",
+  "VE:Barcelona": "BLA",
+  "VE:Ciudad Guayana": "CGY",
+  "VE:Puerto Ordaz": "PZO",
+  "VE:Merida": "MER",
+  "VE:Mérida": "MER",
+  "VE:Punto Fijo": "PFJ",
+  "VE:Porlamar": "PMV",
+  "VE:San Fernando de Apure": "SFA",
+  "VE:Naguanagua": "NGN",
+  "VE:Lecheria": "LEC",
+  "VE:Lechería": "LEC",
+  "VE:Cumana": "CUM",
+  "VE:Cumaná": "CUM",
+  "VE:Coro": "COR",
+  "VE:Barinas": "BAR",
+  "VE:Trujillo": "TRU",
+  "VE:Valera": "VLR",
+  "VE:San Felipe": "SFP",
+  "VE:La Guaira": "LGR",
+  "VE:Maiquetia": "MAI",
+  "VE:Maiquetía": "MAI",
+  "VE:Distrito Capital": "CCS",
+  "VE:Apure": "APU",
+  "VE:Anzoategui": "ANZ",
+  "VE:Anzoátegui": "ANZ",
+  "VE:Aragua": "ARA",
+  "VE:Bolivar": "BOL",
+  "VE:Bolívar": "BOL",
+  "VE:Carabobo": "CAR",
+  "VE:Miranda": "MIR",
+  "VE:Zulia": "ZUL",
+  "VE:Tachira": "TAC",
+  "VE:Táchira": "TAC",
+  "VE:Lara": "LAR",
+  "VE:Monagas": "MON",
+  "VE:Nueva Esparta": "NEP",
+  "VE:Falcon": "FAL",
+  "VE:Falcón": "FAL",
+  "VE:Guarico": "GUA",
+  "VE:Guárico": "GUA",
+  "VE:Portuguesa": "POR",
+  "VE:Sucre": "SUC",
+  "VE:Yaracuy": "YAR",
+  "VE:Amazonas": "AMZ",
+  "VE:Cojedes": "COJ",
+  "VE:Delta Amacuro": "DAM",
+};
+
+function normalizeCityKey(cityName: string): string {
+  return cityName
+    .normalize("NFD")
+    .replace(/\p{M}/gu, "")
+    .replace(/[''`´’]/g, "")
+    .trim();
+}
+
+function fallbackCityCode(cityName: string): string {
+  const letters = normalizeCityKey(cityName).replace(/[^a-zA-Z]/g, "");
+  if (letters.length >= 3) return letters.slice(0, 3).toUpperCase();
+  return letters.toUpperCase().padEnd(3, "X");
+}
+
+export function resolveCityCode(
+  countryCode: string,
+  cityName: string,
+): string {
+  const cc = countryCode.trim().toUpperCase();
+  const normalized = normalizeCityKey(cityName);
+  const direct = CITY_CODE_OVERRIDES[`${cc}:${normalized}`];
+  if (direct) return direct;
+  const withoutAccents = CITY_CODE_OVERRIDES[`${cc}:${cityName.trim()}`];
+  if (withoutAccents) return withoutAccents;
+  return fallbackCityCode(cityName);
+}

package/src/lib/geo-countries.ts

@@ -0,0 +1,75 @@
+/** Países para UI: nombres vía Intl; catálogo vía `@countrystatecity/countries-browser`. */
+
+export interface CountryOption {
+  code: string;
+  short: string;
+  long: string;
+}
+
+/** @deprecated Usar `CountryOption`. */
+export type LatinCountry = CountryOption;
+
+export function spanishCountryName(isoCode: string, fallback?: string): string {
+  const code = isoCode.trim().toUpperCase();
+  if (!code) return fallback?.trim() || "";
+  try {
+    const name = new Intl.DisplayNames(["es"], { type: "region" }).of(code);
+    return name?.trim() || fallback?.trim() || code;
+  } catch {
+    return fallback?.trim() || code;
+  }
+}
+
+/** Mapea la respuesta CSC a opciones de UI (nombre en español, orden A–Z). */
+export function mapGeoCountries(
+  apiCountries: Array<{ code: string; name: string }>,
+): CountryOption[] {
+  const byCode = new Map<string, CountryOption>();
+
+  for (const c of apiCountries) {
+    const code = c.code.trim().toUpperCase();
+    if (!code) continue;
+    byCode.set(code, {
+      code,
+      short: code,
+      long: spanishCountryName(code, c.name),
+    });
+  }
+
+  return [...byCode.values()].sort((a, b) =>
+    a.long.localeCompare(b.long, "es"),
+  );
+}
+
+/** @deprecated Usar `mapGeoCountries`. */
+export const mergeGeoCountries = mapGeoCountries;
+
+export function getCountryByCode(
+  countryCode?: string | null,
+): CountryOption | undefined {
+  if (!countryCode?.trim()) return undefined;
+  const normalized = countryCode.trim().toUpperCase();
+  return {
+    code: normalized,
+    short: normalized,
+    long: spanishCountryName(normalized, normalized),
+  };
+}
+
+/** Nombre en español a partir del código ISO; si no hay match, usa el fallback o el código. */
+export function getCountryDisplayName(
+  countryCode?: string | null,
+  fallbackName?: string | null,
+): string {
+  if (!countryCode?.trim()) {
+    if (fallbackName?.trim()) return fallbackName.trim();
+    return "—";
+  }
+  return spanishCountryName(countryCode, fallbackName ?? undefined);
+}
+
+/** Fax en oficinas/direcciones cuando hay país ISO-2. */
+export function isCommonFaxCountry(countryCode?: string | null): boolean {
+  const code = countryCode?.trim().toUpperCase();
+  return Boolean(code && /^[A-Z]{2}$/.test(code));
+}