@srcroot/ui 0.0.45 → 0.0.48

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "description": "A UI library with polymorphic, accessible React components",
+  "author": "Shifaul Islam",
+  "license": "MIT",
   "type": "module",
   "bin": {
     "srcroot-ui": "./dist/index.js"

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/dropdown-menu.tsx

@@ -277,7 +277,7 @@ const DropdownMenuItem = React.forwardRef<
             tabIndex={disabled ? -1 : 0}
             aria-disabled={disabled}
             className={cn(
-                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer",
                 inset && "pl-8",
                 disabled && "pointer-events-none opacity-50",
                 className

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

package/src/registry/ui/sheet.tsx

@@ -181,7 +181,7 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
                 >
                     {children}
                     <button
-                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
                         onClick={() => context.onOpenChange(false)}
                     >
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/src/registry/ui/sidebar.tsx

@@ -63,7 +63,7 @@ const SidebarProvider = React.forwardRef<
 
     React.useEffect(() => {
         const checkMobile = () => {
-            setIsMobile(window.innerWidth < 1024) // lg breakpoint
+            setIsMobile(window.innerWidth < 768) // md breakpoint
         }
         checkMobile()
         window.addEventListener("resize", checkMobile)
@@ -169,7 +169,7 @@ const Sidebar = React.forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    "group peer hidden md:block text-sidebar-foreground",
+                    "group peer md:block text-sidebar-foreground",
                     className
                 )}
                 data-state={state}
@@ -192,7 +192,7 @@ const Sidebar = React.forwardRef<
                 {/* Actual Fixed Sidebar */}
                 <div
                     className={cn(
-                        "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
+                        "duration-200 fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
                         side === "left"
                             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
                             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -448,14 +448,10 @@ const SidebarMenuButton = React.forwardRef<
         },
         ref
     ) => {
-        const Comp = "button"
-        // manual asChild handling
-        // const Comp = asChild ? Slot : "button"
-        // But we want to avoid Slot if possible per user request?
-        // Actually, if I can use the same cloneElement approach:
+        const { isMobile, state, setOpen } = useSidebar()
 
         const buttonClass = cn(
-            "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+            "cursor-pointer peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
             "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground",
             "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
             "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:group-data-[collapsible=icon]:hidden",
@@ -464,6 +460,13 @@ const SidebarMenuButton = React.forwardRef<
 
         // If tooltip is needed, we should implement it. For now, ignoring complexity of tooltip.
 
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            props.onClick?.(e)
+            if (!isMobile && state === "collapsed") {
+                setOpen(true)
+            }
+        }
+
         if (asChild) {
             const child = React.Children.only(props.children) as React.ReactElement<any>
 
@@ -474,6 +477,10 @@ const SidebarMenuButton = React.forwardRef<
                 "data-sidebar": "menu-button",
                 "data-size": size,
                 ...props,
+                onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+                    handleClick(e)
+                    child.props.onClick?.(e)
+                },
                 children: child.props.children
             })
         }
@@ -485,6 +492,7 @@ const SidebarMenuButton = React.forwardRef<
                 data-size={size}
                 data-active={isActive}
                 className={buttonClass}
+                onClick={handleClick}
                 {...props}
             />
         )

package/src/registry/ui/table.tsx

@@ -23,9 +23,9 @@ import { cn } from "@/lib/utils"
 
 const Table = React.forwardRef<
     HTMLTableElement,
-    React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+    <div className={cn("relative w-full overflow-auto", containerClassName)}>
         <table
             ref={ref}
             className={cn("w-full caption-bottom text-sm", className)}