@10x-media/form-builder 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/react/presentation/Backdrop.d.ts

@@ -0,0 +1,18 @@
+//#region src/react/presentation/Backdrop.d.ts
+type BackdropProps = {
+  onClick?: () => void;
+  className?: string;
+};
+/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */
+declare const Backdrop: ({
+  onClick,
+  className
+}: BackdropProps) => import("react").DetailedReactHTMLElement<{
+  'data-fb-backdrop': string;
+  className: string | undefined;
+  onClick: (() => void) | undefined;
+  'aria-hidden': true;
+}, HTMLElement>;
+//#endregion
+export { Backdrop, BackdropProps };
+//# sourceMappingURL=Backdrop.d.ts.map

package/dist/react/presentation/Backdrop.js

@@ -0,0 +1,14 @@
+"use client";
+import { createElement } from "react";
+//#region src/react/presentation/Backdrop.tsx
+/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */
+const Backdrop = ({ onClick, className }) => createElement("div", {
+	"data-fb-backdrop": "",
+	className,
+	onClick,
+	"aria-hidden": true
+});
+//#endregion
+export { Backdrop };
+
+//# sourceMappingURL=Backdrop.js.map

package/dist/react/presentation/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","names":[],"sources":["../../../src/react/presentation/Backdrop.tsx"],"sourcesContent":["'use client'\n\nimport { createElement } from 'react'\n\nexport type BackdropProps = {\n\tonClick?: () => void\n\tclassName?: string\n}\n\n/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */\nexport const Backdrop = ({ onClick, className }: BackdropProps) =>\n\tcreateElement('div', { 'data-fb-backdrop': '', className, onClick, 'aria-hidden': true })\n"],"mappings":";;;;AAUA,MAAa,YAAY,EAAE,SAAS,gBACnC,cAAc,OAAO;CAAE,oBAAoB;CAAI;CAAW;CAAS,eAAe;AAAK,CAAC"}

package/dist/react/presentation/DialogSurface.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+//#region src/react/presentation/DialogSurface.d.ts
+type DialogSurfaceProps = {
+  open: boolean;
+  onClose: () => void; /** Accessible name; pass either label or labelledBy. */
+  label?: string;
+  labelledBy?: string; /** CSS data hook, e.g. 'modal' | 'drawer'. */
+  surface?: string;
+  closeLabel?: string;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
+  children?: ReactNode;
+};
+/**
+ * Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,
+ * scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the
+ * exported primitives so a consumer can rebuild it from the same parts.
+ */
+declare const DialogSurface: ({
+  open,
+  onClose,
+  label,
+  labelledBy,
+  surface,
+  closeLabel,
+  closeOnEscape,
+  closeOnOutsideClick,
+  children
+}: DialogSurfaceProps) => import("react").ReactElement<{
+  'data-fb-overlay': string;
+}, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { DialogSurface, DialogSurfaceProps };
+//# sourceMappingURL=DialogSurface.d.ts.map

package/dist/react/presentation/DialogSurface.js

@@ -0,0 +1,56 @@
+"use client";
+import { Backdrop } from "./Backdrop.js";
+import { useDismiss } from "./useDismiss.js";
+import { useFocusTrap } from "./useFocusTrap.js";
+import { useScrollLock } from "./useScrollLock.js";
+import { createElement, useEffect, useRef } from "react";
+//#region src/react/presentation/DialogSurface.tsx
+/**
+* Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,
+* scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the
+* exported primitives so a consumer can rebuild it from the same parts.
+*/
+const DialogSurface = ({ open, onClose, label, labelledBy, surface, closeLabel = "Close", closeOnEscape, closeOnOutsideClick, children }) => {
+	const ref = useRef(null);
+	const restoreRef = useRef(null);
+	useScrollLock(open);
+	useFocusTrap(ref, open);
+	useDismiss({
+		active: open,
+		onDismiss: onClose,
+		closeOnEscape,
+		closeOnOutsideClick
+	}, ref);
+	useEffect(() => {
+		if (!open) return;
+		restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		ref.current?.focus();
+		return () => {
+			restoreRef.current?.focus();
+		};
+	}, [open]);
+	if (!open) return null;
+	return createElement("div", { "data-fb-overlay": surface ?? "" }, [createElement(Backdrop, {
+		key: "backdrop",
+		onClick: onClose
+	}), createElement("div", {
+		key: "surface",
+		ref,
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": labelledBy ? void 0 : label,
+		"aria-labelledby": labelledBy,
+		"data-fb-dialog": surface ?? "",
+		tabIndex: -1
+	}, [createElement("button", {
+		key: "close",
+		type: "button",
+		"data-fb-dialog-close": "",
+		"aria-label": closeLabel,
+		onClick: onClose
+	}, "×"), createElement("div", { key: "body" }, children)])]);
+};
+//#endregion
+export { DialogSurface };
+
+//# sourceMappingURL=DialogSurface.js.map

