{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "datetime-input", "dependencies": [ "chrono-node@latest", "react-day-picker@^8.9.1" ], "devDependencies": [], "registryDependencies": [], "files": [ { "path": "./components/ui/datetime-input.tsx", "content": "// @ts-nocheck\n'use client';\n\nimport { Button, buttonVariants } from '@/components/website/ui/button';\nimport { Calendar, type CalendarProps } from '@/components/website/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover';\nimport { ScrollArea } from '@/components/website/ui/scroll-area';\nimport { cn } from '@/lib/utils';\nimport { parseDate } from 'chrono-node';\nimport { Calendar as CalendarIcon, LucideTextCursorInput } from 'lucide-react';\nimport React from 'react';\nimport type { ActiveModifiers } from 'react-day-picker';\n\n/* -------------------------------------------------------------------------- */\n/* Inspired By: */\n/* @steventey */\n/* ------------------https://dub.co/blog/smart-datetime-picker--------------- */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Utility function that parses dates.\n * Parses a given date string using the `chrono-node` library.\n *\n * @param str - A string representation of a date and time.\n * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed.\n */\nexport const parseDateTime = (str: Date | string) => {\n if (str instanceof Date) return str;\n return parseDate(str);\n};\n\n/**\n * Converts a given timestamp or the current date and time to a string representation in the local time zone.\n * format: `HH:mm`, adjusted for the local time zone.\n *\n * @param timestamp {Date | string}\n * @returns A string representation of the timestamp\n */\nexport const getDateTimeLocal = (timestamp?: Date): string => {\n const d = timestamp ? new Date(timestamp) : new Date();\n if (d.toString() === 'Invalid Date') return '';\n return new Date(d.getTime() - d.getTimezoneOffset() * 60000)\n .toISOString()\n .split(':')\n .slice(0, 2)\n .join(':');\n};\n\n/**\n * Formats a given date and time object or string into a human-readable string representation.\n * \"MMM D, YYYY h:mm A\" (e.g. \"Jan 1, 2023 12:00 PM\").\n *\n * @param datetime - {Date | string}\n * @returns A string representation of the date and time\n */\nconst formatTimeOnly = (datetime: Date | string) => {\n return new Date(datetime).toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: 'numeric',\n hour12: true,\n });\n};\n\nconst formatDateOnly = (datetime: Date | string) => {\n return new Date(datetime).toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n};\n\nconst formatDateTime = (\n datetime: Date | string,\n showCalendar: boolean,\n showTimePicker: boolean\n) => {\n if (!showCalendar && showTimePicker) {\n return formatTimeOnly(datetime);\n }\n if (showCalendar && !showTimePicker) {\n return formatDateOnly(datetime);\n }\n return new Date(datetime).toLocaleTimeString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n hour12: true,\n });\n};\n\nconst inputBase =\n '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';\n\n// @source: https://www.perplexity.ai/search/in-javascript-how-RfI7fMtITxKr5c.V9Lv5KA#1\n// use this pattern to validate the transformed date string for the natural language input\nconst naturalInputValidationPattern = '^[A-Z][a-z]{2}sd{1,2},sd{4},sd{1,2}:d{2}s[AP]M$';\n\nconst DEFAULT_SIZE = 96;\n\n/**\n * Smart time input Docs: {@link: https://shadcn-extension.vercel.app/docs/smart-time-input}\n */\n\ninterface SmartDatetimeInputProps {\n value?: Date;\n onValueChange: (date: Date) => void;\n showCalendar?: boolean;\n showTimePicker?: boolean;\n}\n\ninterface SmartDatetimeInputContextProps extends SmartDatetimeInputProps {\n Time: string;\n onTimeChange: (time: string) => void;\n}\n\nconst SmartDatetimeInputContext = React.createContext(null);\n\nconst useSmartDateInput = () => {\n const context = React.useContext(SmartDatetimeInputContext);\n if (!context) {\n throw new Error('useSmartDateInput must be used within SmartDateInputProvider');\n }\n return context;\n};\nexport const SmartDatetimeInput = React.forwardRef<\n HTMLInputElement,\n Omit<\n React.InputHTMLAttributes,\n 'type' | 'ref' | 'value' | 'defaultValue' | 'onBlur'\n > &\n SmartDatetimeInputProps\n>(\n (\n {\n className,\n value,\n onValueChange,\n placeholder,\n disabled,\n showCalendar = true,\n showTimePicker = true,\n },\n ref\n ) => {\n const [Time, setTime] = React.useState('');\n\n const onTimeChange = React.useCallback((time: string) => {\n setTime(time);\n }, []);\n\n // If neither calendar nor timepicker is specified, show both\n const shouldShowBoth = showCalendar === showTimePicker;\n\n return (\n \n
\n \n \n \n
\n \n \n );\n }\n);\n\nSmartDatetimeInput.displayName = 'DatetimeInput';\n\n// Make it a standalone component\n\nconst TimePicker = () => {\n const { value, onValueChange, Time, onTimeChange } = useSmartDateInput();\n const [activeIndex, setActiveIndex] = React.useState(-1);\n const timestamp = 15;\n\n const formateSelectedTime = React.useCallback(\n (time: string, hour: number, partStamp: number) => {\n onTimeChange(time);\n\n const newVal = value ? new Date(value) : new Date();\n\n // If no value exists, use current date but only set the time\n newVal.setHours(hour, partStamp === 0 ? Number.parseInt('00') : timestamp * partStamp);\n\n onValueChange(newVal);\n },\n [value, onValueChange, onTimeChange]\n );\n\n const handleKeydown = React.useCallback(\n (e: React.KeyboardEvent) => {\n e.stopPropagation();\n\n if (!document) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1 > DEFAULT_SIZE - 1 ? 0 : activeIndex + 1;\n\n const currentElm = document.getElementById(`time-${nextIndex}`);\n\n currentElm?.focus();\n\n setActiveIndex(nextIndex);\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1 < 0 ? DEFAULT_SIZE - 1 : activeIndex - 1;\n\n const currentElm = document.getElementById(`time-${prevIndex}`);\n\n currentElm?.focus();\n\n setActiveIndex(prevIndex);\n };\n\n const setElement = () => {\n const currentElm = document.getElementById(`time-${activeIndex}`);\n\n if (!currentElm) return;\n\n currentElm.focus();\n\n const timeValue = currentElm.textContent ?? '';\n\n // this should work now haha that hour is what does the trick\n\n const PM_AM = timeValue.split(' ')[1];\n const PM_AM_hour = Number.parseInt(timeValue.split(' ')[0].split(':')[0]);\n const hour =\n PM_AM === 'AM'\n ? PM_AM_hour === 12\n ? 0\n : PM_AM_hour\n : PM_AM_hour === 12\n ? 12\n : PM_AM_hour + 12;\n\n const part = Math.floor(Number.parseInt(timeValue.split(' ')[0].split(':')[1]) / 15);\n\n formateSelectedTime(timeValue, hour, part);\n };\n\n const reset = () => {\n const currentElm = document.getElementById(`time-${activeIndex}`);\n currentElm?.blur();\n setActiveIndex(-1);\n };\n\n switch (e.key) {\n case 'ArrowUp':\n movePrev();\n break;\n\n case 'ArrowDown':\n moveNext();\n break;\n\n case 'Escape':\n reset();\n break;\n\n case 'Enter':\n setElement();\n break;\n }\n },\n [activeIndex, formateSelectedTime]\n );\n\n const handleClick = React.useCallback(\n (hour: number, part: number, PM_AM: string, currentIndex: number) => {\n formateSelectedTime(`${hour}:${part === 0 ? '00' : timestamp * part} ${PM_AM}`, hour, part);\n setActiveIndex(currentIndex);\n },\n [formateSelectedTime]\n );\n\n const currentTime = React.useMemo(() => {\n const timeVal = Time.split(' ')[0];\n return {\n hours: Number.parseInt(timeVal.split(':')[0]),\n minutes: Number.parseInt(timeVal.split(':')[1]),\n };\n }, [Time]);\n\n React.useEffect(() => {\n const getCurrentElementTime = () => {\n const timeVal = Time.split(' ')[0];\n const hours = Number.parseInt(timeVal.split(':')[0]);\n const minutes = Number.parseInt(timeVal.split(':')[1]);\n const PM_AM = Time.split(' ')[1];\n\n const formatIndex = PM_AM === 'AM' ? hours : hours === 12 ? hours : hours + 12;\n const formattedHours = formatIndex;\n\n console.log(formatIndex);\n\n for (let j = 0; j <= 3; j++) {\n const diff = Math.abs(j * timestamp - minutes);\n const selected =\n PM_AM === (formattedHours >= 12 ? 'PM' : 'AM') &&\n (minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp);\n\n if (selected) {\n const trueIndex = activeIndex === -1 ? formattedHours * 4 + j : activeIndex;\n\n setActiveIndex(trueIndex);\n\n const currentElm = document.getElementById(`time-${trueIndex}`);\n currentElm?.scrollIntoView({\n block: 'center',\n behavior: 'smooth',\n });\n }\n }\n };\n\n getCurrentElementTime();\n }, [Time, activeIndex]);\n\n const height = React.useMemo(() => {\n if (!document) return;\n const calendarElm = document.getElementById('calendar');\n if (!calendarElm) return;\n return calendarElm.style.height;\n }, []);\n\n return (\n
\n

