@skdx/react 0.26.0 → 0.28.0

package/dist/data-list/DataList.d.cts

@@ -1,26 +1,23 @@
 import * as React from 'react';
 import type { DataListProps } from './types.cjs';
 /**
- * Root of a key/value list. Renders a real `<dl>`, so every
- * {@link DataListLabel} (`<dt>`) is associated with the
- * {@link DataListValue} (`<dd>`) that follows it — the association assistive
- * technology reads, and the one a `<div>`-based "definition grid" throws away.
+ * Root of a key/value list: renders real `<dl>`, so `{@link DataListLabel}` (`<dt>`)
+ * associates with following `{@link DataListValue}` (`<dd>`), preserving semantics.
  *
- * The only prop is `orientation`, and it is emitted as `data-orientation`
- * and nothing more: this library ships no layout CSS, so the pairs are laid
- * out entirely by your stylesheet selecting on that attribute.
- *
- * Behaviourless by design — there is no state, no context and no keyboard
- * interaction here. The value of this family is the markup it guarantees.
+ * `orientation` emits as `data-orientation` for your stylesheet to layout pairs.
+ * To name the list, add `role="group"` and `aria-label` (bare `<dl>` has no ARIA role).
  *
  * @example
  * ```tsx
- * <DataList orientation="horizontal">
- *   <DataListItem>
- *     <DataListLabel>Status</DataListLabel>
- *     <DataListValue>Active</DataListValue>
- *   </DataListItem>
- * </DataList>
+ * <DataList
+ *   orientation="horizontal"
+ *   role="group"
+ *   aria-label="Server details"
+ *   items={[
+ *     { label: 'Status', value: 'Active' },
+ *     { label: 'Region', value: 'eu-west-1' },
+ *   ]}
+ * />
  * ```
  */
 export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDListElement>>;

package/dist/data-list/DataList.d.ts

@@ -1,26 +1,23 @@
 import * as React from 'react';
 import type { DataListProps } from './types.js';
 /**
- * Root of a key/value list. Renders a real `<dl>`, so every
- * {@link DataListLabel} (`<dt>`) is associated with the
- * {@link DataListValue} (`<dd>`) that follows it — the association assistive
- * technology reads, and the one a `<div>`-based "definition grid" throws away.
+ * Root of a key/value list: renders real `<dl>`, so `{@link DataListLabel}` (`<dt>`)
+ * associates with following `{@link DataListValue}` (`<dd>`), preserving semantics.
  *
- * The only prop is `orientation`, and it is emitted as `data-orientation`
- * and nothing more: this library ships no layout CSS, so the pairs are laid
- * out entirely by your stylesheet selecting on that attribute.
- *
- * Behaviourless by design — there is no state, no context and no keyboard
- * interaction here. The value of this family is the markup it guarantees.
+ * `orientation` emits as `data-orientation` for your stylesheet to layout pairs.
+ * To name the list, add `role="group"` and `aria-label` (bare `<dl>` has no ARIA role).
  *
  * @example
  * ```tsx
- * <DataList orientation="horizontal">
- *   <DataListItem>
- *     <DataListLabel>Status</DataListLabel>
- *     <DataListValue>Active</DataListValue>
- *   </DataListItem>
- * </DataList>
+ * <DataList
+ *   orientation="horizontal"
+ *   role="group"
+ *   aria-label="Server details"
+ *   items={[
+ *     { label: 'Status', value: 'Active' },
+ *     { label: 'Region', value: 'eu-west-1' },
+ *   ]}
+ * />
  * ```
  */
 export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDListElement>>;

package/dist/data-list/DataList.js