package/dist/react/presentation/DialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogSurface.js","names":[],"sources":["../../../src/react/presentation/DialogSurface.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type ReactNode, useEffect, useRef } from 'react'\nimport { Backdrop } from './Backdrop'\nimport { useDismiss } from './useDismiss'\nimport { useFocusTrap } from './useFocusTrap'\nimport { useScrollLock } from './useScrollLock'\n\nexport type DialogSurfaceProps = {\n\topen: boolean\n\tonClose: () => void\n\t/** Accessible name; pass either label or labelledBy. */\n\tlabel?: string\n\tlabelledBy?: string\n\t/** CSS data hook, e.g. 'modal' | 'drawer'. */\n\tsurface?: string\n\tcloseLabel?: string\n\tcloseOnEscape?: boolean\n\tcloseOnOutsideClick?: boolean\n\tchildren?: ReactNode\n}\n\n/**\n * Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,\n * scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the\n * exported primitives so a consumer can rebuild it from the same parts.\n */\nexport const DialogSurface = ({\n\topen,\n\tonClose,\n\tlabel,\n\tlabelledBy,\n\tsurface,\n\tcloseLabel = 'Close',\n\tcloseOnEscape,\n\tcloseOnOutsideClick,\n\tchildren,\n}: DialogSurfaceProps) => {\n\tconst ref = useRef<HTMLDivElement>(null)\n\tconst restoreRef = useRef<HTMLElement | null>(null)\n\n\tuseScrollLock(open)\n\tuseFocusTrap(ref, open)\n\tuseDismiss({ active: open, onDismiss: onClose, closeOnEscape, closeOnOutsideClick }, ref)\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn\n\t\t}\n\t\trestoreRef.current =\n\t\t\tdocument.activeElement instanceof HTMLElement ? document.activeElement : null\n\t\tref.current?.focus()\n\t\treturn () => {\n\t\t\trestoreRef.current?.focus()\n\t\t}\n\t}, [open])\n\n\tif (!open) {\n\t\treturn null\n\t}\n\n\treturn createElement('div', { 'data-fb-overlay': surface ?? '' }, [\n\t\tcreateElement(Backdrop, { key: 'backdrop', onClick: onClose }),\n\t\tcreateElement(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\tkey: 'surface',\n\t\t\t\tref,\n\t\t\t\trole: 'dialog',\n\t\t\t\t'aria-modal': true,\n\t\t\t\t'aria-label': labelledBy ? undefined : label,\n\t\t\t\t'aria-labelledby': labelledBy,\n\t\t\t\t'data-fb-dialog': surface ?? '',\n\t\t\t\ttabIndex: -1,\n\t\t\t},\n\t\t\t[\n\t\t\t\tcreateElement(\n\t\t\t\t\t'button',\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'close',\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t'data-fb-dialog-close': '',\n\t\t\t\t\t\t'aria-label': closeLabel,\n\t\t\t\t\t\tonClick: onClose,\n\t\t\t\t\t},\n\t\t\t\t\t'\\xd7'\n\t\t\t\t),\n\t\t\t\tcreateElement('div', { key: 'body' }, children),\n\t\t\t]\n\t\t),\n\t])\n}\n"],"mappings":";;;;;;;;;;;;AA2BA,MAAa,iBAAiB,EAC7B,MACA,SACA,OACA,YACA,SACA,aAAa,SACb,eACA,qBACA,eACyB;CACzB,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,OAA2B,IAAI;CAElD,cAAc,IAAI;CAClB,aAAa,KAAK,IAAI;CACtB,WAAW;EAAE,QAAQ;EAAM,WAAW;EAAS;EAAe;CAAoB,GAAG,GAAG;CAExF,gBAAgB;EACf,IAAI,CAAC,MACJ;EAED,WAAW,UACV,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EAC1E,IAAI,SAAS,MAAM;EACnB,aAAa;GACZ,WAAW,SAAS,MAAM;EAC3B;CACD,GAAG,CAAC,IAAI,CAAC;CAET,IAAI,CAAC,MACJ,OAAO;CAGR,OAAO,cAAc,OAAO,EAAE,mBAAmB,WAAW,GAAG,GAAG,CACjE,cAAc,UAAU;EAAE,KAAK;EAAY,SAAS;CAAQ,CAAC,GAC7D,cACC,OACA;EACC,KAAK;EACL;EACA,MAAM;EACN,cAAc;EACd,cAAc,aAAa,KAAA,IAAY;EACvC,mBAAmB;EACnB,kBAAkB,WAAW;EAC7B,UAAU;CACX,GACA,CACC,cACC,UACA;EACC,KAAK;EACL,MAAM;EACN,wBAAwB;EACxB,cAAc;EACd,SAAS;CACV,GACA,GACD,GACA,cAAc,OAAO,EAAE,KAAK,OAAO,GAAG,QAAQ,CAC/C,CACD,CACD,CAAC;AACF"}

