@skdx/react 0.28.0 → 0.30.0

package/dist/form/Form.cjs

@@ -1 +1,2 @@
-"use strict";var De=Object.create;var _=Object.defineProperty;var _e=Object.getOwnPropertyDescriptor;var Be=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,Ue=Object.prototype.hasOwnProperty;var qe=(e,r)=>{for(var t in r)_(e,t,{get:r[t],enumerable:!0})},me=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Be(r))!Ue.call(e,n)&&n!==t&&_(e,n,{get:()=>r[n],enumerable:!(s=_e(r,n))||s.enumerable});return e};var x=(e,r,t)=>(t=e!=null?De(Oe(e)):{},me(r||!e||!e.__esModule?_(t,"default",{value:e,enumerable:!0}):t,e)),ze=e=>me(_({},"__esModule",{value:!0}),e);var Ye={};qe(Ye,{Form:()=>Z,FormControl:()=>O,FormErrorSummary:()=>q,FormField:()=>K,FormFieldProvider:()=>de,FormFieldRoot:()=>J,FormLabel:()=>z,FormMessage:()=>G,FormProvider:()=>Ie,FormRoot:()=>X,FormSubmit:()=>Y,useFormContext:()=>w,useFormFieldContext:()=>P});module.exports=ze(Ye);var m=x(require("react"),1),$=require("../field/Field.cjs"),Ve=require("../utils/createContext.cjs"),He=require("../utils/part.cjs"),we=require("../utils/primitive.cjs"),W=require("../utils/useCallbackRef.cjs");var T=x(require("react"),1),ue=require("../utils/part.cjs"),pe=require("../utils/slot.cjs");function ae(...e){let r=[];for(let t of e)for(let s of(t??"").split(/\s+/))s&&!r.includes(s)&&r.push(s);return r.length>0?r.join(" "):void 0}var L=x(require("react"),1),B=require("../field/Field.cjs"),ie=require("../utils/createContext.cjs"),le=require("../utils/part.cjs"),ce=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),[de,P]=(0,ie.createSafeContext)("FormField"),J=L.forwardRef(({name:e,...r},t)=>{let s=L.useId(),n=L.useId();return(0,H.jsx)(de,{name:e,id:s,messageId:n,children:(0,H.jsx)(ce.Primitive.div,{[B.FORM_FIELD_ATTRIBUTE]:"",[B.FIELD_NAME_ATTRIBUTE]:e,...r,...(0,le.skdxPart)("form","field",r.className),ref:t})})});J.displayName="FormFieldRoot";var K=L.forwardRef(({label:e,message:r,children:t,...s},n)=>(0,H.jsx)(J,{...s,ref:n,children:(0,H.jsx)(fe,{label:e,message:r,children:t})}));K.displayName="FormField";var Fe=require("react/jsx-runtime"),O=T.forwardRef(({children:e,...r},t)=>{let s=P("FormControl"),n=w("FormControl"),d=n.validities[s.name],u=(d?!d.valid:!1)||n.serverErrors(s.name).length>0,p=T.isValidElement(e)?e:null,a=ae(r["aria-describedby"],p?.props["aria-describedby"],u?s.messageId:void 0),E={id:s.id,name:s.name,"aria-invalid":u||void 0};return(0,Fe.jsx)(pe.Slot,{...E,...r,"aria-describedby":a,...(0,ue.skdxPart)("form","control",r.className),ref:t,children:p?T.cloneElement(p,{"aria-describedby":a}):e})});O.displayName="FormControl";var l=x(require("react"),1),g=require("../field/Field.cjs"),Re=require("../utils/composeRefs.cjs"),U=require("../utils/part.cjs"),Ee=require("../utils/primitive.cjs"),R=require("react/jsx-runtime"),q=l.forwardRef(({autoFocus:e=!0,children:r,...t},s)=>{let[n,d]=l.useState([]),[u,p]=l.useState(0),a=l.useRef(null),E=l.useRef(null),M=(0,Re.useComposedRefs)(s,a),v=l.useRef(!1);l.useEffect(()=>{let c=a.current;if(!c)return;let b=(0,g.errorSummaryScope)(c);E.current=b;let V=()=>p(h=>h+1);for(let h of g.ERROR_SUMMARY_RESCAN_EVENTS)b.addEventListener(h,V,!0);return()=>{for(let h of g.ERROR_SUMMARY_RESCAN_EVENTS)b.removeEventListener(h,V,!0)}},[]),l.useEffect(()=>{let c=E.current;c&&d((0,g.collectFieldErrors)(c))},[u]),l.useEffect(()=>{if(n.length===0){v.current=!1;return}v.current||(v.current=!0,e&&a.current?.focus())},[n,e]);let k=(0,U.skdxPart)("form","error-summary",t.className),N=(0,R.jsx)("ul",{role:"list",...(0,U.skdxPart)("form","error-summary-list"),children:n.map(c=>(0,R.jsx)("li",{children:(0,R.jsx)("a",{...(0,U.skdxPart)("form","error-summary-link"),href:`#${c.id}`,onClick:b=>{b.preventDefault(),(0,g.focusFieldTarget)(c.id)},children:c.message})},c.id))}),S=t.asChild&&l.isValidElement(r)?l.cloneElement(r,void 0,(0,R.jsxs)(R.Fragment,{children:[n.length>0?r.props.children:null,N]})):(0,R.jsxs)(R.Fragment,{children:[n.length>0?r:null,N]});return(0,R.jsx)(Ee.Primitive.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:n.length===0||void 0,...t,...k,ref:M,children:S})});q.displayName="FormErrorSummary";var ye=x(require("react"),1),ge=require("../utils/part.cjs"),be=require("../utils/primitive.cjs");var ve=require("react/jsx-runtime"),z=ye.forwardRef((e,r)=>{let t=P("FormLabel");return(0,ve.jsx)(be.Primitive.label,{htmlFor:t.id,...e,...(0,ge.skdxPart)("form","label",e.className),ref:r})});z.displayName="FormLabel";var C=x(require("react"),1),xe=require("../field/Field.cjs"),Pe=require("../utils/part.cjs"),Me=require("../utils/primitive.cjs");function he(e){return e===void 0?[]:(Array.isArray(e)?e:[e]).filter(t=>typeof t=="string"&&t.trim()!=="")}function Q(e){return e.join(" ")}var Se=require("react/jsx-runtime"),G=C.forwardRef(({match:e,forceMatch:r,children:t,...s},n)=>{let d=P("FormMessage"),u=w("FormMessage"),p=u.validities[d.name],a=e?[]:u.serverErrors(d.name),E=r??a.length>0;!E&&p&&(E=e?p[e]===!0:!p.valid);let M=a.length===0?t:s.asChild&&C.isValidElement(t)?C.cloneElement(t,void 0,Q(a)):Q(a);return(0,Se.jsx)(Me.Primitive.span,{id:d.messageId,hidden:!E||void 0,[xe.FORM_MESSAGE_ATTRIBUTE]:"",...s,...(0,Pe.skdxPart)("form","message",s.className),ref:n,children:M})});G.displayName="FormMessage";var Le=x(require("react"),1),Te=require("../utils/part.cjs"),Ce=require("../utils/primitive.cjs"),ke=require("react/jsx-runtime"),Y=Le.forwardRef((e,r)=>(0,ke.jsx)(Ce.Primitive.button,{type:"submit",...e,...(0,Te.skdxPart)("form","submit",e.className),ref:r}));Y.displayName="FormSubmit";var f=require("react/jsx-runtime"),Ne=({errorSummary:e,submitLabel:r,children:t})=>(0,f.jsxs)(f.Fragment,{children:[e?(0,f.jsx)(q,{children:(0,f.jsx)("h2",{className:"skdx-form__error-summary-title",children:e})}):null,t,r?(0,f.jsx)(Y,{children:r}):null]}),fe=({label:e,message:r,children:t})=>(0,f.jsxs)(f.Fragment,{children:[e?(0,f.jsx)(z,{children:e}):null,(0,f.jsx)(O,{children:t}),(0,f.jsx)(G,{children:r})]});var I=require("react/jsx-runtime");function Ge(e){return{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing,valid:e.valid}}var[Ie,w]=(0,Ve.createSafeContext)("Form"),X=m.forwardRef(({errors:e,onSubmit:r,onReset:t,onFieldInvalid:s,validationMode:n="change",validationBehavior:d="native",...u},p)=>{let a=m.useRef(null),[E,M]=m.useState({}),[v,k]=m.useState([]),N=m.useRef(e);N.current!==e&&(N.current=e,v.length>0&&k([]));let S=m.useRef({validationMode:n,validationBehavior:d});S.current={validationMode:n,validationBehavior:d};let c=m.useRef(!1),b=(0,W.useCallbackRef)(s),V=(0,W.useCallbackRef)(t),h=m.useCallback(o=>v.includes(o)?[]:he(e?.[o]),[e,v]),A=m.useCallback(o=>{if(!o||!("validity"in o)||!("name"in o))return;let i=o;i.name&&M(y=>({...y,[i.name]:Ge(i.validity)}))},[]),j=m.useCallback(o=>{let i=o?.name;i&&k(y=>y.includes(i)?y:[...y,i])},[]);m.useEffect(()=>{let o=a.current;if(!o)return;let i=null,y=F=>{F.preventDefault(),A(F.target);let D=F.target;if(D?.name&&D.validity&&b({name:D.name,validity:D.validity}),i)return;i=F.target;let Ae=c.current||S.current.validationBehavior==="aria";queueMicrotask(()=>{let se=i;if(i=null,!se||Ae)return;let ne=o.querySelector("[data-skdx-error-summary]");ne&&!ne.hasAttribute("hidden")||se.focus()})},re=F=>{S.current.validationMode!=="submit"&&A(F.target)},te=F=>{S.current.validationMode==="change"&&A(F.target),j(F.target)},oe=F=>{M({}),k([]),(0,$.resetFields)(o),V(F)};return o.addEventListener("invalid",y,!0),o.addEventListener("blur",re,!0),o.addEventListener("change",te,!0),o.addEventListener("reset",oe),()=>{o.removeEventListener("invalid",y,!0),o.removeEventListener("blur",re,!0),o.removeEventListener("change",te,!0),o.removeEventListener("reset",oe)}},[A,j,b,V]);let ee=m.useCallback(async()=>{let o=a.current;if(!o)return!0;c.current=!0;let i=o.checkValidity();c.current=!1;let y=await(0,$.validateFields)(o);return i&&y},[]);return m.useImperativeHandle(p,()=>a.current?Object.assign(a.current,{validate:ee}):{validate:ee}),(0,I.jsx)(Ie,{validities:E,serverErrors:h,children:(0,I.jsx)(we.Primitive.form,{...u,...(0,He.skdxPart)("form","root",u.className),ref:a,noValidate:d==="aria"?!0:u.noValidate,onSubmit:o=>{if(o.defaultPrevented)return;let i=a.current;if(i){if(d==="aria"){i.checkValidity(),r?.(o);return}if(!i.checkValidity()){o.preventDefault();return}r?.(o)}}})})});X.displayName="FormRoot";var Z=m.forwardRef(({errorSummary:e,submitLabel:r,children:t,...s},n)=>(0,I.jsx)(X,{...s,ref:n,children:(0,I.jsx)(Ne,{errorSummary:e,submitLabel:r,children:t})}));Z.displayName="Form";0&&(module.exports={Form,FormControl,FormErrorSummary,FormField,FormFieldProvider,FormFieldRoot,FormLabel,FormMessage,FormProvider,FormRoot,FormSubmit,useFormContext,useFormFieldContext});
+'use client';
+"use strict";var we=Object.create;var A=Object.defineProperty;var _e=Object.getOwnPropertyDescriptor;var Oe=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Ue=Object.prototype.hasOwnProperty;var qe=(e,r)=>{for(var t in r)A(e,t,{get:r[t],enumerable:!0})},ne=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Oe(r))!Ue.call(e,o)&&o!==t&&A(e,o,{get:()=>r[o],enumerable:!(n=_e(r,o))||n.enumerable});return e};var C=(e,r,t)=>(t=e!=null?we(Be(e)):{},ne(r||!e||!e.__esModule?A(t,"default",{value:e,enumerable:!0}):t,e)),ze=e=>ne(A({},"__esModule",{value:!0}),e);var Xe={};qe(Xe,{Form:()=>W,FormControl:()=>_,FormErrorSummary:()=>B,FormField:()=>G,FormFieldProvider:()=>de,FormFieldRoot:()=>X,FormLabel:()=>U,FormMessage:()=>q,FormProvider:()=>He,FormRoot:()=>Q,FormSubmit:()=>z,useFormContext:()=>k,useFormFieldContext:()=>N});module.exports=ze(Xe);var l=C(require("react"),1),Ie=require("../utils/appearance.cjs"),Ce=require("../utils/createContext.cjs"),$=require("../utils/field-core.cjs"),Te=require("../utils/part.cjs"),ke=require("../utils/primitive.cjs"),K=require("../utils/useCallbackRef.cjs");var w=C(require("react"),1),fe=require("../utils/part.cjs"),ue=require("../utils/slot.cjs");function ie(...e){let r=[];for(let t of e)for(let n of(t??"").split(/\s+/))n&&!r.includes(n)&&r.push(n);return r.length>0?r.join(" "):void 0}var M=C(require("react"),1),ae=require("../utils/createContext.cjs"),D=require("../utils/field-core.cjs"),me=require("../utils/part.cjs"),le=require("../utils/primitive.cjs");var T=require("react/jsx-runtime"),[de,N]=(0,ae.createSafeContext)("FormField"),X=({name:e,ref:r,...t})=>{let n=M.useId(),o=M.useId(),i=M.useRef(new Map),[g,F]=M.useState([]),d=M.useCallback(c=>{let f=i.current.get(c);if(f===void 0){let u=i.current.size;f=u===0?o:`${o}-${u}`,i.current.set(c,f)}return f},[o]),a=M.useCallback((c,f)=>{F(u=>u.includes(c)===f?u:[...i.current.values()].filter(P=>P===c?f:u.includes(P)))},[]);return(0,T.jsx)(de,{name:e,id:n,messageId:o,messageIds:g,claimMessageId:d,setMessageVisible:a,children:(0,T.jsx)(le.Primitive.div,{[D.FORM_FIELD_ATTRIBUTE]:"",[D.FIELD_NAME_ATTRIBUTE]:e,...t,...(0,me.skdxPart)("form","field",t.className),ref:r})})};X.displayName="FormFieldRoot";var G=({label:e,message:r,children:t,ref:n,...o})=>(0,T.jsx)(X,{...o,ref:n,children:(0,T.jsx)(ce,{label:e,message:r,children:t})});G.displayName="FormField";var pe=require("react/jsx-runtime"),_=({children:e,ref:r,...t})=>{let n=N("FormControl"),o=k("FormControl"),i=o.validities[n.name],g=(i?!i.valid:!1)||o.serverErrors(n.name).length>0,F=w.isValidElement(e)?e:null,d;g&&(d=n.messageIds.length?n.messageIds.join(" "):n.messageId);let a=ie(t["aria-describedby"],F?.props["aria-describedby"],d),c={id:n.id,name:n.name,"aria-invalid":g||void 0};return(0,pe.jsx)(ue.Slot,{...c,...t,"aria-describedby":a,...(0,fe.skdxPart)("form","control",t.className),ref:r,children:F?w.cloneElement(F,{"aria-describedby":a}):e})};_.displayName="FormControl";var p=C(require("react"),1),Fe=require("../utils/composeRefs.cjs"),x=require("../utils/field-core.cjs"),O=require("../utils/part.cjs"),Re=require("../utils/primitive.cjs"),v=require("react/jsx-runtime"),B=({autoFocus:e=!0,children:r,ref:t,...n})=>{let[o,i]=p.useState([]),[g,F]=p.useState(0),d=p.useRef(null),a=p.useRef(null),c=(0,Fe.useComposedRefs)(t,d),f=p.useRef(!1);p.useEffect(()=>{let E=d.current;if(!E)return;let b=(0,x.errorSummaryScope)(E);a.current=b;let I=()=>F(S=>S+1);for(let S of x.ERROR_SUMMARY_RESCAN_EVENTS)b.addEventListener(S,I,!0);return()=>{for(let S of x.ERROR_SUMMARY_RESCAN_EVENTS)b.removeEventListener(S,I,!0)}},[]),p.useEffect(()=>{let E=a.current;E&&i((0,x.collectFieldErrors)(E))},[g]),p.useEffect(()=>{if(o.length===0){f.current=!1;return}f.current||(f.current=!0,e&&d.current?.focus())},[o,e]);let u=(0,O.skdxPart)("form","error-summary",n.className),P=(0,v.jsx)("ul",{role:"list",...(0,O.skdxPart)("form","error-summary-list"),children:o.map(E=>(0,v.jsx)("li",{children:(0,v.jsx)("a",{...(0,O.skdxPart)("form","error-summary-link"),href:`#${E.id}`,onClick:b=>{b.preventDefault(),(0,x.focusFieldTarget)(E.id)},children:E.message})},E.id))}),J=n.asChild&&p.isValidElement(r)?p.cloneElement(r,void 0,(0,v.jsxs)(v.Fragment,{children:[o.length>0?r.props.children:null,P]})):(0,v.jsxs)(v.Fragment,{children:[o.length>0?r:null,P]});return(0,v.jsx)(Re.Primitive.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:o.length===0||void 0,...n,...u,ref:c,children:J})};B.displayName="FormErrorSummary";var Ee=require("../utils/part.cjs"),ge=require("../utils/primitive.cjs");var ye=require("react/jsx-runtime"),U=({ref:e,...r})=>{let t=N("FormLabel");return(0,ye.jsx)(ge.Primitive.label,{htmlFor:t.id,...r,...(0,Ee.skdxPart)("form","label",r.className),ref:e})};U.displayName="FormLabel";var L=C(require("react"),1),be=require("../utils/field-core.cjs"),he=require("../utils/part.cjs"),Me=require("../utils/primitive.cjs");function ve(e){return e===void 0?[]:(Array.isArray(e)?e:[e]).filter(t=>typeof t=="string"&&t.trim()!=="")}function Y(e){return e.join(" ")}var Pe=require("react/jsx-runtime"),q=({match:e,forceMatch:r,children:t,ref:n,...o})=>{let i=N("FormMessage"),g=k("FormMessage"),F=i.claimMessageId(L.useId()),d=g.validities[i.name],a=e?[]:g.serverErrors(i.name),c=r??a.length>0;!c&&d&&(c=e?d[e]===!0:!d.valid);let f=t;a.length>0&&(f=o.asChild&&L.isValidElement(t)?L.cloneElement(t,void 0,Y(a)):Y(a));let{setMessageVisible:u}=i;return L.useEffect(()=>(u(F,c),()=>u(F,!1)),[u,F,c]),(0,Pe.jsx)(Me.Primitive.span,{id:F,hidden:!c||void 0,[be.FORM_MESSAGE_ATTRIBUTE]:"",...o,...(0,he.skdxPart)("form","message",o.className),ref:n,children:f})};q.displayName="FormMessage";var xe=require("../utils/part.cjs"),Se=require("../utils/primitive.cjs"),Le=require("react/jsx-runtime"),z=({ref:e,...r})=>(0,Le.jsx)(Se.Primitive.button,{type:"submit",...r,...(0,xe.skdxPart)("form","submit",r.className),ref:e});z.displayName="FormSubmit";var R=require("react/jsx-runtime"),Ne=({errorSummary:e,submitLabel:r,children:t})=>(0,R.jsxs)(R.Fragment,{children:[e?(0,R.jsx)(B,{"aria-label":e,children:(0,R.jsx)("h2",{className:"skdx-form__error-summary-title",children:e})}):null,t,r?(0,R.jsx)(z,{children:r}):null]}),ce=({label:e,message:r,children:t})=>(0,R.jsxs)(R.Fragment,{children:[e?(0,R.jsx)(U,{children:e}):null,(0,R.jsx)(_,{children:t}),(0,R.jsx)(q,{children:r})]});var V=require("react/jsx-runtime");function Ve(e){return{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing,valid:e.valid}}function $e(e,r){let t=e;!t?.name||!t.validity||r({name:t.name,validity:Ve(t.validity)})}function Je(e,r){let t=e.querySelector("[data-skdx-error-summary]");t&&!t.hasAttribute("hidden")||r.focus()}var[He,k]=(0,Ce.createSafeContext)("Form"),Q=({errors:e,onSubmit:r,onReset:t,onFieldInvalid:n,validationMode:o="change",validationBehavior:i="native",ref:g,density:F,...d})=>{let a=l.useRef(null),[c,f]=l.useState({}),[u,P]=l.useState([]),[J,E]=l.useState(e);J!==e&&(E(e),u.length>0&&P([]));let b=l.useRef({validationMode:o,validationBehavior:i});l.useInsertionEffect(()=>{b.current={validationMode:o,validationBehavior:i}});let I=l.useRef(!1),S=(0,K.useCallbackRef)(n),Z=(0,K.useCallbackRef)(t),Ae=l.useCallback(s=>u.includes(s)?[]:ve(e?.[s]),[e,u]),H=l.useCallback(s=>{if(!s||!("validity"in s)||!("name"in s))return;let m=s;m.name&&f(h=>({...h,[m.name]:Ve(m.validity)}))},[]),j=l.useCallback(s=>{let m=s?.name;m&&P(h=>h.includes(m)?h:[...h,m])},[]);l.useEffect(()=>{let s=a.current;if(!s)return;let m=null,h=y=>{if(y.preventDefault(),H(y.target),$e(y.target,S),m)return;m=y.target;let De=I.current||b.current.validationBehavior==="aria";queueMicrotask(()=>{let se=m;m=null,!(!se||De)&&Je(s,se)})},re=y=>{b.current.validationMode!=="submit"&&H(y.target)},te=y=>{b.current.validationMode==="change"&&H(y.target),j(y.target)},oe=y=>{f({}),P([]),(0,$.resetFields)(s),Z(y)};return s.addEventListener("invalid",h,!0),s.addEventListener("blur",re,!0),s.addEventListener("change",te,!0),s.addEventListener("reset",oe),()=>{s.removeEventListener("invalid",h,!0),s.removeEventListener("blur",re,!0),s.removeEventListener("change",te,!0),s.removeEventListener("reset",oe)}},[H,j,S,Z]);let ee=async()=>{let s=a.current;if(!s)return!0;I.current=!0;let m=s.checkValidity();I.current=!1;let h=await(0,$.validateFields)(s);return m&&h};return l.useImperativeHandle(g,()=>a.current?Object.assign(a.current,{validate:ee}):{validate:ee}),(0,V.jsx)(He,{validities:c,serverErrors:Ae,children:(0,V.jsx)(ke.Primitive.form,{...d,...(0,Ie.appearanceAttrs)({density:F},d),...(0,Te.skdxPart)("form","root",d.className),ref:a,noValidate:i==="aria"?!0:d.noValidate,onSubmit:s=>{if(s.defaultPrevented)return;let m=a.current;if(m){if(i==="aria"){m.checkValidity(),r?.(s);return}if(!m.checkValidity()){s.preventDefault();return}r?.(s)}}})})};Q.displayName="FormRoot";var W=({errorSummary:e,submitLabel:r,children:t,ref:n,...o})=>(0,V.jsx)(Q,{...o,ref:n,children:(0,V.jsx)(Ne,{errorSummary:e,submitLabel:r,children:t})});W.displayName="Form";0&&(module.exports={Form,FormControl,FormErrorSummary,FormField,FormFieldProvider,FormFieldRoot,FormLabel,FormMessage,FormProvider,FormRoot,FormSubmit,useFormContext,useFormFieldContext});

