@skdx/react 0.26.0

package/dist/utils/portal.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from './primitive.cjs';
+/** Props for {@link Portal}. */
+export interface PortalProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * DOM node the children are rendered into via `ReactDOM.createPortal`, instead of their normal position in the tree.
+     * @default document.body
+     */
+    container?: Element | DocumentFragment | null;
+}
+/**
+ * Renders its children into a different part of the DOM (via `ReactDOM.createPortal`) —
+ * used by overlay content (`Dialog`, `Popover`, `Tooltip`, …) to escape clipping/`overflow:
+ * hidden` ancestors and sit above everything in stacking order. SSR-safe: renders nothing
+ * until mounted on the client, since `document` doesn't exist on the server.
+ *
+ * @example
+ * ```tsx
+ * <Portal container={document.getElementById('overlay-root')}>
+ *   <div className="dialog">…</div>
+ * </Portal>
+ * ```
+ */
+export declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/utils/portal.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from './primitive.js';
+/** Props for {@link Portal}. */
+export interface PortalProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * DOM node the children are rendered into via `ReactDOM.createPortal`, instead of their normal position in the tree.
+     * @default document.body
+     */
+    container?: Element | DocumentFragment | null;
+}
+/**
+ * Renders its children into a different part of the DOM (via `ReactDOM.createPortal`) —
+ * used by overlay content (`Dialog`, `Popover`, `Tooltip`, …) to escape clipping/`overflow:
+ * hidden` ancestors and sit above everything in stacking order. SSR-safe: renders nothing
+ * until mounted on the client, since `document` doesn't exist on the server.
+ *
+ * @example
+ * ```tsx
+ * <Portal container={document.getElementById('overlay-root')}>
+ *   <div className="dialog">…</div>
+ * </Portal>
+ * ```
+ */
+export declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/utils/portal.js

@@ -0,0 +1 @@
+import*as t from"react";import c from"react-dom";import{Primitive as s}from"./primitive.js";import{jsx as p}from"react/jsx-runtime";var m=t.forwardRef((o,r)=>{let{container:a,...n}=o,[i,l]=t.useState(!1);t.useLayoutEffect(()=>l(!0),[]);let e=a??(i?globalThis?.document?.body:null);return e?c.createPortal(p(s.div,{...n,ref:r}),e):null});m.displayName="Portal";export{m as Portal};

package/dist/utils/presence.cjs

