@skdx/react 0.26.0

package/dist/date-field/DateField.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { DateFieldProps } from './types.cjs';
+/**
+ * Segmented keyboard entry of a date — the typed counterpart of `Calendar`,
+ * and the typed-input part of `DatePicker`. Renders a `role="group"` holding
+ * one `role="spinbutton"` per segment, interleaved with the locale's own
+ * separators: both the segment order and those separators come from
+ * `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
+ * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
+ *
+ * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
+ * Left/Right move between segments, digits type with roll-over — typing `1`
+ * then `5` into a month gives `05`, not a rejected keystroke — and
+ * Backspace/Delete clear a segment back to its placeholder. `onValueChange`
+ * only ever fires with a complete date or `null`, never a half-typed one.
+ *
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
+ * ```
+ */
+export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/date-field/DateField.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { DateFieldProps } from './types.js';
+/**
+ * Segmented keyboard entry of a date — the typed counterpart of `Calendar`,
+ * and the typed-input part of `DatePicker`. Renders a `role="group"` holding
+ * one `role="spinbutton"` per segment, interleaved with the locale's own
+ * separators: both the segment order and those separators come from
+ * `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
+ * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
+ *
+ * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
+ * Left/Right move between segments, digits type with roll-over — typing `1`
+ * then `5` into a month gives `05`, not a rejected keystroke — and
+ * Backspace/Delete clear a segment back to its placeholder. `onValueChange`
+ * only ever fires with a complete date or `null`, never a half-typed one.
+ *
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
+ * ```
+ */
+export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/date-field/DateField.js

@@ -0,0 +1 @@
+import*as o from"react";import{buildSegments as h,dateToFormValue as v,dateToValues as i,isComplete as S,resolveHourCycle as V,valuesToDate as T}from"../utils/dateSegments.js";import{skdxPart as R}from"../utils/part.js";import{SegmentedField as P}from"../utils/segmentedField.js";import{useControllableState as k}from"../utils/useControllableState.js";import{jsx as x}from"react/jsx-runtime";var c=o.forwardRef(({value:D,defaultValue:s,onValueChange:g,granularity:r="day",hourCycle:y,locale:m,...d},F)=>{let t=V(m,y),[a=null,p]=k({prop:D,defaultProp:s??null,onChange:g}),[C,u]=o.useState(()=>a?i(a,t):{}),f=e=>S(h({kind:"date",granularity:r,locale:m,hourCycle:t,values:e}))?T(e,t):null,n=a?a.getTime():null;return o.useEffect(()=>{u(e=>{let l=f(e);return n===null?l===null?e:{}:l!==null&&l.getTime()===n?e:i(new Date(n),t)})},[n,t,r,m]),x(P,{family:"date-field",kind:"date",granularity:r,locale:m,hourCycle:t,values:C,onValuesChange:e=>{u(e);let l=f(e);(l?l.getTime():null)!==n&&p(l)},formValue:a?v(a,r):null,onFormReset:()=>{p(s??null),u(s?i(s,t):{})},...d,...R("date-field","root",d.className),ref:F})});c.displayName="DateField";export{c as DateField};

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

@@ -0,0 +1,2 @@
+export { DateField } from './DateField.cjs';
+export type { DateFieldProps, DateFieldHandle } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { DateField } from './DateField.js';
+export type { DateFieldProps, DateFieldHandle } from './types.js';

package/dist/date-field/types.d.cts

