@loke/design-system/dist/components/date-picker/index.js

A design system with individually importable components

var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __reExport=(target,mod,secondTarget)=>{var keys=__getOwnPropNames(mod);for(let key of keys)if(!__hasOwnProp.call(target,key)&&key!=="default")__defProp(target,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(secondTarget){for(let key of keys)if(!__hasOwnProp.call(secondTarget,key)&&key!=="default")__defProp(secondTarget,key,{get:__accessProp.bind(mod,key),enumerable:!0});return secondTarget}},__toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_date_picker={};__export(exports_date_picker,{DateTimePicker:()=>DateTimePicker,DatePicker:()=>DatePicker});module.exports=__toCommonJS(exports_date_picker);var import_button=require("@loke/design-system/button"),import_calendar=require("@loke/design-system/calendar"),import_cn=require("@loke/design-system/cn"),import_popover=require("@loke/design-system/popover"),import_icons=require("@loke/icons"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime");function formatDateForDisplay(date){return date.toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric"})}function formatDateRangeForDisplay(range){if(!range.from)return"";let fromFormatted=formatDateForDisplay(range.from);if(!range.to)return fromFormatted;let toFormatted=formatDateForDisplay(range.to);return`${fromFormatted} - ${toFormatted}`}function getDisplayText(selected,mode,placeholder){if(!selected)return placeholder;if(mode==="single"&&selected instanceof Date)return formatDateForDisplay(selected);if(mode==="multiple"&&Array.isArray(selected)){if(selected.length===0)return placeholder;if(selected.length===1)return formatDateForDisplay(selected[0]);return`${selected.length} dates selected`}if(mode==="range"&&selected&&typeof selected==="object"&&"from"in selected)return formatDateRangeForDisplay(selected);return placeholder}var DatePicker=import_react.forwardRef(({placeholder="Select date",className,...calendarProps},ref)=>{let[open,setOpen]=import_react.useState(!1),displayText=getDisplayText(calendarProps.selected,calendarProps.mode||"single",placeholder);return jsx_runtime.jsx("div",{className:import_cn.cn("grid gap-2",className),ref,children:jsx_runtime.jsxs(import_popover.Popover,{onOpenChange:setOpen,open,children:[jsx_runtime.jsx(import_popover.PopoverTrigger,{asChild:!0,children:jsx_runtime.jsxs(import_button.Button,{className:import_cn.cn("w-full justify-start text-left font-normal",!calendarProps.selected&&"text-muted-foreground"),variant:"outline",children:[jsx_runtime.jsx(import_icons.Calendar,{className:"mr-2 h-4 w-4"}),displayText]})}),jsx_runtime.jsx(import_popover.PopoverContent,{align:"start",className:"w-auto p-0",children:jsx_runtime.jsx(import_calendar.Calendar,{...calendarProps})})]})})});DatePicker.displayName="DatePicker";var import_button2=require("@loke/design-system/button"),import_calendar2=require("@loke/design-system/calendar"),import_cn2=require("@loke/design-system/cn"),import_input=require("@loke/design-system/input"),import_label=require("@loke/design-system/label"),import_popover2=require("@loke/design-system/popover"),import_icons2=require("@loke/icons"),import_use_id=require("@loke/ui/use-id"),import_react2=require("react"),jsx_runtime2=require("react/jsx-runtime");function formatDateTimeForDisplay(date){return date.toLocaleString("en-US",{day:"numeric",hour:"numeric",hour12:!0,minute:"2-digit",month:"short",year:"numeric"})}function formatDateTimeRangeForDisplay(range){if(!range.from)return"";let fromFormatted=formatDateTimeForDisplay(range.from);if(!range.to)return fromFormatted;let toFormatted=formatDateTimeForDisplay(range.to);return`${fromFormatted} - ${toFormatted}`}function getDisplayText2(selected,mode,placeholder){if(!selected)return placeholder;if(mode==="single"&&selected instanceof Date)return formatDateTimeForDisplay(selected);if(mode==="range"&&selected&&typeof selected==="object"&&"from"in selected)return formatDateTimeRangeForDisplay(selected);return placeholder}function formatTime(date){return date.toTimeString().slice(0,5)}function setTimeOnDate(date,timeString){let[hours,minutes]=timeString.split(":").map(Number),newDate=new Date(date);return newDate.setHours(hours,minutes,0,0),newDate}function getCurrentTime(){return formatTime(new Date)}var DateTimePicker=import_react2.forwardRef(({placeholder="Select date and time",className,triggerDisplay,...props},ref)=>{let[open,setOpen]=import_react2.useState(!1),{selected,onSelect,mode="single",...calendarProps}=props,[singleTime,setSingleTime]=import_react2.useState(getCurrentTime()),[fromTime,setFromTime]=import_react2.useState(getCurrentTime()),[toTime,setToTime]=import_react2.useState(getCurrentTime()),handleDateSelect=(date)=>{if(mode==="single")if(date instanceof Date){let dateWithTime=setTimeOnDate(date,singleTime);onSelect?.(dateWithTime)}else onSelect?.(date);else if(mode==="range")if(date&&typeof date==="object"&&"from"in date){let range=date,newRange={from:setTimeOnDate(range.from,fromTime),to:range.to?setTimeOnDate(range.to,toTime):void 0};onSelect?.(newRange)}else onSelect?.(date)},handleSingleTimeChange=(event)=>{if(setSingleTime(event.target.value),selected instanceof Date){let dateWithTime=setTimeOnDate(selected,event.target.value);onSelect?.(dateWithTime)}},handleFromTimeChange=(event)=>{if(setFromTime(event.target.value),selected&&typeof selected==="object"&&"from"in selected&&selected.from){let range=selected,newRange={from:setTimeOnDate(range.from,event.target.value),to:range.to?setTimeOnDate(range.to,toTime):void 0};onSelect?.(newRange)}},handleToTimeChange=(event)=>{if(setToTime(event.target.value),selected&&typeof selected==="object"&&"from"in selected&&selected.to){let range=selected,newRange={from:setTimeOnDate(range.from,fromTime),to:range.to?setTimeOnDate(range.to,event.target.value):void 0};onSelect?.(newRange)}};import_react2.useEffect(()=>{if(mode==="single"&&selected instanceof Date)setSingleTime(formatTime(selected));else if(mode==="range"&&selected&&typeof selected==="object"&&"from"in selected){let range=selected;if(range.from)setFromTime(formatTime(range.from));if(range.to)setToTime(formatTime(range.to))}},[selected,mode]);let calendarSelected=import_react2.useMemo(()=>{if(mode==="single"&&selected instanceof Date)return new Date(selected.getFullYear(),selected.getMonth(),selected.getDate());if(mode==="range"&&selected&&typeof selected==="object"&&"from"in selected){let range=selected;return{from:new Date(range.from.getFullYear(),range.from.getMonth(),range.from.getDate()),to:range.to?new Date(range.to.getFullYear(),range.to.getMonth(),range.to.getDate()):void 0}}return},[selected,mode]),displayText=getDisplayText2(selected,mode,placeholder),timeId=`time-${import_use_id.useId()}`;return jsx_runtime2.jsx("div",{className:import_cn2.cn("grid gap-2",className),ref,children:jsx_runtime2.jsxs(import_popover2.Popover,{onOpenChange:setOpen,open,children:[jsx_runtime2.jsx(import_popover2.PopoverTrigger,{asChild:!0,children:jsx_runtime2.jsx(import_button2.Button,{className:import_cn2.cn("w-full justify-start text-left font-normal",!selected&&"text-muted-foreground"),variant:"outline",children:triggerDisplay||jsx_runtime2.jsxs(jsx_runtime2.Fragment,{children:[jsx_runtime2.jsx(import_icons2.Calendar,{className:"mr-2 h-4 w-4"}),displayText]})})}),jsx_runtime2.jsx(import_popover2.PopoverContent,{align:"start",className:"w-auto p-0",children:jsx_runtime2.jsxs("div",{className:"space-y-4 p-4",children:[mode==="single"?jsx_runtime2.jsx(import_calendar2.Calendar,{initialFocus:!0,mode:"single",onSelect:handleDateSelect,selected:calendarSelected,...calendarProps}):jsx_runtime2.jsx(import_calendar2.Calendar,{initialFocus:!0,mode:"range",onSelect:handleDateSelect,selected:calendarSelected,...calendarProps}),jsx_runtime2.jsxs("div",{className:"border-t pt-4",children:[mode==="single"&&jsx_runtime2.jsxs("div",{className:"space-y-2",children:[jsx_runtime2.jsx(import_label.Label,{htmlFor:timeId,children:"Time"}),jsx_runtime2.jsx(import_input.Input,{id:timeId,onChange:(e)=>handleSingleTimeChange(e),type:"time",value:singleTime})]}),mode==="range"&&jsx_runtime2.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[jsx_runtime2.jsxs("div",{className:"space-y-2",children:[jsx_runtime2.jsx(import_label.Label,{htmlFor:`${timeId}-from`,children:"From Time"}),jsx_runtime2.jsx(import_input.Input,{id:`${timeId}-from`,onChange:(e)=>handleFromTimeChange(e),type:"time",value:fromTime})]}),jsx_runtime2.jsxs("div",{className:"space-y-2",children:[jsx_runtime2.jsx(import_label.Label,{htmlFor:`${timeId}-to`,children:"To Time"}),jsx_runtime2.jsx(import_input.Input,{id:`${timeId}-to`,onChange:(e)=>handleToTimeChange(e),type:"time",value:toTime})]})]})]})]})})]})})});DateTimePicker.displayName="DateTimePicker";