@gspa/ui 0.2.0 → 0.3.0

package/README.md

@@ -898,8 +898,12 @@ A date picker component with calendar dropdown.
 | `required` | `Boolean` | `false` | Whether required |
 | `min` | `String \| Date` | - | Minimum selectable date |
 | `max` | `String \| Date` | - | Maximum selectable date |
+| `minDate` | `String \| Date` | - | Minimum selectable date (takes precedence over `min`) |
+| `maxDate` | `String \| Date` | - | Maximum selectable date (takes precedence over `max`) |
+| `yearRange` | `readonly [number, number]` | - | Inclusive years shown and selectable |
+| `initialView` | `'day' \| 'month' \| 'year'` | `'day'` | View displayed whenever the calendar opens |
 | `placeholder` | `String` | `'Select date'` | Placeholder text |
-| `format` | `String` | `'MM/DD/YYYY'` | Date format |
+| `format` | `String` | `'DD/MM/YYYY'` | Date format |
 | `clearable` | `Boolean` | `true` | Show clear button |
 | `showToday` | `Boolean` | `true` | Show today button in calendar |
 | `calendarPosition` | `String` | `'left-0 bottom-full'` | Calendar dropdown position |
@@ -934,6 +938,18 @@ const maxDate = '2023-12-31'
 </script>
 ```
 
+For a date-of-birth field that emits an API-ready `YYYY-MM-DD` value:
+
+```vue
+<DatePicker
+  v-model="dateOfBirth"
+  initial-view="year"
+  :year-range="[1900, currentYear]"
+  :max-date="yesterday"
+  format="YYYY-MM-DD"
+/>
+```
+
 ## ReusableForm (v2)
 
 A reusable inline form component with optional sectioned layout, field-level slot overrides, and cross-field validation.

package/dist/DatePicker.vue_vue_type_script_setup_true_lang-CIKiZaO1.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),ze={class:"relative w-full rounded-md bg-(--ui-surface)"},He={class:"relative"},Ke=["id","value","disabled","placeholder","required","aria-describedby","aria-expanded"],Oe={class:"min-w-0"},Ue={class:"mb-3 flex items-center justify-between gap-2"},qe=["disabled","aria-disabled","aria-label"],je=["aria-label"],We=["disabled","aria-disabled","aria-label"],Ge={class:"mb-1 grid grid-cols-7 gap-1","aria-hidden":"true"},Ze=["aria-label"],Je=["data-day","data-focus-preferred","disabled","aria-disabled","aria-selected","aria-label","onClick","onKeydown"],Qe=["aria-label"],Xe=["data-focus-preferred","disabled","aria-disabled","aria-selected","aria-label","onClick"],et=["aria-label"],tt=["data-focus-preferred","disabled","aria-disabled","aria-selected","aria-label","onClick"],at={key:3,class:"mt-3 border-t pt-2 ui-border"},rt=["disabled","aria-disabled"],lt={key:0,class:"border-t pt-3 ui-border sm:border-l sm:border-t-0 sm:pl-3 sm:pt-0"},nt={class:"max-h-64 space-y-1 overflow-y-auto pr-1"},ot=["aria-selected","onClick"],k=12,it=e.defineComponent({__name:"DatePicker",props:{id:String,modelValue:{type:[String,Date],default:""},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},min:[String,Date],max:[String,Date],minDate:[String,Date],maxDate:[String,Date],yearRange:Array,initialView:{type:String,default:"day",validator:f=>["day","month","year"].includes(f)},placeholder:{type:String,default:"Select date"},format:{type:String,default:"DD/MM/YYYY"},clearable:{type:Boolean,default:!0},showToday:{type:Boolean,default:!0},calendarPosition:{type:String,default:"left-0 bottom-full"},ariaDescribedby:String,customValidation:{type:Function,default:null},disabledDates:{type:[Array,Function],default:null},enableTime:{type:Boolean,default:!1},minuteInterval:{type:Number,default:1}},emits:["update:modelValue","validation-error"],setup(f,{emit:xe}){const i=f,S=xe,p=e.ref(!1),s=e.ref("day"),T=e.ref(null),z=e.ref(null),X=e.ref({}),v=A(new Date),c=e.ref(v.getMonth()),n=e.ref(v.getFullYear()),C=e.ref(v.getDate()),b=e.ref(Math.floor(v.getFullYear()/k)*k),u=e.ref(null),Y=e.ref(!1),D=e.ref("00:00"),we=["Su","Mo","Tu","We","Th","Fr","Sa"],ee=Array.from({length:12},(t,a)=>new Date(2e3,a,1).toLocaleString("default",{month:"long"})),x=e.computed(()=>I(i.minDate??i.min)),w=e.computed(()=>I(i.maxDate??i.max)),m=e.computed(()=>{if(!i.yearRange||i.yearRange.length!==2)return null;const t=Math.trunc(Number(i.yearRange[0])),a=Math.trunc(Number(i.yearRange[1]));return!Number.isFinite(t)||!Number.isFinite(a)?null:t<=a?[t,a]:[a,t]}),B=e.computed(()=>Math.max(m.value?.[0]??Number.NEGATIVE_INFINITY,x.value?.getFullYear()??Number.NEGATIVE_INFINITY)),F=e.computed(()=>Math.min(m.value?.[1]??Number.POSITIVE_INFINITY,w.value?.getFullYear()??Number.POSITIVE_INFINITY)),H=e.computed(()=>ee[c.value]),te=e.computed(()=>M(n.value,c.value)),ae=e.computed(()=>d(n.value,c.value,1).getDay()),re=e.computed(()=>{const t=M(n.value,c.value-1);return Array.from({length:ae.value},(a,r)=>t-ae.value+r+1)}),De=e.computed(()=>{const t=re.value.length+te.value,a=t%7===0?0:7-t%7;return Array.from({length:a},(r,l)=>l+1)}),le=e.computed(()=>Array.from({length:k},(t,a)=>b.value+a).filter(t=>t>=B.value&&t<=F.value)),ne=e.computed(()=>b.value+k-1),$=e.computed(()=>{if(s.value==="day")return`${H.value} ${n.value}`;if(s.value==="month")return String(n.value);const t=le.value;return t.length?`${t[0]}–${t[t.length-1]}`:`${b.value}–${ne.value}`}),Ne=e.computed(()=>s.value==="day"?`Select the month. Currently ${$.value}`:s.value==="month"?`Select the year. Currently ${n.value}`:`Return to day selection. Showing years ${$.value}`),Ee=e.computed(()=>s.value==="day"?"Previous month":s.value==="month"?"Previous year":"Previous year range"),Se=e.computed(()=>s.value==="day"?"Next month":s.value==="month"?"Next year":"Next year range"),K=e.computed(()=>s.value==="day"?j(n.value,c.value-1):s.value==="month"?n.value-1>=B.value:b.value>B.value),O=e.computed(()=>s.value==="day"?j(n.value,c.value+1):s.value==="month"?n.value+1<=F.value:ne.value<F.value),oe=e.computed(()=>u.value?i.enableTime?Me(u.value):ie(u.value):""),Be=e.computed(()=>{const t=Math.min(60,Math.max(1,Number(i.minuteInterval)||1)),a=[];for(let r=0;r<24;r++)for(let l=0;l<60;l+=t)a.push(`${String(r).padStart(2,"0")}:${String(l).padStart(2,"0")}`);return a});function d(t,a,r,l=0,o=0){const y=new Date(0);return y.setFullYear(t,a,r),y.setHours(l,o,0,0),y}function A(t){return d(t.getFullYear(),t.getMonth(),t.getDate())}function M(t,a){return d(t,a+1,0).getDate()}function I(t){if(!t)return null;if(t instanceof Date)return Number.isNaN(t.getTime())?null:d(t.getFullYear(),t.getMonth(),t.getDate(),t.getHours(),t.getMinutes());const a=t.match(/^(\d{4,})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?/);if(a){const[,l,o,y,h="0",V="0"]=a,ye=Number(l),he=Number(o)-1,ke=Number(y),P=d(ye,he,ke,Number(h),Number(V));return P.getFullYear()===ye&&P.getMonth()===he&&P.getDate()===ke?P:null}const r=new Date(t);return Number.isNaN(r.getTime())?null:r}function g(t){return d(t.getFullYear(),t.getMonth(),t.getDate()).getTime()}function ie(t){const a=String(t.getMonth()+1).padStart(2,"0"),r=String(t.getDate()).padStart(2,"0");return i.format.replace("MM",a).replace("DD",r).replace("YYYY",String(t.getFullYear()))}function Me(t){const a=String(t.getHours()).padStart(2,"0"),r=String(t.getMinutes()).padStart(2,"0");return`${ie(t)} ${a}:${r}`}function Ve(t){const a=String(t.getFullYear()).padStart(4,"0"),r=String(t.getMonth()+1).padStart(2,"0"),l=String(t.getDate()).padStart(2,"0");return`${a}-${r}-${l}`}function U(t){const a=g(t);return!(x.value&&a<g(x.value)||w.value&&a>g(w.value)||m.value&&(t.getFullYear()<m.value[0]||t.getFullYear()>m.value[1]))}function N(t){return!U(t)||i.disabledDates&&(typeof i.disabledDates=="function"&&i.disabledDates(new Date(t))||Array.isArray(i.disabledDates)&&i.disabledDates.some(a=>{const r=I(a);return r?g(r)===g(t):!1}))?!0:!!i.customValidation?.(new Date(t))}function q(t){return N(d(n.value,c.value,t))}function _(t){for(let a=1;a<=M(n.value,t);a++)if(!N(d(n.value,t,a)))return!1;return!0}function R(t){if(t<B.value||t>F.value)return!0;for(let a=0;a<12;a++)for(let r=1;r<=M(t,a);r++)if(!N(d(t,a,r)))return!1;return!0}function j(t,a){const r=d(t,a,1),l=d(r.getFullYear(),r.getMonth()+1,0);return!(r.getFullYear()<B.value||r.getFullYear()>F.value||x.value&&g(l)<g(x.value)||w.value&&g(r)>g(w.value))}function W(t){const a=m.value?.[0];return a!==void 0?a+Math.floor((t-a)/k)*k:Math.floor(t/k)*k}function ue(t){let a=A(t);return m.value&&a.getFullYear()<m.value[0]&&(a=d(m.value[0],0,1)),m.value&&a.getFullYear()>m.value[1]&&(a=d(m.value[1],11,31)),x.value&&g(a)<g(x.value)&&(a=A(x.value)),w.value&&g(a)>g(w.value)&&(a=A(w.value)),a}function Te(t){return v.getDate()===t&&v.getMonth()===c.value&&v.getFullYear()===n.value}function G(t){return!!(u.value&&u.value.getDate()===t&&u.value.getMonth()===c.value&&u.value.getFullYear()===n.value)}function se(t){if(!t)return Y.value=!1,S("validation-error",null),!0;const a=i.customValidation?.(new Date(t))||null;return Y.value=!!a,S("validation-error",a),!a}async function Z(){await e.nextTick();const t=z.value||(i.id?document.getElementById(i.id):null);if(!t||!T.value)return;const a=t.getBoundingClientRect(),r=T.value.offsetHeight||360,l=T.value.offsetWidth||(i.enableTime?448:320),o=window.innerHeight-a.bottom,y=o>=r||o>a.top?a.bottom+8:Math.max(8,a.top-r-8),h=Math.min(Math.max(16,a.left),Math.max(16,window.innerWidth-l-16));X.value={top:`${y}px`,left:`${h}px`}}function E(t){C.value=t.getDate(),c.value=t.getMonth(),n.value=t.getFullYear(),b.value=W(t.getFullYear())}async function de(){i.disabled||p.value||((!u.value||!U(u.value))&&E(ue(v)),s.value=i.initialView,b.value=W(n.value),p.value=!0,await Z(),await ve())}function Ye(){p.value?L():de()}function L(t=!1){p.value=!1,t&&e.nextTick(()=>z.value?.focus())}async function J(t){s.value=t,t==="year"&&(b.value=W(n.value)),await e.nextTick(),await Z(),await ve()}function Fe(){J({day:"month",month:"year",year:"day"}[s.value])}function Ce(){K.value&&(s.value==="day"?E(d(n.value,c.value-1,1)):s.value==="month"?n.value--:b.value=Math.max(b.value-k,B.value))}function $e(){O.value&&(s.value==="day"?E(d(n.value,c.value+1,1)):s.value==="month"?n.value++:b.value+=k)}function Ae(t){R(t)||(n.value=t,J("month"))}function Ie(t){_(t)||(c.value=t,C.value=Math.min(C.value,M(n.value,t)),J("day"))}function ce(t){const a=d(n.value,c.value,t);if(N(a)||!se(a))return;const[r="0",l="0"]=D.value.split(":");a.setHours(Number(r),Number(l),0,0),u.value=a,fe(a),i.enableTime||window.setTimeout(()=>L(),150)}function fe(t){const a=Ve(t);i.enableTime?S("update:modelValue",`${a}T${D.value}`):S("update:modelValue",a)}function _e(){N(v)||(E(v),ce(v.getDate()))}function Re(){u.value=null,D.value="00:00",Y.value=!1,S("update:modelValue",""),S("validation-error",null)}function Q(){return Array.from(T.value?.querySelectorAll("[data-picker-option]:not(:disabled)")||[])}async function ve(){await e.nextTick();const t=Q(),a=t.find(l=>l.getAttribute("aria-selected")==="true"),r=t.find(l=>l.dataset.focusPreferred==="true");(a||r||t[0])?.focus()}function me(t,a){const r=Q(),l=r.indexOf(t.currentTarget);if(l<0)return;let o=l;if(t.key==="ArrowRight")o=Math.min(r.length-1,l+1);else if(t.key==="ArrowLeft")o=Math.max(0,l-1);else if(t.key==="ArrowDown")o=Math.min(r.length-1,l+a);else if(t.key==="ArrowUp")o=Math.max(0,l-a);else if(t.key==="Home")o=l-l%a;else if(t.key==="End")o=Math.min(r.length-1,l+a-1-l%a);else return;t.preventDefault(),r[o]?.focus()}function Le(t,a){if(t.key==="PageUp"||t.key==="PageDown"){t.preventDefault();const h=t.key==="PageUp"?-1:1,V=d(n.value,c.value+h,Math.min(a,M(n.value,c.value+h)));j(V.getFullYear(),V.getMonth())&&(E(V),e.nextTick(()=>ge(V.getDate(),h)));return}if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(t.key))return;t.preventDefault();let l={ArrowRight:1,ArrowLeft:-1,ArrowDown:7,ArrowUp:-7}[t.key];t.key==="Home"&&(l=-d(n.value,c.value,a).getDay()),t.key==="End"&&(l=6-d(n.value,c.value,a).getDay());let o=d(n.value,c.value,a+l);const y=l<0?-1:1;for(let h=0;h<3660;h++){if(!U(o))return;if(!N(o)){E(o),e.nextTick(()=>ge(o.getDate(),y));return}o=d(o.getFullYear(),o.getMonth(),o.getDate()+y)}}function ge(t,a){const r=Q();(r.find(o=>Number(o.dataset.day)===t)||(a<0?r.at(-1):r[0]))?.focus()}function Pe(t){["Enter"," ","ArrowDown"].includes(t.key)?(t.preventDefault(),de()):t.key==="Escape"&&p.value&&(t.preventDefault(),L(!0))}function pe(t){t.key==="Escape"&&p.value&&(t.preventDefault(),L(!0))}function be(){p.value&&Z()}return e.watch(()=>i.modelValue,t=>{const a=I(t);if(!a){u.value=null,Y.value=!1;return}u.value=a,D.value=`${String(a.getHours()).padStart(2,"0")}:${String(a.getMinutes()).padStart(2,"0")}`,E(a),se(a)},{immediate:!0}),e.watch([m,x,w],()=>{!u.value&&!p.value&&E(ue(v))}),e.watch(D,t=>{if(!i.enableTime||!u.value)return;const[a="0",r="0"]=t.split(":");u.value.setHours(Number(a),Number(r),0,0),fe(u.value)}),e.onMounted(()=>{document.addEventListener("keydown",pe),window.addEventListener("resize",be)}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",pe),window.removeEventListener("resize",be)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("div",He,[e.createElementVNode("input",{id:f.id,ref_key:"inputRef",ref:z,type:"text",value:oe.value,readonly:"",disabled:f.disabled,placeholder:f.placeholder,required:f.required,"aria-describedby":f.ariaDescribedby,"aria-haspopup":"dialog","aria-expanded":p.value,class:e.normalizeClass(["w-full cursor-pointer rounded-md border px-3 py-2 pr-10 text-sm ui-surface ui-text placeholder:text-(--ui-text-muted) transition-colors","focus:border-(--ui-primary) focus:outline-none focus:ring-2 focus:ring-(--ui-ring)","disabled:cursor-not-allowed disabled:bg-(--ui-surface-muted) disabled:text-(--ui-text-muted)",Y.value?"border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)":"ui-border"]),onClick:Ye,onKeydown:Pe},null,42,Ke),a[4]||(a[4]=e.createElementVNode("div",{class:"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"},[e.createElementVNode("svg",{class:"h-4 w-4 ui-text-muted",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})])],-1)),f.clearable&&oe.value&&!f.disabled?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"absolute right-9 top-1/2 -translate-y-1/2 rounded p-1 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring)","aria-label":"Clear date",onClick:e.withModifiers(Re,["stop"])},[...a[3]||(a[3]=[e.createElementVNode("svg",{class:"h-3.5 w-3.5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1)])])):e.createCommentVNode("",!0)]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{"enter-active-class":"transition duration-100 ease-out","enter-from-class":"scale-95 opacity-0","enter-to-class":"scale-100 opacity-100","leave-active-class":"transition duration-75 ease-in","leave-from-class":"scale-100 opacity-100","leave-to-class":"scale-95 opacity-0"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"calendarRef",ref:T,style:e.normalizeStyle(X.value),role:"dialog","aria-label":"Choose date","aria-modal":"false",class:e.normalizeClass(["fixed z-10000 max-w-[calc(100vw-2rem)] rounded-lg border p-3 shadow-xl ui-surface ui-border-strong",f.enableTime?"w-[28rem]":"w-80"]),onClick:a[2]||(a[2]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",{class:e.normalizeClass(f.enableTime?"grid grid-cols-1 gap-3 sm:grid-cols-[1fr_7.75rem]":"block")},[e.createElementVNode("div",Oe,[e.createElementVNode("div",Ue,[e.createElementVNode("button",{type:"button",class:"rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",disabled:!K.value,"aria-disabled":!K.value,"aria-label":Ee.value,onClick:Ce},[...a[5]||(a[5]=[e.createElementVNode("svg",{class:"h-4 w-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 18l-6-6 6-6"})],-1)])],8,qe),e.createElementVNode("button",{type:"button",class:"min-w-0 flex-1 rounded px-2 py-1 text-sm font-semibold ui-text transition-colors hover:bg-(--ui-surface-muted) focus-visible:ring-2 focus-visible:ring-(--ui-ring)","aria-label":Ne.value,onClick:Fe},e.toDisplayString($.value),9,je),e.createElementVNode("button",{type:"button",class:"rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",disabled:!O.value,"aria-disabled":!O.value,"aria-label":Se.value,onClick:$e},[...a[6]||(a[6]=[e.createElementVNode("svg",{class:"h-4 w-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 18l6-6-6-6"})],-1)])],8,We)]),s.value==="day"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",Ge,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(we,r=>e.createElementVNode("div",{key:r,class:"py-1 text-center text-xs font-medium ui-text-muted"},e.toDisplayString(r),1)),64))]),e.createElementVNode("div",{class:"grid grid-cols-7 gap-1",role:"grid","aria-label":`${H.value} ${n.value}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(re.value,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:`prev-${l}`,class:"py-1.5 text-center text-xs ui-text-soft","aria-hidden":"true"},e.toDisplayString(r),1))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(te.value,r=>(e.openBlock(),e.createElementBlock("button",{key:r,type:"button",role:"gridcell","data-picker-option":"","data-day":r,"data-focus-preferred":r===C.value,disabled:q(r),"aria-disabled":q(r),"aria-selected":G(r),"aria-label":`${H.value} ${r}, ${n.value}`,class:e.normalizeClass(["h-8 w-full min-w-0 rounded text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",Te(r)&&!G(r)?"ui-primary-soft ring-1 ring-(--ui-primary)":"",G(r)?"ui-primary-bg":"ui-text hover:bg-(--ui-surface-muted)",q(r)?"cursor-not-allowed text-(--ui-text-soft) opacity-45 line-through hover:bg-transparent":"cursor-pointer"]),onClick:l=>ce(r),onKeydown:l=>Le(l,r)},e.toDisplayString(r),43,Je))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(De.value,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:`next-${l}`,class:"py-1.5 text-center text-xs ui-text-soft","aria-hidden":"true"},e.toDisplayString(r),1))),128))],8,Ze)],64)):s.value==="month"?(e.openBlock(),e.createElementBlock("div",{key:1,class:"grid grid-cols-3 gap-2",role:"grid","aria-label":`Select a month in ${n.value}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(ee),(r,l)=>(e.openBlock(),e.createElementBlock("button",{key:r,type:"button",role:"gridcell","data-picker-option":"","data-focus-preferred":l===c.value,disabled:_(l),"aria-disabled":_(l),"aria-selected":u.value?.getFullYear()===n.value&&u.value?.getMonth()===l,"aria-label":`Select ${r} ${n.value}`,class:e.normalizeClass(["min-h-11 rounded px-2 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",u.value?.getFullYear()===n.value&&u.value?.getMonth()===l?"ui-primary-bg":"ui-text hover:bg-(--ui-surface-muted)",_(l)?"cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent":""]),onClick:o=>Ie(l),onKeydown:a[0]||(a[0]=o=>me(o,3))},e.toDisplayString(r.slice(0,3)),43,Xe))),128))],8,Qe)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"grid grid-cols-3 gap-2 sm:grid-cols-4",role:"grid","aria-label":`Select a year from ${$.value}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(le.value,r=>(e.openBlock(),e.createElementBlock("button",{key:r,type:"button",role:"gridcell","data-picker-option":"","data-focus-preferred":r===n.value,disabled:R(r),"aria-disabled":R(r),"aria-selected":u.value?.getFullYear()===r,"aria-label":`Select year ${r}`,class:e.normalizeClass(["min-h-11 rounded px-1 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",u.value?.getFullYear()===r?"ui-primary-bg":"ui-text hover:bg-(--ui-surface-muted)",R(r)?"cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent":""]),onClick:l=>Ae(r),onKeydown:a[1]||(a[1]=l=>me(l,3))},e.toDisplayString(r),43,tt))),128))],8,et)),f.showToday&&s.value==="day"?(e.openBlock(),e.createElementBlock("div",at,[e.createElementVNode("button",{type:"button",class:"w-full rounded px-3 py-1.5 text-xs font-medium ui-primary transition-colors hover:bg-(--ui-primary-soft) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",disabled:N(e.unref(v)),"aria-disabled":N(e.unref(v)),onClick:_e}," Today ",8,rt)])):e.createCommentVNode("",!0)]),f.enableTime?(e.openBlock(),e.createElementBlock("div",lt,[a[7]||(a[7]=e.createElementVNode("div",{class:"mb-2 text-xs font-semibold ui-text"}," Time ",-1)),e.createElementVNode("div",nt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Be.value,r=>(e.openBlock(),e.createElementBlock("button",{key:r,type:"button",class:e.normalizeClass(["w-full rounded px-2 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",r===D.value?"ui-primary-bg":"ui-text hover:bg-(--ui-surface-muted)"]),"aria-selected":r===D.value,onClick:l=>D.value=r},e.toDisplayString(r),11,ot))),128))])])):e.createCommentVNode("",!0)],2)],6)):e.createCommentVNode("",!0)]),_:1})]))]))}});exports._sfc_main=it;

