@infinityfx/fluid/dist/components/input/date-field.js

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

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import o from"./field.js";import{Animatable as t}from"@infinityfx/lively";import i from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import c from"./button.js";import{Icon as s}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}},[`@media(max-width: ${e.breakpoints.mob}px)`]:{".calendar":{background:"none !important",padding:"0 !important"},".years":{background:"var(--f-clr-bg-100) !important"}}})));function p({cc:l={},value:p,defaultValue:u,onChange:f,disabled:g,clearable:b,...h}){const y=d(m,l),[v,x]=void 0!==p?[p,f]:a(u||null),[j,C]=a(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(o,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(k=v,k?`${k.getFullYear()}-${(k.getMonth()+1).toString().padStart(2,"0")}-${k.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||x?.(e)}C(null)},right:b?r(c,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>x?.(null),children:r(s,{type:"close"})}):h.right})}),r(n.Content,{role:"listbox",children:r(t,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(i,{cc:{calendar:y.calendar,years:y.years},round:h.round,size:h.size,disabled:g,value:v,onChange:e=>x?.(e)})})})]});var k}export{p as default};
//# sourceMappingURL=date-field.js.map