@skdx/react 0.26.0

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { TextFieldClearButtonProps } from './types.js';
+/**
+ * A button that resets a {@link TextField}'s value to the empty string.
+ * Renders only once the field has a non-empty value, unless `forceMount` is
+ * set. Renders a `<button type="button" aria-label="Clear">`; provide your
+ * own `aria-label` to override the default.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <TextFieldInput />
+ *   <TextFieldClearButton>
+ *     <XIcon />
+ *   </TextFieldClearButton>
+ * </TextField>
+ * ```
+ */
+export declare const TextFieldClearButton: React.ForwardRefExoticComponent<Omit<TextFieldClearButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/text-field/TextFieldInput.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TextFieldInputProps } from './types.cjs';
+/**
+ * The native `<input>` for a {@link TextField}. Reads value/disabled/required
+ * from `TextField` context and writes back to it on change, so it must be
+ * rendered inside a `TextField`. Sets `id` (matching a `Label`'s `htmlFor`),
+ * `aria-invalid`, and `data-disabled`/`data-invalid` from context.
+ *
+ * Also carries the root's `name`, so this is the element that actually submits
+ * with the form and the one whose `ValidityState` the root's
+ * `checkValidity()`/`reportValidity()` report.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <TextFieldInput placeholder="Email" />
+ * </TextField>
+ * ```
+ */
+export declare const TextFieldInput: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TextFieldInputProps } from './types.js';
+/**
+ * The native `<input>` for a {@link TextField}. Reads value/disabled/required
+ * from `TextField` context and writes back to it on change, so it must be
+ * rendered inside a `TextField`. Sets `id` (matching a `Label`'s `htmlFor`),
+ * `aria-invalid`, and `data-disabled`/`data-invalid` from context.
+ *
+ * Also carries the root's `name`, so this is the element that actually submits
+ * with the form and the one whose `ValidityState` the root's
+ * `checkValidity()`/`reportValidity()` report.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <TextFieldInput placeholder="Email" />
+ * </TextField>
+ * ```
+ */
+export declare const TextFieldInput: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/text-field/TextFieldSlot.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TextFieldSlotProps } from './types.cjs';
+/**
+ * A decorative container for an icon or adornment placed at the start or end
+ * of a {@link TextField}. Renders a plain `<span>` with `data-side` set from
+ * the `side` prop — purely presentational, no context reads.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <TextFieldSlot side="start">
+ *     <SearchIcon />
+ *   </TextFieldSlot>
+ *   <TextFieldInput placeholder="Search…" />
+ * </TextField>
+ * ```
+ */
+export declare const TextFieldSlot: React.ForwardRefExoticComponent<Omit<TextFieldSlotProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TextFieldSlotProps } from './types.js';
+/**
+ * A decorative container for an icon or adornment placed at the start or end
+ * of a {@link TextField}. Renders a plain `<span>` with `data-side` set from
+ * the `side` prop — purely presentational, no context reads.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   <TextFieldSlot side="start">
+ *     <SearchIcon />
+ *   </TextFieldSlot>
+ *   <TextFieldInput placeholder="Search…" />
+ * </TextField>
+ * ```
+ */
+export declare const TextFieldSlot: React.ForwardRefExoticComponent<Omit<TextFieldSlotProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,5 @@
+export * from './TextField.cjs';
+export { TextFieldInput } from './TextFieldInput.cjs';
+export { TextFieldSlot } from './TextFieldSlot.cjs';
+export { TextFieldClearButton } from './TextFieldClearButton.cjs';
+export type { TextFieldProps, TextFieldHandle, TextFieldInputProps, TextFieldSlotProps, TextFieldClearButtonProps, } from './types.cjs';

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

@@ -0,0 +1,5 @@
+export * from './TextField.js';
+export { TextFieldInput } from './TextFieldInput.js';
+export { TextFieldSlot } from './TextFieldSlot.js';
+export { TextFieldClearButton } from './TextFieldClearButton.js';
+export type { TextFieldProps, TextFieldHandle, TextFieldInputProps, TextFieldSlotProps, TextFieldClearButtonProps, } from './types.js';

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

