Clientes

2025-09-21 21:10:05 +02:00 · 2025-09-21 21:10:05 +02:00 · b7396881b3
commit b7396881b3
parent f7e858a0b2
20 changed files with 641 additions and 92 deletions
--- a/apps/web/index.html
+++ b/apps/web/index.html
@ -7,16 +7,6 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap"
-    rel="stylesheet">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap"
-    rel="stylesheet">
-
  <title>FactuGES 2025</title>
  <link rel="icon" type="image/png" href="/favicon.png" />
 </head>
--- a/modules/core/src/web/components/form/index.ts
+++ b/modules/core/src/web/components/form/index.ts
@ -1 +1 @@
-export * from "./taxes-multi-select-field";
+export * from "./taxes-multi-select-field.tsx";
--- a/modules/core/src/web/components/form/taxes-multi-select-field.tsx.bak
+++ b/modules/core/src/web/components/form/taxes-multi-select-field.tsx.bak
@ -0,0 +1,30 @@
+import { MultiSelectField, MultiSelectFieldProps } from "@repo/rdx-ui/components";
+import * as React from "react";
+import type { FieldValues } from "react-hook-form";
+import { TaxesList } from "../../constants";
+
+/**
+ * Igual que MultiSelect pero con `options` preconfiguradas a TaxesList.
+ * Puedes sobreescribir `options` si lo necesitas, se mergean (TaxesList primero).
+ */
+export type TaxesMultiSelectFieldProps<T extends FieldValues> = Omit<
+  MultiSelectFieldProps<T>,
+  "options"
+>;
+
+const TaxesMultiSelectFieldInner = React.forwardRef(
+  <T extends FieldValues>(
+    props: TaxesMultiSelectFieldProps<T>,
+    ref: React.Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <MultiSelectField ref={ref} {...(props as MultiSelectFieldProps<T>)} options={TaxesList} />
+    );
+  }
+);
+
+TaxesMultiSelectFieldInner.displayName = "TaxesMultiSelectField";
+
+export const TaxesMultiSelectField = TaxesMultiSelectFieldInner as <T extends FieldValues>(
+  p: TaxesMultiSelectFieldProps<T> & { ref?: React.Ref<HTMLButtonElement> }
+) => React.JSX.Element;
--- a/modules/core/src/web/components/taxes-multi-select.tsx
+++ b/modules/core/src/web/components/taxes-multi-select.tsx
@ -2,7 +2,7 @@ import { MultiSelect } from "@repo/rdx-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { useTranslation } from "../i18n";

