@skdx/react 0.26.0 → 0.28.0

package/dist/editable/types.d.ts

@@ -2,18 +2,43 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** The element `EditableInput` or `EditableTextarea` renders — whichever one the consumer mounted. */
 export type EditableInputElement = HTMLInputElement | HTMLTextAreaElement;
-/** How interacting with `EditablePreview` enters edit mode. Keyboard activation (Enter/Space) always works, in every mode. */
-export type EditableActivationMode = 'click' | 'dblclick' | 'focus';
+/**
+ * How interacting with `EditablePreview` enters edit mode. Keyboard
+ * activation (Enter/Space) always works, in every mode including `'none'`,
+ * since the preview is a `role="button"` tab stop either way.
+ */
+export type EditableActivationMode = 'click' | 'dblclick' | 'focus' | 'none';
+/** The payload of {@link EditableProps.onValueRevert}. */
+export interface EditableRevertDetail {
+    /** The restored text — what is now on screen. */
+    value: string;
+    /** The draft that was thrown away — the only place the abandoned text still exists. */
+    previousValue: string;
+}
 /** Which gestures commit the draft. `'none'` leaves committing entirely to `EditableSubmitTrigger`. */
 export type EditableSubmitMode = 'blur' | 'enter' | 'both' | 'none';
-/** @internal Shared state distributed from {@link Editable} to its parts via context. Not part of the public API. */
+/**
+ * Split placeholder for the preview (visible text, read as label) and editor
+ * (hint, read as instruction) since one string cannot serve both purposes.
+ */
+export interface EditablePlaceholder {
+    /** The editor's `placeholder` attribute — a hint, not a name. */
+    edit: string;
+    /** The empty preview's text, which is also its accessible name — write it as a label. */
+    preview: string;
+}
+/** @internal Context state distributed from Editable to its parts. */
 export interface EditableContextValue {
     value: string;
     editing: boolean;
-    placeholder: string | undefined;
+    /** The editor's placeholder half, already resolved from the union. */
+    editPlaceholder: string | undefined;
+    /** The empty preview's placeholder half, already resolved from the union. */
+    previewPlaceholder: string | undefined;
     disabled: boolean;
     readOnly: boolean;
     required: boolean;
+    invalid: boolean;
     maxLength: number | undefined;
     activationMode: EditableActivationMode;
     submitMode: EditableSubmitMode;
@@ -23,10 +48,17 @@ export interface EditableContextValue {
     previewRef: React.RefObject<HTMLSpanElement | null>;
     /**
      * True only for the instant the root is programmatically returning focus to
-     * the preview. `activationMode="focus"` reads it to avoid re-entering edit
-     * mode on the focus it just caused — otherwise submitting would loop forever.
+     * the preview; `activationMode="focus"` reads it to avoid re-entering edit mode on that focus.
      */
     returningFocusRef: React.RefObject<boolean>;
+    /** Id of whichever editor is mounted — an `EditableLabel`'s `for` target. */
+    editorId: string;
+    /** Id a mounted `EditableLabel` carries, and the preview points `aria-labelledby` at. */
+    labelId: string;
+    /** Whether an `EditableLabel` is currently mounted — a dangling IDREF names nothing. */
+    labelPresent: boolean;
+    /** Registers/unregisters an `EditableLabel`. @internal */
+    setLabelPresent: (present: boolean) => void;
     setValue: (value: string) => void;
     activate: () => void;
     submit: () => void;
@@ -35,9 +67,13 @@ export interface EditableContextValue {
 /** Props for the {@link Editable} root. */
 export interface EditableProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
     /**
-     * Current text, for controlled usage. Pair with `onValueChange`. Note this
-     * tracks the *live* draft while editing, not only committed text — use
-     * `onValueCommit` if you only care about the submitted result.
+     * Manually-composed parts for full control over the anatomy; omitted, the
+     * field derives its own preview and editor from `multiline`.
+     * @default undefined — the field derives its anatomy.
+     */
+    children?: React.ReactNode;
+    /**
+     * Current text, for controlled usage, tracking the live draft while editing; use `onValueCommit` for the submitted result only.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
     value?: string;
@@ -47,29 +83,31 @@ export interface EditableProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCha
      */
     defaultValue?: string;
     /**
-     * Fires with the new text on every keystroke while editing, and again with
-     * the restored text when an edit is cancelled or rejected.
+     * Fires with the new text on every keystroke while editing, and again with the restored text when an edit is cancelled or rejected.
      * @default undefined — no-op if omitted.
      */
     onValueChange?: (value: string) => void;
     /**
-     * Fires once with the final text when an edit is *successfully* submitted.
-     * Never fires for Escape-cancel, nor for a `required` field submitted empty —
-     * both of those restore the pre-edit text instead. This is the callback to
-     * hang a network write off; `onValueChange` would fire it per keystroke.
+     * Fires once with the final text when an edit is successfully submitted;
+     * never for an Escape-cancel or a rejected `required` blank submit.
      * @default undefined — no-op if omitted.
      */
     onValueCommit?: (value: string) => void;
     /**
-     * Whether the input is showing instead of the preview, for controlled usage.
-     * Pair with `onEditChange`.
+     * Fires when an edit is abandoned rather than committed — Escape, an
+     * `EditableCancelTrigger` click, or a `required` field submitted blank;
+     * fires after the value is restored, so `value` is what's now on screen and
+     * `previousValue` is the discarded draft.
+     * @default undefined — no-op if omitted.
+     */
+    onValueRevert?: (detail: EditableRevertDetail) => void;
+    /**
+     * Whether the input is showing instead of the preview, for controlled usage. Pair with `onEditChange`.
      * @default undefined — uncontrolled, tracks its own edit state internally.
      */
     editing?: boolean;
     /**
-     * Whether to start in edit mode, for uncontrolled usage. Starting `true`
-     * focuses the input on mount, so use it only when the edit is the reason the
-     * surface appeared (a freshly added row), never on a page the user just landed on.
+     * Whether to start in edit mode, for uncontrolled usage; starting `true` focuses the input on mount.
      * @default false — starts showing the preview.
      */
     defaultEditing?: boolean;
@@ -79,57 +117,88 @@ export interface EditableProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCha
      */
     onEditChange?: (editing: boolean) => void;
     /**
-     * Text rendered by `EditablePreview` when the value is empty, and set as the
-     * input's `placeholder`. It doubles as the preview's accessible name while
-     * empty, so an editable with no placeholder and no value renders a button
-     * with no name — always supply one, or an `aria-label` on the preview.
+     * Text rendered by `EditablePreview` when the value is empty, and set as
+     * the editor's `placeholder`. A plain string sets both; the `{ edit,
+     * preview }` object form sets them separately, since the preview's
+     * placeholder doubles as its accessible name while empty.
      * @default undefined — an empty value renders an empty preview.
      */
-    placeholder?: string;
+    placeholder?: string | EditablePlaceholder;
+    /**
+     * Where focus goes when the edit ends, overriding the default of the
+     * preview; a function so the target is resolved at the moment focus moves,
+     * not at render. Returning `null` falls back to the preview.
+     * @default undefined — focus returns to `EditablePreview`.
+     */
+    finalFocusEl?: () => HTMLElement | null;
     /**
      * Blocks editing entirely and takes the preview out of the tab order.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Shows the value but blocks entering edit mode. The preview stays focusable
-     * (unlike `disabled`), so the text is still reachable by keyboard.
+     * Shows the value but blocks entering edit mode; the preview stays focusable, unlike `disabled`.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * Rejects a submit that would leave the value blank: the pre-edit text is
-     * restored, `onValueCommit` does not fire, and edit mode closes. Whitespace
-     * counts as blank.
+     * Rejects a submit that would leave the value blank (whitespace counts):
+     * the pre-edit text is restored, `onValueCommit` does not fire, and edit mode closes.
      * @default false — an empty submit is committed like any other.
      */
     required?: boolean;
     /**
-     * Maximum number of characters the input accepts, forwarded to the native
-     * `maxLength` attribute.
+     * Maximum number of characters the input accepts, forwarded to the native `maxLength` attribute.
      * @default undefined — no limit.
      */
     maxLength?: number;
     /**
-     * Which pointer gesture on `EditablePreview` enters edit mode. `'focus'`
-     * makes the field editable as soon as it is tabbed to — convenient in a form,
-     * hostile in a read-mostly page, where `'dblclick'` avoids editing on a stray click.
+     * Form field name; when set, the root renders one hidden input carrying the committed value, not the live draft.
+     * @default undefined — renders no hidden input; submits nothing.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` to submit with, mirroring the native `form` attribute on the hidden input `name` renders.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string;
+    /**
+     * Which pointer gesture on `EditablePreview` enters edit mode; `'none'`
+     * matches none, for a control entered only via `EditableEditTrigger` or a
+     * controlled `editing` prop. Enter/Space always opens the editor regardless of mode.
      * @default 'click' — a single click on the preview starts editing.
      */
     activationMode?: EditableActivationMode;
     /**
-     * Which gestures commit the draft: `'enter'` (Enter key), `'blur'` (focus
-     * leaves the input), `'both'`, or `'none'` — which leaves committing to
-     * `EditableSubmitTrigger` alone. Escape always cancels regardless.
+     * Which gestures commit the draft: `'enter'`, `'blur'`, `'both'`, or
+     * `'none'` (leaving it to `EditableSubmitTrigger`). Escape always cancels regardless.
      * @default 'both' — Enter and blur each submit.
      */
     submitMode?: EditableSubmitMode;
     /**
-     * Select the whole value when edit mode opens, so typing replaces it. With
-     * `false` the caret is placed at the end instead, so typing appends.
+     * Marks the current value as invalid — a commit the server rejected, or a
+     * rule the surrounding `Field` owns. Published as `data-invalid` on root,
+     * preview and editor, and as `aria-invalid` on the editor only, since that
+     * state is deprecated on the preview's `role="button"` in ARIA 1.2.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Select the whole value when edit mode opens, so typing replaces it; `false` places the caret at the end instead.
      * @default true — entering edit mode selects everything.
      */
     selectOnFocus?: boolean;
+    /**
+     * Whether the derived anatomy's editor is an `EditableTextarea` instead of an `EditableInput`. Ignored when `children` is given.
+     * @default false — a single-line `EditableInput`.
+     */
+    multiline?: boolean;
+    /**
+     * Whether the derived anatomy renders an `EditableSubmitTrigger` /
+     * `EditableCancelTrigger` pair after the editor. Ignored when `children` is given.
+     * @default false
+     */
+    showControls?: boolean;
 }
 /** Props for {@link EditablePreview}, the read-mode text that starts an edit. Renders nothing while editing. */
 export interface EditablePreviewProps extends PrimitivePropsWithRef<'span'> {
@@ -139,6 +208,25 @@ export interface EditableInputProps extends Omit<PrimitivePropsWithRef<'input'>,
 }
 /** Props for {@link EditableTextarea}, the multi-line editor. Value, placeholder and constraints come from {@link Editable}'s context. */
 export interface EditableTextareaProps extends Omit<PrimitivePropsWithRef<'textarea'>, 'value' | 'defaultValue'> {
+    /**
+     * Grow the editor to fit its content instead of showing a scrollbar.
+     * @default false — the editor keeps its `rows` height and scrolls.
+     */
+    autoResize?: boolean;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height; past the cap the editor scrolls again.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number;
+    /**
+     * The editor's opening size and the floor auto-resize will not shrink
+     * below; where `minRows` and `maxRows` disagree, `maxRows` wins.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows?: number;
+}
+/** Props for {@link EditableLabel}, the `<label>` naming the editor and the preview. */
+export interface EditableLabelProps extends PrimitivePropsWithRef<'label'> {
 }
 /** Props for {@link EditableSubmitTrigger}, the button that commits the draft. Renders nothing outside edit mode. */
 export interface EditableSubmitTriggerProps extends PrimitivePropsWithRef<'button'> {

package/dist/field/Field.cjs

@@ -1 +1 @@
-"use strict";var Ee=Object.create;var b=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var Re=(r,e)=>{for(var t in e)b(r,t,{get:e[t],enumerable:!0})},K=(r,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of be(e))!ye.call(r,i)&&i!==t&&b(r,i,{get:()=>e[i],enumerable:!(o=Fe(e,i))||o.enumerable});return r};var f=(r,e,t)=>(t=r!=null?Ee(Te(r)):{},K(e||!r||!r.__esModule?b(t,"default",{value:r,enumerable:!0}):t,r)),Ie=r=>K(b({},"__esModule",{value:!0}),r);var Pe={};Re(Pe,{CHARACTER_COUNT_ANNOUNCE_DELAY_MS:()=>J,FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>I,FIELD_CONTROL_ATTRIBUTE:()=>D,FIELD_CONTROL_SELECTOR:()=>N,FIELD_VALIDITY_CHANGE_EVENT:()=>S,Field:()=>H,FieldCharacterCount:()=>q,FieldDescription:()=>j,FieldError:()=>Y,FieldLabel:()=>G,Fieldset:()=>w,NATIVE_INVALID_FALLBACK_MESSAGE:()=>O,characterCountMessage:()=>g,characterCountVisible:()=>C,collectFieldErrors:()=>X,errorSummaryScope:()=>Q,findFieldControl:()=>L,focusFieldTarget:()=>Z});module.exports=Ie(Pe);var a=f(require("react"),1),V=require("../utils/composeRefs.cjs"),ee=require("../utils/createContext.cjs"),te=require("../utils/liveAnnouncer.cjs"),re=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),oe=require("../utils/useCallbackRef.cjs");var S="validity-change",y="data-skdx-field",x="data-skdx-field-name",_="data-skdx-field-message",P="data-skdx-field-description",R="data-skdx-field-error",I="data-skdx-field-character-count",J=1e3;function g(r){let e=Math.abs(r),t=e===1?"character":"characters";return r<0?`You have ${e} ${t} too many`:`You have ${e} ${t} remaining`}function C(r,e,t=0){return t<=0?!0:r>=e*t/100}var O="This field is invalid.",D="data-skdx-field-control",N=[`[${D}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),Le=new Set(["radiogroup","group"]),Ae=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function z(r){return r==null?[]:(Array.isArray(r)?r:[r]).filter(t=>typeof t=="string"&&t.trim()!=="")}function L(r){for(let e of Array.from(r.querySelectorAll(N)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${y}]`)===r)return e;return null}function M(r,e){for(let t of Array.from(r.querySelectorAll(e)))if(t.closest(`[${y}]`)===r)return t;return null}function xe(r){if(!r)return;let e=r;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in r?e.value:r.querySelector('input[aria-hidden="true"]')?.value}function v(r){return r==null||r===!1||r===""?!1:!(Array.isArray(r)&&r.length===0)}function p(r,e,t){t?r.setAttribute(e,""):r.removeAttribute(e)}function _e(r,...e){let t=r.split(/\s+/).filter(Boolean);for(let o of e)o&&!t.includes(o)&&t.push(o);return t.join(" ")}function Q(r){return r.closest("form, skdx-form")??r.parentElement??r}function X(r){return Array.from(r.querySelectorAll(`[${y}][data-invalid]`)).flatMap(t=>{let o=L(t),n=M(t,`[${R}]`)?.textContent?.trim()||t.getAttribute(_)||t.getAttribute(x)||"";return!o?.id||!n?[]:[{id:o.id,message:n}]})}function Z(r,e=document){let t=e.getElementById(r);if(!t)return;let o=t.getAttribute("role"),n=(t.tagName==="FIELDSET"||o!==null&&Le.has(o)?t.querySelector(Ae):null)??t;n.focus(),n.scrollIntoView?.({block:"center"})}var T=class{constructor(e){this.options=e;this.props={};this.root=null;this.form=null;this.control=null;this.baseDescribedBy="";this.runToken=0;this.pending=!1;this.injected=[];this.custom=[];this.characterCount=null;this.handleInput=()=>{let e=this.isOverLimit(this.snapshot.count),t=this.readCount();this.update({dirty:!0,filled:v(this.resolveValue()),count:t,errors:this.composeErrors(t)}),this.scheduleCountAnnouncement(t,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:v(this.resolveValue()),count:e,errors:this.composeErrors(e)}),((this.props.mode??"blur")==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(e.target!==this.form)return;this.markTouched();let t=this.runValidation({silent:!0});if(W(t)){e.preventDefault();return}(t.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:e.controlId,errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0}}get state(){return this.snapshot}setProps(e){let t=this.props.value;this.props=e;let o=z(e.errors??null),i=!Me(this.injected,o);i&&(this.injected=o);let n=e.value!==t;if(!i&&!n)return;let s=this.readCount();this.update({count:s,filled:v(this.resolveValue()),errors:this.composeErrors(s)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let o=this.readCount();this.update({count:o,errors:this.composeErrors(o)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??g)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let t=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&t.push(this.countMessage(this.characterCount.maxLength-e)),t}scheduleCountAnnouncement(e,t){let o=this.characterCount;if(!o)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){t||this.options.announce(this.countMessage(o.maxLength-e),"assertive");return}if(!C(e,o.maxLength,o.threshold))return;let i=o.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(i),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(y,""),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let t=this.readCount();this.update({filled:v(this.resolveValue()),count:t,errors:this.composeErrors(t)})}disconnect(){clearTimeout(this.announceTimer);let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let t=L(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"");let{name:o}=this.props;o?e.setAttribute(x,o):e.removeAttribute(x);let i=this.snapshot.errors.join(" ");if(i?e.setAttribute(_,i):e.removeAttribute(_),this.applyStateAttributes(e),!t)return;t.id||(t.id=this.options.controlId),t.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:t.id},this.options.onSnapshotChange(this.snapshot));let n=M(e,`[${P}]`)!==null,s=M(e,`[${R}]`)!==null,l=_e(this.baseDescribedBy,n?this.options.descriptionId:void 0,s?this.options.errorId:void 0);l?t.setAttribute("aria-describedby",l):t.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid");let d=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&d?t.setAttribute("aria-labelledby",this.options.labelId):t.getAttribute("aria-labelledby")===this.options.labelId&&t.removeAttribute("aria-labelledby"),this.applyStateAttributes(t)}validate(){return Promise.resolve(this.runValidation()).then(e=>e.length===0)}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:t,touched:o,dirty:i,filled:n,count:s}=this.snapshot;p(e,"data-invalid",t.length>0),p(e,"data-valid",t.length===0),p(e,"data-touched",o),p(e,"data-dirty",i),p(e,"data-filled",n),p(e,"data-over-limit",this.isOverLimit(s))}resolveValue(){return this.props.value!==void 0?this.props.value:xe(this.control)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||O}runValidation(e={}){let t=++this.runToken,o=this.props.validate?.(this.resolveValue());return W(o)?(this.pending=!0,Promise.resolve(o).then(i=>t!==this.runToken?this.snapshot.errors:(this.pending=!1,this.commit(i,e)))):this.commit(o,e)}commit(e,t){if(this.custom=z(e),this.custom.length===0&&this.injected.length===0){let l=this.nativeMessage();l&&(this.custom=[l])}let o=this.readCount(),i=this.composeErrors(o),n=this.snapshot.errors.length===0;this.update({errors:i,count:o,filled:v(this.resolveValue())});let s=i[0];return s&&n&&!t.silent&&this.options.announce(s,"assertive"),i}update(e){let t={...this.snapshot,...e,valid:!0};t.valid=t.errors.length===0,!Se(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(S,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count}})))}};function W(r){return typeof r?.then=="function"}function Me(r,e){return r.length===e.length&&r.every((t,o)=>t===e[o])}function Se(r,e){return r.controlId===e.controlId&&r.valid===e.valid&&r.touched===e.touched&&r.dirty===e.dirty&&r.filled===e.filled&&r.count===e.count&&r.errors.length===e.errors.length&&r.errors.every((t,o)=>t===e.errors[o])}var E=require("react/jsx-runtime"),[ie,c]=(0,ee.createSafeContext)("Field");function ne(r,e,t){let o=a.useId(),i=a.useMemo(()=>({labelId:`${o}label`,descriptionId:`${o}description`,errorId:`${o}error`,controlId:`${o}control`}),[o]),[n,s]=a.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0})),l=(0,oe.useCallbackRef)(r.onValidityChange),d=a.useMemo(()=>new T({...i,grouped:e,onSnapshotChange:u=>{s(u);let{controlId:F,...Ce}=u;l(Ce)},announce:te.announce}),[i,e,l]);a.useEffect(()=>{let u=t.current;if(u)return d.connect(u),s(d.state),()=>d.disconnect()},[d,t]),a.useEffect(()=>{d.setProps({validate:r.validate,mode:r.mode,errors:r.errors,value:r.value,name:r.name,getCharacterCountMessage:r.getCharacterCountMessage,invalidMessage:r.invalidMessage}),d.sync()});let m=a.useCallback(u=>d.setCharacterCount(u),[d]);return{...i,controlId:n.controlId||void 0,errors:n.errors,grouped:e,count:n.count,setCharacterCount:m,getCharacterCountMessage:r.getCharacterCountMessage}}var H=a.forwardRef(({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l,...d},m)=>{let h=a.useRef(null),u=ne({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!1,h),F=(0,V.useComposedRefs)(m,h);return(0,E.jsx)(ie,{...u,children:(0,E.jsx)(k.Primitive.div,{...d,...(0,re.skdxPart)("field","root",d.className),ref:F})})});H.displayName="Field";var w=a.forwardRef(({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l,...d},m)=>{let h=a.useRef(null),u=ne({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!0,h),F=(0,V.useComposedRefs)(m,h);return(0,E.jsx)(ie,{...u,children:(0,E.jsx)(k.Primitive.fieldset,{...d,ref:F})})});w.displayName="Fieldset";var se=f(require("react"),1),U=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),G=se.forwardRef((r,e)=>{let t=c("FieldLabel");return t.grouped?(0,$.jsx)(B.Primitive.legend,{id:t.labelId,...r,...(0,U.skdxPart)("field","label",r.className),ref:e}):(0,$.jsx)(B.Primitive.label,{id:t.labelId,htmlFor:t.controlId,...r,...(0,U.skdxPart)("field","label",r.className),ref:e})});G.displayName="FieldLabel";var ae=f(require("react"),1),le=require("../utils/part.cjs"),de=require("../utils/primitive.cjs");var ue=require("react/jsx-runtime"),j=ae.forwardRef((r,e)=>{let t=c("FieldDescription");return(0,ue.jsx)(de.Primitive.span,{id:t.descriptionId,[P]:"",...r,...(0,le.skdxPart)("field","description",r.className),ref:e})});j.displayName="FieldDescription";var ce=f(require("react"),1),he=require("../utils/part.cjs"),pe=require("../utils/primitive.cjs");var me=require("react/jsx-runtime"),Y=ce.forwardRef(({children:r,...e},t)=>{let o=c("FieldError");return o.errors.length===0?null:(0,me.jsx)(pe.Primitive.span,{id:o.errorId,[R]:"",...e,...(0,he.skdxPart)("field","error",e.className),ref:t,children:r??o.errors.join(" ")})});Y.displayName="FieldError";var A=f(require("react"),1),fe=require("../utils/part.cjs"),ve=require("../utils/primitive.cjs");var ge=require("react/jsx-runtime"),q=A.forwardRef(({maxLength:r,threshold:e=0,children:t,...o},i)=>{let n=c("FieldCharacterCount"),{setCharacterCount:s}=n;if(A.useEffect(()=>(s({maxLength:r,threshold:e}),()=>s(null)),[s,r,e]),!C(n.count,r,e))return null;let l=r-n.count;return(0,ge.jsx)(ve.Primitive.span,{[I]:"","data-over-limit":l<0?"":void 0,...o,...(0,fe.skdxPart)("field","character-count",o.className),ref:i,children:t??(n.getCharacterCountMessage??g)(l)})});q.displayName="FieldCharacterCount";0&&(module.exports={CHARACTER_COUNT_ANNOUNCE_DELAY_MS,FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_CONTROL_ATTRIBUTE,FIELD_CONTROL_SELECTOR,FIELD_VALIDITY_CHANGE_EVENT,Field,FieldCharacterCount,FieldDescription,FieldError,FieldLabel,Fieldset,NATIVE_INVALID_FALLBACK_MESSAGE,characterCountMessage,characterCountVisible,collectFieldErrors,errorSummaryScope,findFieldControl,focusFieldTarget});
+"use strict";var je=Object.create;var D=Object.defineProperty;var Qe=Object.getOwnPropertyDescriptor;var Ke=Object.getOwnPropertyNames;var ze=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var Xe=(t,e)=>{for(var r in e)D(t,r,{get:e[r],enumerable:!0})},le=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ke(e))!We.call(t,o)&&o!==r&&D(t,o,{get:()=>e[o],enumerable:!(i=Qe(e,o))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?je(ze(t)):{},le(e||!t||!t.__esModule?D(r,"default",{value:t,enumerable:!0}):r,t)),Je=t=>le(D({},"__esModule",{value:!0}),t);var ct={};Xe(ct,{CHARACTER_COUNT_ANNOUNCE_DELAY_MS:()=>me,ERROR_SUMMARY_RESCAN_EVENTS:()=>pe,FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>N,FIELD_CONTROL_ATTRIBUTE:()=>S,FIELD_CONTROL_SELECTOR:()=>V,FIELD_NAME_ATTRIBUTE:()=>g,FIELD_REQUIRED_INDICATOR_ATTRIBUTE:()=>w,FIELD_VALIDITY_CHANGE_EVENT:()=>X,FORM_FIELD_ATTRIBUTE:()=>L,FORM_MESSAGE_ATTRIBUTE:()=>Z,Field:()=>se,FieldCharacterCount:()=>Ye,FieldDescription:()=>H,FieldError:()=>B,FieldLabel:()=>U,FieldProvider:()=>oe,FieldRequiredIndicator:()=>q,FieldRoot:()=>ne,Fieldset:()=>ae,NATIVE_INVALID_FALLBACK_MESSAGE:()=>ee,characterCountMessage:()=>x,characterCountVisible:()=>_,collectFieldErrors:()=>Ee,errorSummaryScope:()=>fe,findFieldControl:()=>k,focusFieldTarget:()=>be,resetFields:()=>Re,useFieldContext:()=>c,validateFields:()=>ve});module.exports=Je(ct);var s=b(require("react"),1),Ve=require("../utils/createContext.cjs"),we=require("../utils/liveAnnouncer.cjs"),ke=require("../utils/part.cjs"),ie=require("../utils/primitive.cjs"),He=require("../utils/useCallbackRef.cjs");var Te=b(require("react"),1),Fe=require("../utils/part.cjs"),ge=require("../utils/primitive.cjs");var X="validity-change",R="data-skdx-field",g="data-skdx-field-name",j="data-skdx-field-message",J="data-skdx-field-description",O="data-skdx-field-error",N="data-skdx-field-character-count",de="data-skdx-field-pending",G="data-skdx-field-resubmit",L="data-skdx-form-field",Z="data-skdx-form-message",pe=["validity-change","invalid","change","blur"],Ze="data-skdx-error-summary",me=1e3;function x(t){let e=Math.abs(t),r=e===1?"character":"characters";return t<0?`You have ${e} ${r} too many`:`You have ${e} ${r} remaining`}function _(t,e,r=0){return r<=0?!0:t>=e*r/100}var ee="This field is invalid.",S="data-skdx-field-control",V=[`[${S}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),w="data-skdx-field-required-indicator",et=new Set(["INPUT","SELECT","TEXTAREA"]),tt=new Set(["radiogroup","group"]),rt=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function ue(t){return t==null?[]:(Array.isArray(t)?t:[t]).filter(r=>typeof r=="string"&&r.trim()!=="")}function k(t){for(let e of Array.from(t.querySelectorAll(V)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${R}]`)===t)return e;return null}function Q(t,e){return K(t,R,e)}function K(t,e,r){for(let i of Array.from(t.querySelectorAll(r)))if(i.closest(`[${e}]`)===t)return i;return null}function it(t){if(!t)return;let e=t;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in t?e.value:t.querySelector('input[aria-hidden="true"]')?.value}function F(t){return t==null||t===!1||t===""?!1:!(Array.isArray(t)&&t.length===0)}function v(t,e,r){r?t.setAttribute(e,""):t.removeAttribute(e)}function ce(t,...e){let r=t.split(/\s+/).filter(Boolean);for(let i of e)i&&!r.includes(i)&&r.push(i);return r.join(" ")}function fe(t){return t.closest("form, skdx-form")??t.parentElement??t}function ot(t){let e=k(t),i=Q(t,`[${O}]`)?.textContent?.trim()||t.getAttribute(j)||t.getAttribute(g)||"";return!e?.id||!i?[]:[{id:e.id,message:i}]}function nt(t){let e=K(t,L,V);if(!e?.id||e.getAttribute("aria-invalid")!=="true")return[];let i=K(t,L,`[${Z}]:not([hidden])`)?.textContent?.trim()||t.getAttribute(g)||"";return i?[{id:e.id,message:i}]:[]}function Ee(t){return Array.from(t.querySelectorAll(`[${R}][data-invalid], [${L}]`)).flatMap(r=>(r.hasAttribute(R)?ot:nt)(r))}var z="__skdxFieldCheckValidity",W="__skdxFieldReset";async function ve(t){let e=Array.from(t.querySelectorAll(`[${R}]`));return(await Promise.all(e.map(i=>i[z]?.()??!0))).every(Boolean)}function Re(t){for(let e of Array.from(t.querySelectorAll(`[${R}]`)))e[W]?.()}function be(t,e=document){let r=e.getElementById(t);if(!r)return;let i=r.getAttribute("role"),n=(r.tagName==="FIELDSET"||i!==null&&tt.has(i)?r.querySelector(rt):null)??r;n.focus(),n.scrollIntoView?.({block:"center"})}var M=class{constructor(e){this.options=e;this.props={};this.root=null;this.form=null;this.control=null;this.baseDescribedBy="";this.baseLabelledBy="";this.wroteLabelledBy=!1;this.wroteRequired=!1;this.wroteDisabled=!1;this.runToken=0;this.pending=!1;this.injected=[];this.custom=[];this.characterCount=null;this.awaitingSubmit=!1;this.handleInput=()=>{let e=this.isOverLimit(this.snapshot.count),r=this.readCount();this.update({dirty:!0,filled:F(this.resolveValue()),count:r,errors:this.composeErrors(r)}),this.scheduleCountAnnouncement(r,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.scheduleValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:F(this.resolveValue()),count:e,errors:this.composeErrors(e)});let r=this.validationTimer!==void 0;clearTimeout(this.validationTimer),this.validationTimer=void 0;let i=this.props.mode??"blur";(r||i==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(e.target!==this.form||this.isEngineResubmit(e))return;this.markTouched();let r=this.runValidation({silent:this.hasErrorSummary()});if(he(r)){e.preventDefault(),this.awaitingSubmit=!0,Promise.resolve(r).then(()=>{this.awaitingSubmit&&(this.awaitingSubmit=!1,this.resubmitIfSettled())});return}(r.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null}}get state(){return this.snapshot}setProps(e){let r=this.props.value;this.props=e;let i=ue(e.errors??null),o=!st(this.injected,i);o&&(this.injected=i);let n=e.value!==r;if(!o&&!n)return;let a=this.readCount();this.update({count:a,filled:F(this.resolveValue()),errors:this.composeErrors(a)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let i=this.readCount();this.update({count:i,errors:this.composeErrors(i)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??x)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let r=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&r.push(this.countMessage(this.characterCount.maxLength-e)),r}scheduleCountAnnouncement(e,r){let i=this.characterCount;if(!i)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){r||this.options.announce(this.countMessage(i.maxLength-e),"assertive");return}if(!_(e,i.maxLength,i.threshold))return;let o=i.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(o),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(R,""),Object.defineProperty(e,z,{value:()=>this.validate(),configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(e,W,{value:()=>this.reset(),configurable:!0,enumerable:!1,writable:!0}),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let r=this.readCount();this.update({filled:F(this.resolveValue()),count:r,errors:this.composeErrors(r)})}disconnect(){clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.awaitingSubmit=!1;let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),delete e[z],delete e[W],this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let r=k(e);r!==this.control&&(this.control=r,this.baseDescribedBy=r?.getAttribute("aria-describedby")??"",this.baseLabelledBy=r?.getAttribute("aria-labelledby")??"",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1);let{name:i}=this.props;i?e.setAttribute(g,i):e.removeAttribute(g);let o=this.snapshot.errors.join(" ");if(o?e.setAttribute(j,o):e.removeAttribute(j),this.applyStateAttributes(e),!r)return;r.id||(r.id=this.options.controlId),r.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:r.id,validity:this.readValidity()},this.options.onSnapshotChange(this.snapshot));let n=Q(e,`[${J}]`)!==null,a=Q(e,`[${O}]`)!==null,l=ce(this.baseDescribedBy,n?this.options.descriptionId:void 0,a?this.options.errorId:void 0);l?r.setAttribute("aria-describedby",l):r.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?r.setAttribute("aria-invalid","true"):r.removeAttribute("aria-invalid");let m=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&m?(r.setAttribute("aria-labelledby",ce(this.baseLabelledBy,this.options.labelId)),this.wroteLabelledBy=!0):this.wroteLabelledBy&&(this.baseLabelledBy?r.setAttribute("aria-labelledby",this.baseLabelledBy):r.removeAttribute("aria-labelledby"),this.wroteLabelledBy=!1),this.applyConstraintState(r),this.applyStateAttributes(r)}applyConstraintState(e){let r=et.has(e.tagName),i=this.props.required===!0,o=this.props.disabled===!0;i?(r?e.setAttribute("required",""):e.setAttribute("aria-required","true"),this.wroteRequired=!0):this.wroteRequired&&(e.removeAttribute(r?"required":"aria-required"),this.wroteRequired=!1),o?(r?e.setAttribute("disabled",""):e.setAttribute("aria-disabled","true"),this.wroteDisabled=!0):this.wroteDisabled&&(e.removeAttribute(r?"disabled":"aria-disabled"),this.wroteDisabled=!1)}validate(){return Promise.resolve(this.runValidation()).then(e=>e.length===0)}reset(){this.injected=[],this.custom=[],this.pending=!1,this.awaitingSubmit=!1,this.runToken++,clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.markPending(!1);let e=this.readCount();this.update({touched:!1,dirty:!1,count:e,filled:F(this.resolveValue()),errors:this.composeErrors(e)}),this.sync()}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:r,touched:i,dirty:o,filled:n,count:a}=this.snapshot;v(e,"data-invalid",r.length>0),v(e,"data-valid",r.length===0),v(e,"data-touched",i),v(e,"data-dirty",o),v(e,"data-filled",n),v(e,"data-over-limit",this.isOverLimit(a)),v(e,"data-disabled",this.props.disabled===!0)}resolveValue(){return this.props.value!==void 0?this.props.value:it(this.control)}readValidity(){return this.control?.validity??null}markPending(e){this.root&&v(this.root,de,e)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||ee}runValidation(e={}){let r=++this.runToken,i=this.props.validate?.(this.resolveValue());return he(i)?(this.pending=!0,this.markPending(!0),Promise.resolve(i).then(o=>r!==this.runToken?this.snapshot.errors:(this.pending=!1,this.markPending(!1),this.commit(o,e)))):this.commit(i,e)}commit(e,r){this.custom=ue(e);let i=this.nativeMessage();i&&!this.custom.includes(i)&&!this.injected.includes(i)&&(this.custom=[...this.custom,i]);let o=this.readCount(),n=this.composeErrors(o),a=this.snapshot.errors.length===0;this.update({errors:n,count:o,filled:F(this.resolveValue())});let l=n[0];return l&&a&&!r.silent&&this.options.announce(l,"assertive"),n}update(e){let r={...this.snapshot,...e,valid:!0,validity:this.readValidity()};r.valid=r.errors.length===0,!at(this.snapshot,r)&&(this.snapshot=r,this.sync(),this.options.onSnapshotChange(r),this.root?.dispatchEvent(new CustomEvent(X,{bubbles:!0,composed:!0,detail:{valid:r.valid,errors:r.errors,touched:r.touched,dirty:r.dirty,filled:r.filled,count:r.count,validity:r.validity}})))}scheduleValidation(){clearTimeout(this.validationTimer),this.validationTimer=void 0;let e=this.props.mode==="change"?this.props.validationDebounceTime??0:0;if(e<=0){this.runValidation();return}this.validationTimer=setTimeout(()=>{this.validationTimer=void 0,this.runValidation()},e)}hasErrorSummary(){return this.form?.querySelector(`[${Ze}]`)!=null}isEngineResubmit(e){return this.form?.hasAttribute(G)?(this.snapshot.errors.length>0&&e.preventDefault(),!0):!1}resubmitIfSettled(){let e=this.form;if(!(!e||typeof e.requestSubmit!="function")&&!e.querySelector(`[${de}]`)&&!e.querySelector(`[${R}][data-invalid]`)){e.setAttribute(G,"");try{e.requestSubmit()}finally{e.removeAttribute(G)}}}};function he(t){return typeof t?.then=="function"}function st(t,e){return t.length===e.length&&t.every((r,i)=>r===e[i])}function at(t,e){return t.controlId===e.controlId&&t.valid===e.valid&&t.touched===e.touched&&t.dirty===e.dirty&&t.filled===e.filled&&t.count===e.count&&t.validity===e.validity&&t.errors.length===e.errors.length&&t.errors.every((r,i)=>r===e.errors[i])}var ye=require("react/jsx-runtime"),H=Te.forwardRef(({as:t="span",...e},r)=>{let i=c("FieldDescription"),o=ge.Primitive[t];return(0,ye.jsx)(o,{id:i.descriptionId,[J]:"",...e,...(0,Fe.skdxPart)("field","description",e.className),ref:r})});H.displayName="FieldDescription";var Ce=b(require("react"),1),Ie=require("../utils/part.cjs"),Ae=require("../utils/primitive.cjs");var Le=require("react/jsx-runtime"),B=Ce.forwardRef(({as:t="span",children:e,...r},i)=>{let o=c("FieldError");if(o.errors.length===0)return null;let n=Ae.Primitive[t];return(0,Le.jsx)(n,{id:o.errorId,[O]:"",...r,...(0,Ie.skdxPart)("field","error",r.className),ref:i,children:e??o.errors.join(" ")})});B.displayName="FieldError";var _e=b(require("react"),1),te=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var re=require("react/jsx-runtime");function xe(t){!t.defaultPrevented&&t.detail>1&&t.preventDefault()}var U=_e.forwardRef((t,e)=>{let r=c("FieldLabel");return r.grouped?(0,re.jsx)(y.Primitive.legend,{id:r.labelId,...t,...(0,te.skdxPart)("field","label",t.className),ref:e,onMouseDown:(0,y.composeEventHandlers)(t.onMouseDown,xe)}):(0,re.jsx)(y.Primitive.label,{id:r.labelId,htmlFor:r.controlId,...t,...(0,te.skdxPart)("field","label",t.className),ref:e,onMouseDown:(0,y.composeEventHandlers)(t.onMouseDown,xe)})});U.displayName="FieldLabel";var Se=b(require("react"),1),Pe=require("../utils/part.cjs"),De=require("../utils/primitive.cjs");var Me=require("react/jsx-runtime"),q=Se.forwardRef(({children:t,...e},r)=>c("FieldRequiredIndicator").required?(0,Me.jsx)(De.Primitive.span,{[w]:"",...e,...(0,Pe.skdxPart)("field","required-indicator",e.className),ref:r,children:t??"*"}):null);q.displayName="FieldRequiredIndicator";var p=require("react/jsx-runtime");function Oe({label:t,description:e,children:r}){return(0,p.jsxs)(p.Fragment,{children:[t?(0,p.jsxs)(U,{children:[t,(0,p.jsx)(q,{})]}):null,r,e?(0,p.jsx)(H,{children:e}):null,(0,p.jsx)(B,{})]})}var h=b(require("react"),1);var lt=new Set(["input","select","textarea"]),dt=new Set(["textbox","searchbox","combobox","listbox","radiogroup","group","slider","spinbutton","checkbox","radio","switch"]);function ut(t){let e=t.props;return e["aria-hidden"]===!0||e["aria-hidden"]==="true"?!1:e[S]!==void 0||typeof e.role=="string"&&dt.has(e.role)?!0:typeof t.type!="string"||!lt.has(t.type)?!1:!(t.type==="input"&&e.type==="hidden")}function $(t,e,r){if(r.found||!t)return t;if(Array.isArray(t))return h.Children.map(t,o=>$(o,e,r));if(!h.isValidElement(t))return t;let i=t;return i.type===h.Fragment?h.cloneElement(i,void 0,$(i.props.children,e,r)):ut(i)?(r.found=!0,typeof i.props.id=="string"&&i.props.id!==""?(r.controlId=i.props.id,i):(r.controlId=e,h.cloneElement(i,{id:e}))):typeof i.type=="string"&&i.props.children!==void 0?h.cloneElement(i,void 0,$(i.props.children,e,r)):t}function Ne(t,e){let r={controlId:void 0,found:!1};return{children:$(t,e,r),controlId:r.controlId}}var C=require("react/jsx-runtime"),[oe,c]=(0,Ve.createSafeContext)("Field");function Be(t,e,r,i){let o=s.useId(),n=s.useMemo(()=>({labelId:`${o}label`,descriptionId:`${o}description`,errorId:`${o}error`,controlId:`${o}control`}),[o]),a=Ne(i,n.controlId),[l,m]=s.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null})),T=(0,He.useCallbackRef)(t.onValidityChange),d=s.useMemo(()=>new M({...n,grouped:e,onSnapshotChange:u=>{m(u);let{controlId:P,...A}=u;T(A)},announce:we.announce}),[n,e,T]);s.useEffect(()=>{let u=r.current;if(u)return d.connect(u),m(d.state),()=>d.disconnect()},[d,r]),s.useEffect(()=>{d.setProps({validate:t.validate,mode:t.mode,errors:t.errors,value:t.value,name:t.name,required:t.required,disabled:t.disabled,getCharacterCountMessage:t.getCharacterCountMessage,invalidMessage:t.invalidMessage,validationDebounceTime:t.validationDebounceTime}),d.sync()});let f=s.useCallback(u=>d.setCharacterCount(u),[d]),I=s.useMemo(()=>({checkValidity:()=>d.validate(),reset:()=>d.reset()}),[d]);return{context:{...n,controlId:l.controlId||a.controlId,errors:l.errors,grouped:e,required:t.required===!0,count:l.count,setCharacterCount:f,getCharacterCountMessage:t.getCharacterCountMessage},children:a.children,handle:I}}function Ue(t,e,r){s.useImperativeHandle(t,()=>e.current?Object.assign(e.current,r):r)}var ne=s.forwardRef(({validate:t,mode:e,errors:r,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:m,invalidMessage:T,validationDebounceTime:d,...f},I)=>{let E=s.useRef(null),{context:u,children:P,handle:A}=Be({validate:t,mode:e,errors:r,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:m,invalidMessage:T,validationDebounceTime:d},!1,E,f.children);return Ue(I,E,A),(0,C.jsx)(oe,{...u,children:(0,C.jsx)(ie.Primitive.div,{...f,...(0,ke.skdxPart)("field","root",f.className),ref:E,children:P})})});ne.displayName="FieldRoot";var se=s.forwardRef(({label:t,description:e,children:r,...i},o)=>(0,C.jsx)(ne,{...i,ref:o,children:Oe({label:t,description:e,children:r})}));se.displayName="Field";var ae=s.forwardRef(({validate:t,mode:e,errors:r,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:m,invalidMessage:T,validationDebounceTime:d,...f},I)=>{let E=s.useRef(null),{context:u,children:P,handle:A}=Be({validate:t,mode:e,errors:r,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:m,invalidMessage:T,validationDebounceTime:d},!0,E,f.children);return Ue(I,E,A),(0,C.jsx)(oe,{...u,children:(0,C.jsx)(ie.Primitive.fieldset,{...f,ref:E,children:P})})});ae.displayName="Fieldset";var Y=b(require("react"),1),qe=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs");var Ge=require("react/jsx-runtime"),Ye=Y.forwardRef(({maxLength:t,threshold:e=0,children:r,...i},o)=>{let n=c("FieldCharacterCount"),{setCharacterCount:a}=n;if(Y.useEffect(()=>(a({maxLength:t,threshold:e}),()=>a(null)),[a,t,e]),!_(n.count,t,e))return null;let l=t-n.count;return(0,Ge.jsx)($e.Primitive.span,{[N]:"","data-over-limit":l<0?"":void 0,...i,...(0,qe.skdxPart)("field","character-count",i.className),ref:o,children:r??(n.getCharacterCountMessage??x)(l)})});Ye.displayName="FieldCharacterCount";0&&(module.exports={CHARACTER_COUNT_ANNOUNCE_DELAY_MS,ERROR_SUMMARY_RESCAN_EVENTS,FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_CONTROL_ATTRIBUTE,FIELD_CONTROL_SELECTOR,FIELD_NAME_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,FORM_FIELD_ATTRIBUTE,FORM_MESSAGE_ATTRIBUTE,Field,FieldCharacterCount,FieldDescription,FieldError,FieldLabel,FieldProvider,FieldRequiredIndicator,FieldRoot,Fieldset,NATIVE_INVALID_FALLBACK_MESSAGE,characterCountMessage,characterCountVisible,collectFieldErrors,errorSummaryScope,findFieldControl,focusFieldTarget,resetFields,useFieldContext,validateFields});

