@skdx/react 0.28.0 → 0.29.0

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

@@ -5,22 +5,22 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 export interface TextFieldContextValue {
     inputId: string;
     disabled: boolean;
+    readOnly: boolean;
     invalid: boolean;
     required: boolean;
     value: string;
     setValue: (value: string) => void;
     /** Submitted under this key by the wrapped input; `undefined` submits nothing. */
-    name?: string;
+    name?: string | undefined;
     /** Id of the `<form>` the wrapped input submits with; `undefined` uses the enclosing one. */
-    form?: string;
+    form?: string | undefined;
     /** The wrapped `<input>`, so the root can answer `checkValidity()` off it and find the owning form. */
     inputRef: React.RefObject<HTMLInputElement | null>;
+    /** Root `id` and aria attributes that belong on the wrapped input, so `FormControl` and `Field` wiring lands there. */
+    forwarded: Pick<React.ComponentProps<'input'>, 'id' | 'aria-describedby' | 'aria-invalid' | 'aria-labelledby'>;
 }
 /**
- * The forwarded ref's handle: the root `<div>` with constraint-validation
- * methods and validity accessors. `validity` and `validationMessage` are live
- * getters over the wrapped `<input>`, so a consumer can check why the field is
- * invalid (`ref.current.validity.valueMissing`) without accessing the hidden input.
+ * The forwarded ref's handle: the root `<div>` with constraint-validation methods and live `validity`/`validationMessage` getters over the wrapped `<input>`.
  */
 export type TextFieldHandle = HTMLDivElement & FormValidityHandle & FormValidityStateView;
 /** Props for the {@link TextField} root. */
@@ -29,97 +29,107 @@ export interface TextFieldProps extends PrimitivePropsWithRef<'div'> {
      * Disables the field and the input it wraps.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Marks the field as invalid, exposed as `data-invalid` on the root and
      * `aria-invalid`/`data-invalid` on the input.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks the wrapped input as required.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Current value, for controlled usage. Pair with `onValueChange`.
+     * Current value, for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial value, for uncontrolled usage — seeds the internally-tracked value.
      * @default undefined — starts empty.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the new value whenever the input changes, controlled or not.
      * @default undefined — no-op.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /**
-     * Form field name, set on the wrapped native `<input>` — so the field
-     * submits its value with the surrounding `<form>`, mirrors that input's own
-     * `ValidityState` through `checkValidity()`/`reportValidity()`, and is
-     * restored to `defaultValue` when the form is reset. Without it the field
-     * submits nothing, exactly like a nameless native input.
+     * Form field name, set on the wrapped native `<input>` so the field submits, validates, and resets with the surrounding `<form>`.
      * @default undefined — submits nothing.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Id of the `<form>` this field submits with, put on the wrapped native
-     * `<input>` as its `form` attribute — so a field rendered outside that form's
-     * subtree (in a portal, a dialog, a sticky footer) still submits with it, and
-     * is still restored by its reset. Without it the field belongs to its nearest
-     * ancestor `<form>`, exactly like a native input.
+     * Id of the `<form>` this field submits with, put on the wrapped native `<input>` as its `form` attribute.
      * @default undefined — the enclosing `<form>`.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Renders a derived `TextFieldClearButton` once the field has a value.
-     * Ignored when `children` is given.
+     * Renders a derived `TextFieldClearButton` once the field has a value; ignored when `children` is given.
      * @default false
      */
-    clearable?: boolean;
+    clearable?: boolean | undefined;
     /**
-     * The derived clear button's accessible name. Hoisted from
-     * {@link TextFieldClearButtonProps.label}. Only meaningful with `clearable`.
+     * The derived clear button's accessible name, meaningful only with `clearable`.
      * @default 'Clear'
      */
-    clearLabel?: string;
+    clearLabel?: string | undefined;
     /**
-     * Renders a leading `TextFieldSlot` holding this content, before the input.
-     * Ignored when `children` is given.
+     * Renders a leading `TextFieldSlot` holding this content, before the input; ignored when `children` is given.
      * @default undefined — no leading slot rendered.
      */
-    leading?: React.ReactNode;
+    leading?: React.ReactNode | undefined;
     /**
-     * Renders a trailing `TextFieldSlot` holding this content, after the input.
-     * Ignored when `children` is given.
+     * Renders a trailing `TextFieldSlot` holding this content, after the input; ignored when `children` is given.
      * @default undefined — no trailing slot rendered.
      */
-    trailing?: React.ReactNode;
+    trailing?: React.ReactNode | undefined;
     /**
-     * Placeholder for the derived input. The root does not forward arbitrary
-     * input attributes, so this is the route to it. Ignored when `children` is
-     * given — set `placeholder` directly on your own `TextFieldInput` instead.
+     * Placeholder for the derived input; ignored when `children` is given, since the root forwards no arbitrary input attributes.
      * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * Native `readonly` for the derived input. Ignored when `children` is
-     * given — set `readOnly` directly on your own `TextFieldInput` instead.
+     * Native `type` for the derived input, such as `'email'` or `'search'`; ignored when `children` is given.
+     * @default 'text'
+     */
+    type?: string | undefined;
+    /**
+     * Native `readonly` for the derived input; ignored when `children` is given.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Size rung the skin scales the field by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual weight rung the skin gives the field, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 }
 /** Props for {@link TextFieldInput}, the native `<input>` driven by `TextField`'s context. */
-export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'size'> {
     /**
      * Native `readonly`: value stays selectable, copyable, focusable and submitted,
      * but editing is blocked — unlike `disabled` on the root.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Size rung the skin scales the input by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual weight rung the skin gives the input, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 }
 /** Props for {@link TextFieldSlot}, a decorative container for icons/adornments beside the input. */
 export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
@@ -127,7 +137,7 @@ export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
      * Which end of the field this slot sits at, exposed as `data-side`.
      * @default 'start'
      */
-    side?: 'start' | 'end';
+    side?: 'start' | 'end' | undefined;
 }
 /** Props for {@link TextFieldClearButton}, a button that resets the field's value to empty. */
 export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button'> {
@@ -135,11 +145,10 @@ export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button
      * Keep mounted even when the field is empty or uncontrolled (for exit animations).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Accessible name for the button (icon-only, no text). A directly-written
-     * `aria-label` still wins.
+     * Accessible name for the button (icon-only, no text); a directly-written `aria-label` still wins.
      * @default 'Clear'
      */
-    label?: string;
+    label?: string | undefined;
 }

