@skdx/react 0.27.0 → 0.29.0

package/dist/field/Field.cjs

@@ -1 +1,2 @@
-"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 client';
+"use strict";var Fe=Object.create;var v=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,Ie=Object.prototype.hasOwnProperty;var ye=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},B=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Ee(t))!Ie.call(e,n)&&n!==r&&v(e,n,{get:()=>t[n],enumerable:!(i=Ce(t,n))||i.enumerable});return e};var M=(e,t,r)=>(r=e!=null?Fe(Te(e)):{},B(t||!e||!e.__esModule?v(r,"default",{value:e,enumerable:!0}):r,e)),Ne=e=>B(v({},"__esModule",{value:!0}),e);var ve={};ye(ve,{CHARACTER_COUNT_ANNOUNCE_DELAY_MS:()=>o.CHARACTER_COUNT_ANNOUNCE_DELAY_MS,ERROR_SUMMARY_RESCAN_EVENTS:()=>o.ERROR_SUMMARY_RESCAN_EVENTS,FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>o.FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_CONTROL_ATTRIBUTE:()=>o.FIELD_CONTROL_ATTRIBUTE,FIELD_CONTROL_SELECTOR:()=>o.FIELD_CONTROL_SELECTOR,FIELD_NAME_ATTRIBUTE:()=>o.FIELD_NAME_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE:()=>o.FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT:()=>o.FIELD_VALIDITY_CHANGE_EVENT,FORM_FIELD_ATTRIBUTE:()=>o.FORM_FIELD_ATTRIBUTE,FORM_MESSAGE_ATTRIBUTE:()=>o.FORM_MESSAGE_ATTRIBUTE,Field:()=>k,FieldCharacterCount:()=>Re,FieldDescription:()=>L,FieldError:()=>b,FieldLabel:()=>D,FieldProvider:()=>U,FieldRequiredIndicator:()=>A,FieldRoot:()=>w,Fieldset:()=>q,NATIVE_INVALID_FALLBACK_MESSAGE:()=>o.NATIVE_INVALID_FALLBACK_MESSAGE,characterCountMessage:()=>o.characterCountMessage,characterCountVisible:()=>o.characterCountVisible,collectFieldErrors:()=>o.collectFieldErrors,errorSummaryScope:()=>o.errorSummaryScope,findFieldControl:()=>o.findFieldControl,focusFieldTarget:()=>o.focusFieldTarget,resetFields:()=>o.resetFields,useFieldContext:()=>m,validateFields:()=>o.validateFields});module.exports=Ne(ve);var a=M(require("react"),1),H=require("../utils/appearance.cjs"),ne=require("../utils/createContext.cjs"),ae=require("../utils/field-core.cjs"),de=require("../utils/liveAnnouncer.cjs"),S=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),le=require("../utils/useCallbackRef.cjs");var $=require("../utils/field-core.cjs"),G=require("../utils/part.cjs"),Y=require("../utils/primitive.cjs");var Q=require("react/jsx-runtime"),L=({as:e="span",ref:t,...r})=>{let i=m("FieldDescription"),n=Y.Primitive[e];return(0,Q.jsx)(n,{id:i.descriptionId,[$.FIELD_DESCRIPTION_ATTRIBUTE]:"",...r,...(0,G.skdxPart)("field","description",r.className),ref:t})};L.displayName="FieldDescription";var K=require("../utils/field-core.cjs"),W=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var J=require("react/jsx-runtime"),b=({as:e="span",children:t,ref:r,...i})=>{let n=m("FieldError");if(n.errors.length===0)return null;let d=z.Primitive[e];return(0,J.jsx)(d,{id:n.errorId,[K.FIELD_ERROR_ATTRIBUTE]:"",...i,...(0,W.skdxPart)("field","error",i.className),ref:r,children:t??n.errors.join(" ")})};b.displayName="FieldError";var g=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var O=require("react/jsx-runtime");function X(e){!e.defaultPrevented&&e.detail>1&&e.preventDefault()}var D=({ref:e,...t})=>{let r=m("FieldLabel");return r.grouped?(0,O.jsx)(T.Primitive.legend,{id:r.labelId,...t,...(0,g.skdxPart)("field","label",t.className),ref:e,onMouseDown:(0,T.composeEventHandlers)(t.onMouseDown,X)}):(0,O.jsx)(T.Primitive.label,{id:r.labelId,htmlFor:r.controlId,...t,...(0,g.skdxPart)("field","label",t.className),ref:e,onMouseDown:(0,T.composeEventHandlers)(t.onMouseDown,X)})};D.displayName="FieldLabel";var Z=require("../utils/field-core.cjs"),j=require("../utils/part.cjs"),ee=require("../utils/primitive.cjs");var te=require("react/jsx-runtime"),A=({children:e,ref:t,...r})=>m("FieldRequiredIndicator").required?(0,te.jsx)(ee.Primitive.span,{[Z.FIELD_REQUIRED_INDICATOR_ATTRIBUTE]:"",...r,...(0,j.skdxPart)("field","required-indicator",r.className),ref:t,children:e??"*"}):null;A.displayName="FieldRequiredIndicator";var p=require("react/jsx-runtime");function re({label:e,description:t,children:r}){return(0,p.jsxs)(p.Fragment,{children:[e?(0,p.jsxs)(D,{children:[e,(0,p.jsx)(A,{})]}):null,r,t?(0,p.jsx)(L,{children:t}):null,(0,p.jsx)(b,{})]})}var R=M(require("react"),1),oe=require("../utils/field-core.cjs"),he=new Set(["input","select","textarea"]),Pe=new Set(["textbox","searchbox","combobox","listbox","radiogroup","group","slider","spinbutton","checkbox","radio","switch"]);function _e(e){let t=e.props;return t["aria-hidden"]===!0||t["aria-hidden"]==="true"?!1:t[oe.FIELD_CONTROL_ATTRIBUTE]!==void 0||typeof t.role=="string"&&Pe.has(t.role)?!0:typeof e.type!="string"||!he.has(e.type)?!1:!(e.type==="input"&&t.type==="hidden")}function x(e,t,r){if(r.found||!e)return e;if(Array.isArray(e))return R.Children.map(e,n=>x(n,t,r));if(!R.isValidElement(e))return e;let i=e;return i.type===R.Fragment?R.cloneElement(i,void 0,x(i.props.children,t,r)):_e(i)?(r.found=!0,typeof i.props.id=="string"&&i.props.id!==""?(r.controlId=i.props.id,i):(r.controlId=t,R.cloneElement(i,{id:t}))):typeof i.type=="string"&&i.props.children!==void 0?R.cloneElement(i,void 0,x(i.props.children,t,r)):e}function ie(e,t){let r={controlId:void 0,found:!1};return{children:x(e,t,r),controlId:r.controlId}}var I=require("react/jsx-runtime"),[U,m]=(0,ne.createSafeContext)("Field");function ce(e,t,r,i){let n=a.useId(),d=a.useMemo(()=>({labelId:`${n}label`,descriptionId:`${n}description`,errorId:`${n}error`,controlId:`${n}control`}),[n]),s=ie(i,d.controlId),[c,C]=a.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null})),E=(0,le.useCallbackRef)(e.onValidityChange),l=a.useMemo(()=>new ae.FieldController({...d,grouped:t,onSnapshotChange:u=>{C(u);let{controlId:_,...P}=u;E(P)},announce:de.announce}),[d,t,E]);a.useEffect(()=>{let u=r.current;if(u)return l.connect(u),C(l.state),()=>l.disconnect()},[l,r]);let N=`${c.controlId}|${c.errors.length>0}`;a.useEffect(()=>{l.setProps({validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,required:e.required,disabled:e.disabled,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage,validationDebounceTime:e.validationDebounceTime}),l.sync()},[l,i,N,e.validate,e.mode,e.errors,e.value,e.name,e.required,e.disabled,e.getCharacterCountMessage,e.invalidMessage,e.validationDebounceTime]);let h=a.useCallback(u=>l.setCharacterCount(u),[l]),f={checkValidity:()=>l.validate(),reset:()=>l.reset()};return{context:{...d,controlId:c.controlId||s.controlId,errors:c.errors,grouped:t,required:e.required===!0,count:c.count,setCharacterCount:h,getCharacterCountMessage:e.getCharacterCountMessage},children:s.children,handle:f}}function se(e,t,r){a.useImperativeHandle(e,()=>t.current?Object.assign(t.current,r):r)}var w=({validate:e,mode:t,errors:r,value:i,name:n,required:d,disabled:s,onValidityChange:c,getCharacterCountMessage:C,invalidMessage:E,validationDebounceTime:l,ref:N,density:h,...f})=>{let F=a.useRef(null),{context:u,children:_,handle:P}=ce({validate:e,mode:t,errors:r,value:i,name:n,required:d,disabled:s,onValidityChange:c,getCharacterCountMessage:C,invalidMessage:E,validationDebounceTime:l},!1,F,f.children);return se(N,F,P),(0,I.jsx)(U,{...u,children:(0,I.jsx)(V.Primitive.div,{...f,...(0,H.appearanceAttrs)({density:h},f),...(0,S.skdxPart)("field","root",f.className),ref:F,children:_})})};w.displayName="FieldRoot";var k=({label:e,description:t,children:r,ref:i,...n})=>(0,I.jsx)(w,{...n,ref:i,children:re({label:e,description:t,children:r})});k.displayName="Field";var q=({validate:e,mode:t,errors:r,value:i,name:n,required:d,disabled:s,onValidityChange:c,getCharacterCountMessage:C,invalidMessage:E,validationDebounceTime:l,ref:N,density:h,...f})=>{let F=a.useRef(null),{context:u,children:_,handle:P}=ce({validate:e,mode:t,errors:r,value:i,name:n,required:d,disabled:s,onValidityChange:c,getCharacterCountMessage:C,invalidMessage:E,validationDebounceTime:l},!0,F,f.children);return se(N,F,P),(0,I.jsx)(U,{...u,children:(0,I.jsx)(V.Primitive.fieldset,{...f,...(0,H.appearanceAttrs)({density:h},f),...(0,S.skdxPart)("field","root",f.className),disabled:s,ref:F,children:_})})};q.displayName="Fieldset";var o=require("../utils/field-core.cjs");var fe=M(require("react"),1),y=require("../utils/field-core.cjs"),ue=require("../utils/part.cjs"),me=require("../utils/primitive.cjs");var pe=require("react/jsx-runtime"),Re=({maxLength:e,threshold:t=0,children:r,ref:i,...n})=>{let d=m("FieldCharacterCount"),{setCharacterCount:s}=d;if(fe.useEffect(()=>(s({maxLength:e,threshold:t}),()=>s(null)),[s,e,t]),!(0,y.characterCountVisible)(d.count,e,t))return null;let c=e-d.count;return(0,pe.jsx)(me.Primitive.span,{[y.FIELD_CHARACTER_COUNT_ATTRIBUTE]:"","data-over-limit":c<0?"":void 0,...n,...(0,ue.skdxPart)("field","character-count",n.className),ref:i,children:r??(d.getCharacterCountMessage??y.characterCountMessage)(c)})};Re.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,44 +1,61 @@
 import * as React from 'react';
