@traky-app/ui 1.6.3 → 1.6.4

package/registry/traky/registry.json

@@ -183,6 +183,16 @@
         }
       ]
     },
+    {
+      "name": "city-select",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/city-select.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "code-block",
       "type": "registry:ui",
@@ -223,6 +233,16 @@
         }
       ]
     },
+    {
+      "name": "country-select",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/country-select.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "dialog",
       "type": "registry:ui",
@@ -283,6 +303,26 @@
         }
       ]
     },
+    {
+      "name": "geo-search-select",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/geo-search-select.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "geo-selectors",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/geo-selectors.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "globe",
       "type": "registry:ui",
@@ -293,6 +333,16 @@
         }
       ]
     },
+    {
+      "name": "google-maps-address-picker",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/google-maps-address-picker.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "header-page",
       "type": "registry:ui",
@@ -473,6 +523,26 @@
         }
       ]
     },
+    {
+      "name": "office-address-form-dialog",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/office-address-form-dialog.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "office-address-form",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/office-address-form.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "office-switcher",
       "type": "registry:ui",
@@ -503,6 +573,16 @@
         }
       ]
     },
+    {
+      "name": "phone-number-input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/phone-number-input.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "popover",
       "type": "registry:ui",
@@ -593,6 +673,16 @@
         }
       ]
     },
+    {
+      "name": "state-select",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/state-select.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "switch",
       "type": "registry:ui",
@@ -703,6 +793,96 @@
         }
       ]
     },
