@srcroot/ui 0.0.45 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

package/src/registry/themes/v3/slate.css

@@ -1,6 +1,6 @@
 /**
  * @srcroot/ui - Slate Theme (Tailwind 3)
- * Cool gray with strong blue undertones (shadcn default)
+ * Cool gray with strong blue undertones (default)
  */
 
 @tailwind base;

package/src/registry/themes/v4/slate.css

@@ -1,6 +1,6 @@
 /**
  * @srcroot/ui - Slate Theme (Tailwind 4)
- * Cool gray with strong blue undertones (shadcn default)
+ * Cool gray with strong blue undertones (default)
  */
 
 @import "tailwindcss";

package/src/registry/ui/calendar.tsx

@@ -72,7 +72,8 @@ function getDaysInMonth(year: number, month: number): Date[] {
     return days
 }
 
-function isSameDay(d1: Date, d2: Date): boolean {
+function isSameDay(d1: Date | undefined | null, d2: Date | undefined | null): boolean {
+    if (!d1 || !d2) return false
     return d1.getDate() === d2.getDate() &&
         d1.getMonth() === d2.getMonth() &&
         d1.getFullYear() === d2.getFullYear()
@@ -509,4 +510,3 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
 Calendar.displayName = "Calendar"
 
 export { Calendar }
-

package/src/registry/ui/date-picker.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { addDays, startOfMonth, endOfMonth } from "date-fns"
 import { Calendar } from "./calendar"
 import { Popover, PopoverContent, PopoverTrigger } from "./popover"
 import { Button } from "./button"
@@ -125,6 +126,31 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
             : mode === "multiple" ? "Pick dates"
                 : "Pick a date range"
 
+        // Presets for Range Mode
+        const presets = [
+            {
+                label: "Last 7 Days",
+                getValue: () => {
+                    const today = new Date()
+                    return [addDays(today, -7), today]
+                },
+            },
+            {
+                label: "Last 30 Days",
+                getValue: () => {
+                    const today = new Date()
+                    return [addDays(today, -30), today]
+                },
+            },
+            {
+                label: "This Month",
+                getValue: () => {
+                    const today = new Date()
+                    return [startOfMonth(today), endOfMonth(today)]
+                },
+            },
+        ]
+
         // Handle selection
         const handleSelect = (value: any) => {
             if (mode === "single") {
@@ -135,10 +161,18 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
             } else {
                 const dates = value || []
                     ; (onSelect as ((dates: Date[]) => void))?.(dates)
-                // Close when range is complete (2 dates)
-                if (dates.length === 2) {
-                    setOpen(false)
-                }
+                // Do not close automatically for range to allow adjustment
+            }
+        }
+
+        const handlePresetSelect = (preset: { getValue: () => Date[] }) => {
+            if (mode === "range") {
+                const dates = preset.getValue()
+                    ; (onSelect as ((dates: Date[]) => void))?.(dates)
+                // Update internal state if uncontrolled (not covered here fully but ensures trigger updates if parent consumes correctly)
+                // For this component to be fully controlled, parent must pass `selected`.
+                // If we want it to close on preset select:
+                setOpen(false)
             }
         }
 
@@ -150,9 +184,8 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
                         variant="outline"
                         disabled={disabled}
                         className={cn(
-                            "w-[280px] justify-start text-left font-normal",
+                            "w-[260px] justify-start text-left font-normal",
                             !displayText && "text-muted-foreground",
-                            numberOfMonths === 2 && "w-[320px]",
                             className
                         )}
                     >
@@ -160,15 +193,31 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
                         {displayText || <span>{placeholder || defaultPlaceholder}</span>}
                     </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                    <Calendar
-                        mode={mode}
-                        numberOfMonths={numberOfMonths}
-                        size={size}
-                        selected={selected}
-                        onSelect={handleSelect}
-                        className="rounded-md border-0 shadow-none"
-                    />
+                <PopoverContent className="w-auto p-0" align="end">
+                    <div className="flex">
+                        {mode === "range" && (
+                            <div className="border-r p-2 space-y-1 w-[140px]">
+                                {presets.map((preset) => (
+                                    <Button
+                                        key={preset.label}
+                                        variant="ghost"
+                                        className="w-full justify-start font-normal"
+                                        onClick={() => handlePresetSelect(preset)}
+                                    >
+                                        {preset.label}
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
+                        <Calendar
+                            mode={mode}
+                            numberOfMonths={numberOfMonths}
+                            size={size}
+                            selected={selected}
+                            onSelect={handleSelect}
+                            className="rounded-md border-0 shadow-none"
+                        />
+                    </div>
                 </PopoverContent>
             </Popover>
         )

package/src/registry/ui/popover.tsx

@@ -83,8 +83,8 @@ PopoverTrigger.displayName = "PopoverTrigger"
 
 const PopoverContent = React.forwardRef<
     HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
+    React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end" }
+>(({ className, children, align = "center", ...props }, ref) => {
     const context = React.useContext(PopoverContext)
     if (!context) throw new Error("PopoverContent must be used within Popover")
 
@@ -121,6 +121,7 @@ const PopoverContent = React.forwardRef<
             ref={ref}
             className={cn(
                 "absolute z-50 mt-2 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                align === "end" ? "right-0" : align === "start" ? "left-0" : "left-1/2 -translate-x-1/2",
                 className
             )}
             onClick={(e) => e.stopPropagation()}