51: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"] 52: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"] 53:T460f,// @ts-nocheck 'use client'; import { Button, buttonVariants } from '@/components/website/ui/button'; import { Calendar, type CalendarProps } from '@/components/website/ui/calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover'; import { ScrollArea } from '@/components/website/ui/scroll-area'; import { cn } from '@/lib/utils'; import { parseDate } from 'chrono-node'; import { Calendar as CalendarIcon, LucideTextCursorInput } from 'lucide-react'; import React from 'react'; import type { ActiveModifiers } from 'react-day-picker'; /* -------------------------------------------------------------------------- */ /* Inspired By: */ /* @steventey */ /* ------------------https://dub.co/blog/smart-datetime-picker--------------- */ /* -------------------------------------------------------------------------- */ /** * Utility function that parses dates. * Parses a given date string using the `chrono-node` library. * * @param str - A string representation of a date and time. * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed. */ export const parseDateTime = (str: Date | string) => { if (str instanceof Date) return str; return parseDate(str); }; /** * Converts a given timestamp or the current date and time to a string representation in the local time zone. * format: `HH:mm`, adjusted for the local time zone. * * @param timestamp {Date | string} * @returns A string representation of the timestamp */ export const getDateTimeLocal = (timestamp?: Date): string => { const d = timestamp ? new Date(timestamp) : new Date(); if (d.toString() === 'Invalid Date') return ''; return new Date(d.getTime() - d.getTimezoneOffset() * 60000) .toISOString() .split(':') .slice(0, 2) .join(':'); }; /** * Formats a given date and time object or string into a human-readable string representation. * "MMM D, YYYY h:mm A" (e.g. "Jan 1, 2023 12:00 PM"). * * @param datetime - {Date | string} * @returns A string representation of the date and time */ const formatTimeOnly = (datetime: Date | string) => { return new Date(datetime).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true, }); }; const formatDateOnly = (datetime: Date | string) => { return new Date(datetime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', }); }; const formatDateTime = ( datetime: Date | string, showCalendar: boolean, showTimePicker: boolean ) => { if (!showCalendar && showTimePicker) { return formatTimeOnly(datetime); } if (showCalendar && !showTimePicker) { return formatDateOnly(datetime); } return new Date(datetime).toLocaleTimeString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true, }); }; const inputBase = 'bg-transparent focus:outline-hidden focus:ring-0 focus-within:outline-hidden focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50'; // @source: https://www.perplexity.ai/search/in-javascript-how-RfI7fMtITxKr5c.V9Lv5KA#1 // use this pattern to validate the transformed date string for the natural language input const naturalInputValidationPattern = '^[A-Z][a-z]{2}sd{1,2},sd{4},sd{1,2}:d{2}s[AP]M$'; const DEFAULT_SIZE = 96; /** * Smart time input Docs: {@link: https://shadcn-extension.vercel.app/docs/smart-time-input} */ interface SmartDatetimeInputProps { value?: Date; onValueChange: (date: Date) => void; showCalendar?: boolean; showTimePicker?: boolean; } interface SmartDatetimeInputContextProps extends SmartDatetimeInputProps { Time: string; onTimeChange: (time: string) => void; } const SmartDatetimeInputContext = React.createContext(null); const useSmartDateInput = () => { const context = React.useContext(SmartDatetimeInputContext); if (!context) { throw new Error('useSmartDateInput must be used within SmartDateInputProvider'); } return context; }; export const SmartDatetimeInput = React.forwardRef< HTMLInputElement, Omit< React.InputHTMLAttributes, 'type' | 'ref' | 'value' | 'defaultValue' | 'onBlur' > & SmartDatetimeInputProps >( ( { className, value, onValueChange, placeholder, disabled, showCalendar = true, showTimePicker = true, }, ref ) => { const [Time, setTime] = React.useState(''); const onTimeChange = React.useCallback((time: string) => { setTime(time); }, []); // If neither calendar nor timepicker is specified, show both const shouldShowBoth = showCalendar === showTimePicker; return (

); } ); SmartDatetimeInput.displayName = 'DatetimeInput'; // Make it a standalone component const TimePicker = () => { const { value, onValueChange, Time, onTimeChange } = useSmartDateInput(); const [activeIndex, setActiveIndex] = React.useState(-1); const timestamp = 15; const formateSelectedTime = React.useCallback( (time: string, hour: number, partStamp: number) => { onTimeChange(time); const newVal = value ? new Date(value) : new Date(); // If no value exists, use current date but only set the time newVal.setHours(hour, partStamp === 0 ? Number.parseInt('00') : timestamp * partStamp); onValueChange(newVal); }, [value, onValueChange, onTimeChange] ); const handleKeydown = React.useCallback( (e: React.KeyboardEvent) => { e.stopPropagation(); if (!document) return; const moveNext = () => { const nextIndex = activeIndex + 1 > DEFAULT_SIZE - 1 ? 0 : activeIndex + 1; const currentElm = document.getElementById(`time-${nextIndex}`); currentElm?.focus(); setActiveIndex(nextIndex); }; const movePrev = () => { const prevIndex = activeIndex - 1 < 0 ? DEFAULT_SIZE - 1 : activeIndex - 1; const currentElm = document.getElementById(`time-${prevIndex}`); currentElm?.focus(); setActiveIndex(prevIndex); }; const setElement = () => { const currentElm = document.getElementById(`time-${activeIndex}`); if (!currentElm) return; currentElm.focus(); const timeValue = currentElm.textContent ?? ''; // this should work now haha that hour is what does the trick const PM_AM = timeValue.split(' ')[1]; const PM_AM_hour = Number.parseInt(timeValue.split(' ')[0].split(':')[0]); const hour = PM_AM === 'AM' ? PM_AM_hour === 12 ? 0 : PM_AM_hour : PM_AM_hour === 12 ? 12 : PM_AM_hour + 12; const part = Math.floor(Number.parseInt(timeValue.split(' ')[0].split(':')[1]) / 15); formateSelectedTime(timeValue, hour, part); }; const reset = () => { const currentElm = document.getElementById(`time-${activeIndex}`); currentElm?.blur(); setActiveIndex(-1); }; switch (e.key) { case 'ArrowUp': movePrev(); break; case 'ArrowDown': moveNext(); break; case 'Escape': reset(); break; case 'Enter': setElement(); break; } }, [activeIndex, formateSelectedTime] ); const handleClick = React.useCallback( (hour: number, part: number, PM_AM: string, currentIndex: number) => { formateSelectedTime(`${hour}:${part === 0 ? '00' : timestamp * part} ${PM_AM}`, hour, part); setActiveIndex(currentIndex); }, [formateSelectedTime] ); const currentTime = React.useMemo(() => { const timeVal = Time.split(' ')[0]; return { hours: Number.parseInt(timeVal.split(':')[0]), minutes: Number.parseInt(timeVal.split(':')[1]), }; }, [Time]); React.useEffect(() => { const getCurrentElementTime = () => { const timeVal = Time.split(' ')[0]; const hours = Number.parseInt(timeVal.split(':')[0]); const minutes = Number.parseInt(timeVal.split(':')[1]); const PM_AM = Time.split(' ')[1]; const formatIndex = PM_AM === 'AM' ? hours : hours === 12 ? hours : hours + 12; const formattedHours = formatIndex; console.log(formatIndex); for (let j = 0; j <= 3; j++) { const diff = Math.abs(j * timestamp - minutes); const selected = PM_AM === (formattedHours >= 12 ? 'PM' : 'AM') && (minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp); if (selected) { const trueIndex = activeIndex === -1 ? formattedHours * 4 + j : activeIndex; setActiveIndex(trueIndex); const currentElm = document.getElementById(`time-${trueIndex}`); currentElm?.scrollIntoView({ block: 'center', behavior: 'smooth', }); } } }; getCurrentElementTime(); }, [Time, activeIndex]); const height = React.useMemo(() => { if (!document) return; const calendarElm = document.getElementById('calendar'); if (!calendarElm) return; return calendarElm.style.height; }, []); return (

