@skdx/react 0.26.0 → 0.28.0

package/dist/date-picker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";var he=Object.create;var k=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,He=Object.prototype.hasOwnProperty;var ve=(e,r)=>{for(var t in r)k(e,t,{get:r[t],enumerable:!0})},W=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of be(r))!He.call(e,a)&&a!==t&&k(e,a,{get:()=>r[a],enumerable:!(o=xe(r,a))||o.enumerable});return e};var m=(e,r,t)=>(t=e!=null?he(Te(e)):{},W(r||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),Ie=e=>W(k({},"__esModule",{value:!0}),e);var we={};ve(we,{DatePicker:()=>I,DatePickerCalendar:()=>V,DatePickerClose:()=>N,DatePickerContent:()=>O,DatePickerInput:()=>E,DatePickerPortal:()=>w,DatePickerTimeField:()=>F,DatePickerTrigger:()=>S});module.exports=Ie(we);var l=m(require("react"),1),p=require("../calendar/Calendar.cjs"),z=require("../utils/createContext.cjs"),D=require("../utils/formControl.cjs"),H=require("../utils/hiddenInput.cjs"),G=require("../utils/popper.cjs"),v=require("../utils/useControllableState.cjs"),J=require("../utils/useOpenChangeComplete.cjs"),P=require("react/jsx-runtime"),Ve=()=>{};function _(e){return e?Array.isArray(e)?e:(0,p.isDateRange)(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}var[Ne,i]=(0,z.createSafeContext)("DatePicker"),I=l.forwardRef(function({children:r,selectionMode:t="single",granularity:o="day",value:a,defaultValue:c,onValueChange:d,open:u,defaultOpen:n=!1,onOpenChange:f,onOpenChangeComplete:s,name:R,required:L=!1,disabled:h=!1},ye){let A=l.useRef(null),$=l.useRef(null),x=l.useRef(null),[b=(0,p.emptySelection)(t),B]=(0,v.useControllableState)({prop:a,defaultProp:c??(0,p.emptySelection)(t),onChange:T=>d?.(T??(0,p.emptySelection)(t))}),[q=!1,Re]=(0,v.useControllableState)({prop:u,defaultProp:n,onChange:f});return(0,J.useOpenChangeComplete)(q,$,s),l.useImperativeHandle(ye,()=>(0,D.formValidityHandle)(x),[]),(0,D.useFormReset)(A,()=>B(c??(0,p.emptySelection)(t))),(0,P.jsx)(G.PopperRoot,{children:(0,P.jsxs)(Ne,{triggerRef:A,contentRef:$,contentId:l.useId(),value:b,selectionMode:t,granularity:o,onValueChange:B,open:h?!1:q,onOpenChange:h?Ve:Re,disabled:h,children:[r,R&&(_(b).length===0?(0,P.jsx)(H.HiddenInput,{ref:x,type:"text",name:R,value:"",required:L}):_(b).map((T,K)=>(0,P.jsx)(H.HiddenInput,{ref:K===0?x:void 0,type:"text",name:R,value:(0,p.toISODateString)(T),required:L},K)))]})})});I.displayName="DatePicker";var Q=m(require("react"),1),g=require("../calendar/Calendar.cjs"),U=require("../utils/part.cjs");var X=require("react/jsx-runtime");function Oe(e){return Array.isArray(e)?!1:(0,g.isDateRange)(e)?e.end!==null:e!==null}var V=Q.forwardRef((e,r)=>{let t=i("DatePickerCalendar");return(0,X.jsx)(g.Calendar,{...e,value:t.value,selectionMode:t.selectionMode,...(0,U.skdxPart)("date-picker","calendar",e.className),ref:r,onValueChange:o=>{t.onValueChange(o),t.granularity==="day"&&Oe(o)&&t.onOpenChange(!1)}})});V.displayName="DatePickerCalendar";var Y=m(require("react"),1),Z=require("../utils/part.cjs"),C=require("../utils/primitive.cjs");var j=require("react/jsx-runtime"),N=Y.forwardRef((e,r)=>{let t=i("DatePickerClose");return(0,j.jsx)(C.Primitive.button,{type:"button",...e,...(0,Z.skdxPart)("date-picker","close",e.className),ref:r,onClick:(0,C.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!1))})});N.displayName="DatePickerClose";var ee=m(require("react"),1),te=require("../utils/composeRefs.cjs"),re=require("../utils/part.cjs"),oe=require("../utils/popper.cjs"),ae=require("../utils/useDismiss.cjs");var ne=require("react/jsx-runtime"),O=ee.forwardRef(({forceMount:e,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:o,onInteractOutside:a,sideOffset:c=4,...d},u)=>{let n=i("DatePickerContent"),f=(0,te.useComposedRefs)(u,n.contentRef);return(0,ae.useDismiss)({enabled:n.open,onEscapeKeyDown:s=>{r?.(s),s.defaultPrevented||(n.onOpenChange(!1),n.triggerRef.current?.focus())},onInteractOutside:a,onPointerDownOutside:s=>{t?.(s),s.defaultPrevented||n.onOpenChange(!1)},onFocusOutside:s=>{o?.(s),s.defaultPrevented||n.onOpenChange(!1)}},[n.contentRef,n.triggerRef]),e||n.open?(0,ne.jsx)(oe.PopperContent,{id:n.contentId,"data-state":n.open?"open":"closed",sideOffset:c,...d,...(0,re.skdxPart)("date-picker","content",d.className),ref:f}):null});O.displayName="DatePickerContent";var ie=m(require("react"),1),se=require("../date-field/DateField.cjs"),le=require("../utils/part.cjs");var pe=require("react/jsx-runtime"),E=ie.forwardRef((e,r)=>{let t=i("DatePickerInput");return t.selectionMode!=="single"?null:(0,pe.jsx)(se.DateField,{...e,granularity:t.granularity,value:t.value,onValueChange:o=>t.onValueChange(o),...(0,le.skdxPart)("date-picker","input",e.className),ref:r})});E.displayName="DatePickerInput";var ce=require("../utils/portal.cjs");var me=require("react/jsx-runtime"),w=({forceMount:e,children:r,...t})=>{let o=i("DatePickerPortal");return e||o.open?(0,me.jsx)(ce.Portal,{...t,children:r}):null};w.displayName="DatePickerPortal";var de=m(require("react"),1),fe=require("../time-field/TimeField.cjs"),Pe=require("../utils/part.cjs");var ue=require("react/jsx-runtime");function Ee(e,r){if(!e)return null;let t=a=>String(a).padStart(2,"0"),o=`${t(e.getHours())}:${t(e.getMinutes())}`;return r?`${o}:${t(e.getSeconds())}`:o}var F=de.forwardRef((e,r)=>{let t=i("DatePickerTimeField"),{granularity:o}=t;if(o==="day"||t.selectionMode!=="single")return null;let a=t.value??null;return(0,ue.jsx)(fe.TimeField,{...e,granularity:o,value:Ee(a,o==="second"),onValueChange:c=>{if(!a||c===null)return;let[d=0,u=0,n=0]=c.split(":").map(Number),f=new Date(a);f.setHours(d,u,n,0),t.onValueChange(f)},...(0,Pe.skdxPart)("date-picker","time-field",e.className),ref:r})});F.displayName="DatePickerTimeField";var ke=m(require("react"),1),De=require("../utils/composeRefs.cjs"),ge=require("../utils/part.cjs"),Ce=require("../utils/popper.cjs"),y=require("../utils/primitive.cjs");var M=require("react/jsx-runtime"),S=ke.forwardRef((e,r)=>{let t=i("DatePickerTrigger"),o=(0,De.useComposedRefs)(r,t.triggerRef),a=t.disabled||e.disabled;return(0,M.jsx)(Ce.PopperAnchor,{asChild:!0,children:(0,M.jsx)(y.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":a?"":void 0,...e,...(0,ge.skdxPart)("date-picker","trigger",e.className),disabled:a,ref:o,onClick:(0,y.composeEventHandlers)(e.onClick,()=>{a||t.onOpenChange(!t.open)})})})});S.displayName="DatePickerTrigger";0&&(module.exports={DatePicker,DatePickerCalendar,DatePickerClose,DatePickerContent,DatePickerInput,DatePickerPortal,DatePickerTimeField,DatePickerTrigger});
+"use strict";var Ge=Object.create;var x=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var Qe=Object.getOwnPropertyNames;var Ue=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var Xe=(e,r)=>{for(var t in r)x(e,t,{get:r[t],enumerable:!0})},j=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Qe(r))!We.call(e,o)&&o!==t&&x(e,o,{get:()=>r[o],enumerable:!(a=Je(r,o))||a.enumerable});return e};var k=(e,r,t)=>(t=e!=null?Ge(Ue(e)):{},j(r||!e||!e.__esModule?x(t,"default",{value:e,enumerable:!0}):t,e)),Ye=e=>j(x({},"__esModule",{value:!0}),e);var rt={};Xe(rt,{DatePicker:()=>J,DatePickerCalendar:()=>T,DatePickerClose:()=>Ae,DatePickerContent:()=>E,DatePickerInput:()=>S,DatePickerPortal:()=>H,DatePickerProvider:()=>Ie,DatePickerTimeField:()=>w,DatePickerTrigger:()=>I,useDatePickerContext:()=>i});module.exports=Ye(rt);var s=k(require("react"),1),p=require("../calendar/Calendar.cjs"),He=require("../utils/createContext.cjs"),K=require("../utils/dateValue.cjs"),M=require("../utils/formControl.cjs"),z=require("../utils/hiddenInput.cjs"),we=require("../utils/popper.cjs"),G=require("../utils/useControllableState.cjs"),Le=require("../utils/useOpenChangeComplete.cjs");var ve=require("../calendar/Calendar.cjs");var ee=k(require("react"),1),O=require("../calendar/Calendar.cjs"),te=require("../utils/part.cjs");var re=require("react/jsx-runtime");function Ze(e){return Array.isArray(e)?!1:(0,O.isDateRange)(e)?e.end!==null:e!==null}var T=ee.forwardRef((e,r)=>{let t=i("DatePickerCalendar");return(0,re.jsx)(O.Calendar,{...e,readOnly:e.readOnly||t.readOnly,value:t.value,selectionMode:t.selectionMode,...(0,te.skdxPart)("date-picker","calendar",e.className),ref:r,onValueChange:a=>{t.onValueChange(a),t.closeOnSelect&&t.granularity==="day"&&Ze(a)&&t.onOpenChange(!1)}})});T.displayName="DatePickerCalendar";var P=k(require("react"),1),v=require("../calendar/Calendar.cjs"),se=require("../utils/composeRefs.cjs"),ce=require("../utils/part.cjs"),de=require("../utils/popper.cjs"),pe=require("../utils/useDismiss.cjs"),q=require("../utils/useFocusTrap.cjs");var ne=require("../calendar/Calendar.cjs"),ie=require("../utils/tabbable.cjs");function ae(e,r){return e.querySelector(`[data-skdx-calendar-cell="${r}"]:not([disabled])`)}function oe(e){let r=document.activeElement;return r!==null&&r!==document.body&&e.contains(r)}function le(e,r){let t=[r?ae(e,r):null,ae(e,(0,ne.toISODateString)(new Date)),e.querySelector('[role="gridcell"][tabindex="0"]'),e.querySelector(ie.TABBABLE_SELECTOR)];for(let a of t)if(a&&(a.focus({preventScroll:!0}),oe(e)))return document.activeElement;return e.hasAttribute("tabindex")||(e.tabIndex=-1),e.focus({preventScroll:!0}),oe(e)?e:null}var me=require("react/jsx-runtime"),E=P.forwardRef(({forceMount:e,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:a,onInteractOutside:o,onOpenAutoFocus:d,onCloseAutoFocus:m,sideOffset:h=4,...u},D)=>{let n=i("DatePickerContent"),C=(0,se.useComposedRefs)(D,n.contentRef),R=(0,v.anchorOf)(n.value),b=R?(0,v.toISODateString)(R):null,f=P.useRef({onOpenAutoFocus:d,onCloseAutoFocus:m,anchorISO:b});P.useEffect(()=>{f.current={onOpenAutoFocus:d,onCloseAutoFocus:m,anchorISO:b}});let y=P.useRef(!1);return P.useEffect(()=>{if(!n.open)return;let l=n.contentRef.current;if(!l)return;y.current=!1;let N=requestAnimationFrame(()=>{l.contains(document.activeElement)||(0,q.autoFocusEvent)("open-auto-focus",f.current.onOpenAutoFocus)&&le(l,f.current.anchorISO)});return()=>{cancelAnimationFrame(N),!y.current&&(0,q.autoFocusEvent)("close-auto-focus",f.current.onCloseAutoFocus)&&n.triggerRef.current?.focus({preventScroll:!0})}},[n.open,n.contentRef,n.triggerRef]),(0,pe.useDismiss)({enabled:n.open,onEscapeKeyDown:l=>{r?.(l),l.defaultPrevented||n.onOpenChange(!1)},onInteractOutside:o,onPointerDownOutside:l=>{t?.(l),!l.defaultPrevented&&(y.current=!0,n.onOpenChange(!1))},onFocusOutside:l=>{a?.(l),!l.defaultPrevented&&(y.current=!0,n.onOpenChange(!1))}},[n.contentRef,n.triggerRef]),e||n.open?(0,me.jsx)(de.PopperContent,{role:"dialog","aria-labelledby":u["aria-label"]||u["aria-labelledby"]?void 0:n.triggerId,id:n.contentId,"data-state":n.open?"open":"closed","data-invalid":n.invalid?"":void 0,"data-readonly":n.readOnly?"":void 0,sideOffset:h,...u,...(0,ce.skdxPart)("date-picker","content",u.className),ref:C}):null});E.displayName="DatePickerContent";var ue=k(require("react"),1),fe=require("../date-field/DateField.cjs"),Pe=require("../utils/part.cjs");var ke=require("react/jsx-runtime"),S=ue.forwardRef((e,r)=>{let t=i("DatePickerInput");return t.selectionMode!=="single"?null:(0,ke.jsx)(fe.DateField,{...e,readOnly:e.readOnly||t.readOnly,granularity:t.granularity,value:t.value,onValueChange:a=>t.onValueChange(a),...(0,Pe.skdxPart)("date-picker","input",e.className),ref:r})});S.displayName="DatePickerInput";var ge=require("../utils/portal.cjs");var De=require("react/jsx-runtime"),H=({forceMount:e,children:r,...t})=>{let a=i("DatePickerPortal");return e||a.open?(0,De.jsx)(ge.Portal,{...t,children:r}):null};H.displayName="DatePickerPortal";var ye=k(require("react"),1),he=require("../time-field/TimeField.cjs"),Ce=require("../utils/part.cjs");var Re=require("react/jsx-runtime");function je(e,r){if(!e)return null;let t=o=>String(o).padStart(2,"0"),a=`${t(e.getHours())}:${t(e.getMinutes())}`;return r?`${a}:${t(e.getSeconds())}`:a}var w=ye.forwardRef((e,r)=>{let t=i("DatePickerTimeField"),{granularity:a}=t;if(a==="day"||t.selectionMode!=="single")return null;let o=t.value??null;return(0,Re.jsx)(he.TimeField,{...e,readOnly:e.readOnly||t.readOnly,granularity:a,value:je(o,a==="second"),onValueChange:d=>{if(!o||d===null)return;let[m=0,h=0,u=0]=d.split(":").map(Number),D=new Date(o);D.setHours(m,h,u,0),t.onValueChange(D)},...(0,Ce.skdxPart)("date-picker","time-field",e.className),ref:r})});w.displayName="DatePickerTimeField";var be=k(require("react"),1),xe=require("../utils/composeRefs.cjs"),Oe=require("../utils/part.cjs"),Te=require("../utils/popper.cjs"),L=require("../utils/primitive.cjs");var _=require("react/jsx-runtime"),I=be.forwardRef((e,r)=>{let t=i("DatePickerTrigger"),a=(0,xe.useComposedRefs)(r,t.triggerRef),o=t.disabled||e.disabled;return(0,_.jsx)(Te.PopperAnchor,{asChild:!0,children:(0,_.jsx)(L.Primitive.button,{type:"button",id:t.triggerId,"aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":o?"":void 0,"aria-invalid":t.invalid?!0:void 0,"data-invalid":t.invalid?"":void 0,...e,...(0,Oe.skdxPart)("date-picker","trigger",e.className),disabled:o,ref:a,onClick:(0,L.composeEventHandlers)(e.onClick,()=>{o||t.onOpenChange(!t.open)})})})});I.displayName="DatePickerTrigger";var c=require("react/jsx-runtime"),V=(e,r,t)=>e.toLocaleString(r,{dateStyle:"medium",...t?{timeStyle:"short"}:{}});function et(e,r,t){if(!e)return null;if(Array.isArray(e))return e.length?e.map(a=>V(a,r,t)).join(", "):null;if((0,ve.isDateRange)(e)){let a=V(e.start,r,t);return e.end?`${a} \u2013 ${V(e.end,r,t)}`:a}return V(e,r,t)}var Ee=({placeholder:e,locale:r,showInput:t,passThrough:a})=>{let{value:o,granularity:d}=i("DatePickerAnatomy"),m=et(o,r,d!=="day");return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(I,{...a,children:m??e}),(0,c.jsx)(H,{children:(0,c.jsxs)(E,{...a?.id?{"aria-labelledby":a.id}:{},children:[t?(0,c.jsx)(S,{}):null,(0,c.jsx)(T,{}),(0,c.jsx)(w,{})]})})]})};var g=require("react/jsx-runtime"),tt=()=>{};function Se(e){return e?Array.isArray(e)?e:(0,p.isDateRange)(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}var[Ie,i]=(0,He.createSafeContext)("DatePicker"),J=s.forwardRef(function({children:r,selectionMode:t="single",granularity:a="day",value:o,defaultValue:d,onValueChange:m,open:h,defaultOpen:u=!1,onOpenChange:D,onOpenChangeComplete:n,name:C,form:R,required:b=!1,disabled:f=!1,closeOnSelect:y=!0,readOnly:l=!1,invalid:N=!1,placeholder:Fe="Select date",locale:$e,showInput:Be=!1,...qe},_e){let Q=s.useRef(null),U=s.useRef(null),F=s.useRef(null),Ke=s.useMemo(()=>(0,K.toCalendarValue)(o,t,"value"),[o,t]),W=s.useMemo(()=>(0,K.toCalendarValue)(d,t,"defaultValue"),[d,t]),[$=(0,p.emptySelection)(t),X]=(0,G.useControllableState)({prop:Ke,defaultProp:W??(0,p.emptySelection)(t),onChange:B=>m?.(B??(0,p.emptySelection)(t))}),[Y=!1,ze]=(0,G.useControllableState)({prop:h,defaultProp:u,onChange:D});return(0,Le.useOpenChangeComplete)(Y,U,n),s.useImperativeHandle(_e,()=>(0,M.formValidityHandle)(F),[]),(0,M.useFormReset)(Q,()=>X(W??(0,p.emptySelection)(t))),(0,g.jsx)(we.PopperRoot,{children:(0,g.jsxs)(Ie,{triggerRef:Q,contentRef:U,contentId:s.useId(),triggerId:s.useId(),value:$,selectionMode:t,granularity:a,closeOnSelect:y,readOnly:l,invalid:N,onValueChange:X,open:f?!1:Y,onOpenChange:f?tt:ze,disabled:f,children:[r??(0,g.jsx)(Ee,{placeholder:Fe,locale:$e,showInput:Be,passThrough:qe}),C&&(Se($).length===0?(0,g.jsx)(z.HiddenInput,{ref:F,type:"text",name:C,value:"",required:b,form:R}):Se($).map((B,Z)=>(0,g.jsx)(z.HiddenInput,{ref:Z===0?F:void 0,type:"text",name:C,value:(0,p.toISODateString)(B),required:b,form:R},Z)))]})})});J.displayName="DatePicker";var Ve=k(require("react"),1),Me=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var Ne=require("react/jsx-runtime"),Ae=Ve.forwardRef((e,r)=>{let t=i("DatePickerClose");return(0,Ne.jsx)(A.Primitive.button,{type:"button",...e,...(0,Me.skdxPart)("date-picker","close",e.className),ref:r,onClick:(0,A.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!1))})});Ae.displayName="DatePickerClose";0&&(module.exports={DatePicker,DatePickerCalendar,DatePickerClose,DatePickerContent,DatePickerInput,DatePickerPortal,DatePickerProvider,DatePickerTimeField,DatePickerTrigger,useDatePickerContext});

