@skdx/react 0.26.0 → 0.28.0

package/dist/textarea/types.d.ts

@@ -1,6 +1,30 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Props for the {@link Textarea}, a headless wrapper around a native `<textarea>`. */
+/**
+ * Props for the {@link Textarea}, a headless wrapper around a native `<textarea>`.
+ *
+ * Inherited from the native element through `PrimitivePropsWithRef<'textarea'>`: `name`, `required`, `form`, `rows`, `wrap`, `autoComplete`, `spellCheck`, `inputMode`, `placeholder`. The contract's `value-change` event is React's native `onChange`.
+ */
 export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
+    /**
+     * Current text content, for controlled usage. Pair with `onChange`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string;
+    /**
+     * Initial text content for uncontrolled usage. Read only on mount when `value` is unbound.
+     * @default undefined — an empty textarea.
+     */
+    defaultValue?: string;
+    /**
+     * Native `maxlength` — longest value the control accepts, reported as `tooLong`.
+     * @default undefined — no upper bound on the value's length.
+     */
+    maxLength?: number;
+    /**
+     * Native `minlength` — shortest value constraint validation accepts, reported as `tooShort`.
+     * @default undefined — no lower bound on the value's length.
+     */
+    minLength?: number;
     /**
      * Grow the textarea to fit its content instead of showing a scrollbar.
      * @default false
@@ -11,14 +35,18 @@ export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
      * @default undefined — grows without limit.
      */
     maxRows?: number;
+    /**
+     * The control's opening size, and the floor `autoResize` will not shrink below. Rendered as the native `rows` attribute when `autoResize` is off, applied as a minimum on the measured height when on.
+     * @default 2 — the platform's own `rows` default, so an unmarked textarea is unchanged.
+     */
+    minRows?: number;
     /**
      * Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
     invalid?: boolean;
     /**
-     * Makes the textarea read-only, exposed as the native `readOnly` attribute
-     * plus `aria-readonly`/`data-readonly`.
+     * Makes the textarea read-only, exposed as the native `readOnly` attribute plus `aria-readonly`/`data-readonly`.
      * @default false
      */
     readOnly?: boolean;

package/dist/time/Time.cjs

