@tuturuuu/ui 0.6.2 → 0.7.0

package/src/components/ui/date-time-picker.tsx

@@ -4,6 +4,7 @@ import { CalendarIcon, Check, Clock, Edit } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
 import { Calendar } from '@tuturuuu/ui/calendar';
 import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import {
   Select,
@@ -12,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@tuturuuu/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { Switch } from '@tuturuuu/ui/switch';
 import { cn } from '@tuturuuu/utils/format';
 import {
   buildDateInTimezone,
@@ -22,7 +23,14 @@ import {
 } from '@tuturuuu/utils/task-date-timezone';
 import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
 import { format, parse } from 'date-fns';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type ReactNode,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Separator } from './separator';
 
 interface DateTimePickerProps {
@@ -42,6 +50,12 @@ interface DateTimePickerProps {
   collisionPadding?: number;
   /** Render the picker inline without a popover (useful inside dialogs) */
   inline?: boolean;
+  timeToggle?: {
+    checked: boolean;
+    disabled?: boolean;
+    label: ReactNode;
+    onCheckedChange: (checked: boolean) => void;
+  };
   preferences?: {
     weekStartsOn?: 0 | 1 | 6;
     timezone?: string;
@@ -82,6 +96,7 @@ export function DateTimePicker({
   align = 'start',
   collisionPadding = 16,
   inline = false,
+  timeToggle,
   preferences,
 }: DateTimePickerProps) {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(date);
@@ -91,12 +106,25 @@ export function DateTimePicker({
     date ? format(date, 'HH:mm') : ''
   );
   const popoverRef = useRef<HTMLDivElement>(null);
+  const timeToggleId = useId();
 
   const tz = useMemo(
     () =>
       preferences?.timezone ? resolveTaskTimezone(preferences.timezone) : null,
     [preferences?.timezone]
   );
+  const resolvedTimezoneLabel = useMemo(() => {
+    if (tz) return tz.replace(/_/g, ' ');
+
+    if (typeof Intl !== 'undefined') {
+      return (
+        Intl.DateTimeFormat().resolvedOptions().timeZone?.replace(/_/g, ' ') ||
+        'Local time'
+      );
+    }
+
+    return 'Local time';
+  }, [tz]);
 
   // Update date directly without casting workaround
   const updateDate = (next?: Date) => {
@@ -189,7 +217,7 @@ export function DateTimePicker({
     }
     setSelectedDate(next);
     updateDate(next);
-    if (!inline) {
+    if (!inline && !showTimeSelect) {
       setIsCalendarOpen(false);
     }
   };
@@ -394,6 +422,83 @@ export function DateTimePicker({
 
   // If the filtered list is empty, show an error message
   const noValidTimes = filteredTimeOptions.length === 0;
+  const selectedTimeValue = date
+    ? (() => {
+        if (tz !== null) {
+          const p = getDatePartsInTimezone(date, tz);
+          return `${p.hour.toString().padStart(2, '0')}:${p.minute.toString().padStart(2, '0')}`;
+        }
+
+        return `${format(date, 'HH')}:${format(date, 'mm')}`;
+      })()
+    : undefined;
+  const selectedDateText = date
+    ? tz !== null
+      ? formatInTimezone(date, tz, 'MMM D, YYYY')
+      : format(date, 'PPP')
+    : null;
+  const selectedTimeText = date
+    ? tz !== null
+      ? formatInTimezone(date, tz, timeFormat === '24h' ? 'HH:mm' : 'h:mm A')
+      : format(date, timePattern)
+    : null;
+
+  const setSelectedValue = (next: Date | undefined) => {
+    setSelectedDate(next);
+    updateDate(next);
+  };
+
+  const handleSetNow = () => {
+    let next = new Date();
+
+    if (minDate && next < minDate) {
+      next = new Date(minDate);
+    }
+
+    if (maxDate && next > maxDate) {
+      next = new Date(maxDate);
+    }
+
+    setSelectedValue(next);
+    if (!inline) {
+      setIsCalendarOpen(false);
+    }
+  };
+
+  const handleSetToday = () => {
+    const now = new Date();
+    const baseDate = selectedDate ?? date ?? now;
+    let next: Date;
+
+    if (tz) {
+      const todayParts = getDatePartsInTimezone(now, tz);
+      const timeParts = showTimeSelect
+        ? getDatePartsInTimezone(baseDate, tz)
+        : { hour: 0, minute: 0 };
+
+      next = buildDateInTimezone(
+        todayParts.year,
+        todayParts.month,
+        todayParts.day,
+        timeParts.hour,
+        timeParts.minute,
+        tz
+      );
+    } else {
+      next = new Date(now);
+
+      if (showTimeSelect) {
+        next.setHours(baseDate.getHours(), baseDate.getMinutes(), 0, 0);
+      } else {
+        next.setHours(0, 0, 0, 0);
+      }
+    }
+
+    setSelectedValue(next);
+    if (!inline && !showTimeSelect) {
+      setIsCalendarOpen(false);
+    }
+  };
 
   // Shared calendar disabled dates config
   const calendarDisabled =
@@ -424,205 +529,192 @@ export function DateTimePicker({
         ]
       : undefined;
 
-  // Inline content (used both for inline mode and popover content)
-  const pickerContent = showTimeSelect ? (
-    <Tabs defaultValue="date" className="w-full p-2">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger
-          value="date"
-          className="flex items-center gap-1"
-          aria-label="Select date"
+  const timeControl = showTimeSelect ? (
+    <div className="flex min-w-0 flex-col gap-3 border-t p-3 sm:w-52 sm:border-t-0 sm:border-l">
+      <div className="space-y-1">
+        <div className="flex items-center gap-2 font-medium text-sm">
+          <Clock className="h-4 w-4 text-muted-foreground" />
+          <span>Time</span>
+        </div>
+        <div className="truncate text-muted-foreground text-xs">
+          {resolvedTimezoneLabel}
+        </div>
+      </div>
+
+      {isManualTimeEntry ? (
+        <div className="flex items-center gap-2">
+          <Input
+            value={manualTimeInput}
+            onChange={(e) => setManualTimeInput(e.target.value)}
+            onKeyDown={handleManualTimeKeyDown}
+            placeholder="HH:MM"
+            className="h-9 flex-1"
+            aria-label="Enter time manually in HH:MM"
+          />
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-9 w-9"
+            onClick={() => handleManualTimeSubmit()}
+            aria-label="Confirm manual time"
+          >
+            <Check className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <Select
+            value={noValidTimes ? undefined : selectedTimeValue}
+            onValueChange={handleTimeChange}
+            disabled={noValidTimes}
+            aria-label="Time options"
+          >
+            <SelectTrigger className="h-9 flex-1">
+              <SelectValue
+                placeholder={
+                  noValidTimes ? 'Invalid time selection' : 'Select time'
+                }
+              />
+            </SelectTrigger>
+            <SelectContent className="max-h-64">
+              {filteredTimeOptions.map((time) => (
+                <SelectItem key={time.value} value={time.value}>
+                  {time.display}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-9 w-9"
+            onClick={() => setIsManualTimeEntry(true)}
+            title="Enter time manually"
+            aria-label="Switch to manual time entry"
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-2">
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          onClick={handleSetToday}
         >
-          <CalendarIcon className="h-3 w-3" />
-          Date
-        </TabsTrigger>
-        <TabsTrigger
-          value="time"
-          className="flex items-center gap-1"
-          disabled={noValidTimes}
-          aria-label="Select time"
+          Today
+        </Button>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          onClick={handleSetNow}
+          aria-label="Set to now"
         >
-          <Clock className="h-3 w-3" />
-          Time
-        </TabsTrigger>
-      </TabsList>
-
-      <Separator />
-
-      <TabsContent value="date" className="mt-0 p-0">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={handleSelect}
-          onSubmit={(date) => {
-            handleSelect(date);
-          }}
-          autoFocus
-          disabled={calendarDisabled}
-          preferences={preferences}
-          aria-label="Calendar selector"
-        />
-      </TabsContent>
-
-      <TabsContent value="time" className="mt-0 min-w-xs p-0">
-        <div className="space-y-4 p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Clock className="h-4 w-4 text-muted-foreground" />
-              <span className="font-medium text-sm">Select time</span>
-            </div>
-            <span className="text-muted-foreground text-xs">
-              {date
-                ? tz !== null
-                  ? formatInTimezone(date, tz, 'MMM D, YYYY')
-                  : format(date, 'MMM d, yyyy')
-                : ''}
-            </span>
+          Now
+        </Button>
+      </div>
+
+      {noValidTimes && (
+        <div className="text-destructive text-xs">
+          No valid end times available. Please select an earlier start time or
+          check your time selection.
+        </div>
+      )}
+    </div>
+  ) : null;
+
+  // Inline content (used both for inline mode and popover content)
+  const pickerContent = (
+    <div className="overflow-hidden">
+      {date && (
+        <div className="border-b bg-muted/30 px-3 py-2">
+          <div className="flex min-w-0 items-center gap-2 text-sm">
+            <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <span className="truncate font-medium">{selectedDateText}</span>
+            {showTimeSelect && selectedTimeText && (
+              <>
+                <span className="shrink-0 text-muted-foreground">•</span>
+                <span className="truncate text-muted-foreground">
+                  {selectedTimeText}
+                </span>
+              </>
+            )}
           </div>
+        </div>
+      )}
 
-          {isManualTimeEntry ? (
+      <div className="flex flex-col sm:flex-row">
+        <div className="p-2">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={handleSelect}
+            onSubmit={(date) => {
+              handleSelect(date);
+              if (!inline && !showTimeSelect) {
+                setIsCalendarOpen(false);
+              }
+            }}
+            autoFocus
+            disabled={calendarDisabled}
+            preferences={preferences}
+            aria-label="Calendar selector"
+          />
+        </div>
+        {timeControl}
+      </div>
+
+      {showFooterControls && !inline && (
+        <>
+          <Separator />
+          <div className="flex flex-wrap items-center justify-between gap-2 p-2">
             <div className="flex items-center gap-2">
-              <Input
-                value={manualTimeInput}
-                onChange={(e) => setManualTimeInput(e.target.value)}
-                onKeyDown={handleManualTimeKeyDown}
-                placeholder="HH:MM"
-                className="flex-1"
-                aria-label="Enter time manually in HH:MM"
-              />
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => handleManualTimeSubmit()}
-                aria-label="Confirm manual time"
-              >
-                <Check className="h-4 w-4" />
-              </Button>
+              {allowClear && (date || selectedDate) && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedValue(undefined);
+                    setIsCalendarOpen(false);
+                  }}
+                  aria-label="Clear selection"
+                >
+                  Clear
+                </Button>
+              )}
             </div>
-          ) : (
             <div className="flex items-center gap-2">
-              <Select
-                value={
-                  noValidTimes
-                    ? undefined
-                    : date
-                      ? (() => {
-                          if (tz !== null) {
-                            const p = getDatePartsInTimezone(date, tz);
-                            return `${p.hour.toString().padStart(2, '0')}:${p.minute.toString().padStart(2, '0')}`;
-                          }
-                          return `${format(date, 'HH')}:${format(date, 'mm')}`;
-                        })()
-                      : undefined
-                }
-                onValueChange={handleTimeChange}
-                disabled={noValidTimes}
-                aria-label="Time options"
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue
-                    placeholder={
-                      noValidTimes ? 'Invalid time selection' : 'Select time'
-                    }
-                  />
-                </SelectTrigger>
-                <SelectContent className="max-h-50">
-                  {filteredTimeOptions.map((time) => (
-                    <SelectItem key={time.value} value={time.value}>
-                      {time.display}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              {!showTimeSelect && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleSetToday}
+                >
+                  Today
+                </Button>
+              )}
               <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setIsManualTimeEntry(true)}
-                title="Enter time manually"
-                aria-label="Switch to manual time entry"
-              >
-                <Edit className="h-4 w-4" />
-              </Button>
-            </div>
-          )}
-
-          {noValidTimes && (
-            <div className="text-destructive text-xs">
-              No valid end times available. Please select an earlier start time
-              or check your time selection.
-            </div>
-          )}
-        </div>
-      </TabsContent>
-      {showFooterControls && !inline && (
-        <div className="flex items-center justify-between border-t p-2">
-          <div className="flex items-center gap-2">
-            {allowClear && (date || selectedDate) && (
-              <Button
-                variant="ghost"
+                variant="default"
                 size="sm"
                 onClick={() => {
-                  setSelectedDate(undefined);
-                  updateDate(undefined);
+                  if (isManualTimeEntry) {
+                    handleManualTimeSubmit();
+                  }
                   setIsCalendarOpen(false);
                 }}
-                aria-label="Clear selection"
+                aria-label="Done"
               >
-                Clear
+                Done
               </Button>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                const now = new Date();
-                let next = now;
-                if (minDate && now < minDate) {
-                  next = new Date(minDate);
-                }
-                setSelectedDate(next);
-                setDate(next);
-                setIsCalendarOpen(false);
-              }}
-              aria-label="Set to now"
-            >
-              Now
-            </Button>
-            <Button
-              variant="default"
-              size="sm"
-              onClick={() => {
-                if (isManualTimeEntry) {
-                  handleManualTimeSubmit();
-                }
-                setIsCalendarOpen(false);
-              }}
-              aria-label="Done"
-            >
-              Done
-            </Button>
+            </div>
           </div>
-        </div>
+        </>
       )}
-    </Tabs>
-  ) : (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={handleSelect}
-      onSubmit={(date) => {
-        handleSelect(date);
-        if (!inline) {
-          setIsCalendarOpen(false);
-        }
-      }}
-      autoFocus
-      disabled={calendarDisabled}
-      preferences={preferences}
-      aria-label="Calendar selector"
-    />
+    </div>
   );
 
   // Inline mode: render content directly without popover
@@ -635,60 +727,86 @@ export function DateTimePicker({
   }
 
   // Popover mode (default)
+  const triggerButton = (
+    <Button
+      ref={pickerButtonRef}
+      variant={timeToggle ? 'ghost' : 'outline'}
+      className={cn(
+        'min-h-10 justify-start text-left font-normal',
+        timeToggle
+          ? 'min-w-0 flex-1 rounded-none border-0 px-3 shadow-none hover:bg-transparent'
+          : 'w-full',
+        !date && 'text-muted-foreground'
+      )}
+      disabled={disabled}
+      aria-label={
+        date
+          ? `Selected ${
+              tz !== null
+                ? formatInTimezone(
+                    date,
+                    tz,
+                    `MMM D, YYYY ${timeFormat === '24h' ? 'HH:mm' : 'h:mm A'}`
+                  )
+                : format(date, `PPP ${timePattern}`)
+            }`
+          : 'Open date and time picker'
+      }
+    >
+      <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />
+      {date ? (
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
+          <span className="truncate">{selectedDateText}</span>
+          {showTimeSelect && selectedTimeText && (
+            <>
+              <span className="text-muted-foreground">•</span>
+              <span className="truncate text-muted-foreground">
+                {selectedTimeText}
+              </span>
+            </>
+          )}
+        </div>
+      ) : (
+        <span>Pick a date{showTimeSelect ? ' and time' : ''}</span>
+      )}
+    </Button>
+  );
+
   return (
     <div className="w-full" ref={popoverRef}>
       <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            ref={pickerButtonRef}
-            variant="outline"
+        {timeToggle ? (
+          <div
             className={cn(
-              'w-full justify-start text-left font-normal',
-              !date && 'text-muted-foreground'
+              'flex w-full overflow-hidden rounded-md border bg-background shadow-xs transition-colors',
+              disabled && 'cursor-not-allowed opacity-60'
             )}
-            disabled={disabled}
-            aria-label={
-              date
-                ? `Selected ${
-                    tz !== null
-                      ? formatInTimezone(
-                          date,
-                          tz,
-                          `MMM D, YYYY ${timeFormat === '24h' ? 'HH:mm' : 'h:mm A'}`
-                        )
-                      : format(date, `PPP ${timePattern}`)
-                  }`
-                : 'Open date and time picker'
-            }
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date ? (
-              <div className="flex items-center gap-2">
-                <span>
-                  {tz !== null
-                    ? formatInTimezone(date, tz, 'MMM D, YYYY')
-                    : format(date, 'PPP')}
-                </span>
-                {showTimeSelect && (
-                  <>
-                    <span className="text-muted-foreground">•</span>
-                    <span className="text-muted-foreground">
-                      {tz !== null
-                        ? formatInTimezone(
-                            date,
-                            tz,
-                            timeFormat === '24h' ? 'HH:mm' : 'h:mm A'
-                          )
-                        : format(date, timePattern)}
-                    </span>
-                  </>
-                )}
-              </div>
-            ) : (
-              <span>Pick a date{showTimeSelect ? ' and time' : ''}</span>
-            )}
-          </Button>
-        </PopoverTrigger>
+            <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
+            <div className="flex min-w-36 shrink-0 items-center justify-between gap-2 border-l bg-muted/30 px-3">
+              <Label
+                htmlFor={timeToggleId}
+                className="flex min-w-0 items-center gap-2 font-medium text-sm"
+              >
+                <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <span className="truncate">{timeToggle.label}</span>
+              </Label>
+              <Switch
+                id={timeToggleId}
+                checked={timeToggle.checked}
+                onCheckedChange={timeToggle.onCheckedChange}
+                disabled={disabled || timeToggle.disabled}
+                aria-label={
+                  typeof timeToggle.label === 'string'
+                    ? timeToggle.label
+                    : undefined
+                }
+              />
+            </div>
+          </div>
+        ) : (
+          <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
+        )}
         <PopoverContent
           className="flex max-h-[85vh] w-auto max-w-[calc(100vw-1rem)] flex-col p-0 sm:max-w-[calc(100vw-2rem)]"
           align={align}