-import type { FieldContextValue, FieldProps, FieldsetProps } from './types.cjs';
-export declare const FieldProvider: {
-    (props: FieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFieldContext: (consumerName: string) => FieldContextValue;
+import type { FieldContextValue, FieldProps, FieldRootProps, FieldsetProps, FieldValidateHandle } from './types.cjs';
+export declare const FieldProvider: React.FC<FieldContextValue & {
+    children: React.ReactNode;
+}>, 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 a form control to its label, description and error, generating ids,
+ * `aria-describedby`, `aria-invalid`, and validation state attributes.
  *
  * @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: {
+    ({ validate, mode, errors, value, name, required, disabled, onValidityChange, getCharacterCountMessage, invalidMessage, validationDebounceTime, ref: forwardedRef, density, ...props }: Omit<FieldRootProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
+/**
+ * Renders one form control with its label, help text and error message,
+ * wired together via {@link FieldRoot}.
+ *
+ * @example
+ * ```tsx
+ * <Field
+ *   label="Name"
+ *   description="As shown on your passport."
+ *   required
+ *   validate={(value) => (value ? null : 'Enter your name')}
+ * >
+ *   <TextField />
  * </Field>
  * ```
  */
-export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: {
+    ({ label, description, children, ref: forwardedRef, ...rest }: Omit<FieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /**
- * A {@link Field} that renders a `<fieldset>` and puts its `FieldLabel` in a
- * `<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`.
+ * A {@link Field} that renders a `<fieldset>` with its label in a `<legend>`,
+ * naming the group with `aria-labelledby` instead of `for`/`id`.
  *
  * @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>
@@ -46,4 +63,9 @@ export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "re
  * </Fieldset>
  * ```
  */
-export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldsetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export declare const Fieldset: {
+    ({ validate, mode, errors, value, name, required, disabled, onValidityChange, getCharacterCountMessage, invalidMessage, validationDebounceTime, ref: forwardedRef, density, ...props }: Omit<FieldsetProps, "ref"> & {
+        ref?: React.Ref<HTMLFieldSetElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/field/Field.d.ts

@@ -1,44 +1,61 @@
 import * as React from 'react';
-import type { FieldContextValue, FieldProps, FieldsetProps } from './types.js';
-export declare const FieldProvider: {
-    (props: FieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFieldContext: (consumerName: string) => FieldContextValue;
+import type { FieldContextValue, FieldProps, FieldRootProps, FieldsetProps, FieldValidateHandle } from './types.js';
+export declare const FieldProvider: React.FC<FieldContextValue & {
+    children: React.ReactNode;
+}>, 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 a form control to its label, description and error, generating ids,
+ * `aria-describedby`, `aria-invalid`, and validation state attributes.
  *
  * @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: {
+    ({ validate, mode, errors, value, name, required, disabled, onValidityChange, getCharacterCountMessage, invalidMessage, validationDebounceTime, ref: forwardedRef, density, ...props }: Omit<FieldRootProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
+/**
+ * Renders one form control with its label, help text and error message,
+ * wired together via {@link FieldRoot}.
+ *
+ * @example
+ * ```tsx
+ * <Field
+ *   label="Name"
+ *   description="As shown on your passport."
+ *   required
+ *   validate={(value) => (value ? null : 'Enter your name')}
+ * >
+ *   <TextField />
  * </Field>
  * ```
  */
-export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: {
+    ({ label, description, children, ref: forwardedRef, ...rest }: Omit<FieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /**
- * A {@link Field} that renders a `<fieldset>` and puts its `FieldLabel` in a
- * `<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`.
+ * A {@link Field} that renders a `<fieldset>` with its label in a `<legend>`,
+ * naming the group with `aria-labelledby` instead of `for`/`id`.
  *
  * @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>
@@ -46,4 +63,9 @@ export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "re
  * </Fieldset>
  * ```
  */
-export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldsetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export declare const Fieldset: {
+    ({ validate, mode, errors, value, name, required, disabled, onValidityChange, getCharacterCountMessage, invalidMessage, validationDebounceTime, ref: forwardedRef, density, ...props }: Omit<FieldsetProps, "ref"> & {
+        ref?: React.Ref<HTMLFieldSetElement & FieldValidateHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/field/Field.js

@@ -1 +1,2 @@
-import*as a from"react";import{useComposedRefs as V}from"../utils/composeRefs.js";import{createSafeContext as de}from"../utils/createContext.js";import{announce as ue}from"../utils/liveAnnouncer.js";import{skdxPart as ce}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{useCallbackRef as he}from"../utils/useCallbackRef.js";var P="validity-change",C="data-skdx-field",R="data-skdx-field-name",I="data-skdx-field-message",A="data-skdx-field-description",E="data-skdx-field-error",x="data-skdx-field-character-count",Z=1e3;function F(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 b(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(", "),ee=new Set(["radiogroup","group"]),te=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function M(r){return r==null?[]:(Array.isArray(r)?r:[r]).filter(t=>typeof t=="string"&&t.trim()!=="")}function _(r){for(let e of Array.from(r.querySelectorAll(N)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${C}]`)===r)return e;return null}function L(r,e){for(let t of Array.from(r.querySelectorAll(e)))if(t.closest(`[${C}]`)===r)return t;return null}function re(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 f(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 oe(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 ie(r){return r.closest("form, skdx-form")??r.parentElement??r}function ne(r){return Array.from(r.querySelectorAll(`[${C}][data-invalid]`)).flatMap(t=>{let o=_(t),n=L(t,`[${E}]`)?.textContent?.trim()||t.getAttribute(I)||t.getAttribute(R)||"";return!o?.id||!n?[]:[{id:o.id,message:n}]})}function se(r,e=document){let t=e.getElementById(r);if(!t)return;let o=t.getAttribute("role"),n=(t.tagName==="FIELDSET"||o!==null&&ee.has(o)?t.querySelector(te):null)??t;n.focus(),n.scrollIntoView?.({block:"center"})}var g=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:f(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:f(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(S(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=M(e.errors??null),i=!ae(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:f(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??F)(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(!b(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(C,""),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:f(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=_(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"");let{name:o}=this.props;o?e.setAttribute(R,o):e.removeAttribute(R);let i=this.snapshot.errors.join(" ");if(i?e.setAttribute(I,i):e.removeAttribute(I),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=L(e,`[${A}]`)!==null,s=L(e,`[${E}]`)!==null,l=oe(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:re(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 S(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=M(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:f(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,!le(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(P,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count}})))}};function S(r){return typeof r?.then=="function"}function ae(r,e){return r.length===e.length&&r.every((t,o)=>t===e[o])}function le(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])}import{jsx as T}from"react/jsx-runtime";var[H,c]=de("Field");function w(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=he(r.onValidityChange),d=a.useMemo(()=>new g({...i,grouped:e,onSnapshotChange:u=>{s(u);let{controlId:v,...X}=u;l(X)},announce:ue}),[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 U=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=w({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!1,h),v=V(m,h);return T(H,{...u,children:T(k.div,{...d,...ce("field","root",d.className),ref:v})})});U.displayName="Field";var B=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=w({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!0,h),v=V(m,h);return T(H,{...u,children:T(k.fieldset,{...d,ref:v})})});B.displayName="Fieldset";import*as Y from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as G}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var q=Y.forwardRef((r,e)=>{let t=c("FieldLabel");return t.grouped?j(G.legend,{id:t.labelId,...r,...$("field","label",r.className),ref:e}):j(G.label,{id:t.labelId,htmlFor:t.controlId,...r,...$("field","label",r.className),ref:e})});q.displayName="FieldLabel";import*as K from"react";import{skdxPart as pe}from"../utils/part.js";import{Primitive as me}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var z=K.forwardRef((r,e)=>{let t=c("FieldDescription");return fe(me.span,{id:t.descriptionId,[A]:"",...r,...pe("field","description",r.className),ref:e})});z.displayName="FieldDescription";import*as W from"react";import{skdxPart as ve}from"../utils/part.js";import{Primitive as ge}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var J=W.forwardRef(({children:r,...e},t)=>{let o=c("FieldError");return o.errors.length===0?null:Ce(ge.span,{id:o.errorId,[E]:"",...e,...ve("field","error",e.className),ref:t,children:r??o.errors.join(" ")})});J.displayName="FieldError";import*as y from"react";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as Fe}from"../utils/primitive.js";import{jsx as be}from"react/jsx-runtime";var Q=y.forwardRef(({maxLength:r,threshold:e=0,children:t,...o},i)=>{let n=c("FieldCharacterCount"),{setCharacterCount:s}=n;if(y.useEffect(()=>(s({maxLength:r,threshold:e}),()=>s(null)),[s,r,e]),!b(n.count,r,e))return null;let l=r-n.count;return be(Fe.span,{[x]:"","data-over-limit":l<0?"":void 0,...o,...Ee("field","character-count",o.className),ref:i,children:t??(n.getCharacterCountMessage??F)(l)})});Q.displayName="FieldCharacterCount";export{Z as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,x as FIELD_CHARACTER_COUNT_ATTRIBUTE,D as FIELD_CONTROL_ATTRIBUTE,N as FIELD_CONTROL_SELECTOR,P as FIELD_VALIDITY_CHANGE_EVENT,U as Field,Q as FieldCharacterCount,z as FieldDescription,J as FieldError,q as FieldLabel,B as Fieldset,O as NATIVE_INVALID_FALLBACK_MESSAGE,F as characterCountMessage,b as characterCountVisible,ne as collectFieldErrors,ie as errorSummaryScope,_ as findFieldControl,se as focusFieldTarget};
+'use client';
+import*as n from"react";import{appearanceAttrs as S}from"../utils/appearance.js";import{createSafeContext as ce}from"../utils/createContext.js";import{FieldController as se}from"../utils/field-core.js";import{announce as fe}from"../utils/liveAnnouncer.js";import{skdxPart as V}from"../utils/part.js";import{Primitive as U}from"../utils/primitive.js";import{useCallbackRef as ue}from"../utils/useCallbackRef.js";import{FIELD_DESCRIPTION_ATTRIBUTE as Q}from"../utils/field-core.js";import{skdxPart as K}from"../utils/part.js";import{Primitive as W}from"../utils/primitive.js";import{jsx as z}from"react/jsx-runtime";var h=({as:e="span",ref:t,...r})=>{let o=u("FieldDescription"),i=W[e];return z(i,{id:o.descriptionId,[Q]:"",...r,...K("field","description",r.className),ref:t})};h.displayName="FieldDescription";import{FIELD_ERROR_ATTRIBUTE as J}from"../utils/field-core.js";import{skdxPart as X}from"../utils/part.js";import{Primitive as Z}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var P=({as:e="span",children:t,ref:r,...o})=>{let i=u("FieldError");if(i.errors.length===0)return null;let a=Z[e];return j(a,{id:i.errorId,[J]:"",...o,...X("field","error",o.className),ref:r,children:t??i.errors.join(" ")})};P.displayName="FieldError";import{skdxPart as b}from"../utils/part.js";import{composeEventHandlers as D,Primitive as A}from"../utils/primitive.js";import{jsx as M}from"react/jsx-runtime";function x(e){!e.defaultPrevented&&e.detail>1&&e.preventDefault()}var _=({ref:e,...t})=>{let r=u("FieldLabel");return r.grouped?M(A.legend,{id:r.labelId,...t,...b("field","label",t.className),ref:e,onMouseDown:D(t.onMouseDown,x)}):M(A.label,{id:r.labelId,htmlFor:r.controlId,...t,...b("field","label",t.className),ref:e,onMouseDown:D(t.onMouseDown,x)})};_.displayName="FieldLabel";import{FIELD_REQUIRED_INDICATOR_ATTRIBUTE as ee}from"../utils/field-core.js";import{skdxPart as te}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as oe}from"react/jsx-runtime";var v=({children:e,ref:t,...r})=>u("FieldRequiredIndicator").required?oe(re.span,{[ee]:"",...r,...te("field","required-indicator",r.className),ref:t,children:e??"*"}):null;v.displayName="FieldRequiredIndicator";import{Fragment as ie,jsx as L,jsxs as g}from"react/jsx-runtime";function O({label:e,description:t,children:r}){return g(ie,{children:[e?g(_,{children:[e,L(v,{})]}):null,r,t?L(h,{children:t}):null,L(P,{})]})}import*as m from"react";import{FIELD_CONTROL_ATTRIBUTE as ne}from"../utils/field-core.js";var ae=new Set(["input","select","textarea"]),de=new Set(["textbox","searchbox","combobox","listbox","radiogroup","group","slider","spinbutton","checkbox","radio","switch"]);function le(e){let t=e.props;return t["aria-hidden"]===!0||t["aria-hidden"]==="true"?!1:t[ne]!==void 0||typeof t.role=="string"&&de.has(t.role)?!0:typeof e.type!="string"||!ae.has(e.type)?!1:!(e.type==="input"&&t.type==="hidden")}function N(e,t,r){if(r.found||!e)return e;if(Array.isArray(e))return m.Children.map(e,i=>N(i,t,r));if(!m.isValidElement(e))return e;let o=e;return o.type===m.Fragment?m.cloneElement(o,void 0,N(o.props.children,t,r)):le(o)?(r.found=!0,typeof o.props.id=="string"&&o.props.id!==""?(r.controlId=o.props.id,o):(r.controlId=t,m.cloneElement(o,{id:t}))):typeof o.type=="string"&&o.props.children!==void 0?m.cloneElement(o,void 0,N(o.props.children,t,r)):e}function H(e,t){let r={controlId:void 0,found:!1};return{children:N(e,t,r),controlId:r.controlId}}import{jsx as I}from"react/jsx-runtime";var[w,u]=ce("Field");function k(e,t,r,o){let i=n.useId(),a=n.useMemo(()=>({labelId:`${i}label`,descriptionId:`${i}description`,errorId:`${i}error`,controlId:`${i}control`}),[i]),c=H(o,a.controlId),[l,p]=n.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null})),F=ue(e.onValidityChange),d=n.useMemo(()=>new se({...a,grouped:t,onSnapshotChange:f=>{p(f);let{controlId:y,...T}=f;F(T)},announce:fe}),[a,t,F]);n.useEffect(()=>{let f=r.current;if(f)return d.connect(f),p(d.state),()=>d.disconnect()},[d,r]);let C=`${l.controlId}|${l.errors.length>0}`;n.useEffect(()=>{d.setProps({validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,required:e.required,disabled:e.disabled,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage,validationDebounceTime:e.validationDebounceTime}),d.sync()},[d,o,C,e.validate,e.mode,e.errors,e.value,e.name,e.required,e.disabled,e.getCharacterCountMessage,e.invalidMessage,e.validationDebounceTime]);let E=n.useCallback(f=>d.setCharacterCount(f),[d]),s={checkValidity:()=>d.validate(),reset:()=>d.reset()};return{context:{...a,controlId:l.controlId||c.controlId,errors:l.errors,grouped:t,required:e.required===!0,count:l.count,setCharacterCount:E,getCharacterCountMessage:e.getCharacterCountMessage},children:c.children,handle:s}}function q(e,t,r){n.useImperativeHandle(e,()=>t.current?Object.assign(t.current,r):r)}var B=({validate:e,mode:t,errors:r,value:o,name:i,required:a,disabled:c,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:F,validationDebounceTime:d,ref:C,density:E,...s})=>{let R=n.useRef(null),{context:f,children:y,handle:T}=k({validate:e,mode:t,errors:r,value:o,name:i,required:a,disabled:c,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:F,validationDebounceTime:d},!1,R,s.children);return q(C,R,T),I(w,{...f,children:I(U.div,{...s,...S({density:E},s),...V("field","root",s.className),ref:R,children:y})})};B.displayName="FieldRoot";var $=({label:e,description:t,children:r,ref:o,...i})=>I(B,{...i,ref:o,children:O({label:e,description:t,children:r})});$.displayName="Field";var G=({validate:e,mode:t,errors:r,value:o,name:i,required:a,disabled:c,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:F,validationDebounceTime:d,ref:C,density:E,...s})=>{let R=n.useRef(null),{context:f,children:y,handle:T}=k({validate:e,mode:t,errors:r,value:o,name:i,required:a,disabled:c,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:F,validationDebounceTime:d},!0,R,s.children);return q(C,R,T),I(w,{...f,children:I(U.fieldset,{...s,...S({density:E},s),...V("field","root",s.className),disabled:c,ref:R,children:y})})};G.displayName="Fieldset";import{CHARACTER_COUNT_ANNOUNCE_DELAY_MS as Ct,characterCountMessage as Et,characterCountVisible as Tt,FIELD_CHARACTER_COUNT_ATTRIBUTE as It,FIELD_REQUIRED_INDICATOR_ATTRIBUTE as yt,FIELD_CONTROL_ATTRIBUTE as Nt,FIELD_CONTROL_SELECTOR as ht,FIELD_VALIDITY_CHANGE_EVENT as Pt,NATIVE_INVALID_FALLBACK_MESSAGE as _t,findFieldControl as vt,collectFieldErrors as Lt,ERROR_SUMMARY_RESCAN_EVENTS as bt,errorSummaryScope as Dt,FORM_FIELD_ATTRIBUTE as At,FORM_MESSAGE_ATTRIBUTE as xt,FIELD_NAME_ATTRIBUTE as Mt,focusFieldTarget as gt,resetFields as Ot,validateFields as Ht}from"../utils/field-core.js";import*as Y from"react";import{characterCountMessage as me,characterCountVisible as Re,FIELD_CHARACTER_COUNT_ATTRIBUTE as pe}from"../utils/field-core.js";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Ce}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var Ee=({maxLength:e,threshold:t=0,children:r,ref:o,...i})=>{let a=u("FieldCharacterCount"),{setCharacterCount:c}=a;if(Y.useEffect(()=>(c({maxLength:e,threshold:t}),()=>c(null)),[c,e,t]),!Re(a.count,e,t))return null;let l=e-a.count;return Te(Ce.span,{[pe]:"","data-over-limit":l<0?"":void 0,...i,...Fe("field","character-count",i.className),ref:o,children:r??(a.getCharacterCountMessage??me)(l)})};Ee.displayName="FieldCharacterCount";export{Ct as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,bt as ERROR_SUMMARY_RESCAN_EVENTS,It as FIELD_CHARACTER_COUNT_ATTRIBUTE,Nt as FIELD_CONTROL_ATTRIBUTE,ht as FIELD_CONTROL_SELECTOR,Mt as FIELD_NAME_ATTRIBUTE,yt as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,Pt as FIELD_VALIDITY_CHANGE_EVENT,At as FORM_FIELD_ATTRIBUTE,xt as FORM_MESSAGE_ATTRIBUTE,$ as Field,Ee as FieldCharacterCount,h as FieldDescription,P as FieldError,_ as FieldLabel,w as FieldProvider,v as FieldRequiredIndicator,B as FieldRoot,G as Fieldset,_t as NATIVE_INVALID_FALLBACK_MESSAGE,Et as characterCountMessage,Tt as characterCountVisible,Lt as collectFieldErrors,Dt as errorSummaryScope,vt as findFieldControl,gt as focusFieldTarget,Ot as resetFields,u as useFieldContext,Ht as validateFields};

package/dist/field/FieldAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * Field anatomy from `label`/`description` — plain function, not component (to avoid hydration mismatch).
+ *
+ * @internal
+ */
+export declare function FieldAnatomy({ label, description, children, }: {
+    label?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
+}): React.ReactNode;

package/dist/field/FieldAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * Field anatomy from `label`/`description` — plain function, not component (to avoid hydration mismatch).
+ *
+ * @internal
+ */
+export declare function FieldAnatomy({ label, description, children, }: {
+    label?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
+}): React.ReactNode;

package/dist/field/FieldCharacterCount.d.cts

@@ -1,20 +1,8 @@
 import * as React from 'react';
 import type { FieldCharacterCountProps } from './types.cjs';
 /**
- * A running character count for the control a {@link Field} wraps — GOV.UK's
- * pattern, which works the same for a `Textarea` and a `TextField` because the
- * count belongs to the field, not to the control.
- *
- * `maxLength` is a *soft* limit: it is deliberately not set as the control's
- * native `maxlength`, because that truncates silently and leaves the user with
- * no idea their text was cut. Going over it instead makes the Field invalid
- * through the same path as any other error — `data-invalid`, `aria-invalid` on
- * the control, a message in `FieldError`, and a blocked submit — plus
- * `data-over-limit` here and on the Field for styling.
- *
- * Nothing here is a live region. The count is announced through the shared
- * announcer one typing pause after the last keystroke, so a screen reader hears
- * one number instead of a running commentary over every character typed.
+ * Running character count. `maxLength` is soft: sets `data-over-limit` on
+ * Field, not truncate. Announced once per pause, not per character.
  *
  * @example
  * ```tsx
@@ -26,4 +14,7 @@ import type { FieldCharacterCountProps } from './types.cjs';
  * </Field>
  * ```
  */
-export declare const FieldCharacterCount: React.ForwardRefExoticComponent<Omit<FieldCharacterCountProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldCharacterCount: {
+    ({ maxLength, threshold, children, ref: forwardedRef, ...props }: FieldCharacterCountProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldCharacterCount.d.ts

@@ -1,20 +1,8 @@
 import * as React from 'react';
 import type { FieldCharacterCountProps } from './types.js';
 /**
- * A running character count for the control a {@link Field} wraps — GOV.UK's
- * pattern, which works the same for a `Textarea` and a `TextField` because the
- * count belongs to the field, not to the control.
- *
- * `maxLength` is a *soft* limit: it is deliberately not set as the control's
- * native `maxlength`, because that truncates silently and leaves the user with
- * no idea their text was cut. Going over it instead makes the Field invalid
- * through the same path as any other error — `data-invalid`, `aria-invalid` on
- * the control, a message in `FieldError`, and a blocked submit — plus
- * `data-over-limit` here and on the Field for styling.
- *
- * Nothing here is a live region. The count is announced through the shared
- * announcer one typing pause after the last keystroke, so a screen reader hears
- * one number instead of a running commentary over every character typed.
+ * Running character count. `maxLength` is soft: sets `data-over-limit` on
+ * Field, not truncate. Announced once per pause, not per character.
  *
  * @example
  * ```tsx
@@ -26,4 +14,7 @@ import type { FieldCharacterCountProps } from './types.js';
  * </Field>
  * ```
  */
-export declare const FieldCharacterCount: React.ForwardRefExoticComponent<Omit<FieldCharacterCountProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldCharacterCount: {
+    ({ maxLength, threshold, children, ref: forwardedRef, ...props }: FieldCharacterCountProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldDescription.d.cts

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldDescriptionProps } from './types.cjs';
 /**
- * Help text for a {@link Field}. Its generated `id` is added to the wrapped
- * control's `aria-describedby`, so screen readers announce it *with* the
- * control instead of leaving it to be discovered by browsing.
+ * Help text for a {@link Field}. Its `id` is added to the wrapped control's
+ * `aria-describedby` so screen readers announce it with the control.
  *
  * @example
  * ```tsx
@@ -14,4 +13,7 @@ import type { FieldDescriptionProps } from './types.cjs';
  * </Field>
  * ```
  */
-export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldDescription: {
+    ({ as, ref: forwardedRef, ...props }: FieldDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldDescription.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldDescriptionProps } from './types.js';
 /**
- * Help text for a {@link Field}. Its generated `id` is added to the wrapped
- * control's `aria-describedby`, so screen readers announce it *with* the
- * control instead of leaving it to be discovered by browsing.
+ * Help text for a {@link Field}. Its `id` is added to the wrapped control's
+ * `aria-describedby` so screen readers announce it with the control.
  *
  * @example
  * ```tsx
@@ -14,4 +13,7 @@ import type { FieldDescriptionProps } from './types.js';
  * </Field>
  * ```
  */
-export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldDescription: {
+    ({ as, ref: forwardedRef, ...props }: FieldDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldError.d.cts

@@ -1,13 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldErrorProps } from './types.cjs';
 /**
- * The error text for a {@link Field}. Renders nothing while the field is
- * valid; once it renders, its generated `id` joins the control's
- * `aria-describedby` and the control gains `aria-invalid="true"`.
- *
- * With no children it renders the field's current messages, which is also
- * the text a `FormErrorSummary` uses for its link — pass your own children to
- * override the copy.
+ * Error text for a Field. Renders nothing while valid; when rendered, joins `aria-describedby` and sets `aria-invalid`.
  *
  * @example
  * ```tsx
@@ -18,4 +12,7 @@ import type { FieldErrorProps } from './types.cjs';
  * </Field>
  * ```
  */
-export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldError: {
+    ({ as, children, ref: forwardedRef, ...props }: FieldErrorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldError.d.ts

@@ -1,13 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldErrorProps } from './types.js';
 /**
- * The error text for a {@link Field}. Renders nothing while the field is
- * valid; once it renders, its generated `id` joins the control's
- * `aria-describedby` and the control gains `aria-invalid="true"`.
- *
- * With no children it renders the field's current messages, which is also
- * the text a `FormErrorSummary` uses for its link — pass your own children to
- * override the copy.
+ * Error text for a Field. Renders nothing while valid; when rendered, joins `aria-describedby` and sets `aria-invalid`.
  *
  * @example
  * ```tsx
@@ -18,4 +12,7 @@ import type { FieldErrorProps } from './types.js';
  * </Field>
  * ```
  */
-export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FieldError: {
+    ({ as, children, ref: forwardedRef, ...props }: FieldErrorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldLabel.d.cts

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldLabelProps } from './types.cjs';
 /**
- * The label for a {@link Field}'s control. Renders a `<label>` whose
- * `htmlFor` points at whatever control the Field discovered — or a
- * `<legend>` inside a {@link Fieldset}, since a `<label for>` may not
- * reference a `[role="radiogroup"]` (there the Field puts `aria-labelledby`
- * on the group instead).
+ * Label for a {@link Field}'s control, rendering a `<label>` or, inside a
+ * {@link Fieldset}, a `<legend>` named with `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -15,4 +12,7 @@ import type { FieldLabelProps } from './types.cjs';
  * </Field>
  * ```
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const FieldLabel: {
+    ({ ref: forwardedRef, ...props }: FieldLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldLabel.d.ts

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FieldLabelProps } from './types.js';
 /**
- * The label for a {@link Field}'s control. Renders a `<label>` whose
- * `htmlFor` points at whatever control the Field discovered — or a
- * `<legend>` inside a {@link Fieldset}, since a `<label for>` may not
- * reference a `[role="radiogroup"]` (there the Field puts `aria-labelledby`
- * on the group instead).
+ * Label for a {@link Field}'s control, rendering a `<label>` or, inside a
+ * {@link Fieldset}, a `<legend>` named with `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -15,4 +12,7 @@ import type { FieldLabelProps } from './types.js';
  * </Field>
  * ```
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const FieldLabel: {
+    ({ ref: forwardedRef, ...props }: FieldLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldRequiredIndicator.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { FieldRequiredIndicatorProps } from './types.cjs';
+/**
+ * "This field is required" marker for a {@link Field}, rendered only inside
+ * `FieldLabel` so it joins the control's accessible name.
+ *
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <FieldLabel>
+ *     Email <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <input type="email" />
+ * </Field>
+ * ```
+ */
+export declare const FieldRequiredIndicator: {
+    ({ children, ref: forwardedRef, ...props }: FieldRequiredIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/FieldRequiredIndicator.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { FieldRequiredIndicatorProps } from './types.js';
+/**
+ * "This field is required" marker for a {@link Field}, rendered only inside
+ * `FieldLabel` so it joins the control's accessible name.
+ *
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <FieldLabel>
+ *     Email <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <input type="email" />
+ * </Field>
+ * ```
+ */
+export declare const FieldRequiredIndicator: {
+    ({ children, ref: forwardedRef, ...props }: FieldRequiredIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/field/fieldControlId.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/** What {@link withFieldControlId} resolved for one render. */
+export interface FieldControlIdResult {
+    /** The children to render, with the generated id cloned onto the control when one was found. */
+    children: React.ReactNode;
+    /** The id the control carries in this render's markup, or `undefined` when none was recognisable. */
+    controlId: string | undefined;
+}
+/**
+ * Finds the Field's control in `children` and gives it `generatedId`, so the
+ * `for`/`id` pair exists in server markup instead of appearing only after
+ * hydration.
+ *
+ * @param children the Field's children, exactly as passed
+ * @param generatedId the Field's own generated control id
+ */
+export declare function withFieldControlId(children: React.ReactNode, generatedId: string): FieldControlIdResult;