@@ -0,0 +1 @@
+"use strict";var D=Object.create;var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},d=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of x(t))!h.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(i=b(t,o))||i.enumerable});return e};var A=(e,t,r)=>(r=e!=null?D(P(e)):{},d(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>d(f({},"__esModule",{value:!0}),e);var L={};I(L,{Time:()=>c,formatAbsolute:()=>u,formatRelative:()=>l});module.exports=S(L);var _=A(require("react"),1),g=require("../utils/dateValue.cjs"),y=require("../utils/part.cjs"),v=require("../utils/primitive.cjs");function T(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function u(e,t){return e.toLocaleDateString(T(t),{year:"numeric",month:"long",day:"numeric"})}var F=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function l(e,t,r){let i=t===void 0?Date.now():t instanceof Date?t.getTime():t,o=e.getTime()-i,m=new Intl.RelativeTimeFormat(T(r),{numeric:"auto"});for(let[n,a]of F)if(Math.abs(o)>=a)return m.format(Math.trunc(o/a),n);return m.format(0,"second")}var R=require("react/jsx-runtime"),c=_.forwardRef(({value:e,relative:t=!1,absoluteTitle:r=!0,locale:i,now:o,children:m,...n},a)=>{let s=(0,g.toDate)(e,"Time.value");if(!s)return null;let p=u(s,i);return(0,R.jsx)(v.Primitive.time,{dateTime:s.toISOString(),title:t&&r?p:void 0,...n,...(0,y.skdxPart)("time","root",n.className),ref:a,children:m??(t?l(s,o,i):p)})});c.displayName="Time";0&&(module.exports={Time,formatAbsolute,formatRelative});

package/dist/time/Time.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { TimeProps } from './types.cjs';
+/**
+ * `<time datetime>` element with machine-readable instant and reader-friendly text.
+ *
+ * With `relative`, text is "3 hours ago" and absolute date moves to `title`. No internal timer — you drive `now` with one interval.
+ *
+ * @example
+ * ```tsx
+ * <Time value="2026-08-10" />
+ * <Time value={updatedAt} relative now={tick} />
+ * ```
+ */
+export declare const Time: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HTMLTimeElement>>;

package/dist/time/Time.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { TimeProps } from './types.js';
+/**
+ * `<time datetime>` element with machine-readable instant and reader-friendly text.
+ *
+ * With `relative`, text is "3 hours ago" and absolute date moves to `title`. No internal timer — you drive `now` with one interval.
+ *
+ * @example
+ * ```tsx
+ * <Time value="2026-08-10" />
+ * <Time value={updatedAt} relative now={tick} />
+ * ```
+ */
+export declare const Time: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HTMLTimeElement>>;

package/dist/time/Time.js

@@ -0,0 +1 @@
+import*as p from"react";import{toDate as _}from"../utils/dateValue.js";import{skdxPart as g}from"../utils/part.js";import{Primitive as y}from"../utils/primitive.js";function c(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function f(t,e){return t.toLocaleDateString(c(e),{year:"numeric",month:"long",day:"numeric"})}var T=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function u(t,e,s){let r=e===void 0?Date.now():e instanceof Date?e.getTime():e,o=t.getTime()-r,i=new Intl.RelativeTimeFormat(c(s),{numeric:"auto"});for(let[m,n]of T)if(Math.abs(o)>=n)return i.format(Math.trunc(o/n),m);return i.format(0,"second")}import{jsx as v}from"react/jsx-runtime";var d=p.forwardRef(({value:t,relative:e=!1,absoluteTitle:s=!0,locale:r,now:o,children:i,...m},n)=>{let a=_(t,"Time.value");if(!a)return null;let l=f(a,r);return v(y.time,{dateTime:a.toISOString(),title:e&&s?l:void 0,...m,...g("time","root",m.className),ref:n,children:i??(e?u(a,o,r):l)})});d.displayName="Time";export{d as Time,f as formatAbsolute,u as formatRelative};

package/dist/time/format.d.cts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/format.d.ts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/index.d.cts

@@ -0,0 +1,3 @@
+export { Time } from './Time.cjs';
+export { formatAbsolute, formatRelative } from './format.cjs';
+export type { TimeProps } from './types.cjs';

package/dist/time/index.d.ts

@@ -0,0 +1,3 @@
+export { Time } from './Time.js';
+export { formatAbsolute, formatRelative } from './format.js';
+export type { TimeProps } from './types.js';

package/dist/time/types.d.cts

@@ -0,0 +1,29 @@
+import type { DateInput } from '../utils/dateValue.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for a readable timestamp element. */
+export interface TimeProps extends Omit<PrimitivePropsWithRef<'time'>, 'dateTime'> {
+    /**
+     * Instant to render: `Date`, ISO-8601 string, or date-only string as local date.
+     */
+    value: DateInput;
+    /**
+     * Relative label ("3 hours ago") measured from `now`; `datetime` keeps the instant.
+     * @default false
+     */
+    relative?: boolean;
+    /**
+     * When `relative`, put absolute formatted date in `title` (relative labels are lossy).
+     * @default true
+     */
+    absoluteTitle?: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — runtime locale
+     */
+    locale?: string;
+    /**
+     * Reference instant for relative labels; supply to control re-renders.
+     * @default undefined — read once at render
+     */
+    now?: Date | number;
+}

package/dist/time/types.d.ts

@@ -0,0 +1,29 @@
+import type { DateInput } from '../utils/dateValue.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for a readable timestamp element. */
+export interface TimeProps extends Omit<PrimitivePropsWithRef<'time'>, 'dateTime'> {
+    /**
+     * Instant to render: `Date`, ISO-8601 string, or date-only string as local date.
+     */
+    value: DateInput;
+    /**
+     * Relative label ("3 hours ago") measured from `now`; `datetime` keeps the instant.
+     * @default false
+     */
+    relative?: boolean;
+    /**
+     * When `relative`, put absolute formatted date in `title` (relative labels are lossy).
+     * @default true
+     */
+    absoluteTitle?: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — runtime locale
+     */
+    locale?: string;
+    /**
+     * Reference instant for relative labels; supply to control re-renders.
+     * @default undefined — read once at render
+     */
+    now?: Date | number;
+}

package/dist/time-field/TimeField.cjs

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

package/dist/time-field/TimeField.js

@@ -1 +1 @@
-import*as i from"react";import{buildSegments as S,isComplete as h,resolveHourCycle as v,timeStringToValues as a,valuesToTimeString as p}from"../utils/dateSegments.js";import{skdxPart as V}from"../utils/part.js";import{SegmentedField as R}from"../utils/segmentedField.js";import{useControllableState as P}from"../utils/useControllableState.js";import{jsx as k}from"react/jsx-runtime";var c=i.forwardRef(({value:T,defaultValue:m,onValueChange:g,granularity:o="minute",hourCycle:y,locale:s,...u},C)=>{let e=v(s,y),[l=null,d]=P({prop:T,defaultProp:m??null,onChange:g}),[F,n]=i.useState(()=>l?a(l,e):{});return i.useEffect(()=>{n(t=>{let r=p(t,o,e);return l===null?r===null?t:{}:r===l?t:a(l,e)})},[l,e,o]),k(R,{family:"time-field",kind:"time",granularity:o,locale:s,hourCycle:e,values:F,onValuesChange:t=>{n(t);let f=h(S({kind:"time",granularity:o,locale:s,hourCycle:e,values:t}))?p(t,o,e):null;f!==l&&d(f)},formValue:l,onFormReset:()=>{d(m??null),n(m?a(m,e):{})},...u,...V("time-field","root",u.className),ref:C})});c.displayName="TimeField";export{c as TimeField};
+import*as e from"react";import{buildSegments as N,clampValuesToTimeRange as w,isComplete as D,resolveHourCycle as G,timeRangeViolation as L,timeStringToValues as c,valuesToTimeString as S}from"../utils/dateSegments.js";import{toTimeValue as s}from"../utils/dateValue.js";import{skdxPart as O}from"../utils/part.js";import{SegmentedField as q}from"../utils/segmentedField.js";import{useControllableState as z}from"../utils/useControllableState.js";import{jsx as A}from"react/jsx-runtime";var F=e.forwardRef(({value:n,defaultValue:p,onValueChange:y,granularity:m="minute",hourCycle:C,locale:a,min:T,max:V,step:M,invalid:h=!1,...R},P)=>{let x=e.useMemo(()=>n===void 0?void 0:s(n,"value"),[n]),i=e.useMemo(()=>s(p,"defaultValue"),[p]),u=e.useMemo(()=>s(T,"min")??void 0,[T]),r=e.useMemo(()=>s(V,"max")??void 0,[V]),l=G(a,C),k=M??(m==="second"?1:60),[o=null,g]=z({prop:x,defaultProp:i??null,onChange:y}),[E,d]=e.useState(()=>o?c(o,l):{});e.useEffect(()=>{d(t=>{let f=S(t,m,l);return o===null?f===null?t:{}:f===o?t:c(o,l)})},[o,l,m]);let H=t=>{d(t);let v=D(N({kind:"time",granularity:m,locale:a,hourCycle:l,values:t}))?S(t,m,l):null;v!==o&&g(v)},b=L(o,u,r)!==null;return A(q,{family:"time-field",kind:"time",granularity:m,locale:a,hourCycle:l,values:E,onValuesChange:H,invalid:h||b,formType:"time",formMin:u,formMax:r,step:k,clampEdgeValues:t=>w(t,m,l,u,r),formValue:o,onFormReset:()=>{g(i??null),d(i?c(i,l):{})},...R,...O("time-field","root",R.className),ref:P})});F.displayName="TimeField";export{F as TimeField};

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

@@ -7,17 +7,18 @@ export type TimeGranularity = Exclude<Granularity, 'day'>;
 /** Props for the {@link TimeField} root. */
 export interface TimeFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'>, SegmentedLabelProps {
     /**
-     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, exactly like
-     * `<input type="time">`, for controlled usage. `null` while any segment is
-     * untyped. Independent of `hourCycle`, which is display only.
+     * Current time as 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
+     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
+     * any segment is untyped.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string | null;
+    value?: string | Date | null;
     /**
-     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`.
+     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`,
+     * and it accepts a `Date` on the same terms.
      * @default undefined — every segment starts on its placeholder.
      */
-    defaultValue?: string | null;
+    defaultValue?: string | Date | null;
     /**
      * Fires with the new `HH:mm[:ss]` string once every segment is filled, and
      * with `null` as soon as one is cleared.
@@ -42,6 +43,25 @@ export interface TimeFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — the runtime's default locale.
      */
     locale?: string;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape. Values before it
+     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    min?: string | Date;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
+     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    max?: string | Date;
+    /**
+     * Step increment in seconds, like `<input type="time" step>`. Arrow Up/Down
+     * on the finest segment step by one; coarser segments step by one. Times
+     * missing the grid fail constraint validation with `stepMismatch`.
+     * @default undefined — one unit of the finest segment: 60 on `minute`, 1 on `second`.
+     */
+    step?: number;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
@@ -68,6 +88,14 @@ export interface TimeFieldProps 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/time-field/types.d.ts

@@ -7,17 +7,18 @@ export type TimeGranularity = Exclude<Granularity, 'day'>;
 /** Props for the {@link TimeField} root. */
 export interface TimeFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'>, SegmentedLabelProps {
     /**
-     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, exactly like
-     * `<input type="time">`, for controlled usage. `null` while any segment is
-     * untyped. Independent of `hourCycle`, which is display only.
+     * Current time as 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
+     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
+     * any segment is untyped.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string | null;
+    value?: string | Date | null;
     /**
-     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`.
+     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`,
+     * and it accepts a `Date` on the same terms.
      * @default undefined — every segment starts on its placeholder.
      */
-    defaultValue?: string | null;
+    defaultValue?: string | Date | null;
     /**
      * Fires with the new `HH:mm[:ss]` string once every segment is filled, and
      * with `null` as soon as one is cleared.
@@ -42,6 +43,25 @@ export interface TimeFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — the runtime's default locale.
      */
     locale?: string;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape. Values before it
+     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    min?: string | Date;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
+     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    max?: string | Date;
+    /**
+     * Step increment in seconds, like `<input type="time" step>`. Arrow Up/Down
+     * on the finest segment step by one; coarser segments step by one. Times
+     * missing the grid fail constraint validation with `stepMismatch`.
+     * @default undefined — one unit of the finest segment: 60 on `minute`, 1 on `second`.
+     */
+    step?: number;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
@@ -68,6 +88,14 @@ export interface TimeFieldProps 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/timeline/Timeline.cjs

@@ -1 +1 @@
-"use strict";var b=Object.create;var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var B=(e,i)=>{for(var t in i)m(e,t,{get:i[t],enumerable:!0})},f=(e,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of q(i))!A.call(e,r)&&r!==t&&m(e,r,{get:()=>i[r],enumerable:!(s=g(i,r))||s.enumerable});return e};var o=(e,i,t)=>(t=e!=null?b(z(e)):{},f(i||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),F=e=>f(m({},"__esModule",{value:!0}),e);var G={};B(G,{Timeline:()=>c,TimelineContent:()=>l,TimelineIndicator:()=>n,TimelineItem:()=>a,TimelineSeparator:()=>p});module.exports=F(G);var T=o(require("react"),1),d=require("../utils/part.cjs"),P=require("../utils/primitive.cjs"),y=require("react/jsx-runtime"),c=T.forwardRef(({orientation:e="vertical",...i},t)=>(0,y.jsx)(P.Primitive.ol,{"data-orientation":e,...i,...(0,d.skdxPart)("timeline","root",i.className),ref:t}));c.displayName="Timeline";var R=o(require("react"),1),I=require("../utils/part.cjs"),v=require("../utils/primitive.cjs"),x=require("react/jsx-runtime"),a=R.forwardRef((e,i)=>(0,x.jsx)(v.Primitive.li,{...e,...(0,I.skdxPart)("timeline","item",e.className),ref:i}));a.displayName="TimelineItem";var N=o(require("react"),1),L=require("../utils/part.cjs"),C=require("../utils/primitive.cjs"),S=require("react/jsx-runtime"),n=N.forwardRef((e,i)=>(0,S.jsx)(C.Primitive.div,{...e,...(0,L.skdxPart)("timeline","indicator",e.className),ref:i}));n.displayName="TimelineIndicator";var k=o(require("react"),1),w=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),H=require("react/jsx-runtime"),p=k.forwardRef((e,i)=>(0,H.jsx)(E.Primitive.div,{role:"presentation","aria-hidden":"true",...e,...(0,w.skdxPart)("timeline","separator",e.className),ref:i}));p.displayName="TimelineSeparator";var M=o(require("react"),1),D=require("../utils/part.cjs"),h=require("../utils/primitive.cjs"),O=require("react/jsx-runtime"),l=M.forwardRef((e,i)=>(0,O.jsx)(h.Primitive.div,{...e,...(0,D.skdxPart)("timeline","content",e.className),ref:i}));l.displayName="TimelineContent";0&&(module.exports={Timeline,TimelineContent,TimelineIndicator,TimelineItem,TimelineSeparator});
+"use strict";var G=Object.create;var l=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var V=(e,i)=>{for(var t in i)l(e,t,{get:i[t],enumerable:!0})},P=(e,i,t,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of K(i))!U.call(e,r)&&r!==t&&l(e,r,{get:()=>i[r],enumerable:!(m=J(i,r))||m.enumerable});return e};var a=(e,i,t)=>(t=e!=null?G(Q(e)):{},P(i||!e||!e.__esModule?l(t,"default",{value:e,enumerable:!0}):t,e)),W=e=>P(l({},"__esModule",{value:!0}),e);var X={};V(X,{Timeline:()=>y,TimelineContent:()=>p,TimelineIndicator:()=>s,TimelineItem:()=>f,TimelineOpposite:()=>d,TimelineSeparator:()=>T});module.exports=W(X);var q=a(require("react"),1),z=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var R=a(require("react"),1),I=require("../utils/part.cjs"),v=require("../utils/primitive.cjs"),h=require("react/jsx-runtime"),p=R.forwardRef((e,i)=>(0,h.jsx)(v.Primitive.div,{...e,...(0,I.skdxPart)("timeline","content",e.className),ref:i}));p.displayName="TimelineContent";var n=a(require("react"),1),x=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),C=require("react/jsx-runtime"),s=n.forwardRef((e,i)=>(0,C.jsx)(N.Primitive.div,{"aria-hidden":n.Children.count(e.children)===0?"true":void 0,role:n.Children.count(e.children)===0?void 0:"img",...e,...(0,x.skdxPart)("timeline","indicator",e.className),ref:i}));s.displayName="TimelineIndicator";var L=a(require("react"),1),w=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),k=require("react/jsx-runtime"),f=L.forwardRef((e,i)=>(0,k.jsx)(b.Primitive.li,{role:"listitem",...e,...(0,w.skdxPart)("timeline","item",e.className),ref:i}));f.displayName="TimelineItem";var D=a(require("react"),1),O=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),H=require("react/jsx-runtime"),d=D.forwardRef((e,i)=>(0,H.jsx)(E.Primitive.div,{...e,...(0,O.skdxPart)("timeline","opposite",e.className),ref:i}));d.displayName="TimelineOpposite";var M=a(require("react"),1),S=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),A=require("react/jsx-runtime"),T=M.forwardRef((e,i)=>(0,A.jsx)(g.Primitive.div,{role:"presentation","aria-hidden":"true",...e,...(0,S.skdxPart)("timeline","separator",e.className),ref:i}));T.displayName="TimelineSeparator";var o=require("react/jsx-runtime"),u=({items:e=[],renderContent:i})=>(0,o.jsx)(o.Fragment,{children:e.map((t,m)=>(0,o.jsxs)(f,{"data-state":t.state,children:[t.opposite?(0,o.jsx)(d,{children:t.opposite}):null,(0,o.jsx)(s,{"aria-label":t.indicatorLabel,children:t.indicator}),m<e.length-1?(0,o.jsx)(T,{}):null,(0,o.jsx)(p,{children:i?i(t):t.content})]},m))});var c=require("react/jsx-runtime"),y=q.forwardRef(({orientation:e="vertical",items:i,renderContent:t,children:m,...r},F)=>(0,c.jsx)(B.Primitive.ol,{role:"list","data-orientation":e,...r,...(0,z.skdxPart)("timeline","root",r.className),ref:F,children:m??(0,c.jsx)(u,{items:i,renderContent:t})}));y.displayName="Timeline";0&&(module.exports={Timeline,TimelineContent,TimelineIndicator,TimelineItem,TimelineOpposite,TimelineSeparator});