@@ -0,0 +1 @@
+"use strict";var E=Object.create;var c=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(e,n)=>{for(var t in n)c(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of p(n))!L.call(e,o)&&o!==t&&c(e,o,{get:()=>n[o],enumerable:!(a=R(n,o))||a.enumerable});return e};var b=(e,n,t)=>(t=e!=null?E(v(e)):{},l(n||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),M=e=>l(c({},"__esModule",{value:!0}),e);var g={};P(g,{Presence:()=>m,usePresence:()=>u});module.exports=M(g);var r=b(require("react"),1),s=require("./slot.cjs"),d=require("react/jsx-runtime");function S(e){let{animationName:n,display:t}=getComputedStyle(e);return n!==""&&n!=="none"&&t!=="none"}function u(e,n){let[t,a]=r.useState(e);return r.useEffect(()=>{if(e){a(!0);return}let o=n.current;if(!o||!S(o)){a(!1);return}let i=f=>{f.target===o&&a(!1)};return o.addEventListener("animationend",i),o.addEventListener("animationcancel",i),()=>{o.removeEventListener("animationend",i),o.removeEventListener("animationcancel",i)}},[e,n]),t}function m({present:e,children:n}){let t=r.useRef(null);return u(e,t)?(0,d.jsx)(s.Slot,{ref:t,children:n}):null}m.displayName="Presence";0&&(module.exports={Presence,usePresence});

package/dist/utils/presence.d.cts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+/**
+ * Keeps a node mounted past `present` going false, until its CSS exit
+ * animation finishes — the one piece `forceMount` can't do on its own, since
+ * `forceMount` never unmounts at all.
+ *
+ * Pair it with the `data-state` hook every overlay part already emits: your
+ * CSS animates `[data-state='closed']`, and this hook unmounts once that
+ * animation ends. With no animation declared it unmounts immediately, so
+ * adding it costs nothing.
+ *
+ * @example
+ * ```tsx
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * const mounted = usePresence(open, ref);
+ * return mounted ? <div ref={ref} data-state={open ? 'open' : 'closed'} /> : null;
+ * ```
+ */
+export declare function usePresence(present: boolean, nodeRef: React.RefObject<HTMLElement | null>): boolean;
+/** Props for {@link Presence}. */
+export interface PresenceProps {
+    /**
+     * Whether the child should be present. Going false starts the child's exit
+     * animation instead of unmounting it outright.
+     */
+    present: boolean;
+    /**
+     * A single React element — `Presence` composes its own ref onto it (via
+     * {@link Slot}) to watch for `animationend`, and renders no DOM of its own.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Component form of {@link usePresence}: renders its single child element
+ * while `present`, then keeps it mounted until the child's CSS exit animation
+ * ends. Renders no DOM of its own.
+ *
+ * @example
+ * ```tsx
+ * <Presence present={open}>
+ *   <PopoverContent forceMount data-state={open ? 'open' : 'closed'} />
+ * </Presence>
+ * ```
+ */
+export declare function Presence({ present, children }: PresenceProps): React.JSX.Element | null;
+export declare namespace Presence {
+    var displayName: string;
+}

package/dist/utils/presence.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+/**
+ * Keeps a node mounted past `present` going false, until its CSS exit
+ * animation finishes — the one piece `forceMount` can't do on its own, since
+ * `forceMount` never unmounts at all.
+ *
+ * Pair it with the `data-state` hook every overlay part already emits: your
+ * CSS animates `[data-state='closed']`, and this hook unmounts once that
+ * animation ends. With no animation declared it unmounts immediately, so
+ * adding it costs nothing.
+ *
+ * @example
+ * ```tsx
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * const mounted = usePresence(open, ref);
+ * return mounted ? <div ref={ref} data-state={open ? 'open' : 'closed'} /> : null;
+ * ```
+ */
+export declare function usePresence(present: boolean, nodeRef: React.RefObject<HTMLElement | null>): boolean;
+/** Props for {@link Presence}. */
+export interface PresenceProps {
+    /**
+     * Whether the child should be present. Going false starts the child's exit
+     * animation instead of unmounting it outright.
+     */
+    present: boolean;
+    /**
+     * A single React element — `Presence` composes its own ref onto it (via
+     * {@link Slot}) to watch for `animationend`, and renders no DOM of its own.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Component form of {@link usePresence}: renders its single child element
+ * while `present`, then keeps it mounted until the child's CSS exit animation
+ * ends. Renders no DOM of its own.
+ *
+ * @example
+ * ```tsx
+ * <Presence present={open}>
+ *   <PopoverContent forceMount data-state={open ? 'open' : 'closed'} />
+ * </Presence>
+ * ```
+ */
+export declare function Presence({ present, children }: PresenceProps): React.JSX.Element | null;
+export declare namespace Presence {
+    var displayName: string;
+}

package/dist/utils/presence.js

@@ -0,0 +1 @@
+import*as a from"react";import{Slot as l}from"./slot.js";import{jsx as d}from"react/jsx-runtime";function s(e){let{animationName:n,display:o}=getComputedStyle(e);return n!==""&&n!=="none"&&o!=="none"}function u(e,n){let[o,r]=a.useState(e);return a.useEffect(()=>{if(e){r(!0);return}let t=n.current;if(!t||!s(t)){r(!1);return}let i=c=>{c.target===t&&r(!1)};return t.addEventListener("animationend",i),t.addEventListener("animationcancel",i),()=>{t.removeEventListener("animationend",i),t.removeEventListener("animationcancel",i)}},[e,n]),o}function m({present:e,children:n}){let o=a.useRef(null);return u(e,o)?d(l,{ref:o,children:n}):null}m.displayName="Presence";export{m as Presence,u as usePresence};

package/dist/utils/primitive.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.create;var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!R.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(r=c(t,i))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?l(E(e)):{},a(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>a(n({},"__esModule",{value:!0}),e);var C={};P(C,{Primitive:()=>b,composeEventHandlers:()=>x});module.exports=h(C);var p=u(require("react"),1),d=require("./slot.cjs"),m=require("react/jsx-runtime"),y=["a","button","caption","div","fieldset","form","h2","h3","img","input","kbd","label","legend","li","nav","ol","p","span","svg","table","tbody","td","textarea","tfoot","th","thead","tr","ul"],b=y.reduce((e,t)=>{let o=p.forwardRef((r,i)=>{let{asChild:s,...f}=r;return(0,m.jsx)(s?d.Slot:t,{...f,ref:i})});return o.displayName=`Primitive.${t}`,{...e,[t]:o}},{});function x(e,t,{checkForDefaultPrevented:o=!0}={}){return function(i){if(e?.(i),!o||!i.defaultPrevented)return t?.(i)}}0&&(module.exports={Primitive,composeEventHandlers});

package/dist/utils/primitive.d.cts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+declare const NODES: readonly ["a", "button", "caption", "div", "fieldset", "form", "h2", "h3", "img", "input", "kbd", "label", "legend", "li", "nav", "ol", "p", "span", "svg", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "ul"];
+type Primitives = {
+    [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
+};
+/** Props of the intrinsic element `E` plus `asChild`; the base prop type every {@link Primitive} part (and component props extending it) is built from. */
+export type PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
+    /**
+     * Render this part's behavior onto your own child element instead of the
+     * default DOM tag, via {@link Slot}. The child must be a single React element.
+     * @default false
+     */
+    asChild?: boolean;
+};
+interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
+}
+/**
+ * The base DOM element every primitive part is built on — one forwardRef
+ * component per tag (`Primitive.div`, `Primitive.button`, `Primitive.svg`, …),
+ * each accepting {@link PrimitivePropsWithRef.asChild}. Internal building
+ * block; component authors extending this library reach for it directly,
+ * most consumers only ever see it through a component's own parts.
+ *
+ * @example
+ * ```tsx
+ * const MyPart = React.forwardRef<HTMLDivElement, PrimitivePropsWithRef<'div'>>(
+ *   (props, ref) => <Primitive.div data-my-state="idle" {...props} ref={ref} />
+ * );
+ * ```
+ */
+export declare const Primitive: Primitives;
+/**
+ * Composes two event handlers so both run without either clobbering the
+ * other. The user-supplied `originalEventHandler` runs first; if it calls
+ * `event.preventDefault()`, `ourEventHandler` (the primitive's own internal
+ * handler) is skipped unless `checkForDefaultPrevented` is `false`.
+ *
+ * @param originalEventHandler - The consumer's handler, passed through `{...props}`, run first.
+ * @param ourEventHandler - The primitive's internal handler, run second.
+ * @param options.checkForDefaultPrevented - Skip `ourEventHandler` if the first handler called `preventDefault()`. @default true
+ *
+ * @example
+ * ```tsx
+ * <Primitive.button
+ *   {...props}
+ *   onClick={composeEventHandlers(props.onClick, () => setOpen(true))}
+ * />
+ * ```
+ */
+export declare function composeEventHandlers<E extends {
+    defaultPrevented: boolean;
+}>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}): (event: E) => void;
+export {};

package/dist/utils/primitive.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+declare const NODES: readonly ["a", "button", "caption", "div", "fieldset", "form", "h2", "h3", "img", "input", "kbd", "label", "legend", "li", "nav", "ol", "p", "span", "svg", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "ul"];
+type Primitives = {
+    [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
+};
+/** Props of the intrinsic element `E` plus `asChild`; the base prop type every {@link Primitive} part (and component props extending it) is built from. */
+export type PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
+    /**
+     * Render this part's behavior onto your own child element instead of the
+     * default DOM tag, via {@link Slot}. The child must be a single React element.
+     * @default false
+     */
+    asChild?: boolean;
+};
+interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
+}
+/**
+ * The base DOM element every primitive part is built on — one forwardRef
+ * component per tag (`Primitive.div`, `Primitive.button`, `Primitive.svg`, …),
+ * each accepting {@link PrimitivePropsWithRef.asChild}. Internal building
+ * block; component authors extending this library reach for it directly,
+ * most consumers only ever see it through a component's own parts.
+ *
+ * @example
+ * ```tsx
+ * const MyPart = React.forwardRef<HTMLDivElement, PrimitivePropsWithRef<'div'>>(
+ *   (props, ref) => <Primitive.div data-my-state="idle" {...props} ref={ref} />
+ * );
+ * ```
+ */
+export declare const Primitive: Primitives;
+/**
+ * Composes two event handlers so both run without either clobbering the
+ * other. The user-supplied `originalEventHandler` runs first; if it calls
+ * `event.preventDefault()`, `ourEventHandler` (the primitive's own internal
+ * handler) is skipped unless `checkForDefaultPrevented` is `false`.
+ *
+ * @param originalEventHandler - The consumer's handler, passed through `{...props}`, run first.
+ * @param ourEventHandler - The primitive's internal handler, run second.
+ * @param options.checkForDefaultPrevented - Skip `ourEventHandler` if the first handler called `preventDefault()`. @default true
+ *
+ * @example
+ * ```tsx
+ * <Primitive.button
+ *   {...props}
+ *   onClick={composeEventHandlers(props.onClick, () => setOpen(true))}
+ * />
+ * ```
+ */
+export declare function composeEventHandlers<E extends {
+    defaultPrevented: boolean;
+}>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}): (event: E) => void;
+export {};