+    {
+      "name": "lib-geo-city-codes",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-city-codes.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-geo-countries",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-countries.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-geo-csc",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-csc.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-geo-locations",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-locations.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-geo-overrides",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-overrides.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-geo-types",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-geo-types.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-google-maps-address",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-google-maps-address.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-phone-countries",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-phone-countries.json",
+          "type": "registry:file"
+        }
+      ]
+    },
+    {
+      "name": "lib-phone-e164",
+      "type": "registry:lib",
+      "files": [
+        {
+          "path": "json/lib-phone-e164.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "lib-sidebar-persistence",
       "type": "registry:lib",

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

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchCities } from "@/lib/geo-locations";
+import type { GeoCityOption, GeoOption } from "@/lib/geo-types";
+import { GeoSearchSelect } from "@/components/ui/geo-search-select";
+
+export type CitySelectProps = {
+  id?: string;
+  /** ISO-2 del país. */
+  countryCode?: string | null;
+  /** Código de provincia / estado. */
+  stateCode?: 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: GeoCityOption | null) => void;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  showCode?: boolean;
+};
+
+export function CitySelect({
+  id,
+  countryCode,
+  stateCode,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  className,
+  placeholder = "Buscar ciudad, pueblo o distrito…",
+  showCode = true,
+}: CitySelectProps) {
+  const cc = countryCode?.trim().toUpperCase() ?? "";
+  const sc = stateCode?.trim() ?? "";
+  const ready = Boolean(cc && sc);
+  const isControlled = value !== undefined;
+  const [options, setOptions] = useState<GeoCityOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const onChangeRef = useRef(onChange);
+  const controlledRef = useRef(isControlled);
+  const selectionRef = useRef("");
+  const prevContext = useRef({ cc, sc });
+
+  onChangeRef.current = onChange;
+  controlledRef.current = isControlled;
+  selectionRef.current = (isControlled ? value : internal) ?? "";
+
+  useEffect(() => {
+    const previous = prevContext.current;
+    if (previous.cc === cc && previous.sc === sc) return;
+    prevContext.current = { cc, sc };
+    if (!previous.cc || !previous.sc) return;
+    if (!controlledRef.current) setInternal("");
+    if (selectionRef.current) onChangeRef.current?.(null);
+  }, [cc, sc]);
+
+  useEffect(() => {
+    if (!ready) {
+      setOptions([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setOptions([]);
+    setIsLoading(true);
+    void fetchCities(cc, sc)
+      .then((list) => {
+        if (!cancelled) setOptions(list);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cc, sc, ready]);
+
+  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={ready ? placeholder : "Indica país y estado, región o municipio"}
+      searchPlaceholder="Buscar ciudad, pueblo o distrito…"
+      emptyMessage="Sin ciudades, pueblos ni distritos."
+      options={options}
+      value={selected?.code}
+      displayValue={selected?.name}
+      onChange={(option: GeoOption) => {
+        const city = option as GeoCityOption;
+        if (!isControlled) setInternal(city.code);
+        onChange?.(city);
+      }}
+      disabled={disabled || !ready}
+      isLoading={ready && isLoading}
+      showCode={showCode}
+    />
+  );
+}

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

@@ -0,0 +1,233 @@
+"use client";
+
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+
+import { useEffect, useMemo, useState } from "react";
+import { getGeoCountries } from "@/lib/geo-csc";
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils";
+import {
+  getCountryByCode,
+  mapGeoCountries,
+  type CountryOption,
+} from "@/lib/geo-countries";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export type Country = CountryOption;
+
+function countryLabel(c: Country, size: "sm" | "md" | "lg"): string {
+  if (size === "sm") return c.short;
+  if (size === "md") return c.code;
+  return c.long;
+}
+
+/** Bandera local `/assets/flags/{ISO}.svg`; si no existe, no muestra nada. */
+function CountryFlag({
+  code,
+  name,
+}: {
+  code: string;
+  name: string;
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible || !code) return null;
+
+  return (
+    <img
+      src={`/assets/flags/${code.toUpperCase()}.svg`}
+      alt=""
+      title={name}
+      width={22}
+      height={14}
+      className="h-[14px] w-[22px] shrink-0 rounded object-cover"
+      onError={() => setVisible(false)}
+    />
+  );
+}
+
+export type CountrySelectProps = {
+  id?: string;
+  /** ISO-2 controlado. `undefined` deja el selector sin controlar; `""` lo deja vacío. */
+  value?: string;
+  /** ISO-2 inicial cuando `value` no se pasa. */
+  defaultValue?: string;
+  onChange?: (value: Country) => void;
+  /** Si se elige la opción vacía (requiere `allowClear`). */
+  onClear?: () => void;
+  disabled?: boolean;
+  fileName?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  searchPlaceholder?: string;
+  /** Si se define, solo se listan estos ISO-2 (en este orden). */
+  allowedCodes?: readonly string[];
+  allowClear?: boolean;
+  clearLabel?: string;
+};
+
+export function CountrySelect({
+  id,
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  disabled,
+  fileName,
+  className,
+  size = "md",
+  searchPlaceholder = "Escribe o busca un país...",
+  allowedCodes,
+  allowClear = false,
+  clearLabel = "Sin país",
+}: CountrySelectProps) {
+  const [open, setOpen] = useState(false);
+  const [catalog, setCatalog] = useState<Country[]>([]);
+  const [loadingCatalog, setLoadingCatalog] = useState(true);
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState<Country | undefined>(() =>
+    getCountryByCode(defaultValue),
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoadingCatalog(true);
+    void (async () => {
+      const apiCountries = await getGeoCountries();
+      if (cancelled) return;
+      setCatalog(mapGeoCountries(apiCountries));
+      setLoadingCatalog(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const countries = useMemo(() => {
+    if (!allowedCodes?.length) return catalog;
+    const byCode = new Map(catalog.map((country) => [country.code, country]));
+    return allowedCodes
+      .map((code) => byCode.get(code.trim().toUpperCase()))
+      .filter((country): country is Country => Boolean(country));
+  }, [allowedCodes, catalog]);
+
+  const selected = useMemo(() => {
+    if (isControlled) {
+      const code = value?.trim().toUpperCase() ?? "";
+      if (!code) return undefined;
+      return catalog.find((c) => c.code === code) ?? getCountryByCode(code);
+    }
+    if (!uncontrolled) return undefined;
+    return catalog.find((c) => c.code === uncontrolled.code) ?? uncontrolled;
+  }, [catalog, isControlled, uncontrolled, value]);
+
+  const placeholder = fileName || "País";
+
+  const triggerLabel = useMemo(() => {
+    if (!selected) return null;
+    return countryLabel(selected, size);
+  }, [selected, size]);
+
+  const handleSelect = (country: Country) => {
+    if (!isControlled) setUncontrolled(country);
+    setOpen(false);
+    onChange?.(country);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) setUncontrolled(undefined);
+    setOpen(false);
+    onClear?.();
+  };
+
+  return (
+    <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "h-10 w-full justify-between gap-2 font-normal",
+            className,
+          )}
+        >
+          {selected && triggerLabel ? (
+            <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+              <CountryFlag code={selected.code} name={selected.long} />
+              <span className="truncate">{triggerLabel}</span>
+            </span>
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      {!disabled && (
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+          <Command
+            className="border border-border"
+            filter={commandFilterAccentInsensitive}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>
+                {loadingCatalog
+                  ? "Cargando países…"
+                  : "No se encontró el país."}
+              </CommandEmpty>
+              {allowClear ? (
+                <CommandGroup>
+                  <CommandItem
+                    value={`${clearLabel} sin pais none`}
+                    onSelect={handleClear}
+                    className="gap-2"
+                  >
+                    <span className="min-w-0 flex-1 truncate">{clearLabel}</span>
+                    {!selected ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                </CommandGroup>
+              ) : null}
+              {allowClear ? <CommandSeparator /> : null}
+              <CommandGroup>
+                {countries.map((c) => (
+                  <CommandItem
+                    key={c.code}
+                    value={`${c.long} ${c.code} ${c.short}`}
+                    onSelect={() => handleSelect(c)}
+                    className="gap-2"
+                  >
+                    <CountryFlag code={c.code} name={c.long} />
+                    <span className="min-w-0 flex-1 truncate">{c.long}</span>
+                    <span className="text-xs text-muted-foreground">{c.code}</span>
+                    {selected?.code === c.code ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}

package/registry/traky/ui/geo-search-select.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
+import type { GeoOption } from "@/lib/geo-types";
+
+type GeoSearchSelectProps = {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  options: GeoOption[];
+  value?: string;
+  displayValue?: string;
+  onChange?: (option: GeoOption) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  showCode?: boolean;
+};
+
+export function GeoSearchSelect({
+  id,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyMessage = "No se encontraron resultados.",
+  options,
+  value,
+  displayValue,
+  onChange,
+  disabled = false,
+  isLoading = false,
+  className,
+  showCode = false,
+}: GeoSearchSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(() => {
+    if (!value && !displayValue) return undefined;
+    if (value) {
+      return options.find((o) => o.code === value || o.name === value);
+    }
+    return options.find((o) => o.name === displayValue);
+  }, [options, value, displayValue]);
+
+  const triggerLabel = selected?.name ?? displayValue;
+
+  return (
+    <Popover modal open={open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled || isLoading}
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "h-10 w-full justify-between gap-2 font-normal",
+            className,
+          )}
+        >
+          {isLoading ? (
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Spinner className="size-4" />
+              Cargando…
+            </span>
+          ) : triggerLabel ? (
+            <span className="truncate">{triggerLabel}</span>
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      {!disabled && !isLoading && (
+        <PopoverContent
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          align="start"
+        >
+          <Command
+            className="border border-border"
+            filter={commandFilterAccentInsensitive}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={`${option.code}-${option.name}`}
+                    value={`${option.name} ${option.code}`}
+                    onSelect={() => {
+                      onChange?.(option);
+                      setOpen(false);
+                    }}
+                    className="gap-2"
+                  >
+                    <span className="min-w-0 flex-1 truncate">{option.name}</span>
+                    {showCode ? (
+                      <span className="text-xs text-muted-foreground">
+                        {option.code}
+                      </span>
+                    ) : null}
+                    {selected?.code === option.code &&
+                    selected?.name === option.name ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}