Time

\n \n
    \n {Array.from({ length: 24 }).map((_, i) => {\n const PM_AM = i >= 12 ? 'PM' : 'AM';\n const formatIndex = i > 12 ? i % 12 : i === 0 || i === 12 ? 12 : i;\n return Array.from({ length: 4 }).map((_, part) => {\n const diff = Math.abs(part * timestamp - currentTime.minutes);\n\n const trueIndex = i * 4 + part;\n\n // ? refactor : add the select of the default time on the current device (H:MM)\n const isSelected =\n (currentTime.hours === i || currentTime.hours === formatIndex) &&\n Time.split(' ')[1] === PM_AM &&\n (currentTime.minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp);\n\n const isSuggested = !value && isSelected;\n\n const currentValue = `${formatIndex}:${\n part === 0 ? '00' : timestamp * part\n } ${PM_AM}`;\n\n return (\n handleClick(i, part, PM_AM, trueIndex)}\n onFocus={() => isSuggested && setActiveIndex(trueIndex)}\n >\n {currentValue}\n \n );\n });\n })}\n
\n \n
\n );\n};\nconst getDefaultPlaceholder = (showCalendar: boolean, showTimePicker: boolean) => {\n if (!showCalendar && showTimePicker) {\n return 'e.g. \"5pm\" or \"in 2 hours\"';\n }\n if (showCalendar && !showTimePicker) {\n return 'e.g. \"tomorrow\" or \"next monday\"';\n }\n return 'e.g. \"tomorrow at 5pm\" or \"in 2 hours\"';\n};\nconst NaturalLanguageInput = React.forwardRef<\n HTMLInputElement,\n {\n placeholder?: string;\n disabled?: boolean;\n }\n>(({ placeholder, ...props }, ref) => {\n const { value, onValueChange, Time, onTimeChange, showCalendar, showTimePicker } =\n useSmartDateInput();\n\n const _placeholder = placeholder ?? getDefaultPlaceholder(showCalendar, showTimePicker);\n\n const [inputValue, setInputValue] = React.useState('');\n\n React.useEffect(() => {\n if (!value) {\n setInputValue('');\n return;\n }\n\n const formattedValue = formatDateTime(value, showCalendar, showTimePicker);\n setInputValue(formattedValue);\n\n // Only update time if time picker is shown\n if (showTimePicker) {\n const hour = value.getHours();\n const timeVal = `${hour >= 12 ? hour % 12 || 12 : hour || 12}:${String(\n value.getMinutes()\n ).padStart(2, '0')} ${hour >= 12 ? 'PM' : 'AM'}`;\n onTimeChange(timeVal);\n }\n }, [value, showCalendar, showTimePicker]);\n\n const handleParse = React.useCallback(\n (e: React.ChangeEvent) => {\n const parsedDateTime = parseDateTime(e.currentTarget.value);\n if (parsedDateTime) {\n // If only showing time picker, preserve the current date\n if (!showCalendar && showTimePicker && value) {\n parsedDateTime.setFullYear(value.getFullYear(), value.getMonth(), value.getDate());\n }\n // If only showing calendar, preserve the current time\n if (showCalendar && !showTimePicker && value) {\n parsedDateTime.setHours(0, 0, 0, 0);\n }\n // console.log(parsedDateTime);\n\n onValueChange(parsedDateTime);\n setInputValue(formatDateTime(parsedDateTime, showCalendar, showTimePicker));\n\n if (showTimePicker) {\n const PM_AM = parsedDateTime.getHours() >= 12 ? 'PM' : 'AM';\n const PM_AM_hour = parsedDateTime.getHours();\n const hour =\n PM_AM_hour > 12\n ? PM_AM_hour % 12\n : PM_AM_hour === 0 || PM_AM_hour === 12\n ? 12\n : PM_AM_hour;\n onTimeChange(`${hour}:${String(parsedDateTime.getMinutes()).padStart(2, '0')} ${PM_AM}`);\n }\n }\n },\n [value, showCalendar, showTimePicker]\n );\n\n const handleKeydown = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n handleParse(e as any);\n }\n },\n [handleParse]\n );\n\n return (\n setInputValue(e.currentTarget.value)}\n onKeyDown={handleKeydown}\n onBlur={handleParse}\n className={cn(\n 'px-2 mr-0.5 dark:bg-neutral-800 bg-neutral-50 flex-1 border-none h-8 rounded-sm',\n inputBase\n )}\n {...props}\n />\n );\n});\n\nNaturalLanguageInput.displayName = 'NaturalLanguageInput';\n\ntype DateTimeLocalInputProps = {} & CalendarProps;\n\nconst DateTimeLocalInput = ({ className, ...props }: DateTimeLocalInputProps) => {\n const { value, onValueChange, Time, showCalendar, showTimePicker } = useSmartDateInput();\n\n const formateSelectedDate = React.useCallback(\n (date: Date | undefined, selectedDate: Date, m: ActiveModifiers, e: React.MouseEvent) => {\n const parsedDateTime = new Date(selectedDate);\n\n if (!showTimePicker) {\n // If only calendar is shown, set time to start of day\n parsedDateTime.setHours(0, 0, 0, 0);\n } else if (value) {\n // If time picker is shown, preserve existing time\n parsedDateTime.setHours(\n value.getHours(),\n value.getMinutes(),\n value.getSeconds(),\n value.getMilliseconds()\n );\n }\n\n onValueChange(parsedDateTime);\n },\n [value, showTimePicker, onValueChange]\n );\n\n return (\n \n \n \n \n calendar\n \n \n \n
\n {showCalendar && (\n \n )}\n {showTimePicker && }\n
\n \n \n );\n};\n\nDateTimeLocalInput.displayName = 'DateTimeLocalInput';\n", "type": "registry:component" }, { "path": "./components/website/ui/button.tsx", "content": "import { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n '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',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input dark:bg-neutral-800 bg-neutral-50 hover:bg-accent hover:text-accent-foreground',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n uilayouts:\n 'dark:bg-zinc-900 bg-neutral-200 dark:text-white text-black border dark:border-neutral-800',\n },\n size: {\n default: 'h-10 px-4 py-2',\n sm: 'h-9 rounded-md px-3',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n return (\n \n );\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n", "type": "registry:component" }, { "path": "./components/website/ui/calendar.tsx", "content": "'use client';\n\nimport { buttonVariants } from '@/components/website/ui/button';\nimport { cn } from '@/lib/utils';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\n\nexport type CalendarProps = React.ComponentProps;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n );\n}\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n", "type": "registry:component" }, { "path": "./components/website/ui/popover.tsx", "content": "'use client';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n \n \n \n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverContent, PopoverTrigger };\n", "type": "registry:component" }, { "path": "./components/website/ui/scroll-area.tsx", "content": "'use client';\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n));\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n \n \n \n));\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n", "type": "registry:component" } ], "type": "registry:component" }