banhaten 0.1.2 → 0.2.0

package/registry/components/date-picker.tsx

@@ -11,6 +11,7 @@ import {
 import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
 import {
   addMonths,
   formatCalendarDate,
@@ -34,6 +35,8 @@ import type {
   RangeCalendarType,
 } from "./date-picker-state"
 
+type ControlDensity = "compact" | "default" | "comfortable"
+
 type CalendarTimeValue = {
   hours?: string
   minutes?: string
@@ -45,6 +48,7 @@ type CalendarMonthYearItem = {
   id?: string
   month: React.ReactNode
   year: React.ReactNode
+  value?: Date
   selected?: boolean
   disabled?: boolean
 }
@@ -111,6 +115,7 @@ type DatePickerProps = Omit<
   >
   defaultOpen?: boolean
   defaultValue?: Date
+  density?: ControlDensity
   dir?: DatePickerDirection
   disabled?: boolean
   icon?: React.ReactNode
@@ -119,6 +124,10 @@ type DatePickerProps = Omit<
   open?: boolean
   placeholder?: React.ReactNode
   triggerClassName?: string
+  triggerProps?: Omit<
+    DatePickerTriggerProps,
+    "density" | "icon" | "open" | "placeholder" | "value"
+  >
   value?: Date
 }
 
@@ -132,6 +141,7 @@ type DateRangePickerProps = Omit<
   >
   defaultOpen?: boolean
   defaultValue?: CalendarRange
+  density?: ControlDensity
   dir?: DatePickerDirection
   disabled?: boolean
   icon?: React.ReactNode
@@ -140,43 +150,16 @@ type DateRangePickerProps = Omit<
   open?: boolean
   placeholder?: React.ReactNode
   triggerClassName?: string
+  triggerProps?: Omit<
+    DatePickerTriggerProps,
+    "density" | "icon" | "open" | "placeholder" | "value"
+  >
   type?: RangeCalendarType
   value?: CalendarRange
 }
 
-const defaultDisplayMonth = new Date(2050, 6, 1)
-const defaultSelectedDate = new Date(2050, 6, 18)
-const defaultRange: CalendarRange = {
-  from: new Date(2050, 6, 15),
-  to: new Date(2050, 7, 23),
-}
-const defaultTimeValue: Required<CalendarTimeValue> = {
-  hours: "05",
-  minutes: "21",
-  period: "AM",
-  zone: "GTM-3",
-}
+const defaultTimeValue = getCurrentTimeValue()
 const defaultDayLabels = ["S", "M", "T", "W", "T", "F", "S"]
-const defaultMonthYearItems: CalendarMonthYearItem[] = [
-  { month: "April", year: "2023" },
-  { month: "May", year: "2022" },
-  { month: "June", year: "2023" },
-  { month: "July", year: "2024", selected: true },
-  { month: "August", year: "2025" },
-  { month: "September", year: "2026" },
-  { month: "October", year: "2027" },
-]
-const defaultPresets: CalendarPreset[] = [
-  { label: "Today" },
-  { label: "Last 7 days" },
-  { label: "Last 14 days" },
-  { label: "Last 30 days" },
-  { label: "Last 3 months" },
-  { label: "Last 12 months" },
-  { label: "Quarter to date" },
-  { label: "Year to date" },
-  { label: "All time" },
-]
 
 const calendarSurface = cva(
   [
@@ -206,21 +189,33 @@ const calendarSurface = cva(
 
 const pickerTrigger = cva(
   [
-    "group/date-trigger relative flex h-[var(--bh-date-trigger-height)] w-[var(--bh-date-trigger-width)] max-w-full items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)]",
-    "bg-[var(--bh-interactive-input-default)] px-[var(--bh-space-lg-10)] text-start outline-none",
+    "group/date-trigger relative flex w-[var(--bh-date-trigger-width)] max-w-full items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)]",
+    "bg-[var(--bh-interactive-input-default)] text-start outline-none",
     "[--bh-date-trigger-border:var(--bh-border-input)] [--bh-date-trigger-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-date-trigger-border),var(--shadow-component-default)]",
     "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
     "text-[var(--bh-content-default)] shadow-[var(--bh-date-trigger-shadow)] transition-[background-color,box-shadow]",
     "hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--shadow-input-focus-ring)]",
     "disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
-  ]
+  ],
+  {
+    variants: {
+      density: {
+        compact: "h-[var(--bh-button-xs-height)] px-[var(--bh-space-md-8)]",
+        default: "h-[var(--bh-button-sm-height)] px-[var(--bh-space-lg-10)]",
+        comfortable: "h-[var(--bh-date-trigger-height)] px-[var(--bh-space-xl-12)]",
+      },
+    },
+    defaultVariants: {
+      density: "comfortable",
+    },
+  }
 )
 
 const monthButton = cva(
   [
     "flex size-[var(--bh-date-nav-button-size)] shrink-0 items-center justify-center rounded-[var(--bh-control-default)]",
     "bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,box-shadow,color]",
-    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-0",
+    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-[var(--bh-opacity-0)]",
     "[&_svg]:size-[var(--bh-date-nav-icon-size)]",
   ]
 )
@@ -288,18 +283,18 @@ const dateListItem = cva(
 
 function Calendar({
   className,
-  defaultValue = defaultSelectedDate,
+  defaultValue,
   dir,
   displayMonth,
   events,
-  monthYearItems = defaultMonthYearItems,
+  monthYearItems,
   nextLabel = "Next month",
   onDisplayMonthChange,
   onSelect,
   onViewChange,
   previousLabel = "Previous month",
   selectedDate,
-  showTime = true,
+  showTime = false,
   surfaceSize = "calendar",
   timeLabel = "Time",
   timeValue = defaultTimeValue,
@@ -310,14 +305,16 @@ function Calendar({
 }: CalendarProps) {
   const controlledValue = value ?? selectedDate
   const [internalValue, setInternalValue] = React.useState(defaultValue)
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(
-    startOfMonth(displayMonth ?? controlledValue ?? defaultValue)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(displayMonth ?? controlledValue ?? defaultValue ?? new Date())
   )
   const [internalView, setInternalView] = React.useState<CalendarView>("days")
   const selected = controlledValue ?? internalValue
   const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
   const activeView = view ?? internalView
-  const eventDates = events ?? [new Date(2050, 6, 15)]
+  const eventDates = events ?? []
+  const resolvedMonthYearItems =
+    monthYearItems ?? createMonthYearItems(activeDisplayMonth)
 
   function updateDisplayMonth(nextMonth: Date) {
     const normalized = startOfMonth(nextMonth)
@@ -372,7 +369,14 @@ function Calendar({
       {activeView === "month-year" ? (
         <>
           <div aria-hidden="true" className="h-[var(--bh-date-month-year-spacer-height)] w-full" />
-          <MonthYearList items={monthYearItems} />
+          <MonthYearList
+            items={resolvedMonthYearItems}
+            onSelect={(item) => {
+              if (!item.value) return
+              updateDisplayMonth(item.value)
+              updateView("days")
+            }}
+          />
         </>
       ) : null}
     </div>
@@ -381,17 +385,17 @@ function Calendar({
 
 function RangeCalendar({
   className,
-  defaultValue = defaultRange,
+  defaultValue = {},
   dir,
   displayMonth,
   nextLabel = "Next month",
   onDisplayMonthChange,
   onPresetSelect,
   onSelect,
-  presets = defaultPresets,
+  presets,
   previousLabel = "Previous month",
   showPresets,
-  showTime = true,
+  showTime = false,
   timeLabel = "Time",
   timeValue = defaultTimeValue,
   type = "double",
@@ -399,13 +403,15 @@ function RangeCalendar({
   ...props
 }: RangeCalendarProps) {
   const [internalRange, setInternalRange] = React.useState(defaultValue)
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(
-    startOfMonth(displayMonth ?? defaultValue.from ?? defaultDisplayMonth)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(displayMonth ?? defaultValue.from ?? new Date())
   )
+  const [presetReferenceDate] = React.useState(() => startOfDay(new Date()))
   const selectedRange = normalizeRange(value ?? internalRange)
   const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
   const monthsToRender = type === "single" ? 1 : 2
   const shouldShowPresets = showPresets ?? type === "double-with-presets"
+  const presetItems = presets ?? createDefaultPresets(presetReferenceDate)
   const monthNodes = Array.from({ length: monthsToRender }, (_, index) =>
     addMonths(activeDisplayMonth, index)
   )
@@ -451,12 +457,17 @@ function RangeCalendar({
           data-slot="range-calendar-presets"
           className="grid w-[var(--bh-date-presets-width)] shrink-0 border-e border-[var(--bh-border-subtle)] pe-[var(--bh-space-md-8)]"
         >
-          {presets.map((preset, index) => (
+          {presetItems.map((preset, index) => {
+            const disabled =
+              Boolean(preset.disabled) ||
+              (!preset.range && onPresetSelect === undefined)
+
+            return (
             <button
-              aria-disabled={preset.disabled || undefined}
+              aria-disabled={disabled || undefined}
               className={dateListItem()}
               data-slot="range-calendar-preset"
-              disabled={preset.disabled}
+              disabled={disabled}
               key={preset.id || index}
               type="button"
               onClick={() => selectPreset(preset)}
@@ -465,7 +476,8 @@ function RangeCalendar({
                 {preset.label}
               </span>
             </button>
-          ))}
+            )
+          })}
         </div>
       ) : null}
 
@@ -501,6 +513,7 @@ function DatePicker({
   className,
   defaultOpen = false,
   defaultValue,
+  density,
   dir,
   disabled,
   icon,
@@ -509,13 +522,14 @@ function DatePicker({
   open,
   placeholder = "Select date",
   triggerClassName,
+  triggerProps,
   value,
   ...props
 }: DatePickerProps) {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
   const [internalValue, setInternalValue] = React.useState(defaultValue)
   const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(value ?? defaultValue ?? defaultDisplayMonth)
+    startOfMonth(value ?? defaultValue ?? new Date())
   )
   const selected = value ?? internalValue
   const isOpen = open ?? internalOpen
@@ -550,34 +564,41 @@ function DatePicker({
   }
 
   return (
-    <div
+    <Popover
+      open={isOpen}
+      onOpenChange={updateOpen}
       data-open={isOpen ? "true" : "false"}
       data-slot="date-picker"
       dir={dir}
       className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
       {...props}
     >
-      <DatePickerTrigger
-        disabled={disabled}
-        icon={icon}
-        open={isOpen}
-        placeholder={placeholder}
-        value={selected ? formatCalendarDate(selected, { month: "long" }) : undefined}
-        className={triggerClassName}
-        onClick={() => updateOpen(!isOpen)}
-      />
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          {...triggerProps}
+          disabled={disabled ?? triggerProps?.disabled}
+          density={density}
+          icon={icon}
+          open={isOpen}
+          placeholder={placeholder}
+          value={selected ? formatCalendarDate(selected, { month: "long" }) : undefined}
+          className={cn(triggerClassName, triggerProps?.className)}
+        />
+      </PopoverTrigger>
 
-      {isOpen ? (
+      <PopoverContent
+        align="center"
+        showArrow={false}
+        size="auto"
+        className="w-auto bg-transparent p-0 shadow-none"
+      >
         <Calendar
           {...calendarProps}
-          defaultValue={defaultValue ?? defaultSelectedDate}
+          defaultValue={defaultValue}
           displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
           selectedDate={selected}
           surfaceSize="picker"
-          className={cn(
-            "absolute left-1/2 top-[calc(100%+var(--bh-space-md-8))] z-[var(--bh-z-popover)] -translate-x-1/2",
-            calendarProps?.className
-          )}
+          className={calendarProps?.className}
           dir={calendarProps?.dir ?? dir}
           onDisplayMonthChange={updateDisplayMonth}
           onSelect={(nextDate) => {
@@ -585,8 +606,8 @@ function DatePicker({
             calendarProps?.onSelect?.(nextDate)
           }}
         />
-      ) : null}
-    </div>
+      </PopoverContent>
+    </Popover>
   )
 }
 
@@ -595,6 +616,7 @@ function DateRangePicker({
   className,
   defaultOpen = false,
   defaultValue,
+  density,
   dir,
   disabled,
   icon,
@@ -603,6 +625,7 @@ function DateRangePicker({
   open,
   placeholder = "Select date range",
   triggerClassName,
+  triggerProps,
   type = "double",
   value,
   ...props
@@ -612,7 +635,7 @@ function DateRangePicker({
   const selectedRange = normalizeRange(value ?? internalValue ?? {})
   const isOpen = open ?? internalOpen
   const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(selectedRange.from ?? defaultValue?.from ?? defaultDisplayMonth)
+    startOfMonth(selectedRange.from ?? defaultValue?.from ?? new Date())
   )
   const selectedRangeFromTime = selectedRange.from?.getTime()
 
@@ -645,7 +668,9 @@ function DateRangePicker({
   }
 
   return (
-    <div
+    <Popover
+      open={isOpen}
+      onOpenChange={updateOpen}
       data-open={isOpen ? "true" : "false"}
       data-slot="date-range-picker"
       data-type={type}
@@ -653,27 +678,32 @@ function DateRangePicker({
       className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
       {...props}
     >
-      <DatePickerTrigger
-        disabled={disabled}
-        icon={icon}
-        open={isOpen}
-        placeholder={placeholder}
-        value={formatCalendarRange(selectedRange)}
-        className={triggerClassName}
-        onClick={() => updateOpen(!isOpen)}
-      />
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          {...triggerProps}
+          disabled={disabled ?? triggerProps?.disabled}
+          density={density}
+          icon={icon}
+          open={isOpen}
+          placeholder={placeholder}
+          value={formatCalendarRange(selectedRange)}
+          className={cn(triggerClassName, triggerProps?.className)}
+        />
+      </PopoverTrigger>
 
-      {isOpen ? (
+      <PopoverContent
+        align="center"
+        showArrow={false}
+        size="auto"
+        className="w-auto bg-transparent p-0 shadow-none"
+      >
         <RangeCalendar
           {...calendarProps}
-          defaultValue={defaultValue ?? defaultRange}
+          defaultValue={defaultValue ?? {}}
           displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
           type={type}
           value={selectedRange}
-          className={cn(
-            "absolute left-1/2 top-[calc(100%+var(--bh-space-md-8))] z-[var(--bh-z-popover)] -translate-x-1/2",
-            calendarProps?.className
-          )}
+          className={calendarProps?.className}
           dir={calendarProps?.dir ?? dir}
           onDisplayMonthChange={updateDisplayMonth}
           onSelect={(nextRange) => {
@@ -681,45 +711,54 @@ function DateRangePicker({
             calendarProps?.onSelect?.(nextRange)
           }}
         />
-      ) : null}
-    </div>
+      </PopoverContent>
+    </Popover>
   )
 }
 
+type DatePickerTriggerProps = Omit<
+  React.ComponentProps<"button">,
+  "children" | "value"
+> & {
+  density?: ControlDensity
+  icon?: React.ReactNode
+  open?: boolean
+  placeholder: React.ReactNode
+  value?: React.ReactNode
+}
+
 function DatePickerTrigger({
   className,
+  density,
   disabled,
   icon,
   onClick,
   open,
   placeholder,
+  type = "button",
   value,
-}: {
-  className?: string
-  disabled?: boolean
-  icon?: React.ReactNode
-  onClick?: React.MouseEventHandler<HTMLButtonElement>
-  open?: boolean
-  placeholder: React.ReactNode
-  value?: React.ReactNode
-}) {
+  ...props
+}: DatePickerTriggerProps) {
   const hasValue = hasRenderableContent(value)
 
   return (
     <button
       aria-expanded={open || undefined}
+      data-date-picker-trigger=""
+      data-density={density ?? "comfortable"}
       data-slot="date-picker-trigger"
       disabled={disabled}
-      type="button"
-      className={cn(pickerTrigger(), className)}
+      type={type}
+      className={cn(pickerTrigger({ density }), className)}
       onClick={onClick}
+      {...props}
     >
       <span
         aria-hidden="true"
         data-slot="date-picker-trigger-icon"
         className="flex size-[var(--bh-date-trigger-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] group-disabled/date-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-date-trigger-icon-size)]"
       >
-        {icon ?? <CalendarDaysIcon strokeWidth={1.8} />}
+        {icon ?? <CalendarDaysIcon strokeWidth="var(--bh-icon-stroke-180)" />}
       </span>
       <span
         data-slot="date-picker-trigger-value"
@@ -1003,7 +1042,7 @@ function CalendarTime({
         {label}
       </span>
       <span
-        data-slot="calendar-time-input"
+        data-slot="calendar-time-value"
         className="flex min-h-[var(--bh-date-time-input-min-height)] min-w-0 flex-1 items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] shadow-[var(--shadow-date-time-input)]"
       >
         <CalendarTimeSegment active>{resolved.hours}</CalendarTimeSegment>
@@ -1039,7 +1078,13 @@ function CalendarTimeSegment({
   )
 }
 
-function MonthYearList({ items }: { items: CalendarMonthYearItem[] }) {
+function MonthYearList({
+  items,
+  onSelect,
+}: {
+  items: CalendarMonthYearItem[]
+  onSelect: (item: CalendarMonthYearItem) => void
+}) {
   return (
     <div
       data-slot="calendar-month-year-list"
@@ -1055,8 +1100,9 @@ function MonthYearList({ items }: { items: CalendarMonthYearItem[] }) {
           )}
           data-selected={item.selected ? "true" : undefined}
           data-slot="calendar-month-year-item"
-          disabled={item.disabled}
+          disabled={item.disabled || !item.value}
           key={item.id || index}
+          onClick={() => onSelect(item)}
           type="button"
         >
           <span className="truncate">{item.month}</span>
@@ -1067,6 +1113,99 @@ function MonthYearList({ items }: { items: CalendarMonthYearItem[] }) {
   )
 }
 
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function addDays(date: Date, amount: number) {
+  const next = startOfDay(date)
+  next.setDate(next.getDate() + amount)
+  return next
+}
+
+function createDefaultPresets(today: Date): CalendarPreset[] {
+  const quarterStartMonth = Math.floor(today.getMonth() / 3) * 3
+
+  return [
+    { id: "today", label: "Today", range: { from: today, to: today } },
+    {
+      id: "last-7-days",
+      label: "Last 7 days",
+      range: { from: addDays(today, -6), to: today },
+    },
+    {
+      id: "last-14-days",
+      label: "Last 14 days",
+      range: { from: addDays(today, -13), to: today },
+    },
+    {
+      id: "last-30-days",
+      label: "Last 30 days",
+      range: { from: addDays(today, -29), to: today },
+    },
+    {
+      id: "last-3-months",
+      label: "Last 3 months",
+      range: { from: addMonths(today, -3), to: today },
+    },
+    {
+      id: "last-12-months",
+      label: "Last 12 months",
+      range: { from: addMonths(today, -12), to: today },
+    },
+    {
+      id: "quarter-to-date",
+      label: "Quarter to date",
+      range: {
+        from: new Date(today.getFullYear(), quarterStartMonth, 1),
+        to: today,
+      },
+    },
+    {
+      id: "year-to-date",
+      label: "Year to date",
+      range: { from: new Date(today.getFullYear(), 0, 1), to: today },
+    },
+  ]
+}
+
+function createMonthYearItems(
+  displayMonth: Date
+): CalendarMonthYearItem[] {
+  return Array.from({ length: 7 }, (_, index) => {
+    const value = addMonths(displayMonth, index - 3)
+
+    return {
+      id: `${value.getFullYear()}-${value.getMonth()}`,
+      month: new Intl.DateTimeFormat(undefined, { month: "long" }).format(value),
+      selected: index === 3,
+      value,
+      year: String(value.getFullYear()),
+    }
+  })
+}
+
+function getCurrentTimeValue(): Required<CalendarTimeValue> {
+  const now = new Date()
+  const timeParts = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(now)
+  const zoneParts = new Intl.DateTimeFormat("en-US", {
+    timeZoneName: "short",
+  }).formatToParts(now)
+  const getPart = (parts: Intl.DateTimeFormatPart[], type: string) =>
+    parts.find((part) => part.type === type)?.value ?? ""
+
+  return {
+    hours: getPart(timeParts, "hour"),
+    minutes: getPart(timeParts, "minute"),
+    period: getPart(timeParts, "dayPeriod"),
+    zone: getPart(zoneParts, "timeZoneName") || "UTC",
+  }
+}
+
 function hasRenderableContent(content: React.ReactNode) {
   return (
     content !== undefined &&
@@ -1094,7 +1233,9 @@ export type {
   CalendarView,
   DatePickerDirection,
   DatePickerProps,
+  DatePickerTriggerProps,
   DateRangePickerProps,
+  ControlDensity,
   RangeCalendarProps,
   RangeCalendarType,
 }