package/dist/DatePicker.vue_vue_type_script_setup_true_lang-Dx_9f8DO.js

@@ -0,0 +1,557 @@
+import { defineComponent as et, ref as h, computed as g, watch as se, onMounted as tt, onBeforeUnmount as at, createElementBlock as f, openBlock as d, createElementVNode as o, createBlock as rt, createCommentVNode as Z, normalizeClass as V, withModifiers as Ae, Teleport as lt, createVNode as nt, Transition as it, withCtx as ut, normalizeStyle as ot, toDisplayString as F, Fragment as C, renderList as A, unref as de, nextTick as R } from "vue";
+const st = { class: "relative w-full rounded-md bg-(--ui-surface)" }, dt = { class: "relative" }, ct = ["id", "value", "disabled", "placeholder", "required", "aria-describedby", "aria-expanded"], ft = { class: "min-w-0" }, vt = { class: "mb-3 flex items-center justify-between gap-2" }, gt = ["disabled", "aria-disabled", "aria-label"], mt = ["aria-label"], bt = ["disabled", "aria-disabled", "aria-label"], pt = {
+  class: "mb-1 grid grid-cols-7 gap-1",
+  "aria-hidden": "true"
+}, yt = ["aria-label"], ht = ["data-day", "data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick", "onKeydown"], xt = ["aria-label"], wt = ["data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick"], Dt = ["aria-label"], kt = ["data-focus-preferred", "disabled", "aria-disabled", "aria-selected", "aria-label", "onClick"], Mt = {
+  key: 3,
+  class: "mt-3 border-t pt-2 ui-border"
+}, St = ["disabled", "aria-disabled"], Nt = {
+  key: 0,
+  class: "border-t pt-3 ui-border sm:border-l sm:border-t-0 sm:pl-3 sm:pt-0"
+}, Yt = { class: "max-h-64 space-y-1 overflow-y-auto pr-1" }, Tt = ["aria-selected", "onClick"], M = 12, Ft = /* @__PURE__ */ et({
+  __name: "DatePicker",
+  props: {
+    id: String,
+    modelValue: { type: [String, Date], default: "" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    min: [String, Date],
+    max: [String, Date],
+    minDate: [String, Date],
+    maxDate: [String, Date],
+    yearRange: Array,
+    initialView: {
+      type: String,
+      default: "day",
+      validator: (m) => ["day", "month", "year"].includes(m)
+    },
+    placeholder: { type: String, default: "Select date" },
+    format: { type: String, default: "DD/MM/YYYY" },
+    clearable: { type: Boolean, default: !0 },
+    showToday: { type: Boolean, default: !0 },
+    calendarPosition: { type: String, default: "left-0 bottom-full" },
+    ariaDescribedby: String,
+    customValidation: { type: Function, default: null },
+    disabledDates: { type: [Array, Function], default: null },
+    enableTime: { type: Boolean, default: !1 },
+    minuteInterval: { type: Number, default: 1 }
+  },
+  emits: ["update:modelValue", "validation-error"],
+  setup(m, { emit: Ie }) {
+    const i = m, I = Ie, x = h(!1), s = h("day"), P = h(null), J = h(null), ce = h({}), b = O(/* @__PURE__ */ new Date()), v = h(b.getMonth()), l = h(b.getFullYear()), z = h(b.getDate()), w = h(Math.floor(b.getFullYear() / M) * M), u = h(null), H = h(!1), Y = h("00:00"), Ee = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], fe = Array.from(
+      { length: 12 },
+      (e, t) => new Date(2e3, t, 1).toLocaleString("default", { month: "long" })
+    ), S = g(() => U(i.minDate ?? i.min)), N = g(() => U(i.maxDate ?? i.max)), p = g(() => {
+      if (!i.yearRange || i.yearRange.length !== 2) return null;
+      const e = Math.trunc(Number(i.yearRange[0])), t = Math.trunc(Number(i.yearRange[1]));
+      return !Number.isFinite(e) || !Number.isFinite(t) ? null : e <= t ? [e, t] : [t, e];
+    }), E = g(() => Math.max(
+      p.value?.[0] ?? Number.NEGATIVE_INFINITY,
+      S.value?.getFullYear() ?? Number.NEGATIVE_INFINITY
+    )), L = g(() => Math.min(
+      p.value?.[1] ?? Number.POSITIVE_INFINITY,
+      N.value?.getFullYear() ?? Number.POSITIVE_INFINITY
+    )), Q = g(() => fe[v.value]), ve = g(() => _(l.value, v.value)), ge = g(() => c(l.value, v.value, 1).getDay()), me = g(() => {
+      const e = _(l.value, v.value - 1);
+      return Array.from(
+        { length: ge.value },
+        (t, a) => e - ge.value + a + 1
+      );
+    }), _e = g(() => {
+      const e = me.value.length + ve.value, t = e % 7 === 0 ? 0 : 7 - e % 7;
+      return Array.from({ length: t }, (a, r) => r + 1);
+    }), be = g(
+      () => Array.from({ length: M }, (e, t) => w.value + t).filter((e) => e >= E.value && e <= L.value)
+    ), pe = g(() => w.value + M - 1), K = g(() => {
+      if (s.value === "day") return `${Q.value} ${l.value}`;
+      if (s.value === "month") return String(l.value);
+      const e = be.value;
+      return e.length ? `${e[0]}–${e[e.length - 1]}` : `${w.value}–${pe.value}`;
+    }), Be = g(() => s.value === "day" ? `Select the month. Currently ${K.value}` : s.value === "month" ? `Select the year. Currently ${l.value}` : `Return to day selection. Showing years ${K.value}`), Re = g(() => s.value === "day" ? "Previous month" : s.value === "month" ? "Previous year" : "Previous year range"), Pe = g(() => s.value === "day" ? "Next month" : s.value === "month" ? "Next year" : "Next year range"), X = g(() => s.value === "day" ? re(l.value, v.value - 1) : s.value === "month" ? l.value - 1 >= E.value : w.value > E.value), ee = g(() => s.value === "day" ? re(l.value, v.value + 1) : s.value === "month" ? l.value + 1 <= L.value : pe.value < L.value), ye = g(() => u.value ? i.enableTime ? Le(u.value) : he(u.value) : ""), He = g(() => {
+      const e = Math.min(60, Math.max(1, Number(i.minuteInterval) || 1)), t = [];
+      for (let a = 0; a < 24; a++)
+        for (let r = 0; r < 60; r += e)
+          t.push(`${String(a).padStart(2, "0")}:${String(r).padStart(2, "0")}`);
+      return t;
+    });
+    function c(e, t, a, r = 0, n = 0) {
+      const D = /* @__PURE__ */ new Date(0);
+      return D.setFullYear(e, t, a), D.setHours(r, n, 0, 0), D;
+    }
+    function O(e) {
+      return c(e.getFullYear(), e.getMonth(), e.getDate());
+    }
+    function _(e, t) {
+      return c(e, t + 1, 0).getDate();
+    }
+    function U(e) {
+      if (!e) return null;
+      if (e instanceof Date)
+        return Number.isNaN(e.getTime()) ? null : c(e.getFullYear(), e.getMonth(), e.getDate(), e.getHours(), e.getMinutes());
+      const t = e.match(/^(\d{4,})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?/);
+      if (t) {
+        const [, r, n, D, k = "0", B = "0"] = t, Fe = Number(r), Ce = Number(n) - 1, Ve = Number(D), G = c(Fe, Ce, Ve, Number(k), Number(B));
+        return G.getFullYear() === Fe && G.getMonth() === Ce && G.getDate() === Ve ? G : null;
+      }
+      const a = new Date(e);
+      return Number.isNaN(a.getTime()) ? null : a;
+    }
+    function y(e) {
+      return c(e.getFullYear(), e.getMonth(), e.getDate()).getTime();
+    }
+    function he(e) {
+      const t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+      return i.format.replace("MM", t).replace("DD", a).replace("YYYY", String(e.getFullYear()));
+    }
+    function Le(e) {
+      const t = String(e.getHours()).padStart(2, "0"), a = String(e.getMinutes()).padStart(2, "0");
+      return `${he(e)} ${t}:${a}`;
+    }
+    function ze(e) {
+      const t = String(e.getFullYear()).padStart(4, "0"), a = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+      return `${t}-${a}-${r}`;
+    }
+    function te(e) {
+      const t = y(e);
+      return !(S.value && t < y(S.value) || N.value && t > y(N.value) || p.value && (e.getFullYear() < p.value[0] || e.getFullYear() > p.value[1]));
+    }
+    function T(e) {
+      return !te(e) || i.disabledDates && (typeof i.disabledDates == "function" && i.disabledDates(new Date(e)) || Array.isArray(i.disabledDates) && i.disabledDates.some((t) => {
+        const a = U(t);
+        return a ? y(a) === y(e) : !1;
+      })) ? !0 : !!i.customValidation?.(new Date(e));
+    }
+    function ae(e) {
+      return T(c(l.value, v.value, e));
+    }
+    function j(e) {
+      for (let t = 1; t <= _(l.value, e); t++)
+        if (!T(c(l.value, e, t))) return !1;
+      return !0;
+    }
+    function q(e) {
+      if (e < E.value || e > L.value) return !0;
+      for (let t = 0; t < 12; t++)
+        for (let a = 1; a <= _(e, t); a++)
+          if (!T(c(e, t, a))) return !1;
+      return !0;
+    }
+    function re(e, t) {
+      const a = c(e, t, 1), r = c(a.getFullYear(), a.getMonth() + 1, 0);
+      return !(a.getFullYear() < E.value || a.getFullYear() > L.value || S.value && y(r) < y(S.value) || N.value && y(a) > y(N.value));
+    }
+    function le(e) {
+      const t = p.value?.[0];
+      return t !== void 0 ? t + Math.floor((e - t) / M) * M : Math.floor(e / M) * M;
+    }
+    function xe(e) {
+      let t = O(e);
+      return p.value && t.getFullYear() < p.value[0] && (t = c(p.value[0], 0, 1)), p.value && t.getFullYear() > p.value[1] && (t = c(p.value[1], 11, 31)), S.value && y(t) < y(S.value) && (t = O(S.value)), N.value && y(t) > y(N.value) && (t = O(N.value)), t;
+    }
+    function Ke(e) {
+      return b.getDate() === e && b.getMonth() === v.value && b.getFullYear() === l.value;
+    }
+    function ne(e) {
+      return !!(u.value && u.value.getDate() === e && u.value.getMonth() === v.value && u.value.getFullYear() === l.value);
+    }
+    function we(e) {
+      if (!e)
+        return H.value = !1, I("validation-error", null), !0;
+      const t = i.customValidation?.(new Date(e)) || null;
+      return H.value = !!t, I("validation-error", t), !t;
+    }
+    async function ie() {
+      await R();
+      const e = J.value || (i.id ? document.getElementById(i.id) : null);
+      if (!e || !P.value) return;
+      const t = e.getBoundingClientRect(), a = P.value.offsetHeight || 360, r = P.value.offsetWidth || (i.enableTime ? 448 : 320), n = window.innerHeight - t.bottom, D = n >= a || n > t.top ? t.bottom + 8 : Math.max(8, t.top - a - 8), k = Math.min(Math.max(16, t.left), Math.max(16, window.innerWidth - r - 16));
+      ce.value = { top: `${D}px`, left: `${k}px` };
+    }
+    function $(e) {
+      z.value = e.getDate(), v.value = e.getMonth(), l.value = e.getFullYear(), w.value = le(e.getFullYear());
+    }
+    async function De() {
+      i.disabled || x.value || ((!u.value || !te(u.value)) && $(xe(b)), s.value = i.initialView, w.value = le(l.value), x.value = !0, await ie(), await Se());
+    }
+    function Oe() {
+      x.value ? W() : De();
+    }
+    function W(e = !1) {
+      x.value = !1, e && R(() => J.value?.focus());
+    }
+    async function ue(e) {
+      s.value = e, e === "year" && (w.value = le(l.value)), await R(), await ie(), await Se();
+    }
+    function Ue() {
+      ue({ day: "month", month: "year", year: "day" }[s.value]);
+    }
+    function je() {
+      X.value && (s.value === "day" ? $(c(l.value, v.value - 1, 1)) : s.value === "month" ? l.value-- : w.value = Math.max(w.value - M, E.value));
+    }
+    function qe() {
+      ee.value && (s.value === "day" ? $(c(l.value, v.value + 1, 1)) : s.value === "month" ? l.value++ : w.value += M);
+    }
+    function We(e) {
+      q(e) || (l.value = e, ue("month"));
+    }
+    function Ge(e) {
+      j(e) || (v.value = e, z.value = Math.min(z.value, _(l.value, e)), ue("day"));
+    }
+    function ke(e) {
+      const t = c(l.value, v.value, e);
+      if (T(t) || !we(t)) return;
+      const [a = "0", r = "0"] = Y.value.split(":");
+      t.setHours(Number(a), Number(r), 0, 0), u.value = t, Me(t), i.enableTime || window.setTimeout(() => W(), 150);
+    }
+    function Me(e) {
+      const t = ze(e);
+      i.enableTime ? I("update:modelValue", `${t}T${Y.value}`) : I("update:modelValue", t);
+    }
+    function Ze() {
+      T(b) || ($(b), ke(b.getDate()));
+    }
+    function Je() {
+      u.value = null, Y.value = "00:00", H.value = !1, I("update:modelValue", ""), I("validation-error", null);
+    }
+    function oe() {
+      return Array.from(P.value?.querySelectorAll("[data-picker-option]:not(:disabled)") || []);
+    }
+    async function Se() {
+      await R();
+      const e = oe(), t = e.find((r) => r.getAttribute("aria-selected") === "true"), a = e.find((r) => r.dataset.focusPreferred === "true");
+      (t || a || e[0])?.focus();
+    }
+    function Ne(e, t) {
+      const a = oe(), r = a.indexOf(e.currentTarget);
+      if (r < 0) return;
+      let n = r;
+      if (e.key === "ArrowRight") n = Math.min(a.length - 1, r + 1);
+      else if (e.key === "ArrowLeft") n = Math.max(0, r - 1);
+      else if (e.key === "ArrowDown") n = Math.min(a.length - 1, r + t);
+      else if (e.key === "ArrowUp") n = Math.max(0, r - t);
+      else if (e.key === "Home") n = r - r % t;
+      else if (e.key === "End") n = Math.min(a.length - 1, r + t - 1 - r % t);
+      else return;
+      e.preventDefault(), a[n]?.focus();
+    }
+    function Qe(e, t) {
+      if (e.key === "PageUp" || e.key === "PageDown") {
+        e.preventDefault();
+        const k = e.key === "PageUp" ? -1 : 1, B = c(l.value, v.value + k, Math.min(t, _(l.value, v.value + k)));
+        re(B.getFullYear(), B.getMonth()) && ($(B), R(() => Ye(B.getDate(), k)));
+        return;
+      }
+      if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+      e.preventDefault();
+      let r = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7 }[e.key];
+      e.key === "Home" && (r = -c(l.value, v.value, t).getDay()), e.key === "End" && (r = 6 - c(l.value, v.value, t).getDay());
+      let n = c(l.value, v.value, t + r);
+      const D = r < 0 ? -1 : 1;
+      for (let k = 0; k < 3660; k++) {
+        if (!te(n)) return;
+        if (!T(n)) {
+          $(n), R(() => Ye(n.getDate(), D));
+          return;
+        }
+        n = c(n.getFullYear(), n.getMonth(), n.getDate() + D);
+      }
+    }
+    function Ye(e, t) {
+      const a = oe();
+      (a.find((n) => Number(n.dataset.day) === e) || (t < 0 ? a.at(-1) : a[0]))?.focus();
+    }
+    function Xe(e) {
+      ["Enter", " ", "ArrowDown"].includes(e.key) ? (e.preventDefault(), De()) : e.key === "Escape" && x.value && (e.preventDefault(), W(!0));
+    }
+    function Te(e) {
+      e.key === "Escape" && x.value && (e.preventDefault(), W(!0));
+    }
+    function $e() {
+      x.value && ie();
+    }
+    return se(() => i.modelValue, (e) => {
+      const t = U(e);
+      if (!t) {
+        u.value = null, H.value = !1;
+        return;
+      }
+      u.value = t, Y.value = `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`, $(t), we(t);
+    }, { immediate: !0 }), se([p, S, N], () => {
+      !u.value && !x.value && $(xe(b));
+    }), se(Y, (e) => {
+      if (!i.enableTime || !u.value) return;
+      const [t = "0", a = "0"] = e.split(":");
+      u.value.setHours(Number(t), Number(a), 0, 0), Me(u.value);
+    }), tt(() => {
+      document.addEventListener("keydown", Te), window.addEventListener("resize", $e);
+    }), at(() => {
+      document.removeEventListener("keydown", Te), window.removeEventListener("resize", $e);
+    }), (e, t) => (d(), f("div", st, [
+      o("div", dt, [
+        o("input", {
+          id: m.id,
+          ref_key: "inputRef",
+          ref: J,
+          type: "text",
+          value: ye.value,
+          readonly: "",
+          disabled: m.disabled,
+          placeholder: m.placeholder,
+          required: m.required,
+          "aria-describedby": m.ariaDescribedby,
+          "aria-haspopup": "dialog",
+          "aria-expanded": x.value,
+          class: V([
+            "w-full cursor-pointer rounded-md border px-3 py-2 pr-10 text-sm ui-surface ui-text placeholder:text-(--ui-text-muted) transition-colors",
+            "focus:border-(--ui-primary) focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",
+            "disabled:cursor-not-allowed disabled:bg-(--ui-surface-muted) disabled:text-(--ui-text-muted)",
+            H.value ? "border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)" : "ui-border"
+          ]),
+          onClick: Oe,
+          onKeydown: Xe
+        }, null, 42, ct),
+        t[4] || (t[4] = o("div", { class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2" }, [
+          o("svg", {
+            class: "h-4 w-4 ui-text-muted",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            })
+          ])
+        ], -1)),
+        m.clearable && ye.value && !m.disabled ? (d(), f("button", {
+          key: 0,
+          type: "button",
+          class: "absolute right-9 top-1/2 -translate-y-1/2 rounded p-1 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+          "aria-label": "Clear date",
+          onClick: Ae(Je, ["stop"])
+        }, [...t[3] || (t[3] = [
+          o("svg", {
+            class: "h-3.5 w-3.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          ], -1)
+        ])])) : Z("", !0)
+      ]),
+      (d(), rt(lt, { to: "body" }, [
+        nt(it, {
+          "enter-active-class": "transition duration-100 ease-out",
+          "enter-from-class": "scale-95 opacity-0",
+          "enter-to-class": "scale-100 opacity-100",
+          "leave-active-class": "transition duration-75 ease-in",
+          "leave-from-class": "scale-100 opacity-100",
+          "leave-to-class": "scale-95 opacity-0"
+        }, {
+          default: ut(() => [
+            x.value ? (d(), f("div", {
+              key: 0,
+              ref_key: "calendarRef",
+              ref: P,
+              style: ot(ce.value),
+              role: "dialog",
+              "aria-label": "Choose date",
+              "aria-modal": "false",
+              class: V(["fixed z-10000 max-w-[calc(100vw-2rem)] rounded-lg border p-3 shadow-xl ui-surface ui-border-strong", m.enableTime ? "w-[28rem]" : "w-80"]),
+              onClick: t[2] || (t[2] = Ae(() => {
+              }, ["stop"]))
+            }, [
+              o("div", {
+                class: V(m.enableTime ? "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_7.75rem]" : "block")
+              }, [
+                o("div", ft, [
+                  o("div", vt, [
+                    o("button", {
+                      type: "button",
+                      class: "rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: !X.value,
+                      "aria-disabled": !X.value,
+                      "aria-label": Re.value,
+                      onClick: je
+                    }, [...t[5] || (t[5] = [
+                      o("svg", {
+                        class: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M15 18l-6-6 6-6"
+                        })
+                      ], -1)
+                    ])], 8, gt),
+                    o("button", {
+                      type: "button",
+                      class: "min-w-0 flex-1 rounded px-2 py-1 text-sm font-semibold ui-text transition-colors hover:bg-(--ui-surface-muted) focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                      "aria-label": Be.value,
+                      onClick: Ue
+                    }, F(K.value), 9, mt),
+                    o("button", {
+                      type: "button",
+                      class: "rounded p-1.5 ui-text-muted transition-colors hover:bg-(--ui-surface-muted) hover:text-(--ui-text) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: !ee.value,
+                      "aria-disabled": !ee.value,
+                      "aria-label": Pe.value,
+                      onClick: qe
+                    }, [...t[6] || (t[6] = [
+                      o("svg", {
+                        class: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M9 18l6-6-6-6"
+                        })
+                      ], -1)
+                    ])], 8, bt)
+                  ]),
+                  s.value === "day" ? (d(), f(C, { key: 0 }, [
+                    o("div", pt, [
+                      (d(), f(C, null, A(Ee, (a) => o("div", {
+                        key: a,
+                        class: "py-1 text-center text-xs font-medium ui-text-muted"
+                      }, F(a), 1)), 64))
+                    ]),
+                    o("div", {
+                      class: "grid grid-cols-7 gap-1",
+                      role: "grid",
+                      "aria-label": `${Q.value} ${l.value}`
+                    }, [
+                      (d(!0), f(C, null, A(me.value, (a, r) => (d(), f("div", {
+                        key: `prev-${r}`,
+                        class: "py-1.5 text-center text-xs ui-text-soft",
+                        "aria-hidden": "true"
+                      }, F(a), 1))), 128)),
+                      (d(!0), f(C, null, A(ve.value, (a) => (d(), f("button", {
+                        key: a,
+                        type: "button",
+                        role: "gridcell",
+                        "data-picker-option": "",
+                        "data-day": a,
+                        "data-focus-preferred": a === z.value,
+                        disabled: ae(a),
+                        "aria-disabled": ae(a),
+                        "aria-selected": ne(a),
+                        "aria-label": `${Q.value} ${a}, ${l.value}`,
+                        class: V([
+                          "h-8 w-full min-w-0 rounded text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                          Ke(a) && !ne(a) ? "ui-primary-soft ring-1 ring-(--ui-primary)" : "",
+                          ne(a) ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                          ae(a) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 line-through hover:bg-transparent" : "cursor-pointer"
+                        ]),
+                        onClick: (r) => ke(a),
+                        onKeydown: (r) => Qe(r, a)
+                      }, F(a), 43, ht))), 128)),
+                      (d(!0), f(C, null, A(_e.value, (a, r) => (d(), f("div", {
+                        key: `next-${r}`,
+                        class: "py-1.5 text-center text-xs ui-text-soft",
+                        "aria-hidden": "true"
+                      }, F(a), 1))), 128))
+                    ], 8, yt)
+                  ], 64)) : s.value === "month" ? (d(), f("div", {
+                    key: 1,
+                    class: "grid grid-cols-3 gap-2",
+                    role: "grid",
+                    "aria-label": `Select a month in ${l.value}`
+                  }, [
+                    (d(!0), f(C, null, A(de(fe), (a, r) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      role: "gridcell",
+                      "data-picker-option": "",
+                      "data-focus-preferred": r === v.value,
+                      disabled: j(r),
+                      "aria-disabled": j(r),
+                      "aria-selected": u.value?.getFullYear() === l.value && u.value?.getMonth() === r,
+                      "aria-label": `Select ${a} ${l.value}`,
+                      class: V([
+                        "min-h-11 rounded px-2 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                        u.value?.getFullYear() === l.value && u.value?.getMonth() === r ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                        j(r) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent" : ""
+                      ]),
+                      onClick: (n) => Ge(r),
+                      onKeydown: t[0] || (t[0] = (n) => Ne(n, 3))
+                    }, F(a.slice(0, 3)), 43, wt))), 128))
+                  ], 8, xt)) : (d(), f("div", {
+                    key: 2,
+                    class: "grid grid-cols-3 gap-2 sm:grid-cols-4",
+                    role: "grid",
+                    "aria-label": `Select a year from ${K.value}`
+                  }, [
+                    (d(!0), f(C, null, A(be.value, (a) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      role: "gridcell",
+                      "data-picker-option": "",
+                      "data-focus-preferred": a === l.value,
+                      disabled: q(a),
+                      "aria-disabled": q(a),
+                      "aria-selected": u.value?.getFullYear() === a,
+                      "aria-label": `Select year ${a}`,
+                      class: V([
+                        "min-h-11 rounded px-1 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+                        u.value?.getFullYear() === a ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)",
+                        q(a) ? "cursor-not-allowed text-(--ui-text-soft) opacity-45 hover:bg-transparent" : ""
+                      ]),
+                      onClick: (r) => We(a),
+                      onKeydown: t[1] || (t[1] = (r) => Ne(r, 3))
+                    }, F(a), 43, kt))), 128))
+                  ], 8, Dt)),
+                  m.showToday && s.value === "day" ? (d(), f("div", Mt, [
+                    o("button", {
+                      type: "button",
+                      class: "w-full rounded px-3 py-1.5 text-xs font-medium ui-primary transition-colors hover:bg-(--ui-primary-soft) focus-visible:ring-2 focus-visible:ring-(--ui-ring) disabled:cursor-not-allowed disabled:opacity-40",
+                      disabled: T(de(b)),
+                      "aria-disabled": T(de(b)),
+                      onClick: Ze
+                    }, " Today ", 8, St)
+                  ])) : Z("", !0)
+                ]),
+                m.enableTime ? (d(), f("div", Nt, [
+                  t[7] || (t[7] = o("div", { class: "mb-2 text-xs font-semibold ui-text" }, " Time ", -1)),
+                  o("div", Yt, [
+                    (d(!0), f(C, null, A(He.value, (a) => (d(), f("button", {
+                      key: a,
+                      type: "button",
+                      class: V(["w-full rounded px-2 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-ring)", a === Y.value ? "ui-primary-bg" : "ui-text hover:bg-(--ui-surface-muted)"]),
+                      "aria-selected": a === Y.value,
+                      onClick: (r) => Y.value = a
+                    }, F(a), 11, Tt))), 128))
+                  ])
+                ])) : Z("", !0)
+              ], 2)
+            ], 6)) : Z("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ]));
+  }
+});
+export {
+  Ft as _
+};

package/dist/{FormField.vue_vue_type_script_setup_true_lang-DimMUyA-.js → FormField.vue_vue_type_script_setup_true_lang-BljDj5YZ.js}

@@ -2,7 +2,7 @@ import { defineComponent as D, useId as N, computed as s, ref as F, provide as A
 import { cva as g } from "class-variance-authority";
 import { cn as f } from "./utils/cn.js";
 import { FORM_FIELD_CONTEXT_KEY as R } from "./lib/form-field.js";
-import U from "./components/DatePicker.js";
+import { _ as U } from "./DatePicker.vue_vue_type_script_setup_true_lang-Dx_9f8DO.js";
 const X = ["for"], Y = {
   key: 0,
   class: "ui-danger ml-1",