@komensal/ui 0.2.2 → 0.3.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 })
                 }
@@ -1018,7 +1067,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 +1093,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 +1103,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 +1189,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 +1230,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 +1755,9 @@ export {
   inputFocus,
   inputPlaceholder,
   registerToastEmitter,
+  setUiLanguage,
   toast,
+  uiI18n,
   useFormField
 };
 //# sourceMappingURL=index.js.map