@loke/design-system/dist/components/calendar/index.js

A design system with individually importable components

"use client";
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 __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_calendar={};__export(exports_calendar,{Calendar:()=>Calendar});module.exports=__toCommonJS(exports_calendar);var import_button=require("@loke/design-system/button"),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 formatDay(date){return date.getDate().toString()}function formatMonthCaption(date){return date.toLocaleString("default",{month:"long",year:"numeric"})}function formatWeekdayName(date){return date.toLocaleString("default",{weekday:"narrow"})}function addMonths(date,amount){let result=new Date(date),newMonth=(result.getMonth()+amount)%12;return result.setMonth(newMonth),result}function startOfWeek(date,firstDayOfWeek=0){let result=new Date(date),day=result.getDay(),diff=(day<firstDayOfWeek?7:0)+day-firstDayOfWeek;return result.setDate(result.getDate()-diff),result.setHours(0,0,0,0),result}var generateYears=()=>{let currentYear=new Date().getFullYear(),years=[],startYear=currentYear-88,endYear=currentYear+91;for(let year=startYear;year<=endYear;year++)years.push(year);return years};function getWeeksInMonth(date,firstDayOfWeek=0,fixedWeeks=!1){let month=date.getMonth(),year=date.getFullYear(),firstDay=new Date(year,month,1),lastDay=new Date(year,month+1,0),startDate=startOfWeek(firstDay,firstDayOfWeek),endDate=fixedWeeks?addDays(startDate,41):addDays(startOfWeek(lastDay,firstDayOfWeek),7),weeks=[],currentDate=startDate;while(currentDate<endDate){let week=[];for(let i=0;i<7;i++)week.push(new Date(currentDate)),currentDate=addDays(currentDate,1);weeks.push(week)}return weeks}function isSameDay(date1,date2){return date1.getDate()===date2.getDate()&&date1.getMonth()===date2.getMonth()&&date1.getFullYear()===date2.getFullYear()}function isSameMonth(date1,date2){return date1.getMonth()===date2.getMonth()&&date1.getFullYear()===date2.getFullYear()}function isToday(date){return isSameDay(date,new Date)}function addDays(date,amount){let result=new Date(date);return result.setDate(result.getDate()+amount),result}function isDateDisabled(date,disabled,fromDate,toDate){if(!(disabled||fromDate||toDate))return!1;if(fromDate&&date<fromDate)return!0;if(toDate&&date>toDate)return!0;if(Array.isArray(disabled))return disabled.some((disabledDate)=>isSameDay(date,disabledDate));if(typeof disabled==="function")return disabled(date);return!1}function isDaySelected(date,selected){if(!selected)return!1;if(selected instanceof Date)return isSameDay(date,selected);if(Array.isArray(selected))return selected.some((selectedDate)=>isSameDay(date,selectedDate));if(selected.from&&selected.to)return date>=selected.from&&date<=selected.to||isSameDay(date,selected.from)||isSameDay(date,selected.to);return selected.from?isSameDay(date,selected.from):!1}function isDateInRange(date,range){if(!range?.from)return!1;if(!range.to)return isSameDay(date,range.from);return date>=range.from&&date<=range.to}function isDateRangeStart(date,range){if(!range?.from)return!1;return isSameDay(date,range.from)}function isDateRangeEnd(date,range){if(!range?.to)return!1;return isSameDay(date,range.to)}function getWeekNumber(date){let target=new Date(date),dayNumber=(date.getDay()+6)%7;target.setDate(target.getDate()-dayNumber+3);let firstThursday=target.valueOf();if(target.setMonth(0,1),target.getDay()!==4)target.setMonth(0,1+(4-target.getDay()+7)%7);return 1+Math.ceil((firstThursday-target.valueOf())/604800000)}function getWeekdays(firstDayOfWeek=0){let weekdays=[],start=startOfWeek(new Date,firstDayOfWeek);for(let i=0;i<7;i++)weekdays.push(addDays(start,i));return weekdays}function createDateRange(date,range){if(!range?.from||range.from&&range.to)return{from:date};if(date<range.from)return{from:date,to:range.from};return{from:range.from,to:date}}var Day=({date,onClick,selected,disabled,hidden,today,isOutside,isRangeStart,isRangeMiddle,isRangeEnd,modifiers,modifiersClassNames,dayRef})=>{let handleClick=()=>{if(disabled||hidden)return;onClick?.(date)},dayClassNames=import_cn.cn({"bg-brand-100 dark:bg-brand-900 text-primary":isRangeMiddle&&!selected,"bg-brand-300 dark:bg-brand-700":isRangeMiddle&&selected,"bg-gray-300 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-800":today&&!selected,"rounded-l-md":isRangeStart,"rounded-r-md":isRangeEnd},...modifiers&&modifiersClassNames?Object.entries(modifiers).filter(([_,enabled])=>enabled).map(([name])=>modifiersClassNames[name]||""):[]);if(hidden)return jsx_runtime.jsx("div",{className:"h-9 w-9"});return jsx_runtime.jsx("button",{className:import_cn.cn("h-9 w-9 p-0 font-normal data-selected:opacity-100","flex items-center justify-center rounded-md text-sm transition-colors","hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",{"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground":selected,"text-muted-foreground opacity-50 hover:bg-transparent hover:text-muted-foreground":disabled||isOutside},dayClassNames),"data-outside":isOutside||void 0,"data-range-end":isRangeEnd||void 0,"data-range-middle":isRangeMiddle||void 0,"data-range-start":isRangeStart||void 0,"data-selected":selected,"data-today":today||void 0,disabled,onClick:handleClick,ref:dayRef,tabIndex:isOutside?-1:0,type:"button",...Object.entries(modifiers||{}).reduce((acc,[name,enabled])=>({...acc,[`data-${name}`]:enabled||void 0}),{}),children:formatDay(date)})},Weekday=({weekday,format=formatWeekdayName})=>{let date=new Date,currentDay=date.getDay(),diff=weekday-currentDay;return date.setDate(date.getDate()+diff),jsx_runtime.jsx("th",{className:"w-9 py-2 text-center font-medium text-muted-foreground text-xs",scope:"col",children:format(date)})},YearSelector=({date,onYearChange})=>{let[open,setOpen]=import_react.useState(!1),scrollContainerRef=import_react.useRef(null),years=generateYears(),selectedYear=date.getFullYear(),handleYearClick=(year)=>{onYearChange(year),setOpen(!1)},handleOpenAutoFocus=(event)=>{event.preventDefault();let selectedButton=document.querySelector(`[data-year="${selectedYear}"]`);if(selectedButton)selectedButton.scrollIntoView({behavior:"auto",block:"center",inline:"nearest"})};return 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,{"aria-label":"Select year",variant:"ghost",children:[jsx_runtime.jsx("span",{children:formatMonthCaption(date)}),jsx_runtime.jsx(import_icons.ChevronDown,{className:`h-3 w-3 transition-transform ${open?"rotate-180":""}`})]})}),jsx_runtime.jsx(import_popover.PopoverContent,{className:"w-auto",onOpenAutoFocus:handleOpenAutoFocus,children:jsx_runtime.jsx("div",{className:"scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 grid max-h-48 grid-cols-3 gap-1 overflow-y-auto pr-1",ref:scrollContainerRef,children:years.map((year)=>jsx_runtime.jsx(import_button.Button,{className:"h-8 text-xs","data-year":year,onClick:()=>handleYearClick(year),size:"sm",variant:year===selectedYear?"default":"ghost",children:year},year))})})]})},Caption=({date,onMonthChange,nextLabel="Next Month",prevLabel="Previous Month",nextDisabled=!1,prevDisabled=!1,nextHidden=!1,prevHidden=!1,showYearSelector=!1})=>{let handlePreviousClick=()=>{onMonthChange(addMonths(date,-1))},handleNextClick=()=>{onMonthChange(addMonths(date,1))};return jsx_runtime.jsxs("div",{className:"flex items-center justify-between px-2 py-1",children:[jsx_runtime.jsx(import_button.Button,{"aria-label":prevLabel,disabled:prevDisabled,onClick:handlePreviousClick,size:"icon",variant:"ghost",children:!prevHidden&&jsx_runtime.jsx(import_icons.ChevronLeft,{className:"h-4 w-4"})}),jsx_runtime.jsx("div",{className:"font-medium text-sm",children:showYearSelector?jsx_runtime.jsx(YearSelector,{date,onYearChange:(newYear)=>{let newDate=new Date(date);newDate.setFullYear(newYear),onMonthChange(newDate)}}):jsx_runtime.jsx("span",{children:formatMonthCaption(date)})}),jsx_runtime.jsx(import_button.Button,{"aria-label":nextLabel,disabled:nextDisabled,onClick:handleNextClick,size:"icon",variant:"ghost",children:!nextHidden&&jsx_runtime.jsx(import_icons.ChevronRight,{className:"h-4 w-4"})})]})},Calendar=import_react.forwardRef(({selected,onSelect,minDate,maxDate,numberOfMonths=1,defaultMonth=new Date,month:controlledMonth,onMonthChange,formatters={},disabled,classNames={},showWeekNumber=!1,firstDayOfWeek=0,mode="single",showOutsideDays=!1,fixedWeeks=!1,modifiers={},modifiersClassNames={},className,initialFocus=!1,captionProps,...rest},ref)=>{let[internalMonth,setInternalMonth]=import_react.useState(defaultMonth),currentMonth=controlledMonth||internalMonth,focusableDay=import_react.useRef(null),handleMonthChange=(month)=>{if(onMonthChange?.(month),!controlledMonth)setInternalMonth(month)},DayComponent=Day,CaptionComponent=Caption,weekdays=getWeekdays(firstDayOfWeek),handleDayClick=(date)=>{if(mode==="single")onSelect?.(date);else if(mode==="multiple"){let currentSelected=Array.isArray(selected)?selected:[];if(currentSelected.some((selectedDate)=>selectedDate.getTime()===date.getTime()))onSelect?.(currentSelected.filter((selectedDate)=>selectedDate.getTime()!==date.getTime()));else onSelect?.([...currentSelected,date])}else if(mode==="range")onSelect?.(createDateRange(date,selected))};import_react.useEffect(()=>{if(initialFocus&&focusableDay.current)focusableDay.current.focus()},[initialFocus]);let months=[];for(let i=0;i<numberOfMonths;i++){let monthDate=new Date(currentMonth);monthDate.setMonth(monthDate.getMonth()+i),months.push(monthDate)}let focusableDate=(()=>{if(selected){if(selected instanceof Date)return selected;if(Array.isArray(selected)&&selected.length>0)return selected[0];if("from"in selected&&selected.from)return selected.from}let today=new Date;if(!isDateDisabled(today,disabled,minDate,maxDate))return today;return null})();return jsx_runtime.jsx("div",{className:import_cn.cn("rounded-md bg-card p-3",className),ref,...rest,children:jsx_runtime.jsx("div",{className:import_cn.cn("flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0"),children:months.map((monthDate,monthIndex)=>jsx_runtime.jsxs("div",{className:import_cn.cn("space-y-4",classNames.month),children:[jsx_runtime.jsx(CaptionComponent,{date:monthDate,nextDisabled:monthIndex<months.length-1||maxDate&&monthDate>=maxDate,nextHidden:monthIndex<months.length-1,onMonthChange:handleMonthChange,prevDisabled:monthIndex>0||minDate&&monthDate<=minDate,prevHidden:monthIndex>0,...captionProps}),jsx_runtime.jsxs("table",{className:"w-full border-collapse space-y-1",children:[jsx_runtime.jsx("thead",{children:jsx_runtime.jsxs("tr",{className:"flex",children:[showWeekNumber&&jsx_runtime.jsx("th",{className:"w-9 py-2 text-center font-medium text-muted-foreground text-xs",children:"#"}),weekdays.map((weekday)=>jsx_runtime.jsx(Weekday,{format:formatters.formatWeekdayName,weekday:weekday.getDay()},`weekday-${weekday.getTime()}`))]})}),jsx_runtime.jsx("tbody",{children:getWeeksInMonth(monthDate,firstDayOfWeek,fixedWeeks).map((week)=>jsx_runtime.jsxs("tr",{className:"flex w-full",children:[showWeekNumber&&jsx_runtime.jsx("td",{className:"w-9 py-2 text-center font-medium text-muted-foreground text-xs",children:getWeekNumber(week[0])}),week.map((date)=>{let isOutside=!isSameMonth(date,monthDate),isSelectedDay=isDaySelected(date,selected),isDisabled=isDateDisabled(date,disabled,minDate,maxDate),isDayToday=isToday(date),isRangeStart=!1,isRangeMiddle=!1,isRangeEnd=!1;if(mode==="range"&&selected)isRangeStart=isDateRangeStart(date,selected),isRangeEnd=isDateRangeEnd(date,selected),isRangeMiddle=isDateInRange(date,selected)&&!isRangeStart&&!isRangeEnd;let customModifiers={};for(let[name,modifier]of Object.entries(modifiers))if(Array.isArray(modifier))customModifiers[name]=modifier.some((modDate)=>modDate.getTime()===date.getTime());else if(typeof modifier==="function")customModifiers[name]=modifier(date);let shouldFocus=focusableDate&&isSameDay(date,focusableDate)&&isSameMonth(date,monthDate)&&!isOutside&&!isDisabled;return jsx_runtime.jsx("td",{className:"relative p-0 text-center",children:jsx_runtime.jsx(DayComponent,{...{date,dayRef:shouldFocus?focusableDay:void 0,disabled:isDisabled,displayMonth:monthDate,hidden:isOutside&&!showOutsideDays,isOutside,isRangeEnd,isRangeMiddle,isRangeStart,modifiers:customModifiers,modifiersClassNames,onClick:handleDayClick,selected:isSelectedDay,today:isDayToday}})},`day-${date.getTime()}`)})]},`week-${week[0].getTime()}`))})]})]},`month-${monthDate.getMonth()}-${monthDate.getFullYear()}`))})})});Calendar.displayName="Calendar";