@infinityfx/fluid/dist/components/input/calendar.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as t}from"react";import o from"./button.js";import{combineClasses as n,classes as l}from"../../core/utils.js";import{createStyles as i}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";import s from"../feedback/halo.js";import{Animatable as c}from"@infinityfx/lively";import{useTrigger as g}from"@infinityfx/lively/hooks";import m from"./toggle.js";import{LayoutGroup as f}from"@infinityfx/lively/layout";function u(e,r){return e.getFullYear()===r.getFullYear()&&e.getMonth()===r.getMonth()&&e.getDate()===r.getDate()}function h(e,r){const a=new Date(e);return a.setDate(e.getDate()+r),a}const p=i("calendar",{".calendar":{backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-med)",padding:".6em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".calendar.round":{borderRadius:"var(--f-radius-xlg)"},".toggle":{fontWeight:600,flexGrow:1},".hidden":{opacity:0,pointerEvents:"none"},".header":{display:"flex",alignItems:"center",gap:".6em",marginBottom:".6em"},".header > *":{transition:"opacity .35s"},".content":{position:"relative",display:"grid"},".grid":{display:"flex",flexDirection:"column",rowGap:"var(--f-spacing-xxs)",gridArea:"1 / 1"},".row":{display:"flex",justifyContent:"space-around"},".label":{display:"flex",flexBasis:0,flexGrow:1,alignItems:"center",justifyContent:"center",fontWeight:600,fontSize:".85em",color:"var(--f-clr-grey-600)",marginBottom:"var(--f-spacing-xxs)"},".date":{position:"relative",border:"none",outline:"none",background:"transparent",fontSize:"1em",borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-300)",transition:"background-color .25s, color .25s",WebkitTapHighlightColor:"transparent"},".years.grid":{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",zIndex:1,backgroundColor:"var(--f-clr-fg-100)"},".dates .date":{height:"2.2em",width:"2.2em"},".round .date":{borderRadius:"99px"},".date:enabled":{cursor:"pointer"},".date:disabled":{color:"var(--f-clr-grey-500)"},".date.unavailable":{textDecoration:"line-through"},".date.bold":{fontWeight:500},".date.bold:enabled":{color:"var(--f-clr-text-100)"},".date.today:enabled":{backgroundColor:"var(--f-clr-fg-200)"},".date.selected:enabled":{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},".date.selected:disabled":{backgroundColor:"var(--f-clr-grey-100)",color:"var(--f-clr-grey-500)"}});function y({cc:i={},locale:y,size:v="med",round:b,defaultValue:x,value:w,onChange:k,disabled:D=!1,minDate:C,maxDate:M,...N}){const z=n(p,i),A=g(),S=g(),_=a([]),[j,L]=t(!1),[F,Y]=void 0!==w?[w,k]:t(x),R=F||new Date,I=new Date(R.getFullYear(),R.getMonth(),1),W=h(I,1-(I.getDay()||7)),B=new Date(R);B.setMonth(R.getMonth()+1);const G=new Date(R);function T(e){Y?.(e);const r=R.getMonth()-e.getMonth();r>0&&A(),r<0&&S()}G.setMonth(R.getMonth()-1);try{new Intl.Locale(y)}catch(e){y="en"}const E={...i,size:v,round:b,compact:!0,disabled:!0===D,variant:"minimal"};return e("div",{...N,className:l(z.calendar,b&&z.round,z[`s__${v}`],N.className),children:[e("div",{className:z.header,children:[r(o,{...E,className:j?z.hidden:void 0,"aria-label":G.toLocaleString(y,{month:"long"}),onClick:()=>T(G),children:r(d,{type:"left"})}),e(m,{...E,variant:"default",checked:j,onChange:e=>L(e.target.checked),className:z.toggle,children:[R.toLocaleString(y,{month:"long",year:"numeric"}),r(d,{type:"expand"})]}),r(o,{...E,className:j?z.hidden:void 0,"aria-label":B.toLocaleString(y,{month:"long"}),onClick:()=>T(B),children:r(d,{type:"right"})})]}),e("div",{className:z.content,children:[r(f,{transition:{duration:.35,easing:"ease-out"},children:j&&r(c,{id:"years",passthrough:!0,traverseLayout:!0,animate:{opacity:[0,1],duration:.35},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{role:"grid",className:l(z.grid,z.years),children:new Array(21).fill(0).map(((e,a)=>{const t=new Date(R),o=3*Math.round(t.getFullYear()/3);t.setFullYear(o+a-10);const n=new Date(t.getFullYear(),1,1),i=t.toLocaleString(y,{year:"numeric"}),d=!0===D||!!C&&C>n||!!M&&M<n;return r(c,{id:i,adaptive:!0,cachable:["y"],animate:{opacity:[0,1],duration:.25,easing:"ease-out",delay:.35+.05*Math.abs(3-Math.floor(a/3))},triggers:[{on:"mount"}],children:r(s,{color:"var(--f-clr-primary-300)",disabled:d,children:r("button",{type:"button",disabled:d,"aria-label":i,className:l(z.date,z.bold,t.getFullYear()===R.getFullYear()&&z.selected),onClick:()=>T(t),children:i})})},i)}))})})}),e("div",{role:"grid",className:l(z.grid,z.dates),children:[r("div",{className:z.row,role:"row",children:new Array(7).fill(0).map(((e,a)=>r("div",{className:z.label,role:"columnheader",children:h(W,a).toLocaleString(y,{weekday:"narrow"})},a)))}),r(c,{animations:{left:{translate:["-8px 0px","0px 0px"],opacity:[0,1],duration:.25,easing:"ease-out"},right:{translate:["8px 0px","0px 0px"],opacity:[0,1],duration:.25,easing:"ease-out"}},stagger:.05,triggers:[{name:"left",on:A,immediate:!0},{name:"right",on:S,immediate:!0}],children:new Array(6).fill(0).map(((e,a)=>r("div",{className:z.row,role:"row",children:new Array(7).fill(0).map(((e,t)=>{const o=7*a+t,n=h(W,o),i=(Array.isArray(D)?D.some((e=>u(e,n))):D)||!!C&&C>n||!!M&&M<n;return r("div",{role:"gridcell",children:r(s,{color:"var(--f-clr-primary-300)",disabled:i,children:r("button",{ref:e=>{_.current[o]=e},type:"button",disabled:i,"aria-label":n.toLocaleDateString(y,{weekday:"long",month:"long",day:"numeric"}),className:l(z.date,n.getMonth()===R.getMonth()&&z.bold,u(new Date,n)&&z.today,u(R,n)&&z.selected,i&&Array.isArray(D)&&z.unavailable),onClick:()=>T(n),onKeyDown:e=>{let r=null;switch(e.key){case"ArrowRight":r=o+1;break;case"ArrowLeft":r=o-1;break;case"ArrowDown":r=o+7;break;case"ArrowUp":r=o-7}null!==r&&(r<0&&T(G),r>=42&&T(B),r%=42,r=r<0?42+r:r,_.current[r]?.focus(),e.preventDefault())},children:n.getDate()})})},t)}))},a)))})]})]})]})}export{y as default};
//# sourceMappingURL=calendar.js.map