package/dist/react/presentation/presentations.d.ts

@@ -0,0 +1,7 @@
+import { FormPresentation } from "./types.js";
+
+//#region src/react/presentation/presentations.d.ts
+declare const defaultPresentations: Record<string, FormPresentation>;
+//#endregion
+export { defaultPresentations };
+//# sourceMappingURL=presentations.d.ts.map

package/dist/react/presentation/presentations.js

@@ -0,0 +1,32 @@
+"use client";
+import { defaultPresentationDescriptors } from "../../presentations/defaults.js";
+import { DialogSurface } from "./DialogSurface.js";
+import { createElement } from "react";
+//#region src/react/presentation/presentations.tsx
+const overlayWrapper = (surface) => {
+	const Wrapper = ({ open, onClose, title, closeLabel, children }) => createElement(DialogSurface, {
+		open,
+		onClose,
+		label: title,
+		surface,
+		closeLabel
+	}, children);
+	Wrapper.displayName = `${surface}Wrapper`;
+	return Wrapper;
+};
+const defaultPresentations = {
+	page: defaultPresentationDescriptors.page,
+	inline: defaultPresentationDescriptors.inline,
+	modal: {
+		...defaultPresentationDescriptors.modal,
+		Wrapper: overlayWrapper("modal")
+	},
+	drawer: {
+		...defaultPresentationDescriptors.drawer,
+		Wrapper: overlayWrapper("drawer")
+	}
+};
+//#endregion
+export { defaultPresentations };
+
+//# sourceMappingURL=presentations.js.map

package/dist/react/presentation/presentations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentations.js","names":[],"sources":["../../../src/react/presentation/presentations.tsx"],"sourcesContent":["'use client'\n\nimport { createElement } from 'react'\nimport { defaultPresentationDescriptors } from '../../presentations/defaults'\nimport { DialogSurface } from './DialogSurface'\nimport type { FormPresentation, PresentationWrapperProps } from './types'\n\nconst overlayWrapper = (surface: 'modal' | 'drawer') => {\n\tconst Wrapper = ({ open, onClose, title, closeLabel, children }: PresentationWrapperProps) =>\n\t\tcreateElement(DialogSurface, { open, onClose, label: title, surface, closeLabel }, children)\n\tWrapper.displayName = `${surface}Wrapper`\n\treturn Wrapper\n}\n\nexport const defaultPresentations: Record<string, FormPresentation> = {\n\tpage: defaultPresentationDescriptors.page,\n\tinline: defaultPresentationDescriptors.inline,\n\tmodal: { ...defaultPresentationDescriptors.modal, Wrapper: overlayWrapper('modal') },\n\tdrawer: { ...defaultPresentationDescriptors.drawer, Wrapper: overlayWrapper('drawer') },\n}\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,YAAgC;CACvD,MAAM,WAAW,EAAE,MAAM,SAAS,OAAO,YAAY,eACpD,cAAc,eAAe;EAAE;EAAM;EAAS,OAAO;EAAO;EAAS;CAAW,GAAG,QAAQ;CAC5F,QAAQ,cAAc,GAAG,QAAQ;CACjC,OAAO;AACR;AAEA,MAAa,uBAAyD;CACrE,MAAM,+BAA+B;CACrC,QAAQ,+BAA+B;CACvC,OAAO;EAAE,GAAG,+BAA+B;EAAO,SAAS,eAAe,OAAO;CAAE;CACnF,QAAQ;EAAE,GAAG,+BAA+B;EAAQ,SAAS,eAAe,QAAQ;CAAE;AACvF"}

package/dist/react/presentation/registry.d.ts

@@ -0,0 +1,11 @@
+import { FormPresentation } from "./types.js";
+
+//#region src/react/presentation/registry.d.ts
+type PresentationRegistry = Map<string, FormPresentation>;
+/** `false` removes, `true` keeps the default, a presentation adds or replaces one. */
+type PresentationOption = boolean | FormPresentation;
+type PresentationsConfig = Record<string, PresentationOption>;
+declare const resolvePresentations: (defaults?: Record<string, FormPresentation>, config?: PresentationsConfig) => PresentationRegistry;
+//#endregion
+export { PresentationOption, PresentationRegistry, PresentationsConfig, resolvePresentations };
+//# sourceMappingURL=registry.d.ts.map

package/dist/react/presentation/registry.js