package/dist/textarea/Textarea.cjs

@@ -1 +1,2 @@
-"use strict";var k=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of z(t))!I.call(e,r)&&r!==o&&p(e,r,{get:()=>t[r],enumerable:!(i=w(t,r))||i.enumerable});return e};var R=(e,t,o)=>(o=e!=null?k(A(e)):{},v(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),S=e=>v(p({},"__esModule",{value:!0}),e);var W={};N(W,{Textarea:()=>E});module.exports=S(W);var n=R(require("react"),1),P=require("../utils/composeRefs.cjs"),B=require("../utils/part.cjs"),u=require("../utils/primitive.cjs"),M=require("react/jsx-runtime"),E=n.forwardRef(({autoResize:e=!1,maxRows:t,minRows:o=2,invalid:i=!1,readOnly:r=!1,style:h,...s},C)=>{let g=n.useRef(null),L=(0,P.useComposedRefs)(C,g),c=n.useCallback(()=>{let d=g.current;if(!d||!e)return;let a=getComputedStyle(d),l=x=>parseFloat(x)||0,T=l(a.borderTopWidth)+l(a.borderBottomWidth),y=l(a.paddingTop)+l(a.paddingBottom),b=a.boxSizing==="border-box",m=l(a.lineHeight),H=x=>x*m+(b?y+T:0);d.style.height="auto";let f=d.scrollHeight+(b?T:-y);o!=null&&m>0&&(f=Math.max(f,H(o))),t!=null&&m>0&&(f=Math.min(f,H(t))),d.style.height=`${f}px`},[e,t,o]);return n.useLayoutEffect(()=>{c()},[c,s.value,s.defaultValue]),(0,M.jsx)(u.Primitive.textarea,{rows:e?void 0:o,readOnly:r,"aria-invalid":i?!0:void 0,"aria-readonly":r?!0:void 0,"data-invalid":i?"":void 0,"data-readonly":r?"":void 0,...s,...(0,B.skdxPart)("textarea","root",s.className),ref:L,style:e?{overflow:"hidden",resize:"none",...h}:h,onInput:(0,u.composeEventHandlers)(s.onInput,c)})});E.displayName="Textarea";0&&(module.exports={Textarea});
+'use client';
+"use strict";var b=Object.create;var f=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var a in t)f(e,a,{get:t[a],enumerable:!0})},m=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of E(t))!N.call(e,r)&&r!==a&&f(e,r,{get:()=>t[r],enumerable:!(d=C(t,r))||d.enumerable});return e};var k=(e,t,a)=>(a=e!=null?b(H(e)):{},m(t||!e||!e.__esModule?f(a,"default",{value:e,enumerable:!0}):a,e)),I=e=>m(f({},"__esModule",{value:!0}),e);var L={};g(L,{Textarea:()=>v});module.exports=I(L);var n=k(require("react"),1),c=require("../utils/appearance.cjs"),x=require("../utils/composeRefs.cjs"),y=require("../utils/measure-auto-resize.cjs"),T=require("../utils/part.cjs"),i=require("../utils/primitive.cjs"),R=require("react/jsx-runtime"),v=({autoResize:e=!1,maxRows:t,minRows:a=2,invalid:d=!1,readOnly:r=!1,style:u,ref:h,resize:P,...o})=>{let p=n.useRef(null),A=(0,x.useComposedRefs)(h,p),s=n.useCallback(()=>{let l=p.current;!l||!e||(l.style.height=`${(0,y.measureAutoResizeHeight)(l,t,a)}px`)},[e,t,a]);return n.useLayoutEffect(()=>{s()},[s,o.value,o.defaultValue]),(0,R.jsx)(i.Primitive.textarea,{rows:e?void 0:a,readOnly:r,"aria-invalid":d?!0:void 0,"aria-readonly":r?!0:void 0,"data-invalid":d?"":void 0,"data-readonly":r?"":void 0,"data-disabled":o.disabled?"":void 0,...o,...(0,c.appearanceAttrs)({resize:P},o),...(0,T.skdxPart)("textarea","root",o.className),ref:A,style:e?{overflow:"hidden",resize:"none",...u}:u,onInput:(0,i.useComposedEventHandlers)(o.onInput,s)})};v.displayName="Textarea";0&&(module.exports={Textarea});