Time

handleClick(i, part, PM_AM, trueIndex)} onFocus={() => isSuggested && setActiveIndex(trueIndex)} > {currentValue}

); }; const getDefaultPlaceholder = (showCalendar: boolean, showTimePicker: boolean) => { if (!showCalendar && showTimePicker) { return 'e.g. "5pm" or "in 2 hours"'; } if (showCalendar && !showTimePicker) { return 'e.g. "tomorrow" or "next monday"'; } return 'e.g. "tomorrow at 5pm" or "in 2 hours"'; }; const NaturalLanguageInput = React.forwardRef< HTMLInputElement, { placeholder?: string; disabled?: boolean; } >(({ placeholder, ...props }, ref) => { const { value, onValueChange, Time, onTimeChange, showCalendar, showTimePicker } = useSmartDateInput(); const _placeholder = placeholder ?? getDefaultPlaceholder(showCalendar, showTimePicker); const [inputValue, setInputValue] = React.useState(''); React.useEffect(() => { if (!value) { setInputValue(''); return; } const formattedValue = formatDateTime(value, showCalendar, showTimePicker); setInputValue(formattedValue); // Only update time if time picker is shown if (showTimePicker) { const hour = value.getHours(); const timeVal = `${hour >= 12 ? hour % 12 || 12 : hour || 12}:${String( value.getMinutes() ).padStart(2, '0')} ${hour >= 12 ? 'PM' : 'AM'}`; onTimeChange(timeVal); } }, [value, showCalendar, showTimePicker]); const handleParse = React.useCallback( (e: React.ChangeEvent) => { const parsedDateTime = parseDateTime(e.currentTarget.value); if (parsedDateTime) { // If only showing time picker, preserve the current date if (!showCalendar && showTimePicker && value) { parsedDateTime.setFullYear(value.getFullYear(), value.getMonth(), value.getDate()); } // If only showing calendar, preserve the current time if (showCalendar && !showTimePicker && value) { parsedDateTime.setHours(0, 0, 0, 0); } // console.log(parsedDateTime); onValueChange(parsedDateTime); setInputValue(formatDateTime(parsedDateTime, showCalendar, showTimePicker)); if (showTimePicker) { const PM_AM = parsedDateTime.getHours() >= 12 ? 'PM' : 'AM'; const PM_AM_hour = parsedDateTime.getHours(); const hour = PM_AM_hour > 12 ? PM_AM_hour % 12 : PM_AM_hour === 0 || PM_AM_hour === 12 ? 12 : PM_AM_hour; onTimeChange(`${hour}:${String(parsedDateTime.getMinutes()).padStart(2, '0')} ${PM_AM}`); } } }, [value, showCalendar, showTimePicker] ); const handleKeydown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleParse(e as any); } }, [handleParse] ); return ( setInputValue(e.currentTarget.value)} onKeyDown={handleKeydown} onBlur={handleParse} className={cn( 'px-2 mr-0.5 dark:bg-neutral-800 bg-neutral-50 flex-1 border-none h-8 rounded-sm', inputBase )} {...props} /> ); }); NaturalLanguageInput.displayName = 'NaturalLanguageInput'; type DateTimeLocalInputProps = {} & CalendarProps; const DateTimeLocalInput = ({ className, ...props }: DateTimeLocalInputProps) => { const { value, onValueChange, Time, showCalendar, showTimePicker } = useSmartDateInput(); const formateSelectedDate = React.useCallback( (date: Date | undefined, selectedDate: Date, m: ActiveModifiers, e: React.MouseEvent) => { const parsedDateTime = new Date(selectedDate); if (!showTimePicker) { // If only calendar is shown, set time to start of day parsedDateTime.setHours(0, 0, 0, 0); } else if (value) { // If time picker is shown, preserve existing time parsedDateTime.setHours( value.getHours(), value.getMinutes(), value.getSeconds(), value.getMilliseconds() ); } onValueChange(parsedDateTime); }, [value, showTimePicker, onValueChange] ); return (

{showCalendar && ( )} {showTimePicker && }

); }; DateTimeLocalInput.displayName = 'DateTimeLocalInput'; 54:T794,import { Slot } from '@radix-ui/react-slot'; import { type VariantProps, cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const buttonVariants = cva( 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input dark:bg-neutral-800 bg-neutral-50 hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', uilayouts: 'dark:bg-zinc-900 bg-neutral-200 dark:text-white text-black border dark:border-neutral-800', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, } ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( ); } ); Button.displayName = 'Button'; export { Button, buttonVariants }; 55:Ta39,'use client'; import { buttonVariants } from '@/components/website/ui/button'; import { cn } from '@/lib/utils'; import { ChevronLeft, ChevronRight } from 'lucide-react'; import type * as React from 'react'; import { DayPicker } from 'react-day-picker'; export type CalendarProps = React.ComponentProps; function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ); } Calendar.displayName = 'Calendar'; export { Calendar }; 56:T4e7,'use client'; import * as PopoverPrimitive from '@radix-ui/react-popover'; import * as React from 'react'; import { cn } from '@/lib/utils'; const Popover = PopoverPrimitive.Root; const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( )); PopoverContent.displayName = PopoverPrimitive.Content.displayName; export { Popover, PopoverContent, PopoverTrigger }; 57:T684,'use client'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; import * as React from 'react'; import { cn } from '@/lib/utils'; const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )); ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = 'vertical', ...props }, ref) => ( )); ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; export { ScrollArea, ScrollBar }; 50:["$","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","chrono-node@latest",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/chrono-node","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":"chrono-node@latest"}]]}]}],["$","li","react-day-picker@^8.9.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker@^8.9.1"}]]}]}]]}],["$","$L51",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"./registry/components/form/datetime-picker/index.tsx","content":"'use client';\n\nimport { SmartDatetimeInput } from '@/components/ui/datetime-input';\nimport React, { useState } from 'react';\n\nexport default function DatetimePicker() {\n const [selectedDate, setSelectedDate] = useState(undefined);\n\n const handleDateChange = (date: Date) => {\n setSelectedDate(date);\n console.log('Selected date:', date);\n };\n\n return (\n

\n \n {/* {selectedDate && (\n

Selected Date: {selectedDate.toLocaleString()}

\n )} */}\n

\n );\n}\n","type":"registry:component"},{"path":"./components/ui/datetime-input.tsx","content":"$53","type":"registry:component"},{"path":"./components/website/ui/button.tsx","content":"$54","type":"registry:component"},{"path":"./components/website/ui/calendar.tsx","content":"$55","type":"registry:component"},{"path":"./components/website/ui/popover.tsx","content":"$56","type":"registry:component"},{"path":"./components/website/ui/scroll-area.tsx","content":"$57","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]