package/dist/date-picker/DatePicker.d.cts

@@ -1,28 +1,11 @@
 import * as React from 'react';
 import type { DatePickerContextValue, DatePickerProps } from './types.cjs';
 /**
- * Composes Popover's open/positioning machinery with Calendar's date-grid
- * logic rather than reimplementing either — a date picker is just "a
- * Calendar shown in a Popper popup that closes on selection". `DatePicker`
- * owns the selected `value`; `DatePickerCalendar` is a thin convenience
- * wrapper that wires Calendar's `value`/`onValueChange` to that context and
- * closes on select, but the raw `Calendar` (and all its subparts) still
- * works as a child of `DatePickerContent` for full manual composition.
+ * Composes Popper positioning with Calendar date-grid logic.
+ * DatePicker owns value; Calendar inside DatePickerContent has its own context.
  */
 /**
- * Reads the state a {@link DatePicker} root publishes to its parts:
- * `open` and `onOpenChange`, the selected `value` with the `selectionMode` and
- * `granularity` that decide its shape, and the trigger/content refs plus
- * `contentId` that wire the popup's `aria-controls` and focus return.
- *
- * `DatePickerTrigger`, `DatePickerPortal`, `DatePickerContent`,
- * `DatePickerCalendar`, `DatePickerInput`, `DatePickerTimeField` and
- * `DatePickerClose` each read it under their own name, which is the name the
- * hook puts in the error it throws when one of them is rendered outside a
- * `DatePicker`. Note this is the picker's own context, not the calendar's — a
- * `Calendar` composed inside `DatePickerContent` still has its own. Not part of
- * the public API.
- *
+ * DatePicker context: open state, value, granularity, refs, and IDs for popup wiring.
  * @internal
  */
 export declare const DatePickerProvider: {
@@ -32,34 +15,22 @@ export declare const DatePickerProvider: {
     displayName: string;
 }, useDatePickerContext: (consumerName: string) => DatePickerContextValue;
 /**
- * Root of a date picker: composes Popover's open/positioning machinery with
- * Calendar's date-grid logic — a date picker is just "a Calendar shown in a
- * Popper popup that closes on selection". Owns the selected `value` and the
- * popup's `open` state, handing both down to every other `DatePicker*` part
- * via context. Renders no DOM of its own.
+ * Date picker composing Popper positioning with Calendar date-grid logic.
+ * Owns value and popup open state. Derives anatomy with trigger and portalled calendar.
+ *
+ * Supports controlled (value + onValueChange, open + onOpenChange) or uncontrolled (defaultValue, defaultOpen).
  *
- * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
- * uncontrolled (`defaultValue`, `defaultOpen`).
+ * With name: submits YYYY-MM-DD strings (local time, like input type=date).
+ * required reports valueMissing while nothing selected (range anchored on start = unselected).
  *
- * With a `name`, the selection is submitted by the surrounding `<form>` as
- * local-time `YYYY-MM-DD` strings, exactly like `<input type="date">` — one
- * entry in `single` mode, one entry per date in `multiple`, and start then end
- * in `range`. `required` reports `valueMissing` while nothing is selected; a
- * range still anchored on its start counts as nothing selected — reported
- * through the forwarded ref's `checkValidity()`/`reportValidity()`. A form
- * reset restores `defaultValue`.
+ * @example
+ * ```tsx
+ * <DatePicker value={date} onValueChange={setDate} />
+ * ```
  *
  * @example
  * ```tsx
- * <DatePicker defaultValue={new Date()}>
- *   <DatePickerTrigger>Pick a date</DatePickerTrigger>
- *   <DatePickerPortal>
- *     <DatePickerContent>
- *       <DatePickerCalendar />
- *       <DatePickerClose>Close</DatePickerClose>
- *     </DatePickerContent>
- *   </DatePickerPortal>
- * </DatePicker>
+ * <DatePicker selectionMode="range" value={range} onValueChange={setRange} />
  * ```
  */
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

package/dist/date-picker/DatePicker.d.ts

@@ -1,28 +1,11 @@
 import * as React from 'react';
 import type { DatePickerContextValue, DatePickerProps } from './types.js';
 /**
- * Composes Popover's open/positioning machinery with Calendar's date-grid
- * logic rather than reimplementing either — a date picker is just "a
- * Calendar shown in a Popper popup that closes on selection". `DatePicker`
- * owns the selected `value`; `DatePickerCalendar` is a thin convenience
- * wrapper that wires Calendar's `value`/`onValueChange` to that context and
- * closes on select, but the raw `Calendar` (and all its subparts) still
- * works as a child of `DatePickerContent` for full manual composition.
+ * Composes Popper positioning with Calendar date-grid logic.
+ * DatePicker owns value; Calendar inside DatePickerContent has its own context.
  */
 /**
- * Reads the state a {@link DatePicker} root publishes to its parts:
- * `open` and `onOpenChange`, the selected `value` with the `selectionMode` and
- * `granularity` that decide its shape, and the trigger/content refs plus
- * `contentId` that wire the popup's `aria-controls` and focus return.
- *
- * `DatePickerTrigger`, `DatePickerPortal`, `DatePickerContent`,
- * `DatePickerCalendar`, `DatePickerInput`, `DatePickerTimeField` and
- * `DatePickerClose` each read it under their own name, which is the name the
- * hook puts in the error it throws when one of them is rendered outside a
- * `DatePicker`. Note this is the picker's own context, not the calendar's — a
- * `Calendar` composed inside `DatePickerContent` still has its own. Not part of
- * the public API.
- *
+ * DatePicker context: open state, value, granularity, refs, and IDs for popup wiring.
  * @internal
  */
 export declare const DatePickerProvider: {
@@ -32,34 +15,22 @@ export declare const DatePickerProvider: {
     displayName: string;
 }, useDatePickerContext: (consumerName: string) => DatePickerContextValue;
 /**
- * Root of a date picker: composes Popover's open/positioning machinery with
- * Calendar's date-grid logic — a date picker is just "a Calendar shown in a
- * Popper popup that closes on selection". Owns the selected `value` and the
- * popup's `open` state, handing both down to every other `DatePicker*` part
- * via context. Renders no DOM of its own.
+ * Date picker composing Popper positioning with Calendar date-grid logic.
+ * Owns value and popup open state. Derives anatomy with trigger and portalled calendar.
+ *
+ * Supports controlled (value + onValueChange, open + onOpenChange) or uncontrolled (defaultValue, defaultOpen).
  *
- * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
- * uncontrolled (`defaultValue`, `defaultOpen`).
+ * With name: submits YYYY-MM-DD strings (local time, like input type=date).
+ * required reports valueMissing while nothing selected (range anchored on start = unselected).
  *
- * With a `name`, the selection is submitted by the surrounding `<form>` as
- * local-time `YYYY-MM-DD` strings, exactly like `<input type="date">` — one
- * entry in `single` mode, one entry per date in `multiple`, and start then end
- * in `range`. `required` reports `valueMissing` while nothing is selected; a
- * range still anchored on its start counts as nothing selected — reported
- * through the forwarded ref's `checkValidity()`/`reportValidity()`. A form
- * reset restores `defaultValue`.
+ * @example
+ * ```tsx
+ * <DatePicker value={date} onValueChange={setDate} />
+ * ```
  *
  * @example
  * ```tsx
- * <DatePicker defaultValue={new Date()}>
- *   <DatePickerTrigger>Pick a date</DatePickerTrigger>
- *   <DatePickerPortal>
- *     <DatePickerContent>
- *       <DatePickerCalendar />
- *       <DatePickerClose>Close</DatePickerClose>
- *     </DatePickerContent>
- *   </DatePickerPortal>
- * </DatePicker>
+ * <DatePicker selectionMode="range" value={range} onValueChange={setRange} />
  * ```
  */
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/date-picker/DatePicker.js

@@ -1 +1 @@
-import*as l from"react";import{emptySelection as f,isDateRange as G,toISODateString as J}from"../calendar/Calendar.js";import{createSafeContext as Q}from"../utils/createContext.js";import{formValidityHandle as U,useFormReset as X}from"../utils/formControl.js";import{HiddenInput as H}from"../utils/hiddenInput.js";import{PopperRoot as Y}from"../utils/popper.js";import{useControllableState as v}from"../utils/useControllableState.js";import{useOpenChangeComplete as Z}from"../utils/useOpenChangeComplete.js";import{jsx as C,jsxs as te}from"react/jsx-runtime";var j=()=>{};function I(e){return e?Array.isArray(e)?e:G(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}var[ee,n]=Q("DatePicker"),V=l.forwardRef(function({children:o,selectionMode:t="single",granularity:r="day",value:i,defaultValue:p,onValueChange:c,open:d,defaultOpen:a=!1,onOpenChange:m,onOpenChangeComplete:s,name:P,required:y=!1,disabled:u=!1},_){let R=l.useRef(null),h=l.useRef(null),k=l.useRef(null),[D=f(t),x]=v({prop:i,defaultProp:p??f(t),onChange:g=>c?.(g??f(t))}),[b=!1,z]=v({prop:d,defaultProp:a,onChange:m});return Z(b,h,s),l.useImperativeHandle(_,()=>U(k),[]),X(R,()=>x(p??f(t))),C(Y,{children:te(ee,{triggerRef:R,contentRef:h,contentId:l.useId(),value:D,selectionMode:t,granularity:r,onValueChange:x,open:u?!1:b,onOpenChange:u?j:z,disabled:u,children:[o,P&&(I(D).length===0?C(H,{ref:k,type:"text",name:P,value:"",required:y}):I(D).map((g,T)=>C(H,{ref:T===0?k:void 0,type:"text",name:P,value:J(g),required:y},T)))]})})});V.displayName="DatePicker";import*as N from"react";import{Calendar as re,isDateRange as oe}from"../calendar/Calendar.js";import{skdxPart as ae}from"../utils/part.js";import{jsx as ie}from"react/jsx-runtime";function ne(e){return Array.isArray(e)?!1:oe(e)?e.end!==null:e!==null}var O=N.forwardRef((e,o)=>{let t=n("DatePickerCalendar");return ie(re,{...e,value:t.value,selectionMode:t.selectionMode,...ae("date-picker","calendar",e.className),ref:o,onValueChange:r=>{t.onValueChange(r),t.granularity==="day"&&ne(r)&&t.onOpenChange(!1)}})});O.displayName="DatePickerCalendar";import*as E from"react";import{skdxPart as se}from"../utils/part.js";import{composeEventHandlers as le,Primitive as pe}from"../utils/primitive.js";import{jsx as ce}from"react/jsx-runtime";var w=E.forwardRef((e,o)=>{let t=n("DatePickerClose");return ce(pe.button,{type:"button",...e,...se("date-picker","close",e.className),ref:o,onClick:le(e.onClick,()=>t.onOpenChange(!1))})});w.displayName="DatePickerClose";import*as F from"react";import{useComposedRefs as me}from"../utils/composeRefs.js";import{skdxPart as de}from"../utils/part.js";import{PopperContent as fe}from"../utils/popper.js";import{useDismiss as Pe}from"../utils/useDismiss.js";import{jsx as ue}from"react/jsx-runtime";var M=F.forwardRef(({forceMount:e,onEscapeKeyDown:o,onPointerDownOutside:t,onFocusOutside:r,onInteractOutside:i,sideOffset:p=4,...c},d)=>{let a=n("DatePickerContent"),m=me(d,a.contentRef);return Pe({enabled:a.open,onEscapeKeyDown:s=>{o?.(s),s.defaultPrevented||(a.onOpenChange(!1),a.triggerRef.current?.focus())},onInteractOutside:i,onPointerDownOutside:s=>{t?.(s),s.defaultPrevented||a.onOpenChange(!1)},onFocusOutside:s=>{r?.(s),s.defaultPrevented||a.onOpenChange(!1)}},[a.contentRef,a.triggerRef]),e||a.open?ue(fe,{id:a.contentId,"data-state":a.open?"open":"closed",sideOffset:p,...c,...de("date-picker","content",c.className),ref:m}):null});M.displayName="DatePickerContent";import*as S from"react";import{DateField as ke}from"../date-field/DateField.js";import{skdxPart as De}from"../utils/part.js";import{jsx as ge}from"react/jsx-runtime";var L=S.forwardRef((e,o)=>{let t=n("DatePickerInput");return t.selectionMode!=="single"?null:ge(ke,{...e,granularity:t.granularity,value:t.value,onValueChange:r=>t.onValueChange(r),...De("date-picker","input",e.className),ref:o})});L.displayName="DatePickerInput";import{Portal as Ce}from"../utils/portal.js";import{jsx as ye}from"react/jsx-runtime";var A=({forceMount:e,children:o,...t})=>{let r=n("DatePickerPortal");return e||r.open?ye(Ce,{...t,children:o}):null};A.displayName="DatePickerPortal";import*as $ from"react";import{TimeField as Re}from"../time-field/TimeField.js";import{skdxPart as he}from"../utils/part.js";import{jsx as be}from"react/jsx-runtime";function xe(e,o){if(!e)return null;let t=i=>String(i).padStart(2,"0"),r=`${t(e.getHours())}:${t(e.getMinutes())}`;return o?`${r}:${t(e.getSeconds())}`:r}var B=$.forwardRef((e,o)=>{let t=n("DatePickerTimeField"),{granularity:r}=t;if(r==="day"||t.selectionMode!=="single")return null;let i=t.value??null;return be(Re,{...e,granularity:r,value:xe(i,r==="second"),onValueChange:p=>{if(!i||p===null)return;let[c=0,d=0,a=0]=p.split(":").map(Number),m=new Date(i);m.setHours(c,d,a,0),t.onValueChange(m)},...he("date-picker","time-field",e.className),ref:o})});B.displayName="DatePickerTimeField";import*as K from"react";import{useComposedRefs as Te}from"../utils/composeRefs.js";import{skdxPart as He}from"../utils/part.js";import{PopperAnchor as ve}from"../utils/popper.js";import{composeEventHandlers as Ie,Primitive as Ve}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var W=K.forwardRef((e,o)=>{let t=n("DatePickerTrigger"),r=Te(o,t.triggerRef),i=t.disabled||e.disabled;return q(ve,{asChild:!0,children:q(Ve.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":i?"":void 0,...e,...He("date-picker","trigger",e.className),disabled:i,ref:r,onClick:Ie(e.onClick,()=>{i||t.onOpenChange(!t.open)})})})});W.displayName="DatePickerTrigger";export{V as DatePicker,O as DatePickerCalendar,w as DatePickerClose,M as DatePickerContent,L as DatePickerInput,A as DatePickerPortal,B as DatePickerTimeField,W as DatePickerTrigger};
+import*as s from"react";import{emptySelection as R,isDateRange as qe,toISODateString as _e}from"../calendar/Calendar.js";import{createSafeContext as Ke}from"../utils/createContext.js";import{toCalendarValue as Y}from"../utils/dateValue.js";import{formValidityHandle as ze,useFormReset as Ge}from"../utils/formControl.js";import{HiddenInput as Z}from"../utils/hiddenInput.js";import{PopperRoot as Je}from"../utils/popper.js";import{useControllableState as j}from"../utils/useControllableState.js";import{useOpenChangeComplete as Qe}from"../utils/useOpenChangeComplete.js";import{isDateRange as Fe}from"../calendar/Calendar.js";import*as B from"react";import{Calendar as de,isDateRange as pe}from"../calendar/Calendar.js";import{skdxPart as me}from"../utils/part.js";import{jsx as fe}from"react/jsx-runtime";function ue(e){return Array.isArray(e)?!1:pe(e)?e.end!==null:e!==null}var E=B.forwardRef((e,r)=>{let t=i("DatePickerCalendar");return fe(de,{...e,readOnly:e.readOnly||t.readOnly,value:t.value,selectionMode:t.selectionMode,...me("date-picker","calendar",e.className),ref:r,onValueChange:a=>{t.onValueChange(a),t.closeOnSelect&&t.granularity==="day"&&ue(a)&&t.onOpenChange(!1)}})});E.displayName="DatePickerCalendar";import*as u from"react";import{anchorOf as ge,toISODateString as De}from"../calendar/Calendar.js";import{useComposedRefs as ye}from"../utils/composeRefs.js";import{skdxPart as he}from"../utils/part.js";import{PopperContent as Ce}from"../utils/popper.js";import{useDismiss as Re}from"../utils/useDismiss.js";import{autoFocusEvent as z}from"../utils/useFocusTrap.js";import{toISODateString as Pe}from"../calendar/Calendar.js";import{TABBABLE_SELECTOR as ke}from"../utils/tabbable.js";function q(e,r){return e.querySelector(`[data-skdx-calendar-cell="${r}"]:not([disabled])`)}function _(e){let r=document.activeElement;return r!==null&&r!==document.body&&e.contains(r)}function K(e,r){let t=[r?q(e,r):null,q(e,Pe(new Date)),e.querySelector('[role="gridcell"][tabindex="0"]'),e.querySelector(ke)];for(let a of t)if(a&&(a.focus({preventScroll:!0}),_(e)))return document.activeElement;return e.hasAttribute("tabindex")||(e.tabIndex=-1),e.focus({preventScroll:!0}),_(e)?e:null}import{jsx as be}from"react/jsx-runtime";var S=u.forwardRef(({forceMount:e,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:a,onInteractOutside:n,onOpenAutoFocus:c,onCloseAutoFocus:d,sideOffset:k=4,...p},f)=>{let o=i("DatePickerContent"),g=ye(f,o.contentRef),D=ge(o.value),y=D?De(D):null,m=u.useRef({onOpenAutoFocus:c,onCloseAutoFocus:d,anchorISO:y});u.useEffect(()=>{m.current={onOpenAutoFocus:c,onCloseAutoFocus:d,anchorISO:y}});let P=u.useRef(!1);return u.useEffect(()=>{if(!o.open)return;let l=o.contentRef.current;if(!l)return;P.current=!1;let x=requestAnimationFrame(()=>{l.contains(document.activeElement)||z("open-auto-focus",m.current.onOpenAutoFocus)&&K(l,m.current.anchorISO)});return()=>{cancelAnimationFrame(x),!P.current&&z("close-auto-focus",m.current.onCloseAutoFocus)&&o.triggerRef.current?.focus({preventScroll:!0})}},[o.open,o.contentRef,o.triggerRef]),Re({enabled:o.open,onEscapeKeyDown:l=>{r?.(l),l.defaultPrevented||o.onOpenChange(!1)},onInteractOutside:n,onPointerDownOutside:l=>{t?.(l),!l.defaultPrevented&&(P.current=!0,o.onOpenChange(!1))},onFocusOutside:l=>{a?.(l),!l.defaultPrevented&&(P.current=!0,o.onOpenChange(!1))}},[o.contentRef,o.triggerRef]),e||o.open?be(Ce,{role:"dialog","aria-labelledby":p["aria-label"]||p["aria-labelledby"]?void 0:o.triggerId,id:o.contentId,"data-state":o.open?"open":"closed","data-invalid":o.invalid?"":void 0,"data-readonly":o.readOnly?"":void 0,sideOffset:k,...p,...he("date-picker","content",p.className),ref:g}):null});S.displayName="DatePickerContent";import*as G from"react";import{DateField as xe}from"../date-field/DateField.js";import{skdxPart as Oe}from"../utils/part.js";import{jsx as Te}from"react/jsx-runtime";var H=G.forwardRef((e,r)=>{let t=i("DatePickerInput");return t.selectionMode!=="single"?null:Te(xe,{...e,readOnly:e.readOnly||t.readOnly,granularity:t.granularity,value:t.value,onValueChange:a=>t.onValueChange(a),...Oe("date-picker","input",e.className),ref:r})});H.displayName="DatePickerInput";import{Portal as ve}from"../utils/portal.js";import{jsx as Ee}from"react/jsx-runtime";var w=({forceMount:e,children:r,...t})=>{let a=i("DatePickerPortal");return e||a.open?Ee(ve,{...t,children:r}):null};w.displayName="DatePickerPortal";import*as J from"react";import{TimeField as Se}from"../time-field/TimeField.js";import{skdxPart as He}from"../utils/part.js";import{jsx as Le}from"react/jsx-runtime";function we(e,r){if(!e)return null;let t=n=>String(n).padStart(2,"0"),a=`${t(e.getHours())}:${t(e.getMinutes())}`;return r?`${a}:${t(e.getSeconds())}`:a}var L=J.forwardRef((e,r)=>{let t=i("DatePickerTimeField"),{granularity:a}=t;if(a==="day"||t.selectionMode!=="single")return null;let n=t.value??null;return Le(Se,{...e,readOnly:e.readOnly||t.readOnly,granularity:a,value:we(n,a==="second"),onValueChange:c=>{if(!n||c===null)return;let[d=0,k=0,p=0]=c.split(":").map(Number),f=new Date(n);f.setHours(d,k,p,0),t.onValueChange(f)},...He("date-picker","time-field",e.className),ref:r})});L.displayName="DatePickerTimeField";import*as U from"react";import{useComposedRefs as Ie}from"../utils/composeRefs.js";import{skdxPart as Ve}from"../utils/part.js";import{PopperAnchor as Me}from"../utils/popper.js";import{composeEventHandlers as Ae,Primitive as Ne}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var I=U.forwardRef((e,r)=>{let t=i("DatePickerTrigger"),a=Ie(r,t.triggerRef),n=t.disabled||e.disabled;return Q(Me,{asChild:!0,children:Q(Ne.button,{type:"button",id:t.triggerId,"aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":n?"":void 0,"aria-invalid":t.invalid?!0:void 0,"data-invalid":t.invalid?"":void 0,...e,...Ve("date-picker","trigger",e.className),disabled:n,ref:a,onClick:Ae(e.onClick,()=>{n||t.onOpenChange(!t.open)})})})});I.displayName="DatePickerTrigger";import{Fragment as Be,jsx as h,jsxs as W}from"react/jsx-runtime";var C=(e,r,t)=>e.toLocaleString(r,{dateStyle:"medium",...t?{timeStyle:"short"}:{}});function $e(e,r,t){if(!e)return null;if(Array.isArray(e))return e.length?e.map(a=>C(a,r,t)).join(", "):null;if(Fe(e)){let a=C(e.start,r,t);return e.end?`${a} \u2013 ${C(e.end,r,t)}`:a}return C(e,r,t)}var X=({placeholder:e,locale:r,showInput:t,passThrough:a})=>{let{value:n,granularity:c}=i("DatePickerAnatomy"),d=$e(n,r,c!=="day");return W(Be,{children:[h(I,{...a,children:d??e}),h(w,{children:W(S,{...a?.id?{"aria-labelledby":a.id}:{},children:[t?h(H,{}):null,h(E,{}),h(L,{})]})})]})};import{jsx as b,jsxs as Xe}from"react/jsx-runtime";var Ue=()=>{};function ee(e){return e?Array.isArray(e)?e:qe(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}var[We,i]=Ke("DatePicker"),te=s.forwardRef(function({children:r,selectionMode:t="single",granularity:a="day",value:n,defaultValue:c,onValueChange:d,open:k,defaultOpen:p=!1,onOpenChange:f,onOpenChangeComplete:o,name:g,form:D,required:y=!1,disabled:m=!1,closeOnSelect:P=!0,readOnly:l=!1,invalid:x=!1,placeholder:ae="Select date",locale:oe,showInput:ne=!1,...ie},le){let V=s.useRef(null),M=s.useRef(null),O=s.useRef(null),se=s.useMemo(()=>Y(n,t,"value"),[n,t]),A=s.useMemo(()=>Y(c,t,"defaultValue"),[c,t]),[T=R(t),N]=j({prop:se,defaultProp:A??R(t),onChange:v=>d?.(v??R(t))}),[F=!1,ce]=j({prop:k,defaultProp:p,onChange:f});return Qe(F,M,o),s.useImperativeHandle(le,()=>ze(O),[]),Ge(V,()=>N(A??R(t))),b(Je,{children:Xe(We,{triggerRef:V,contentRef:M,contentId:s.useId(),triggerId:s.useId(),value:T,selectionMode:t,granularity:a,closeOnSelect:P,readOnly:l,invalid:x,onValueChange:N,open:m?!1:F,onOpenChange:m?Ue:ce,disabled:m,children:[r??b(X,{placeholder:ae,locale:oe,showInput:ne,passThrough:ie}),g&&(ee(T).length===0?b(Z,{ref:O,type:"text",name:g,value:"",required:y,form:D}):ee(T).map((v,$)=>b(Z,{ref:$===0?O:void 0,type:"text",name:g,value:_e(v),required:y,form:D},$)))]})})});te.displayName="DatePicker";import*as re from"react";import{skdxPart as Ye}from"../utils/part.js";import{composeEventHandlers as Ze,Primitive as je}from"../utils/primitive.js";import{jsx as tt}from"react/jsx-runtime";var et=re.forwardRef((e,r)=>{let t=i("DatePickerClose");return tt(je.button,{type:"button",...e,...Ye("date-picker","close",e.className),ref:r,onClick:Ze(e.onClick,()=>t.onOpenChange(!1))})});et.displayName="DatePickerClose";export{te as DatePicker,E as DatePickerCalendar,et as DatePickerClose,S as DatePickerContent,H as DatePickerInput,w as DatePickerPortal,We as DatePickerProvider,L as DatePickerTimeField,I as DatePickerTrigger,i as useDatePickerContext};

package/dist/date-picker/DatePickerAnatomy.d.cts

@@ -0,0 +1,22 @@
+import type { CalendarValue } from '../calendar/types.cjs';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+/**
+ * @internal What the default trigger says: the selection in the reader's
+ * locale, or `null` when there is nothing selected and the placeholder should
+ * show instead. Range renders `start – end` with an en dash, and an anchored
+ * range shows only its start, because that is all the user has chosen.
+ */
+export declare function formatSelection(value: CalendarValue, locale: string | undefined, withTime: boolean): string | null;
+/**
+ * Default {@link DatePicker} anatomy (when no children): a trigger showing the
+ * current selection, portal with input, calendar, and time components. Both
+ * input components render nothing outside their modes, so are safe to include.
+ *
+ * @internal
+ */
+export declare const DatePickerAnatomy: ({ placeholder, locale, showInput, passThrough, }: {
+    placeholder: string;
+    locale: string | undefined;
+    showInput: boolean;
+    passThrough?: PassThroughProps;
+}) => import("react").JSX.Element;

package/dist/date-picker/DatePickerAnatomy.d.ts

@@ -0,0 +1,22 @@
+import type { CalendarValue } from '../calendar/types.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
+/**
+ * @internal What the default trigger says: the selection in the reader's
+ * locale, or `null` when there is nothing selected and the placeholder should
+ * show instead. Range renders `start – end` with an en dash, and an anchored
+ * range shows only its start, because that is all the user has chosen.
+ */
+export declare function formatSelection(value: CalendarValue, locale: string | undefined, withTime: boolean): string | null;
+/**
+ * Default {@link DatePicker} anatomy (when no children): a trigger showing the
+ * current selection, portal with input, calendar, and time components. Both
+ * input components render nothing outside their modes, so are safe to include.
+ *
+ * @internal
+ */
+export declare const DatePickerAnatomy: ({ placeholder, locale, showInput, passThrough, }: {
+    placeholder: string;
+    locale: string | undefined;
+    showInput: boolean;
+    passThrough?: PassThroughProps;
+}) => import("react").JSX.Element;

package/dist/date-picker/DatePickerCalendar.d.cts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { DatePickerCalendarProps } from './types.cjs';
 /**
- * The {@link Calendar} root (all its ARIA `grid` semantics and keyboard
- * navigation included), pre-wired to the {@link DatePicker}'s `value` and
- * `selectionMode`. Accepts every `CalendarProps` prop except those three,
- * which the date picker controls itself — compose it with the same
- * `Calendar*` header/grid/cell parts you'd use with a standalone `Calendar`.
- *
- * The popup closes only on a *complete* selection: right away in `single`
- * mode, once the second date closes the range in `range` mode, and never in
- * `multiple` mode, where the user keeps picking until they dismiss it.
+ * The {@link Calendar} root pre-wired to {@link DatePicker}'s `value` and
+ * `selectionMode`. Popup closes only on complete selection (single: always,
+ * range: when end is set, multiple: never).
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerCalendar.d.ts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { DatePickerCalendarProps } from './types.js';
 /**
- * The {@link Calendar} root (all its ARIA `grid` semantics and keyboard
- * navigation included), pre-wired to the {@link DatePicker}'s `value` and
- * `selectionMode`. Accepts every `CalendarProps` prop except those three,
- * which the date picker controls itself — compose it with the same
- * `Calendar*` header/grid/cell parts you'd use with a standalone `Calendar`.
- *
- * The popup closes only on a *complete* selection: right away in `single`
- * mode, once the second date closes the range in `range` mode, and never in
- * `multiple` mode, where the user keeps picking until they dismiss it.
+ * The {@link Calendar} root pre-wired to {@link DatePicker}'s `value` and
+ * `selectionMode`. Popup closes only on complete selection (single: always,
+ * range: when end is set, multiple: never).
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerContent.d.cts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { DatePickerContentProps } from './types.cjs';
 /**
- * Popup panel for a {@link DatePicker}, positioned relative to the trigger
- * via floating-ui (see {@link DatePickerContentProps}). Renders a `<div>`
- * with `data-state` and `data-side`/`data-align` from the popper. Closes on
- * Escape (returning focus to the trigger) and on an outside interaction —
- * pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps it open. Unmounts when closed unless
- * `forceMount` is set.
+ * Popup panel for {@link DatePicker}: `role="dialog"` positioned via floating-ui,
+ * named by `aria-labelledby` pointing at the trigger. Opening moves focus into Calendar
+ * (selected date, today, or roving tab stop). Closes on Escape/outside interaction.
+ * Dismissals inside the panel return focus to trigger; outside dismissals leave focus where it is.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerContent.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { DatePickerContentProps } from './types.js';
 /**
- * Popup panel for a {@link DatePicker}, positioned relative to the trigger
- * via floating-ui (see {@link DatePickerContentProps}). Renders a `<div>`
- * with `data-state` and `data-side`/`data-align` from the popper. Closes on
- * Escape (returning focus to the trigger) and on an outside interaction —
- * pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps it open. Unmounts when closed unless
- * `forceMount` is set.
+ * Popup panel for {@link DatePicker}: `role="dialog"` positioned via floating-ui,
+ * named by `aria-labelledby` pointing at the trigger. Opening moves focus into Calendar
+ * (selected date, today, or roving tab stop). Closes on Escape/outside interaction.
+ * Dismissals inside the panel return focus to trigger; outside dismissals leave focus where it is.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerInput.d.cts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { DatePickerInputProps } from './types.cjs';
 /**
- * The typed-entry half of a {@link DatePicker}: a {@link DateField} pre-wired
- * to the picker's `value` and `granularity`, so a date can be typed instead of
- * clicked without the two halves drifting apart. Editing a segment updates the
- * same selection the popup calendar reads, and picking a date in the calendar
- * re-seeds the segments.
+ * Typed-entry half of {{@link DatePicker} — {@link DateField} pre-wired so calendar and segments stay in sync.
  *
- * Only meaningful in `selectionMode="single"` — a segmented field cannot
- * express a range or a multi-selection, so it renders nothing in the other two
- * modes rather than silently editing the wrong date.
+ * Only renders in `selectionMode="single"` (segmented field cannot express range/multi-selection).
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerInput.d.ts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { DatePickerInputProps } from './types.js';
 /**
- * The typed-entry half of a {@link DatePicker}: a {@link DateField} pre-wired
- * to the picker's `value` and `granularity`, so a date can be typed instead of
- * clicked without the two halves drifting apart. Editing a segment updates the
- * same selection the popup calendar reads, and picking a date in the calendar
- * re-seeds the segments.
+ * Typed-entry half of {{@link DatePicker} — {@link DateField} pre-wired so calendar and segments stay in sync.
  *
- * Only meaningful in `selectionMode="single"` — a segmented field cannot
- * express a range or a multi-selection, so it renders nothing in the other two
- * modes rather than silently editing the wrong date.
+ * Only renders in `selectionMode="single"` (segmented field cannot express range/multi-selection).
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerPortal.d.cts

@@ -1,9 +1,7 @@
 import type { DatePickerPortalProps } from './types.cjs';
 /**
- * Teleports its children (typically {@link DatePickerContent}) to
- * `document.body` (or `container`, via `PortalProps`) while the
- * {@link DatePicker} is open, so the popup escapes clipping/overflow from
- * ancestors. Renders nothing while closed unless `forceMount` is set.
+ * Teleports its children to `document.body` or `container`, escaping
+ * clipping/overflow while open. Renders nothing while closed unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerPortal.d.ts

@@ -1,9 +1,7 @@
 import type { DatePickerPortalProps } from './types.js';
 /**
- * Teleports its children (typically {@link DatePickerContent}) to
- * `document.body` (or `container`, via `PortalProps`) while the
- * {@link DatePicker} is open, so the popup escapes clipping/overflow from
- * ancestors. Renders nothing while closed unless `forceMount` is set.
+ * Teleports its children to `document.body` or `container`, escaping
+ * clipping/overflow while open. Renders nothing while closed unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerTimeField.d.cts

@@ -1,14 +1,7 @@
 import * as React from 'react';
 import type { DatePickerTimeFieldProps } from './types.cjs';
 /**
- * The time half of a date-time {@link DatePicker}: a {@link TimeField} that
- * edits only the time-of-day of the picker's selected date, leaving the
- * calendar to own the day. Renders nothing until a date has been picked and
- * nothing at all in `granularity="day"` — a picker with no time granularity
- * has no time to edit.
- *
- * Only meaningful in `selectionMode="single"`, for the same reason as
- * {@link DatePickerInput}.
+ * Time-of-day editor paired with {@link DatePickerCalendar}. Renders nothing when no date is picked or in `granularity="day"`.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerTimeField.d.ts

@@ -1,14 +1,7 @@
 import * as React from 'react';
 import type { DatePickerTimeFieldProps } from './types.js';
 /**
- * The time half of a date-time {@link DatePicker}: a {@link TimeField} that
- * edits only the time-of-day of the picker's selected date, leaving the
- * calendar to own the day. Renders nothing until a date has been picked and
- * nothing at all in `granularity="day"` — a picker with no time granularity
- * has no time to edit.
- *
- * Only meaningful in `selectionMode="single"`, for the same reason as
- * {@link DatePickerInput}.
+ * Time-of-day editor paired with {@link DatePickerCalendar}. Renders nothing when no date is picked or in `granularity="day"`.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerTrigger.d.cts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { DatePickerTriggerProps } from './types.cjs';
 /**
- * Opens/closes the {@link DatePicker} popup on click, and doubles as the
- * popper anchor the popup positions against. Renders a
- * `<button type="button">` with `aria-haspopup="dialog"`, `aria-expanded`,
- * `aria-controls` pointing at the content, `data-state`, and `data-disabled`
- * while `disabled`.
+ * Opens/closes the popup on click, anchors it, and shows invalid state.
+ * Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`,
+ * `aria-invalid`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx

package/dist/date-picker/DatePickerTrigger.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { DatePickerTriggerProps } from './types.js';
 /**
- * Opens/closes the {@link DatePicker} popup on click, and doubles as the
- * popper anchor the popup positions against. Renders a
- * `<button type="button">` with `aria-haspopup="dialog"`, `aria-expanded`,
- * `aria-controls` pointing at the content, `data-state`, and `data-disabled`
- * while `disabled`.
+ * Opens/closes the popup on click, anchors it, and shows invalid state.
+ * Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`,
+ * `aria-invalid`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx

package/dist/date-picker/autoFocus.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Moves focus into an open DatePicker popup in order: selected date, else today,
+ * else cell holding grid's roving tab stop, else first tabbable, else panel itself.
+ *
+ * @param content the popup panel, already mounted and positioned
+ * @param selectedISO the anchor date as `YYYY-MM-DD`, or `null` when nothing is selected
+ * @returns the element that took focus, or `null` when nothing could
+ */
+export declare function focusDatePickerContent(content: HTMLElement, selectedISO: string | null): HTMLElement | null;

package/dist/date-picker/autoFocus.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Moves focus into an open DatePicker popup in order: selected date, else today,
+ * else cell holding grid's roving tab stop, else first tabbable, else panel itself.
+ *
+ * @param content the popup panel, already mounted and positioned
+ * @param selectedISO the anchor date as `YYYY-MM-DD`, or `null` when nothing is selected
+ * @returns the element that took focus, or `null` when nothing could
+ */
+export declare function focusDatePickerContent(content: HTMLElement, selectedISO: string | null): HTMLElement | null;

package/dist/date-picker/index.d.cts

@@ -1,9 +1,2 @@
 export { DatePicker } from './DatePicker.cjs';
-export { DatePickerCalendar } from './DatePickerCalendar.cjs';
-export { type DatePickerCalendarProps, type DatePickerCloseProps, type DatePickerContentProps, type DatePickerHandle, type DatePickerInputProps, type DatePickerPortalProps, type DatePickerProps, type DatePickerTimeFieldProps, type DatePickerTriggerProps, } from './types.cjs';
-export { DatePickerClose } from './DatePickerClose.cjs';
-export { DatePickerContent } from './DatePickerContent.cjs';
-export { DatePickerInput } from './DatePickerInput.cjs';
-export { DatePickerPortal } from './DatePickerPortal.cjs';
-export { DatePickerTimeField } from './DatePickerTimeField.cjs';
-export { DatePickerTrigger } from './DatePickerTrigger.cjs';
+export { type DatePickerHandle, type DatePickerProps } from './types.cjs';

package/dist/date-picker/index.d.ts

@@ -1,9 +1,2 @@
 export { DatePicker } from './DatePicker.js';
-export { DatePickerCalendar } from './DatePickerCalendar.js';
-export { type DatePickerCalendarProps, type DatePickerCloseProps, type DatePickerContentProps, type DatePickerHandle, type DatePickerInputProps, type DatePickerPortalProps, type DatePickerProps, type DatePickerTimeFieldProps, type DatePickerTriggerProps, } from './types.js';
-export { DatePickerClose } from './DatePickerClose.js';
-export { DatePickerContent } from './DatePickerContent.js';
-export { DatePickerInput } from './DatePickerInput.js';
-export { DatePickerPortal } from './DatePickerPortal.js';
-export { DatePickerTimeField } from './DatePickerTimeField.js';
-export { DatePickerTrigger } from './DatePickerTrigger.js';
+export { type DatePickerHandle, type DatePickerProps } from './types.js';

package/dist/date-picker/primitives.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Advanced primitives for `DatePicker` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker, DatePickerCalendar, DatePickerClose, DatePickerContent, DatePickerPortal, DatePickerTrigger } from '@skdx/react/primitives/date-picker';
+ *
+ * <DatePicker value={date} onValueChange={setDate}>
+ *   <DatePickerTrigger>Pick a date</DatePickerTrigger>
+ *   <DatePickerPortal>
+ *     <DatePickerContent>
+ *       <DatePickerCalendar />
+ *       <DatePickerClose>Done</DatePickerClose>
+ *     </DatePickerContent>
+ *   </DatePickerPortal>
+ * </DatePicker>
+ * ```
+ */
+export { DatePicker } from './DatePicker.cjs';
+export { DatePickerCalendar } from './DatePickerCalendar.cjs';
+export { DatePickerClose } from './DatePickerClose.cjs';
+export { DatePickerContent } from './DatePickerContent.cjs';
+export { DatePickerInput } from './DatePickerInput.cjs';
+export { DatePickerPortal } from './DatePickerPortal.cjs';
+export { DatePickerTimeField } from './DatePickerTimeField.cjs';
+export { DatePickerTrigger } from './DatePickerTrigger.cjs';
+export type { DatePickerCalendarProps, DatePickerCloseProps, DatePickerContentProps, DatePickerHandle, DatePickerInputProps, DatePickerPortalProps, DatePickerProps, DatePickerTimeFieldProps, DatePickerTriggerProps, } from './types.cjs';