update shadcn components, calendar

app/sign-up-form.tsx

@@ -5,7 +5,15 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -14,6 +22,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { signupFormSubmit } from "@/lib/actions";
 import { useState } from "react";
+import { before } from "node:test";
 
 export const signupFormSchema = z.object({
   name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
@@ -51,7 +60,9 @@ export default function SignUp() {
                 <FormControl>
                   <Input placeholder="name@example.com" {...field} />
                 </FormControl>
-                <FormDescription>We will contact you here with information about events.</FormDescription>
+                <FormDescription>
+                  We will contact you here with information about events.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -81,7 +92,10 @@ export default function SignUp() {
                     <FormControl>
                       <Button
                         variant={"outline"}
-                        className={cn("w-[240px] pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                        className={cn(
+                          "w-[240px] pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground"
+                        )}
                       >
                         {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
@@ -95,11 +109,12 @@ export default function SignUp() {
                       showOutsideDays={false}
                       selected={field.value}
                       onSelect={field.onChange}
-                      disabled={(date) => date > youngestDate}
                       defaultMonth={field.value}
-                      fromDate={oldestDate}
+                      startMonth={oldestDate}
-                      toDate={youngestDate}
+                      endMonth={youngestDate}
+                      disabled={[{ before: oldestDate }, { after: youngestDate }]}
                       captionLayout="dropdown"
+                      hideNavigation
                     />
                   </PopoverContent>
                 </Popover>

components/ui/calendar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { ChevronProps, DayPicker, DropdownProps } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
@@ -16,6 +16,41 @@ import {
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
+export function CustomChevron(props: ChevronProps) {
+  if (props.orientation === "left") {
+    return <ChevronLeft className="h-4 w-4" {...props} />;
+  }
+  return <ChevronRight className="h-4 w-4" {...props} />;
+}
+
+export function CustomSelectDropdown(props: DropdownProps) {
+  const { options, value, onChange } = props;
+
+  const handleChange = (value: string) => {
+    if (onChange) {
+      const changeEvent = {
+        target: { value: value },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      onChange(changeEvent);
+    }
+  };
+
+  return (
+    <Select value={value?.toString()} onValueChange={handleChange}>
+      <SelectTrigger className="inline-flex w-2/5 mx-2 mt-2">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent position="popper">
+        {options?.map((option) => (
+          <SelectItem key={option.value} value={option.value.toString()} disabled={option.disabled}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
@@ -24,67 +59,40 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
-        caption: "flex flex-col justify-center pt-1 relative items-stretch space-x-4 w-full",
+        month_caption: "flex flex-col justify-center pt-1 relative items-stretch space-x-4 w-full",
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1"
         ),
-        nav_button_previous: "absolute left-1",
+        button_next: cn(
-        nav_button_next: "absolute right-1",
+          buttonVariants({ variant: "outline" }),
-        table: "w-full border-collapse space-y-1",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1"
-        head_row: "flex",
+        ),
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        month_grid: "w-full border-collapse space-y-1",
-        row: "flex w-full mt-2",
+        weekdays: "flex",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50  first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        day: cn(
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative rounded-md font-normal text-[0.8rem] [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50  first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end: "day-range-end",
+        range_end: "day-range-end",
-        day_selected:
+        selected:
           "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",
+        today: "bg-accent text-accent-foreground",
-        day_outside:
+        outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        Chevron: CustomChevron,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        Dropdown: CustomSelectDropdown,
-        Dropdown: ({ children, value, onChange, ...props }) => {
-          const options = React.Children.toArray(children) as React.ReactElement<
-            React.HTMLProps<HTMLOptionElement>
-          >[];
-          const selected = options.find((child) => child.props.value === value);
-          const handleChange = (value: string) => {
-            const changeEvent = {
-              target: { value },
-            } as React.ChangeEvent<HTMLSelectElement>;
-            onChange?.(changeEvent);
-          };
-          return (
-            <Select value={value?.toString()} onValueChange={(v) => handleChange(v)}>
-              <SelectTrigger className="inline-flex w-2/5 mx-2 mt-2">
-                <SelectValue>{selected?.props?.children}</SelectValue>
-              </SelectTrigger>
-              <SelectContent position="popper">
-                {options?.map((option, id: number) => (
-                  <SelectItem
-                    key={`${option.props.value}-${id}`}
-                    value={option.props.value?.toString() ?? ""}
-                  >
-                    {option.props.children}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          );
-        },
       }}
       {...props}
     />

package.json

@@ -3,45 +3,49 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
+    "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.2",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.1",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.452.0",
-    "next": "14.2.15",
+    "next": "15.2.1",
     "next-plausible": "^3.12.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^10.0.0",
-    "react": "^18",
+    "react": "19.0.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.5.1",
-    "react-dom": "^18",
+    "react-dom": "19.0.0",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.54.2",
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
+    "@types/react": "19.0.10",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "19.0.4",
     "eslint": "8.57.1",
-    "eslint-config-next": "14.2.15",
+    "eslint-config-next": "15.2.1",
     "postcss": "8.4.47",
     "tailwindcss": "3.4.13",
     "turbo": "2.1.3",
     "typescript": "5.6.3"
+  },
+  "overrides": {
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4"
   }
 }

tsconfig.json

@@ -19,7 +19,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "target": "ES2023"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]