Update libs - Updated shadcn UI components.

package.json

@@ -12,22 +12,21 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.2.7",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.1",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.0.2",
+    "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.483.0",
+    "lucide-react": "^0.513.0",
     "react": "^18.2.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.23.0",
@@ -38,20 +37,20 @@
   },
   "devDependencies": {
     "@iconify-icon/react": "^3.0.0",
-    "@types/node": "^20.12.8",
+    "@types/node": "^22.15.30",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.10.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.4",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",

src/components/mode-toggle.tsx

@@ -1,4 +1,4 @@
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { Moon, Sun } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -16,8 +16,8 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

src/components/ui/calendar.tsx

@@ -1,70 +1,210 @@
+"use client";
+
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import {
-import { DayPicker } from "react-day-picker";
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        root: cn("w-fit", defaultClassNames.root),
-        month: "space-y-4",
+        months: cn(
-        caption: "flex justify-center pt-1 relative items-center",
+          "relative flex flex-col gap-4 md:flex-row",
-        caption_label: "text-sm font-medium",
+          defaultClassNames.months,
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
-        nav_button_previous: "absolute left-1",
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav_button_next: "absolute right-1",
+        nav: cn(
-        table: "w-full border-collapse space-y-1",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-        head_row: "flex",
+          defaultClassNames.nav,
-        head_cell:
+        ),
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        button_previous: cn(
-        row: "flex w-full mt-2",
+          buttonVariants({ variant: buttonVariant }),
-        cell: cn(
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          defaultClassNames.button_previous,
-          props.mode === "range"
+        ),
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+        button_next: cn(
-            : "[&:has([aria-selected])]:rounded-md",
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number,
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+          defaultClassNames.day,
         ),
-        day_range_start: "day-range-start",
+        range_start: cn(
-        day_range_end: "day-range-end",
+          "bg-accent rounded-l-md",
-        day_selected:
+          defaultClassNames.range_start,
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        ),
-        day_today: "bg-accent text-accent-foreground",
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        day_outside:
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-          "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        today: cn(
-        day_disabled: "text-muted-foreground opacity-50",
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-        day_range_middle:
+          defaultClassNames.today,
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        ),
-        day_hidden: "invisible",
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled,
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
+        Root: ({ className, rootRef, ...props }) => {
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
       }}
       {...props}
     />
   );
 }
-Calendar.displayName = "Calendar";
 
-export { Calendar };
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

src/components/ui/carousel.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -57,10 +57,7 @@ const Carousel = React.forwardRef<
     ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
-      {
+      { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
       plugins,
     );
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);

src/components/ui/checkbox.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@radix-ui/react-icons";
-
 import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/components/ui/dateRange-picker.tsx

@@ -1,14 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { CalendarIcon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
-import {
+import { DateBefore, DateRange, Matcher, Modifiers } from "react-day-picker";
-  ActiveModifiers,
-  DateBefore,
-  DateRange,
-  Matcher,
-} from "react-day-picker";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -19,6 +13,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Typography } from "./typography";
+import { CalendarIcon } from "lucide-react";
 
 export type UpdateRangeFunction = (newRange: DateRange) => void;
 
@@ -43,7 +38,7 @@ export function DatePickerWithRange({
 
   //TODOME: Si el día es mods.outside, navegar al mes correspondiente.
   // Handle Day change events.
-  const handleDayClickFrom = (day: Date, mods: ActiveModifiers) => {
+  const handleDayClickFrom = (day: Date, mods: Modifiers) => {
     const newDateRange: DateRange = {
       from: mods.selected ? undefined : day,
       to: undefined,
@@ -52,7 +47,7 @@ export function DatePickerWithRange({
     fnUpdateRange(newDateRange);
   };
 
-  const handleDayClickTo = (day: Date, mods: ActiveModifiers) => {
+  const handleDayClickTo = (day: Date, mods: Modifiers) => {
     const newDateRange: DateRange = {
       from: dateRange?.from,
       to: mods.selected ? undefined : day,
@@ -109,7 +104,7 @@ export function DatePickerWithRange({
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="center">
           <Calendar
-            initialFocus
+            autoFocus
             mode="single"
             defaultMonth={dateRange?.from}
             selected={dateRange?.from}
@@ -139,7 +134,7 @@ export function DatePickerWithRange({
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="center">
           <Calendar
-            initialFocus
+            autoFocus
             mode="single"
             defaultMonth={dateRange?.to ?? dateRange?.from}
             selected={dateRange?.to}

src/components/ui/dropdown-menu.tsx

@@ -1,12 +1,7 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
-
 import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -133,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <CircleIcon className="h-4 w-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/components/ui/toast.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { XIcon } from "lucide-react";
 
 const ToastProvider = ToastPrimitives.Provider;
 
@@ -32,9 +32,7 @@ const toastVariants = cva(
           "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
-    defaultVariants: {
+    defaultVariants: { variant: "default" },
-      variant: "default",
-    },
   },
 );
 
@@ -81,7 +79,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <XIcon className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;

src/components/ui/use-toast.ts

@@ -1,4 +1,3 @@
-// Inspired by react-hot-toast library
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "src/components/ui/toast";
@@ -30,22 +29,10 @@ function genId() {
 type ActionType = typeof actionTypes;
 
 type Action =
-  | {
+  | { type: ActionType["ADD_TOAST"]; toast: ToasterToast }
-      type: ActionType["ADD_TOAST"];
+  | { type: ActionType["UPDATE_TOAST"]; toast: Partial<ToasterToast> }
-      toast: ToasterToast;
+  | { type: ActionType["DISMISS_TOAST"]; toastId?: ToasterToast["id"] }
-    }
+  | { type: ActionType["REMOVE_TOAST"]; toastId?: ToasterToast["id"] };
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
 
 interface State {
   toasts: ToasterToast[];
@@ -60,10 +47,7 @@ const addToRemoveQueue = (toastId: string) => {
 
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId);
-    dispatch({
+    dispatch({ type: "REMOVE_TOAST", toastId: toastId });
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
   }, TOAST_REMOVE_DELAY);
 
   toastTimeouts.set(toastId, timeout);
@@ -101,21 +85,13 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
+          t.id === toastId || toastId === undefined ? { ...t, open: false } : t,
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
         ),
       };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
-        return {
+        return { ...state, toasts: [] };
-          ...state,
-          toasts: [],
-        };
       }
       return {
         ...state,
@@ -141,10 +117,7 @@ function toast({ ...props }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>
-    dispatch({
+    dispatch({ type: "UPDATE_TOAST", toast: { ...props, id } });
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
@@ -159,11 +132,7 @@ function toast({ ...props }: Toast) {
     },
   });
 
-  return {
+  return { id: id, dismiss, update };
-    id: id,
-    dismiss,
-    update,
-  };
 }
 
 function useToast() {