package/dist/field/Field.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldContextValue, FieldProps, FieldsetProps } from './types.cjs';
+import type { FieldContextValue, FieldProps, FieldRootProps, FieldsetProps } from './types.cjs';
 export declare const FieldProvider: {
     (props: FieldContextValue & {
         children: React.ReactNode;
@@ -7,27 +7,65 @@ export declare const FieldProvider: {
     displayName: string;
 }, useFieldContext: (consumerName: string) => FieldContextValue;
 /**
- * Wraps one form control and wires its `FieldLabel`, `FieldDescription`, and
- * `FieldError` to it: generated ids, `aria-describedby`, `aria-invalid`, and
- * the `data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled`
- * state hooks on both the Field and the control. Any control works — an skdx
- * component, a native `<input>`, or a third-party widget — because the Field
- * finds it in its own subtree rather than expecting it to cooperate.
- *
- * Also owns the field's validation model: `validate` (sync or async),
- * `mode`, server errors through `errors`, and the wrapped control's own
- * native constraint validation as a fallback, so plain `required` works with
- * no configuration.
+ * Wires one form control to its label, description, error: generates ids,
+ * `aria-describedby`, `aria-invalid`, and state hooks
+ * (`data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled`).
+ *
+ * Any control works (skdx, native `<input>`, third-party) because Field
+ * discovers it in its subtree, not via cooperation. Owns validation model:
+ * `validate` (sync/async), `mode`, server `errors`, native constraint
+ * validation as fallback.
+ *
+ * `Field` (recipe below) adds `FieldAnatomy`. For manual composition and
+ * `FieldCharacterCount`, use `@skdx/react/primitives/field`'s `FieldRoot`.
  *
  * @example
  * ```tsx
- * <Field validate={(value) => (value ? null : 'Enter your name')}>
+ * import { FieldDescription, FieldError, FieldLabel, FieldRoot, Fieldset } from '@skdx/react/primitives/field';
+ *
+ * <FieldRoot validate={(value) => (value ? null : 'Enter your name')}>
  *   <FieldLabel>Name</FieldLabel>
  *   <TextField />
  *   <FieldDescription>As shown on your passport.</FieldDescription>
  *   <FieldError />
+ * </FieldRoot>
+ * ```
+ */
+export declare const FieldRoot: React.ForwardRefExoticComponent<Omit<FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One form control with its label, help text and error message, wired
+ * together.
+ *
+ * Always draws the derived anatomy from `label`/`description`: the label with
+ * the required marker *inside* it — where it joins the control's accessible
+ * name rather than sitting beside it — the control (`children`), the help
+ * text, and the error. `children` is the control, never a switch: this
+ * component never inspects what it was given.
+ *
+ * Everything {@link FieldRoot} owns still applies — the validation model, the
+ * `aria-describedby`/`aria-invalid` wiring, the state hooks. Deriving only
+ * makes the wiring automatic.
+ *
+ * @example
+ * ```tsx
+ * <Field
+ *   label="Name"
+ *   description="As shown on your passport."
+ *   required
+ *   validate={(value) => (value ? null : 'Enter your name')}
+ * >
+ *   <TextField />
  * </Field>
  * ```
+ *
+ * @example Validating on demand, through a ref typed as `FieldHandle`:
+ * ```tsx
+ * const ref = React.useRef<FieldHandle>(null);
+ * <Field ref={ref} label="Name" validate={required}><TextField /></Field>;
+ * if (await ref.current?.checkValidity()) goToNextStep();
+ * // …and afterwards, on a form that stays mounted:
+ * ref.current?.reset();
+ * ```
  */
 export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
@@ -35,15 +73,29 @@ export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "re
  * `<legend>` — the grouping a `RadioGroup` or a set of checkboxes needs,
  * since a `<label for>` may not point at a `[role="radiogroup"]`. Same props,
  * same validation model, same state hooks; the group control is named with
- * `aria-labelledby` instead of `for`/`id`.
+ * `aria-labelledby` instead of `for`/`id`. Renders `children` verbatim.
+ *
+ * An alternative root rather than a leaf part, so it is public alongside
+ * `Field`. It derives nothing — compose the label, control and error yourself
+ * from `@skdx/react/primitives/field`.
  *
  * @example
  * ```tsx
+ * import { Fieldset } from '@skdx/react';
+ * import { FieldDescription, FieldError, FieldLabel, FieldRoot, Fieldset } from '@skdx/react/primitives/field';
+ *
  * <Fieldset validate={(value) => (value ? null : 'Choose a plan')}>
  *   <FieldLabel>Plan</FieldLabel>
  *   <RadioGroup>…</RadioGroup>
  *   <FieldError />
  * </Fieldset>
  * ```
+ *
+ * @example Validating on demand, through a ref typed as `FieldsetHandle`:
+ * ```tsx
+ * const ref = React.useRef<FieldsetHandle>(null);
+ * <Fieldset ref={ref} validate={required}>…</Fieldset>;
+ * if (await ref.current?.checkValidity()) goToNextStep();
+ * ```
  */
 export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldsetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/field/Field.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldContextValue, FieldProps, FieldsetProps } from './types.js';
+import type { FieldContextValue, FieldProps, FieldRootProps, FieldsetProps } from './types.js';
 export declare const FieldProvider: {
     (props: FieldContextValue & {
         children: React.ReactNode;
@@ -7,27 +7,65 @@ export declare const FieldProvider: {
     displayName: string;
 }, useFieldContext: (consumerName: string) => FieldContextValue;
 /**
- * Wraps one form control and wires its `FieldLabel`, `FieldDescription`, and
- * `FieldError` to it: generated ids, `aria-describedby`, `aria-invalid`, and
- * the `data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled`
- * state hooks on both the Field and the control. Any control works — an skdx
- * component, a native `<input>`, or a third-party widget — because the Field
- * finds it in its own subtree rather than expecting it to cooperate.
- *
- * Also owns the field's validation model: `validate` (sync or async),
- * `mode`, server errors through `errors`, and the wrapped control's own
- * native constraint validation as a fallback, so plain `required` works with
- * no configuration.
+ * Wires one form control to its label, description, error: generates ids,
+ * `aria-describedby`, `aria-invalid`, and state hooks
+ * (`data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled`).
+ *
+ * Any control works (skdx, native `<input>`, third-party) because Field
+ * discovers it in its subtree, not via cooperation. Owns validation model:
+ * `validate` (sync/async), `mode`, server `errors`, native constraint
+ * validation as fallback.
+ *
+ * `Field` (recipe below) adds `FieldAnatomy`. For manual composition and
+ * `FieldCharacterCount`, use `@skdx/react/primitives/field`'s `FieldRoot`.
  *
  * @example
  * ```tsx
- * <Field validate={(value) => (value ? null : 'Enter your name')}>
+ * import { FieldDescription, FieldError, FieldLabel, FieldRoot, Fieldset } from '@skdx/react/primitives/field';
+ *
+ * <FieldRoot validate={(value) => (value ? null : 'Enter your name')}>
  *   <FieldLabel>Name</FieldLabel>
  *   <TextField />
  *   <FieldDescription>As shown on your passport.</FieldDescription>
  *   <FieldError />
+ * </FieldRoot>
+ * ```
+ */
+export declare const FieldRoot: React.ForwardRefExoticComponent<Omit<FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One form control with its label, help text and error message, wired
+ * together.
+ *
+ * Always draws the derived anatomy from `label`/`description`: the label with
+ * the required marker *inside* it — where it joins the control's accessible
+ * name rather than sitting beside it — the control (`children`), the help
+ * text, and the error. `children` is the control, never a switch: this
+ * component never inspects what it was given.
+ *
+ * Everything {@link FieldRoot} owns still applies — the validation model, the
+ * `aria-describedby`/`aria-invalid` wiring, the state hooks. Deriving only
+ * makes the wiring automatic.
+ *
+ * @example
+ * ```tsx
+ * <Field
+ *   label="Name"
+ *   description="As shown on your passport."
+ *   required
+ *   validate={(value) => (value ? null : 'Enter your name')}
+ * >
+ *   <TextField />
  * </Field>
  * ```
+ *
+ * @example Validating on demand, through a ref typed as `FieldHandle`:
+ * ```tsx
+ * const ref = React.useRef<FieldHandle>(null);
+ * <Field ref={ref} label="Name" validate={required}><TextField /></Field>;
+ * if (await ref.current?.checkValidity()) goToNextStep();
+ * // …and afterwards, on a form that stays mounted:
+ * ref.current?.reset();
+ * ```
  */
 export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
@@ -35,15 +73,29 @@ export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "re
  * `<legend>` — the grouping a `RadioGroup` or a set of checkboxes needs,
  * since a `<label for>` may not point at a `[role="radiogroup"]`. Same props,
  * same validation model, same state hooks; the group control is named with
- * `aria-labelledby` instead of `for`/`id`.
+ * `aria-labelledby` instead of `for`/`id`. Renders `children` verbatim.
+ *
+ * An alternative root rather than a leaf part, so it is public alongside
+ * `Field`. It derives nothing — compose the label, control and error yourself
+ * from `@skdx/react/primitives/field`.
  *
  * @example
  * ```tsx
+ * import { Fieldset } from '@skdx/react';
+ * import { FieldDescription, FieldError, FieldLabel, FieldRoot, Fieldset } from '@skdx/react/primitives/field';
+ *
  * <Fieldset validate={(value) => (value ? null : 'Choose a plan')}>
  *   <FieldLabel>Plan</FieldLabel>
  *   <RadioGroup>…</RadioGroup>
  *   <FieldError />
  * </Fieldset>
  * ```
+ *
+ * @example Validating on demand, through a ref typed as `FieldsetHandle`:
+ * ```tsx
+ * const ref = React.useRef<FieldsetHandle>(null);
+ * <Fieldset ref={ref} validate={required}>…</Fieldset>;
+ * if (await ref.current?.checkValidity()) goToNextStep();
+ * ```
  */
 export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldsetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;