@@ -0,0 +1,12 @@
+import { defaultPresentations } from "./presentations.js";
+//#region src/react/presentation/registry.ts
+const resolvePresentations = (defaults = defaultPresentations, config = {}) => {
+	const registry = new Map(Object.entries(defaults));
+	for (const [name, option] of Object.entries(config)) if (option === false) registry.delete(name);
+	else if (option === true) {} else registry.set(name, option);
+	return registry;
+};
+//#endregion
+export { resolvePresentations };
+
+//# sourceMappingURL=registry.js.map

package/dist/react/presentation/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../../../src/react/presentation/registry.ts"],"sourcesContent":["import { defaultPresentations } from './presentations'\nimport type { FormPresentation } from './types'\n\nexport type PresentationRegistry = Map<string, FormPresentation>\n\n/** `false` removes, `true` keeps the default, a presentation adds or replaces one. */\nexport type PresentationOption = boolean | FormPresentation\n\nexport type PresentationsConfig = Record<string, PresentationOption>\n\nexport const resolvePresentations = (\n\tdefaults: Record<string, FormPresentation> = defaultPresentations,\n\tconfig: PresentationsConfig = {}\n): PresentationRegistry => {\n\tconst registry: PresentationRegistry = new Map(Object.entries(defaults))\n\tfor (const [name, option] of Object.entries(config)) {\n\t\tif (option === false) {\n\t\t\tregistry.delete(name)\n\t\t} else if (option === true) {\n\t\t\t// keep the default\n\t\t} else {\n\t\t\tregistry.set(name, option)\n\t\t}\n\t}\n\treturn registry\n}\n"],"mappings":";;AAUA,MAAa,wBACZ,WAA6C,sBAC7C,SAA8B,CAAC,MACL;CAC1B,MAAM,WAAiC,IAAI,IAAI,OAAO,QAAQ,QAAQ,CAAC;CACvE,KAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,MAAM,GACjD,IAAI,WAAW,OACd,SAAS,OAAO,IAAI;MACd,IAAI,WAAW,MAAM,CAE5B,OACC,SAAS,IAAI,MAAM,MAAM;CAG3B,OAAO;AACR"}

package/dist/react/presentation/types.d.ts

@@ -0,0 +1,19 @@
+import { PresentationDescriptor } from "../../presentations/types.js";
+import { ComponentType, ReactNode } from "react";
+
+//#region src/react/presentation/types.d.ts
+type PresentationWrapperProps = {
+  presentation: FormPresentation;
+  open: boolean;
+  onClose: () => void; /** Accessible name for an overlay surface (e.g. the form title). */
+  title?: string; /** Label for the overlay close control. */
+  closeLabel?: string;
+  children: ReactNode;
+};
+/** A descriptor plus an optional React wrapper. page/inline omit the wrapper; modal/drawer provide one. */
+type FormPresentation = PresentationDescriptor & {
+  Wrapper?: ComponentType<PresentationWrapperProps>;
+};
+//#endregion
+export { FormPresentation, PresentationWrapperProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/react/presentation/useDismiss.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+
+//#region src/react/presentation/useDismiss.d.ts
+type UseDismissOptions = {
+  active: boolean;
+  onDismiss: () => void;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
+};
+/** Dismiss-on-Escape and dismiss-on-outside-pointerdown for an overlay surface. */
+declare const useDismiss: ({
+  active,
+  onDismiss,
+  closeOnEscape,
+  closeOnOutsideClick
+}: UseDismissOptions, ref: RefObject<HTMLElement | null>) => void;
+//#endregion
+export { UseDismissOptions, useDismiss };
+//# sourceMappingURL=useDismiss.d.ts.map

package/dist/react/presentation/useDismiss.js

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect } from "react";
+//#region src/react/presentation/useDismiss.ts
+/** Dismiss-on-Escape and dismiss-on-outside-pointerdown for an overlay surface. */
+const useDismiss = ({ active, onDismiss, closeOnEscape = true, closeOnOutsideClick = true }, ref) => {
+	useEffect(() => {
+		if (!active) return;
+		const onKeyDown = (event) => {
+			if (closeOnEscape && event.key === "Escape") onDismiss();
+		};
+		const onPointerDown = (event) => {
+			if (!closeOnOutsideClick) return;
+			const node = ref.current;
+			if (node && event.target instanceof Node && !node.contains(event.target)) onDismiss();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			document.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [
+		active,
+		onDismiss,
+		closeOnEscape,
+		closeOnOutsideClick,
+		ref
+	]);
+};
+//#endregion
+export { useDismiss };
+
+//# sourceMappingURL=useDismiss.js.map

package/dist/react/presentation/useDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDismiss.js","names":[],"sources":["../../../src/react/presentation/useDismiss.ts"],"sourcesContent":["'use client'\n\nimport { type RefObject, useEffect } from 'react'\n\nexport type UseDismissOptions = {\n\tactive: boolean\n\tonDismiss: () => void\n\tcloseOnEscape?: boolean\n\tcloseOnOutsideClick?: boolean\n}\n\n/** Dismiss-on-Escape and dismiss-on-outside-pointerdown for an overlay surface. */\nexport const useDismiss = (\n\t{ active, onDismiss, closeOnEscape = true, closeOnOutsideClick = true }: UseDismissOptions,\n\tref: RefObject<HTMLElement | null>\n): void => {\n\tuseEffect(() => {\n\t\tif (!active) {\n\t\t\treturn\n\t\t}\n\t\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (closeOnEscape && event.key === 'Escape') {\n\t\t\t\tonDismiss()\n\t\t\t}\n\t\t}\n\t\tconst onPointerDown = (event: Event) => {\n\t\t\tif (!closeOnOutsideClick) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst node = ref.current\n\t\t\tif (node && event.target instanceof Node && !node.contains(event.target)) {\n\t\t\t\tonDismiss()\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown)\n\t\tdocument.addEventListener('pointerdown', onPointerDown)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', onKeyDown)\n\t\t\tdocument.removeEventListener('pointerdown', onPointerDown)\n\t\t}\n\t}, [active, onDismiss, closeOnEscape, closeOnOutsideClick, ref])\n}\n"],"mappings":";;;;AAYA,MAAa,cACZ,EAAE,QAAQ,WAAW,gBAAgB,MAAM,sBAAsB,QACjE,QACU;CACV,gBAAgB;EACf,IAAI,CAAC,QACJ;EAED,MAAM,aAAa,UAAyB;GAC3C,IAAI,iBAAiB,MAAM,QAAQ,UAClC,UAAU;EAEZ;EACA,MAAM,iBAAiB,UAAiB;GACvC,IAAI,CAAC,qBACJ;GAED,MAAM,OAAO,IAAI;GACjB,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,CAAC,KAAK,SAAS,MAAM,MAAM,GACtE,UAAU;EAEZ;EACA,SAAS,iBAAiB,WAAW,SAAS;EAC9C,SAAS,iBAAiB,eAAe,aAAa;EACtD,aAAa;GACZ,SAAS,oBAAoB,WAAW,SAAS;GACjD,SAAS,oBAAoB,eAAe,aAAa;EAC1D;CACD,GAAG;EAAC;EAAQ;EAAW;EAAe;EAAqB;CAAG,CAAC;AAChE"}

package/dist/react/presentation/useFocusTrap.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+
+//#region src/react/presentation/useFocusTrap.d.ts
+/** Trap Tab focus within the container while active. */
+declare const useFocusTrap: (ref: RefObject<HTMLElement | null>, active: boolean) => void;
+//#endregion
+export { useFocusTrap };
+//# sourceMappingURL=useFocusTrap.d.ts.map

package/dist/react/presentation/useFocusTrap.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect } from "react";
+//#region src/react/presentation/useFocusTrap.ts
+const FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+/** Trap Tab focus within the container while active. */
+const useFocusTrap = (ref, active) => {
+	useEffect(() => {
+		if (!active) return;
+		const node = ref.current;
+		if (!node) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const focusable = Array.from(node.querySelectorAll(FOCUSABLE));
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const activeEl = document.activeElement;
+			if (event.shiftKey && activeEl === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && activeEl === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		node.addEventListener("keydown", onKeyDown);
+		return () => {
+			node.removeEventListener("keydown", onKeyDown);
+		};
+	}, [ref, active]);
+};
+//#endregion
+export { useFocusTrap };
+
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/react/presentation/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../../src/react/presentation/useFocusTrap.ts"],"sourcesContent":["'use client'\n\nimport { type RefObject, useEffect } from 'react'\n\nconst FOCUSABLE =\n\t'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])'\n\n/** Trap Tab focus within the container while active. */\nexport const useFocusTrap = (ref: RefObject<HTMLElement | null>, active: boolean): void => {\n\tuseEffect(() => {\n\t\tif (!active) {\n\t\t\treturn\n\t\t}\n\t\tconst node = ref.current\n\t\tif (!node) {\n\t\t\treturn\n\t\t}\n\t\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst focusable = Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE))\n\t\t\tif (focusable.length === 0) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst first = focusable[0] as HTMLElement\n\t\t\tconst last = focusable[focusable.length - 1] as HTMLElement\n\t\t\tconst activeEl = document.activeElement\n\t\t\tif (event.shiftKey && activeEl === first) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tlast.focus()\n\t\t\t} else if (!event.shiftKey && activeEl === last) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfirst.focus()\n\t\t\t}\n\t\t}\n\t\tnode.addEventListener('keydown', onKeyDown)\n\t\treturn () => {\n\t\t\tnode.removeEventListener('keydown', onKeyDown)\n\t\t}\n\t}, [ref, active])\n}\n"],"mappings":";;;AAIA,MAAM,YACL;;AAGD,MAAa,gBAAgB,KAAoC,WAA0B;CAC1F,gBAAgB;EACf,IAAI,CAAC,QACJ;EAED,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,MACJ;EAED,MAAM,aAAa,UAAyB;GAC3C,IAAI,MAAM,QAAQ,OACjB;GAED,MAAM,YAAY,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC;GAC1E,IAAI,UAAU,WAAW,GACxB;GAED,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;GAC1C,MAAM,WAAW,SAAS;GAC1B,IAAI,MAAM,YAAY,aAAa,OAAO;IACzC,MAAM,eAAe;IACrB,KAAK,MAAM;GACZ,OAAO,IAAI,CAAC,MAAM,YAAY,aAAa,MAAM;IAChD,MAAM,eAAe;IACrB,MAAM,MAAM;GACb;EACD;EACA,KAAK,iBAAiB,WAAW,SAAS;EAC1C,aAAa;GACZ,KAAK,oBAAoB,WAAW,SAAS;EAC9C;CACD,GAAG,CAAC,KAAK,MAAM,CAAC;AACjB"}

package/dist/react/presentation/useScrollLock.d.ts

@@ -0,0 +1,6 @@
+//#region src/react/presentation/useScrollLock.d.ts
+/** Lock body scroll while active; restores the prior value on cleanup. */
+declare const useScrollLock: (active: boolean) => void;
+//#endregion
+export { useScrollLock };
+//# sourceMappingURL=useScrollLock.d.ts.map

package/dist/react/presentation/useScrollLock.js

@@ -0,0 +1,18 @@
+"use client";
+import { useEffect } from "react";
+//#region src/react/presentation/useScrollLock.ts
+/** Lock body scroll while active; restores the prior value on cleanup. */
+const useScrollLock = (active) => {
+	useEffect(() => {
+		if (!active) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	}, [active]);
+};
+//#endregion
+export { useScrollLock };
+
+//# sourceMappingURL=useScrollLock.js.map

package/dist/react/presentation/useScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLock.js","names":[],"sources":["../../../src/react/presentation/useScrollLock.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/** Lock body scroll while active; restores the prior value on cleanup. */\nexport const useScrollLock = (active: boolean): void => {\n\tuseEffect(() => {\n\t\tif (!active) {\n\t\t\treturn\n\t\t}\n\t\tconst previous = document.body.style.overflow\n\t\tdocument.body.style.overflow = 'hidden'\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previous\n\t\t}\n\t}, [active])\n}\n"],"mappings":";;;;AAKA,MAAa,iBAAiB,WAA0B;CACvD,gBAAgB;EACf,IAAI,CAAC,QACJ;EAED,MAAM,WAAW,SAAS,KAAK,MAAM;EACrC,SAAS,KAAK,MAAM,WAAW;EAC/B,aAAa;GACZ,SAAS,KAAK,MAAM,WAAW;EAChC;CACD,GAAG,CAAC,MAAM,CAAC;AACZ"}

package/dist/react/primitives/Checkbox.d.ts

@@ -0,0 +1,26 @@
+//#region src/react/primitives/Checkbox.d.ts
+type CheckboxProps = {
+  id: string;
+  name: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  onBlur?: () => void;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedById?: string;
+};
+declare const Checkbox: ({
+  id,
+  name,
+  checked,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  invalid,
+  describedById
+}: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/react/primitives/Checkbox.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/primitives/Checkbox.tsx
+const Checkbox = ({ id, name, checked, onChange, onBlur, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	className: "fb-checkbox",
+	id,
+	name,
+	checked,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (e) => onChange(e.target.checked),
+	onBlur
+});
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/react/primitives/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/react/primitives/Checkbox.tsx"],"sourcesContent":["'use client'\n\nexport type CheckboxProps = {\n\tid: string\n\tname: string\n\tchecked: boolean\n\tonChange: (checked: boolean) => void\n\tonBlur?: () => void\n\trequired?: boolean\n\tdisabled?: boolean\n\tinvalid?: boolean\n\tdescribedById?: string\n}\n\nexport const Checkbox = ({\n\tid,\n\tname,\n\tchecked,\n\tonChange,\n\tonBlur,\n\trequired,\n\tdisabled,\n\tinvalid,\n\tdescribedById,\n}: CheckboxProps) => (\n\t<input\n\t\ttype=\"checkbox\"\n\t\tclassName=\"fb-checkbox\"\n\t\tid={id}\n\t\tname={name}\n\t\tchecked={checked}\n\t\trequired={required}\n\t\tdisabled={disabled}\n\t\taria-invalid={invalid || undefined}\n\t\taria-describedby={describedById}\n\t\tonChange={(e) => onChange(e.target.checked)}\n\t\tonBlur={onBlur}\n\t/>\n)\n"],"mappings":";;;AAcA,MAAa,YAAY,EACxB,IACA,MACA,SACA,UACA,QACA,UACA,UACA,SACA,oBAEA,oBAAC,SAAD;CACC,MAAK;CACL,WAAU;CACN;CACE;CACG;CACC;CACA;CACV,gBAAc,WAAW,KAAA;CACzB,oBAAkB;CAClB,WAAW,MAAM,SAAS,EAAE,OAAO,OAAO;CAClC;AACR,CAAA"}

package/dist/react/primitives/FieldShell.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+//#region src/react/primitives/FieldShell.d.ts
+type FieldShellProps = {
+  /** The control id this shell labels and describes. */id: string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  errors?: string[];
+  warnings?: string[]; /** id used for aria-describedby on the control; the shell renders description + messages under it. */
+  describedById: string;
+  children: ReactNode;
+};
+/**
+ * Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional
+ * description, and error/warning messages. The control inside must set `aria-describedby={describedById}`
+ * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.
+ */
+declare const FieldShell: ({
+  id,
+  label,
+  description,
+  required,
+  errors,
+  warnings,
+  describedById,
+  children
+}: FieldShellProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FieldShell, FieldShellProps };
+//# sourceMappingURL=FieldShell.d.ts.map

package/dist/react/primitives/FieldShell.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/primitives/FieldShell.tsx
+/**
+* Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional
+* description, and error/warning messages. The control inside must set `aria-describedby={describedById}`
+* and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.
+*/
+const FieldShell = ({ id, label, description, required, errors = [], warnings = [], describedById, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "fb-field",
+	"data-invalid": errors.length > 0 ? "" : void 0,
+	children: [
+		label ? /* @__PURE__ */ jsxs("label", {
+			className: "fb-field__label",
+			htmlFor: id,
+			children: [label, required ? /* @__PURE__ */ jsx("span", {
+				className: "fb-field__required",
+				"aria-hidden": "true",
+				children: " *"
+			}) : null]
+		}) : null,
+		children,
+		/* @__PURE__ */ jsxs("div", {
+			id: describedById,
+			className: "fb-field__messages",
+			children: [
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "fb-field__description",
+					children: description
+				}) : null,
+				errors.length > 0 ? /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					"aria-atomic": "true",
+					className: "fb-field__errors",
+					children: errors.map((message) => /* @__PURE__ */ jsx("p", {
+						className: "fb-field__error",
+						children: message
+					}, message))
+				}) : null,
+				warnings.map((message) => /* @__PURE__ */ jsx("p", {
+					className: "fb-field__warning",
+					children: message
+				}, message))
+			]
+		})
+	]
+});
+//#endregion
+export { FieldShell };
+
+//# sourceMappingURL=FieldShell.js.map