package/dist/textarea/Textarea.d.cts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import type { TextareaProps } from './types.cjs';
 /**
- * Wrapper around native `<textarea>`. `autoResize` grows height to fit content
- * instead of scrolling, optionally capped to `maxRows` and floored at `minRows`.
- * Renders `aria-invalid`/`data-invalid` when `invalid`, and native `readOnly`
- * attribute plus `aria-readonly`/`data-readonly` when `readOnly`.
+ * Wrapper around a native `<textarea>` that can auto-resize its height to fit content instead of scrolling.
  *
  * @example
  * ```tsx
  * <Textarea placeholder="Write a message…" autoResize maxRows={8} />
  * ```
  */
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: {
+    ({ autoResize, maxRows, minRows, invalid, readOnly, style, ref: forwardedRef, resize, ...props }: TextareaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/textarea/Textarea.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import type { TextareaProps } from './types.js';
 /**
- * Wrapper around native `<textarea>`. `autoResize` grows height to fit content
- * instead of scrolling, optionally capped to `maxRows` and floored at `minRows`.
- * Renders `aria-invalid`/`data-invalid` when `invalid`, and native `readOnly`
- * attribute plus `aria-readonly`/`data-readonly` when `readOnly`.
+ * Wrapper around a native `<textarea>` that can auto-resize its height to fit content instead of scrolling.
  *
  * @example
  * ```tsx
  * <Textarea placeholder="Write a message…" autoResize maxRows={8} />
  * ```
  */
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: {
+    ({ autoResize, maxRows, minRows, invalid, readOnly, style, ref: forwardedRef, resize, ...props }: TextareaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/textarea/Textarea.js

@@ -1 +1,2 @@
-import*as e from"react";import{useComposedRefs as v}from"../utils/composeRefs.js";import{skdxPart as P}from"../utils/part.js";import{composeEventHandlers as B,Primitive as E}from"../utils/primitive.js";import{jsx as C}from"react/jsx-runtime";var M=e.forwardRef(({autoResize:i=!1,maxRows:d,minRows:s=2,invalid:c=!1,readOnly:l=!1,style:m,...o},b)=>{let x=e.useRef(null),H=v(b,x),f=e.useCallback(()=>{let r=x.current;if(!r||!i)return;let t=getComputedStyle(r),n=u=>parseFloat(u)||0,h=n(t.borderTopWidth)+n(t.borderBottomWidth),g=n(t.paddingTop)+n(t.paddingBottom),T=t.boxSizing==="border-box",p=n(t.lineHeight),y=u=>u*p+(T?g+h:0);r.style.height="auto";let a=r.scrollHeight+(T?h:-g);s!=null&&p>0&&(a=Math.max(a,y(s))),d!=null&&p>0&&(a=Math.min(a,y(d))),r.style.height=`${a}px`},[i,d,s]);return e.useLayoutEffect(()=>{f()},[f,o.value,o.defaultValue]),C(E.textarea,{rows:i?void 0:s,readOnly:l,"aria-invalid":c?!0:void 0,"aria-readonly":l?!0:void 0,"data-invalid":c?"":void 0,"data-readonly":l?"":void 0,...o,...P("textarea","root",o.className),ref:H,style:i?{overflow:"hidden",resize:"none",...m}:m,onInput:B(o.onInput,f)})});M.displayName="Textarea";export{M as Textarea};
+'use client';
+import*as t from"react";import{appearanceAttrs as c}from"../utils/appearance.js";import{useComposedRefs as x}from"../utils/composeRefs.js";import{measureAutoResizeHeight as y}from"../utils/measure-auto-resize.js";import{skdxPart as T}from"../utils/part.js";import{Primitive as v,useComposedEventHandlers as R}from"../utils/primitive.js";import{jsx as P}from"react/jsx-runtime";var h=({autoResize:a=!1,maxRows:f,minRows:r=2,invalid:i=!1,readOnly:o=!1,style:s,ref:u,resize:p,...e})=>{let l=t.useRef(null),m=x(u,l),n=t.useCallback(()=>{let d=l.current;!d||!a||(d.style.height=`${y(d,f,r)}px`)},[a,f,r]);return t.useLayoutEffect(()=>{n()},[n,e.value,e.defaultValue]),P(v.textarea,{rows:a?void 0:r,readOnly:o,"aria-invalid":i?!0:void 0,"aria-readonly":o?!0:void 0,"data-invalid":i?"":void 0,"data-readonly":o?"":void 0,"data-disabled":e.disabled?"":void 0,...e,...c({resize:p},e),...T("textarea","root",e.className),ref:m,style:a?{overflow:"hidden",resize:"none",...s}:s,onInput:R(e.onInput,n)})};h.displayName="Textarea";export{h as Textarea};

package/dist/textarea/types.d.cts

@@ -1,53 +1,56 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /**
- * 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`.
+ * Props for the {@link Textarea}, a wrapper around a native `<textarea>`, inheriting `name`, `required`, `rows`, and other native attributes directly.
  */
 export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
     /**
-     * Current text content, for controlled usage. Pair with `onChange`.
+     * Current text content, for controlled usage; pair with `onChange`.
      * @default undefined — uncontrolled, seeded from `defaultValue`.
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * Initial text content for uncontrolled usage. Read only on mount when `value` is unbound.
+     * Initial text content for uncontrolled usage, read only on mount when `value` is unbound.
      * @default undefined — an empty textarea.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Native `maxlength` — longest value the control accepts, reported as `tooLong`.
      * @default undefined — no upper bound on the value's length.
      */
-    maxLength?: number;
+    maxLength?: number | undefined;
     /**
      * Native `minlength` — shortest value constraint validation accepts, reported as `tooShort`.
      * @default undefined — no lower bound on the value's length.
      */
-    minLength?: number;
+    minLength?: number | undefined;
     /**
      * Grow the textarea to fit its content instead of showing a scrollbar.
      * @default false
      */
-    autoResize?: boolean;
+    autoResize?: boolean | undefined;
     /**
      * Caps auto-resize growth to this many rows, based on computed line-height.
      * @default undefined — grows without limit.
      */
-    maxRows?: number;
+    maxRows?: number | undefined;
     /**
-     * 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.
+     * The control's opening size and the floor `autoResize` will not shrink below, rendered as the native `rows` attribute when off.
      * @default 2 — the platform's own `rows` default, so an unmarked textarea is unchanged.
      */
-    minRows?: number;
+    minRows?: number | undefined;
     /**
      * Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Makes the textarea read-only, exposed as the native `readOnly` attribute plus `aria-readonly`/`data-readonly`.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Which axes the user may resize along, mirrored to `data-resize`.
+     * @default undefined — the browser's own resize behaviour.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
 }

package/dist/textarea/types.d.ts

@@ -1,53 +1,56 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /**
- * 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`.
+ * Props for the {@link Textarea}, a wrapper around a native `<textarea>`, inheriting `name`, `required`, `rows`, and other native attributes directly.
  */
 export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
     /**
-     * Current text content, for controlled usage. Pair with `onChange`.
+     * Current text content, for controlled usage; pair with `onChange`.
      * @default undefined — uncontrolled, seeded from `defaultValue`.
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * Initial text content for uncontrolled usage. Read only on mount when `value` is unbound.
+     * Initial text content for uncontrolled usage, read only on mount when `value` is unbound.
      * @default undefined — an empty textarea.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Native `maxlength` — longest value the control accepts, reported as `tooLong`.
      * @default undefined — no upper bound on the value's length.
      */
-    maxLength?: number;
+    maxLength?: number | undefined;
     /**
      * Native `minlength` — shortest value constraint validation accepts, reported as `tooShort`.
      * @default undefined — no lower bound on the value's length.
      */
-    minLength?: number;
+    minLength?: number | undefined;
     /**
      * Grow the textarea to fit its content instead of showing a scrollbar.
      * @default false
      */
-    autoResize?: boolean;
+    autoResize?: boolean | undefined;
     /**
      * Caps auto-resize growth to this many rows, based on computed line-height.
      * @default undefined — grows without limit.
      */
-    maxRows?: number;
+    maxRows?: number | undefined;
     /**
-     * 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.
+     * The control's opening size and the floor `autoResize` will not shrink below, rendered as the native `rows` attribute when off.
      * @default 2 — the platform's own `rows` default, so an unmarked textarea is unchanged.
      */
-    minRows?: number;
+    minRows?: number | undefined;
     /**
      * Marks the textarea as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Makes the textarea read-only, exposed as the native `readOnly` attribute plus `aria-readonly`/`data-readonly`.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Which axes the user may resize along, mirrored to `data-resize`.
+     * @default undefined — the browser's own resize behaviour.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
 }

package/dist/time/Time.cjs

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

package/dist/time/Time.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * `<time datetime>` element with a machine-readable instant and reader-friendly text, switching to a relative label like "3 hours ago" when `relative` is set.
  *
  * @example
  * ```tsx
@@ -11,4 +9,7 @@ import type { TimeProps } from './types.cjs';
  * <Time value={updatedAt} relative now={tick} />
  * ```
  */
-export declare const Time: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HTMLTimeElement>>;
+export declare const Time: {
+    ({ value, relative, absoluteTitle, locale, now, children, ref: forwardedRef, ...props }: TimeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/time/Time.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * `<time datetime>` element with a machine-readable instant and reader-friendly text, switching to a relative label like "3 hours ago" when `relative` is set.
  *
  * @example
  * ```tsx
@@ -11,4 +9,7 @@ import type { TimeProps } from './types.js';
  * <Time value={updatedAt} relative now={tick} />
  * ```
  */
-export declare const Time: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HTMLTimeElement>>;
+export declare const Time: {
+    ({ value, relative, absoluteTitle, locale, now, children, ref: forwardedRef, ...props }: TimeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/time/Time.js

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

package/dist/time/types.d.cts

@@ -1,29 +1,27 @@
-import type { DateInput } from '../utils/dateValue.cjs';
+import type { DateInput } from '../utils/date-value.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.
-     */
+    /** 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;
+    relative?: boolean | undefined;
     /**
      * When `relative`, put absolute formatted date in `title` (relative labels are lossy).
      * @default true
      */
-    absoluteTitle?: boolean;
+    absoluteTitle?: boolean | undefined;
     /**
      * BCP-47 locale for the formatted text.
      * @default undefined — runtime locale
      */
-    locale?: string;
+    locale?: string | undefined;
     /**
      * Reference instant for relative labels; supply to control re-renders.
      * @default undefined — read once at render
      */
-    now?: Date | number;
+    now?: Date | number | undefined;
 }

package/dist/time/types.d.ts

@@ -1,29 +1,27 @@
-import type { DateInput } from '../utils/dateValue.js';
+import type { DateInput } from '../utils/date-value.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.
-     */
+    /** 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;
+    relative?: boolean | undefined;
     /**
      * When `relative`, put absolute formatted date in `title` (relative labels are lossy).
      * @default true
      */
-    absoluteTitle?: boolean;
+    absoluteTitle?: boolean | undefined;
     /**
      * BCP-47 locale for the formatted text.
      * @default undefined — runtime locale
      */
-    locale?: string;
+    locale?: string | undefined;
     /**
      * Reference instant for relative labels; supply to control re-renders.
      * @default undefined — read once at render
      */
-    now?: Date | number;
+    now?: Date | number | undefined;
 }

package/dist/time-field/TimeField.cjs

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

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

@@ -1,24 +1,17 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { TimeFieldProps } from './types.cjs';
 /**
- * Segmented keyboard entry of a time of day. Same segment machinery as
- * `DateField`, restricted to the time segments: a `role="group"` holding one
- * `role="spinbutton"` per segment, ordered by
- * `Intl.DateTimeFormat.formatToParts` for the active locale, with an AM/PM
- * segment whenever the resolved hour cycle is 12.
- *
- * `value` is a 24-hour `HH:mm` string, exactly like `<input type="time">` — a
- * time is not a date, and a `Date` carrying a meaningless epoch day is a trap.
- * `hourCycle` only changes what is rendered, so a value round-trips unchanged
- * through a cycle switch.
- *
- * Arrow Up/Down step the focused segment (wrapping), Arrow Left/Right move
- * between segments, digits type with roll-over, `A`/`P` set the AM/PM segment,
- * and Backspace/Delete clear back to the placeholder.
+ * Segmented keyboard entry of a time of day, rendering one spinbutton per segment (with AM/PM when the resolved hour cycle is 12) and emitting a 24-hour `HH:mm[:ss]` string.
  *
  * @example
  * ```tsx
  * <TimeField aria-label="Start time" defaultValue="09:30" hourCycle={12} />
  * ```
  */
-export declare const TimeField: React.ForwardRefExoticComponent<Omit<TimeFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimeField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, min: minInput, max: maxInput, step, invalid, ref: forwardedRef, ...props }: Omit<TimeFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/time-field/TimeField.d.ts

@@ -1,24 +1,17 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { TimeFieldProps } from './types.js';
 /**
- * Segmented keyboard entry of a time of day. Same segment machinery as
- * `DateField`, restricted to the time segments: a `role="group"` holding one
- * `role="spinbutton"` per segment, ordered by
- * `Intl.DateTimeFormat.formatToParts` for the active locale, with an AM/PM
- * segment whenever the resolved hour cycle is 12.
- *
- * `value` is a 24-hour `HH:mm` string, exactly like `<input type="time">` — a
- * time is not a date, and a `Date` carrying a meaningless epoch day is a trap.
- * `hourCycle` only changes what is rendered, so a value round-trips unchanged
- * through a cycle switch.
- *
- * Arrow Up/Down step the focused segment (wrapping), Arrow Left/Right move
- * between segments, digits type with roll-over, `A`/`P` set the AM/PM segment,
- * and Backspace/Delete clear back to the placeholder.
+ * Segmented keyboard entry of a time of day, rendering one spinbutton per segment (with AM/PM when the resolved hour cycle is 12) and emitting a 24-hour `HH:mm[:ss]` string.
  *
  * @example
  * ```tsx
  * <TimeField aria-label="Start time" defaultValue="09:30" hourCycle={12} />
  * ```
  */
-export declare const TimeField: React.ForwardRefExoticComponent<Omit<TimeFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimeField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, min: minInput, max: maxInput, step, invalid, ref: forwardedRef, ...props }: Omit<TimeFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};