@skdx/react 0.27.0 → 0.29.0

package/dist/floating-panel/types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
 import type { PortalProps } from '../utils/portal.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
@@ -12,44 +13,29 @@ export interface FloatingPanelSize {
     width: number;
     height: number;
 }
-/**
- * The panel's window state. `default` uses the stored `position`/`size`;
- * `maximized` fills the boundary; `minimized` collapses to whatever height its
- * header needs. Only `default` is directly draggable/resizable in a way the
- * user will see, since the other two override the published geometry.
- */
+/** Panel window state: `default` uses position/size, `maximized` fills the boundary, `minimized` collapses to header height; only `default` is draggable/resizable. */
 export type FloatingPanelStage = 'default' | 'minimized' | 'maximized';
 /** Which edge or corner a {@link FloatingPanelResizeTrigger} pulls. */
 export type FloatingPanelResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
-/**
- * Which of a floating panel's two gestures a release announcement is
- * describing — a header drag (`'move'`) or an edge/corner pull (`'resize'`).
- * Both gestures hand {@link FloatingPanelProps.getGestureAnnouncement} the same
- * {@link FloatingPanelGeometry}, so this is the only thing telling the wording
- * which half of it matters: a move reads out the position, a resize the size.
- * It reaches the live region once, when the gesture settles — a drag publishes
- * a new position on every pointer frame and every arrow-key nudge, and voicing
- * each one would flood the region.
- *
- * @internal
- */
+/** @internal Gesture type for release announcements: `'move'` (header drag) or `'resize'` (edge/corner pull). */
 export type FloatingPanelGesture = 'move' | 'resize';
-/**
- * Shared state distributed from {@link FloatingPanel} to its parts via context. Not part of the public API.
- *
- * @internal
- */
+/** Shared state distributed from {@link FloatingPanel} to its parts via context. @internal */
 export interface FloatingPanelContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
     titleId: string;
+    /** Whether title is mounted; Content uses this to withhold `aria-labelledby`. */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     position: FloatingPanelPosition;
     size: FloatingPanelSize;
     minSize: FloatingPanelSize;
     maxSize: FloatingPanelSize;
+    /** Measured boundary box (null before first measurement). ResizeTrigger uses it for `aria-valuemax`. */
+    bounds: FloatingPanelSize | null;
     stage: FloatingPanelStage;
     onStageChange: (stage: FloatingPanelStage) => void;
     moveBy: (dx: number, dy: number) => void;
@@ -66,130 +52,152 @@ export interface FloatingPanelContextValue {
     contentPresent: boolean;
     setContentPresent: (present: boolean) => void;
 }