@@ -1 +1 @@
-import*as r from"react";import{skdxPart as f}from"../utils/part.js";import{Slot as D}from"../utils/slot.js";import{jsx as c}from"react/jsx-runtime";var d=r.forwardRef(({asChild:a,orientation:t="horizontal",...e},o)=>c(a?D:"dl",{"data-orientation":t,...e,...f("data-list","root",e.className),ref:o}));d.displayName="DataList";import*as s from"react";import{skdxPart as n}from"../utils/part.js";import{Primitive as y}from"../utils/primitive.js";import{jsx as P}from"react/jsx-runtime";var m=s.forwardRef((a,t)=>P(y.div,{...a,...n("data-list","item",a.className),ref:t}));m.displayName="DataListItem";import*as i from"react";import{skdxPart as R}from"../utils/part.js";import{Slot as x}from"../utils/slot.js";import{jsx as N}from"react/jsx-runtime";var p=i.forwardRef(({asChild:a,...t},e)=>N(a?x:"dt",{...t,...R("data-list","label",t.className),ref:e}));p.displayName="DataListLabel";import*as l from"react";import{skdxPart as b}from"../utils/part.js";import{Slot as E}from"../utils/slot.js";import{jsx as T}from"react/jsx-runtime";var L=l.forwardRef(({asChild:a,...t},e)=>T(a?E:"dd",{...t,...b("data-list","value",t.className),ref:e}));L.displayName="DataListValue";export{d as DataList,m as DataListItem,p as DataListLabel,L as DataListValue};
+import*as n from"react";import{skdxPart as k}from"../utils/part.js";import{Slot as v}from"../utils/slot.js";import*as l from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as P}from"../utils/primitive.js";import{jsx as x}from"react/jsx-runtime";var r=l.forwardRef((a,t)=>x(P.div,{...a,...R("data-list","item",a.className),ref:t}));r.displayName="DataListItem";import*as L from"react";import{skdxPart as E}from"../utils/part.js";import{Slot as b}from"../utils/slot.js";import{jsx as N}from"react/jsx-runtime";var m=L.forwardRef(({asChild:a,...t},o)=>N(a?b:"dt",{...t,...E("data-list","label",t.className),ref:o}));m.displayName="DataListLabel";import*as f from"react";import{skdxPart as C}from"../utils/part.js";import{Slot as T}from"../utils/slot.js";import{jsx as u}from"react/jsx-runtime";var s=f.forwardRef(({asChild:a,...t},o)=>u(a?T:"dd",{...t,...C("data-list","value",t.className),ref:o}));s.displayName="DataListValue";import{Fragment as V,jsx as i,jsxs as I}from"react/jsx-runtime";var D=({items:a=[]})=>i(V,{children:a.map((t,o)=>I(r,{children:[i(m,{children:t.label}),i(s,{children:t.value})]},o))});import{jsx as y}from"react/jsx-runtime";var d=n.forwardRef(({asChild:a,orientation:t="horizontal",items:o,children:e,...p},c)=>y(a?v:"dl",{"data-orientation":t,...p,...k("data-list","root",p.className),ref:c,children:e??y(D,{items:o})}));d.displayName="DataList";export{d as DataList,r as DataListItem,m as DataListLabel,s as DataListValue};

package/dist/data-list/DataListAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type { DataListEntry } from './types.cjs';
+/**
+ * The anatomy a {@link DataList} draws from `items`: one `DataListItem` per entry,
+ * holding its `DataListLabel` (`<dt>`) and `DataListValue` (`<dd>`).
+ *
+ * Keyed by position, not by `label`: two pairs may legitimately share a label
+ * ("Tag", "Tag"), and the list is static.
+ *
+ * @internal
+ */
+export declare const DataListAnatomy: ({ items }: {
+    items?: DataListEntry[];
+}) => import("react").JSX.Element;

package/dist/data-list/DataListAnatomy.d.ts

@@ -0,0 +1,13 @@
+import type { DataListEntry } from './types.js';
+/**
+ * The anatomy a {@link DataList} draws from `items`: one `DataListItem` per entry,
+ * holding its `DataListLabel` (`<dt>`) and `DataListValue` (`<dd>`).
+ *
+ * Keyed by position, not by `label`: two pairs may legitimately share a label
+ * ("Tag", "Tag"), and the list is static.
+ *
+ * @internal
+ */
+export declare const DataListAnatomy: ({ items }: {
+    items?: DataListEntry[];
+}) => import("react").JSX.Element;

