@skdx/react 0.26.0

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

@@ -0,0 +1,268 @@
+import type * as React from 'react';
+import type { PortalProps } from '../utils/portal.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/** The panel's top-left corner, in CSS pixels, measured from the top-left of its `boundary`. */
+export interface FloatingPanelPosition {
+    x: number;
+    y: number;
+}
+/** The panel's box, in CSS pixels. */
+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.
+ */
+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
+ */
+export type FloatingPanelGesture = 'move' | 'resize';
+/**
+ * Shared state distributed from {@link FloatingPanel} to its parts via context. Not part of the public API.
+ *
+ * @internal
+ */
+export interface FloatingPanelContextValue {
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    titleId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    position: FloatingPanelPosition;
+    size: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    stage: FloatingPanelStage;
+    onStageChange: (stage: FloatingPanelStage) => void;
+    moveBy: (dx: number, dy: number) => void;
+    resizeBy: (direction: FloatingPanelResizeDirection, dx: number, dy: number) => void;
+    announceRelease: (gesture: FloatingPanelGesture) => void;
+    draggable: boolean;
+    resizable: boolean;
+    disabled: boolean;
+    step: number;
+    dragging: boolean;
+    setDragging: (dragging: boolean) => void;
+    resizing: boolean;
+    setResizing: (resizing: boolean) => void;
+    contentPresent: boolean;
+    setContentPresent: (present: boolean) => void;
+}
+/** Props for the {@link FloatingPanel} root. */
+export interface FloatingPanelProps {
+    /**
+     * 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.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the panel is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * 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;
+    /**
+     * The panel's top-left corner, for controlled usage. Pair with `onPositionChange`
+     * or the panel will refuse to move.
+     * @default undefined — uncontrolled, tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * 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.
+     * @default undefined — no-op if omitted.
+     */
+    onPositionChange?: (position: FloatingPanelPosition) => void;
+    /**
+     * The panel's box, for controlled usage. Pair with `onSizeChange` or the
+     * panel will refuse to resize.
+     * @default undefined — uncontrolled, tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Fires with the clamped size on every resize frame and every arrow-key
+     * nudge — not once per gesture.
+     * @default undefined — no-op if omitted.
+     */
+    onSizeChange?: (size: FloatingPanelSize) => void;
+    /**
+     * 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.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * 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.
+     * @default undefined — the viewport constrains the panel instead.
+     */
+    boundary?: React.RefObject<HTMLElement | null>;
+    /**
+     * The panel's window state, for controlled usage. Pair with `onStageChange`.
+     * @default undefined — uncontrolled, tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Fires with the new stage whenever a {@link FloatingPanelStageTrigger} is pressed.
+     * @default undefined — no-op if omitted.
+     */
+    onStageChange?: (stage: FloatingPanelStage) => void;
+    /**
+     * Whether the header can move the panel. `false` leaves the header focusable
+     * only if you make it so, and drops its `move` cursor.
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * 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.
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels. Shift+arrow
+     * uses ten times this.
+     * @default 10
+     */
+    step?: number;
+    /**
+     * 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.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 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.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+}
+/** The panel's geometry at the moment a gesture ended, handed to {@link FloatingPanelProps.getGestureAnnouncement}. */
+export interface FloatingPanelGeometry {
+    /** Top-left corner, in CSS pixels, rounded. */
+    position: FloatingPanelPosition;
+    /** Width and height, in CSS pixels, rounded. */
+    size: FloatingPanelSize;
+}
+/** Props for {@link FloatingPanelTrigger}, the button that opens the panel. */
+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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * 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.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for {@link FloatingPanelHeader}, the drag handle. */
+export interface FloatingPanelHeaderProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link FloatingPanelTitle}, the panel's accessible name. */
+export interface FloatingPanelTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link FloatingPanelCloseTrigger}, a button that closes the panel. */
+export interface FloatingPanelCloseTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** 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.
+     */
+    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.
+     */
+    stage: FloatingPanelStage;
+}

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