package/dist/timeline/Timeline.d.cts

@@ -1,23 +1,16 @@
 import * as React from 'react';
 import type { TimelineProps } from './types.cjs';
 /**
- * Root of a timeline: renders an `<ol>` with `data-orientation` for styling.
- * Purely structural — no ARIA role or keyboard behavior beyond the semantic
- * list; layout and connecting lines are entirely up to your CSS.
+ * Timeline root — `<ol role="list">` with `data-orientation`. Emits explicit `role="list"` because `list-style: none` + grid layout drops list semantics in Safari/VoiceOver.
  *
  * @example
  * ```tsx
- * <Timeline>
- *   <TimelineItem>
- *     <TimelineIndicator />
- *     <TimelineSeparator />
- *     <TimelineContent>Order placed</TimelineContent>
- *   </TimelineItem>
- *   <TimelineItem>
- *     <TimelineIndicator />
- *     <TimelineContent>Order shipped</TimelineContent>
- *   </TimelineItem>
- * </Timeline>
+ * <Timeline
+ *   items={[
+ *     { opposite: '09:41', content: 'Order placed' },
+ *     { opposite: '11:02', content: 'Order shipped' },
+ *   ]}
+ * />
  * ```
  */
 export declare const Timeline: React.ForwardRefExoticComponent<Omit<TimelineProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/timeline/Timeline.d.ts

