feat: update day picker to work with later version, add progress

mirascope-ui/ui/calendar.stories.tsx

@@ -1,8 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { addDays } from "date-fns";
+import { addDays, format } from "date-fns";
 
 import { Calendar } from "@/mirascope-ui/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/mirascope-ui/ui/popover";
+import { Button } from "@/mirascope-ui/ui/button";
+import { cn } from "@/mirascope-ui/lib/utils";
+import { CalendarIcon } from "lucide-react";
 
 const meta = {
   title: "UI/Calendar",
@@ -52,9 +56,10 @@ export const Default: Story = {};
  */
 export const SingleSelection: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
     return (
-      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      <div className="w-auto p-0">
+        <Calendar mode="single" autoFocus />
+      </div>
     );
   },
 };
@@ -129,6 +134,31 @@ export const DisabledDates: Story = {
   },
 };
 
+export const ButtonCalendar: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return (
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "w-auto justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date ? format(date, "PPP") : "Start date"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar mode="single" selected={date} onSelect={(date) => setDate(date)} autoFocus />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+};
+
 /**
  * Calendar with a custom CSS class to control the size.
  */

mirascope-ui/ui/calendar.tsx

@@ -1,74 +1,66 @@
 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { DayFlag, DayPicker, SelectionState, UI } from "react-day-picker";
 
 import { cn } from "@/mirascope-ui/lib/utils";
-import { buttonVariants } from "@/mirascope-ui/ui/button";
+import { buttonVariants } from "./button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({
+export const Calendar = ({
   className,
   classNames,
   showOutsideDays = true,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: CalendarProps) => {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
+        [UI.Months]: "relative",
+        [UI.Month]: "space-y-4 ml-0",
+        [UI.MonthCaption]: "flex justify-center items-center h-7",
+        [UI.CaptionLabel]: "text-sm font-medium",
+        [UI.PreviousMonthButton]: cn(
           buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "absolute left-1 top-0 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-x-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          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"
-            : "[&:has([aria-selected])]:rounded-md"
+        [UI.NextMonthButton]: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute right-1 top-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        day: cn(
+        [UI.MonthGrid]: "w-full border-collapse space-y-1",
+        [UI.Weekdays]: "flex",
+        [UI.Weekday]: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        [UI.Week]: "flex w-full mt-2",
+        [UI.Day]:
+          "h-9 w-9 text-center rounded-md text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&: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",
+        [UI.DayButton]: cn(
           buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100 hover:bg-primary hover:text-primary-foreground"
         ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
+        [SelectionState.range_end]: "day-range-end",
+        [SelectionState.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",
-        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        [SelectionState.range_middle]:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        [DayFlag.today]: "bg-accent text-accent-foreground",
+        [DayFlag.outside]:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        [DayFlag.disabled]: "text-muted-foreground opacity-50",
+        [DayFlag.hidden]: "invisible",
         ...classNames,
       }}
       components={{
-        PreviousMonthButton: (props) => (
-          <button {...props}>
-            <ChevronLeft className="size-4" />
-          </button>
+        PreviousMonthButton: ({ className }: { className?: string }) => (
+          <ChevronLeft className={cn("size-4", className)} />
         ),
-        NextMonthButton: (props) => (
-          <button {...props}>
-            <ChevronRight className="size-4" />
-          </button>
+        NextMonthButton: ({ className }: { className?: string }) => (
+          <ChevronRight className={cn("size-4", className)} />
         ),
       }}
       {...props}
     />
   );
-}
-
-export { Calendar };
+};

mirascope-ui/ui/progress.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Progress } from "@/mirascope-ui/ui/progress";
+
+/**
+ * Displays an indicator showing the completion progress of a task, typically
+ * displayed as a progress bar.
+ */
+const meta = {
+  title: "ui/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    "aria-label": "Progress",
+    value: 30,
+    max: 100,
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default form of the progress.
+ */
+export const Default: Story = {};
+
+/**
+ * When the progress is indeterminate.
+ */
+export const Indeterminate: Story = {
+  args: {
+    value: undefined,
+  },
+};
+
+/**
+ * When the progress is completed.
+ */
+export const Completed: Story = {
+  args: {
+    value: 100,
+  },
+};
+
+export const Color: Story = {
+  args: {
+    value: 100,
+    indicatorClassName: "bg-red-500",
+  },
+};

mirascope-ui/ui/progress.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/mirascope-ui/lib/utils";
+
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+  indicatorClassName?: string;
+}) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className={cn("bg-primary h-full w-full flex-1 transition-all", indicatorClassName)}
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };

package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-scroll-area": "^1.2.8",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.6",

registry.json

@@ -416,6 +416,20 @@
         }
       ]
     },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "title": "Progress",
+      "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+      "dependencies": ["@radix-ui/react-progress"],
+      "registryDependencies": ["utils"],
+      "files": [
+        {
+          "path": "mirascope-ui/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "sonner",
       "type": "registry:ui",