package/dist/data-list/DataListItem.d.cts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { DataListItemProps } from './types.cjs';
 /**
- * Optional grouping wrapper around one {@link DataListLabel} /
- * {@link DataListValue} pair. Renders a bare `<div>` with **no role and no
- * ARIA of its own** — deliberately.
+ * Wrapper for {@link DataListLabel}/{@link DataListValue} pair — bare `<div>` with no role or ARIA (adding either breaks `<dl>` semantics).
  *
- * HTML allows exactly one wrapper inside a `<dl>`: a plain `<div>` holding the
- * `<dt>`/`<dd>` group. Because that div stays generic, the `dl` → `dt`/`dd`
- * association survives it. Give this element a role, or swap it for anything
- * that carries one, and the list stops being a description list to assistive
- * technology.
- *
- * It is a styling handle, so keep it one: if you need the pairs to line up in
- * a grid, put `display: contents` on this element and lay the `<dt>`/`<dd>`
- * out as grid items of the `<dl>` itself.
+ * For grid layout, use `display: contents` so `<dt>`/`<dd>` become direct `<dl>` children.
  *
  * @example
  * ```tsx

package/dist/data-list/DataListItem.d.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { DataListItemProps } from './types.js';
 /**
- * Optional grouping wrapper around one {@link DataListLabel} /
- * {@link DataListValue} pair. Renders a bare `<div>` with **no role and no
- * ARIA of its own** — deliberately.
+ * Wrapper for {@link DataListLabel}/{@link DataListValue} pair — bare `<div>` with no role or ARIA (adding either breaks `<dl>` semantics).
  *
- * HTML allows exactly one wrapper inside a `<dl>`: a plain `<div>` holding the
- * `<dt>`/`<dd>` group. Because that div stays generic, the `dl` → `dt`/`dd`
- * association survives it. Give this element a role, or swap it for anything
- * that carries one, and the list stops being a description list to assistive
- * technology.
- *
- * It is a styling handle, so keep it one: if you need the pairs to line up in
- * a grid, put `display: contents` on this element and lay the `<dt>`/`<dd>`
- * out as grid items of the `<dl>` itself.
+ * For grid layout, use `display: contents` so `<dt>`/`<dd>` become direct `<dl>` children.
  *
  * @example
  * ```tsx

package/dist/data-list/DataListLabel.d.cts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { DataListLabelProps } from './types.cjs';
 /**
- * The key half of a pair. Renders a `<dt>`, which is what associates this
- * term with the {@link DataListValue} (`<dd>`) that follows it. A `<span>` or
- * a `<div>` with a class name looks identical and conveys nothing.
- *
- * Do not put a `<label>` here: nothing in a data list is a form control, and
- * `<label>` without a control is a name with nothing to name.
+ * The key half of a pair. Renders `<dt>`, associating term with {@link DataListValue}
+ * (`<dd>`). Never use `<label>`: nothing in data list is a form control.
  *
  * @example
  * ```tsx

package/dist/data-list/DataListLabel.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { DataListLabelProps } from './types.js';
 /**
- * The key half of a pair. Renders a `<dt>`, which is what associates this
- * term with the {@link DataListValue} (`<dd>`) that follows it. A `<span>` or
- * a `<div>` with a class name looks identical and conveys nothing.
- *
- * Do not put a `<label>` here: nothing in a data list is a form control, and
- * `<label>` without a control is a name with nothing to name.
+ * The key half of a pair. Renders `<dt>`, associating term with {@link DataListValue}
+ * (`<dd>`). Never use `<label>`: nothing in data list is a form control.
  *
  * @example
  * ```tsx

package/dist/data-list/DataListValue.d.cts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { DataListValueProps } from './types.cjs';
 /**
- * The value half of a pair. Renders a `<dd>`, describing the `<dt>` that
- * precedes it.
+ * The value half of a pair. Renders a `<dd>`, describing the `<dt>`.
  *
- * One `<dt>` may be followed by several `<dd>`s — that is how you express a
- * key with multiple values (three email addresses, four tags) without
- * repeating the label.
+ * One `<dt>` may be followed by multiple `<dd>`s for multi-valued keys.
  *
  * @example
  * ```tsx

package/dist/data-list/DataListValue.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { DataListValueProps } from './types.js';
 /**
- * The value half of a pair. Renders a `<dd>`, describing the `<dt>` that
- * precedes it.
+ * The value half of a pair. Renders a `<dd>`, describing the `<dt>`.
  *
- * One `<dt>` may be followed by several `<dd>`s — that is how you express a
- * key with multiple values (three email addresses, four tags) without
- * repeating the label.
+ * One `<dt>` may be followed by multiple `<dd>`s for multi-valued keys.
  *
  * @example
  * ```tsx

package/dist/data-list/index.d.cts

@@ -1,5 +1,2 @@
-export * from './DataList.cjs';
-export { DataListItem } from './DataListItem.cjs';
-export { DataListLabel } from './DataListLabel.cjs';
-export { DataListValue } from './DataListValue.cjs';
-export type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps, DataListOrientation, } from './types.cjs';
+export { DataList } from './DataList.cjs';
+export type { DataListProps, DataListEntry, DataListOrientation } from './types.cjs';

package/dist/data-list/index.d.ts

@@ -1,5 +1,2 @@
-export * from './DataList.js';
-export { DataListItem } from './DataListItem.js';
-export { DataListLabel } from './DataListLabel.js';
-export { DataListValue } from './DataListValue.js';
-export type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps, DataListOrientation, } from './types.js';
+export { DataList } from './DataList.js';
+export type { DataListProps, DataListEntry, DataListOrientation } from './types.js';

package/dist/data-list/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `DataList` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { DataList, DataListItem, DataListLabel, DataListValue } from '@skdx/react/primitives/data-list';
+ *
+ * <DataList role="group" aria-label="Server details">
+ *   <DataListItem style={{ display: 'contents' }}>
+ *     <DataListLabel>Status</DataListLabel>
+ *     <DataListValue>
+ *       <Badge>Active</Badge>
+ *     </DataListValue>
+ *   </DataListItem>
+ * </DataList>
+ * ```
+ */
+export { DataList } from './DataList.cjs';
+export { DataListItem } from './DataListItem.cjs';
+export { DataListLabel } from './DataListLabel.cjs';
+export { DataListValue } from './DataListValue.cjs';
+export type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps, } from './types.cjs';