@@ -1,23 +1,16 @@
 import * as React from 'react';
 import type { TimelineProps } from './types.js';
 /**
- * Root of a timeline: renders an `<ol>` with `data-orientation` for styling.
- * Purely structural — no ARIA role or keyboard behavior beyond the semantic
- * list; layout and connecting lines are entirely up to your CSS.
+ * Timeline root — `<ol role="list">` with `data-orientation`. Emits explicit `role="list"` because `list-style: none` + grid layout drops list semantics in Safari/VoiceOver.
  *
  * @example
  * ```tsx
- * <Timeline>
- *   <TimelineItem>
- *     <TimelineIndicator />
- *     <TimelineSeparator />
- *     <TimelineContent>Order placed</TimelineContent>
- *   </TimelineItem>
- *   <TimelineItem>
- *     <TimelineIndicator />
- *     <TimelineContent>Order shipped</TimelineContent>
- *   </TimelineItem>
- * </Timeline>
+ * <Timeline
+ *   items={[
+ *     { opposite: '09:41', content: 'Order placed' },
+ *     { opposite: '11:02', content: 'Order shipped' },
+ *   ]}
+ * />
  * ```
  */
 export declare const Timeline: React.ForwardRefExoticComponent<Omit<TimelineProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/timeline/Timeline.js

