@komensal/ui 0.2.2 → 0.4.0

package/dist/index.js

@@ -110,7 +110,55 @@ import * as React2 from "react";
 
 // src/components/spinner.tsx
 import clsx2 from "clsx";
-import { useTranslation } from "react-i18next";
+
+// src/lib/i18n.ts
+import i18n from "i18next";
+import { initReactI18next, useTranslation } from "react-i18next";
+
+// src/locales/es/ui.json
+var ui_default = {
+  otpField: {
+    description: "Se ha enviado un c\xF3digo OTP a tu correo . Revisa tu bandeja de entrada."
+  },
+  inputField: {
+    showPassword: "Mostrar contrase\xF1a",
+    hidePassword: "Ocultar contrase\xF1a",
+    clear: "Limpiar"
+  },
+  dialog: {
+    close: "Cerrar"
+  },
+  selectInput: {
+    placeholder: "Selecciona...",
+    loading: "Cargando...",
+    search: "Buscar...",
+    noResults: "Sin resultados."
+  },
+  passwordChecklist: {
+    minLength: "M\xEDnimo {{min}} caracteres",
+    hasUpperAndLower: "Una may\xFAscula y min\xFAscula",
+    hasNumber: "Un n\xFAmero",
+    hasSpecialChar: "Un car\xE1cter especial"
+  },
+  spinner: {
+    loading: "Cargando..."
+  }
+};
+
+// src/lib/i18n.ts
+var uiI18n = i18n.createInstance();
+void uiI18n.use(initReactI18next).init({
+  defaultNS: "ui",
+  fallbackLng: "es",
+  interpolation: { escapeValue: false },
+  lng: "es",
+  ns: ["ui"],
+  resources: { es: { ui: ui_default } }
+});
+var setUiLanguage = (lng) => uiI18n.changeLanguage(lng);
+var useUiT = () => useTranslation("ui", { i18n: uiI18n }).t;
+
+// src/components/spinner.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var sizes = {
   lg: "70",
@@ -124,8 +172,8 @@ var variants = {
   primary: "var(--color-spinner-primary)",
   secondary: "var(--color-spinner-secondary)"
 };
-var Spinner = ({ className = "", size = "md", variant = "primary" }) => {
-  const { t } = useTranslation("ui");
+var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary" }) => {
+  const t = useUiT();
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx3(
       "svg",
@@ -164,7 +212,7 @@ var Spinner = ({ className = "", size = "md", variant = "primary" }) => {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: t("spinner.loading") })
+    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: loadingLabel ?? t("spinner.loading") })
   ] });
 };
 