package/dist/react/primitives/FieldShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldShell.js","names":[],"sources":["../../../src/react/primitives/FieldShell.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nexport type FieldShellProps = {\n\t/** The control id this shell labels and describes. */\n\tid: string\n\tlabel?: string\n\tdescription?: string\n\trequired?: boolean\n\terrors?: string[]\n\twarnings?: string[]\n\t/** id used for aria-describedby on the control; the shell renders description + messages under it. */\n\tdescribedById: string\n\tchildren: ReactNode\n}\n\n/**\n * Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional\n * description, and error/warning messages. The control inside must set `aria-describedby={describedById}`\n * and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.\n */\nexport const FieldShell = ({\n\tid,\n\tlabel,\n\tdescription,\n\trequired,\n\terrors = [],\n\twarnings = [],\n\tdescribedById,\n\tchildren,\n}: FieldShellProps) => (\n\t<div className=\"fb-field\" data-invalid={errors.length > 0 ? '' : undefined}>\n\t\t{label ? (\n\t\t\t<label className=\"fb-field__label\" htmlFor={id}>\n\t\t\t\t{label}\n\t\t\t\t{required ? (\n\t\t\t\t\t<span className=\"fb-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t{' *'}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</label>\n\t\t) : null}\n\t\t{children}\n\t\t<div id={describedById} className=\"fb-field__messages\">\n\t\t\t{description ? <p className=\"fb-field__description\">{description}</p> : null}\n\t\t\t{errors.length > 0 ? (\n\t\t\t\t<div role=\"alert\" aria-atomic=\"true\" className=\"fb-field__errors\">\n\t\t\t\t\t{errors.map((message) => (\n\t\t\t\t\t\t<p key={message} className=\"fb-field__error\">\n\t\t\t\t\t\t\t{message}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{warnings.map((message) => (\n\t\t\t\t<p key={message} className=\"fb-field__warning\">\n\t\t\t\t\t{message}\n\t\t\t\t</p>\n\t\t\t))}\n\t\t</div>\n\t</div>\n)\n"],"mappings":";;;;;;;;AAsBA,MAAa,cAAc,EAC1B,IACA,OACA,aACA,UACA,SAAS,CAAC,GACV,WAAW,CAAC,GACZ,eACA,eAEA,qBAAC,OAAD;CAAK,WAAU;CAAW,gBAAc,OAAO,SAAS,IAAI,KAAK,KAAA;WAAjE;EACE,QACA,qBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;aAA5C,CACE,OACA,WACA,oBAAC,QAAD;IAAM,WAAU;IAAqB,eAAY;cAC/C;GACI,CAAA,IACH,IACE;OACJ;EACH;EACD,qBAAC,OAAD;GAAK,IAAI;GAAe,WAAU;aAAlC;IACE,cAAc,oBAAC,KAAD;KAAG,WAAU;eAAyB;IAAe,CAAA,IAAI;IACvE,OAAO,SAAS,IAChB,oBAAC,OAAD;KAAK,MAAK;KAAQ,eAAY;KAAO,WAAU;eAC7C,OAAO,KAAK,YACZ,oBAAC,KAAD;MAAiB,WAAU;gBACzB;KACC,GAFK,OAEL,CACH;IACG,CAAA,IACF;IACH,SAAS,KAAK,YACd,oBAAC,KAAD;KAAiB,WAAU;eACzB;IACC,GAFK,OAEL,CACH;GACG;;CACD"}