package/dist/data-list/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `DataList` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { DataList, DataListItem, DataListLabel, DataListValue } from '@skdx/react/primitives/data-list';
+ *
+ * <DataList role="group" aria-label="Server details">
+ *   <DataListItem style={{ display: 'contents' }}>
+ *     <DataListLabel>Status</DataListLabel>
+ *     <DataListValue>
+ *       <Badge>Active</Badge>
+ *     </DataListValue>
+ *   </DataListItem>
+ * </DataList>
+ * ```
+ */
+export { DataList } from './DataList.js';
+export { DataListItem } from './DataListItem.js';
+export { DataListLabel } from './DataListLabel.js';
+export { DataListValue } from './DataListValue.js';
+export type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps, } from './types.js';

package/dist/data-list/types.d.cts

@@ -1,8 +1,23 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** Orientation of the label/value pairs, emitted as `data-orientation` for the brand layer to lay out. */
+/** Orientation of the label/value pairs, emitted as `data-orientation`. */
 export type DataListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link DataListProps.items} — a single label/value pair. */
+export interface DataListEntry {
+    /** The key half of the pair, rendered into a derived `DataListLabel` (`<dt>`). */
+    label: React.ReactNode;
+    /** The value half of the pair, rendered into a derived `DataListValue` (`<dd>`). */
+    value: React.ReactNode;
+}
 /** Props for the {@link DataList} root, a `<dl>`. */
 export interface DataListProps extends PrimitivePropsWithRef<'dl'> {
+    /**
+     * The pairs the list renders, one derived `DataListItem` holding a `DataListLabel` and a
+     * `DataListValue` each. Ignored when `children` is given, which switches to full
+     * manual composition.
+     * @default undefined — nothing is derived; compose the pairs as `children`.
+     */
+    items?: DataListEntry[];
     /**
      * How each label/value pair reads: `'horizontal'` puts the value beside its
      * label, `'vertical'` stacks the value under it. Emitted as

package/dist/data-list/types.d.ts

@@ -1,8 +1,23 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Orientation of the label/value pairs, emitted as `data-orientation` for the brand layer to lay out. */
+/** Orientation of the label/value pairs, emitted as `data-orientation`. */
 export type DataListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link DataListProps.items} — a single label/value pair. */
+export interface DataListEntry {
+    /** The key half of the pair, rendered into a derived `DataListLabel` (`<dt>`). */
+    label: React.ReactNode;
+    /** The value half of the pair, rendered into a derived `DataListValue` (`<dd>`). */
+    value: React.ReactNode;
+}
 /** Props for the {@link DataList} root, a `<dl>`. */
 export interface DataListProps extends PrimitivePropsWithRef<'dl'> {
+    /**
+     * The pairs the list renders, one derived `DataListItem` holding a `DataListLabel` and a
+     * `DataListValue` each. Ignored when `children` is given, which switches to full
+     * manual composition.
+     * @default undefined — nothing is derived; compose the pairs as `children`.
+     */
+    items?: DataListEntry[];
     /**
      * How each label/value pair reads: `'horizontal'` puts the value beside its
      * label, `'vertical'` stacks the value under it. Emitted as

package/dist/date-field/DateField.cjs

@@ -1 +1 @@
-"use strict";var P=Object.create;var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var a in t)f(e,a,{get:t[a],enumerable:!0})},C=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!b.call(e,s)&&s!==a&&f(e,s,{get:()=>t[s],enumerable:!(n=k(t,s))||n.enumerable});return e};var E=(e,t,a)=>(a=e!=null?P(H(e)):{},C(t||!e||!e.__esModule?f(a,"default",{value:e,enumerable:!0}):a,e)),N=e=>C(f({},"__esModule",{value:!0}),e);var L={};w(L,{DateField:()=>D});module.exports=N(L);var i=E(require("react"),1),l=require("../utils/dateSegments.cjs"),h=require("../utils/part.cjs"),v=require("../utils/segmentedField.cjs"),S=require("../utils/useControllableState.cjs"),V=require("react/jsx-runtime"),D=i.forwardRef(({value:e,defaultValue:t,onValueChange:a,granularity:n="day",hourCycle:s,locale:p,...g},T)=>{let r=(0,l.resolveHourCycle)(p,s),[u=null,y]=(0,S.useControllableState)({prop:e,defaultProp:t??null,onChange:a}),[R,c]=i.useState(()=>u?(0,l.dateToValues)(u,r):{}),F=o=>(0,l.isComplete)((0,l.buildSegments)({kind:"date",granularity:n,locale:p,hourCycle:r,values:o}))?(0,l.valuesToDate)(o,r):null,d=u?u.getTime():null;return i.useEffect(()=>{c(o=>{let m=F(o);return d===null?m===null?o:{}:m!==null&&m.getTime()===d?o:(0,l.dateToValues)(new Date(d),r)})},[d,r,n,p]),(0,V.jsx)(v.SegmentedField,{family:"date-field",kind:"date",granularity:n,locale:p,hourCycle:r,values:R,onValuesChange:o=>{c(o);let m=F(o);(m?m.getTime():null)!==d&&y(m)},formValue:u?(0,l.dateToFormValue)(u,n):null,onFormReset:()=>{y(t??null),c(t?(0,l.dateToValues)(t,r):{})},...g,...(0,h.skdxPart)("date-field","root",g.className),ref:T})});D.displayName="DateField";0&&(module.exports={DateField});
+"use strict";var A=Object.create;var D=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(e,a)=>{for(var n in a)D(e,n,{get:a[n],enumerable:!0})},M=(e,a,n,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let m of G(a))!K.call(e,m)&&m!==n&&D(e,m,{get:()=>a[m],enumerable:!(l=B(a,m))||l.enumerable});return e};var U=(e,a,n)=>(n=e!=null?A(J(e)):{},M(a||!e||!e.__esModule?D(n,"default",{value:e,enumerable:!0}):n,e)),W=e=>M(D({},"__esModule",{value:!0}),e);var X={};Q(X,{DateField:()=>C});module.exports=W(X);var o=U(require("react"),1),t=require("../utils/dateSegments.cjs"),r=require("../utils/dateValue.cjs"),h=require("../utils/part.cjs"),x=require("../utils/segmentedField.cjs"),P=require("../utils/useCallbackRef.cjs"),b=require("../utils/useControllableState.cjs"),k=require("react/jsx-runtime"),C=o.forwardRef(({value:e,defaultValue:a,onValueChange:n,granularity:l="day",hourCycle:m,locale:c,minDate:y,maxDate:S,invalid:H=!1,isDateUnavailable:w,...T},E)=>{let N=o.useMemo(()=>e===void 0?void 0:(0,r.toDate)(e,"value"),[e]),p=o.useMemo(()=>(0,r.toDate)(a,"defaultValue"),[a]),R=o.useMemo(()=>(0,r.toDate)(y,"minDate")??void 0,[y]),V=o.useMemo(()=>(0,r.toDate)(S,"maxDate")??void 0,[S]),u=(0,t.resolveHourCycle)(c,m),[s=null,g]=(0,b.useControllableState)({prop:N,defaultProp:p??null,onChange:n}),[O,v]=o.useState(()=>s?(0,t.dateToValues)(s,u):{}),F=(0,P.useCallbackRef)(d=>(0,t.isComplete)((0,t.buildSegments)({kind:"date",granularity:l,locale:c,hourCycle:u,values:d}))?(0,t.valuesToDate)(d,u):null),f=s?s.getTime():null;o.useEffect(()=>{v(d=>{let i=F(d);return f===null?i===null?d:{}:i!==null&&i.getTime()===f?d:(0,t.dateToValues)(new Date(f),u)})},[f,u,l,c,F]);let L=d=>{v(d);let i=F(d);(i?i.getTime():null)!==f&&g(i)},q=(0,t.dateRangeViolation)(s,l,R,V)!==null,z=s!==null&&(w?.(s)??!1);return(0,k.jsx)(x.SegmentedField,{family:"date-field",kind:"date",granularity:l,locale:c,hourCycle:u,values:O,onValuesChange:L,invalid:H||q||z,formType:l==="day"?"date":"datetime-local",formMin:R?(0,t.dateToFormValue)(R,l):void 0,formMax:V?(0,t.dateToFormValue)(V,l):void 0,formValue:s?(0,t.dateToFormValue)(s,l):null,onFormReset:()=>{g(p??null),v(p?(0,t.dateToValues)(p,u):{})},...T,...(0,h.skdxPart)("date-field","root",T.className),ref:E})});C.displayName="DateField";0&&(module.exports={DateField});

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

@@ -1,20 +1,11 @@
 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`).