@@ -292,7 +340,6 @@ import * as React4 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import * as React3 from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -312,8 +359,8 @@ var DialogOverlay = React3.forwardRef(({ className, isAbsolute = false, ...props
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React3.forwardRef(
-  ({ children, className, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
-    const { t } = useTranslation2("ui");
+  ({ children, className, closeLabel, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
+    const t = useUiT();
     return /* @__PURE__ */ jsxs6(DialogPortal, { container, children: [
       /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, isAbsolute }),
       /* @__PURE__ */ jsxs6(
@@ -330,7 +377,7 @@ var DialogContent = React3.forwardRef(
             children,
             isCloseIcon && /* @__PURE__ */ jsxs6(DialogPrimitive.Close, { className: "data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover border-border bg-border absolute top-11 right-8 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
               /* @__PURE__ */ jsx6(Cross2Icon, { className: "text-body hover:text-primary-dark h-4 w-4" }),
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: t("dialog.close") })
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
             ] })
           ]
         }
@@ -529,7 +576,6 @@ FormMessage.displayName = "FormMessage";
 
 // src/components/form-fields/input-field.tsx
 import { useState } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
 import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
 import { RxCross2 } from "react-icons/rx";
 
@@ -590,8 +636,10 @@ var LabelField = ({ label, labelClassName, name, visualRequired }) => {
 // src/components/form-fields/input-field.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var InputField = ({
+  clearLabel,
   control,
   disabled,
+  hidePasswordLabel,
   inputClassName,
   isClearable,
   label,
@@ -600,10 +648,11 @@ var InputField = ({
   name,
   onClear,
   placeholder,
+  showPasswordLabel,
   type = "text",
   visualRequired
 }) => {
-  const { t } = useTranslation3("ui");
+  const t = useUiT();
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const togglePasswordVisibility = () => {
     setIsPasswordVisible((prev) => !prev);
@@ -662,7 +711,7 @@ var InputField = ({
                 {
                   className: "focus:outline-none",
                   onClick: onClear,
-                  title: t("inputField.clear"),
+                  title: clearLabel ?? t("inputField.clear"),
                   type: "button",
                   children: /* @__PURE__ */ jsx12(RxCross2, { size: 18 })
                 }
@@ -672,7 +721,7 @@ var InputField = ({
                 {
                   className: "focus:outline-none",
                   onClick: togglePasswordVisibility,
-                  title: isPasswordVisible ? t("inputField.hidePassword") : t("inputField.showPassword"),
+                  title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
                   type: "button",
                   children: isPasswordVisible ? /* @__PURE__ */ jsx12(FaRegEye, { size: 18 }) : /* @__PURE__ */ jsx12(FaRegEyeSlash, { size: 20 })
                 }
@@ -694,13 +743,27 @@ var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
 var PICKER_MAP_ID = "komensal-restaurant-map";
 var SELECTED_ZOOM = 15;
 var DEBOUNCE_MS = 300;
+var parseComponents = (components) => {
+  const find = (type) => components.find((c) => c.types.includes(type));
+  const country = find("country");
+  const department = find("administrative_area_level_1");
+  const city = find("locality") ?? find("administrative_area_level_2");
+  return {
+    city: city?.long ?? null,
+    country: country?.short ?? null,
+    countryName: country?.long ?? null,
+    department: department?.long ?? null
+  };
+};
 var CITY_ZOOM = 12;
 var MapPickerContent = ({
   centerOn,
+  countryCode,
   disabled,
   hasError,
   locationQuery,
   locationZoom,
+  onAddressResolved,
   onChange,
   placeholder,
   value
@@ -709,6 +772,7 @@ var MapPickerContent = ({
   const geocodingLib = useMapsLibrary("geocoding");
   const map = useMap(PICKER_MAP_ID);
   const onChangeRef = useRef(onChange);
+  const onResolvedRef = useRef(onAddressResolved);
   const geocoder = useMemo(
     () => geocodingLib ? new geocodingLib.Geocoder() : null,
     [geocodingLib]
@@ -721,6 +785,7 @@ var MapPickerContent = ({
   const [position, setPosition] = useState2(null);
   useEffect(() => {
     onChangeRef.current = onChange;
+    onResolvedRef.current = onAddressResolved;
   });
   useEffect(() => {
     setInputValue(value);
@@ -768,6 +833,7 @@ var MapPickerContent = ({
       }
       try {
         const result = await placesLib.AutocompleteSuggestion.fetchAutocompleteSuggestions({
+          includedRegionCodes: countryCode ? [countryCode.toLowerCase()] : void 0,
           input,
           sessionToken
         });
@@ -777,7 +843,7 @@ var MapPickerContent = ({
         setSuggestions([]);
       }
     },
-    [placesLib, sessionToken]
+    [placesLib, sessionToken, countryCode]
   );
   const reverseGeocode = useCallback(
     async (latLng) => {
@@ -785,9 +851,14 @@ var MapPickerContent = ({
       try {
         const { results } = await geocoder.geocode({ location: latLng });
         if (results.length > 0) {
-          const address = results[0].formatted_address;
+          const result = results[0];
+          const address = result.formatted_address;
           setInputValue(address);
           onChangeRef.current(address);
+          const parts = parseComponents(
+            result.address_components.map((c) => ({ long: c.long_name, short: c.short_name, types: c.types }))
+          );
+          onResolvedRef.current?.({ address, lat: latLng.lat, lng: latLng.lng, ...parts });
         }
       } catch {
         return;
@@ -806,15 +877,21 @@ var MapPickerContent = ({
     const prediction = suggestion.placePrediction;
     if (!prediction) return;
     const place = prediction.toPlace();
-    await place.fetchFields({ fields: ["formattedAddress", "location"] });
+    await place.fetchFields({ fields: ["formattedAddress", "location", "addressComponents"] });
     const address = place.formattedAddress ?? prediction.text.text;
     setInputValue(address);
     onChangeRef.current(address);
     setSuggestions([]);
     setShowDropdown(false);
+    const lat = place.location?.lat() ?? null;
+    const lng = place.location?.lng() ?? null;
     if (place.location) {
       setPosition({ lat: place.location.lat(), lng: place.location.lng() });
     }
+    const parts = parseComponents(
+      (place.addressComponents ?? []).map((c) => ({ long: c.longText, short: c.shortText, types: c.types }))
+    );
+    onResolvedRef.current?.({ address, lat, lng, ...parts });
     if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
   };
   const handleBlur = () => {
@@ -1018,7 +1095,6 @@ function OTPField({
 // src/components/select-input.tsx
 import { ChevronDown, ChevronUp, Clock, XIcon } from "lucide-react";
 import { cloneElement, useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
-import { useTranslation as useTranslation4 } from "react-i18next";
 
 // src/components/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -1045,7 +1121,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 // src/components/select-input.tsx
 import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectInput = (props) => {
-  const { t } = useTranslation4("ui");
+  const t = useUiT();
   const {
     ableDeleteOption,
     className,
@@ -1055,12 +1131,15 @@ var SelectInput = (props) => {
     labelKey = "label",
     leftIcon,
     loading = false,
+    loadingLabel,
+    noResultsLabel,
     onBlur,
     onChange,
     onValueChangeCallBack = () => void 0,
     placeholder,
     placeholderClassName = "",
     search = false,
+    searchPlaceholder,
     timeField = false,
     value = "",
     valueKey = "value"
@@ -1138,7 +1217,7 @@ var SelectInput = (props) => {
         role: "combobox",
         variant: "primary",
         children: loading ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-          t("selectInput.loading"),
+          loadingLabel ?? t("selectInput.loading"),
           " ",
           /* @__PURE__ */ jsx18(Spinner, {})
         ] }) : /* @__PURE__ */ jsxs14("div", { className: "relative flex h-5 w-full items-center", children: [
@@ -1179,11 +1258,11 @@ var SelectInput = (props) => {
             {
               className: "mb-1 rounded-sm",
               onChange: (e) => setQuery(e.target.value),
-              placeholder: t("selectInput.search"),
+              placeholder: searchPlaceholder ?? t("selectInput.search"),
               value: query
             }
           ),
-          /* @__PURE__ */ jsx18(CommandEmpty, { className: "text-center", children: t("selectInput.noResults") }),
+          /* @__PURE__ */ jsx18(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
           /* @__PURE__ */ jsx18(CommandList, { children: /* @__PURE__ */ jsx18(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
             const labelValue = item[labelKey];
             const valueValue = item[valueKey];
@@ -1704,7 +1783,9 @@ export {
   inputFocus,
   inputPlaceholder,
   registerToastEmitter,
+  setUiLanguage,
   toast,
+  uiI18n,
   useFormField
 };
 //# sourceMappingURL=index.js.map