-const taxesList = [
+export const TaxesList = [
  { label: "IVA 21%", value: "iva_21", group: "IVA" },
  { label: "IVA 10%", value: "iva_10", group: "IVA" },
  { label: "IVA 7,5%", value: "iva_7_5", group: "IVA" },
@ -34,6 +34,7 @@ const taxesList = [
 ];

 interface TaxesMultiSelect {
+  name: string;
  value: string[];
  onChange: (selectedValues: string[]) => void;
  [key: string]: any; // Allow other props to be passed
@ -58,7 +59,7 @@ export const TaxesMultiSelect = (props: TaxesMultiSelect) => {
  return (
    <div className={cn("w-full", "max-w-md")}>
      <MultiSelect
-        options={taxesList}
+        options={TaxesList}
        onValueChange={handleOnChange}
        onValidateOption={handleValidateOption}
        defaultValue={value}
--- a/modules/core/src/web/constants/index.ts
+++ b/modules/core/src/web/constants/index.ts
@ -0,0 +1 @@
+export * from "./taxes";
--- a/modules/core/src/web/constants/taxes.ts
+++ b/modules/core/src/web/constants/taxes.ts
@ -0,0 +1,30 @@
+export const TaxesList = [
+  { label: "IVA 21%", value: "iva_21", group: "IVA" },
+  { label: "IVA 10%", value: "iva_10", group: "IVA" },
+  { label: "IVA 7,5%", value: "iva_7_5", group: "IVA" },
+  { label: "IVA 5%", value: "iva_5", group: "IVA" },
+  { label: "IVA 4%", value: "iva_4", group: "IVA" },
+  { label: "IVA 2%", value: "iva_2", group: "IVA" },
+  { label: "IVA 0%", value: "iva_0", group: "IVA" },
+  { label: "Exenta", value: "iva_exenta", group: "IVA" },
+  { label: "No sujeto", value: "iva_no_sujeto", group: "IVA" },
+  { label: "Iva Intracomunitario Bienes", value: "iva_intracomunitario_bienes", group: "IVA" },
+  { label: "Iva Intracomunitario Servicio", value: "iva_intracomunitario_servicio", group: "IVA" },
+  { label: "Exportación", value: "iva_exportacion", group: "IVA" },
+  { label: "Inv. Suj. Pasivo", value: "iva_inversion_sujeto_pasivo", group: "IVA" },
+
+  { label: "Retención 35%", value: "retencion_35", group: "Retención" },
+  { label: "Retención 19%", value: "retencion_19", group: "Retención" },
+  { label: "Retención 15%", value: "retencion_15", group: "Retención" },
+  { label: "Retención 7%", value: "retencion_7", group: "Retención" },
+  { label: "Retención 2%", value: "retencion_2", group: "Retención" },
+
+  { label: "REC 5,2%", value: "rec_5_2", group: "Recargo de equivalencia" },
+  { label: "REC 1,75%", value: "rec_1_75", group: "Recargo de equivalencia" },
+  { label: "REC 1,4%", value: "rec_1_4", group: "Recargo de equivalencia" },
+  { label: "REC 1%", value: "rec_1", group: "Recargo de equivalencia" },
+  { label: "REC 0,62%", value: "rec_0_62", group: "Recargo de equivalencia" },
+  { label: "REC 0,5%", value: "rec_0_5", group: "Recargo de equivalencia" },
+  { label: "REC 0,26%", value: "rec_0_26", group: "Recargo de equivalencia" },
+  { label: "REC 0%", value: "rec_0", group: "Recargo de equivalencia" },
+];
--- a/modules/customers/src/common/locales/en.json
+++ b/modules/customers/src/common/locales/en.json
@ -62,6 +62,11 @@
      "placeholder": "Enter street",
      "description": "The street address of the customer"
    },
+    "street2": {
+      "label": "Street",
+      "placeholder": "Enter street",
+      "description": "The street address of the customer"
+    },
    "city": {
      "label": "City",
      "placeholder": "Enter city",
--- a/modules/customers/src/common/locales/es.json
+++ b/modules/customers/src/common/locales/es.json
@ -64,6 +64,11 @@
      "placeholder": "Ingrese la calle",
      "description": "La dirección de la calle del cliente"
    },
+    "street2": {
+      "label": "Calle",
+      "placeholder": "Ingrese la calle",
+      "description": "La dirección de la calle del cliente"
+    },
    "city": {
      "label": "Ciudad",
      "placeholder": "Ingrese la ciudad",
--- a/modules/customers/src/web/constants/customer.constants.ts
+++ b/modules/customers/src/web/constants/customer.constants.ts
@ -1,12 +1,12 @@
 export const COUNTRY_OPTIONS = [
-  { value: "ES", label: "España" },
-  { value: "FR", label: "Francia" },
-  { value: "DE", label: "Alemania" },
-  { value: "IT", label: "Italia" },
-  { value: "PT", label: "Portugal" },
-  { value: "US", label: "Estados Unidos" },
-  { value: "MX", label: "México" },
-  { value: "AR", label: "Argentina" },
+  { value: "es", label: "España" },
+  { value: "fr", label: "Francia" },
+  { value: "de", label: "Alemania" },
+  { value: "it", label: "Italia" },
+  { value: "pt", label: "Portugal" },
+  { value: "us", label: "Estados Unidos" },
+  { value: "mx", label: "México" },
+  { value: "ar", label: "Argentina" },
 ] as const;

 export const LANGUAGE_OPTIONS = [
--- a/modules/customers/src/web/pages/update/customer-additional-config-fields.tsx
+++ b/modules/customers/src/web/pages/update/customer-additional-config-fields.tsx
@ -16,7 +16,7 @@ export const CustomerAdditionalConfigFields = () => {
  const { control } = useForm();

  return (
-    <Card className='border-0 shadow-none bg-sidebar'>
+    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.preferences.title")}</CardTitle>
        <CardDescription>{t("form_groups.preferences.description")}</CardDescription>
--- a/modules/customers/src/web/pages/update/customer-address-fields.tsx
+++ b/modules/customers/src/web/pages/update/customer-address-fields.tsx
@ -13,54 +13,65 @@ export function CustomerAddressFields({ control }: { control: any }) {
  const { t } = useTranslation();

  return (
-    <Card className='shadow-none'>
+    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.address.title")}</CardTitle>
        <CardDescription>{t("form_groups.address.description")}</CardDescription>
      </CardHeader>
-      <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
-        <TextField
-          className='xl:col-span-2'
-          control={control}
-          name='street'
-          required
-          label={t("form_fields.street.label")}
-          placeholder={t("form_fields.street.placeholder")}
-          description={t("form_fields.street.description")}
-        />
-        <TextField
-          control={control}
-          name='city'
-          required
-          label={t("form_fields.city.label")}
-          placeholder={t("form_fields.city.placeholder")}
-          description={t("form_fields.city.description")}
-        />
-        <TextField
-          control={control}
-          name='postal_code'
-          required
-          label={t("form_fields.postal_code.label")}
-          placeholder={t("form_fields.postal_code.placeholder")}
-          description={t("form_fields.postal_code.description")}
-        />
-        <TextField
-          control={control}
-          name='province'
-          required
-          label={t("form_fields.province.label")}
-          placeholder={t("form_fields.province.placeholder")}
-          description={t("form_fields.province.description")}
-        />
-        <SelectField
-          control={control}
-          name='country'
-          required
-          label={t("form_fields.country.label")}
-          placeholder={t("form_fields.country.placeholder")}
-          description={t("form_fields.country.description")}
-          items={[...COUNTRY_OPTIONS]}
-        />
+      <CardContent>
+        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 '>
+          <TextField
+            className='lg:col-span-2'
+            control={control}
+            name='street'
+            label={t("form_fields.street.label")}
+            placeholder={t("form_fields.street.placeholder")}
+            description={t("form_fields.street.description")}
+          />
+          <TextField
+            className='lg:col-span-2'
+            control={control}
+            name='street2'
+            label={t("form_fields.street2.label")}
+            placeholder={t("form_fields.street2.placeholder")}
+            description={t("form_fields.street2.description")}
+          />
+
+          <TextField
+            className='lg:col-span-2'
+            control={control}
+            name='city'
+            label={t("form_fields.city.label")}
+            placeholder={t("form_fields.city.placeholder")}
+            description={t("form_fields.city.description")}
+          />
+          <TextField
+            control={control}
+            name='postal_code'
+            label={t("form_fields.postal_code.label")}
+            placeholder={t("form_fields.postal_code.placeholder")}
+            description={t("form_fields.postal_code.description")}
+          />
+        </div>
+        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
+          <TextField
+            className='lg:col-span-2'
+            control={control}
+            name='province'
+            label={t("form_fields.province.label")}
+            placeholder={t("form_fields.province.placeholder")}
+            description={t("form_fields.province.description")}
+          />
+          <SelectField
+            control={control}
+            name='country'
+            required
+            label={t("form_fields.country.label")}
+            placeholder={t("form_fields.country.placeholder")}
+            description={t("form_fields.country.description")}
+            items={[...COUNTRY_OPTIONS]}
+          />
+        </div>
      </CardContent>
    </Card>
  );
--- a/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx
+++ b/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx
@ -20,7 +20,7 @@ export const CustomerBasicInfoFields = ({ control }: { control: any }) => {
  const { t } = useTranslation();

  return (
-    <Card>
+    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>Identificación</CardTitle>
      </CardHeader>
--- a/modules/customers/src/web/pages/update/customer-contact-fields.tsx
+++ b/modules/customers/src/web/pages/update/customer-contact-fields.tsx
@ -19,7 +19,7 @@ export function CustomerContactFields({ control }: { control: any }) {
  const [open, setOpen] = useState(true);

  return (
-    <Card className='shadow-none'>
+    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.contact_info.title")}</CardTitle>
        <CardDescription>{t("form_groups.contact_info.description")}</CardDescription>
@ -55,7 +55,7 @@ export function CustomerContactFields({ control }: { control: any }) {
          />

          <TextField
-            className='lg:col-span-2 xl:'
+            className='lg:col-span-2'
            control={control}
            name='phone_primary'
            label={t("form_fields.phone_primary.label")}
@ -111,7 +111,7 @@ export function CustomerContactFields({ control }: { control: any }) {
            <ChevronDown className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`} />
          </CollapsibleTrigger>
          <CollapsibleContent>
-            <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
+            <div className='grid grid-cols-1 gap-6 lg:grid-cols-4'>
              <div className='sm:col-span-2'>
                <TextField
                  className='xl:col-span-2'
--- a/modules/customers/src/web/pages/update/customer-edit-form.tsx
+++ b/modules/customers/src/web/pages/update/customer-edit-form.tsx
@ -79,6 +79,8 @@ export const CustomerEditForm = ({ defaultValues, onSubmit, isPending }: Custome
          <div className='w-full xl:w-2/3 space-y-12'>
            <CustomerBasicInfoFields control={form.control} />
            <CustomerContactFields control={form.control} />
+            <CustomerAddressFields control={form.control} />
+            <CustomerAdditionalConfigFields control={form.control} />
          </div>
        </div>
      </form>
--- a/packages/rdx-ui/src/components/form/SelectField.tsx
+++ b/packages/rdx-ui/src/components/form/SelectField.tsx
@ -13,7 +13,7 @@ import {
 } from "@repo/shadcn-ui/components";

 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Control, FieldPath, FieldValues, useController, useFormState } from "react-hook-form";
 import { useTranslation } from "../../locales/i18n.ts";

 type SelectFieldProps<TFormValues extends FieldValues> = {
@ -42,6 +42,10 @@ export function SelectField<TFormValues extends FieldValues>({
  className,
 }: SelectFieldProps<TFormValues>) {
  const { t } = useTranslation();
+
+  const { isSubmitting, isValidating } = useFormState({ control, name });
+  const { field, fieldState } = useController({ control, name });
+
  const isDisabled = disabled || readOnly;

  return (
@ -51,9 +55,19 @@ export function SelectField<TFormValues extends FieldValues>({
      render={({ field }) => (
        <FormItem className={cn("space-y-0", className)}>
          {label && (
-            <div className='flex justify-between items-center'>
-              <FormLabel className='m-0'>{label}</FormLabel>
-              {required && <span className='text-xs text-destructive'>{t("common.required")}</span>}
+            <div className='mb-1 flex justify-between gap-2'>
+              <div className='flex items-center gap-2'>
+                <FormLabel htmlFor={name} className='m-0'>
+                  {label}
+                </FormLabel>
+                {required && (
+                  <span className='text-xs text-destructive'>{t("common.required")}</span>
+                )}
+              </div>
+              {/* Punto “unsaved” */}
+              {fieldState.isDirty && (
+                <span className='text-[10px] text-muted-foreground'>{t("common.modified")}</span>
+              )}
            </div>
          )}
          <Select onValueChange={field.onChange} defaultValue={field.value} disabled={isDisabled}>
--- a/packages/rdx-ui/src/components/form/index.tsx
+++ b/packages/rdx-ui/src/components/form/index.tsx
@ -1,6 +1,7 @@
 export * from "./DatePickerField.tsx";
 export * from "./DatePickerInputField.tsx";
 export * from "./form-content.tsx";
+export * from "./multi-select-field.tsx";
 export * from "./SelectField.tsx";
 export * from "./TextAreaField.tsx";
 export * from "./TextField.tsx";
--- a/packages/rdx-ui/src/components/form/multi-select-field.tsx
+++ b/packages/rdx-ui/src/components/form/multi-select-field.tsx
@ -0,0 +1,459 @@
+import {
+  Badge,
+  Button,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Separator,
+} from "@repo/shadcn-ui/components";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+  CheckCircle2Icon,
+  CheckIcon,
+  ChevronDownIcon,
+  Loader2Icon,
+  WandSparklesIcon,
+  XCircleIcon,
+} from "lucide-react";
+import * as React from "react";
+import {
+  type Control,
+  type FieldPath,
+  type FieldValues,
+  useController,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
+
+import { useTranslation } from "../../locales/i18n.ts";
+
+/* -------------------- Variants -------------------- */
+
+const multiSelectFieldVariants = cva(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-primary hover:bg-primary/80 text-primary-foreground",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+/* -------------------- Tipos -------------------- */
+
+export type MultiSelectFieldOptionType = {
+  label: string;
+  value: string;
+  group?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+/**
+ * Props base (visuales y de comportamiento)
+ */
+interface MultiSelectFieldBaseProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof multiSelectFieldVariants> {
+  options: MultiSelectFieldOptionType[];
+  onValueChange?: (values: string[]) => void; // ahora opcional (RHF-first)
+  onValidateOption?: (value: string) => boolean;
+  defaultValue?: string[];
+  placeholder?: string;
+  animation?: number;
+  maxCount?: number;
+  modalPopover?: boolean;
+  asChild?: boolean;
+  className?: string;
+  selectAllVisible?: boolean;
+}
+
+/**
+ * Props adicionales para paridad con TextField (RHF + UX)
+ */
+interface MultiSelectFieldTextFieldLikeProps<T extends FieldValues> {
+  name: FieldPath<T>;
+  control?: Control<T>; // opcional; si no, se usa useFormContext()
+  label?: string;
+  description?: string;
+  required?: boolean;
+  readOnly?: boolean;
+
+  disabledWhileSubmitting?: boolean;
+  showSuccessWhenValid?: boolean;
+  showValidatingSpinner?: boolean;
+}
+
+/**
+ * Props completas
+ */
+export type MultiSelectFieldProps<T extends FieldValues> = MultiSelectFieldBaseProps &
+  MultiSelectFieldTextFieldLikeProps<T>;
+
+/* -------------------- Componente -------------------- */
+
+export const MultiSelectFieldInner = React.forwardRef(
+  <T extends FieldValues>(
+    {
+      // RHF-like
+      name,
+      control: controlProp,
+      label,
+      description,
+      required,
+      readOnly,
+
+      disabledWhileSubmitting = true,
+      showSuccessWhenValid = true,
+      showValidatingSpinner = true,
+
+      // tu API actual
+      options,
+      onValueChange,
+      onValidateOption,
+      variant,
+      defaultValue = [],
+      placeholder,
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      asChild = false,
+      className,
+      selectAllVisible = false,
+
+      // button props, etc.
+      ...buttonProps
+    }: MultiSelectFieldProps<T>,
+    ref: React.Ref<HTMLButtonElement>
+  ) => {
+    const formCtx = useFormContext<T>();
+    const control = controlProp ?? formCtx?.control;
+    if (!control) {
+      throw new Error(
+        "MultiSelectField requiere 'control' o estar dentro de <FormProvider> (useFormContext)."
+      );
+    }
+
+    const { t } = useTranslation();
+
+    // RHF: estado del campo
+    const { field, fieldState } = useController({
+      control,
+      name,
+      defaultValue: undefined,
+    });
+    const { isSubmitting, isValidating } = useFormState({ control, name });
+
+    // Inicializa el valor con defaultValue si RHF no trae nada:
+    React.useEffect(() => {
+      if (!Array.isArray(field.value) || field.value.length === 0) {
+        if (defaultValue.length > 0) field.onChange(defaultValue);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const selectedValues: string[] = Array.isArray(field.value) ? field.value : [];
+
+    const disabled = (disabledWhileSubmitting && isSubmitting) || buttonProps.disabled || readOnly;
+
+    const invalid = fieldState.invalid && (fieldState.isDirty || fieldState.isTouched);
+    const valid =
+      !fieldState.invalid &&
+      (fieldState.isDirty || fieldState.isTouched) &&
+      selectedValues.length > 0;
+
+    // A11y ids
+    const describedById = description ? `${name}-desc` : undefined;
+    const errorId = fieldState.error ? `${name}-err` : undefined;
+
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+
+    // Agrupar opciones
+    const grouped = options.reduce<Record<string, MultiSelectFieldOptionType[]>>((acc, item) => {
+      const key = item.group || "";
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(item);
+      return acc;
+    }, {});
+
+    const emitChange = (values: string[]) => {
+      field.onChange(values);
+      onValueChange?.(values);
+    };
+
+    const toggleOption = (option: string) => {
+      if (onValidateOption && !onValidateOption(option)) {
+        console.warn(`Option "${option}" is not valid.`);
+        return;
+      }
+      const next = selectedValues.includes(option)
+        ? selectedValues.filter((v) => v !== option)
+        : [...selectedValues, option];
+      emitChange(next);
+    };
+
+    const handleClear = () => emitChange([]);
+    const clearExtraOptions = () => emitChange(selectedValues.slice(0, maxCount));
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        emitChange(options.map((o) => o.value));
+      }
+    };
+
+    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") setIsPopoverOpen(true);
+      else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const next = selectedValues.slice(0, -1);
+        emitChange(next);
+      }
+    };
+
+    const buttonAriaDescribedBy = cn(describedById, errorId);
+
+    return (
+      <FormItem className='space-y-0'>
+        {label && (
+          <div className='mb-1 flex items-center gap-2'>
+            <FormLabel className='m-0'>{label}</FormLabel>
+            {required && <span className='text-xs text-destructive'>•</span>}
+            {fieldState.isDirty && (
+              <span className='text-[10px] text-muted-foreground'>(modificado)</span>
+            )}
+          </div>
+        )}
+
+        <FormControl>
+          <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+            <PopoverTrigger asChild>
+              <Button
+                ref={ref}
+                type='button'
+                {...buttonProps}
+                disabled={disabled}
+                onClick={() => setIsPopoverOpen((p) => !p)}
+                aria-invalid={invalid || undefined}
+                aria-describedby={buttonAriaDescribedBy}
+                aria-errormessage={errorId}
+                aria-busy={(showValidatingSpinner && isValidating) || undefined}
+                className={cn(
+                  "flex w-full min-h-10 h-auto items-center justify-between rounded-md border bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto p-1",
+                  invalid && "border-destructive",
+                  valid && showSuccessWhenValid && "border-green-500",
+                  className
+                )}
+              >
+                {/* Contenido del trigger */}
+                {selectedValues.length > 0 ? (
+                  <div className='flex w-full items-center justify-between'>
+                    <div className='flex flex-wrap items-center'>
+                      {selectedValues.slice(0, maxCount).map((value) => {
+                        const option = options.find((o) => o.value === value);
+                        const Icon = option?.icon;
+                        return (
+                          <Badge
+                            key={value}
+                            className={cn(
+                              isAnimating ? "animate-bounce" : "",
+                              multiSelectFieldVariants({ variant })
+                            )}
+                            style={{ animationDuration: `${animation}s` }}
+                          >
+                            {Icon && <Icon className='mr-2 h-4 w-4' />}
+                            {option?.label}
+                          </Badge>
+                        );
+                      })}
+                      {selectedValues.length > maxCount && (
+                        <Badge
+                          className={cn(
+                            "bg-primary text-foreground border-foreground/1 hover:bg-primary",
+                            isAnimating ? "animate-bounce" : "",
+                            multiSelectFieldVariants({ variant })
+                          )}
+                          style={{ animationDuration: `${animation}s` }}
+                        >
+                          {`+ ${selectedValues.length - maxCount} more`}
+                          <XCircleIcon
+                            className='ml-2 h-4 w-4 cursor-pointer'
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              clearExtraOptions();
+                            }}
+                          />
+                        </Badge>
+                      )}
+                    </div>
+
+                    <div className='flex items-center gap-2'>
+                      {showValidatingSpinner && isValidating && (
+                        <Loader2Icon className='h-4 w-4 animate-spin' />
+                      )}
+                      {showSuccessWhenValid && valid && !isValidating && !invalid && (
+                        <CheckCircle2Icon className='h-4 w-4 text-green-600' />
+                      )}
+                      <Separator orientation='vertical' className='flex h-full min-h-6' />
+                      <ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
+                    </div>
+                  </div>
+                ) : (
+                  <div className='mx-auto flex w-full items-center justify-between'>
+                    <span className='mx-3 text-sm text-muted-foreground'>
+                      {placeholder || t("components.multi_select.select_options")}
+                    </span>
+
+                    <div className='flex items-center gap-2'>
+                      {showValidatingSpinner && isValidating && (
+                        <Loader2Icon className='h-4 w-4 animate-spin' />
+                      )}
+                      {showSuccessWhenValid && valid && !isValidating && !invalid && (
+                        <CheckCircle2Icon className='h-4 w-4 text-green-600' />
+                      )}
+                      <ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
+                    </div>
+                  </div>
+                )}
+              </Button>
+            </PopoverTrigger>
+
+            <PopoverContent
+              className='w-auto p-0'
+              align='start'
+              onEscapeKeyDown={() => setIsPopoverOpen(false)}
+            >
+              <Command>
+                <CommandInput placeholder={t("common.search")} onKeyDown={handleInputKeyDown} />
+                <CommandList>
+                  <CommandEmpty>{t("components.multi_select.no_results")}</CommandEmpty>
+
+                  {selectAllVisible && (
+                    <CommandItem key='all' onSelect={toggleAll} className='cursor-pointer'>
+                      <div
+                        className={cn(
+                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                          selectedValues.length === options.length
+                            ? "bg-primary text-primary-foreground"
+                            : "opacity-50 [&_svg]:invisible"
+                        )}
+                      >
+                        <CheckIcon className='h-4 w-4' />
+                      </div>
+                      <span>(Select All)</span>
+                    </CommandItem>
+                  )}
+
+                  {Object.keys(grouped).map((group) => (
+                    <CommandGroup key={`group-${group || "ungrouped"}`} heading={group}>
+                      {grouped[group].map((option) => {
+                        const isSelected = selectedValues.includes(option.value);
+                        const Icon = option.icon;
+                        return (
+                          <CommandItem
+                            key={option.value}
+                            onSelect={() => toggleOption(option.value)}
+                            className='cursor-pointer'
+                          >
+                            <div
+                              className={cn(
+                                "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
+                              )}
+                            >
+                              <CheckIcon
+                                className={cn(
+                                  "h-4 w-4",
+                                  isSelected ? "text-primary-foreground" : ""
+                                )}
+                              />
+                            </div>
+                            {Icon && <Icon className='mr-2 h-4 w-4 text-muted-foreground' />}
+                            <span>{option.label}</span>
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  ))}
+
+                  <CommandSeparator />
+
+                  <CommandGroup>
+                    <div className='flex items-center justify-between'>
+                      {selectedValues.length > 0 && (
+                        <>
+                          <CommandItem
+                            onSelect={handleClear}
+                            className='flex-1 cursor-pointer justify-center'
+                          >
+                            {t("components.multi_select.clear_selection")}
+                          </CommandItem>
+                          <Separator orientation='vertical' className='flex h-full min-h-6' />
+                        </>
+                      )}
+                      <CommandItem
+                        onSelect={() => setIsPopoverOpen(false)}
+                        className='flex-1 cursor-pointer justify-center'
+                      >
+                        {t("components.multi_select.close")}
+                      </CommandItem>
+                    </div>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+
+            {animation! > 0 && selectedValues.length > 0 && (
+              <WandSparklesIcon
+                className={cn(
+                  "my-2 h-3 w-3 cursor-pointer bg-background text-foreground",
+                  isAnimating ? "" : "text-muted-foreground"
+                )}
+                onClick={() => setIsAnimating((s) => !s)}
+              />
+            )}
+          </Popover>
+        </FormControl>
+
+        <div className='mt-1 flex items-start justify-between'>
+          <p
+            id={describedById}
+            className={cn("text-xs text-muted-foreground", !description && "invisible")}
+          >
+            {description || "\u00A0"}
+          </p>
+        </div>
+
+        <FormMessage id={errorId} />
+      </FormItem>
+    );
+  }
+);
+
+MultiSelectFieldInner.displayName = "MultiSelectField";
+
+export const MultiSelectField = MultiSelectFieldInner as <T extends FieldValues>(
+  p: MultiSelectFieldProps<T> & { ref?: React.Ref<HTMLButtonElement> }
+) => React.JSX.Element;
--- a/packages/rdx-ui/src/components/multi-select.tsx
+++ b/packages/rdx-ui/src/components/multi-select.tsx
@ -329,7 +329,9 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                                : "opacity-50 [&_svg]:invisible"
                            )}
                          >
-                            <CheckIcon className='h-4 w-4' />
+                            <CheckIcon
+                              className={cn("h-4 w-4", isSelected ? "text-primary-foreground" : "")}
+                            />
                          </div>
                          {option.icon && (
                            <option.icon className='mr-2 h-4 w-4 text-muted-foreground' />
--- a/packages/shadcn-ui/src/components/label.tsx
+++ b/packages/shadcn-ui/src/components/label.tsx
@ -1,24 +1,21 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";

-import { cn } from "@repo/shadcn-ui/lib/utils"
+import { cn } from "@repo/shadcn-ui/lib/utils";

-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
-      data-slot="label"
+      data-slot='label'
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
-  )
+  );
 }

-export { Label }
+export { Label };
--- a/packages/shadcn-ui/src/styles/globals.css
+++ b/packages/shadcn-ui/src/styles/globals.css
@ -1,3 +1,6 @@
+/*@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");*/
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Mono&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
@import "tailwindcss";
@import "tw-animate-css";

@ -37,6 +40,10 @@
 }

 :root {
+  --font-sans: "Inter", ui-sans-serif, sans-serif, system-ui;
+  --font-serif: "PT Serif", ui-serif, serif;
+  --font-mono: "PT Mono", ui-monospace, monospace;
+
  --background: oklch(1 0 0);
  --foreground: oklch(13.636% 0.02685 282.25);
  --card: oklch(1.0 0 0);
@ -69,9 +76,6 @@
  --sidebar-accent-foreground: oklch(0.2069 0.0098 285.5081);
  --sidebar-border: oklch(0.9173 0.0067 286.2663);
  --sidebar-ring: oklch(0.623 0.214 259.815);
-  --font-sans: Roboto Flex, ui-sans-serif, sans-serif, system-ui;
-  --font-serif: Adamina, ui-serif, serif;
-  --font-mono: Roboto Mono, ui-monospace, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
@ -118,9 +122,6 @@
  --sidebar-accent-foreground: oklch(0.9851 0 0);
  --sidebar-border: oklch(1.0 0 0);
  --sidebar-ring: oklch(0.4915 0.2776 263.8724);
-  --font-sans: Roboto Flex, ui-sans-serif, sans-serif, system-ui;
-  --font-serif: Lora, serif;
-  --font-mono: Roboto Mono, ui-monospace, monospace;
  --radius: 0.4rem;
  --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);