@deftui/addons 0.0.5 → 0.1.0

package/dist/form.d.mts

@@ -1,8 +1,19 @@
 import { RHFField } from "./react-hook-form/field.mjs";
 import { RHFForm } from "./react-hook-form/form.mjs";
 export declare const RHF: {
-  /** Form with predefined `className="grid gap-4"` */
+  /**
+   * Thin wrapper for BaseUI's FormPrimitive.
+   *
+   * - `className` defaults to `"grid gap-4"`.
+   */
   Form: typeof RHFForm;
-  /** Form field with label, description, error, and `useController` wrapper */
+  /**
+   * `useController` wrapper with label, description, and error.
+   *
+   * - Injects `id`, `aria-invalid`, and `aria-describedby` into a single child element.
+   * - For arrays/fragments, spread the second callback argument onto the control.
+   * - Syncs `data-disabled` with the field's disabled state.
+   * - Custom components must forward these props.
+   */
   Field: typeof RHFField;
 };

package/dist/form.mjs

@@ -2,9 +2,20 @@ import { RHFField } from "./react-hook-form/field.mjs";
 import { RHFForm } from "./react-hook-form/form.mjs";
 // src/react-hook-form/index.ts
 const RHF = {
-	/** Form with predefined `className="grid gap-4"` */
+	/**
+	* Thin wrapper for BaseUI's FormPrimitive.
+	*
+	* - `className` defaults to `"grid gap-4"`.
+	*/
 	Form: RHFForm,
-	/** Form field with label, description, error, and `useController` wrapper */
+	/**
+	* `useController` wrapper with label, description, and error.
+	*
+	* - Injects `id`, `aria-invalid`, and `aria-describedby` into a single child element.
+	* - For arrays/fragments, spread the second callback argument onto the control.
+	* - Syncs `data-disabled` with the field's disabled state.
+	* - Custom components must forward these props.
+	*/
 	Field: RHFField
 };
 export { RHF };

package/dist/modal-manager/host.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { Component, Suspense, memo, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/modal-manager/host.tsx
+function ModalRenderer({ view, onPresent }) {
+	useLayoutEffect(() => onPresent(view.id, view.component), [
+		onPresent,
+		view.id,
+		view.component
+	]);
+	const Content = view.component;
+	return /* @__PURE__ */ jsx(Content, {
+		...view.props,
+		modal: view.modal
+	});
+}
+var ModalErrorBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		this.props.onError(error);
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+/** Unchanged instances do not rerender when another instance opens or closes. */
+const ModalEntry = memo(function ModalEntry({ view, onPresent, onError }) {
+	return /* @__PURE__ */ jsx(ModalErrorBoundary, {
+		onError: (error) => onError(view.id, error),
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(ModalRenderer, {
+				view,
+				onPresent
+			})
+		})
+	});
+});
+export { ModalEntry };

package/dist/modal-manager/manager.d.mts

@@ -0,0 +1,15 @@
+import { ModalManager, ModalManagerOptions, ModalProps, ModalRegistry } from "./types.mjs";
+import { ComponentType } from "react";
+/**
+ * Create once outside rendering; accepts regular, memo, and lazy components.
+ *
+ * Call `open` on the client, outside rendering. The Host renders nothing during SSR.
+ *
+ * Pass the caller's `hot` and a stable `key` to retain instances and promises during HMR.
+ * Reload the page when the manager implementation changes.
+ *
+ * @example
+ * export const modals = createModalManager({ edit: EditModal }, { hot: import.meta.hot, key: "modals" });
+ * if (import.meta.hot) import.meta.hot.accept();
+ */
+export declare function createModalManager<Registry extends ModalRegistry>(registry: Registry & { [Key in keyof Registry]: Registry[Key] extends ComponentType<infer Props> ? (Props extends ModalProps<never> ? unknown : never) : never; }, options?: ModalManagerOptions): ModalManager<Registry>;

package/dist/modal-manager/manager.mjs