@@ -0,0 +1,83 @@
+import type { Granularity, HourCycle } from '../utils/dateSegments.cjs';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { SegmentedLabelProps } from '../utils/segmentedField.cjs';
+/** Props for the {@link DateField} root. */
+export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'>, SegmentedLabelProps {
+    /**
+     * Current date, for controlled usage. Pair with `onValueChange`. `null` while
+     * any segment is still untyped.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: Date | null;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default undefined — every segment starts on its placeholder.
+     */
+    defaultValue?: Date | null;
+    /**
+     * Fires with the new `Date` once every segment is filled, and with `null` as
+     * soon as one is cleared. Never fires with a half-typed date.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: Date | null) => void;
+    /**
+     * How far down the field is editable. `'day'` is date-only; anything past it
+     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
+     * equivalent.
+     * @default 'day'
+     */
+    granularity?: Granularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
+     * only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
+     * @default undefined — the runtime's default locale.
+     */
+    locale?: string;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name. With it the date submits as `YYYY-MM-DD`, or
+     * `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field
+     * submits nothing.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+/**
+ * What {@link DateField}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods, which answer off the hidden input carrying
+ * the `YYYY-MM-DD` wire value. Type your ref as this to call them —
+ * `React.useRef<DateFieldHandle>(null)`.
+ */
+export type DateFieldHandle = HTMLDivElement & FormValidityHandle;

package/dist/date-field/types.d.ts

@@ -0,0 +1,83 @@
+import type { Granularity, HourCycle } from '../utils/dateSegments.js';
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { SegmentedLabelProps } from '../utils/segmentedField.js';
+/** Props for the {@link DateField} root. */
+export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'>, SegmentedLabelProps {
+    /**
+     * Current date, for controlled usage. Pair with `onValueChange`. `null` while
+     * any segment is still untyped.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: Date | null;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default undefined — every segment starts on its placeholder.
+     */
+    defaultValue?: Date | null;
+    /**
+     * Fires with the new `Date` once every segment is filled, and with `null` as
+     * soon as one is cleared. Never fires with a half-typed date.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: Date | null) => void;
+    /**
+     * How far down the field is editable. `'day'` is date-only; anything past it
+     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
+     * equivalent.
+     * @default 'day'
+     */
+    granularity?: Granularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
+     * only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
+     * @default undefined — the runtime's default locale.
+     */
+    locale?: string;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name. With it the date submits as `YYYY-MM-DD`, or
+     * `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field
+     * submits nothing.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+/**
+ * What {@link DateField}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods, which answer off the hidden input carrying
+ * the `YYYY-MM-DD` wire value. Type your ref as this to call them —
+ * `React.useRef<DateFieldHandle>(null)`.
+ */
+export type DateFieldHandle = HTMLDivElement & FormValidityHandle;

package/dist/date-picker/DatePicker.cjs

@@ -0,0 +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});

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