@@ -1 +1 @@
-import*as t from"react";import{skdxPart as T}from"../utils/part.js";import{Primitive as d}from"../utils/primitive.js";import{jsx as c}from"react/jsx-runtime";var P=t.forwardRef(({orientation:e="vertical",...i},f)=>c(d.ol,{"data-orientation":e,...i,...T("timeline","root",i.className),ref:f}));P.displayName="Timeline";import*as r from"react";import{skdxPart as y}from"../utils/part.js";import{Primitive as R}from"../utils/primitive.js";import{jsx as I}from"react/jsx-runtime";var o=r.forwardRef((e,i)=>I(R.li,{...e,...y("timeline","item",e.className),ref:i}));o.displayName="TimelineItem";import*as m from"react";import{skdxPart as v}from"../utils/part.js";import{Primitive as x}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var a=m.forwardRef((e,i)=>N(x.div,{...e,...v("timeline","indicator",e.className),ref:i}));a.displayName="TimelineIndicator";import*as n from"react";import{skdxPart as L}from"../utils/part.js";import{Primitive as C}from"../utils/primitive.js";import{jsx as S}from"react/jsx-runtime";var p=n.forwardRef((e,i)=>S(C.div,{role:"presentation","aria-hidden":"true",...e,...L("timeline","separator",e.className),ref:i}));p.displayName="TimelineSeparator";import*as l from"react";import{skdxPart as k}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as E}from"react/jsx-runtime";var s=l.forwardRef((e,i)=>E(w.div,{...e,...k("timeline","content",e.className),ref:i}));s.displayName="TimelineContent";export{P as Timeline,s as TimelineContent,a as TimelineIndicator,o as TimelineItem,p as TimelineSeparator};
+import*as I from"react";import{skdxPart as z}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import*as d from"react";import{skdxPart as x}from"../utils/part.js";import{Primitive as N}from"../utils/primitive.js";import{jsx as C}from"react/jsx-runtime";var a=d.forwardRef((e,i)=>C(N.div,{...e,...x("timeline","content",e.className),ref:i}));a.displayName="TimelineContent";import*as o from"react";import{skdxPart as L}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as b}from"react/jsx-runtime";var n=o.forwardRef((e,i)=>b(w.div,{"aria-hidden":o.Children.count(e.children)===0?"true":void 0,role:o.Children.count(e.children)===0?void 0:"img",...e,...L("timeline","indicator",e.className),ref:i}));n.displayName="TimelineIndicator";import*as T from"react";import{skdxPart as k}from"../utils/part.js";import{Primitive as D}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var l=T.forwardRef((e,i)=>O(D.li,{role:"listitem",...e,...k("timeline","item",e.className),ref:i}));l.displayName="TimelineItem";import*as c from"react";import{skdxPart as E}from"../utils/part.js";import{Primitive as H}from"../utils/primitive.js";import{jsx as M}from"react/jsx-runtime";var p=c.forwardRef((e,i)=>M(H.div,{...e,...E("timeline","opposite",e.className),ref:i}));p.displayName="TimelineOpposite";import*as y from"react";import{skdxPart as S}from"../utils/part.js";import{Primitive as g}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var s=y.forwardRef((e,i)=>A(g.div,{role:"presentation","aria-hidden":"true",...e,...S("timeline","separator",e.className),ref:i}));s.displayName="TimelineSeparator";import{Fragment as q,jsx as r,jsxs as u}from"react/jsx-runtime";var P=({items:e=[],renderContent:i})=>r(q,{children:e.map((t,m)=>u(l,{"data-state":t.state,children:[t.opposite?r(p,{children:t.opposite}):null,r(n,{"aria-label":t.indicatorLabel,children:t.indicator}),m<e.length-1?r(s,{}):null,r(a,{children:i?i(t):t.content})]},m))});import{jsx as R}from"react/jsx-runtime";var v=I.forwardRef(({orientation:e="vertical",items:i,renderContent:t,children:m,...f},h)=>R(B.ol,{role:"list","data-orientation":e,...f,...z("timeline","root",f.className),ref:h,children:m??R(P,{items:i,renderContent:t})}));v.displayName="Timeline";export{v as Timeline,a as TimelineContent,n as TimelineIndicator,l as TimelineItem,p as TimelineOpposite,s as TimelineSeparator};

