@srcroot/ui 0.0.44 → 0.0.46

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";
@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(222.2 84% 4.9%);
-        --foreground: hsl(210 40% 98%);
+.dark {
+    --background: hsl(222.2 84% 4.9%);
+    --foreground: hsl(210 40% 98%);
 
-        --card: hsl(222.2 84% 4.9%);
-        --card-foreground: hsl(210 40% 98%);
+    --card: hsl(222.2 84% 4.9%);
+    --card-foreground: hsl(210 40% 98%);
 
-        --popover: hsl(222.2 84% 4.9%);
-        --popover-foreground: hsl(210 40% 98%);
+    --popover: hsl(222.2 84% 4.9%);
+    --popover-foreground: hsl(210 40% 98%);
 
-        --primary: hsl(210 40% 98%);
-        --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --primary: hsl(210 40% 98%);
+    --primary-foreground: hsl(222.2 47.4% 11.2%);
 
-        --secondary: hsl(217.2 32.6% 17.5%);
-        --secondary-foreground: hsl(210 40% 98%);
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary-foreground: hsl(210 40% 98%);
 
-        --muted: hsl(217.2 32.6% 17.5%);
-        --muted-foreground: hsl(215 20.2% 65.1%);
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted-foreground: hsl(215 20.2% 65.1%);
 
-        --accent: hsl(217.2 32.6% 17.5%);
-        --accent-foreground: hsl(210 40% 98%);
+    --accent: hsl(217.2 32.6% 17.5%);
+    --accent-foreground: hsl(210 40% 98%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(210 40% 98%);
-
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(222.2 47.4% 11.2%);
-
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(222.2 47.4% 11.2%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(210 40% 98%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(222.2 47.4% 11.2%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(222.2 47.4% 11.2%);
 
-        --border: hsl(217.2 32.6% 17.5%);
-        --input: hsl(217.2 32.6% 17.5%);
-        --ring: hsl(212.7 26.8% 83.9%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(222.2 47.4% 11.2%);
 
-        --sidebar-background: hsl(222.2 84% 10%);
-        --sidebar-foreground: hsl(210 40% 98%);
-        --sidebar-primary: hsl(210 40% 98%);
-        --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
-        --sidebar-accent: hsl(217.2 32.6% 17.5%);
-        --sidebar-accent-foreground: hsl(210 40% 98%);
-        --sidebar-border: hsl(217.2 32.6% 17.5%);
-        --sidebar-ring: hsl(212.7 26.8% 83.9%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(222.2 47.4% 11.2%);
+
+    --border: hsl(217.2 32.6% 17.5%);
+    --input: hsl(217.2 32.6% 17.5%);
+    --ring: hsl(212.7 26.8% 83.9%);
+
+    --sidebar-background: hsl(222.2 84% 10%);
+    --sidebar-foreground: hsl(210 40% 98%);
+    --sidebar-primary: hsl(210 40% 98%);
+    --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --sidebar-accent: hsl(217.2 32.6% 17.5%);
+    --sidebar-accent-foreground: hsl(210 40% 98%);
+    --sidebar-border: hsl(217.2 32.6% 17.5%);
+    --sidebar-ring: hsl(212.7 26.8% 83.9%);
 }
 
 body {

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

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(24 9.8% 10%);
-        --foreground: hsl(60 9.1% 97.8%);
+.dark {
+    --background: hsl(24 9.8% 10%);
+    --foreground: hsl(60 9.1% 97.8%);
 
-        --card: hsl(24 9.8% 10%);
-        --card-foreground: hsl(60 9.1% 97.8%);
+    --card: hsl(24 9.8% 10%);
+    --card-foreground: hsl(60 9.1% 97.8%);
 
-        --popover: hsl(24 9.8% 10%);
-        --popover-foreground: hsl(60 9.1% 97.8%);
+    --popover: hsl(24 9.8% 10%);
+    --popover-foreground: hsl(60 9.1% 97.8%);
 
-        --primary: hsl(60 9.1% 97.8%);
-        --primary-foreground: hsl(24 9.8% 10%);
+    --primary: hsl(60 9.1% 97.8%);
+    --primary-foreground: hsl(24 9.8% 10%);
 
-        --secondary: hsl(12 6.5% 15.1%);
-        --secondary-foreground: hsl(60 9.1% 97.8%);
+    --secondary: hsl(12 6.5% 15.1%);
+    --secondary-foreground: hsl(60 9.1% 97.8%);
 
-        --muted: hsl(12 6.5% 15.1%);
-        --muted-foreground: hsl(24 5.4% 63.9%);
+    --muted: hsl(12 6.5% 15.1%);
+    --muted-foreground: hsl(24 5.4% 63.9%);
 
-        --accent: hsl(12 6.5% 15.1%);
-        --accent-foreground: hsl(60 9.1% 97.8%);
+    --accent: hsl(12 6.5% 15.1%);
+    --accent-foreground: hsl(60 9.1% 97.8%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(60 9.1% 97.8%);
-
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(24 9.8% 10%);
-
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(24 9.8% 10%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(60 9.1% 97.8%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(24 9.8% 10%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(24 9.8% 10%);
 
-        --border: hsl(12 6.5% 15.1%);
-        --input: hsl(12 6.5% 15.1%);
-        --ring: hsl(24 5.7% 82.9%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(24 9.8% 10%);
 
-        --sidebar-background: hsl(24 9.8% 14%);
-        --sidebar-foreground: hsl(60 9.1% 97.8%);
-        --sidebar-primary: hsl(60 9.1% 97.8%);
-        --sidebar-primary-foreground: hsl(24 9.8% 10%);
-        --sidebar-accent: hsl(12 6.5% 15.1%);
-        --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
-        --sidebar-border: hsl(12 6.5% 15.1%);
-        --sidebar-ring: hsl(24 5.7% 82.9%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(24 9.8% 10%);
+
+    --border: hsl(12 6.5% 15.1%);
+    --input: hsl(12 6.5% 15.1%);
+    --ring: hsl(24 5.7% 82.9%);
+
+    --sidebar-background: hsl(24 9.8% 14%);
+    --sidebar-foreground: hsl(60 9.1% 97.8%);
+    --sidebar-primary: hsl(60 9.1% 97.8%);
+    --sidebar-primary-foreground: hsl(24 9.8% 10%);
+    --sidebar-accent: hsl(12 6.5% 15.1%);
+    --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
+    --sidebar-border: hsl(12 6.5% 15.1%);
+    --sidebar-ring: hsl(24 5.7% 82.9%);
 }
 
 body {

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

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(246 20% 6%);
-        --foreground: hsl(0 0% 98%);
+.dark {
+    --background: hsl(246 20% 6%);
+    --foreground: hsl(0 0% 98%);
 
-        --card: hsl(246 20% 8%);
-        --card-foreground: hsl(0 0% 98%);
+    --card: hsl(246 20% 8%);
+    --card-foreground: hsl(0 0% 98%);
 
-        --popover: hsl(246 20% 8%);
-        --popover-foreground: hsl(0 0% 98%);
+    --popover: hsl(246 20% 8%);
+    --popover-foreground: hsl(0 0% 98%);
 
-        --primary: hsl(246 80% 65%);
-        --primary-foreground: hsl(246 20% 6%);
+    --primary: hsl(246 80% 65%);
+    --primary-foreground: hsl(246 20% 6%);
 
-        --secondary: hsl(320 85% 60%);
-        --secondary-foreground: hsl(0 0% 100%);
-
-        --muted: hsl(246 20% 15%);
-        --muted-foreground: hsl(246 10% 60%);
-
-        --accent: hsl(320 85% 60%);
-        --accent-foreground: hsl(0 0% 100%);
+    --secondary: hsl(320 85% 60%);
+    --secondary-foreground: hsl(0 0% 100%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(0 0% 98%);
+    --muted: hsl(246 20% 15%);
+    --muted-foreground: hsl(246 10% 60%);
 
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(246 80% 60%);
+    --accent: hsl(320 85% 60%);
+    --accent-foreground: hsl(0 0% 100%);
 
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(246 80% 60%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(246 80% 60%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(246 80% 60%);
 
-        --border: hsl(246 20% 18%);
-        --input: hsl(246 20% 18%);
-        --ring: hsl(246 80% 65%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(246 80% 60%);
 
-        --sidebar-background: hsl(246 20% 10%);
-        --sidebar-foreground: hsl(0 0% 98%);
-        --sidebar-primary: hsl(246 80% 65%);
-        --sidebar-primary-foreground: hsl(246 20% 6%);
-        --sidebar-accent: hsl(320 85% 60%);
-        --sidebar-accent-foreground: hsl(0 0% 100%);
-        --sidebar-border: hsl(246 20% 18%);
-        --sidebar-ring: hsl(246 80% 65%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(246 80% 60%);
+
+    --border: hsl(246 20% 18%);
+    --input: hsl(246 20% 18%);
+    --ring: hsl(246 80% 65%);
+
+    --sidebar-background: hsl(246 20% 10%);
+    --sidebar-foreground: hsl(0 0% 98%);
+    --sidebar-primary: hsl(246 80% 65%);
+    --sidebar-primary-foreground: hsl(246 20% 6%);
+    --sidebar-accent: hsl(320 85% 60%);
+    --sidebar-accent-foreground: hsl(0 0% 100%);
+    --sidebar-border: hsl(246 20% 18%);
+    --sidebar-ring: hsl(246 80% 65%);
 }
 
 body {

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

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(240 10% 3.9%);
-        --foreground: hsl(0 0% 98%);
+.dark {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
 
-        --card: hsl(240 10% 3.9%);
-        --card-foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
 
-        --popover: hsl(240 10% 3.9%);
-        --popover-foreground: hsl(0 0% 98%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
 
-        --primary: hsl(0 0% 98%);
-        --primary-foreground: hsl(240 5.9% 10%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
 
-        --secondary: hsl(240 3.7% 15.9%);
-        --secondary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
 
-        --muted: hsl(240 3.7% 15.9%);
-        --muted-foreground: hsl(240 5% 64.9%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
 
-        --accent: hsl(240 3.7% 15.9%);
-        --accent-foreground: hsl(0 0% 98%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
 
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(240 5.9% 10%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(240 5.9% 10%);
 
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(240 5.9% 10%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(240 5.9% 10%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(240 5.9% 10%);
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(240 5.9% 10%);
 
-        --border: hsl(240 3.7% 15.9%);
-        --input: hsl(240 3.7% 15.9%);
-        --ring: hsl(240 4.9% 83.9%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --ring: hsl(240 4.9% 83.9%);
 
-        --sidebar-background: hsl(240 5.9% 10%);
-        --sidebar-foreground: hsl(240 4.8% 95.9%);
-        --sidebar-primary: hsl(224.3 76.3% 48%);
-        --sidebar-primary-foreground: hsl(0 0% 100%);
-        --sidebar-accent: hsl(240 3.7% 15.9%);
-        --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-        --sidebar-border: hsl(240 3.7% 15.9%);
-        --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    }
+    --sidebar-background: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 body {

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/chart.tsx

@@ -1,7 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { ResponsiveContainer } from "recharts"
+import {
+    Legend as ChartLegendPrimitive,
+    ResponsiveContainer,
+    Tooltip as ChartTooltipPrimitive,
+} from "recharts"
 
 import { cn } from "@/lib/utils"
 
@@ -102,13 +106,19 @@ const ChartTooltip = ChartTooltipPrimitive
 
 const ChartTooltipContent = React.forwardRef<
     HTMLDivElement,
-    React.ComponentProps<typeof ChartTooltipPrimitive> &
+    Omit<React.ComponentProps<typeof ChartTooltipPrimitive>, "payload"> &
     React.ComponentProps<"div"> & {
         hideLabel?: boolean
         hideIndicator?: boolean
         indicator?: "line" | "dot" | "dashed"
         nameKey?: string
         labelKey?: string
+        payload?: any[]
+        label?: any
+        labelFormatter?: any
+        labelClassName?: string
+        formatter?: any
+        color?: string
     }
 >(
     (
@@ -181,7 +191,7 @@ const ChartTooltipContent = React.forwardRef<
             >
                 {!nestLabel ? tooltipLabel : null}
                 <div className="grid gap-1.5">
-                    {payload.map((item, index) => {
+                    {payload.map((item: any, index: number) => {
                         const key = `${nameKey || item.name || item.dataKey || "value"}`
                         const itemConfig = getPayloadConfigFromPayload(config, item, key)
                         const indicatorColor = color || item.payload.fill || item.color
@@ -257,7 +267,9 @@ const ChartLegend = ChartLegendPrimitive
 const ChartLegendContent = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> &
-    Pick<React.ComponentProps<typeof ChartLegendPrimitive>, "payload" | "verticalAlign"> & {
+    {
+        payload?: any[]
+        verticalAlign?: "top" | "middle" | "bottom"
         hideIcon?: boolean
         nameKey?: string
     }
@@ -281,7 +293,7 @@ const ChartLegendContent = React.forwardRef<
                     className
                 )}
             >
-                {payload.map((item) => {
+                {(payload as any[]).map((item) => {
                     const key = `${nameKey || item.dataKey || "value"}`
                     const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
@@ -351,16 +363,6 @@ function getPayloadConfigFromPayload(
         : config[key as keyof typeof config]
 }
 
-// Recharts Primitive Imports - We import specific components to avoid large bundle reference but for now let's just use * and assume tree shaking or specific imports in consuming app.
-// However, the above code uses RechartsPrimitive.Tooltip and Legend.
-// Ideally we should import them from recharts.
-
-import {
-    Legend as ChartLegendPrimitive,
-    Tooltip as ChartTooltipPrimitive,
-    ResponsiveContainer,
-} from "recharts"
-
 export {
     ChartContainer,
     ChartTooltip,

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>
         )