package/dist/react/primitives/Input.d.ts

@@ -0,0 +1,30 @@
+//#region src/react/primitives/Input.d.ts
+type InputProps = {
+  id: string;
+  name: string;
+  type?: 'text' | 'email' | 'number';
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedById?: string;
+};
+declare const Input: ({
+  id,
+  name,
+  type,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  required,
+  disabled,
+  invalid,
+  describedById
+}: InputProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Input, InputProps };
+//# sourceMappingURL=Input.d.ts.map

package/dist/react/primitives/Input.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/primitives/Input.tsx
+const Input = ({ id, name, type = "text", value, onChange, onBlur, placeholder, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("input", {
+	id,
+	name,
+	type,
+	className: "fb-input",
+	value,
+	placeholder,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (event) => onChange(event.target.value),
+	onBlur
+});
+//#endregion
+export { Input };
+
+//# sourceMappingURL=Input.js.map

package/dist/react/primitives/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/react/primitives/Input.tsx"],"sourcesContent":["'use client'\n\nexport type InputProps = {\n\tid: string\n\tname: string\n\ttype?: 'text' | 'email' | 'number'\n\tvalue: string\n\tonChange: (value: string) => void\n\tonBlur?: () => void\n\tplaceholder?: string\n\trequired?: boolean\n\tdisabled?: boolean\n\tinvalid?: boolean\n\tdescribedById?: string\n}\n\nexport const Input = ({\n\tid,\n\tname,\n\ttype = 'text',\n\tvalue,\n\tonChange,\n\tonBlur,\n\tplaceholder,\n\trequired,\n\tdisabled,\n\tinvalid,\n\tdescribedById,\n}: InputProps) => (\n\t<input\n\t\tid={id}\n\t\tname={name}\n\t\ttype={type}\n\t\tclassName=\"fb-input\"\n\t\tvalue={value}\n\t\tplaceholder={placeholder}\n\t\trequired={required}\n\t\tdisabled={disabled}\n\t\taria-invalid={invalid || undefined}\n\t\taria-describedby={describedById}\n\t\tonChange={(event) => onChange(event.target.value)}\n\t\tonBlur={onBlur}\n\t/>\n)\n"],"mappings":";;;AAgBA,MAAa,SAAS,EACrB,IACA,MACA,OAAO,QACP,OACA,UACA,QACA,aACA,UACA,UACA,SACA,oBAEA,oBAAC,SAAD;CACK;CACE;CACA;CACN,WAAU;CACH;CACM;CACH;CACA;CACV,gBAAc,WAAW,KAAA;CACzB,oBAAkB;CAClB,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;CACxC;AACR,CAAA"}

package/dist/react/primitives/Select.d.ts

@@ -0,0 +1,34 @@
+//#region src/react/primitives/Select.d.ts
+type SelectOption = {
+  label: string;
+  value: string;
+};
+type SelectProps = {
+  id: string;
+  name: string;
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedById?: string;
+  placeholder?: string;
+};
+declare const Select: ({
+  id,
+  name,
+  value,
+  options,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  invalid,
+  describedById,
+  placeholder
+}: SelectProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Select, SelectOption, SelectProps };
+//# sourceMappingURL=Select.d.ts.map