50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T47d3,'use client' import { useState, useEffect, useRef } from 'react' import { Button } from '@/components/ui/button' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { ArrowLeft, ChevronLeft, ChevronRight, Globe, Search } from 'lucide-react' import { cn } from '@/lib/utils' import { demoDateTimePickerData } from './demo/form' /** Timezone configuration using IANA timezone identifiers for correct DST handling */ const timezones = [ { id: 'pacific', name: 'Pacific Time - US & Canada', iana: 'America/Los_Angeles' }, { id: 'mountain', name: 'Mountain Time - US & Canada', iana: 'America/Denver' }, { id: 'central', name: 'Central Time - US & Canada', iana: 'America/Chicago' }, { id: 'eastern', name: 'Eastern Time - US & Canada', iana: 'America/New_York' }, { id: 'alaska', name: 'Alaska Time', iana: 'America/Anchorage' }, { id: 'arizona', name: 'Arizona, Yukon Time', iana: 'America/Phoenix' }, { id: 'newfoundland', name: 'Newfoundland Time', iana: 'America/St_Johns' }, { id: 'atlantic', name: 'Atlantic Time - Canada', iana: 'America/Halifax' }, { id: 'london', name: 'London, Dublin, Edinburgh', iana: 'Europe/London' }, { id: 'paris', name: 'Paris, Berlin, Amsterdam', iana: 'Europe/Paris' }, { id: 'athens', name: 'Athens, Helsinki, Istanbul', iana: 'Europe/Athens' }, { id: 'moscow', name: 'Moscow, St. Petersburg', iana: 'Europe/Moscow' }, { id: 'dubai', name: 'Dubai, Abu Dhabi', iana: 'Asia/Dubai' }, { id: 'karachi', name: 'Karachi, Islamabad', iana: 'Asia/Karachi' }, { id: 'dhaka', name: 'Dhaka, Almaty', iana: 'Asia/Dhaka' }, { id: 'bangkok', name: 'Bangkok, Hanoi, Jakarta', iana: 'Asia/Bangkok' }, { id: 'singapore', name: 'Singapore, Hong Kong, Perth', iana: 'Asia/Singapore' }, { id: 'tokyo', name: 'Tokyo, Seoul, Osaka', iana: 'Asia/Tokyo' }, { id: 'sydney', name: 'Sydney, Melbourne, Brisbane', iana: 'Australia/Sydney' }, { id: 'auckland', name: 'Auckland, Wellington', iana: 'Pacific/Auckland' } ] const getTimeForTimezone = (iana: string) => { try { return new Intl.DateTimeFormat('en-US', { timeZone: iana, hour: 'numeric', minute: '2-digit', hour12: true, }).format(new Date()).toLowerCase() } catch { return '' } } /** * ═══════════════════════════════════════════════════════════════════════════ * DateTimePickerProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the DateTimePicker component with calendar view, available time * slots, and timezone selection. */ export interface DateTimePickerProps { data?: { /** Title displayed at the top of the picker. */ title?: string /** Array of dates that can be selected. */ availableDates?: Date[] /** Array of time slot strings (e.g., '11:30am'). */ availableTimeSlots?: string[] /** Default timezone name to display. */ timezone?: string } actions?: { /** Called when the user clicks the Next button. */ onNext?: (date: Date, time: string) => void } appearance?: { /** * Whether to display the title. * @default true */ showTitle?: boolean /** * Whether to show timezone selector. * @default true */ showTimezone?: boolean /** * First day of the week. * - `'sunday'` — US, Canada, Japan (default) * - `'monday'` — ISO 8601, Europe, most of the world * - `'saturday'` — Middle East * @default 'sunday' */ weekStartsOn?: 'sunday' | 'monday' | 'saturday' } control?: { /** Controlled selected date value. */ selectedDate?: Date | null /** Controlled selected time value. */ selectedTime?: string | null } } const ALL_DAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'] const WEEK_START_OFFSETS: Record<'sunday' | 'monday' | 'saturday', number> = { sunday: 0, monday: 1, saturday: 6, } const getOrderedDays = (weekStartsOn: 'sunday' | 'monday' | 'saturday') => { const offset = WEEK_START_OFFSETS[weekStartsOn] return [...ALL_DAYS.slice(offset), ...ALL_DAYS.slice(0, offset)] } const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ] const formatDateHeader = (date: Date) => { const dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()] const monthName = MONTHS[date.getMonth()] return `${dayName}, ${monthName} ${date.getDate()}` } const isSameDay = (date1: Date, date2: Date) => { return ( date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate() ) } /** * A Calendly-style date and time picker with calendar view, available time slots, * and timezone selection. Supports both desktop and mobile layouts. * * Features: * - Monthly calendar navigation with available date highlighting * - Time slot selection with animated transitions * - Searchable timezone dropdown with current time display * - Responsive design with mobile-first time view * - Today indicator and selected date highlighting * - Controlled and uncontrolled modes * * @component * @example * ```tsx * console.log("Selected:", date, time), * onNext: (date, time) => console.log("Proceeding with:", date, time) * }} * appearance={{ showTitle: true, showTimezone: true }} * /> * ``` */ export function DateTimePicker({ data, actions, appearance, control }: DateTimePickerProps) { const resolved: NonNullable = data ?? demoDateTimePickerData const title = resolved.title const availableDates = resolved.availableDates ?? [] const availableTimeSlots = resolved.availableTimeSlots ?? [] const timezone = resolved.timezone const { onNext } = actions ?? {} const { showTitle = true, showTimezone = true, weekStartsOn = 'sunday' } = appearance ?? {} const orderedDays = getOrderedDays(weekStartsOn) const weekStartOffset = WEEK_START_OFFSETS[weekStartsOn] const { selectedDate: controlledDate, selectedTime: controlledTime } = control ?? {} const [currentMonth, setCurrentMonth] = useState(() => { const now = new Date() return new Date(now.getFullYear(), now.getMonth(), 1) }) const [selectedDate, setSelectedDate] = useState(controlledDate ?? null) const [selectedTime, setSelectedTime] = useState(controlledTime ?? null) const [selectedTimezone, setSelectedTimezone] = useState(timezones.find(tz => tz.name === timezone) || timezones[3]) const [timezoneSearch, setTimezoneSearch] = useState('') const [timezoneDropdownOpen, setTimezoneDropdownOpen] = useState(false) const timezoneSearchRef = useRef(null) // Mobile view mode: 'calendar' or 'time' const [mobileView, setMobileView] = useState<'calendar' | 'time'>('calendar') const filteredTimezones = timezones.filter(tz => tz.name.toLowerCase().includes(timezoneSearch.toLowerCase()) ) useEffect(() => { if (timezoneDropdownOpen && timezoneSearchRef.current) { timezoneSearchRef.current.focus() } }, [timezoneDropdownOpen]) const handleTimezoneSelect = (tz: typeof timezones[0]) => { setSelectedTimezone(tz) setTimezoneDropdownOpen(false) setTimezoneSearch('') } const year = currentMonth.getFullYear() const month = currentMonth.getMonth() // Calculate calendar grid const firstDayOfMonth = new Date(year, month, 1).getDay() const daysInMonth = new Date(year, month + 1, 0).getDate() const daysInPrevMonth = new Date(year, month, 0).getDate() const calendarDays: { day: number; isCurrentMonth: boolean; date: Date }[] = [] // Previous month days (adjusted for week start) const leadingDays = (firstDayOfMonth - weekStartOffset + 7) % 7 for (let i = leadingDays - 1; i >= 0; i--) { const day = daysInPrevMonth - i calendarDays.push({ day, isCurrentMonth: false, date: new Date(year, month - 1, day) }) } // Current month days for (let day = 1; day <= daysInMonth; day++) { calendarDays.push({ day, isCurrentMonth: true, date: new Date(year, month, day) }) } // Next month days to fill the grid (6 rows max) const totalCells = Math.ceil(calendarDays.length / 7) * 7 const remainingDays = totalCells - calendarDays.length for (let day = 1; day <= remainingDays; day++) { calendarDays.push({ day, isCurrentMonth: false, date: new Date(year, month + 1, day) }) } const isDateAvailable = (date: Date) => { return availableDates.some(d => isSameDay(d, date)) } const handlePrevMonth = () => { setCurrentMonth(new Date(year, month - 1, 1)) } const handleNextMonth = () => { setCurrentMonth(new Date(year, month + 1, 1)) } const handleDateSelect = (date: Date) => { if (!isDateAvailable(date)) return setSelectedDate(date) setSelectedTime(null) // On mobile, switch to time view when date is selected setMobileView('time') } const handleBackToCalendar = () => { setMobileView('calendar') } const handleTimeSelect = (time: string) => { setSelectedTime(time) } const handleNext = () => { if (selectedDate && selectedTime) { onNext?.(selectedDate, selectedTime) } } const now = new Date() return (