@@ -0,0 +1,65 @@
+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.
+ */
+/**
+ * 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.
+ *
+ * @internal
+ */
+export declare const DatePickerProvider: {
+    (props: DatePickerContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
+ * uncontrolled (`defaultValue`, `defaultOpen`).
+ *
+ * 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 defaultValue={new Date()}>
+ *   <DatePickerTrigger>Pick a date</DatePickerTrigger>
+ *   <DatePickerPortal>
+ *     <DatePickerContent>
+ *       <DatePickerCalendar />
+ *       <DatePickerClose>Close</DatePickerClose>
+ *     </DatePickerContent>
+ *   </DatePickerPortal>
+ * </DatePicker>
+ * ```
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

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

@@ -0,0 +1,65 @@
+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.
+ */
+/**
+ * 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.
+ *
+ * @internal
+ */
+export declare const DatePickerProvider: {
+    (props: DatePickerContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
+ * uncontrolled (`defaultValue`, `defaultOpen`).
+ *
+ * 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 defaultValue={new Date()}>
+ *   <DatePickerTrigger>Pick a date</DatePickerTrigger>
+ *   <DatePickerPortal>
+ *     <DatePickerContent>
+ *       <DatePickerCalendar />
+ *       <DatePickerClose>Close</DatePickerClose>
+ *     </DatePickerContent>
+ *   </DatePickerPortal>
+ * </DatePicker>
+ * ```
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/date-picker/DatePicker.js

@@ -0,0 +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};

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

@@ -0,0 +1,39 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerContent>
+ *   <DatePickerCalendar>
+ *     <CalendarHeader>
+ *       <CalendarPreviousButton>‹</CalendarPreviousButton>
+ *       <CalendarHeading />
+ *       <CalendarNextButton>›</CalendarNextButton>
+ *     </CalendarHeader>
+ *     <CalendarGrid>
+ *       <CalendarGridHead />
+ *       <CalendarGridBody>
+ *         {getVisibleWeeks(month).map((week, i) => (
+ *           <CalendarRow key={i}>
+ *             {week.map(({ date }) => (
+ *               <CalendarCell date={date} key={date.toISOString()} />
+ *             ))}
+ *           </CalendarRow>
+ *         ))}
+ *       </CalendarGridBody>
+ *     </CalendarGrid>
+ *   </DatePickerCalendar>
+ * </DatePickerContent>
+ * ```
+ */
+export declare const DatePickerCalendar: React.ForwardRefExoticComponent<Omit<DatePickerCalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,39 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerContent>
+ *   <DatePickerCalendar>
+ *     <CalendarHeader>
+ *       <CalendarPreviousButton>‹</CalendarPreviousButton>
+ *       <CalendarHeading />
+ *       <CalendarNextButton>›</CalendarNextButton>
+ *     </CalendarHeader>
+ *     <CalendarGrid>
+ *       <CalendarGridHead />
+ *       <CalendarGridBody>
+ *         {getVisibleWeeks(month).map((week, i) => (
+ *           <CalendarRow key={i}>
+ *             {week.map(({ date }) => (
+ *               <CalendarCell date={date} key={date.toISOString()} />
+ *             ))}
+ *           </CalendarRow>
+ *         ))}
+ *       </CalendarGridBody>
+ *     </CalendarGrid>
+ *   </DatePickerCalendar>
+ * </DatePickerContent>
+ * ```
+ */
+export declare const DatePickerCalendar: React.ForwardRefExoticComponent<Omit<DatePickerCalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DatePickerCloseProps } from './types.cjs';
+/**
+ * Closes the {@link DatePicker} popup on click without changing the
+ * selected date. Renders a `<button type="button">`.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerContent>
+ *   <DatePickerCalendar />
+ *   <DatePickerClose>Close</DatePickerClose>
+ * </DatePickerContent>
+ * ```
+ */
+export declare const DatePickerClose: React.ForwardRefExoticComponent<Omit<DatePickerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DatePickerCloseProps } from './types.js';
+/**
+ * Closes the {@link DatePicker} popup on click without changing the
+ * selected date. Renders a `<button type="button">`.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerContent>
+ *   <DatePickerCalendar />
+ *   <DatePickerClose>Close</DatePickerClose>
+ * </DatePickerContent>
+ * ```
+ */
+export declare const DatePickerClose: React.ForwardRefExoticComponent<Omit<DatePickerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerPortal>
+ *   <DatePickerContent sideOffset={4}>
+ *     <DatePickerCalendar />
+ *   </DatePickerContent>
+ * </DatePickerPortal>
+ * ```
+ */
+export declare const DatePickerContent: React.ForwardRefExoticComponent<Omit<DatePickerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerPortal>
+ *   <DatePickerContent sideOffset={4}>
+ *     <DatePickerCalendar />
+ *   </DatePickerContent>
+ * </DatePickerPortal>
+ * ```
+ */
+export declare const DatePickerContent: React.ForwardRefExoticComponent<Omit<DatePickerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker granularity="minute">
+ *   <DatePickerInput aria-label="Departure" />
+ *   <DatePickerTrigger>Pick</DatePickerTrigger>
+ *   …
+ * </DatePicker>
+ * ```
+ */
+export declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker granularity="minute">
+ *   <DatePickerInput aria-label="Departure" />
+ *   <DatePickerTrigger>Pick</DatePickerTrigger>
+ *   …
+ * </DatePicker>
+ * ```
+ */
+export declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerPortal>
+ *   <DatePickerContent>
+ *     <DatePickerCalendar />
+ *   </DatePickerContent>
+ * </DatePickerPortal>
+ * ```
+ */
+export declare const DatePickerPortal: {
+    ({ forceMount, children, ...props }: DatePickerPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1,20 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerPortal>
+ *   <DatePickerContent>
+ *     <DatePickerCalendar />
+ *   </DatePickerContent>
+ * </DatePickerPortal>
+ * ```
+ */
+export declare const DatePickerPortal: {
+    ({ forceMount, children, ...props }: DatePickerPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};