@guruhotel/aura-ui/esm/calendar/horizontal-calendar.js

⚛️ React UI library by GuruHotel

import{ChevronLeftRegular as r,ChevronRightRegular as e}from"../icons";import{useDateFormatter as t}from"@react-aria/i18n";import{useCalendar as a,useCalendarGrid as o}from"@react-aria/calendar";import i,{useRef as l}from"react";import{CalendarButton as n}from"./button";import{CalendarHorizontalCell as s}from"./calendar-cell";import{useCalendarProps as d}from"./calendar-props.provider";import{HorizontalCalendarView as c,HorizontalTitle as m,Table as p,TBody as f,Td as h,TdHorizontal as g,Tr as u}from"./calendar.styles";import{jsx as b}from"react/jsx-runtime";import{jsxs as $}from"react/jsx-runtime";export default({state:i,leftIcon:x,rightIcon:y,...R})=>{const{colorScheme:v,size:D,showHorizontalTitle:j}=d(),z=l(null),{calendarProps:P,prevButtonProps:A,nextButtonProps:S}=a(R,i),{gridProps:w}=o({startDate:R.startDate,endDate:R.endDate},i),B=i.visibleRange.start,I=t({dateStyle:"long",calendar:B.calendar.identifier}),Z=Math.abs(B.compare(i.visibleRange.end)),C=Array.from({length:Z+1}).map(((r,e)=>B.add({days:e}))),F=x||b(r,{label:"left"}),H=y||b(e,{label:"right"});return $(c,{...P,ref:z,size:D,colorScheme:v,children:[j&&b(m,{css:{color:`$${v}12`},children:I.formatRange(i.visibleRange.start.toDate(i.timeZone),i.visibleRange.end.toDate(i.timeZone))}),b(n,{...A,children:F}),b(p,{...w,children:b(f,{children:b(u,{css:{display:"grid",gridAutoFlow:"column",gridAutoColumns:"minmax($sizes$14, 1fr)",[`& ${g}`]:{"&:not(last-child)":{borderRight:"1px solid $colors$gray5"},"&:last-child":{borderRight:"none"}}},children:C.map(((r,e)=>r?b(s,{state:i,date:r},`${r.day}-${e}`):b(h,{},e)))})})}),b(n,{...S,children:H})]})};