@while-and-for/tremor-react/dist/components/input-elements/DatePicker/DatePicker.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import r,{useMemo as t}from"react";import{border as a}from"../../../lib/shape.js";import{sizing as o}from"../../../lib/sizing.js";import{spacing as l}from"../../../lib/spacing.js";import{tremorTwMerge as n}from"../../../lib/tremorTwMerge.js";import{startOfToday as d,startOfMonth as i}from"date-fns";import{enUS as s}from"date-fns/locale";import m from"../../../hooks/useInternalState.js";import{formatSelectedDates as u}from"../DateRangePicker/dateRangePickerUtils.js";import c from"../../../assets/XCircleIcon.js";import{Popover as f}from"@headlessui/react";import{getSelectButtonColors as b,hasValue as p}from"../selectUtils.js";import g from"../Calendar/Calendar.js";const k=d(),h=r.forwardRef(((d,h)=>{var w;const{value:v,defaultValue:x,onValueChange:N,minDate:j,maxDate:C,placeholder:D="Select",disabled:X=!1,locale:y=s,enableClear:E=!0,className:R,enableYearNavigation:P=!1}=d,V=e(d,["value","defaultValue","onValueChange","minDate","maxDate","placeholder","disabled","locale","enableClear","className","enableYearNavigation"]),[Y,S]=m(x,v),z=t((()=>{const e=[];return j&&e.push({before:j}),C&&e.push({after:C}),e}),[j,C]),B=Y?u(Y,void 0,y):D,I=i(null!==(w=null!=Y?Y:C)&&void 0!==w?w:k),M=E&&!X;return r.createElement(f,Object.assign({ref:h,as:"div",className:n("relative w-full min-w-[10rem] text-tremor-default","focus:ring-2 focus:ring-tremor-brand-muted focus:dark:focus:ring-dark-tremor-brand-muted",R)},V),r.createElement(f.Button,{disabled:X,className:n("w-full outline-none text-left whitespace-nowrap truncate focus:ring-2 transition duration-100 rounded-tremor-default","border-tremor-border shadow-tremor-input text-tremor-content-emphasis focus:border-tremor-brand-subtle","dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:text-dark-tremor-content-emphasis dark:focus:border-dark-tremor-brand-subtle",l.twoXl.paddingLeft,M?l.fourXl.paddingRight:l.twoXl.paddingRight,l.sm.paddingY,a.sm.all,b(p(Y),X))},B),M&&Y?r.createElement("button",{type:"button",className:n("absolute outline-none inset-y-0 right-0 flex items-center transition duration-100",l.twoXl.marginRight),onClick:e=>{e.preventDefault(),null==N||N(void 0),S(void 0)}},r.createElement(c,{className:n("flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",o.md.height,o.md.width)})):null,r.createElement(f.Panel,{className:n("absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3","bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown","dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",l.twoXs.marginTop,l.twoXs.marginBottom,a.sm.all)},(({close:e})=>r.createElement(g,{showOutsideDays:!0,mode:"single",defaultMonth:I,selected:Y,onSelect:r=>{null==N||N(r),S(r),e()},locale:y,disabled:z,enableYearNavigation:P}))))}));h.displayName="DatePicker";export{h as default};