-/** Props for the {@link FloatingPanel} root. */
-export interface FloatingPanelProps {
+/**
+ * Props for the {@link FloatingPanel} recipe. Pass-through attributes (`id`,
+ * `className`, `style`, `data-*`, `aria-*` — see {@link PassThroughProps}) land
+ * on the derived `FloatingPanelContent` surface.
+ */
+export interface FloatingPanelProps extends PassThroughProps {
+    /**
+     * The panel's body, rendered inside the derived `FloatingPanelContent` below the derived header.
+     * @default undefined — an empty panel body.
+     */
+    children?: React.ReactNode | undefined;
     /**
-     * The trigger and portal, typically — the panel's own DOM (content, header,
-     * title, resize and stage triggers) is rendered by {@link FloatingPanelPortal}
-     * elsewhere.
-     * @default undefined — renders nothing if omitted.
+     * The panel's heading, rendered as the derived title inside the derived header.
+     * @default undefined — no title renders.
      */
-    children?: React.ReactNode;
+    title?: string | undefined;
+    /**
+     * Window controls (stage triggers); each supplies its own visible `label`.
+     * @default []
+     */
+    stages?: ReadonlyArray<{
+        /** The window state this control switches the panel to. */
+        stage: FloatingPanelStage;
+        /** The control's visible text, and its accessible name. */
+        label: string;
+    }> | undefined;
+    /**
+     * Whether the derived header renders a close button.
+     * @default true
+     */
+    dismissible?: boolean | undefined;
     /**
      * Whether the panel is open, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the panel is initially open, for uncontrolled usage.
      * @default false — the panel is closed until the trigger is pressed.
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever the panel opens or closes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires once the open/close animation settles, the settled counterpart to `onOpenChange`.
+     * @default undefined
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * The panel's top-left corner, for controlled usage. Pair with `onPositionChange`
-     * or the panel will refuse to move.
+     * The panel's top-left corner, for controlled usage; pair with `onPositionChange` or it refuses to move.
      * @default undefined — uncontrolled, tracks its own position internally.
      */
-    position?: FloatingPanelPosition;
+    position?: FloatingPanelPosition | undefined;
     /**
      * Where the panel starts, for uncontrolled usage.
      * @default { x: 0, y: 0 } — the top-left corner of the boundary.
      */
-    defaultPosition?: FloatingPanelPosition;
+    defaultPosition?: FloatingPanelPosition | undefined;
     /**
-     * Fires with the clamped position on every drag frame and every arrow-key
-     * nudge — not once per gesture. Throttle it yourself if the work is expensive.
+     * Fires with the clamped position on every drag frame and arrow-key nudge, not once per gesture.
      * @default undefined — no-op if omitted.
      */
-    onPositionChange?: (position: FloatingPanelPosition) => void;
+    onPositionChange?: ((position: FloatingPanelPosition) => void) | undefined;
     /**
-     * The panel's box, for controlled usage. Pair with `onSizeChange` or the
-     * panel will refuse to resize.
+     * Fires once when a drag/arrow-key gesture settles, and after resize too since west/north grips relocate the origin.
+     * @default undefined
+     */
+    onPositionCommit?: ((position: FloatingPanelPosition) => void) | undefined;
+    /**
+     * The panel's box, for controlled usage; pair with `onSizeChange` or it refuses to resize.
      * @default undefined — uncontrolled, tracks its own size internally.
      */
-    size?: FloatingPanelSize;
+    size?: FloatingPanelSize | undefined;
     /**
      * The panel's starting box, for uncontrolled usage.
      * @default { width: 320, height: 240 }
      */
-    defaultSize?: FloatingPanelSize;
+    defaultSize?: FloatingPanelSize | undefined;
     /**
-     * Fires with the clamped size on every resize frame and every arrow-key
-     * nudge — not once per gesture.
+     * Fires with the clamped size on every resize frame and arrow-key nudge, not once per gesture.
      * @default undefined — no-op if omitted.
      */
-    onSizeChange?: (size: FloatingPanelSize) => void;
+    onSizeChange?: ((size: FloatingPanelSize) => void) | undefined;
+    /**
+     * Fires once when a resize gesture settles; a move alone never fires it.
+     * @default undefined
+     */
+    onSizeCommit?: ((size: FloatingPanelSize) => void) | undefined;
     /**
-     * Smallest box the panel can be resized to. Every resize is clamped to it,
-     * so a consumer never has to defend against a zero-height panel.
+     * Smallest box the panel can be resized to; every resize is clamped to it.
      * @default { width: 160, height: 120 }
      */
-    minSize?: FloatingPanelSize;
+    minSize?: FloatingPanelSize | undefined;
     /**
      * Largest box the panel can be resized to.
      * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
      */
-    maxSize?: FloatingPanelSize;
+    maxSize?: FloatingPanelSize | undefined;
     /**
-     * Element the panel may not be dragged or resized out of. Position is
-     * measured from this element's top-left corner, so it must be the panel's
-     * containing block for the published geometry to line up.
+     * Element the panel may not be dragged or resized out of; position is measured from its top-left corner.
      * @default undefined — the viewport constrains the panel instead.
      */
-    boundary?: React.RefObject<HTMLElement | null>;
+    boundary?: React.RefObject<HTMLElement | null> | undefined;
     /**
      * The panel's window state, for controlled usage. Pair with `onStageChange`.
      * @default undefined — uncontrolled, tracks its own stage internally.
      */
-    stage?: FloatingPanelStage;
+    stage?: FloatingPanelStage | undefined;
     /**
      * The panel's starting window state, for uncontrolled usage.
      * @default 'default' — the panel uses its own position and size.
      */
-    defaultStage?: FloatingPanelStage;
+    defaultStage?: FloatingPanelStage | undefined;
     /**
      * Fires with the new stage whenever a {@link FloatingPanelStageTrigger} is pressed.
      * @default undefined — no-op if omitted.
      */
-    onStageChange?: (stage: FloatingPanelStage) => void;
+    onStageChange?: ((stage: FloatingPanelStage) => void) | undefined;
     /**
-     * Whether the header can move the panel. `false` leaves the header focusable
-     * only if you make it so, and drops its `move` cursor.
+     * Whether the header can move the panel; `false` drops its `move` cursor.
      * @default true
      */
-    draggable?: boolean;
+    draggable?: boolean | undefined;
     /**
-     * Whether resize triggers do anything. `false` makes every
-     * {@link FloatingPanelResizeTrigger} inert and non-focusable, so a fixed-size
-     * panel can still render its grips for visual symmetry.
+     * Whether resize triggers do anything; `false` makes every {@link FloatingPanelResizeTrigger} inert and non-focusable.
      * @default true
      */
-    resizable?: boolean;
+    resizable?: boolean | undefined;
     /**
-     * How far one arrow key moves or resizes the panel, in pixels. Shift+arrow
-     * uses ten times this.
+     * How far one arrow key moves or resizes the panel, in pixels; Shift+arrow uses ten times this.
      * @default 10
      */
-    step?: number;
+    step?: number | undefined;
     /**
-     * Freezes the panel's geometry: drag, resize, and stage changes are all
-     * refused and their triggers leave the tab order. Opening and closing still
-     * work — a disabled panel is inert, not unreachable.
+     * Freezes the panel's geometry: drag, resize and stage changes are refused and their triggers leave the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Words the polite live-region message announced once per drag or resize, on
-     * release. The numbers are already rounded to whole CSS pixels. Return `''`
-     * to announce nothing.
+     * Words the polite live-region message announced once per drag or resize, on release; return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Panel moved to 40, 25").
      */
-    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+    getGestureAnnouncement?: ((gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string) | undefined;
 }
 /** The panel's geometry at the moment a gesture ended, handed to {@link FloatingPanelProps.getGestureAnnouncement}. */
 export interface FloatingPanelGeometry {
@@ -204,41 +212,38 @@ export interface FloatingPanelTriggerProps extends PrimitivePropsWithRef<'button
 /** Props for {@link FloatingPanelPortal}, which teleports the panel to `document.body`. */
 export interface FloatingPanelPortalProps extends PortalProps {
     /**
-     * Render the portal even while the panel is closed, instead of unmounting
-     * it. Not needed for CSS exit animations — the portal already outlives the
-     * close until `FloatingPanelContent`'s animation ends.
+     * Render the portal even while the panel is closed, instead of unmounting it.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link FloatingPanelContent}, the movable surface itself. */
 export interface FloatingPanelContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted even while closed. Useful for animation libraries
-     * that drive the exit themselves instead of via CSS.
+     * Keep this panel mounted even while closed, for animation libraries that drive the exit themselves.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Fires when Escape is pressed while the panel is open. Call `event.preventDefault()` to stop it from closing.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
      * Fires on pointer-down outside the panel and its trigger. Call `event.preventDefault()` to stop it from closing.
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
-     * Fires when focus moves to an element outside the panel and its trigger. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled. A non-modal panel does **not** close on this — it is reported so you can, if you want to.
-     * @default undefined — no-op if omitted.
+     * Fires when focus moves outside the panel and trigger; non-modal panels don't auto-close on it.
+     * @default undefined
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
-     * @default undefined — no-op if omitted.
+     * Fires for pointer-down or focus outside, before specific handlers. One `preventDefault()` vetoes either.
+     * @default undefined
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
 }
 /** Props for {@link FloatingPanelHeader}, the drag handle. */
 export interface FloatingPanelHeaderProps extends PrimitivePropsWithRef<'div'> {
@@ -251,18 +256,11 @@ export interface FloatingPanelCloseTriggerProps extends PrimitivePropsWithRef<'b
 }
 /** Props for {@link FloatingPanelResizeTrigger}, one edge or corner grip. */
 export interface FloatingPanelResizeTriggerProps extends PrimitivePropsWithRef<'div'> {
-    /**
-     * Which edge or corner this grip pulls. Corners move two edges at once.
-     * There is no default — a grip that does not say what it resizes cannot resize anything.
-     */
+    /** Which edge or corner this grip pulls; corners move two edges at once. */
     direction: FloatingPanelResizeDirection;
 }
 /** Props for {@link FloatingPanelStageTrigger}, a minimize/maximize/restore button. */
 export interface FloatingPanelStageTriggerProps extends PrimitivePropsWithRef<'button'> {
-    /**
-     * The stage this button switches to. Pressing it while the panel is already
-     * in that stage restores `'default'`, which is what makes one button a
-     * minimize *and* a restore.
-     */
+    /** The stage this button switches to; pressing it while already in that stage restores `'default'`. */
     stage: FloatingPanelStage;
 }

package/dist/form/Form.cjs

@@ -1 +1,2 @@
-"use strict";var ne=Object.create;var h=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(e,r)=>{for(var o in r)h(e,o,{get:r[o],enumerable:!0})},I=(e,r,o,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of fe(r))!pe.call(e,t)&&t!==o&&h(e,t,{get:()=>r[t],enumerable:!(s=le(r,t))||s.enumerable});return e};var R=(e,r,o)=>(o=e!=null?ne(de(e)):{},I(r||!e||!e.__esModule?h(o,"default",{value:e,enumerable:!0}):o,e)),ce=e=>I(h({},"__esModule",{value:!0}),e);var ve={};ue(ve,{Form:()=>O,FormControl:()=>C,FormErrorSummary:()=>T,FormField:()=>L,FormLabel:()=>M,FormMessage:()=>N,FormProvider:()=>A,FormSubmit:()=>V,useFormContext:()=>P});module.exports=ce(ve);var l=R(require("react"),1),w=require("../utils/composeRefs.cjs"),H=require("../utils/createContext.cjs"),D=require("../utils/part.cjs"),_=require("../utils/primitive.cjs"),g=require("react/jsx-runtime");function Fe(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[A,P]=(0,H.createSafeContext)("Form"),O=l.forwardRef(({onSubmit:e,...r},o)=>{let s=l.useRef(null),t=(0,w.useComposedRefs)(o,s),[F,f]=l.useState({}),d=l.useCallback(m=>{if(!m||!("validity"in m)||!("name"in m))return;let i=m;i.name&&f(u=>({...u,[i.name]:Fe(i.validity)}))},[]);return l.useEffect(()=>{let m=s.current;if(!m)return;let i=c=>{c.preventDefault(),d(c.target)},u=c=>d(c.target);return m.addEventListener("invalid",i,!0),m.addEventListener("blur",u,!0),m.addEventListener("change",u,!0),()=>{m.removeEventListener("invalid",i,!0),m.removeEventListener("blur",u,!0),m.removeEventListener("change",u,!0)}},[d]),(0,g.jsx)(A,{validities:F,children:(0,g.jsx)(_.Primitive.form,{...r,...(0,D.skdxPart)("form","root",r.className),ref:t,onSubmit:m=>{if(m.defaultPrevented)return;let i=s.current;if(i){if(!i.checkValidity()){m.preventDefault();return}e?.(m)}}})})});O.displayName="Form";var b=R(require("react"),1),U=require("../utils/createContext.cjs"),B=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),x=require("react/jsx-runtime"),[Re,v]=(0,U.createSafeContext)("FormField"),L=b.forwardRef(({name:e,...r},o)=>{let s=b.useId(),t=b.useId();return(0,x.jsx)(Re,{name:e,id:s,messageId:t,children:(0,x.jsx)(G.Primitive.div,{...r,...(0,B.skdxPart)("form","field",r.className),ref:o})})});L.displayName="FormField";var Y=R(require("react"),1),$=require("../utils/part.cjs"),q=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),M=Y.forwardRef((e,r)=>{let o=v("FormLabel");return(0,z.jsx)(q.Primitive.label,{htmlFor:o.id,...e,...(0,$.skdxPart)("form","label",e.className),ref:r})});M.displayName="FormLabel";var J=R(require("react"),1),K=require("../utils/part.cjs"),Q=require("../utils/slot.cjs");var W=require("react/jsx-runtime"),C=J.forwardRef((e,r)=>{let o=v("FormControl"),t=P("FormControl").validities[o.name],F=t?!t.valid:!1,f={id:o.id,name:o.name,"aria-invalid":F||void 0,"aria-describedby":F?o.messageId:void 0};return(0,W.jsx)(Q.Slot,{...f,...e,...(0,K.skdxPart)("form","control",e.className),ref:r})});C.displayName="FormControl";var X=R(require("react"),1),Z=require("../utils/part.cjs"),j=require("../utils/primitive.cjs");var ee=require("react/jsx-runtime"),N=X.forwardRef(({match:e,forceMatch:r,...o},s)=>{let t=v("FormMessage"),f=P("FormMessage").validities[t.name],d=r??!1;return!d&&f&&(d=e?f[e]===!0:!f.valid),d?(0,ee.jsx)(j.Primitive.span,{id:t.messageId,...o,...(0,Z.skdxPart)("form","message",o.className),ref:s}):null});N.displayName="FormMessage";var re=R(require("react"),1),oe=require("../utils/part.cjs"),te=require("../utils/primitive.cjs"),me=require("react/jsx-runtime"),V=re.forwardRef((e,r)=>(0,me.jsx)(te.Primitive.button,{type:"submit",...e,...(0,oe.skdxPart)("form","submit",e.className),ref:r}));V.displayName="FormSubmit";var a=R(require("react"),1),p=require("../field/Field.cjs"),se=require("../utils/composeRefs.cjs"),S=require("../utils/part.cjs"),ae=require("../utils/primitive.cjs"),E=require("react/jsx-runtime"),T=a.forwardRef(({autoFocus:e=!0,children:r,...o},s)=>{let[t,F]=a.useState([]),[f,d]=a.useState(0),m=a.useRef(null),i=a.useRef(null),u=(0,se.useComposedRefs)(s,m),c=a.useRef(!1);return a.useEffect(()=>{let n=m.current;if(!n)return;let y=(0,p.errorSummaryScope)(n);i.current=y;let k=()=>d(ie=>ie+1);return y.addEventListener(p.FIELD_VALIDITY_CHANGE_EVENT,k),()=>y.removeEventListener(p.FIELD_VALIDITY_CHANGE_EVENT,k)},[]),a.useEffect(()=>{let n=i.current;n&&F((0,p.collectFieldErrors)(n))},[f]),a.useEffect(()=>{if(t.length===0){c.current=!1;return}c.current||(c.current=!0,e&&m.current?.focus())},[t,e]),(0,E.jsxs)(ae.Primitive.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:t.length===0||void 0,...o,...(0,S.skdxPart)("form","error-summary",o.className),ref:u,children:[t.length>0?r:null,(0,E.jsx)("ul",{...(0,S.skdxPart)("form","error-summary-list"),children:t.map(n=>(0,E.jsx)("li",{children:(0,E.jsx)("a",{...(0,S.skdxPart)("form","error-summary-link"),href:`#${n.id}`,onClick:y=>{y.preventDefault(),(0,p.focusFieldTarget)(n.id)},children:n.message})},n.id))})]})});T.displayName="FormErrorSummary";0&&(module.exports={Form,FormControl,FormErrorSummary,FormField,FormLabel,FormMessage,FormProvider,FormSubmit,useFormContext});
+'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,38 +1,53 @@
 import * as React from 'react';
