@undp/design-system-react/dist/DateTimePicker.cjs

React based design system for UNDP

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./utils-Dd9-5CFr.cjs"),t=require("./dist-BZMXZCSu.cjs"),n=require("./calendar-D3DI6jL5.cjs"),r=require("./popover-UvMqvZhZ.cjs"),i=require("./separator-DV_-GJFe.cjs"),a=require("./calendar-card-BmXmnASy.cjs");let o=require("react"),s=require("react/jsx-runtime");var c=t.t(`w-full h-auto bg-background rounded-base text-content-primary text-base transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-disabled placeholder:text-content-placeholder`,{variants:{variant:{light:`border border-stroke`,normal:`border-2 border-foreground`},rounded:{base:`rounded`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,"2xl":`rounded-2xl`,full:`rounded-full`},inputSize:{sm:`px-2.5 py-1`,base:`p-2.5`}},defaultVariants:{inputSize:`base`,variant:`normal`,rounded:`base`}});function l({selected:t,onSelect:l,disablePopover:u,disabled:d,classNames:f,variant:p,inputSize:m,onValueChange:h,disabledHours:g=[],disabledMinutes:_=[],placeHolder:v=`Pick a date and time`,...y}){let[b,x]=(0,o.useState)(),[S,C]=(0,o.useState)(0),[w,T]=(0,o.useState)(0);return(0,o.useEffect)(()=>{h?.(b)},[b,h]),(0,s.jsxs)(r.t,{children:[(0,s.jsxs)(r.i,{className:e.t(c({inputSize:m,variant:p}),f?.popOverTrigger),children:[(0,s.jsx)(n.t,{className:e.t(`size-4 text-content-placeholder`,f?.popOverTriggerIcon)}),b?(0,s.jsx)(`p`,{className:`mt-1 p-0 font-body text-content-primary`,children:a.r(b,`MMM d, yyyy HH:mm`)}):(0,s.jsx)(`p`,{className:`mt-1 p-0 font-body text-content-placeholder`,children:v})]}),(0,s.jsx)(r.r,{className:e.t(`w-auto p-0`,f?.popOverContent),align:`start`,children:(0,s.jsxs)(`div`,{className:`flex items-start gap-0`,children:[(0,s.jsx)(a.t,{mode:`single`,selected:t||b,onSelect:(e,t,n,r)=>{if(!e)return;let i=new Date(e),a=b?.getHours()??S,o=b?.getMinutes()??w;i.setHours(a,o),C(a),T(o),x(i),l?.(e,t,n,r)},disabled:d,...y}),(0,s.jsx)(i.t,{orientation:`vertical`,color:`surface-lg`}),(0,s.jsxs)(`div`,{className:`flex flex-col gap-4 px-2 pt-2`,children:[(0,s.jsxs)(`p`,{className:`mb-0 flex h-7 items-center justify-center text-content-primary text-sm`,children:[String(S).padStart(2,`0`),`:`,String(w).padStart(2,`0`)]}),(0,s.jsxs)(`div`,{className:`flex max-h-[204px]`,children:[(0,s.jsxs)(`div`,{className:`undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto overflow-x-hidden px-4`,children:[(0,s.jsx)(`p`,{className:`sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary`,children:`HH`}),Array.from({length:24},(t,n)=>(0,s.jsx)(`button`,{type:`button`,className:e.t(`mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled`,n===S&&`bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover`),onClick:()=>{C(n),x(e=>{let t=new Date(e??new Date);return t.setHours(n),t})},disabled:g.includes(n),children:String(n).padStart(2,`0`)},n))]}),(0,s.jsx)(i.t,{orientation:`vertical`}),(0,s.jsxs)(`div`,{className:`overflow-x-hidden! undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto px-4`,children:[(0,s.jsx)(`p`,{className:`sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary`,children:`MM`}),Array.from({length:60},(t,n)=>(0,s.jsx)(`button`,{type:`button`,className:e.t(`mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled`,n===w&&`bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover`),onClick:()=>{T(n),x(e=>{let t=new Date(e??new Date);return t.setMinutes(n),t})},disabled:_.includes(n),children:String(n).padStart(2,`0`)},n))]})]})]})]})})]})}exports.DateTimePicker=l;
//# sourceMappingURL=DateTimePicker.cjs.map