feat(ui): add calendar + datepicker

components/calendar.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { CaretLeft, CaretRight } from "~/icons";
+
+import { cn } from "~/cn";
+import { buttonVariants } from "~/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      weekStartsOn={1}
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      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 justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        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",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-slate-400 rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_selected:
+          "hover:bg-slate-100 hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-slate-200 text-slate-700",
+        day_outside: "text-slate-400 opacity-50",
+        day_disabled: "text-slate-400 opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <CaretLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <CaretRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

components/datepicker.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "~/icons";
+
+import { cn } from "~/cn";
+import { Button } from "~/button";
+import { Calendar } from "~/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "~/popover";
+import { DayPickerSingleProps } from "react-day-picker";
+
+export type DatePickerProps = Omit<DayPickerSingleProps, "mode">;
+
+function DatePicker({ ...props }: DatePickerProps) {
+  const [date, setDate] = React.useState<Date>();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "justify-start text-left font-normal",
+            !date && "text-slate-400"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+          {...props}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

components/icons.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 export {
+  CaretLeft,
   CaretRight,
   ArrowSquareOut,
   ArrowsClockwise,
@@ -10,5 +11,6 @@ export {
   HardDrives,
   ShieldCheck,
   List,
+  Calendar,
   X,
 } from "@phosphor-icons/react";