@@ -0,0 +1,84 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link TextField} to its parts via context. Not part of the public API. */
+export interface TextFieldContextValue {
+    inputId: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    value: string;
+    setValue: (value: string) => void;
+    /** Submitted under this key by the wrapped input; `undefined` submits nothing. */
+    name?: string;
+    /** The wrapped `<input>`, so the root can answer `checkValidity()` off it and find the owning form. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+/**
+ * What {@link TextField}'s forwarded ref carries: the root `<div>` plus the
+ * two constraint-validation methods. Type your ref as this to call them —
+ * `React.useRef<TextFieldHandle>(null)`.
+ */
+export type TextFieldHandle = HTMLDivElement & FormValidityHandle;
+/** Props for the {@link TextField} root. */
+export interface TextFieldProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables the field and the input it wraps.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `data-invalid` on the root and
+     * `aria-invalid`/`data-invalid` on the input.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the wrapped input as required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Current value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string;
+    /**
+     * Initial value, for uncontrolled usage — seeds the internally-tracked value.
+     * @default undefined — starts empty.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the input changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * 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.
+     * @default undefined — submits nothing.
+     */
+    name?: string;
+}
+/** Props for {@link TextFieldInput}, the native `<input>` driven by `TextField`'s context. */
+export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}
+/** Props for {@link TextFieldSlot}, a decorative container for icons/adornments beside the input. */
+export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Which end of the field this slot sits at, exposed as `data-side`.
+     * @default 'start'
+     */
+    side?: 'start' | 'end';
+}
+/** Props for {@link TextFieldClearButton}, a button that resets the field's value to empty. */
+export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Keep mounted even when the field is empty or uncontrolled (for exit animations).
+     * @default false
+     */
+    forceMount?: boolean;
+}

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

@@ -0,0 +1,84 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link TextField} to its parts via context. Not part of the public API. */
+export interface TextFieldContextValue {
+    inputId: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    value: string;
+    setValue: (value: string) => void;
+    /** Submitted under this key by the wrapped input; `undefined` submits nothing. */
+    name?: string;
+    /** The wrapped `<input>`, so the root can answer `checkValidity()` off it and find the owning form. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+/**
+ * What {@link TextField}'s forwarded ref carries: the root `<div>` plus the
+ * two constraint-validation methods. Type your ref as this to call them —
+ * `React.useRef<TextFieldHandle>(null)`.
+ */
+export type TextFieldHandle = HTMLDivElement & FormValidityHandle;
+/** Props for the {@link TextField} root. */
+export interface TextFieldProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables the field and the input it wraps.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `data-invalid` on the root and
+     * `aria-invalid`/`data-invalid` on the input.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the wrapped input as required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Current value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string;
+    /**
+     * Initial value, for uncontrolled usage — seeds the internally-tracked value.
+     * @default undefined — starts empty.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the input changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * 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.
+     * @default undefined — submits nothing.
+     */
+    name?: string;
+}
+/** Props for {@link TextFieldInput}, the native `<input>` driven by `TextField`'s context. */
+export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}
+/** Props for {@link TextFieldSlot}, a decorative container for icons/adornments beside the input. */
+export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Which end of the field this slot sits at, exposed as `data-side`.
+     * @default 'start'
+     */
+    side?: 'start' | 'end';
+}
+/** Props for {@link TextFieldClearButton}, a button that resets the field's value to empty. */
+export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Keep mounted even when the field is empty or uncontrolled (for exit animations).
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/textarea/Textarea.cjs

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

package/dist/textarea/Textarea.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TextareaProps } from './types.cjs';
+/**
+ * Headless wrapper around a native `<textarea>`. With `autoResize`, it grows
+ * its height to fit content (via a layout effect and an `onInput` listener,
+ * disabling manual `resize` and `overflow`) instead of scrolling, optionally
+ * capped to `maxRows` computed lines. Renders `aria-invalid`/`data-invalid`
+ * when `invalid` is set, and the native `readOnly` attribute plus
+ * `aria-readonly`/`data-readonly` when `readOnly` is set.
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Write a message…" autoResize maxRows={8} />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea/Textarea.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TextareaProps } from './types.js';
+/**
+ * Headless wrapper around a native `<textarea>`. With `autoResize`, it grows
+ * its height to fit content (via a layout effect and an `onInput` listener,
+ * disabling manual `resize` and `overflow`) instead of scrolling, optionally
+ * capped to `maxRows` computed lines. Renders `aria-invalid`/`data-invalid`
+ * when `invalid` is set, and the native `readOnly` attribute plus
+ * `aria-readonly`/`data-readonly` when `readOnly` is set.
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Write a message…" autoResize maxRows={8} />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea/Textarea.js

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

package/dist/textarea/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Textarea.cjs';
+export type { TextareaProps } from './types.cjs';

package/dist/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Textarea.js';
+export type { TextareaProps } from './types.js';

package/dist/textarea/types.d.cts

@@ -0,0 +1,25 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Textarea}, a headless wrapper around a native `<textarea>`. */
+export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
+    /**
+     * Grow the textarea to fit its content instead of showing a scrollbar.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: 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`.
+     * @default false
+     */
+    readOnly?: boolean;
+}