{showTitle && title && (

{title}

)}

{/* Calendar Section - Hidden on mobile when viewing time slots */}

{/* Month Navigation */}

{MONTHS[month]} {year}

{/* Day Headers */}

{orderedDays.map(day => (

{day}

))}

{/* Calendar Grid */}

{calendarDays.map((item, index) => { const isAvailable = item.isCurrentMonth && isDateAvailable(item.date) const isSelected = selectedDate && isSameDay(item.date, selectedDate) const isToday = isSameDay(item.date, now) return ( ) })}

{/* Timezone */} {showTimezone && (

Time zone

setTimezoneSearch(e.target.value)} className="w-full pl-8 pr-3 py-2 text-sm border rounded-md focus:outline-none focus:border-primary bg-background" />

{filteredTimezones.map((tz) => ( ))} {filteredTimezones.length === 0 && (

No timezone found

)}

{/* Time Slots Section - Visible on mobile when viewing times, animated on desktop */}

{/* Back button - Mobile only */}

{selectedDate ? formatDateHeader(selectedDate) : ''}

{availableTimeSlots.map((time) => { const isTimeSelected = selectedTime === time return (

{isTimeSelected && ( )}

) })}

) } 53:T9d1,// Demo data for Form category components // This file contains sample data used for component previews and documentation /** * Generate available dates dynamically so the DateTimePicker preview * always has clickable dates regardless of when it is viewed. */ function generateAvailableDates(): Date[] { const dates: Date[] = []; const now = new Date(); // Walk through current and next month, only keeping weekdays (Mon-Fri) for (let m = 0; m <= 1; m++) { for (let d = 1; d <= 28; d += 2) { const date = new Date(now.getFullYear(), now.getMonth() + m, d); const day = date.getDay(); if (day !== 0 && day !== 6) { dates.push(date); } } } return dates; } export const demoContactFormData = { title: 'Get in Touch', subtitle: "We'd love to hear from you. Fill out the form below.", submitLabel: 'Send Message', } export const demoIssueReportFormData = { title: 'Report an Issue', teams: ['Engineering', 'Product', 'Design', 'Marketing', 'Operations'], locations: ['New York - HQ', 'San Francisco', 'London', 'Remote'], categories: { Software: ['Business App', 'Email', 'VPN', 'Browser', 'OS'], Hardware: ['Computer', 'Monitor', 'Keyboard', 'Mouse', 'Printer'], Network: ['Wi-Fi', 'Ethernet', 'VPN Access'], Access: ['Account', 'Permissions', 'Password Reset'], } as Record, impacts: [ { value: 'critical', label: 'Critical - Work stopped' }, { value: 'high', label: 'High - Major feature broken' }, { value: 'medium', label: 'Medium - Workaround available' }, { value: 'low', label: 'Low - Minor inconvenience' }, ], urgencies: [ { value: 'immediate', label: 'Immediate' }, { value: 'today', label: 'Today' }, { value: 'this-week', label: 'This week' }, { value: 'no-rush', label: 'No rush' }, ], frequencies: [ { value: 'constant', label: 'Constant' }, { value: 'frequent', label: 'Frequent' }, { value: 'occasional', label: 'Occasional' }, { value: 'once', label: 'Happened once' }, ], attemptedActions: [ 'Restarted the application', 'Cleared browser cache', 'Restarted computer', 'Checked internet connection', 'Contacted a colleague', ], } export const demoDateTimePickerData = { title: 'Select a Date & Time', availableDates: generateAvailableDates(), availableTimeSlots: [ '9:00am', '10:00am', '11:30am', '1:00pm', '2:30pm', '4:00pm', ], timezone: 'Eastern Time - US & Canada', }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@manifest","registryDependencies":["button","popover"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/form/date-time-picker.tsx","content":"$52","type":"registry:block","target":"components/ui/date-time-picker.tsx"},{"path":"registry/form/demo/form.ts","content":"$53","type":"registry:lib","target":"components/ui/demo/form.ts"}],"className":"h-[70svh] min-h-80"}]]}]