package/dist/utils/primitive.js

@@ -0,0 +1 @@
+import*as n from"react";import{Slot as d}from"./slot.js";import{jsx as s}from"react/jsx-runtime";var m=["a","button","caption","div","fieldset","form","h2","h3","img","input","kbd","label","legend","li","nav","ol","p","span","svg","table","tbody","td","textarea","tfoot","th","thead","tr","ul"],c=m.reduce((i,e)=>{let o=n.forwardRef((r,t)=>{let{asChild:a,...p}=r;return s(a?d:e,{...p,ref:t})});return o.displayName=`Primitive.${e}`,{...i,[e]:o}},{});function v(i,e,{checkForDefaultPrevented:o=!0}={}){return function(t){if(i?.(t),!o||!t.defaultPrevented)return e?.(t)}}export{c as Primitive,v as composeEventHandlers};

package/dist/utils/segmentedField.cjs

@@ -0,0 +1 @@
+"use strict";var X=Object.create;var b=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var Z=(t,n)=>{for(var i in n)b(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,g)=>{if(n&&typeof n=="object"||typeof n=="function")for(let u of z(n))!Q.call(t,u)&&u!==i&&b(t,u,{get:()=>n[u],enumerable:!(g=Y(n,u))||g.enumerable});return t};var j=(t,n,i)=>(i=t!=null?X(J(t)):{},A(n||!t||!t.__esModule?b(i,"default",{value:t,enumerable:!0}):i,t)),ee=t=>A(b({},"__esModule",{value:!0}),t);var re={};Z(re,{EMPTY_VALUE_TEXT:()=>I,SEGMENT_LABELS:()=>C,SegmentedField:()=>q});module.exports=ee(re);var o=j(require("react"),1),H=require("../field/Field.cjs"),l=require("./dateSegments.cjs"),M=require("./direction.cjs"),T=require("./formControl.cjs"),F=require("./hiddenInput.cjs"),R=require("./part.cjs"),V=require("./primitive.cjs"),p=require("react/jsx-runtime"),I="Empty",C={year:"year",month:"month",day:"day",hour:"hour",minute:"minute",second:"second",dayPeriod:"AM/PM"};function te(t){return t?Array.from(t.querySelectorAll('[role="spinbutton"][data-segment]')):[]}var q=o.forwardRef(({family:t,kind:n,granularity:i,locale:g,hourCycle:u,values:x,onValuesChange:_,formValue:K,disabled:y=!1,readOnly:h=!1,invalid:w=!1,required:k=!1,name:L,dir:v,getSegmentLabel:N,emptySegmentText:U=I,onFormReset:B,...G},O)=>{let W=(0,l.buildSegments)({kind:n,granularity:i,locale:g,hourCycle:u,values:x}),d=o.useRef(0),S=o.useRef(null),D=o.useRef(null);(0,T.useFormValidityHandle)(O,S,D),(0,T.useFormReset)(S,()=>B?.());let E=o.useRef(!1);o.useEffect(()=>{E.current&&(E.current=!1,S.current?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))});let c=(e,a)=>{if(h)return;let r={...x,[e]:a};(e==="month"||e==="year")&&r.day!=null&&(r.day=Math.min(r.day,(0,l.daysInMonth)(r.year,r.month))),E.current=!0,_(r)},P=(e,a)=>{let r=te(e.parentElement),f=r.indexOf(e),m=r[f+a];m&&(d.current=0,m.focus())},$=(e,a)=>{let r=a.type,f=e.currentTarget,m=(0,M.directionalKey)(e.key,f,v);if(m==="ArrowLeft"||m==="ArrowRight"){e.preventDefault(),P(f,m==="ArrowRight"?1:-1);return}if(!h){if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),d.current=0,c(r,(0,l.stepSegment)(a,e.key==="ArrowUp"?1:-1));return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),d.current=0,c(r,e.key==="Home"?a.min:a.max);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),d.current=0,c(r,null);return}if(r==="dayPeriod"){let s=e.key.toLowerCase();(s==="a"||s==="p")&&(e.preventDefault(),c(r,s==="a"?0:1));return}if(/^\d$/.test(e.key)){e.preventDefault();let s=(0,l.typeDigit)(a,d.current,Number(e.key));d.current=s.buffer,c(r,s.value),s.advance&&P(f,1)}}};return(0,p.jsxs)(V.Primitive.div,{role:"group",[H.FIELD_CONTROL_ATTRIBUTE]:"","aria-disabled":y?!0:void 0,"aria-invalid":w?!0:void 0,"data-disabled":y?"":void 0,"data-readonly":h?"":void 0,"data-invalid":w?"":void 0,dir:v,...G,ref:S,children:[W.map((e,a)=>e.isEditable?(0,p.jsx)("span",{role:"spinbutton",tabIndex:y?-1:0,"aria-label":(N??(r=>C[r]))(e.type),"aria-valuenow":e.value??e.min,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuetext":e.isPlaceholder?U:e.text,"aria-disabled":y?!0:void 0,"aria-readonly":h?!0:void 0,"aria-required":k?!0:void 0,"data-segment":e.type,"data-placeholder":e.isPlaceholder?"":void 0,...(0,R.skdxPart)(t,"segment"),onKeyDown:r=>$(r,e),onFocus:()=>{d.current=0},children:e.text},e.type):(0,p.jsx)("span",{"aria-hidden":"true","data-segment":"literal",...(0,R.skdxPart)(t,"segment"),children:e.text},`literal-${a}`)),L?(0,p.jsx)(F.HiddenInput,{ref:D,type:"text",name:L,value:K??"",required:k,disabled:y}):null]})});q.displayName="SegmentedField";0&&(module.exports={EMPTY_VALUE_TEXT,SEGMENT_LABELS,SegmentedField});

package/dist/utils/segmentedField.d.cts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { type Granularity, type HourCycle, type SegmentType, type SegmentValues } from './dateSegments.cjs';
+import { type Direction } from './direction.cjs';
+import { type PrimitivePropsWithRef } from './primitive.cjs';
+/**
+ * The rendering half of the segment engine, shared by `DateField` and
+ * `TimeField` — the two differ only in which segments they own and how their
+ * public value is shaped, so all the DOM, ARIA and keyboard handling lives
+ * here once.
+ *
+ * `@internal` — not exported from the package barrel. Consumers compose
+ * `DateField`/`TimeField`, never this.
+ *
+ * @internal
+ */
+/** The `aria-valuetext` an untyped segment announces, so a spinbutton never reads a value the user did not enter. */
+export declare const EMPTY_VALUE_TEXT = "Empty";
+/**
+ * Accessible name of each segment. Spelled for speech, not for code — a screen
+ * reader announcing "dayPeriod" helps nobody.
+ *
+ * Exported so `getSegmentLabel` can fall back to it for the segment types a
+ * consumer does not want to re-word.
+ */
+export declare const SEGMENT_LABELS: Record<SegmentType, string>;
+/** Props for {@link SegmentedField}. @internal */
+export interface SegmentedFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'> {
+    /**
+     * @internal The family rendering this field, so each segment can name itself
+     * — `skdx-date-field__segment` or `skdx-time-field__segment`.
+     *
+     * The segments used to carry `data-segment` and no class at all, so both
+     * families' `__segment` rules matched nothing and every date and time field
+     * shipped as run-together unstyled text: no padding, no selected-segment
+     * highlight, no placeholder treatment.
+     */
+    family: 'date-field' | 'time-field';
+    /** `'date'` renders year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Forced hour cycle; omitted follows the locale. */
+    hourCycle?: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+    /** Called with the next per-segment values after any edit. */
+    onValuesChange: (values: SegmentValues) => void;
+    /** Value submitted by the hidden input; `null` submits an empty entry. */
+    formValue: string | null;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    name?: string;
+    /** Writing direction override; without it, direction is read off the DOM. */
+    dir?: Direction;
+    /** See {@link SegmentedLabelProps.getSegmentLabel}. */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /** See {@link SegmentedLabelProps.emptySegmentText}. */
+    emptySegmentText?: string;
+    /**
+     * Called when the owning `<form>` is reset, so the field can put its
+     * segments back to the value it declared. Nothing here knows what that
+     * value is — `DateField`/`TimeField` own `defaultValue`.
+     */
+    onFormReset?: () => void;
+}
+/**
+ * The two strings a segmented field announces that `locale` cannot translate:
+ * the accessible name of each segment and the `aria-valuetext` of an untyped
+ * one. Segment *order*, the literals between segments and the AM/PM names all
+ * come from `Intl.DateTimeFormat` already — these two do not, because they
+ * describe the widget rather than the value.
+ *
+ * Shared verbatim by `DateFieldProps` and `TimeFieldProps`.
+ */
+export interface SegmentedLabelProps {
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'year'`, `'month'`, `'dayPeriod'`, …); return the built-in
+     * {@link SEGMENT_LABELS} entry for the ones you do not want to change.
+     * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
+     */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it
+     * does not have.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+}
+/**
+ * Renders one segmented field: a `role="group"` holding a `role="spinbutton"`
+ * per editable segment interleaved with the locale's `aria-hidden` literals,
+ * plus a hidden input for form submission.
+ *
+ * The forwarded ref is the root `<div>` with `checkValidity()`/
+ * `reportValidity()` hung on it, both answering off that hidden input.
+ *
+ * A caveat worth knowing: the segments are `<span role="spinbutton">`, not
+ * native controls, so a `<fieldset disabled>` ancestor does *not* disable them
+ * on its own the way it disables an `<input>` — pass `disabled` explicitly.
+ *
+ * @internal
+ */
+export declare const SegmentedField: React.ForwardRefExoticComponent<Omit<SegmentedFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/utils/segmentedField.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { type Granularity, type HourCycle, type SegmentType, type SegmentValues } from './dateSegments.js';
+import { type Direction } from './direction.js';
+import { type PrimitivePropsWithRef } from './primitive.js';
+/**
+ * The rendering half of the segment engine, shared by `DateField` and
+ * `TimeField` — the two differ only in which segments they own and how their
+ * public value is shaped, so all the DOM, ARIA and keyboard handling lives
+ * here once.
+ *
+ * `@internal` — not exported from the package barrel. Consumers compose
+ * `DateField`/`TimeField`, never this.
+ *
+ * @internal
+ */
+/** The `aria-valuetext` an untyped segment announces, so a spinbutton never reads a value the user did not enter. */
+export declare const EMPTY_VALUE_TEXT = "Empty";
+/**
+ * Accessible name of each segment. Spelled for speech, not for code — a screen
+ * reader announcing "dayPeriod" helps nobody.
+ *
+ * Exported so `getSegmentLabel` can fall back to it for the segment types a
+ * consumer does not want to re-word.
+ */
+export declare const SEGMENT_LABELS: Record<SegmentType, string>;
+/** Props for {@link SegmentedField}. @internal */
+export interface SegmentedFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'dir'> {
+    /**
+     * @internal The family rendering this field, so each segment can name itself
+     * — `skdx-date-field__segment` or `skdx-time-field__segment`.
+     *
+     * The segments used to carry `data-segment` and no class at all, so both
+     * families' `__segment` rules matched nothing and every date and time field
+     * shipped as run-together unstyled text: no padding, no selected-segment
+     * highlight, no placeholder treatment.
+     */
+    family: 'date-field' | 'time-field';
+    /** `'date'` renders year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Forced hour cycle; omitted follows the locale. */
+    hourCycle?: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+    /** Called with the next per-segment values after any edit. */
+    onValuesChange: (values: SegmentValues) => void;
+    /** Value submitted by the hidden input; `null` submits an empty entry. */
+    formValue: string | null;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    name?: string;
+    /** Writing direction override; without it, direction is read off the DOM. */
+    dir?: Direction;
+    /** See {@link SegmentedLabelProps.getSegmentLabel}. */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /** See {@link SegmentedLabelProps.emptySegmentText}. */
+    emptySegmentText?: string;
+    /**
+     * Called when the owning `<form>` is reset, so the field can put its
+     * segments back to the value it declared. Nothing here knows what that
+     * value is — `DateField`/`TimeField` own `defaultValue`.
+     */
+    onFormReset?: () => void;
+}
+/**
+ * The two strings a segmented field announces that `locale` cannot translate:
+ * the accessible name of each segment and the `aria-valuetext` of an untyped
+ * one. Segment *order*, the literals between segments and the AM/PM names all
+ * come from `Intl.DateTimeFormat` already — these two do not, because they
+ * describe the widget rather than the value.
+ *
+ * Shared verbatim by `DateFieldProps` and `TimeFieldProps`.
+ */
+export interface SegmentedLabelProps {
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'year'`, `'month'`, `'dayPeriod'`, …); return the built-in
+     * {@link SEGMENT_LABELS} entry for the ones you do not want to change.
+     * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
+     */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it
+     * does not have.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+}
+/**
+ * Renders one segmented field: a `role="group"` holding a `role="spinbutton"`
+ * per editable segment interleaved with the locale's `aria-hidden` literals,
+ * plus a hidden input for form submission.
+ *
+ * The forwarded ref is the root `<div>` with `checkValidity()`/
+ * `reportValidity()` hung on it, both answering off that hidden input.
+ *
+ * A caveat worth knowing: the segments are `<span role="spinbutton">`, not
+ * native controls, so a `<fieldset disabled>` ancestor does *not* disable them
+ * on its own the way it disables an `<input>` — pass `disabled` explicitly.
+ *
+ * @internal
+ */
+export declare const SegmentedField: React.ForwardRefExoticComponent<Omit<SegmentedFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/utils/segmentedField.js

@@ -0,0 +1 @@
+import*as n from"react";import{FIELD_CONTROL_ATTRIBUTE as C}from"../field/Field.js";import{buildSegments as q,daysInMonth as _,stepSegment as K,typeDigit as N}from"./dateSegments.js";import{directionalKey as U}from"./direction.js";import{useFormReset as B,useFormValidityHandle as G}from"./formControl.js";import{HiddenInput as O}from"./hiddenInput.js";import{skdxPart as R}from"./part.js";import{Primitive as W}from"./primitive.js";import{jsx as c,jsxs as J}from"react/jsx-runtime";var $="Empty",X={year:"year",month:"month",day:"day",hour:"hour",minute:"minute",second:"second",dayPeriod:"AM/PM"};function Y(l){return l?Array.from(l.querySelectorAll('[role="spinbutton"][data-segment]')):[]}var z=n.forwardRef(({family:l,kind:x,granularity:w,locale:k,hourCycle:L,values:f,onValuesChange:v,formValue:D,disabled:u=!1,readOnly:m=!1,invalid:g=!1,required:h=!1,name:S,dir:b,getSegmentLabel:P,emptySegmentText:A=$,onFormReset:H,...M},F)=>{let V=q({kind:x,granularity:w,locale:k,hourCycle:L,values:f}),a=n.useRef(0),p=n.useRef(null),T=n.useRef(null);G(F,p,T),B(p,()=>H?.());let y=n.useRef(!1);n.useEffect(()=>{y.current&&(y.current=!1,p.current?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))});let d=(e,r)=>{if(m)return;let t={...f,[e]:r};(e==="month"||e==="year")&&t.day!=null&&(t.day=Math.min(t.day,_(t.year,t.month))),y.current=!0,v(t)},E=(e,r)=>{let t=Y(e.parentElement),s=t.indexOf(e),o=t[s+r];o&&(a.current=0,o.focus())},I=(e,r)=>{let t=r.type,s=e.currentTarget,o=U(e.key,s,b);if(o==="ArrowLeft"||o==="ArrowRight"){e.preventDefault(),E(s,o==="ArrowRight"?1:-1);return}if(!m){if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),a.current=0,d(t,K(r,e.key==="ArrowUp"?1:-1));return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),a.current=0,d(t,e.key==="Home"?r.min:r.max);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),a.current=0,d(t,null);return}if(t==="dayPeriod"){let i=e.key.toLowerCase();(i==="a"||i==="p")&&(e.preventDefault(),d(t,i==="a"?0:1));return}if(/^\d$/.test(e.key)){e.preventDefault();let i=N(r,a.current,Number(e.key));a.current=i.buffer,d(t,i.value),i.advance&&E(s,1)}}};return J(W.div,{role:"group",[C]:"","aria-disabled":u?!0:void 0,"aria-invalid":g?!0:void 0,"data-disabled":u?"":void 0,"data-readonly":m?"":void 0,"data-invalid":g?"":void 0,dir:b,...M,ref:p,children:[V.map((e,r)=>e.isEditable?c("span",{role:"spinbutton",tabIndex:u?-1:0,"aria-label":(P??(t=>X[t]))(e.type),"aria-valuenow":e.value??e.min,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuetext":e.isPlaceholder?A:e.text,"aria-disabled":u?!0:void 0,"aria-readonly":m?!0:void 0,"aria-required":h?!0:void 0,"data-segment":e.type,"data-placeholder":e.isPlaceholder?"":void 0,...R(l,"segment"),onKeyDown:t=>I(t,e),onFocus:()=>{a.current=0},children:e.text},e.type):c("span",{"aria-hidden":"true","data-segment":"literal",...R(l,"segment"),children:e.text},`literal-${r}`)),S?c(O,{ref:T,type:"text",name:S,value:D??"",required:h,disabled:u}):null]})});z.displayName="SegmentedField";export{$ as EMPTY_VALUE_TEXT,X as SEGMENT_LABELS,z as SegmentedField};

package/dist/utils/slot.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.create;var c=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(e,n)=>{for(var t in n)c(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of u(n))!y.call(e,o)&&o!==t&&c(e,o,{get:()=>n[o],enumerable:!(r=R(n,o))||r.enumerable});return e};var H=(e,n,t)=>(t=e!=null?p(m(e)):{},l(n||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),P=e=>l(c({},"__esModule",{value:!0}),e);var h={};A(h,{Slot:()=>d});module.exports=P(h);var s=H(require("react"),1),i=require("./composeRefs.cjs"),f=require("./primitive.cjs");function E(e){let n=e.props;return n&&"ref"in n&&n.ref!==void 0?n.ref:e.ref??void 0}function g(e,n){let t={...n};for(let r of Object.keys(e)){let o=e[r],a=n[r];/^on[A-Z]/.test(r)?o&&a?t[r]=(0,f.composeEventHandlers)(a,o):o&&(t[r]=o):r==="style"?t[r]={...o,...a}:r==="className"?t[r]=[o,a].filter(Boolean).join(" "):t[r]=a!==void 0?a:o}return{...e,...t}}var d=s.forwardRef((e,n)=>{let{children:t,...r}=e;if(s.isValidElement(t)){let o=E(t),a=g(r,t.props);return t.type!==s.Fragment&&(a.ref=n?(0,i.composeRefs)(n,o):o),s.cloneElement(t,a)}if(s.Children.count(t)>1)throw new Error("[skandadx] Slot expects a single React element child.");return null});d.displayName="Slot";0&&(module.exports={Slot});

package/dist/utils/slot.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/** Props for {@link Slot}, which merges its own props and ref onto a single child element. */
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * A single React element to merge props (and ref) onto.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Merges its own props (and ref) onto its single child element instead of
+ * rendering a DOM node of its own. This is what powers the `asChild` prop
+ * on every primitive: event handlers compose (both fire, yours first, and
+ * yours can `preventDefault()` to cancel ours), `className` concatenates,
+ * `style` merges, and every other prop is overridden by the child's own value.
+ *
+ * Throws if given anything other than exactly one React element child.
+ *
+ * @example
+ * ```tsx
+ * // ButtonTrigger renders <Primitive.button asChild><Slot>{children}</Slot></Primitive.button>
+ * // internally, so this renders your <a> with the trigger's behavior:
+ * <ButtonTrigger asChild>
+ *   <a href="/docs">Open docs</a>
+ * </ButtonTrigger>
+ * ```
+ */
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;

package/dist/utils/slot.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/** Props for {@link Slot}, which merges its own props and ref onto a single child element. */
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * A single React element to merge props (and ref) onto.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Merges its own props (and ref) onto its single child element instead of
+ * rendering a DOM node of its own. This is what powers the `asChild` prop
+ * on every primitive: event handlers compose (both fire, yours first, and
+ * yours can `preventDefault()` to cancel ours), `className` concatenates,
+ * `style` merges, and every other prop is overridden by the child's own value.
+ *
+ * Throws if given anything other than exactly one React element child.
+ *
+ * @example
+ * ```tsx
+ * // ButtonTrigger renders <Primitive.button asChild><Slot>{children}</Slot></Primitive.button>
+ * // internally, so this renders your <a> with the trigger's behavior:
+ * <ButtonTrigger asChild>
+ *   <a href="/docs">Open docs</a>
+ * </ButtonTrigger>
+ * ```
+ */
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;

package/dist/utils/slot.js

@@ -0,0 +1 @@
+import*as r from"react";import{composeRefs as c}from"./composeRefs.js";import{composeEventHandlers as l}from"./primitive.js";function i(a){let t=a.props;return t&&"ref"in t&&t.ref!==void 0?t.ref:a.ref??void 0}function f(a,t){let e={...t};for(let n of Object.keys(a)){let o=a[n],s=t[n];/^on[A-Z]/.test(n)?o&&s?e[n]=l(s,o):o&&(e[n]=o):n==="style"?e[n]={...o,...s}:n==="className"?e[n]=[o,s].filter(Boolean).join(" "):e[n]=s!==void 0?s:o}return{...a,...e}}var d=r.forwardRef((a,t)=>{let{children:e,...n}=a;if(r.isValidElement(e)){let o=i(e),s=f(n,e.props);return e.type!==r.Fragment&&(s.ref=t?c(t,o):o),r.cloneElement(e,s)}if(r.Children.count(e)>1)throw new Error("[skandadx] Slot expects a single React element child.");return null});d.displayName="Slot";export{d as Slot};

package/dist/utils/useBodyScrollLock.cjs

@@ -0,0 +1 @@
+"use strict";var f=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var a=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(o,t)=>{for(var e in t)n(o,e,{get:t[e],enumerable:!0})},c=(o,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of s(t))!g.call(o,d)&&d!==e&&n(o,d,{get:()=>t[d],enumerable:!(l=m(t,d))||l.enumerable});return o};var b=(o,t,e)=>(e=o!=null?f(a(o)):{},c(t||!o||!o.__esModule?n(e,"default",{value:o,enumerable:!0}):e,o)),p=o=>c(n({},"__esModule",{value:!0}),o);var R={};h(R,{useBodyScrollLock:()=>w});module.exports=p(R);var y=b(require("react"),1),i=0,r="",u="";function w(o){y.useEffect(()=>{if(o){if(i===0){let t=window.innerWidth-document.documentElement.clientWidth;r=document.body.style.overflow,u=document.body.style.paddingRight,document.body.style.overflow="hidden",t>0&&(document.body.style.paddingRight=`${t}px`)}return i++,()=>{i--,i===0&&(document.body.style.overflow=r,document.body.style.paddingRight=u)}}},[o])}0&&(module.exports={useBodyScrollLock});

package/dist/utils/useBodyScrollLock.d.cts

@@ -0,0 +1,2 @@
+/** Locks body scroll while `enabled`, compensating for scrollbar width. Reference-counted. */
+export declare function useBodyScrollLock(enabled: boolean): void;

package/dist/utils/useBodyScrollLock.d.ts

@@ -0,0 +1,2 @@
+/** Locks body scroll while `enabled`, compensating for scrollbar width. Reference-counted. */
+export declare function useBodyScrollLock(enabled: boolean): void;

package/dist/utils/useBodyScrollLock.js

@@ -0,0 +1 @@
+import*as i from"react";var o=0,d="",n="";function l(t){i.useEffect(()=>{if(t){if(o===0){let e=window.innerWidth-document.documentElement.clientWidth;d=document.body.style.overflow,n=document.body.style.paddingRight,document.body.style.overflow="hidden",e>0&&(document.body.style.paddingRight=`${e}px`)}return o++,()=>{o--,o===0&&(document.body.style.overflow=d,document.body.style.paddingRight=n)}}},[t])}export{l as useBodyScrollLock};

package/dist/utils/useCallbackRef.cjs

@@ -0,0 +1 @@
+"use strict";var f=Object.create;var u=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var i=(e,n)=>{for(var t in n)u(e,t,{get:n[t],enumerable:!0})},s=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of R(n))!d.call(e,c)&&c!==t&&u(e,c,{get:()=>n[c],enumerable:!(a=o(n,c))||a.enumerable});return e};var m=(e,n,t)=>(t=e!=null?f(T(e)):{},s(n||!e||!e.__esModule?u(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>s(u({},"__esModule",{value:!0}),e);var p={};i(p,{useCallbackRef:()=>l});module.exports=k(p);var r=m(require("react"),1);function l(e){let n=r.useRef(e);return r.useEffect(()=>{n.current=e}),r.useMemo(()=>((...t)=>n.current?.(...t)),[])}0&&(module.exports={useCallbackRef});

package/dist/utils/useCallbackRef.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Returns a function with a stable identity across renders that always
+ * invokes the *latest* `callback` passed in — avoids re-subscribing effects
+ * or event listeners just because an inline callback prop changed identity.
+ *
+ * @example
+ * ```tsx
+ * const handleChange = useCallbackRef(onChange);
+ * React.useEffect(() => {
+ *   document.addEventListener('keydown', handleChange);
+ *   return () => document.removeEventListener('keydown', handleChange);
+ * }, [handleChange]); // stable — effect doesn't re-run when `onChange` changes
+ * ```
+ */
+export declare function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T;