package/dist/textarea/types.d.ts

@@ -0,0 +1,25 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Textarea}, a headless wrapper around a native `<textarea>`. */
+export interface TextareaProps extends PrimitivePropsWithRef<'textarea'> {
+    /**
+     * Grow the textarea to fit its content instead of showing a scrollbar.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: 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`.
+     * @default false
+     */
+    readOnly?: boolean;
+}

package/dist/time-field/TimeField.cjs

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+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.
+ *
+ * @example
+ * ```tsx
+ * <TimeField aria-label="Start time" defaultValue="09:30" hourCycle={12} />
+ * ```
+ */
+export declare const TimeField: React.ForwardRefExoticComponent<Omit<TimeFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+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.
+ *
+ * @example
+ * ```tsx
+ * <TimeField aria-label="Start time" defaultValue="09:30" hourCycle={12} />
+ * ```
+ */
+export declare const TimeField: React.ForwardRefExoticComponent<Omit<TimeFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/time-field/TimeField.js

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

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

@@ -0,0 +1,2 @@
+export { TimeField } from './TimeField.cjs';
+export type { TimeFieldProps, TimeFieldHandle, TimeGranularity } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { TimeField } from './TimeField.js';
+export type { TimeFieldProps, TimeFieldHandle, TimeGranularity } from './types.js';

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

@@ -0,0 +1,84 @@
+import type { Granularity, HourCycle } from '../utils/dateSegments.cjs';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { SegmentedLabelProps } from '../utils/segmentedField.cjs';
+/** How far down a {@link TimeField} is editable — `Granularity` minus the date-only `'day'`. */
+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.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string | null;
+    /**
+     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`.
+     * @default undefined — every segment starts on its placeholder.
+     */
+    defaultValue?: string | null;
+    /**
+     * Fires with the new `HH:mm[:ss]` string once every segment is filled, and
+     * with `null` as soon as one is cleared.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * How far down the field is editable. `'second'` adds a seconds segment;
+     * `'hour'` and `'minute'` both render hour and minute.
+     * @default 'minute'
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display. Display only —
+     * `value` is always 24 hour, so switching cycles is lossless.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names.
+     * @default undefined — the runtime's default locale.
+     */
+    locale?: string;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name. With it the time submits as the 24-hour `HH:mm[:ss]`
+     * string. Without it the field submits nothing.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+/**
+ * What {@link TimeField}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods, which answer off the hidden input carrying
+ * the 24-hour `HH:mm[:ss]` wire value. Type your ref as this to call them —
+ * `React.useRef<TimeFieldHandle>(null)`.
+ */
+export type TimeFieldHandle = HTMLDivElement & FormValidityHandle;

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

@@ -0,0 +1,84 @@
+import type { Granularity, HourCycle } from '../utils/dateSegments.js';
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { SegmentedLabelProps } from '../utils/segmentedField.js';
+/** How far down a {@link TimeField} is editable — `Granularity` minus the date-only `'day'`. */
+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.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string | null;
+    /**
+     * Initial time, for uncontrolled usage. Same `HH:mm[:ss]` shape as `value`.
+     * @default undefined — every segment starts on its placeholder.
+     */
+    defaultValue?: string | null;
+    /**
+     * Fires with the new `HH:mm[:ss]` string once every segment is filled, and
+     * with `null` as soon as one is cleared.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * How far down the field is editable. `'second'` adds a seconds segment;
+     * `'hour'` and `'minute'` both render hour and minute.
+     * @default 'minute'
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display. Display only —
+     * `value` is always 24 hour, so switching cycles is lossless.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments and the
+     * AM/PM names.
+     * @default undefined — the runtime's default locale.
+     */
+    locale?: string;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name. With it the time submits as the 24-hour `HH:mm[:ss]`
+     * string. Without it the field submits nothing.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Writing direction, which decides whether ArrowLeft moves to the previous or
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+/**
+ * What {@link TimeField}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods, which answer off the hidden input carrying
+ * the 24-hour `HH:mm[:ss]` wire value. Type your ref as this to call them —
+ * `React.useRef<TimeFieldHandle>(null)`.
+ */
+export type TimeFieldHandle = HTMLDivElement & FormValidityHandle;

package/dist/timeline/Timeline.cjs

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