@box-kite/react 2.2.18 → 2.3.0

package/components/datePicker.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../placement.cjs"),a=require("../dates.cjs"),o=require("../date-math.cjs"),s=require("../date-input.cjs"),c=require("../reporting.cjs"),l=require("./svg.cjs"),u=require("../date-environment.cjs"),d=require("./calendar.cjs"),f=require("../layer.cjs"),p=require("./overlay.cjs"),m=require("../motion.cjs"),h=require("./dateField.cjs");let g=require("react"),_=require("react/jsx-runtime");function v(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function y(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})})}function b(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`0.875rem`,height:`0.875rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`m4.5 4.5 7 7m0-7-7 7`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function x(e){let[a,o]=(0,g.useState)(null),s=e.ref,c=(0,g.useCallback)(e=>{o(e),t.d(s,e)},[s]),l=e=>{if(!e||e.contains(document.activeElement)&&document.activeElement!==e)return;let t=[`[data-date][tabindex="0"]`,`[role="option"][tabindex="0"]`,`button:not([disabled])`].map(t=>e.querySelector(t)).find(Boolean),n=e.querySelector(`[role="listbox"]`),r=n?.querySelector(`[role="option"][tabindex="0"]`);n&&r&&(n.scrollTop=r.offsetTop-n.clientHeight/2+r.offsetHeight/2),(t??e).focus({preventScroll:!0})},u=r.a(e=>l(e)),{platform:d,isOpen:h,id:v,setPanel:y,setOpen:b,trigger:x,triggerElement:S,panelElement:C}=f.t({haspopup:`dialog`,idPrefix:`date-picker`,open:e.open,defaultOpen:e.defaultOpen,onOpenChange:e.onOpenChange,interaction:{component:`datePicker`,type:`openChange`},onOpened:u}),w=i.t({side:e.side,align:e.align,offset:1,flip:!0,matchWidth:e.matchWidth,anchor:a});(0,g.useEffect)(()=>{h&&l(C)},[h,C]);let T=(0,g.useCallback)(()=>C,[C]),E=m.n(h,T);return{attachTrigger:x.ref,triggerAttributes:x.props,triggerElement:S,closeOnChoice:e=>{S?.focus(),b(!1,{reason:`select`,event:e})},id:v,attachField:c,panel:t=>{let r={role:`dialog`,"aria-label":e.label,tabIndex:-1};return d?(0,_.jsx)(n.default,{ref:y,component:`popover`,variant:{topLayer:!0},p:3,...w.layerProps,id:v,props:{popover:`auto`,...r},children:E===`closed`?null:t}):h&&(0,_.jsx)(p.default,{contentRef:y,anchor:a,side:e.side,align:e.align,offset:1,matchWidth:e.matchWidth,component:`popover`,p:3,id:v,props:r,children:t})}}}function S(e){let{value:t,step:i,locale:o,hourCycle:c,onSelect:l,label:u,min:d,max:f,emptyLabel:p,separated:m}=e,h=(0,g.useMemo)(()=>s.l(i,{min:d,max:f}),[i,d,f]),v=s.s(t,i),y=Math.max(0,v?h.indexOf(v):h.indexOf(`09:00:00`)),b=r.t({count:h.length,defaultActiveIndex:y,loop:!1,onSelect:(e,t)=>l(h[e],t)}),x=m?{ps:2,bs:1}:{};return h.length===0?(0,_.jsx)(n.default,{component:`datePicker.empty`,flexGrow:1,px:3,py:1.5,fontSize:14,...x,props:{role:`status`},children:p}):(0,_.jsx)(n.default,{component:`datePicker.times`,position:`relative`,display:`flex`,d:`column`,flexGrow:1,gap:.5,maxHeight:72,overflowY:`auto`,p:1,...x,props:{role:`listbox`,"aria-label":u,onKeyDown:b.onKeyDown},children:h.map((e,t)=>(0,_.jsx)(n.default,{component:`datePicker.time`,variant:{selected:e===v},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{role:`option`,"aria-selected":e===v,...b.itemProps(t),onClick:t=>l(e,t)},children:a.t(e,{locale:o,hour:`numeric`,minute:`2-digit`,hourCycle:c===void 0?void 0:c===12?`h12`:`h23`})},e))})}function C(e){return(0,_.jsx)(n.default,{component:`datePicker.presets`,display:`flex`,d:`column`,gap:.5,pe:2,be:1,props:{role:`group`},children:e.presets.map(t=>(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.preset`,variant:{selected:e.isSelected(t.value)},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,props:{type:`button`,onClick:n=>e.onSelect(t.value,n)},children:t.label},t.label))})}function w(e){let{frame:t,attachField:i,attachTrigger:a,triggerAttributes:o,triggerElement:s,id:c,label:l,labelledBy:u,describedBy:d}=e,{text:f,placeholder:p,icon:m,clear:h,disabled:v,invalid:y,required:b=!1,tabIndex:x,inputs:S,onReset:C}=e,w=(0,g.useRef)(null),T=l===void 0?void 0:`${c}-label`,E=`${c}-value`,D=r.a(C);return(0,g.useEffect)(()=>{let e=w.current?.form;if(e)return e.addEventListener(`reset`,D),()=>e.removeEventListener(`reset`,D)},[D]),(0,_.jsxs)(_.Fragment,{children:[l!==void 0&&(0,_.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:T,props:{onClick:()=>s?.focus()},children:l}),(0,_.jsxs)(n.default,{ref:i,component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`pointer`,css:{fontVariantNumeric:`tabular-nums`},...t,variant:[t.variant,{disabled:v,invalid:y}],children:[(0,_.jsx)(n.default,{tag:`button`,ref:a,component:`datePicker.value`,variant:{placeholder:!f},flexGrow:1,textAlign:`start`,whiteSpace:`nowrap`,css:{font:`inherit`},after:{position:`absolute`,inset:0},disabled:v,props:{type:`button`,tabIndex:x,"aria-labelledby":[T,u,E].filter(Boolean).join(` `),"aria-describedby":d,"aria-invalid":y||void 0,...o},children:(0,_.jsx)(`span`,{id:E,children:f||p})}),(0,_.jsxs)(n.default,{display:`inline-flex`,ai:`center`,gap:1,ms:2,children:[h,(0,_.jsx)(n.default,{component:`datePicker.icon`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,props:{"aria-hidden":!0},children:m})]}),S.map((e,t)=>b?(0,_.jsx)(n.default,{tag:`input`,ref:t===0?w:void 0,component:`dateField.validation`,required:!0,disabled:v,props:{type:`text`,name:e.name,value:e.value,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>s?.focus()}},t):e.name===void 0?null:(0,_.jsx)(`input`,{ref:t===0?w:void 0,type:`hidden`,name:e.name,value:e.value,disabled:v},t))]})]})}function T(e,t){let{type:r=`date`,value:i,defaultValue:s=null,onValueChange:l,zone:f,locale:p,hourCycle:m,granularity:g,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k=!1,readOnly:A=!1,required:j,invalid:ee,name:te,label:M,labelledBy:ne,describedBy:re,open:ie,defaultOpen:ae,onOpenChange:oe,closeOnSelect:N=!0,firstDayOfWeek:se,weekNumbers:ce,side:le=`bottom`,align:ue=`start`,matchWidth:de=r===`time`,emptyTimesLabel:fe=`No times available`,clearable:P=!1,pickOnly:pe=!1,triggerLabel:F,clearLabel:I=`Clear`,tabIndex:L,step:R=30,defaultTime:me=`00:00`,presets:z,showZone:he,...B}=e,V=u.n({locale:p,zone:f===`none`?void 0:f}),{locale:H}=V,U=r===`datetime`&&f!==`none`?V.zone:null,W=U??V.zone,[G,K]=c.a({value:i,defaultValue:s,onChange:(e,t)=>l?.(e,{...t,...o.x(e,W)}),interaction:{component:`datePicker`,type:`valueChange`,content:[`value`]}}),q=F??(r===`time`?`Choose time`:`Choose date`),J=typeof M==`string`?M:q,{attachTrigger:Y,triggerAttributes:ge,triggerElement:X,closeOnChoice:Z,id:Q,attachField:_e,panel:ve}=x({ref:t,open:ie,defaultOpen:ae,onOpenChange:oe,side:le,align:ue,matchWidth:de,label:J}),$=G&&r!==`time`?o.O(G,{zone:W}):null,ye=G&&r!==`date`?o.A(G,{zone:W}):null,be=r===`datetime`?$??o.N(W):null,xe=e=>e&&(be===null||o.O(e,{zone:W})===be)?o.A(e,{zone:W}):null,Se=G?a.t(G,{locale:H,zone:W,hourCycle:m===void 0?void 0:m===12?`h12`:`h23`,...r===`date`?{dateStyle:`medium`}:r===`time`?{timeStyle:`short`}:{dateStyle:`medium`,timeStyle:`short`}}):``,Ce=pe&&G&&U&&(he??U!==V.readerZone)?a.s(U,{locale:H,style:`short`,at:G}):null,we=Z,Te=(e,t)=>o.r(e,t,U?{zone:U,disambiguation:T}:{}),Ee=(e,t)=>{e&&(r===`date`?(K(e,{reason:`select`,event:t}),N&&we(t)):K(Te(e,ye??me),{reason:`select`,event:t}))},De=(e,t)=>{K(r===`time`?e:Te($??o.N(W),e),{reason:`select`,event:t}),N&&we(t)},Oe=(0,_.jsx)(n.default,{tag:`button`,ref:Y,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,ms:2,me:-1.5,borderRadius:1.5,disabled:k||A,props:{type:`button`,"aria-label":Se?`${q}, ${Se}`:q,tabIndex:L,...ge},children:r===`time`?(0,_.jsx)(y,{}):(0,_.jsx)(v,{})}),ke=P&&G&&!k&&!A&&(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,ms:1,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":I,tabIndex:L,onClick:e=>K(null,{reason:`clear`,event:e})},children:(0,_.jsx)(b,{})}),Ae=G!==null&&(E!=null&&o.i(G,E)<0||D!=null&&o.i(G,D)>0),je=pe?(0,_.jsx)(w,{frame:B,attachField:_e,attachTrigger:A?void 0:Y,triggerAttributes:A?void 0:ge,triggerElement:X,id:Q,label:M,labelledBy:ne,describedBy:re,text:Ce?`${Se} ${Ce}`:Se,placeholder:q,icon:r===`time`?(0,_.jsx)(y,{}):(0,_.jsx)(v,{}),clear:ke,disabled:k,invalid:ee??(Ae||$!==null&&!!O?.($)),required:j,tabIndex:L,inputs:[{name:te,value:G??``}],onReset:e=>K(s,{reason:`reset`,event:e})}):(0,_.jsx)(h.default,{ref:_e,...B,type:r,value:G,onValueChange:(e,t)=>K(e,{reason:t.reason,event:t.event}),zone:f,locale:p,hourCycle:m,granularity:g,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k,readOnly:A,required:j,invalid:ee,name:te,label:M,labelledBy:ne,describedBy:re,showZone:he,tabIndex:L,end:(0,_.jsxs)(_.Fragment,{children:[ke,Oe]})});return(0,_.jsxs)(c.t,{children:[je,ve((0,_.jsxs)(n.default,{display:`flex`,gap:3,ai:`stretch`,children:[z&&z.length>0&&(0,_.jsx)(C,{presets:z,isSelected:e=>G!==null&&o.i(e,G,{zone:W})===0,onSelect:(e,t)=>{K(e,{reason:`preset`,event:t}),N&&we(t)}}),r!==`time`&&(0,_.jsx)(d.default,{value:$,onValueChange:(e,t)=>Ee(e,t.event),min:E?o.O(E,{zone:W}):void 0,max:D?o.O(D,{zone:W}):void 0,isDateUnavailable:O,locale:p,zone:f===`none`?void 0:f,firstDayOfWeek:se,weekNumbers:ce}),r!==`date`&&(0,_.jsx)(S,{value:ye,step:R,locale:H,hourCycle:m,label:r===`time`?J:`Time`,min:xe(E),max:xe(D),emptyLabel:fe,separated:r===`datetime`,onSelect:De})]}))]})}function E(e,t){let{value:r,defaultValue:i=null,onValueChange:s,locale:l,min:f,max:p,isDateUnavailable:m,disabled:y=!1,readOnly:S=!1,required:T,invalid:E,startName:D,endName:O,label:k,labelledBy:A,describedBy:j,startLabel:ee=`Start date`,endLabel:te=`End date`,open:M,defaultOpen:ne,onOpenChange:re,closeOnSelect:ie=!0,firstDayOfWeek:ae,weekNumbers:oe,months:N=2,side:se=`bottom`,align:ce=`start`,matchWidth:le=!1,emptyTimesLabel:ue,clearable:de=!1,pickOnly:fe=!1,triggerLabel:P=`Choose dates`,clearLabel:pe=`Clear`,tabIndex:F,presets:I,props:L,...R}=e,{locale:me}=u.n({locale:l}),[z,he]=c.a({value:r,defaultValue:i,onChange:s,interaction:{component:`dateRangePicker`,type:`valueChange`,content:[`value`]}}),[B,V]=(0,g.useState)({start:z?.start??null,end:z?.end??null,source:z}),{start:H,end:U}=B;B.source!==z&&(H=z?.start??null,U=z?.end??null,V({start:H,end:U,source:z}));let{attachTrigger:W,triggerAttributes:G,triggerElement:K,closeOnChoice:q,id:J,attachField:Y,panel:ge}=x({ref:t,open:M,defaultOpen:ne,onOpenChange:re,side:se,align:ce,matchWidth:le,label:typeof k==`string`?k:P}),X=z?a.n(z.start,z.end,{locale:me}):``,Z=H!==null&&U!==null&&o.i(H,U)>0,Q=(e,t,n,r)=>{let i=e&&t&&o.i(e,t)<=0?{start:e,end:t}:null;V({start:e,end:t,source:i}),he(i,{reason:n,event:r})},_e=q,ve={locale:l,min:f,max:p,isDateUnavailable:m,disabled:y,readOnly:S,required:T,component:`datePicker.part`,px:0,py:0,tabIndex:F},$=de&&z&&!y&&!S&&(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":pe,tabIndex:F,onClick:e=>Q(null,null,`clear`,e)},children:(0,_.jsx)(b,{})}),ye=z!==null&&(f!=null&&o.i(z.start,f)<0||p!=null&&o.i(z.end,p)>0),be=fe?(0,_.jsx)(w,{frame:{...R,props:L},attachField:Y,attachTrigger:S?void 0:W,triggerAttributes:S?void 0:G,triggerElement:K,id:J,label:k,labelledBy:A,describedBy:j,text:X,placeholder:P,icon:(0,_.jsx)(v,{}),clear:$,disabled:y,invalid:E??ye,required:T,tabIndex:F,inputs:[{name:D,value:z?.start??``},{name:O,value:z?.end??``}],onReset:e=>Q(i?.start??null,i?.end??null,`reset`,e)}):(0,_.jsxs)(_.Fragment,{children:[k!==void 0&&(0,_.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:`${J}-label`,children:k}),(0,_.jsxs)(n.default,{ref:Y,component:`dateField`,display:`inline-flex`,ai:`center`,gap:2,px:3,py:2,...R,variant:[R.variant,{disabled:y,invalid:E??Z}],props:{role:`group`,"aria-labelledby":[k===void 0?void 0:`${J}-label`,A].filter(Boolean).join(` `)||void 0,"aria-invalid":(E??Z)||void 0,"aria-describedby":j,...L},children:[(0,_.jsx)(h.default,{...ve,value:H,onValueChange:(e,t)=>Q(e,U,t.reason,t.event),name:D,props:{"aria-label":ee},invalid:E??Z}),(0,_.jsx)(n.default,{component:`dateField.literal`,props:{"aria-hidden":!0},children:`–`}),(0,_.jsx)(h.default,{...ve,value:U,onValueChange:(e,t)=>Q(H,e,t.reason,t.event),name:O,props:{"aria-label":te},invalid:E??Z}),(0,_.jsxs)(n.default,{display:`inline-flex`,ai:`center`,gap:2,ms:`auto`,children:[$,(0,_.jsx)(n.default,{tag:`button`,ref:W,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,borderRadius:1.5,disabled:y||S,props:{type:`button`,"aria-label":X?`${P}, ${X}`:P,tabIndex:F,...G},children:(0,_.jsx)(v,{})})]})]})]});return(0,_.jsxs)(c.t,{children:[be,ge((0,_.jsxs)(n.default,{display:`flex`,gap:3,ai:`stretch`,children:[I&&I.length>0&&(0,_.jsx)(C,{presets:I,isSelected:e=>z!==null&&e.start===z.start&&e.end===z.end,onSelect:(e,t)=>{Q(e.start,e.end,`preset`,t),ie&&_e(t)}}),(0,_.jsx)(d.default,{mode:`range`,months:N,value:z,defaultFocusedDate:H??void 0,onValueChange:(e,t)=>{Q(e?.start??null,e?.end??null,`select`,t.event),ie&&e&&t.event&&_e(t.event)},min:f,max:p,isDateUnavailable:m,locale:l,firstDayOfWeek:ae,weekNumbers:oe})]}))]})}var D=e.f(T,`DatePicker`),O=e.f(E,`DateRangePicker`);exports.DateRangePicker=O,exports.default=D;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../placement.cjs"),a=require("../dates.cjs"),o=require("../date-math.cjs"),s=require("../date-input.cjs"),c=require("../reporting.cjs"),l=require("./svg.cjs"),u=require("../date-environment.cjs"),d=require("./calendar.cjs"),f=require("../layer.cjs"),p=require("./overlay.cjs"),m=require("../motion.cjs"),h=require("./dateField.cjs");let g=require("react"),_=require("react/jsx-runtime");function v(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function y(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})})}function b(){return(0,_.jsx)(l.Svg,{viewBox:`0 0 16 16`,width:`0.875rem`,height:`0.875rem`,props:{fill:`none`},children:(0,_.jsx)(l.Path,{d:`m4.5 4.5 7 7m0-7-7 7`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function x(e){let[a,o]=(0,g.useState)(null),s=e.ref,c=(0,g.useCallback)(e=>{o(e),t.d(s,e)},[s]),l=e=>{if(!e||e.contains(document.activeElement)&&document.activeElement!==e)return;let t=[`[data-date][tabindex="0"]`,`[role="option"][tabindex="0"]`,`button:not([disabled])`].map(t=>e.querySelector(t)).find(Boolean),n=e.querySelector(`[role="listbox"]`),r=n?.querySelector(`[role="option"][tabindex="0"]`);n&&r&&(n.scrollTop=r.offsetTop-n.clientHeight/2+r.offsetHeight/2),(t??e).focus({preventScroll:!0})},u=r.a(e=>l(e)),{platform:d,isOpen:h,id:v,setPanel:y,setOpen:b,trigger:x,triggerElement:S,panelElement:C}=f.t({haspopup:`dialog`,idPrefix:`date-picker`,open:e.open,defaultOpen:e.defaultOpen,onOpenChange:e.onOpenChange,interaction:{component:`datePicker`,type:`openChange`},onOpened:u}),w=i.t({side:e.side,align:e.align,offset:1,flip:!0,matchWidth:e.matchWidth,anchor:a});(0,g.useEffect)(()=>{h&&l(C)},[h,C]);let T=(0,g.useCallback)(()=>C,[C]),E=m.n(h,T);return{attachTrigger:x.ref,triggerAttributes:x.props,triggerElement:S,closeOnChoice:e=>{S?.focus(),b(!1,{reason:`select`,event:e})},id:v,attachField:c,panel:t=>{let r={role:`dialog`,"aria-label":e.label,tabIndex:-1};return d?(0,_.jsx)(n.default,{ref:y,component:`popover`,variant:[e.variant,{topLayer:!0}],p:3,...w.layerProps,id:v,props:{popover:`auto`,...r},children:E===`closed`?null:t}):h&&(0,_.jsx)(p.default,{contentRef:y,anchor:a,side:e.side,align:e.align,offset:1,matchWidth:e.matchWidth,component:`popover`,variant:e.variant,p:3,id:v,props:r,children:t})}}}function S(e){let{value:t,step:i,locale:o,hourCycle:c,onSelect:l,label:u,min:d,max:f,emptyLabel:p,separated:m}=e,h=(0,g.useMemo)(()=>s.l(i,{min:d,max:f}),[i,d,f]),v=s.s(t,i),y=Math.max(0,v?h.indexOf(v):h.indexOf(`09:00:00`)),b=r.t({count:h.length,defaultActiveIndex:y,loop:!1,onSelect:(e,t)=>l(h[e],t)}),x=m?{ps:2,bs:1}:{};return h.length===0?(0,_.jsx)(n.default,{component:`datePicker.empty`,flexGrow:1,px:3,py:1.5,fontSize:14,...x,props:{role:`status`},children:p}):(0,_.jsx)(n.default,{component:`datePicker.times`,position:`relative`,display:`flex`,d:`column`,flexGrow:1,gap:.5,maxHeight:72,overflowY:`auto`,p:1,...x,props:{role:`listbox`,"aria-label":u,onKeyDown:b.onKeyDown},children:h.map((e,t)=>(0,_.jsx)(n.default,{component:`datePicker.time`,variant:{selected:e===v},minHeight:`control`,px:3,py:1.5,borderRadius:2,fontSize:`control`,textAlign:`start`,whiteSpace:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{role:`option`,"aria-selected":e===v,...b.itemProps(t),onClick:t=>l(e,t)},children:a.t(e,{locale:o,hour:`numeric`,minute:`2-digit`,hourCycle:c===void 0?void 0:c===12?`h12`:`h23`})},e))})}function C(e){return(0,_.jsx)(n.default,{component:`datePicker.presets`,display:`flex`,d:`column`,gap:.5,pe:2,be:1,props:{role:`group`},children:e.presets.map(t=>(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.preset`,variant:{selected:e.isSelected(t.value)},minHeight:`control`,px:3,py:1.5,borderRadius:2,fontSize:`control`,textAlign:`start`,whiteSpace:`nowrap`,props:{type:`button`,onClick:n=>e.onSelect(t.value,n)},children:t.label},t.label))})}function w(e){let{frame:t,attachField:i,attachTrigger:a,triggerAttributes:o,triggerElement:s,id:c,label:l,labelledBy:u,describedBy:d}=e,{text:f,placeholder:p,icon:m,clear:h,disabled:v,invalid:y,required:b=!1,tabIndex:x,inputs:S,onReset:C}=e,w=(0,g.useRef)(null),T=l===void 0?void 0:`${c}-label`,E=`${c}-value`,D=r.a(C);return(0,g.useEffect)(()=>{let e=w.current?.form;if(e)return e.addEventListener(`reset`,D),()=>e.removeEventListener(`reset`,D)},[D]),(0,_.jsxs)(_.Fragment,{children:[l!==void 0&&(0,_.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:T,props:{onClick:()=>s?.focus()},children:l}),(0,_.jsxs)(n.default,{ref:i,component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`pointer`,css:{fontVariantNumeric:`tabular-nums`},...t,variant:[t.variant,{disabled:v,invalid:y}],children:[(0,_.jsx)(n.default,{tag:`button`,ref:a,component:`datePicker.value`,variant:{placeholder:!f},flexGrow:1,textAlign:`start`,whiteSpace:`nowrap`,css:{font:`inherit`},after:{position:`absolute`,inset:0},disabled:v,props:{type:`button`,tabIndex:x,"aria-labelledby":[T,u,E].filter(Boolean).join(` `),"aria-describedby":d,"aria-invalid":y||void 0,...o},children:(0,_.jsx)(`span`,{id:E,children:f||p})}),(0,_.jsxs)(n.default,{display:`inline-flex`,ai:`center`,gap:1,ms:2,children:[h,(0,_.jsx)(n.default,{component:`datePicker.icon`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,props:{"aria-hidden":!0},children:m})]}),S.map((e,t)=>b?(0,_.jsx)(n.default,{tag:`input`,ref:t===0?w:void 0,component:`dateField.validation`,required:!0,disabled:v,props:{type:`text`,name:e.name,value:e.value,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>s?.focus()}},t):e.name===void 0?null:(0,_.jsx)(`input`,{ref:t===0?w:void 0,type:`hidden`,name:e.name,value:e.value,disabled:v},t))]})]})}function T(e,t){let{type:r=`date`,value:i,defaultValue:s=null,onValueChange:l,zone:f,locale:p,hourCycle:m,granularity:g,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k=!1,readOnly:A=!1,required:ee,invalid:te,name:ne,label:j,labelledBy:re,describedBy:ie,open:ae,defaultOpen:oe,onOpenChange:se,closeOnSelect:M=!0,firstDayOfWeek:ce,weekNumbers:le,side:ue=`bottom`,align:de=`start`,matchWidth:fe=r===`time`,emptyTimesLabel:pe=`No times available`,clearable:N=!1,pickOnly:me=!1,triggerLabel:P,clearLabel:F=`Clear`,tabIndex:I,step:L=30,defaultTime:he=`00:00`,presets:R,showZone:ge,...z}=e,B=u.n({locale:p,zone:f===`none`?void 0:f}),{locale:V}=B,H=r===`datetime`&&f!==`none`?B.zone:null,U=H??B.zone,[W,G]=c.a({value:i,defaultValue:s,onChange:(e,t)=>l?.(e,{...t,...o.x(e,U)}),interaction:{component:`datePicker`,type:`valueChange`,content:[`value`]}}),K=P??(r===`time`?`Choose time`:`Choose date`),q=typeof j==`string`?j:K,{attachTrigger:J,triggerAttributes:_e,triggerElement:Y,closeOnChoice:X,id:Z,attachField:Q,panel:ve}=x({ref:t,open:ae,defaultOpen:oe,onOpenChange:se,side:ue,align:de,matchWidth:fe,label:q,variant:z.variant}),$=W&&r!==`time`?o.O(W,{zone:U}):null,ye=W&&r!==`date`?o.A(W,{zone:U}):null,be=r===`datetime`?$??o.N(U):null,xe=e=>e&&(be===null||o.O(e,{zone:U})===be)?o.A(e,{zone:U}):null,Se=W?a.t(W,{locale:V,zone:U,hourCycle:m===void 0?void 0:m===12?`h12`:`h23`,...r===`date`?{dateStyle:`medium`}:r===`time`?{timeStyle:`short`}:{dateStyle:`medium`,timeStyle:`short`}}):``,Ce=me&&W&&H&&(ge??H!==B.readerZone)?a.s(H,{locale:V,style:`short`,at:W}):null,we=X,Te=(e,t)=>o.r(e,t,H?{zone:H,disambiguation:T}:{}),Ee=(e,t)=>{e&&(r===`date`?(G(e,{reason:`select`,event:t}),M&&we(t)):G(Te(e,ye??he),{reason:`select`,event:t}))},De=(e,t)=>{G(r===`time`?e:Te($??o.N(U),e),{reason:`select`,event:t}),M&&we(t)},Oe=(0,_.jsx)(n.default,{tag:`button`,ref:J,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,ms:2,me:-1.5,borderRadius:1.5,disabled:k||A,props:{type:`button`,"aria-label":Se?`${K}, ${Se}`:K,tabIndex:I,..._e},children:r===`time`?(0,_.jsx)(y,{}):(0,_.jsx)(v,{})}),ke=N&&W&&!k&&!A&&(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,ms:1,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":F,tabIndex:I,onClick:e=>G(null,{reason:`clear`,event:e})},children:(0,_.jsx)(b,{})}),Ae=W!==null&&(E!=null&&o.i(W,E)<0||D!=null&&o.i(W,D)>0),je=me?(0,_.jsx)(w,{frame:z,attachField:Q,attachTrigger:A?void 0:J,triggerAttributes:A?void 0:_e,triggerElement:Y,id:Z,label:j,labelledBy:re,describedBy:ie,text:Ce?`${Se} ${Ce}`:Se,placeholder:K,icon:r===`time`?(0,_.jsx)(y,{}):(0,_.jsx)(v,{}),clear:ke,disabled:k,invalid:te??(Ae||$!==null&&!!O?.($)),required:ee,tabIndex:I,inputs:[{name:ne,value:W??``}],onReset:e=>G(s,{reason:`reset`,event:e})}):(0,_.jsx)(h.default,{ref:Q,...z,type:r,value:W,onValueChange:(e,t)=>G(e,{reason:t.reason,event:t.event}),zone:f,locale:p,hourCycle:m,granularity:g,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k,readOnly:A,required:ee,invalid:te,name:ne,label:j,labelledBy:re,describedBy:ie,showZone:ge,tabIndex:I,end:(0,_.jsxs)(_.Fragment,{children:[ke,Oe]})});return(0,_.jsxs)(c.t,{children:[je,ve((0,_.jsxs)(n.default,{display:`flex`,gap:3,ai:`stretch`,children:[R&&R.length>0&&(0,_.jsx)(C,{presets:R,isSelected:e=>W!==null&&o.i(e,W,{zone:U})===0,onSelect:(e,t)=>{G(e,{reason:`preset`,event:t}),M&&we(t)}}),r!==`time`&&(0,_.jsx)(d.default,{value:$,onValueChange:(e,t)=>Ee(e,t.event),min:E?o.O(E,{zone:U}):void 0,max:D?o.O(D,{zone:U}):void 0,isDateUnavailable:O,locale:p,zone:f===`none`?void 0:f,firstDayOfWeek:ce,weekNumbers:le}),r!==`date`&&(0,_.jsx)(S,{value:ye,step:L,locale:V,hourCycle:m,label:r===`time`?q:`Time`,min:xe(E),max:xe(D),emptyLabel:pe,separated:r===`datetime`,onSelect:De})]}))]})}function E(e,t){let{value:r,defaultValue:i=null,onValueChange:s,locale:l,min:f,max:p,isDateUnavailable:m,disabled:y=!1,readOnly:S=!1,required:T,invalid:E,startName:D,endName:O,label:k,labelledBy:A,describedBy:ee,startLabel:te=`Start date`,endLabel:ne=`End date`,open:j,defaultOpen:re,onOpenChange:ie,closeOnSelect:ae=!0,firstDayOfWeek:oe,weekNumbers:se,months:M=2,side:ce=`bottom`,align:le=`start`,matchWidth:ue=!1,emptyTimesLabel:de,clearable:fe=!1,pickOnly:pe=!1,triggerLabel:N=`Choose dates`,clearLabel:me=`Clear`,tabIndex:P,presets:F,props:I,...L}=e,{locale:he}=u.n({locale:l}),[R,ge]=c.a({value:r,defaultValue:i,onChange:s,interaction:{component:`dateRangePicker`,type:`valueChange`,content:[`value`]}}),[z,B]=(0,g.useState)({start:R?.start??null,end:R?.end??null,source:R}),{start:V,end:H}=z;z.source!==R&&(V=R?.start??null,H=R?.end??null,B({start:V,end:H,source:R}));let{attachTrigger:U,triggerAttributes:W,triggerElement:G,closeOnChoice:K,id:q,attachField:J,panel:_e}=x({ref:t,open:j,defaultOpen:re,onOpenChange:ie,side:ce,align:le,matchWidth:ue,label:typeof k==`string`?k:N,variant:L.variant}),Y=R?a.n(R.start,R.end,{locale:he}):``,X=V!==null&&H!==null&&o.i(V,H)>0,Z=(e,t,n,r)=>{let i=e&&t&&o.i(e,t)<=0?{start:e,end:t}:null;B({start:e,end:t,source:i}),ge(i,{reason:n,event:r})},Q=K,ve={locale:l,min:f,max:p,isDateUnavailable:m,disabled:y,readOnly:S,required:T,component:`datePicker.part`,px:0,py:0,tabIndex:P},$=fe&&R&&!y&&!S&&(0,_.jsx)(n.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":me,tabIndex:P,onClick:e=>Z(null,null,`clear`,e)},children:(0,_.jsx)(b,{})}),ye=R!==null&&(f!=null&&o.i(R.start,f)<0||p!=null&&o.i(R.end,p)>0),be=pe?(0,_.jsx)(w,{frame:{...L,props:I},attachField:J,attachTrigger:S?void 0:U,triggerAttributes:S?void 0:W,triggerElement:G,id:q,label:k,labelledBy:A,describedBy:ee,text:Y,placeholder:N,icon:(0,_.jsx)(v,{}),clear:$,disabled:y,invalid:E??ye,required:T,tabIndex:P,inputs:[{name:D,value:R?.start??``},{name:O,value:R?.end??``}],onReset:e=>Z(i?.start??null,i?.end??null,`reset`,e)}):(0,_.jsxs)(_.Fragment,{children:[k!==void 0&&(0,_.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:`${q}-label`,children:k}),(0,_.jsxs)(n.default,{ref:J,component:`dateField`,display:`inline-flex`,ai:`center`,gap:2,px:3,py:2,...L,variant:[L.variant,{disabled:y,invalid:E??X}],props:{role:`group`,"aria-labelledby":[k===void 0?void 0:`${q}-label`,A].filter(Boolean).join(` `)||void 0,"aria-invalid":(E??X)||void 0,"aria-describedby":ee,...I},children:[(0,_.jsx)(h.default,{...ve,value:V,onValueChange:(e,t)=>Z(e,H,t.reason,t.event),name:D,props:{"aria-label":te},invalid:E??X}),(0,_.jsx)(n.default,{component:`dateField.literal`,props:{"aria-hidden":!0},children:`–`}),(0,_.jsx)(h.default,{...ve,value:H,onValueChange:(e,t)=>Z(V,e,t.reason,t.event),name:O,props:{"aria-label":ne},invalid:E??X}),(0,_.jsxs)(n.default,{display:`inline-flex`,ai:`center`,gap:2,ms:`auto`,children:[$,(0,_.jsx)(n.default,{tag:`button`,ref:U,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,borderRadius:1.5,disabled:y||S,props:{type:`button`,"aria-label":Y?`${N}, ${Y}`:N,tabIndex:P,...W},children:(0,_.jsx)(v,{})})]})]})]});return(0,_.jsxs)(c.t,{children:[be,_e((0,_.jsxs)(n.default,{display:`flex`,gap:3,ai:`stretch`,children:[F&&F.length>0&&(0,_.jsx)(C,{presets:F,isSelected:e=>R!==null&&e.start===R.start&&e.end===R.end,onSelect:(e,t)=>{Z(e.start,e.end,`preset`,t),ae&&Q(t)}}),(0,_.jsx)(d.default,{mode:`range`,months:M,value:R,defaultFocusedDate:V??void 0,onValueChange:(e,t)=>{Z(e?.start??null,e?.end??null,`select`,t.event),ae&&e&&t.event&&Q(t.event)},min:f,max:p,isDateUnavailable:m,locale:l,firstDayOfWeek:oe,weekNumbers:se})]}))]})}var D=e.f(T,`DatePicker`),O=e.f(E,`DateRangePicker`);exports.DateRangePicker=O,exports.default=D;

package/components/datePicker.mjs

@@ -18,7 +18,7 @@ import te from "./dateField.mjs";
 import { useCallback as T, useEffect as E, useMemo as D, useRef as ne, useState as re } from "react";
 import { Fragment as ie, jsx as O, jsxs as k } from "react/jsx-runtime";
 //#region src/components/datePicker.tsx
-function A() {
+function ae() {
 	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
@@ -32,7 +32,7 @@ function A() {
 		})
 	});
 }
-function j() {
+function A() {
 	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
@@ -47,7 +47,7 @@ function j() {
 		})
 	});
 }
-function ae() {
+function oe() {
 	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "0.875rem",
@@ -61,7 +61,7 @@ function ae() {
 		})
 	});
 }
-function oe(e) {
+function se(e) {
 	let [i, o] = re(null), s = e.ref, c = T((e) => {
 		o(e), t(s, e);
 	}, [s]), l = (e) => {
@@ -116,7 +116,7 @@ function oe(e) {
 			return d ? /* @__PURE__ */ O(n, {
 				ref: m,
 				component: "popover",
-				variant: { topLayer: !0 },
+				variant: [e.variant, { topLayer: !0 }],
 				p: 3,
 				...y.layerProps,
 				id: p,
@@ -133,6 +133,7 @@ function oe(e) {
 				offset: 1,
 				matchWidth: e.matchWidth,
 				component: "popover",
+				variant: e.variant,
 				p: 3,
 				id: p,
 				props: r,
@@ -141,7 +142,7 @@ function oe(e) {
 		}
 	};
 }
-function se(e) {
+function ce(e) {
 	let { value: t, step: r, locale: a, hourCycle: o, onSelect: s, label: l, min: u, max: d, emptyLabel: f, separated: p } = e, m = D(() => h(r, {
 		min: u,
 		max: d
@@ -186,10 +187,11 @@ function se(e) {
 		children: m.map((e, t) => /* @__PURE__ */ O(n, {
 			component: "datePicker.time",
 			variant: { selected: e === _ },
+			minHeight: "control",
 			px: 3,
 			py: 1.5,
 			borderRadius: 2,
-			fontSize: 14,
+			fontSize: "control",
 			textAlign: "start",
 			whiteSpace: "nowrap",
 			css: { fontVariantNumeric: "tabular-nums" },
@@ -208,7 +210,7 @@ function se(e) {
 		}, e))
 	});
 }
-function ce(e) {
+function le(e) {
 	return /* @__PURE__ */ O(n, {
 		component: "datePicker.presets",
 		display: "flex",
@@ -221,10 +223,11 @@ function ce(e) {
 			tag: "button",
 			component: "datePicker.preset",
 			variant: { selected: e.isSelected(t.value) },
+			minHeight: "control",
 			px: 3,
 			py: 1.5,
 			borderRadius: 2,
-			fontSize: 14,
+			fontSize: "control",
 			textAlign: "start",
 			whiteSpace: "nowrap",
 			props: {
@@ -235,7 +238,7 @@ function ce(e) {
 		}, t.label))
 	});
 }
-function le(e) {
+function ue(e) {
 	let { frame: t, attachField: i, attachTrigger: a, triggerAttributes: o, triggerElement: s, id: c, label: l, labelledBy: u, describedBy: d } = e, { text: f, placeholder: p, icon: m, clear: h, disabled: g, invalid: _, required: v = !1, tabIndex: y, inputs: b, onReset: ee } = e, x = ne(null), S = l === void 0 ? void 0 : `${c}-label`, C = `${c}-value`, w = r(ee);
 	return E(() => {
 		let e = x.current?.form;
@@ -335,8 +338,8 @@ function le(e) {
 		]
 	})] });
 }
-function M(e, t) {
-	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: o, zone: h, locale: g, hourCycle: y, granularity: b, disambiguation: S, min: C, max: w, isDateUnavailable: T, disabled: E = !1, readOnly: D = !1, required: ne, invalid: re, name: M, label: N, labelledBy: P, describedBy: F, open: ue, defaultOpen: de, onOpenChange: fe, closeOnSelect: I = !0, firstDayOfWeek: L, weekNumbers: pe, side: R = "bottom", align: me = "start", matchWidth: he = r === "time", emptyTimesLabel: ge = "No times available", clearable: _e = !1, pickOnly: z = !1, triggerLabel: ve, clearLabel: ye = "Clear", tabIndex: B, step: V = 30, defaultTime: H = "00:00", presets: U, showZone: W, ...be } = e, G = ee({
+function j(e, t) {
+	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: o, zone: h, locale: g, hourCycle: y, granularity: b, disambiguation: S, min: C, max: w, isDateUnavailable: T, disabled: E = !1, readOnly: D = !1, required: ne, invalid: re, name: j, label: M, labelledBy: N, describedBy: P, open: de, defaultOpen: fe, onOpenChange: pe, closeOnSelect: me = !0, firstDayOfWeek: F, weekNumbers: he, side: I = "bottom", align: ge = "start", matchWidth: _e = r === "time", emptyTimesLabel: L = "No times available", clearable: ve = !1, pickOnly: R = !1, triggerLabel: ye, clearLabel: be = "Clear", tabIndex: z, step: B = 30, defaultTime: V = "00:00", presets: H, showZone: U, ...W } = e, G = ee({
 		locale: g,
 		zone: h === "none" ? void 0 : h
 	}), { locale: K } = G, q = r === "datetime" && h !== "none" ? G.zone : null, J = q ?? G.zone, [Y, X] = _({
@@ -351,15 +354,16 @@ function M(e, t) {
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), Z = ve ?? (r === "time" ? "Choose time" : "Choose date"), xe = typeof N == "string" ? N : Z, { attachTrigger: Q, triggerAttributes: Se, triggerElement: Ce, closeOnChoice: we, id: Te, attachField: Ee, panel: De } = oe({
+	}), Z = ye ?? (r === "time" ? "Choose time" : "Choose date"), xe = typeof M == "string" ? M : Z, { attachTrigger: Q, triggerAttributes: Se, triggerElement: Ce, closeOnChoice: we, id: Te, attachField: Ee, panel: De } = se({
 		ref: t,
-		open: ue,
-		defaultOpen: de,
-		onOpenChange: fe,
-		side: R,
-		align: me,
-		matchWidth: he,
-		label: xe
+		open: de,
+		defaultOpen: fe,
+		onOpenChange: pe,
+		side: I,
+		align: ge,
+		matchWidth: _e,
+		label: xe,
+		variant: W.variant
 	}), $ = Y && r !== "time" ? d(Y, { zone: J }) : null, Oe = Y && r !== "date" ? l(Y, { zone: J }) : null, ke = r === "datetime" ? $ ?? u(J) : null, Ae = (e) => e && (ke === null || d(e, { zone: J }) === ke) ? l(e, { zone: J }) : null, je = Y ? c(Y, {
 		locale: K,
 		zone: J,
@@ -368,7 +372,7 @@ function M(e, t) {
 			dateStyle: "medium",
 			timeStyle: "short"
 		}
-	}) : "", Me = z && Y && q && (W ?? q !== G.readerZone) ? s(q, {
+	}) : "", Me = R && Y && q && (U ?? q !== G.readerZone) ? s(q, {
 		locale: K,
 		style: "short",
 		at: Y
@@ -379,7 +383,7 @@ function M(e, t) {
 		e && (r === "date" ? (X(e, {
 			reason: "select",
 			event: t
-		}), I && Ne(t)) : X(Pe(e, Oe ?? H), {
+		}), me && Ne(t)) : X(Pe(e, Oe ?? V), {
 			reason: "select",
 			event: t
 		}));
@@ -387,7 +391,7 @@ function M(e, t) {
 		X(r === "time" ? e : Pe($ ?? u(J), e), {
 			reason: "select",
 			event: t
-		}), I && Ne(t);
+		}), me && Ne(t);
 	}, Le = /* @__PURE__ */ O(n, {
 		tag: "button",
 		ref: Q,
@@ -404,11 +408,11 @@ function M(e, t) {
 		props: {
 			type: "button",
 			"aria-label": je ? `${Z}, ${je}` : Z,
-			tabIndex: B,
+			tabIndex: z,
 			...Se
 		},
-		children: O(r === "time" ? j : A, {})
-	}), Re = _e && Y && !E && !D && /* @__PURE__ */ O(n, {
+		children: O(r === "time" ? A : ae, {})
+	}), Re = ve && Y && !E && !D && /* @__PURE__ */ O(n, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -422,34 +426,34 @@ function M(e, t) {
 		zIndex: 1,
 		props: {
 			type: "button",
-			"aria-label": ye,
-			tabIndex: B,
+			"aria-label": be,
+			tabIndex: z,
 			onClick: (e) => X(null, {
 				reason: "clear",
 				event: e
 			})
 		},
-		children: /* @__PURE__ */ O(ae, {})
-	}), ze = Y !== null && (C != null && f(Y, C) < 0 || w != null && f(Y, w) > 0), Be = z ? /* @__PURE__ */ O(le, {
-		frame: be,
+		children: /* @__PURE__ */ O(oe, {})
+	}), ze = Y !== null && (C != null && f(Y, C) < 0 || w != null && f(Y, w) > 0), Be = R ? /* @__PURE__ */ O(ue, {
+		frame: W,
 		attachField: Ee,
 		attachTrigger: D ? void 0 : Q,
 		triggerAttributes: D ? void 0 : Se,
 		triggerElement: Ce,
 		id: Te,
-		label: N,
-		labelledBy: P,
-		describedBy: F,
+		label: M,
+		labelledBy: N,
+		describedBy: P,
 		text: Me ? `${je} ${Me}` : je,
 		placeholder: Z,
-		icon: O(r === "time" ? j : A, {}),
+		icon: O(r === "time" ? A : ae, {}),
 		clear: Re,
 		disabled: E,
 		invalid: re ?? (ze || $ !== null && !!T?.($)),
 		required: ne,
-		tabIndex: B,
+		tabIndex: z,
 		inputs: [{
-			name: M,
+			name: j,
 			value: Y ?? ""
 		}],
 		onReset: (e) => X(a, {
@@ -458,7 +462,7 @@ function M(e, t) {
 		})
 	}) : /* @__PURE__ */ O(te, {
 		ref: Ee,
-		...be,
+		...W,
 		type: r,
 		value: Y,
 		onValueChange: (e, t) => X(e, {
@@ -477,12 +481,12 @@ function M(e, t) {
 		readOnly: D,
 		required: ne,
 		invalid: re,
-		name: M,
-		label: N,
-		labelledBy: P,
-		describedBy: F,
-		showZone: W,
-		tabIndex: B,
+		name: j,
+		label: M,
+		labelledBy: N,
+		describedBy: P,
+		showZone: U,
+		tabIndex: z,
 		end: /* @__PURE__ */ k(ie, { children: [Re, Le] })
 	});
 	return /* @__PURE__ */ k(v, { children: [Be, De(/* @__PURE__ */ k(n, {
@@ -490,14 +494,14 @@ function M(e, t) {
 		gap: 3,
 		ai: "stretch",
 		children: [
-			U && U.length > 0 && /* @__PURE__ */ O(ce, {
-				presets: U,
+			H && H.length > 0 && /* @__PURE__ */ O(le, {
+				presets: H,
 				isSelected: (e) => Y !== null && f(e, Y, { zone: J }) === 0,
 				onSelect: (e, t) => {
 					X(e, {
 						reason: "preset",
 						event: t
-					}), I && Ne(t);
+					}), me && Ne(t);
 				}
 			}),
 			r !== "time" && /* @__PURE__ */ O(x, {
@@ -508,26 +512,26 @@ function M(e, t) {
 				isDateUnavailable: T,
 				locale: g,
 				zone: h === "none" ? void 0 : h,
-				firstDayOfWeek: L,
-				weekNumbers: pe
+				firstDayOfWeek: F,
+				weekNumbers: he
 			}),
-			r !== "date" && /* @__PURE__ */ O(se, {
+			r !== "date" && /* @__PURE__ */ O(ce, {
 				value: Oe,
-				step: V,
+				step: B,
 				locale: K,
 				hourCycle: y,
 				label: r === "time" ? xe : "Time",
 				min: Ae(C),
 				max: Ae(w),
-				emptyLabel: ge,
+				emptyLabel: L,
 				separated: r === "datetime",
 				onSelect: Ie
 			})
 		]
 	}))] });
 }
-function N(e, t) {
-	let { value: r, defaultValue: i = null, onValueChange: a, locale: s, min: c, max: l, isDateUnavailable: u, disabled: d = !1, readOnly: p = !1, required: m, invalid: h, startName: g, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: T = "End date", open: E, defaultOpen: D, onOpenChange: ne, closeOnSelect: j = !0, firstDayOfWeek: se, weekNumbers: M, months: N = 2, side: P = "bottom", align: F = "start", matchWidth: ue = !1, emptyTimesLabel: de, clearable: fe = !1, pickOnly: I = !1, triggerLabel: L = "Choose dates", clearLabel: pe = "Clear", tabIndex: R, presets: me, props: he, ...ge } = e, { locale: _e } = ee({ locale: s }), [z, ve] = _({
+function M(e, t) {
+	let { value: r, defaultValue: i = null, onValueChange: a, locale: s, min: c, max: l, isDateUnavailable: u, disabled: d = !1, readOnly: p = !1, required: m, invalid: h, startName: g, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: T = "End date", open: E, defaultOpen: D, onOpenChange: ne, closeOnSelect: A = !0, firstDayOfWeek: ce, weekNumbers: j, months: M = 2, side: N = "bottom", align: P = "start", matchWidth: de = !1, emptyTimesLabel: fe, clearable: pe = !1, pickOnly: me = !1, triggerLabel: F = "Choose dates", clearLabel: he = "Clear", tabIndex: I, presets: ge, props: _e, ...L } = e, { locale: ve } = ee({ locale: s }), [R, ye] = _({
 		value: r,
 		defaultValue: i,
 		onChange: a,
@@ -536,35 +540,36 @@ function N(e, t) {
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), [ye, B] = re({
-		start: z?.start ?? null,
-		end: z?.end ?? null,
-		source: z
-	}), { start: V, end: H } = ye;
-	ye.source !== z && (V = z?.start ?? null, H = z?.end ?? null, B({
-		start: V,
-		end: H,
-		source: z
+	}), [be, z] = re({
+		start: R?.start ?? null,
+		end: R?.end ?? null,
+		source: R
+	}), { start: B, end: V } = be;
+	be.source !== R && (B = R?.start ?? null, V = R?.end ?? null, z({
+		start: B,
+		end: V,
+		source: R
 	}));
-	let { attachTrigger: U, triggerAttributes: W, triggerElement: be, closeOnChoice: G, id: K, attachField: q, panel: J } = oe({
+	let { attachTrigger: H, triggerAttributes: U, triggerElement: W, closeOnChoice: G, id: K, attachField: q, panel: J } = se({
 		ref: t,
 		open: E,
 		defaultOpen: D,
 		onOpenChange: ne,
-		side: P,
-		align: F,
-		matchWidth: ue,
-		label: typeof b == "string" ? b : L
-	}), Y = z ? o(z.start, z.end, { locale: _e }) : "", X = V !== null && H !== null && f(V, H) > 0, Z = (e, t, n, r) => {
+		side: N,
+		align: P,
+		matchWidth: de,
+		label: typeof b == "string" ? b : F,
+		variant: L.variant
+	}), Y = R ? o(R.start, R.end, { locale: ve }) : "", X = B !== null && V !== null && f(B, V) > 0, Z = (e, t, n, r) => {
 		let i = e && t && f(e, t) <= 0 ? {
 			start: e,
 			end: t
 		} : null;
-		B({
+		z({
 			start: e,
 			end: t,
 			source: i
-		}), ve(i, {
+		}), ye(i, {
 			reason: n,
 			event: r
 		});
@@ -579,8 +584,8 @@ function N(e, t) {
 		component: "datePicker.part",
 		px: 0,
 		py: 0,
-		tabIndex: R
-	}, Se = fe && z && !d && !p && /* @__PURE__ */ O(n, {
+		tabIndex: I
+	}, Se = pe && R && !d && !p && /* @__PURE__ */ O(n, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -593,38 +598,38 @@ function N(e, t) {
 		zIndex: 1,
 		props: {
 			type: "button",
-			"aria-label": pe,
-			tabIndex: R,
+			"aria-label": he,
+			tabIndex: I,
 			onClick: (e) => Z(null, null, "clear", e)
 		},
-		children: /* @__PURE__ */ O(ae, {})
-	}), Ce = z !== null && (c != null && f(z.start, c) < 0 || l != null && f(z.end, l) > 0), we = I ? /* @__PURE__ */ O(le, {
+		children: /* @__PURE__ */ O(oe, {})
+	}), Ce = R !== null && (c != null && f(R.start, c) < 0 || l != null && f(R.end, l) > 0), we = me ? /* @__PURE__ */ O(ue, {
 		frame: {
-			...ge,
-			props: he
+			...L,
+			props: _e
 		},
 		attachField: q,
-		attachTrigger: p ? void 0 : U,
-		triggerAttributes: p ? void 0 : W,
-		triggerElement: be,
+		attachTrigger: p ? void 0 : H,
+		triggerAttributes: p ? void 0 : U,
+		triggerElement: W,
 		id: K,
 		label: b,
 		labelledBy: S,
 		describedBy: C,
 		text: Y,
-		placeholder: L,
-		icon: /* @__PURE__ */ O(A, {}),
+		placeholder: F,
+		icon: /* @__PURE__ */ O(ae, {}),
 		clear: Se,
 		disabled: d,
 		invalid: h ?? Ce,
 		required: m,
-		tabIndex: R,
+		tabIndex: I,
 		inputs: [{
 			name: g,
-			value: z?.start ?? ""
+			value: R?.start ?? ""
 		}, {
 			name: y,
-			value: z?.end ?? ""
+			value: R?.end ?? ""
 		}],
 		onReset: (e) => Z(i?.start ?? null, i?.end ?? null, "reset", e)
 	}) : /* @__PURE__ */ k(ie, { children: [b !== void 0 && /* @__PURE__ */ O(n, {
@@ -642,8 +647,8 @@ function N(e, t) {
 		gap: 2,
 		px: 3,
 		py: 2,
-		...ge,
-		variant: [ge.variant, {
+		...L,
+		variant: [L.variant, {
 			disabled: d,
 			invalid: h ?? X
 		}],
@@ -652,13 +657,13 @@ function N(e, t) {
 			"aria-labelledby": [b === void 0 ? void 0 : `${K}-label`, S].filter(Boolean).join(" ") || void 0,
 			"aria-invalid": (h ?? X) || void 0,
 			"aria-describedby": C,
-			...he
+			..._e
 		},
 		children: [
 			/* @__PURE__ */ O(te, {
 				...Q,
-				value: V,
-				onValueChange: (e, t) => Z(e, H, t.reason, t.event),
+				value: B,
+				onValueChange: (e, t) => Z(e, V, t.reason, t.event),
 				name: g,
 				props: { "aria-label": w },
 				invalid: h ?? X
@@ -670,8 +675,8 @@ function N(e, t) {
 			}),
 			/* @__PURE__ */ O(te, {
 				...Q,
-				value: H,
-				onValueChange: (e, t) => Z(V, e, t.reason, t.event),
+				value: V,
+				onValueChange: (e, t) => Z(B, e, t.reason, t.event),
 				name: y,
 				props: { "aria-label": T },
 				invalid: h ?? X
@@ -683,7 +688,7 @@ function N(e, t) {
 				ms: "auto",
 				children: [Se, /* @__PURE__ */ O(n, {
 					tag: "button",
-					ref: U,
+					ref: H,
 					component: "datePicker.trigger",
 					display: "inline-flex",
 					ai: "center",
@@ -695,11 +700,11 @@ function N(e, t) {
 					disabled: d || p,
 					props: {
 						type: "button",
-						"aria-label": Y ? `${L}, ${Y}` : L,
-						tabIndex: R,
-						...W
+						"aria-label": Y ? `${F}, ${Y}` : F,
+						tabIndex: I,
+						...U
 					},
-					children: /* @__PURE__ */ O(A, {})
+					children: /* @__PURE__ */ O(ae, {})
 				})]
 			})
 		]
@@ -708,29 +713,29 @@ function N(e, t) {
 		display: "flex",
 		gap: 3,
 		ai: "stretch",
-		children: [me && me.length > 0 && /* @__PURE__ */ O(ce, {
-			presets: me,
-			isSelected: (e) => z !== null && e.start === z.start && e.end === z.end,
+		children: [ge && ge.length > 0 && /* @__PURE__ */ O(le, {
+			presets: ge,
+			isSelected: (e) => R !== null && e.start === R.start && e.end === R.end,
 			onSelect: (e, t) => {
-				Z(e.start, e.end, "preset", t), j && xe(t);
+				Z(e.start, e.end, "preset", t), A && xe(t);
 			}
 		}), /* @__PURE__ */ O(x, {
 			mode: "range",
-			months: N,
-			value: z,
-			defaultFocusedDate: V ?? void 0,
+			months: M,
+			value: R,
+			defaultFocusedDate: B ?? void 0,
 			onValueChange: (e, t) => {
-				Z(e?.start ?? null, e?.end ?? null, "select", t.event), j && e && t.event && xe(t.event);
+				Z(e?.start ?? null, e?.end ?? null, "select", t.event), A && e && t.event && xe(t.event);
 			},
 			min: c,
 			max: l,
 			isDateUnavailable: u,
 			locale: s,
-			firstDayOfWeek: se,
-			weekNumbers: M
+			firstDayOfWeek: ce,
+			weekNumbers: j
 		})]
 	}))] });
 }
-var P = e(M, "DatePicker"), F = e(N, "DateRangePicker");
+var N = e(j, "DatePicker"), P = e(M, "DateRangePicker");
 //#endregion
-export { F as DateRangePicker, P as default };
+export { P as DateRangePicker, N as default };

package/components/dialog.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../client.cjs"),r=require("../effects.cjs"),i=require("../box.cjs"),a=require("../behavior.cjs"),o=require("../identity.cjs"),s=require("../reporting.cjs"),c=require("../motion.cjs"),l=require("./semantics.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=0;function p(e){let{classNames:i,styleElements:a}=n.i({overflow:`hidden`},!1),o=i.slice(1).join(` `);return r.n(()=>{let n=t.n();if(!(!e||!n||!o))return f+=1,n.classList.add(o),()=>{--f,f===0&&n.classList.remove(o)}},[e,o]),a}var m=(0,u.createContext)(null);function h(e){let t=(0,u.useContext)(m);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function g(e,t){return(0,d.jsx)(v,{role:`dialog`,...e,elementRef:t})}function _(e,t){return(0,d.jsx)(v,{role:`alertdialog`,...e,modal:!0,dismissible:!1,elementRef:t})}function v(e){let{role:n,trigger:l,children:f,open:h,defaultOpen:g=!1,onOpenChange:_,label:v,labelledBy:b,describedBy:x,modal:S=!0,dismissible:C=!0,lockScroll:w=S,initialFocus:T,elementRef:E,props:D,...O}=e,k=o.t(`dialog`),A=O.id??k,[j,M]=s.a({value:h,defaultValue:g,onChange:_,interaction:{component:n===`alertdialog`?`alertDialog`:`dialog`,type:`openChange`}}),[N,P]=(0,u.useState)(null),F=(0,u.useCallback)(e=>{P(e),t.d(E,e)},[E]),[I,L]=(0,u.useState)(null),[R,z]=(0,u.useState)(!1),[B,V]=(0,u.useState)({title:0,description:0}),H=p(j&&w);a.n({enabled:j,returnTo:I});let U=c.t(f,j,N),W=(0,u.useCallback)(e=>(V(t=>({...t,[e]:t[e]+1})),()=>V(t=>({...t,[e]:t[e]-1}))),[]),G=(0,u.useMemo)(()=>({titleId:`${A}-title`,descriptionId:`${A}-description`,register:W}),[A,W]);y({dialog:N,isOpen:j,domOpen:R,setDomOpen:z,setOpen:M,modal:S,dismissible:C,triggerElement:I}),r.n(()=>{let e=t.m(T);!j||!e||e.focus()},[j,T]);let K=a.a(e=>{M(e=>!e,{reason:`trigger`,event:e})}),q=(0,u.useMemo)(()=>({ref:L,props:{"aria-expanded":j,"aria-haspopup":`dialog`,"aria-controls":j?A:void 0,onClick:K}}),[A,K,j]),J=O;return(0,d.jsxs)(d.Fragment,{children:[H,l?.(q),(0,d.jsx)(m.Provider,{value:G,children:(0,d.jsx)(i.default,{ref:F,tag:`dialog`,component:`dialog`,...J,id:A,props:{role:n,"aria-label":B.title||b?void 0:v,"aria-labelledby":b??(B.title?G.titleId:void 0),"aria-describedby":x??(B.description?G.descriptionId:void 0),...D},children:U})})]})}function y(e){let{dialog:n,isOpen:i,domOpen:o,setDomOpen:s,setOpen:c,modal:l,dismissible:d,triggerElement:f}=e,p=(0,u.useRef)(`imperative`),m=t.s(),h=d?`any`:`closerequest`;r.n(()=>{!n||i===o||(s(i),i?l?n.showModal():n.show():n.close())},[n,i,o,l,s]),r.n(()=>{if(!(!n||!i||!l))return t.u(n,!0),()=>t.u(n,!1)},[n,i,l]),r.n(()=>{if(!n)return;let e=new AbortController;return n.addEventListener(`close`,e=>{s(!1),c(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[n,s,c]),r.n(()=>{if(!(!n||!m))return n.setAttribute(`closedby`,h),()=>n.removeAttribute(`closedby`)},[n,m,h]),r.n(()=>{if(!i||!n)return;let e=new AbortController,r=(t,n)=>document.addEventListener(t,n,{signal:e.signal,capture:!0});return r(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),r(`pointerdown`,e=>{t.h(e,[f])?p.current=`trigger`:!t.h(e,[n])||b(n,e)?p.current=`outside-pointer`:p.current=`imperative`}),()=>e.abort()},[i,n,f]),a.r({enabled:i&&!l&&!m,inside:[n],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>c(!1,{reason:`escape`,event:t})}),r.n(()=>{if(!n||!i||!d||m)return;let e=new AbortController;return document.addEventListener(`pointerdown`,e=>{t.h(e,[f])||t.h(e,[n])&&!b(n,e)||c(!1,{reason:`outside-pointer`,event:e})},{signal:e.signal,capture:!0}),()=>e.abort()},[n,i,d,m,f,c])}function b(e,t){if(t.target!==e)return!1;let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function x(e){let t=h(`Dialog.Title`);return r.n(()=>t.register(`title`),[t]),(0,d.jsx)(l.H2,{id:t.titleId,component:`dialog.title`,...e})}function S(e){let t=h(`Dialog.Description`);return r.n(()=>t.register(`description`),[t]),(0,d.jsx)(l.P,{id:t.descriptionId,component:`dialog.description`,...e})}x.displayName=`Dialog.Title`,S.displayName=`Dialog.Description`;var C={Title:x,Description:S},w=Object.assign(e.f(g,`Dialog`),C),T=Object.assign(e.f(_,`AlertDialog`),C);exports.AlertDialog=T,exports.default=w;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../client.cjs"),r=require("../effects.cjs"),i=require("../box.cjs"),a=require("../behavior.cjs"),o=require("../identity.cjs"),s=require("../reporting.cjs"),c=require("../motion.cjs"),l=require("./semantics.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=0;function p(e){let{classNames:i,styleElements:a}=n.i({overflow:`hidden`},!1),o=i.slice(1).join(` `);return r.n(()=>{let n=t.n();if(!(!e||!n||!o))return f+=1,n.classList.add(o),()=>{--f,f===0&&n.classList.remove(o)}},[e,o]),a}var m=(0,u.createContext)(null);function h(e){let t=(0,u.useContext)(m);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function g(e,t){return(0,d.jsx)(v,{role:`dialog`,...e,elementRef:t})}function _(e,t){return(0,d.jsx)(v,{role:`alertdialog`,...e,modal:!0,dismissible:!1,elementRef:t})}function v(e){let{role:n,trigger:l,children:f,open:h,defaultOpen:g=!1,onOpenChange:_,label:v,labelledBy:b,describedBy:x,modal:S=!0,dismissible:C=!0,lockScroll:w=S,initialFocus:T,elementRef:E,props:D,...O}=e,k=o.t(`dialog`),A=O.id??k,[j,M]=s.a({value:h,defaultValue:g,onChange:_,interaction:{component:n===`alertdialog`?`alertDialog`:`dialog`,type:`openChange`}}),[N,P]=(0,u.useState)(null),F=(0,u.useCallback)(e=>{P(e),t.d(E,e)},[E]),[I,L]=(0,u.useState)(null),[R,z]=(0,u.useState)(!1),[B,V]=(0,u.useState)({title:0,description:0}),H=p(j&&w);a.n({enabled:j,returnTo:I});let U=c.t(f,j,N),W=(0,u.useCallback)(e=>(V(t=>({...t,[e]:t[e]+1})),()=>V(t=>({...t,[e]:t[e]-1}))),[]),G=(0,u.useMemo)(()=>({titleId:`${A}-title`,descriptionId:`${A}-description`,register:W}),[A,W]);y({dialog:N,isOpen:j,domOpen:R,setDomOpen:z,setOpen:M,modal:S,dismissible:C,triggerElement:I}),r.n(()=>{let e=t.h(T);!j||!e||e.focus()},[j,T]);let K=a.a(e=>{M(e=>!e,{reason:`trigger`,event:e})}),q=(0,u.useMemo)(()=>({ref:L,props:{"aria-expanded":j,"aria-haspopup":`dialog`,"aria-controls":j?A:void 0,onClick:K}}),[A,K,j]),J=O;return(0,d.jsxs)(d.Fragment,{children:[H,l?.(q),(0,d.jsx)(m.Provider,{value:G,children:(0,d.jsx)(i.default,{ref:F,tag:`dialog`,component:`dialog`,...J,id:A,props:{role:n,"aria-label":B.title||b?void 0:v,"aria-labelledby":b??(B.title?G.titleId:void 0),"aria-describedby":x??(B.description?G.descriptionId:void 0),...D},children:U})})]})}function y(e){let{dialog:n,isOpen:i,domOpen:o,setDomOpen:s,setOpen:c,modal:l,dismissible:d,triggerElement:f}=e,p=(0,u.useRef)(`imperative`),m=t.s(),h=d?`any`:`closerequest`;r.n(()=>{!n||i===o||(s(i),i?l?n.showModal():n.show():n.close())},[n,i,o,l,s]),r.n(()=>{if(!(!n||!i||!l))return t.u(n,!0),()=>t.u(n,!1)},[n,i,l]),r.n(()=>{if(!n)return;let e=new AbortController;return n.addEventListener(`close`,e=>{s(!1),c(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[n,s,c]),r.n(()=>{if(!(!n||!m))return n.setAttribute(`closedby`,h),()=>n.removeAttribute(`closedby`)},[n,m,h]),r.n(()=>{if(!i||!n)return;let e=new AbortController,r=(t,n)=>document.addEventListener(t,n,{signal:e.signal,capture:!0});return r(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),r(`pointerdown`,e=>{t.g(e,[f])?p.current=`trigger`:!t.g(e,[n])||b(n,e)?p.current=`outside-pointer`:p.current=`imperative`}),()=>e.abort()},[i,n,f]),a.r({enabled:i&&!l&&!m,inside:[n],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>c(!1,{reason:`escape`,event:t})}),r.n(()=>{if(!n||!i||!d||m)return;let e=new AbortController;return document.addEventListener(`pointerdown`,e=>{t.g(e,[f])||t.g(e,[n])&&!b(n,e)||c(!1,{reason:`outside-pointer`,event:e})},{signal:e.signal,capture:!0}),()=>e.abort()},[n,i,d,m,f,c])}function b(e,t){if(t.target!==e)return!1;let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function x(e){let t=h(`Dialog.Title`);return r.n(()=>t.register(`title`),[t]),(0,d.jsx)(l.H2,{id:t.titleId,component:`dialog.title`,...e})}function S(e){let t=h(`Dialog.Description`);return r.n(()=>t.register(`description`),[t]),(0,d.jsx)(l.P,{id:t.descriptionId,component:`dialog.description`,...e})}x.displayName=`Dialog.Title`,S.displayName=`Dialog.Description`;var C={Title:x,Description:S},w=Object.assign(e.f(g,`Dialog`),C),T=Object.assign(e.f(_,`AlertDialog`),C);exports.AlertDialog=T,exports.default=w;

package/components/dialog.d.ts

@@ -60,7 +60,7 @@ export interface DialogProps<TKey extends keyof ComponentsAndVariants = 'dialog'
     /**
      * Where focus lands on open, instead of the first focusable thing inside. An **alert dialog owes this to
      * its least destructive action** — APG's rule, so that a keyboard user cannot confirm a deletion by
-     * reflex. An `autofocus` attribute inside does the same job with no ref.
+     * reflex. React's `autoFocus` is no substitute: it writes no attribute, and focuses while the dialog is closed.
      */
     initialFocus?: ElementLike;
 }

package/components/dialog.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { f as e } from "../react-shared.mjs";
-import { d as t, h as n, m as r, n as i, s as a, u as o } from "../platform.mjs";
+import { d as t, g as n, h as r, n as i, s as a, u as o } from "../platform.mjs";
 import { i as s } from "../client.mjs";
 import { n as c } from "../effects.mjs";
 import l from "../box.mjs";