@@ -0,0 +1,177 @@
+"use client";
+import { ModalEntry } from "./host.mjs";
+import { useEffect, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/modal-manager/manager.tsx
+const EMPTY = [];
+/**
+* Create once outside rendering; accepts regular, memo, and lazy components.
+*
+* Call `open` on the client, outside rendering. The Host renders nothing during SSR.
+*
+* Pass the caller's `hot` and a stable `key` to retain instances and promises during HMR.
+* Reload the page when the manager implementation changes.
+*
+* @example
+* export const modals = createModalManager({ edit: EditModal }, { hot: import.meta.hot, key: "modals" });
+* if (import.meta.hot) import.meta.hot.accept();
+*/
+function createModalManager(registry, options) {
+	const cache = options?.hot ? options.hot.data.__deftuiModalManagers ??= /* @__PURE__ */ new Map() : void 0;
+	const cached = options && cache?.get(options.key);
+	if (cached) {
+		cached.setRegistry(registry);
+		return cached;
+	}
+	let definitions = registry;
+	let snapshot = EMPTY;
+	let nextId = 0;
+	let hostAttached = false;
+	const instances = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function publish() {
+		snapshot = Array.from(instances.values(), (instance) => instance.view);
+		listeners.forEach((listener) => listener());
+	}
+	function subscribe(listener) {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	}
+	function getSnapshot() {
+		return snapshot;
+	}
+	function getServerSnapshot() {
+		return EMPTY;
+	}
+	function remove(id) {
+		if (instances.delete(id)) publish();
+	}
+	function finish(instance, result) {
+		if (instance.settled) return;
+		instance.settled = true;
+		if (instance.presented) {
+			instance.view = {
+				...instance.view,
+				modal: {
+					...instance.view.modal,
+					rootProps: {
+						...instance.view.modal.rootProps,
+						open: false
+					}
+				}
+			};
+			publish();
+		} else remove(instance.view.id);
+		instance.resolve(result);
+	}
+	function onPresent(id, component) {
+		const instance = instances.get(id);
+		if (instance?.view.component === component) instance.presented = true;
+	}
+	function onError(id, error) {
+		const instance = instances.get(id);
+		if (!instance) return;
+		remove(id);
+		if (!instance.settled) {
+			instance.settled = true;
+			instance.reject(error);
+		}
+	}
+	function attachHost() {
+		if (hostAttached) throw new Error("A modal manager can only have one mounted Host.");
+		hostAttached = true;
+		return () => {
+			hostAttached = false;
+			queueMicrotask(() => {
+				if (hostAttached) return;
+				const remaining = Array.from(instances.values());
+				instances.clear();
+				publish();
+				for (const instance of remaining) {
+					if (instance.settled) continue;
+					instance.settled = true;
+					instance.resolve({ status: "dismissed" });
+				}
+			});
+		};
+	}
+	function Host() {
+		const views = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+		useEffect(attachHost, []);
+		return views.map((view) => /* @__PURE__ */ jsx(ModalEntry, {
+			view,
+			onPresent,
+			onError
+		}, view.id));
+	}
+	function open(key, props = {}) {
+		const definition = definitions[key];
+		if (!definition) throw new Error(`Unknown modal: ${key}`);
+		return new Promise((resolve, reject) => {
+			const id = nextId++;
+			const instance = {
+				key,
+				presented: false,
+				settled: false,
+				resolve,
+				reject,
+				view: {
+					id,
+					component: definition,
+					props,
+					modal: {
+						resolve: (value) => finish(instance, {
+							status: "resolved",
+							value
+						}),
+						dismiss: () => finish(instance, { status: "dismissed" }),
+						rootProps: {
+							open: true,
+							onOpenChange: (isOpen) => {
+								if (!isOpen) finish(instance, { status: "dismissed" });
+							},
+							onOpenChangeComplete: (isOpen) => {
+								if (!isOpen && instance.settled) remove(id);
+							}
+						}
+					}
+				}
+			};
+			instances.set(id, instance);
+			publish();
+		});
+	}
+	function dismissAll() {
+		for (const instance of instances.values()) finish(instance, { status: "dismissed" });
+	}
+	function setRegistry(nextRegistry) {
+		definitions = nextRegistry;
+		for (const instance of instances.values()) {
+			if (instance.settled) continue;
+			const definition = definitions[instance.key];
+			if (!definition) {
+				finish(instance, { status: "dismissed" });
+				continue;
+			}
+			const component = definition;
+			if (component === instance.view.component) continue;
+			instance.presented = false;
+			instance.view = {
+				...instance.view,
+				component
+			};
+		}
+		publish();
+	}
+	const manager = {
+		Host,
+		open,
+		dismissAll,
+		setRegistry
+	};
+	if (options) cache?.set(options.key, manager);
+	return manager;
+}
+export { createModalManager };

package/dist/modal-manager/types.d.mts

@@ -0,0 +1,55 @@
+import { ComponentType } from "react";
+/** Spread onto a controlled Dialog, AlertDialog, or Sheet root. */
+export interface ModalRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onOpenChangeComplete: (open: boolean) => void;
+}
+export interface ModalController<Value> {
+  /** Spread all three props onto the Root; forward callbacks when overriding them. */
+  rootProps: ModalRootProps;
+  /** Resolve the result and start closing. The first resolution or dismissal wins. */
+  resolve: (value: Value) => void;
+  /** Dismiss normally, without rejecting the returned promise. */
+  dismiss: () => void;
+}
+/** Intersect with the business component's props. The manager supplies `modal`. */
+export interface ModalProps<Value = void> {
+  modal: ModalController<Value>;
+}
+export type ModalRegistry = Record<string, ComponentType<never>>;
+type ModalComponentProps<T extends ComponentType<never>> = T extends ComponentType<infer Props> ? Props : never;
+type ModalArguments<Props> = {} extends Props ? [props?: Props] : [props: Props];
+export type ModalInput<T extends ComponentType<never>> = Omit<ModalComponentProps<T>, "modal">;
+export type ModalValue<T extends ComponentType<never>> = ModalComponentProps<T> extends ModalProps<infer Value> ? Value : never;
+export type ModalResult<Value> = {
+  status: "resolved";
+  value: Value;
+} | {
+  status: "dismissed";
+};
+export interface ModalManagerOptions {
+  /** The registration module's `import.meta.hot`. No HMR callbacks are registered. */
+  hot?: {
+    data: Record<string, unknown>;
+  };
+  /** Stable across updates and unique among managers in the same module. */
+  key: string;
+}
+export interface ModalManager<Registry extends ModalRegistry> {
+  /** Mount once inside the required contexts. Unmounting dismisses pending calls. */
+  Host: ComponentType;
+  /**
+   * Each call creates an independent instance.
+   *
+   * Resolves when closing starts; unmounts after exit.
+   *
+   * Loading/rendering failures reject; normal dismissal resolves with `status: "dismissed"`.
+   */
+  open: <Key extends Extract<keyof Registry, string>>(key: Key, ...args: ModalArguments<ModalInput<Registry[Key]>>) => Promise<ModalResult<ModalValue<Registry[Key]>>>;
+  /** Dismiss all current instances, preserving their exit animations. */
+  dismissAll: () => void;
+  /** Replace definitions, retaining promises. Removed entries dismiss; new components may reset local state. */
+  setRegistry: (registry: Registry) => void;
+}
+export {};