package/dist/timeline/TimelineAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { TimelineItem as TimelineItemData } from './types.cjs';
+/**
+ * The anatomy a {@link Timeline} draws from `items`: one per entry with
+ * optional `TimelineOpposite`, `TimelineIndicator`, `TimelineSeparator`, and `TimelineContent`.
+ * The last entry gets no separator.
+ *
+ * @internal
+ */
+export declare const TimelineAnatomy: ({ items, renderContent, }: {
+    items?: TimelineItemData[];
+    renderContent?: (item: TimelineItemData) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/timeline/TimelineAnatomy.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { TimelineItem as TimelineItemData } from './types.js';
+/**
+ * The anatomy a {@link Timeline} draws from `items`: one per entry with
+ * optional `TimelineOpposite`, `TimelineIndicator`, `TimelineSeparator`, and `TimelineContent`.
+ * The last entry gets no separator.
+ *
+ * @internal
+ */
+export declare const TimelineAnatomy: ({ items, renderContent, }: {
+    items?: TimelineItemData[];
+    renderContent?: (item: TimelineItemData) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/timeline/TimelineIndicator.d.cts

@@ -3,9 +3,16 @@ import type { TimelineIndicatorProps } from './types.cjs';
 /**
  * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
  *
+ * **Decorative by default:** empty renders `aria-hidden` so screen readers
+ * don't announce every marker. With children (icon, number, check), remove
+ * `aria-hidden` and provide an accessible name (`aria-label` or text).
+ *
+ * Silence is explicit, not inferred—matching {@link TimelineSeparator}'s approach.
+ *
  * @example
  * ```tsx
  * <TimelineIndicator />
+ * <TimelineIndicator aria-label="Completed">✓</TimelineIndicator>
  * ```
  */
 export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineIndicator.d.ts

@@ -3,9 +3,16 @@ import type { TimelineIndicatorProps } from './types.js';
 /**
  * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
  *
+ * **Decorative by default:** empty renders `aria-hidden` so screen readers
+ * don't announce every marker. With children (icon, number, check), remove
+ * `aria-hidden` and provide an accessible name (`aria-label` or text).
+ *
+ * Silence is explicit, not inferred—matching {@link TimelineSeparator}'s approach.
+ *
  * @example
  * ```tsx
  * <TimelineIndicator />
+ * <TimelineIndicator aria-label="Completed">✓</TimelineIndicator>
  * ```
  */
 export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineItem.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TimelineItemProps } from './types.cjs';
 /**
- * A single `<li>` entry in the timeline, typically composing a
- * `TimelineIndicator`, an optional `TimelineSeparator`, and `TimelineContent`.
- *
+ * A single `<li role="listitem">` entry in the timeline; `role` is explicit since `display: grid` loses the implicit role in Safari/VoiceOver.
  * @example
  * ```tsx
  * <TimelineItem>

package/dist/timeline/TimelineItem.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TimelineItemProps } from './types.js';
 /**
- * A single `<li>` entry in the timeline, typically composing a
- * `TimelineIndicator`, an optional `TimelineSeparator`, and `TimelineContent`.
- *
+ * A single `<li role="listitem">` entry in the timeline; `role` is explicit since `display: grid` loses the implicit role in Safari/VoiceOver.
  * @example
  * ```tsx
  * <TimelineItem>

package/dist/timeline/TimelineOpposite.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TimelineOppositeProps } from './types.cjs';
+/**
+ * Metadata opposite the event on a {@link TimelineItem} — renders in a dedicated grid column.
+ *
+ * Render **before** `TimelineIndicator` so screen readers follow visual order.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineOpposite>09:41</TimelineOpposite>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineOpposite: React.ForwardRefExoticComponent<Omit<TimelineOppositeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineOpposite.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TimelineOppositeProps } from './types.js';
+/**
+ * Metadata opposite the event on a {@link TimelineItem} — renders in a dedicated grid column.
+ *
+ * Render **before** `TimelineIndicator` so screen readers follow visual order.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineOpposite>09:41</TimelineOpposite>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineOpposite: React.ForwardRefExoticComponent<Omit<TimelineOppositeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineSeparator.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TimelineSeparatorProps } from './types.cjs';
 /**
- * The connecting line between two {@link TimelineItem}s: renders a
- * `<div role="presentation" aria-hidden="true">` — decorative, hidden from
- * assistive tech.
+ * Connecting line between {@link TimelineItem}s: decorative, hidden from assistive tech via `role="presentation"` and `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/timeline/TimelineSeparator.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TimelineSeparatorProps } from './types.js';
 /**
- * The connecting line between two {@link TimelineItem}s: renders a
- * `<div role="presentation" aria-hidden="true">` — decorative, hidden from
- * assistive tech.
+ * Connecting line between {@link TimelineItem}s: decorative, hidden from assistive tech via `role="presentation"` and `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/timeline/index.d.cts

@@ -1,6 +1,2 @@
-export * from './Timeline.cjs';
-export { TimelineItem } from './TimelineItem.cjs';
-export { TimelineIndicator } from './TimelineIndicator.cjs';
-export { TimelineSeparator } from './TimelineSeparator.cjs';
-export { TimelineContent } from './TimelineContent.cjs';
-export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, } from './types.cjs';
+export { Timeline } from './Timeline.cjs';
+export type { TimelineProps, TimelineItem } from './types.cjs';

package/dist/timeline/index.d.ts

@@ -1,6 +1,2 @@
-export * from './Timeline.js';
-export { TimelineItem } from './TimelineItem.js';
-export { TimelineIndicator } from './TimelineIndicator.js';
-export { TimelineSeparator } from './TimelineSeparator.js';
-export { TimelineContent } from './TimelineContent.js';
-export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, } from './types.js';
+export { Timeline } from './Timeline.js';
+export type { TimelineProps, TimelineItem } from './types.js';