package/dist/form/Form.d.cts

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import type { FormContextValue, FormProps, FormRootProps } from './types.cjs';
-export declare const FormProvider: {
-    (props: FormContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFormContext: (consumerName: string) => FormContextValue;
+import type { FormContextValue, FormHandle, FormProps, FormRootProps } from './types.cjs';
+export declare const FormProvider: React.FC<FormContextValue & {
+    children: React.ReactNode;
+}>, useFormContext: (consumerName: string) => FormContextValue;
 /**
- * Wires native Constraint Validation API into headless error-message system.
- * Hands per-field `ValidityState` snapshots to `FormField`/`FormControl`/`FormMessage` via context.
- * Uses native validators (`required`, `pattern`, `type="email"`, etc); no custom validators.
- * On submit, `checkValidity()` captures native `invalid` events (suppressing bubbles),
- * fires `onFieldInvalid` per failure, prevents submit if any field fails.
- *
- * Wrap with `FormAnatomy` for derived error summary/submit button.
- * Use directly via `@skdx/react/primitives/form`'s `FormRoot` for full manual composition.
+ * Wires the native Constraint Validation API into a headless error-message
+ * system, handing per-field `ValidityState` snapshots to
+ * `FormField`/`FormControl`/`FormMessage` via context.
  *
  * @example
  * ```tsx
@@ -33,21 +25,17 @@ export declare const FormProvider: {
  * </FormRoot>
  * ```
  */
-export declare const FormRoot: React.ForwardRefExoticComponent<Omit<FormRootProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare const FormRoot: {
+    ({ errors, onSubmit, onReset, onFieldInvalid, validationMode, validationBehavior, ref: forwardedRef, density, ...props }: Omit<FormRootProps, "ref"> & {
+        ref?: React.Ref<HTMLFormElement & FormHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /**
  * A form: native constraint validation wired into a headless error-message
  * system, with per-field `ValidityState` snapshots handed to every descendant
  * `FormField`.
  *
- * Draws the derived anatomy from `errorSummary`/`submitLabel`: the error
- * summary ahead of the fields, the fields (`children`), and the submit button
- * after them. Both are opt-in **by presence of their copy** — a heading and a
- * button label are the consumer's own words, so with neither prop set the
- * form derives nothing at all. `children` is the form's own content, never a
- * switch. `FormField` stays public — placing one is a real semantic decision
- * — while `FormLabel`, `FormControl`, `FormMessage`, `FormSubmit` and `FormErrorSummary` are
- * primitives.
- *
  * @example
  * ```tsx
  * <Form onSubmit={save} errorSummary="There is a problem" submitLabel="Save">
@@ -57,4 +45,9 @@ export declare const FormRoot: React.ForwardRefExoticComponent<Omit<FormRootProp
  * </Form>
  * ```
  */
-export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare const Form: {
+    ({ errorSummary, submitLabel, children, ref: forwardedRef, ...rest }: Omit<FormProps, "ref"> & {
+        ref?: React.Ref<HTMLFormElement & FormHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/form/Form.d.ts

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import type { FormContextValue, FormProps, FormRootProps } from './types.js';
-export declare const FormProvider: {
-    (props: FormContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFormContext: (consumerName: string) => FormContextValue;
+import type { FormContextValue, FormHandle, FormProps, FormRootProps } from './types.js';
+export declare const FormProvider: React.FC<FormContextValue & {
+    children: React.ReactNode;
+}>, useFormContext: (consumerName: string) => FormContextValue;
 /**
- * Wires native Constraint Validation API into headless error-message system.
- * Hands per-field `ValidityState` snapshots to `FormField`/`FormControl`/`FormMessage` via context.
- * Uses native validators (`required`, `pattern`, `type="email"`, etc); no custom validators.
- * On submit, `checkValidity()` captures native `invalid` events (suppressing bubbles),
- * fires `onFieldInvalid` per failure, prevents submit if any field fails.
- *
- * Wrap with `FormAnatomy` for derived error summary/submit button.
- * Use directly via `@skdx/react/primitives/form`'s `FormRoot` for full manual composition.
+ * Wires the native Constraint Validation API into a headless error-message
+ * system, handing per-field `ValidityState` snapshots to
+ * `FormField`/`FormControl`/`FormMessage` via context.
  *
  * @example
  * ```tsx
@@ -33,21 +25,17 @@ export declare const FormProvider: {
  * </FormRoot>
  * ```
  */
-export declare const FormRoot: React.ForwardRefExoticComponent<Omit<FormRootProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare const FormRoot: {
+    ({ errors, onSubmit, onReset, onFieldInvalid, validationMode, validationBehavior, ref: forwardedRef, density, ...props }: Omit<FormRootProps, "ref"> & {
+        ref?: React.Ref<HTMLFormElement & FormHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /**
  * A form: native constraint validation wired into a headless error-message
  * system, with per-field `ValidityState` snapshots handed to every descendant
  * `FormField`.
  *
- * Draws the derived anatomy from `errorSummary`/`submitLabel`: the error
- * summary ahead of the fields, the fields (`children`), and the submit button
- * after them. Both are opt-in **by presence of their copy** — a heading and a
- * button label are the consumer's own words, so with neither prop set the
- * form derives nothing at all. `children` is the form's own content, never a
- * switch. `FormField` stays public — placing one is a real semantic decision
- * — while `FormLabel`, `FormControl`, `FormMessage`, `FormSubmit` and `FormErrorSummary` are
- * primitives.
- *
  * @example
  * ```tsx
  * <Form onSubmit={save} errorSummary="There is a problem" submitLabel="Save">
@@ -57,4 +45,9 @@ export declare const FormRoot: React.ForwardRefExoticComponent<Omit<FormRootProp
  * </Form>
  * ```
  */
-export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare const Form: {
+    ({ errorSummary, submitLabel, children, ref: forwardedRef, ...rest }: Omit<FormProps, "ref"> & {
+        ref?: React.Ref<HTMLFormElement & FormHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/form/Form.js

@@ -1 +1,2 @@
-import*as m from"react";import{resetFields as De,validateFields as _e}from"../field/Field.js";import{createSafeContext as Be}from"../utils/createContext.js";import{skdxPart as Oe}from"../utils/part.js";import{Primitive as Ue}from"../utils/primitive.js";import{useCallbackRef as le}from"../utils/useCallbackRef.js";import*as P from"react";import{skdxPart as ge}from"../utils/part.js";import{Slot as be}from"../utils/slot.js";function W(...e){let r=[];for(let o of e)for(let s of(o??"").split(/\s+/))s&&!r.includes(s)&&r.push(s);return r.length>0?r.join(" "):void 0}import*as h from"react";import{FIELD_NAME_ATTRIBUTE as ue,FORM_FIELD_ATTRIBUTE as pe}from"../field/Field.js";import{createSafeContext as Fe}from"../utils/createContext.js";import{skdxPart as Re}from"../utils/part.js";import{Primitive as Ee}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var[ye,x]=Fe("FormField"),X=h.forwardRef(({name:e,...r},o)=>{let s=h.useId(),n=h.useId();return V(ye,{name:e,id:s,messageId:n,children:V(Ee.div,{[pe]:"",[ue]:e,...r,...Re("form","field",r.className),ref:o})})});X.displayName="FormFieldRoot";var Z=h.forwardRef(({label:e,message:r,children:o,...s},n)=>V(X,{...s,ref:n,children:V(j,{label:e,message:r,children:o})}));Z.displayName="FormField";import{jsx as ve}from"react/jsx-runtime";var A=P.forwardRef(({children:e,...r},o)=>{let s=x("FormControl"),n=H("FormControl"),d=n.validities[s.name],f=(d?!d.valid:!1)||n.serverErrors(s.name).length>0,u=P.isValidElement(e)?e:null,a=W(r["aria-describedby"],u?.props["aria-describedby"],f?s.messageId:void 0),F={id:s.id,name:s.name,"aria-invalid":f||void 0};return ve(be,{...F,...r,"aria-describedby":a,...ge("form","control",r.className),ref:o,children:u?P.cloneElement(u,{"aria-describedby":a}):e})});A.displayName="FormControl";import*as l from"react";import{collectFieldErrors as he,ERROR_SUMMARY_RESCAN_EVENTS as ee,errorSummaryScope as xe,focusFieldTarget as Pe}from"../field/Field.js";import{useComposedRefs as Me}from"../utils/composeRefs.js";import{skdxPart as D}from"../utils/part.js";import{Primitive as Se}from"../utils/primitive.js";import{Fragment as re,jsx as w,jsxs as te}from"react/jsx-runtime";var _=l.forwardRef(({autoFocus:e=!0,children:r,...o},s)=>{let[n,d]=l.useState([]),[f,u]=l.useState(0),a=l.useRef(null),F=l.useRef(null),b=Me(s,a),y=l.useRef(!1);l.useEffect(()=>{let c=a.current;if(!c)return;let E=xe(c);F.current=E;let C=()=>u(g=>g+1);for(let g of ee)E.addEventListener(g,C,!0);return()=>{for(let g of ee)E.removeEventListener(g,C,!0)}},[]),l.useEffect(()=>{let c=F.current;c&&d(he(c))},[f]),l.useEffect(()=>{if(n.length===0){y.current=!1;return}y.current||(y.current=!0,e&&a.current?.focus())},[n,e]);let L=D("form","error-summary",o.className),T=w("ul",{role:"list",...D("form","error-summary-list"),children:n.map(c=>w("li",{children:w("a",{...D("form","error-summary-link"),href:`#${c.id}`,onClick:E=>{E.preventDefault(),Pe(c.id)},children:c.message})},c.id))}),v=o.asChild&&l.isValidElement(r)?l.cloneElement(r,void 0,te(re,{children:[n.length>0?r.props.children:null,T]})):te(re,{children:[n.length>0?r:null,T]});return w(Se.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:n.length===0||void 0,...o,...L,ref:b,children:v})});_.displayName="FormErrorSummary";import*as oe from"react";import{skdxPart as Le}from"../utils/part.js";import{Primitive as Te}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var B=oe.forwardRef((e,r)=>{let o=x("FormLabel");return Ce(Te.label,{htmlFor:o.id,...e,...Le("form","label",e.className),ref:r})});B.displayName="FormLabel";import*as M from"react";import{FORM_MESSAGE_ATTRIBUTE as ke}from"../field/Field.js";import{skdxPart as Ne}from"../utils/part.js";import{Primitive as Ve}from"../utils/primitive.js";function se(e){return e===void 0?[]:(Array.isArray(e)?e:[e]).filter(o=>typeof o=="string"&&o.trim()!=="")}function O(e){return e.join(" ")}import{jsx as He}from"react/jsx-runtime";var U=M.forwardRef(({match:e,forceMatch:r,children:o,...s},n)=>{let d=x("FormMessage"),f=H("FormMessage"),u=f.validities[d.name],a=e?[]:f.serverErrors(d.name),F=r??a.length>0;!F&&u&&(F=e?u[e]===!0:!u.valid);let b=a.length===0?o:s.asChild&&M.isValidElement(o)?M.cloneElement(o,void 0,O(a)):O(a);return He(Ve.span,{id:d.messageId,hidden:!F||void 0,[ke]:"",...s,...Ne("form","message",s.className),ref:n,children:b})});U.displayName="FormMessage";import*as ne from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as Ie}from"../utils/primitive.js";import{jsx as Ae}from"react/jsx-runtime";var q=ne.forwardRef((e,r)=>Ae(Ie.button,{type:"submit",...e,...we("form","submit",e.className),ref:r}));q.displayName="FormSubmit";import{Fragment as ae,jsx as S,jsxs as ie}from"react/jsx-runtime";var me=({errorSummary:e,submitLabel:r,children:o})=>ie(ae,{children:[e?S(_,{children:S("h2",{className:"skdx-form__error-summary-title",children:e})}):null,o,r?S(q,{children:r}):null]}),j=({label:e,message:r,children:o})=>ie(ae,{children:[e?S(B,{children:e}):null,S(A,{children:o}),S(U,{children:r})]});import{jsx as I}from"react/jsx-runtime";function qe(e){return{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing,valid:e.valid}}var[ze,H]=Be("Form"),ce=m.forwardRef(({errors:e,onSubmit:r,onReset:o,onFieldInvalid:s,validationMode:n="change",validationBehavior:d="native",...f},u)=>{let a=m.useRef(null),[F,b]=m.useState({}),[y,L]=m.useState([]),T=m.useRef(e);T.current!==e&&(T.current=e,y.length>0&&L([]));let v=m.useRef({validationMode:n,validationBehavior:d});v.current={validationMode:n,validationBehavior:d};let c=m.useRef(!1),E=le(s),C=le(o),g=m.useCallback(t=>y.includes(t)?[]:se(e?.[t]),[e,y]),k=m.useCallback(t=>{if(!t||!("validity"in t)||!("name"in t))return;let i=t;i.name&&b(R=>({...R,[i.name]:qe(i.validity)}))},[]),z=m.useCallback(t=>{let i=t?.name;i&&L(R=>R.includes(i)?R:[...R,i])},[]);m.useEffect(()=>{let t=a.current;if(!t)return;let i=null,R=p=>{p.preventDefault(),k(p.target);let N=p.target;if(N?.name&&N.validity&&E({name:N.name,validity:N.validity}),i)return;i=p.target;let fe=c.current||v.current.validationBehavior==="aria";queueMicrotask(()=>{let K=i;if(i=null,!K||fe)return;let Q=t.querySelector("[data-skdx-error-summary]");Q&&!Q.hasAttribute("hidden")||K.focus()})},Y=p=>{v.current.validationMode!=="submit"&&k(p.target)},$=p=>{v.current.validationMode==="change"&&k(p.target),z(p.target)},J=p=>{b({}),L([]),De(t),C(p)};return t.addEventListener("invalid",R,!0),t.addEventListener("blur",Y,!0),t.addEventListener("change",$,!0),t.addEventListener("reset",J),()=>{t.removeEventListener("invalid",R,!0),t.removeEventListener("blur",Y,!0),t.removeEventListener("change",$,!0),t.removeEventListener("reset",J)}},[k,z,E,C]);let G=m.useCallback(async()=>{let t=a.current;if(!t)return!0;c.current=!0;let i=t.checkValidity();c.current=!1;let R=await _e(t);return i&&R},[]);return m.useImperativeHandle(u,()=>a.current?Object.assign(a.current,{validate:G}):{validate:G}),I(ze,{validities:F,serverErrors:g,children:I(Ue.form,{...f,...Oe("form","root",f.className),ref:a,noValidate:d==="aria"?!0:f.noValidate,onSubmit:t=>{if(t.defaultPrevented)return;let i=a.current;if(i){if(d==="aria"){i.checkValidity(),r?.(t);return}if(!i.checkValidity()){t.preventDefault();return}r?.(t)}}})})});ce.displayName="FormRoot";var de=m.forwardRef(({errorSummary:e,submitLabel:r,children:o,...s},n)=>I(ce,{...s,ref:n,children:I(me,{errorSummary:e,submitLabel:r,children:o})}));de.displayName="Form";export{de as Form,A as FormControl,_ as FormErrorSummary,Z as FormField,ye as FormFieldProvider,X as FormFieldRoot,B as FormLabel,U as FormMessage,ze as FormProvider,ce as FormRoot,q as FormSubmit,H as useFormContext,x as useFormFieldContext};
+'use client';
+import*as l from"react";import{appearanceAttrs as De}from"../utils/appearance.js";import{createSafeContext as we}from"../utils/createContext.js";import{resetFields as _e,validateFields as Oe}from"../utils/field-core.js";import{skdxPart as Be}from"../utils/part.js";import{Primitive as Ue}from"../utils/primitive.js";import{useCallbackRef as ie}from"../utils/useCallbackRef.js";import*as C from"react";import{skdxPart as ge}from"../utils/part.js";import{Slot as ye}from"../utils/slot.js";function K(...e){let r=[];for(let t of e)for(let s of(t??"").split(/\s+/))s&&!r.includes(s)&&r.push(s);return r.length>0?r.join(" "):void 0}import*as b from"react";import{createSafeContext as fe}from"../utils/createContext.js";import{FIELD_NAME_ATTRIBUTE as ue,FORM_FIELD_ATTRIBUTE as pe}from"../utils/field-core.js";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Re}from"../utils/primitive.js";import{jsx as I}from"react/jsx-runtime";var[Ee,S]=fe("FormField"),Q=({name:e,ref:r,...t})=>{let s=b.useId(),n=b.useId(),i=b.useRef(new Map),[E,F]=b.useState([]),d=b.useCallback(c=>{let f=i.current.get(c);if(f===void 0){let u=i.current.size;f=u===0?n:`${n}-${u}`,i.current.set(c,f)}return f},[n]),a=b.useCallback((c,f)=>{F(u=>u.includes(c)===f?u:[...i.current.values()].filter(h=>h===c?f:u.includes(h)))},[]);return I(Ee,{name:e,id:s,messageId:n,messageIds:E,claimMessageId:d,setMessageVisible:a,children:I(Re.div,{[pe]:"",[ue]:e,...t,...Fe("form","field",t.className),ref:r})})};Q.displayName="FormFieldRoot";var W=({label:e,message:r,children:t,ref:s,...n})=>I(Q,{...n,ref:s,children:I(Z,{label:e,message:r,children:t})});W.displayName="FormField";import{jsx as ve}from"react/jsx-runtime";var A=({children:e,ref:r,...t})=>{let s=S("FormControl"),n=T("FormControl"),i=n.validities[s.name],E=(i?!i.valid:!1)||n.serverErrors(s.name).length>0,F=C.isValidElement(e)?e:null,d;E&&(d=s.messageIds.length?s.messageIds.join(" "):s.messageId);let a=K(t["aria-describedby"],F?.props["aria-describedby"],d),c={id:s.id,name:s.name,"aria-invalid":E||void 0};return ve(ye,{...c,...t,"aria-describedby":a,...ge("form","control",t.className),ref:r,children:F?C.cloneElement(F,{"aria-describedby":a}):e})};A.displayName="FormControl";import*as p from"react";import{useComposedRefs as be}from"../utils/composeRefs.js";import{collectFieldErrors as he,ERROR_SUMMARY_RESCAN_EVENTS as j,errorSummaryScope as Me,focusFieldTarget as Pe}from"../utils/field-core.js";import{skdxPart as D}from"../utils/part.js";import{Primitive as xe}from"../utils/primitive.js";import{Fragment as ee,jsx as k,jsxs as re}from"react/jsx-runtime";var w=({autoFocus:e=!0,children:r,ref:t,...s})=>{let[n,i]=p.useState([]),[E,F]=p.useState(0),d=p.useRef(null),a=p.useRef(null),c=be(t,d),f=p.useRef(!1);p.useEffect(()=>{let R=d.current;if(!R)return;let y=Me(R);a.current=y;let x=()=>F(M=>M+1);for(let M of j)y.addEventListener(M,x,!0);return()=>{for(let M of j)y.removeEventListener(M,x,!0)}},[]),p.useEffect(()=>{let R=a.current;R&&i(he(R))},[E]),p.useEffect(()=>{if(n.length===0){f.current=!1;return}f.current||(f.current=!0,e&&d.current?.focus())},[n,e]);let u=D("form","error-summary",s.className),h=k("ul",{role:"list",...D("form","error-summary-list"),children:n.map(R=>k("li",{children:k("a",{...D("form","error-summary-link"),href:`#${R.id}`,onClick:y=>{y.preventDefault(),Pe(R.id)},children:R.message})},R.id))}),H=s.asChild&&p.isValidElement(r)?p.cloneElement(r,void 0,re(ee,{children:[n.length>0?r.props.children:null,h]})):re(ee,{children:[n.length>0?r:null,h]});return k(xe.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:n.length===0||void 0,...s,...u,ref:c,children:H})};w.displayName="FormErrorSummary";import{skdxPart as Se}from"../utils/part.js";import{Primitive as Le}from"../utils/primitive.js";import{jsx as Ne}from"react/jsx-runtime";var _=({ref:e,...r})=>{let t=S("FormLabel");return Ne(Le.label,{htmlFor:t.id,...r,...Se("form","label",r.className),ref:e})};_.displayName="FormLabel";import*as P from"react";import{FORM_MESSAGE_ATTRIBUTE as Ie}from"../utils/field-core.js";import{skdxPart as Ce}from"../utils/part.js";import{Primitive as Te}from"../utils/primitive.js";function te(e){return e===void 0?[]:(Array.isArray(e)?e:[e]).filter(t=>typeof t=="string"&&t.trim()!=="")}function O(e){return e.join(" ")}import{jsx as ke}from"react/jsx-runtime";var B=({match:e,forceMatch:r,children:t,ref:s,...n})=>{let i=S("FormMessage"),E=T("FormMessage"),F=i.claimMessageId(P.useId()),d=E.validities[i.name],a=e?[]:E.serverErrors(i.name),c=r??a.length>0;!c&&d&&(c=e?d[e]===!0:!d.valid);let f=t;a.length>0&&(f=n.asChild&&P.isValidElement(t)?P.cloneElement(t,void 0,O(a)):O(a));let{setMessageVisible:u}=i;return P.useEffect(()=>(u(F,c),()=>u(F,!1)),[u,F,c]),ke(Te.span,{id:F,hidden:!c||void 0,[Ie]:"",...n,...Ce("form","message",n.className),ref:s,children:f})};B.displayName="FormMessage";import{skdxPart as Ve}from"../utils/part.js";import{Primitive as He}from"../utils/primitive.js";import{jsx as Ae}from"react/jsx-runtime";var U=({ref:e,...r})=>Ae(He.button,{type:"submit",...r,...Ve("form","submit",r.className),ref:e});U.displayName="FormSubmit";import{Fragment as se,jsx as L,jsxs as ne}from"react/jsx-runtime";var oe=({errorSummary:e,submitLabel:r,children:t})=>ne(se,{children:[e?L(w,{"aria-label":e,children:L("h2",{className:"skdx-form__error-summary-title",children:e})}):null,t,r?L(U,{children:r}):null]}),Z=({label:e,message:r,children:t})=>ne(se,{children:[e?L(_,{children:e}):null,L(A,{children:t}),L(B,{children:r})]});import{jsx as V}from"react/jsx-runtime";function ae(e){return{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing,valid:e.valid}}function qe(e,r){let t=e;!t?.name||!t.validity||r({name:t.name,validity:ae(t.validity)})}function ze(e,r){let t=e.querySelector("[data-skdx-error-summary]");t&&!t.hasAttribute("hidden")||r.focus()}var[$e,T]=we("Form"),me=({errors:e,onSubmit:r,onReset:t,onFieldInvalid:s,validationMode:n="change",validationBehavior:i="native",ref:E,density:F,...d})=>{let a=l.useRef(null),[c,f]=l.useState({}),[u,h]=l.useState([]),[H,R]=l.useState(e);H!==e&&(R(e),u.length>0&&h([]));let y=l.useRef({validationMode:n,validationBehavior:i});l.useInsertionEffect(()=>{y.current={validationMode:n,validationBehavior:i}});let x=l.useRef(!1),M=ie(s),q=ie(t),de=l.useCallback(o=>u.includes(o)?[]:te(e?.[o]),[e,u]),N=l.useCallback(o=>{if(!o||!("validity"in o)||!("name"in o))return;let m=o;m.name&&f(v=>({...v,[m.name]:ae(m.validity)}))},[]),z=l.useCallback(o=>{let m=o?.name;m&&h(v=>v.includes(m)?v:[...v,m])},[]);l.useEffect(()=>{let o=a.current;if(!o)return;let m=null,v=g=>{if(g.preventDefault(),N(g.target),qe(g.target,M),m)return;m=g.target;let ce=x.current||y.current.validationBehavior==="aria";queueMicrotask(()=>{let Y=m;m=null,!(!Y||ce)&&ze(o,Y)})},J=g=>{y.current.validationMode!=="submit"&&N(g.target)},X=g=>{y.current.validationMode==="change"&&N(g.target),z(g.target)},G=g=>{f({}),h([]),_e(o),q(g)};return o.addEventListener("invalid",v,!0),o.addEventListener("blur",J,!0),o.addEventListener("change",X,!0),o.addEventListener("reset",G),()=>{o.removeEventListener("invalid",v,!0),o.removeEventListener("blur",J,!0),o.removeEventListener("change",X,!0),o.removeEventListener("reset",G)}},[N,z,M,q]);let $=async()=>{let o=a.current;if(!o)return!0;x.current=!0;let m=o.checkValidity();x.current=!1;let v=await Oe(o);return m&&v};return l.useImperativeHandle(E,()=>a.current?Object.assign(a.current,{validate:$}):{validate:$}),V($e,{validities:c,serverErrors:de,children:V(Ue.form,{...d,...De({density:F},d),...Be("form","root",d.className),ref:a,noValidate:i==="aria"?!0:d.noValidate,onSubmit:o=>{if(o.defaultPrevented)return;let m=a.current;if(m){if(i==="aria"){m.checkValidity(),r?.(o);return}if(!m.checkValidity()){o.preventDefault();return}r?.(o)}}})})};me.displayName="FormRoot";var le=({errorSummary:e,submitLabel:r,children:t,ref:s,...n})=>V(me,{...n,ref:s,children:V(oe,{errorSummary:e,submitLabel:r,children:t})});le.displayName="Form";export{le as Form,A as FormControl,w as FormErrorSummary,W as FormField,Ee as FormFieldProvider,Q as FormFieldRoot,_ as FormLabel,B as FormMessage,$e as FormProvider,me as FormRoot,U as FormSubmit,T as useFormContext,S as useFormFieldContext};

package/dist/form/FormAnatomy.d.cts

@@ -6,24 +6,13 @@ import type * as React from 'react';
  * @internal
  */
 export declare const FormAnatomy: ({ errorSummary, submitLabel, children, }: {
-    errorSummary?: string;
-    submitLabel?: string;
-    children?: React.ReactNode;
+    errorSummary?: string | undefined;
+    submitLabel?: string | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;
-/**
- * The anatomy a {@link FormField} draws from `label`/`message`: the label, the
- * control (`children`, injected with the field's id, name, `aria-invalid` and
- * `aria-describedby` through `FormControl`'s slot), and the catch-all message
- * the control's `aria-describedby` resolves to.
- *
- * `FormMessage` is rendered unconditionally and stays in the DOM `hidden`
- * while the field is valid — an `aria-describedby` naming a missing element
- * computes an *empty* description rather than falling back to none.
- *
- * @internal
- */
+/** @internal Anatomy a {@link FormField} draws from `label`/`message`: label, control, and a catch-all message kept in the DOM while valid. */
 export declare const FormFieldAnatomy: ({ label, message, children, }: {
-    label?: React.ReactNode;
-    message?: React.ReactNode;
-    children?: React.ReactNode;
+    label?: React.ReactNode | undefined;
+    message?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/form/FormAnatomy.d.ts

@@ -6,24 +6,13 @@ import type * as React from 'react';
  * @internal
  */
 export declare const FormAnatomy: ({ errorSummary, submitLabel, children, }: {
-    errorSummary?: string;
-    submitLabel?: string;
-    children?: React.ReactNode;
+    errorSummary?: string | undefined;
+    submitLabel?: string | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;
-/**
- * The anatomy a {@link FormField} draws from `label`/`message`: the label, the
- * control (`children`, injected with the field's id, name, `aria-invalid` and
- * `aria-describedby` through `FormControl`'s slot), and the catch-all message
- * the control's `aria-describedby` resolves to.
- *
- * `FormMessage` is rendered unconditionally and stays in the DOM `hidden`
- * while the field is valid — an `aria-describedby` naming a missing element
- * computes an *empty* description rather than falling back to none.
- *
- * @internal
- */
+/** @internal Anatomy a {@link FormField} draws from `label`/`message`: label, control, and a catch-all message kept in the DOM while valid. */
 export declare const FormFieldAnatomy: ({ label, message, children, }: {
-    label?: React.ReactNode;
-    message?: React.ReactNode;
-    children?: React.ReactNode;
+    label?: React.ReactNode | undefined;
+    message?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/form/FormControl.d.cts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { FormControlProps } from './types.cjs';
 /**
- * Injects `id`, `name`, `aria-invalid`, and `aria-describedby` (pointing at
- * the field's `FormMessage`) onto its single child input, using
- * {@link Slot} so no extra DOM element is added. Must be rendered inside a
- * `FormField`, and typically inside a `Form` so validity is tracked. Renders
- * `aria-invalid`/`aria-describedby` only once the field has failed native
- * constraint validation.
+ * Injects `id`, `name`, `aria-invalid`, and `aria-describedby` onto its
+ * single child input, using {@link Slot} so no extra DOM element is added.
  *
  * @example
  * ```tsx
@@ -17,4 +13,9 @@ import type { FormControlProps } from './types.cjs';
  * </FormField>
  * ```
  */
-export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
+export declare const FormControl: {
+    ({ children, ref: forwardedRef, ...props }: Omit<FormControlProps, "ref"> & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormControl.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { FormControlProps } from './types.js';
 /**
- * Injects `id`, `name`, `aria-invalid`, and `aria-describedby` (pointing at
- * the field's `FormMessage`) onto its single child input, using
- * {@link Slot} so no extra DOM element is added. Must be rendered inside a
- * `FormField`, and typically inside a `Form` so validity is tracked. Renders
- * `aria-invalid`/`aria-describedby` only once the field has failed native
- * constraint validation.
+ * Injects `id`, `name`, `aria-invalid`, and `aria-describedby` onto its
+ * single child input, using {@link Slot} so no extra DOM element is added.
  *
  * @example
  * ```tsx
@@ -17,4 +13,9 @@ import type { FormControlProps } from './types.js';
  * </FormField>
  * ```
  */
-export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
+export declare const FormControl: {
+    ({ children, ref: forwardedRef, ...props }: Omit<FormControlProps, "ref"> & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormErrorSummary.d.cts

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import type { FormErrorSummaryProps } from './types.cjs';
 /**
- * Error summary for a {@link Form}: `role="alert"` listing links to failing fields,
- * focused on first appearance so keyboard and screen-reader users land on errors.
- * Scans for `[data-skdx-field][data-invalid]` and re-scans on `validity-change` events.
- * Rendered `hidden` when empty so the alert fires when errors appear.
+ * Error summary for a {@link Form}: `role="alert"` listing links to failing
+ * fields, focused on first appearance.
  *
  * @example
  * ```tsx
@@ -17,4 +15,7 @@ import type { FormErrorSummaryProps } from './types.cjs';
  * </Form>
  * ```
  */
-export declare const FormErrorSummary: React.ForwardRefExoticComponent<Omit<FormErrorSummaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormErrorSummary: {
+    ({ autoFocus, children, ref: forwardedRef, ...props }: FormErrorSummaryProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormErrorSummary.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import type { FormErrorSummaryProps } from './types.js';
 /**
- * Error summary for a {@link Form}: `role="alert"` listing links to failing fields,
- * focused on first appearance so keyboard and screen-reader users land on errors.
- * Scans for `[data-skdx-field][data-invalid]` and re-scans on `validity-change` events.
- * Rendered `hidden` when empty so the alert fires when errors appear.
+ * Error summary for a {@link Form}: `role="alert"` listing links to failing
+ * fields, focused on first appearance.
  *
  * @example
  * ```tsx
@@ -17,4 +15,7 @@ import type { FormErrorSummaryProps } from './types.js';
  * </Form>
  * ```
  */
-export declare const FormErrorSummary: React.ForwardRefExoticComponent<Omit<FormErrorSummaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormErrorSummary: {
+    ({ autoFocus, children, ref: forwardedRef, ...props }: FormErrorSummaryProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormField.d.cts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { FormFieldContextValue, FormFieldProps, FormFieldRootProps } from './types.cjs';
-export declare const FormFieldProvider: {
-    (props: FormFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFormFieldContext: (consumerName: string) => FormFieldContextValue;
+export declare const FormFieldProvider: React.FC<FormFieldContextValue & {
+    children: React.ReactNode;
+}>, useFormFieldContext: (consumerName: string) => FormFieldContextValue;
 /**
- * FormField's root: generates `id`/`messageId`, distributes them with `name` via context,
- * renders a plain `<div>`. Use for manual composition to target specific `ValidityState` reasons.
+ * FormField's root: generates `id`/`messageId`, distributes them with `name` via context, and renders a plain `<div>`.
  *
  * @example
  * ```tsx
@@ -23,10 +19,12 @@ export declare const FormFieldProvider: {
  * </FormFieldRoot>
  * ```
  */
-export declare const FormFieldRoot: React.ForwardRefExoticComponent<Omit<FormFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormFieldRoot: {
+    ({ name, ref: forwardedRef, ...props }: FormFieldRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
  * One field of a {@link Form}: its label, control, and validation message.
- * `FormControl` injects `id`, `name`, `aria-invalid`, and `aria-describedby` into the control.
  *
  * @example
  * ```tsx
@@ -35,4 +33,7 @@ export declare const FormFieldRoot: React.ForwardRefExoticComponent<Omit<FormFie
  * </FormField>
  * ```
  */
-export declare const FormField: React.ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormField: {
+    ({ label, message, children, ref: forwardedRef, ...rest }: FormFieldProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormField.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { FormFieldContextValue, FormFieldProps, FormFieldRootProps } from './types.js';
-export declare const FormFieldProvider: {
-    (props: FormFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFormFieldContext: (consumerName: string) => FormFieldContextValue;
+export declare const FormFieldProvider: React.FC<FormFieldContextValue & {
+    children: React.ReactNode;
+}>, useFormFieldContext: (consumerName: string) => FormFieldContextValue;
 /**
- * FormField's root: generates `id`/`messageId`, distributes them with `name` via context,
- * renders a plain `<div>`. Use for manual composition to target specific `ValidityState` reasons.
+ * FormField's root: generates `id`/`messageId`, distributes them with `name` via context, and renders a plain `<div>`.
  *
  * @example
  * ```tsx
@@ -23,10 +19,12 @@ export declare const FormFieldProvider: {
  * </FormFieldRoot>
  * ```
  */
-export declare const FormFieldRoot: React.ForwardRefExoticComponent<Omit<FormFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormFieldRoot: {
+    ({ name, ref: forwardedRef, ...props }: FormFieldRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
  * One field of a {@link Form}: its label, control, and validation message.
- * `FormControl` injects `id`, `name`, `aria-invalid`, and `aria-describedby` into the control.
  *
  * @example
  * ```tsx
@@ -35,4 +33,7 @@ export declare const FormFieldRoot: React.ForwardRefExoticComponent<Omit<FormFie
  * </FormField>
  * ```
  */
-export declare const FormField: React.ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormField: {
+    ({ label, message, children, ref: forwardedRef, ...rest }: FormFieldProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FormLabelProps } from './types.cjs';
 /**
  * `<label>` for a {@link FormField}'s control. Reads the field's `id` and sets `htmlFor`. Must be used inside a `FormField`.
@@ -13,4 +13,7 @@ import type { FormLabelProps } from './types.cjs';
  * </FormField>
  * ```
  */
-export declare const FormLabel: React.ForwardRefExoticComponent<Omit<FormLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const FormLabel: {
+    ({ ref: forwardedRef, ...props }: FormLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FormLabelProps } from './types.js';
 /**
  * `<label>` for a {@link FormField}'s control. Reads the field's `id` and sets `htmlFor`. Must be used inside a `FormField`.
@@ -13,4 +13,7 @@ import type { FormLabelProps } from './types.js';
  * </FormField>
  * ```
  */
-export declare const FormLabel: React.ForwardRefExoticComponent<Omit<FormLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const FormLabel: {
+    ({ ref: forwardedRef, ...props }: FormLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormMessage.d.cts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { FormMessageProps } from './types.cjs';
 /**
- * Validation message for {@link FormField}: `<span>` with `id` matching
- * the field's `aria-describedby`. `hidden` until `forceMatch` is set or
- * field validity matches (specific `ValidityState` flag or any invalid).
- *
- * Kept `hidden`, not unmounted, so the IDREF resolves and skin can transition the message in.
+ * Validation message for {@link FormField}: `<span>` with `id` matching the field's `aria-describedby`, hidden until it matches.
  *
  * @example
  * ```tsx
@@ -18,4 +14,7 @@ import type { FormMessageProps } from './types.cjs';
  * </FormField>
  * ```
  */
-export declare const FormMessage: React.ForwardRefExoticComponent<Omit<FormMessageProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FormMessage: {
+    ({ match, forceMatch, children, ref: forwardedRef, ...props }: FormMessageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormMessage.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { FormMessageProps } from './types.js';
 /**
- * Validation message for {@link FormField}: `<span>` with `id` matching
- * the field's `aria-describedby`. `hidden` until `forceMatch` is set or
- * field validity matches (specific `ValidityState` flag or any invalid).
- *
- * Kept `hidden`, not unmounted, so the IDREF resolves and skin can transition the message in.
+ * Validation message for {@link FormField}: `<span>` with `id` matching the field's `aria-describedby`, hidden until it matches.
  *
  * @example
  * ```tsx
@@ -18,4 +14,7 @@ import type { FormMessageProps } from './types.js';
  * </FormField>
  * ```
  */
-export declare const FormMessage: React.ForwardRefExoticComponent<Omit<FormMessageProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FormMessage: {
+    ({ match, forceMatch, children, ref: forwardedRef, ...props }: FormMessageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormSubmit.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FormSubmitProps } from './types.cjs';
 /**
  * A `type="submit"` button for a {@link Form}. No context reads — submitting
@@ -11,4 +11,7 @@ import type { FormSubmitProps } from './types.cjs';
  * </Form>
  * ```
  */
-export declare const FormSubmit: React.ForwardRefExoticComponent<Omit<FormSubmitProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FormSubmit: {
+    ({ ref: forwardedRef, ...props }: FormSubmitProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/FormSubmit.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FormSubmitProps } from './types.js';
 /**
  * A `type="submit"` button for a {@link Form}. No context reads — submitting
@@ -11,4 +11,7 @@ import type { FormSubmitProps } from './types.js';
  * </Form>
  * ```
  */
-export declare const FormSubmit: React.ForwardRefExoticComponent<Omit<FormSubmitProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FormSubmit: {
+    ({ ref: forwardedRef, ...props }: FormSubmitProps): React.ReactNode;
+    displayName: string;
+};

package/dist/form/serverErrors.d.cts

@@ -4,5 +4,5 @@
 export type FormErrors = Record<string, string | string[]>;
 /** Coerce field's entry into message list, drop blanks. */
 export declare function normalizeFormErrors(entry: string | string[] | undefined): string[];
-/** Join field's server errors into single message (one messageId per field). */
+/** Join field's server errors into the text of one catch-all message. */
 export declare function formErrorText(messages: readonly string[]): string;

package/dist/form/serverErrors.d.ts

@@ -4,5 +4,5 @@
 export type FormErrors = Record<string, string | string[]>;
 /** Coerce field's entry into message list, drop blanks. */
 export declare function normalizeFormErrors(entry: string | string[] | undefined): string[];
-/** Join field's server errors into single message (one messageId per field). */
+/** Join field's server errors into the text of one catch-all message. */
 export declare function formErrorText(messages: readonly string[]): string;