+ * Segmented keyboard entry; typed counterpart of Calendar; typed part of DatePicker.
+ * One spinbutton per segment with locale separators from Intl.DateTimeFormat.
+ * Arrow Up/Down step segment; Left/Right move; digits roll over; Backspace clears.
+ * `onValueChange` fires only with complete date or null.
+ * Controlled or uncontrolled; works with any granularity.
  *
  * @example
  * ```tsx

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

@@ -1,20 +1,11 @@
 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`).
+ * Segmented keyboard entry; typed counterpart of Calendar; typed part of DatePicker.
+ * One spinbutton per segment with locale separators from Intl.DateTimeFormat.
+ * Arrow Up/Down step segment; Left/Right move; digits roll over; Backspace clears.
+ * `onValueChange` fires only with complete date or null.
+ * Controlled or uncontrolled; works with any granularity.
  *
  * @example
  * ```tsx

package/dist/date-field/DateField.js

@@ -1 +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};
+import*as e from"react";import{buildSegments as E,dateRangeViolation as N,dateToFormValue as D,dateToValues as R,isComplete as O,resolveHourCycle as L,valuesToDate as q}from"../utils/dateSegments.js";import{toDate as u}from"../utils/dateValue.js";import{skdxPart as z}from"../utils/part.js";import{SegmentedField as A}from"../utils/segmentedField.js";import{useCallbackRef as B}from"../utils/useCallbackRef.js";import{useControllableState as G}from"../utils/useControllableState.js";import{jsx as J}from"react/jsx-runtime";var S=e.forwardRef(({value:i,defaultValue:V,onValueChange:T,granularity:l="day",hourCycle:g,locale:d,minDate:v,maxDate:F,invalid:M=!1,isDateUnavailable:h,...C},x)=>{let P=e.useMemo(()=>i===void 0?void 0:u(i,"value"),[i]),m=e.useMemo(()=>u(V,"defaultValue"),[V]),f=e.useMemo(()=>u(v,"minDate")??void 0,[v]),r=e.useMemo(()=>u(F,"maxDate")??void 0,[F]),o=L(d,g),[t=null,y]=G({prop:P,defaultProp:m??null,onChange:T}),[b,c]=e.useState(()=>t?R(t,o):{}),p=B(a=>O(E({kind:"date",granularity:l,locale:d,hourCycle:o,values:a}))?q(a,o):null),s=t?t.getTime():null;e.useEffect(()=>{c(a=>{let n=p(a);return s===null?n===null?a:{}:n!==null&&n.getTime()===s?a:R(new Date(s),o)})},[s,o,l,d,p]);let k=a=>{c(a);let n=p(a);(n?n.getTime():null)!==s&&y(n)},H=N(t,l,f,r)!==null,w=t!==null&&(h?.(t)??!1);return J(A,{family:"date-field",kind:"date",granularity:l,locale:d,hourCycle:o,values:b,onValuesChange:k,invalid:M||H||w,formType:l==="day"?"date":"datetime-local",formMin:f?D(f,l):void 0,formMax:r?D(r,l):void 0,formValue:t?D(t,l):null,onFormReset:()=>{y(m??null),c(m?R(m,o):{})},...C,...z("date-field","root",C.className),ref:x})});S.displayName="DateField";export{S as DateField};

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

@@ -1,20 +1,21 @@
 import type { Granularity, HourCycle } from '../utils/dateSegments.cjs';
+import type { DateInput } from '../utils/dateValue.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.
+     * Current date, for controlled usage. Pair with `onValueChange`; `null` while any segment is still untyped. Takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: Date | null;
+    value?: DateInput | null;
     /**
-     * Initial date, used only when the field is uncontrolled.
+     * Initial date, used only when the field is uncontrolled. Takes the same
+     * `Date`-or-ISO-string forms `value` does.
      * @default undefined — every segment starts on its placeholder.
      */
-    defaultValue?: Date | null;
+    defaultValue?: DateInput | 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.
@@ -40,6 +41,16 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — the runtime's default locale.
      */
     locale?: string;
+    /**
+     * Earliest accepted date. A value before it marks the field `aria-invalid`/`data-invalid` and fails constraint validation with `rangeUnderflow`. Takes a `Date` or ISO-8601 string.
+     * @default undefined — no minimum; any year from 1 to 9999.
+     */
+    minDate?: DateInput;
+    /**
+     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * @default undefined — no maximum; any year from 1 to 9999.
+     */
+    maxDate?: DateInput;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
@@ -50,6 +61,20 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Predicate marking dates as unavailable, receiving the typed `Date`. An unavailable date marks the field `aria-invalid`/`data-invalid` without changing what the field submits.
+     * @default undefined — every date is available.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`. Turned off, only those three segments change: year
+     * keeps four digits (separating a typed `0042` from `42`), minute/second
+     * keep two — the same split `Intl.DateTimeFormat` draws between `numeric`
+     * and `2-digit`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
     /**
      * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
@@ -67,6 +92,14 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` this field submits into, for a field rendered outside it
+     * — inside a Dialog's portal, for instance. Forwarded to the hidden input's
+     * `form` attribute, and used to find the form the reset listener subscribes
+     * to, so a field that submits elsewhere also answers that form's reset.
+     * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
     /**
      * Writing direction, which decides whether ArrowLeft moves to the previous or
      * the next segment.

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

@@ -1,20 +1,21 @@
 import type { Granularity, HourCycle } from '../utils/dateSegments.js';
+import type { DateInput } from '../utils/dateValue.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.
+     * Current date, for controlled usage. Pair with `onValueChange`; `null` while any segment is still untyped. Takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: Date | null;
+    value?: DateInput | null;
     /**
-     * Initial date, used only when the field is uncontrolled.
+     * Initial date, used only when the field is uncontrolled. Takes the same
+     * `Date`-or-ISO-string forms `value` does.
      * @default undefined — every segment starts on its placeholder.
      */