package/dist/modal.d.mts

@@ -0,0 +1,3 @@
+import { ModalController, ModalInput, ModalManager, ModalManagerOptions, ModalProps, ModalRegistry, ModalResult, ModalRootProps, ModalValue } from "./modal-manager/types.mjs";
+import { createModalManager } from "./modal-manager/manager.mjs";
+export { type ModalController, type ModalInput, type ModalManager, type ModalManagerOptions, type ModalProps, type ModalRegistry, type ModalResult, type ModalRootProps, type ModalValue, createModalManager };

package/dist/modal.mjs

@@ -0,0 +1 @@
+export { createModalManager } from "./modal-manager/manager.mjs";

package/dist/react-hook-form/field.d.mts

@@ -1,14 +1,20 @@
+import React from "react";
 import { Field } from "@deftui/react";
 import { FieldPath, FieldValues, UseControllerProps, UseControllerReturn } from "react-hook-form";
-import React from "react";
 type FieldStateKeys = "name" | "disabled" | "invalid" | "dirty" | "touched";
 type FieldValidKeys = "validate" | "validationMode" | "validationDebounceTime";
 type FieldRootProps = Omit<React.ComponentProps<typeof Field>, FieldStateKeys | FieldValidKeys | "children">;
+interface ControlProps {
+  "id": string;
+  "aria-invalid": boolean;
+  "aria-describedby": string | undefined;
+}
 interface RHFFieldProps<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>, Output = Values> extends UseControllerProps<Values, Name, Output> {
   label?: React.ReactNode;
   description?: React.ReactNode;
   fieldProps?: FieldRootProps;
-  children: (state: UseControllerReturn<Values, Name>) => React.ReactNode;
+  /** A single non-fragment element receives control props automatically; spread them manually for nested controls. */
+  children: (state: UseControllerReturn<Values, Name>, controlProps: ControlProps) => React.ReactNode;
 }
 export declare function RHFField<T extends FieldValues, Name extends FieldPath<T>, Output = T>(props: RHFFieldProps<T, Name, Output>): React.JSX.Element;
 export {};