@@ -0,0 +1,268 @@
+import type * as React from 'react';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+/** The panel's top-left corner, in CSS pixels, measured from the top-left of its `boundary`. */
+export interface FloatingPanelPosition {
+    x: number;
+    y: number;
+}
+/** The panel's box, in CSS pixels. */
+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.
+ */
+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
+ */
+export type FloatingPanelGesture = 'move' | 'resize';
+/**
+ * Shared state distributed from {@link FloatingPanel} to its parts via context. Not part of the public API.
+ *
+ * @internal
+ */
+export interface FloatingPanelContextValue {
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    titleId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    position: FloatingPanelPosition;
+    size: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    stage: FloatingPanelStage;
+    onStageChange: (stage: FloatingPanelStage) => void;
+    moveBy: (dx: number, dy: number) => void;
+    resizeBy: (direction: FloatingPanelResizeDirection, dx: number, dy: number) => void;
+    announceRelease: (gesture: FloatingPanelGesture) => void;
+    draggable: boolean;
+    resizable: boolean;
+    disabled: boolean;
+    step: number;
+    dragging: boolean;
+    setDragging: (dragging: boolean) => void;
+    resizing: boolean;
+    setResizing: (resizing: boolean) => void;
+    contentPresent: boolean;
+    setContentPresent: (present: boolean) => void;
+}
+/** Props for the {@link FloatingPanel} root. */
+export interface FloatingPanelProps {
+    /**
+     * 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.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the panel is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * 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;
+    /**
+     * The panel's top-left corner, for controlled usage. Pair with `onPositionChange`
+     * or the panel will refuse to move.
+     * @default undefined — uncontrolled, tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * 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.
+     * @default undefined — no-op if omitted.
+     */
+    onPositionChange?: (position: FloatingPanelPosition) => void;
+    /**
+     * The panel's box, for controlled usage. Pair with `onSizeChange` or the
+     * panel will refuse to resize.
+     * @default undefined — uncontrolled, tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Fires with the clamped size on every resize frame and every arrow-key
+     * nudge — not once per gesture.
+     * @default undefined — no-op if omitted.
+     */
+    onSizeChange?: (size: FloatingPanelSize) => void;
+    /**
+     * 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.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * 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.
+     * @default undefined — the viewport constrains the panel instead.
+     */
+    boundary?: React.RefObject<HTMLElement | null>;
+    /**
+     * The panel's window state, for controlled usage. Pair with `onStageChange`.
+     * @default undefined — uncontrolled, tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Fires with the new stage whenever a {@link FloatingPanelStageTrigger} is pressed.
+     * @default undefined — no-op if omitted.
+     */
+    onStageChange?: (stage: FloatingPanelStage) => void;
+    /**
+     * Whether the header can move the panel. `false` leaves the header focusable
+     * only if you make it so, and drops its `move` cursor.
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * 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.
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels. Shift+arrow
+     * uses ten times this.
+     * @default 10
+     */
+    step?: number;
+    /**
+     * 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.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 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.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+}
+/** The panel's geometry at the moment a gesture ended, handed to {@link FloatingPanelProps.getGestureAnnouncement}. */
+export interface FloatingPanelGeometry {
+    /** Top-left corner, in CSS pixels, rounded. */
+    position: FloatingPanelPosition;
+    /** Width and height, in CSS pixels, rounded. */
+    size: FloatingPanelSize;
+}
+/** Props for {@link FloatingPanelTrigger}, the button that opens the panel. */
+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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * 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.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for {@link FloatingPanelHeader}, the drag handle. */
+export interface FloatingPanelHeaderProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link FloatingPanelTitle}, the panel's accessible name. */
+export interface FloatingPanelTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link FloatingPanelCloseTrigger}, a button that closes the panel. */
+export interface FloatingPanelCloseTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** 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.
+     */
+    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.
+     */
+    stage: FloatingPanelStage;
+}

package/dist/form/Form.cjs

@@ -0,0 +1 @@
+"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});

package/dist/form/Form.d.cts

@@ -0,0 +1,38 @@
+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;
+/**
+ * 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`.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={(e) => console.log('submitted')}>
+ *   <FormField 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>
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<HTMLFormElement>>;

package/dist/form/Form.d.ts

@@ -0,0 +1,38 @@
+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;
+/**
+ * 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`.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={(e) => console.log('submitted')}>
+ *   <FormField 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>
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<HTMLFormElement>>;

package/dist/form/Form.js

@@ -0,0 +1 @@
+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};

package/dist/form/FormControl.d.cts

@@ -0,0 +1,20 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <FormField name="email">
+ *   <FormControl>
+ *     <input type="email" required />
+ *   </FormControl>
+ * </FormField>
+ * ```
+ */
+export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;