-    defaultValue?: Date | null;
+    defaultValue?: DateInput | 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.
@@ -40,6 +41,16 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — the runtime's default locale.
      */
     locale?: string;
+    /**
+     * Earliest accepted date. A value before it marks the field `aria-invalid`/`data-invalid` and fails constraint validation with `rangeUnderflow`. Takes a `Date` or ISO-8601 string.
+     * @default undefined — no minimum; any year from 1 to 9999.
+     */
+    minDate?: DateInput;
+    /**
+     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * @default undefined — no maximum; any year from 1 to 9999.
+     */
+    maxDate?: DateInput;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
@@ -50,6 +61,20 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Predicate marking dates as unavailable, receiving the typed `Date`. An unavailable date marks the field `aria-invalid`/`data-invalid` without changing what the field submits.
+     * @default undefined — every date is available.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`. Turned off, only those three segments change: year
+     * keeps four digits (separating a typed `0042` from `42`), minute/second
+     * keep two — the same split `Intl.DateTimeFormat` draws between `numeric`
+     * and `2-digit`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
     /**
      * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
@@ -67,6 +92,14 @@ export interface DateFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` this field submits into, for a field rendered outside it
+     * — inside a Dialog's portal, for instance. Forwarded to the hidden input's
+     * `form` attribute, and used to find the form the reset listener subscribes
+     * to, so a field that submits elsewhere also answers that form's reset.
+     * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
     /**
      * Writing direction, which decides whether ArrowLeft moves to the previous or
      * the next segment.