-import type { FormContextValue, FormProps } 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;
 /**
- * Root of a form: wires the browser's native Constraint Validation API into
- * a headless error-message system and hands per-field `ValidityState`
- * snapshots down to `FormField`/`FormControl`/`FormMessage` via context.
- * Renders a plain `<form>`.
- *
- * No custom validators — `required`/`pattern`/`min`/`type="email"` etc. on
- * the consumer's own input (rendered through `FormControl`) do the
- * validating. On submit, `checkValidity()` runs across every field; if any
- * fail, the native `invalid` event is captured (suppressing the browser's
- * validation-bubble UI) to snapshot that field's validity, the submit is
- * prevented, and `onSubmit` is not called. Fields are also re-validated on
- * `blur` and `change`.
+ * 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
- * <Form onSubmit={(e) => console.log('submitted')}>
- *   <FormField name="email">
+ * import { FormControl, FormFieldRoot, FormLabel, FormMessage, FormRoot, FormSubmit } from '@skdx/react/primitives/form';
+ *
+ * <FormRoot onSubmit={(e) => console.log('submitted')}>
+ *   <FormFieldRoot name="email">
  *     <FormLabel>Email</FormLabel>
  *     <FormControl>
  *       <input type="email" required />
  *     </FormControl>
  *     <FormMessage match="valueMissing">Email is required.</FormMessage>
  *     <FormMessage match="typeMismatch">Enter a valid email.</FormMessage>
- *   </FormField>
+ *   </FormFieldRoot>
  *   <FormSubmit>Submit</FormSubmit>
+ * </FormRoot>
+ * ```
+ */
+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`.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={save} errorSummary="There is a problem" submitLabel="Save">
+ *   <FormField name="email" label="Email" message="Enter a valid email.">
+ *     <input type="email" required />
+ *   </FormField>
  * </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,38 +1,53 @@
 import * as React from 'react';
-import type { FormContextValue, FormProps } 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;
 /**
- * Root of a form: wires the browser's native Constraint Validation API into
- * a headless error-message system and hands per-field `ValidityState`
- * snapshots down to `FormField`/`FormControl`/`FormMessage` via context.
- * Renders a plain `<form>`.
- *
- * No custom validators — `required`/`pattern`/`min`/`type="email"` etc. on
- * the consumer's own input (rendered through `FormControl`) do the
- * validating. On submit, `checkValidity()` runs across every field; if any
- * fail, the native `invalid` event is captured (suppressing the browser's
- * validation-bubble UI) to snapshot that field's validity, the submit is
- * prevented, and `onSubmit` is not called. Fields are also re-validated on
- * `blur` and `change`.
+ * 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
- * <Form onSubmit={(e) => console.log('submitted')}>
- *   <FormField name="email">
+ * import { FormControl, FormFieldRoot, FormLabel, FormMessage, FormRoot, FormSubmit } from '@skdx/react/primitives/form';
+ *
+ * <FormRoot onSubmit={(e) => console.log('submitted')}>
+ *   <FormFieldRoot name="email">
  *     <FormLabel>Email</FormLabel>
  *     <FormControl>
  *       <input type="email" required />
  *     </FormControl>
  *     <FormMessage match="valueMissing">Email is required.</FormMessage>
  *     <FormMessage match="typeMismatch">Enter a valid email.</FormMessage>
- *   </FormField>
+ *   </FormFieldRoot>
  *   <FormSubmit>Submit</FormSubmit>
+ * </FormRoot>
+ * ```
+ */
+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`.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={save} errorSummary="There is a problem" submitLabel="Save">
+ *   <FormField name="email" label="Email" message="Enter a valid email.">
+ *     <input type="email" required />
+ *   </FormField>
  * </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 l from"react";import{useComposedRefs as D}from"../utils/composeRefs.js";import{createSafeContext as _}from"../utils/createContext.js";import{skdxPart as A}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as h}from"react/jsx-runtime";function U(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[B,E]=_("Form"),G=l.forwardRef(({onSubmit:e,...t},o)=>{let i=l.useRef(null),m=D(o,i),[c,f]=l.useState({}),d=l.useCallback(r=>{if(!r||!("validity"in r)||!("name"in r))return;let a=r;a.name&&f(p=>({...p,[a.name]:U(a.validity)}))},[]);return l.useEffect(()=>{let r=i.current;if(!r)return;let a=u=>{u.preventDefault(),d(u.target)},p=u=>d(u.target);return r.addEventListener("invalid",a,!0),r.addEventListener("blur",p,!0),r.addEventListener("change",p,!0),()=>{r.removeEventListener("invalid",a,!0),r.removeEventListener("blur",p,!0),r.removeEventListener("change",p,!0)}},[d]),h(B,{validities:c,children:h(O.form,{...t,...A("form","root",t.className),ref:m,onSubmit:r=>{if(r.defaultPrevented)return;let a=i.current;if(a){if(!a.checkValidity()){r.preventDefault();return}e?.(r)}}})})});G.displayName="Form";import*as v from"react";import{createSafeContext as Y}from"../utils/createContext.js";import{skdxPart as $}from"../utils/part.js";import{Primitive as q}from"../utils/primitive.js";import{jsx as S}from"react/jsx-runtime";var[z,F]=Y("FormField"),g=v.forwardRef(({name:e,...t},o)=>{let i=v.useId(),m=v.useId();return S(z,{name:e,id:i,messageId:m,children:S(q.div,{...t,...$("form","field",t.className),ref:o})})});g.displayName="FormField";import*as x from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var L=x.forwardRef((e,t)=>{let o=F("FormLabel");return Q(K.label,{htmlFor:o.id,...e,...J("form","label",e.className),ref:t})});L.displayName="FormLabel";import*as M from"react";import{skdxPart as W}from"../utils/part.js";import{Slot as X}from"../utils/slot.js";import{jsx as Z}from"react/jsx-runtime";var C=M.forwardRef((e,t)=>{let o=F("FormControl"),m=E("FormControl").validities[o.name],c=m?!m.valid:!1,f={id:o.id,name:o.name,"aria-invalid":c||void 0,"aria-describedby":c?o.messageId:void 0};return Z(X,{...f,...e,...W("form","control",e.className),ref:t})});C.displayName="FormControl";import*as N from"react";import{skdxPart as j}from"../utils/part.js";import{Primitive as ee}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";var V=N.forwardRef(({match:e,forceMatch:t,...o},i)=>{let m=F("FormMessage"),f=E("FormMessage").validities[m.name],d=t??!1;return!d&&f&&(d=e?f[e]===!0:!f.valid),d?re(ee.span,{id:m.messageId,...o,...j("form","message",o.className),ref:i}):null});V.displayName="FormMessage";import*as T from"react";import{skdxPart as oe}from"../utils/part.js";import{Primitive as te}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var k=T.forwardRef((e,t)=>me(te.button,{type:"submit",...e,...oe("form","submit",e.className),ref:t}));k.displayName="FormSubmit";import*as s from"react";import{collectFieldErrors as se,errorSummaryScope as ae,FIELD_VALIDITY_CHANGE_EVENT as I,focusFieldTarget as ie}from"../field/Field.js";import{useComposedRefs as ne}from"../utils/composeRefs.js";import{skdxPart as y}from"../utils/part.js";import{Primitive as le}from"../utils/primitive.js";import{jsx as P,jsxs as fe}from"react/jsx-runtime";var w=s.forwardRef(({autoFocus:e=!0,children:t,...o},i)=>{let[m,c]=s.useState([]),[f,d]=s.useState(0),r=s.useRef(null),a=s.useRef(null),p=ne(i,r),u=s.useRef(!1);return s.useEffect(()=>{let n=r.current;if(!n)return;let R=ae(n);a.current=R;let b=()=>d(H=>H+1);return R.addEventListener(I,b),()=>R.removeEventListener(I,b)},[]),s.useEffect(()=>{let n=a.current;n&&c(se(n))},[f]),s.useEffect(()=>{if(m.length===0){u.current=!1;return}u.current||(u.current=!0,e&&r.current?.focus())},[m,e]),fe(le.div,{role:"alert",tabIndex:-1,"data-skdx-error-summary":"",hidden:m.length===0||void 0,...o,...y("form","error-summary",o.className),ref:p,children:[m.length>0?t:null,P("ul",{...y("form","error-summary-list"),children:m.map(n=>P("li",{children:P("a",{...y("form","error-summary-link"),href:`#${n.id}`,onClick:R=>{R.preventDefault(),ie(n.id)},children:n.message})},n.id))})]})});w.displayName="FormErrorSummary";export{G as Form,C as FormControl,w as FormErrorSummary,g as FormField,L as FormLabel,V as FormMessage,B as FormProvider,k as FormSubmit,E as useFormContext};
+'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

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/**
+ * Anatomy a {@link Form} draws from `errorSummary`/`submitLabel`: summary,
+ * fields (`children`), submit button. Each piece is conditional.
+ *
+ * @internal
+ */
+export declare const FormAnatomy: ({ errorSummary, submitLabel, children, }: {
+    errorSummary?: string | undefined;
+    submitLabel?: string | undefined;
+    children?: React.ReactNode | undefined;
+}) => React.JSX.Element;
+/** @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 | undefined;
+    message?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
+}) => React.JSX.Element;

package/dist/form/FormAnatomy.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/**
+ * Anatomy a {@link Form} draws from `errorSummary`/`submitLabel`: summary,
+ * fields (`children`), submit button. Each piece is conditional.
+ *
+ * @internal
+ */
+export declare const FormAnatomy: ({ errorSummary, submitLabel, children, }: {
+    errorSummary?: string | undefined;
+    submitLabel?: string | undefined;
+    children?: React.ReactNode | undefined;
+}) => React.JSX.Element;
+/** @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 | 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;
+};