package/dist/react-hook-form/field.mjs

@@ -1,19 +1,45 @@
+import { Fragment, cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@deftui/react";
 import { useController } from "react-hook-form";
-import { jsx, jsxs } from "react/jsx-runtime";
 // src/react-hook-form/field.tsx
 function RHFField(props) {
 	const { label, description, fieldProps, children, ...controllerProps } = props;
+	const id = useId();
 	const controller = useController(controllerProps);
-	const { fieldState } = controller;
+	const hasError = Boolean(controller.fieldState.error?.message);
+	const controlProps = {
+		id,
+		"aria-invalid": controller.fieldState.invalid,
+		"aria-describedby": [description != null && `${id}-description`, hasError && `${id}-error`].filter(Boolean).join(" ") || void 0
+	};
+	const child = children(controller, controlProps);
+	const control = isValidElement(child) && child.type !== Fragment ? child : null;
+	const controlId = control?.props.id ?? id;
+	const descriptionIds = [control?.props["aria-describedby"], controlProps["aria-describedby"]].join(" ").split(/\s+/).filter(Boolean);
+	const describedBy = [...new Set(descriptionIds)].join(" ") || void 0;
 	return /* @__PURE__ */ jsxs(Field, {
 		...fieldProps,
-		"data-invalid": fieldState.invalid,
+		"data-invalid": controller.fieldState.invalid,
+		"data-disabled": controller.field.disabled,
 		children: [
-			label != null && /* @__PURE__ */ jsx(Field.Label, { children: label }),
-			children(controller),
-			description != null && /* @__PURE__ */ jsx(Field.Description, { children: description }),
-			fieldState.invalid && /* @__PURE__ */ jsx(Field.Error, { errors: [fieldState.error] })
+			label != null && /* @__PURE__ */ jsx(Field.Label, {
+				htmlFor: controlId,
+				children: label
+			}),
+			control ? cloneElement(control, {
+				"id": controlId,
+				"aria-invalid": control.props["aria-invalid"] ?? controlProps["aria-invalid"],
+				"aria-describedby": describedBy
+			}) : child,
+			description != null && /* @__PURE__ */ jsx(Field.Description, {
+				id: `${id}-description`,
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx(Field.Error, {
+				id: `${id}-error`,
+				errors: [controller.fieldState.error]
+			})
 		]
 	});
 }

package/dist/react-hook-form/form.d.mts

@@ -1,3 +1,3 @@
-import { Form } from "@deftui/react";
 import { ComponentProps } from "react";
+import { Form } from "@deftui/react";
 export declare function RHFForm(props: ComponentProps<typeof Form>): import("react").JSX.Element;

package/dist/react-hook-form/form.mjs

@@ -1,5 +1,5 @@
-import { Form, cn } from "@deftui/react";
 import { jsx } from "react/jsx-runtime";
+import { Form, cn } from "@deftui/react";
 // src/react-hook-form/form.tsx
 function RHFForm(props) {
 	const { children, className, ...formProps } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/addons",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -14,6 +14,10 @@
     "**/*.css"
   ],
   "exports": {
+    "./modal": {
+      "types": "./dist/modal.d.mts",
+      "import": "./dist/modal.mjs"
+    },
     "./form": {
       "types": "./dist/form.d.mts",
       "import": "./dist/form.mjs"
@@ -36,14 +40,14 @@
     "fix": "vp check --fix"
   },
   "devDependencies": {
-    "@deftui/react": "^0.0.5",
+    "@deftui/react": "^0.1.0",
     "@tanstack/react-router": "^1.170.46",
     "@types/react": "^19.3.0",
     "react-hook-form": "^7.91.0",
     "vite-plus": "catalog:"
   },
   "peerDependencies": {
-    "@deftui/react": "^0.0.5",
+    "@deftui/react": "^0.1.0",
     "@tanstack/react-router": "^1",
     "react": "^19",
     "react-hook-form": "^7"