@skdx/react 0.28.0 → 0.29.0

package/dist/command/types.d.ts

@@ -1,19 +1,15 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /**
- * Decides which items survive search: a predicate over `value` and `keywords`,
- * or `'manual'` to let the consumer mount only matches. Return a number to rank
- * items by score (0 = exclude, positive = keep, sorted descending); a boolean
- * is the two-point case. Keywords are passed through so a custom filter can
- * honour them; `undefined` when the item declares none.
+ * Decides which items survive search: a predicate over `value` and `keywords`, or `'manual'` to let the consumer mount only matches; a numeric return also ranks (0 excludes, positive keeps, sorted descending).
  */
 export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number);
 /** @internal Per-item metadata stored in Command's internal ref map, keyed by item id. */
 export interface CommandItemMeta {
     value: string;
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    keywords?: readonly string[];
+    disabled?: boolean | undefined;
+    onSelect?: ((value: string) => void) | undefined;
+    keywords?: readonly string[] | undefined;
 }
 /** @internal Context shape distributed from Command to its parts. */
 export interface CommandContextValue {
@@ -23,7 +19,7 @@ export interface CommandContextValue {
     /** Rank each currently-visible item's CSS `order` should carry when `filter` also scores it; `null` leaves order untouched. */
     itemOrder: ReadonlyMap<string, number> | null;
     setActiveId: (id: string | null) => void;
-    itemMetaRef: React.RefObject<Map<string, CommandItemMeta>>;
+    itemMeta: Map<string, CommandItemMeta>;
     registerItem: (id: string) => void;
     unregisterItem: (id: string) => void;
     itemCount: number;
@@ -48,35 +44,30 @@ export interface CommandItem {
      * Identifier passed to `onSelect` and matched as the highlighted item.
      * @default undefined — the item's `label`.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Extra strings the filter matches against alongside `value`, so "Toggle theme" is findable by typing "dark mode".
      * @default undefined — the item matches on its value alone.
      */
-    keywords?: string[];
+    keywords?: string[] | undefined;
     /**
      * Excludes the item from keyboard navigation, pointer highlighting and Enter selection.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Called when this item is activated, before Command's own `onSelect`. Both fire.
      * @default undefined
      */
-    onSelect?: () => void;
+    onSelect?: (() => void) | undefined;
 }
-/**
- * One group of {@link CommandProps.groups} — grouping is expressed in the
- * data, never by a wrapper component. A group with no `label` renders its
- * items straight into the list, which is how a flat palette is written:
- * `groups={[{ items }]}`.
- */
+/** One group of {@link CommandProps.groups}; a group with no `label` renders its items straight into the list. */
 export interface CommandGroup {
     /**
      * Heading rendered above the group's items, and the group's accessible name.
      * @default undefined — the items are rendered ungrouped.
      */
-    label?: string;
+    label?: string | undefined;
     /** The group's commands. */
     items: CommandItem[];
 }
@@ -87,93 +78,88 @@ export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaul
      * `children` is given, which switches to full manual composition.
      * @default undefined — an empty palette.
      */
-    groups?: CommandGroup[];
+    groups?: CommandGroup[] | undefined;
     /**
      * Placeholder for the derived search input. Doubles as the derived list's
      * accessible name, which a `role="listbox"` takes from nothing else here.
      * @default undefined — no placeholder, and an unnamed list.
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Text for the derived `CommandEmpty` part, shown when the search has no matches
      * (not shown while `loading`).
      * @default undefined
      */
-    emptyMessage?: string;
+    emptyMessage?: string | undefined;
     /**
      * Text for the derived `CommandLoading` part, announced by its live region while
      * `loading` is set.
      * @default undefined — no loading state is derived.
      */
-    loadingMessage?: string;
+    loadingMessage?: string | undefined;
     /**
      * Fires with the command that was activated. The command's own `onSelect`
      * fires first; both run, and neither cancels the other.
      * @default undefined — no-op if omitted.
      */
-    onSelect?: (item: CommandItem) => void;
+    onSelect?: ((item: CommandItem) => void) | undefined;
     /**
      * Renders item contents in place of the label; the element's role, id,
      * `data-*`, keyboard wiring and disabled state are still managed by the library.
      * @default undefined
      */
-    renderItem?: (item: CommandItem) => React.ReactNode;
+    renderItem?: ((item: CommandItem) => React.ReactNode) | undefined;
     /**
      * Value of the highlighted item, for controlled usage. Pair with
      * `onValueChange`.
      * @default undefined — uncontrolled, the palette keeps the top match highlighted.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Value of the initially highlighted item, for uncontrolled usage.
      * @default undefined — the first mounted item.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the highlighted item's value whenever the highlight moves —
      * typing, arrow keys, or pointer.
      * @default undefined — no-op.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /**
      * Current search text, for controlled usage. `CommandInput` writes into this
      * as the user types.
      * @default undefined — uncontrolled, the root tracks the search internally.
      */
-    search?: string;
+    search?: string | undefined;
     /**
      * Initial search text, for uncontrolled usage.
      * @default ''
      */
-    defaultSearch?: string;
+    defaultSearch?: string | undefined;
     /**
      * Fires with the new search text whenever `CommandInput` changes.
      * @default undefined — no-op.
      */
-    onSearchChange?: (search: string) => void;
+    onSearchChange?: ((search: string) => void) | undefined;
     /**
-     * Replaces the built-in matcher (case-insensitive substring on the item's
-     * `value`) — return `true` to keep an item mounted for this search — or
-     * `'manual'` to filter nothing, when the consumer already mounts only the
-     * matching items. Return a number instead of a boolean to also rank: `0`
-     * excludes, any positive score keeps, and surviving items reorder by score,
-     * descending.
+     * Replaces the built-in matcher (case-insensitive substring on `value`), or `'manual'` to filter nothing.
      * @default undefined — the built-in matcher.
      */
-    filter?: CommandFilter;
+    filter?: CommandFilter | undefined;
     /**
      * Wraps arrow navigation around the ends: Arrow Down from the last item
      * highlights the first, Arrow Up from the first highlights the last.
      * @default false
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Stops pointer-enter from moving the highlight. Use when the palette is
      * keyboard-driven but the pointer rests over the list — otherwise a motionless
      * mouse steals the highlight from arrow keys.
      * @default false
      */
-    disablePointerSelection?: boolean;
+    disablePointerSelection?: boolean | undefined;
     /**
      * Marks results as in flight: `data-loading` on the root and
      * `aria-busy`/`data-loading` on `CommandList`, mounts `CommandLoading`, and
@@ -181,7 +167,7 @@ export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaul
      * "No results".
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
 }
 /** Props for {@link CommandInput}, the search/filter text field that drives virtual focus. */
 export interface CommandInputProps extends PrimitivePropsWithRef<'input'> {
@@ -198,7 +184,7 @@ export interface CommandGroupProps extends PrimitivePropsWithRef<'div'> {
      * Non-interactive heading rendered above the group's items.
      * @default undefined — no heading rendered.
      */
-    heading?: React.ReactNode;
+    heading?: string | undefined;
 }
 /** Props for a single {@link CommandItem}. */
 export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
@@ -208,34 +194,22 @@ export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * Excludes the item from keyboard navigation, pointer highlighting, and Enter selection.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Extra strings the root's filter matches against, alongside `value`.
-     *
-     * A command labelled "Toggle theme" that users search for as "dark mode" is
-     * the case this exists for: the alias never appears on screen, and matching
-     * only the visible text makes the command unfindable by the word most people
-     * would reach for. Passed through to a custom `filter` as its third argument.
      * @default undefined — the item matches on its `value` alone.
      */
-    keywords?: string[];
+    keywords?: string[] | undefined;
     /**
-     * Keeps the item mounted whatever the search, instead of unmounting when the
-     * filter rejects it.
-     *
-     * For the action that must always be reachable — "Create new…", "Open
-     * settings" — which otherwise has no way to survive a search at all: a
-     * rejected item here is unmounted outright, not merely hidden, so it leaves
-     * the option count, the highlight order and `CommandEmpty` as if it were
-     * never written.
+     * Keeps the item mounted whatever the search, instead of unmounting when the filter rejects it.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Called with `value` when the item is activated (click, Enter, or pointer + Enter).
      * @default undefined — no-op if omitted.
      */
-    onSelect?: (value: string) => void;
+    onSelect?: ((value: string) => void) | undefined;
 }
 /** Props for {@link CommandLoading}, shown only while the root's `loading` is set. */
 export interface CommandLoadingProps extends PrimitivePropsWithRef<'div'> {

package/dist/date-field/DateField.cjs

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

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { DateFieldProps } from './types.cjs';
-/**
- * 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
- * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
- * ```
- */
-export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DateField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, minDate: minDateInput, maxDate: maxDateInput, invalid, isDateUnavailable, ref: forwardedRef, ...props }: Omit<DateFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { DateFieldProps } from './types.js';
-/**
- * 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
- * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
- * ```
- */
-export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DateField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, minDate: minDateInput, maxDate: maxDateInput, invalid, isDateUnavailable, ref: forwardedRef, ...props }: Omit<DateFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/date-field/DateField.js

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

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

@@ -1,116 +1,99 @@
-import type { Granularity, HourCycle } from '../utils/dateSegments.cjs';
-import type { DateInput } from '../utils/dateValue.cjs';
+import type { Granularity, HourCycle } from '../utils/date-segments.cjs';
+import type { DateInput } from '../utils/date-value.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. */
+/** Props for the {@link DateField} segmented date entry 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. Takes a `Date` or ISO-8601 string, read as local time.
+     * Current date for controlled usage — `null` while any segment is untyped; takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: DateInput | null;
+    value?: DateInput | null | undefined;
     /**
-     * Initial date, used only when the field is uncontrolled. Takes the same
-     * `Date`-or-ISO-string forms `value` does.
+     * 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?: DateInput | null;
+    defaultValue?: DateInput | null | undefined;
     /**
-     * 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.
+     * Fires with the new `Date` once every segment is filled, and with `null` as soon as one is cleared — never with a half-typed date.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: Date | null) => void;
+    onValueChange?: ((value: Date | null) => void) | undefined;
     /**
-     * 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.
+     * 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;
+    granularity?: Granularity | undefined;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
-     * only — the submitted value is always 24 hour.
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments for display only — the submitted value is always 24 hour.
      * @default undefined — whatever the locale resolves to.
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
      * 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;
+    locale?: string | undefined;
     /**
-     * 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.
+     * 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;
+    minDate?: DateInput | undefined;
     /**
-     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * Latest accepted date — a value after it fails constraint validation with `rangeOverflow`; takes a `Date` or ISO-8601 string.
      * @default undefined — no maximum; any year from 1 to 9999.
      */
-    maxDate?: DateInput;
+    maxDate?: DateInput | undefined;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Segments stay focusable and readable but refuse every edit.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * 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.
+     * Predicate marking dates as unavailable, receiving the typed `Date` — an unavailable date marks the field `aria-invalid`/`data-invalid` without changing what it submits.
      * @default undefined — every date is available.
      */
-    isDateUnavailable?: (date: Date) => boolean;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
     /**
-     * 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`.
+     * Whether a one-digit month, day or hour renders zero-padded (`05/09/2026` vs `5/9/2026`); turned off, year still keeps four digits and minute/second keep two.
      * @default true
      */
-    shouldForceLeadingZeros?: boolean;
+    shouldForceLeadingZeros?: boolean | undefined;
     /**
      * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks the field required — an incomplete field is `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * 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.
+     * 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;
+    name?: string | undefined;
     /**
-     * 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.
+     * Id of the `<form>` this field submits into when rendered outside it — e.g. inside a Dialog's portal — forwarded to the hidden input and used to route form reset.
      * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * 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';
+    dir?: 'ltr' | 'rtl' | undefined;
 }
 /**
- * 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)`.
+ * What {@link DateField}'s forwarded ref carries — the root `<div>` plus the two constraint-validation methods, answering off the hidden input's `YYYY-MM-DD` wire value; type your ref as `React.useRef<DateFieldHandle>(null)` to call them.
  */
 export type DateFieldHandle = HTMLDivElement & FormValidityHandle;

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

@@ -1,116 +1,99 @@
-import type { Granularity, HourCycle } from '../utils/dateSegments.js';
-import type { DateInput } from '../utils/dateValue.js';
+import type { Granularity, HourCycle } from '../utils/date-segments.js';
+import type { DateInput } from '../utils/date-value.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. */
+/** Props for the {@link DateField} segmented date entry 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. Takes a `Date` or ISO-8601 string, read as local time.
+     * Current date for controlled usage — `null` while any segment is untyped; takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: DateInput | null;
+    value?: DateInput | null | undefined;
     /**
-     * Initial date, used only when the field is uncontrolled. Takes the same
-     * `Date`-or-ISO-string forms `value` does.
+     * 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?: DateInput | null;
+    defaultValue?: DateInput | null | undefined;
     /**
-     * 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.
+     * Fires with the new `Date` once every segment is filled, and with `null` as soon as one is cleared — never with a half-typed date.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: Date | null) => void;
+    onValueChange?: ((value: Date | null) => void) | undefined;
     /**
-     * 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.
+     * 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;
+    granularity?: Granularity | undefined;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
-     * only — the submitted value is always 24 hour.
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments for display only — the submitted value is always 24 hour.
      * @default undefined — whatever the locale resolves to.
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
      * 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;
+    locale?: string | undefined;
     /**
-     * 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.
+     * 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;
+    minDate?: DateInput | undefined;
     /**
-     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * Latest accepted date — a value after it fails constraint validation with `rangeOverflow`; takes a `Date` or ISO-8601 string.
      * @default undefined — no maximum; any year from 1 to 9999.
      */
-    maxDate?: DateInput;
+    maxDate?: DateInput | undefined;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Segments stay focusable and readable but refuse every edit.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * 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.
+     * Predicate marking dates as unavailable, receiving the typed `Date` — an unavailable date marks the field `aria-invalid`/`data-invalid` without changing what it submits.
      * @default undefined — every date is available.
      */
-    isDateUnavailable?: (date: Date) => boolean;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
     /**
-     * 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`.
+     * Whether a one-digit month, day or hour renders zero-padded (`05/09/2026` vs `5/9/2026`); turned off, year still keeps four digits and minute/second keep two.
      * @default true
      */
-    shouldForceLeadingZeros?: boolean;
+    shouldForceLeadingZeros?: boolean | undefined;
     /**
      * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks the field required — an incomplete field is `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * 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.
+     * 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;
+    name?: string | undefined;
     /**
-     * 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.
+     * Id of the `<form>` this field submits into when rendered outside it — e.g. inside a Dialog's portal — forwarded to the hidden input and used to route form reset.
      * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * 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';
+    dir?: 'ltr' | 'rtl' | undefined;
 }
 /**
- * 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)`.
+ * What {@link DateField}'s forwarded ref carries — the root `<div>` plus the two constraint-validation methods, answering off the hidden input's `YYYY-MM-DD` wire value; type your ref as `React.useRef<DateFieldHandle>(null)` to call them.
  */
 export type DateFieldHandle = HTMLDivElement & FormValidityHandle;