@pixpilot/formily-shadcn 1.15.2 → 1.17.0

package/dist/components/form-item/ConnectedFormItem.cjs

@@ -1,47 +1,15 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_BaseFormItem = require('./BaseFormItem.cjs');
+const require_map_form_item_props = require('./map-form-item-props.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
-let __formily_core = require("@formily/core");
-__formily_core = require_rolldown_runtime.__toESM(__formily_core);
 
 //#region src/components/form-item/ConnectedFormItem.tsx
 /**
 * FormItem component connected to Formily field state.
 * Automatically maps field validation state to component props.
 */
-const FormItem = (0, __formily_react.connect)(require_BaseFormItem.BaseFormItem, (0, __formily_react.mapProps)((props, field) => {
-	const schema = (0, __formily_react.useFieldSchema)();
-	if ((0, __formily_core.isVoidField)(field)) return {
-		label: field.title ?? props.label,
-		description: props.description ?? field.description,
-		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
-	};
-	const takeFeedbackStatus = () => {
-		if (field.validating) return void 0;
-		if (field.selfErrors?.length) return "error";
-		if (field.selfWarnings?.length) return "warning";
-		if (field.selfSuccesses?.length) return "success";
-	};
-	const takeFeedbackText = () => {
-		if (field.validating) return void 0;
-		if (props.feedbackText != null) return props.feedbackText;
-		if (field.selfErrors?.length) return field.selfErrors.join(", ");
-		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
-		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
-	};
-	let resolvedRequiredMark = props.requiredMark;
-	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
-	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
-	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
-	return {
-		label: props.label ?? field.title,
-		description: props.description ?? field.description,
-		feedbackStatus: takeFeedbackStatus(),
-		feedbackText: takeFeedbackText(),
-		requiredMark: resolvedRequiredMark
-	};
-}));
+const FormItem = (0, __formily_react.connect)(require_BaseFormItem.BaseFormItem, (0, __formily_react.mapProps)(require_map_form_item_props.mapFormItemProps));
 
 //#endregion
 exports.FormItem = FormItem;

package/dist/components/form-item/ConnectedFormItem.d.cts

@@ -1,13 +1,13 @@
 import { FormItemProps } from "./form-item-types.cjs";
-import * as react1246 from "react";
+import * as react1450 from "react";
 
 //#region src/components/form-item/ConnectedFormItem.d.ts
 /**
  * FormItem component connected to Formily field state.
  * Automatically maps field validation state to component props.
  */
-declare const FormItem: react1246.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
-  children?: react1246.ReactNode | undefined;
-}>, "ref"> & react1246.RefAttributes<unknown>>;
+declare const FormItem: react1450.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1450.ReactNode | undefined;
+}>, "ref"> & react1450.RefAttributes<unknown>>;
 //#endregion
 export { FormItem };

package/dist/components/form-item/ConnectedFormItem.d.ts

@@ -1,13 +1,13 @@
 import { FormItemProps } from "./form-item-types.js";
-import * as react1246 from "react";
+import * as react1450 from "react";
 
 //#region src/components/form-item/ConnectedFormItem.d.ts
 /**
  * FormItem component connected to Formily field state.
  * Automatically maps field validation state to component props.
  */
-declare const FormItem: react1246.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
-  children?: react1246.ReactNode | undefined;
-}>, "ref"> & react1246.RefAttributes<unknown>>;
+declare const FormItem: react1450.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1450.ReactNode | undefined;
+}>, "ref"> & react1450.RefAttributes<unknown>>;
 //#endregion
 export { FormItem };

package/dist/components/form-item/ConnectedFormItem.js

@@ -1,44 +1,13 @@
 import { BaseFormItem } from "./BaseFormItem.js";
-import { connect, mapProps, useFieldSchema } from "@formily/react";
-import { isVoidField } from "@formily/core";
+import { mapFormItemProps } from "./map-form-item-props.js";
+import { connect, mapProps } from "@formily/react";
 
 //#region src/components/form-item/ConnectedFormItem.tsx
 /**
 * FormItem component connected to Formily field state.
 * Automatically maps field validation state to component props.
 */
-const FormItem = connect(BaseFormItem, mapProps((props, field) => {
-	const schema = useFieldSchema();
-	if (isVoidField(field)) return {
-		label: field.title ?? props.label,
-		description: props.description ?? field.description,
-		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
-	};
-	const takeFeedbackStatus = () => {
-		if (field.validating) return void 0;
-		if (field.selfErrors?.length) return "error";
-		if (field.selfWarnings?.length) return "warning";
-		if (field.selfSuccesses?.length) return "success";
-	};
-	const takeFeedbackText = () => {
-		if (field.validating) return void 0;
-		if (props.feedbackText != null) return props.feedbackText;
-		if (field.selfErrors?.length) return field.selfErrors.join(", ");
-		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
-		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
-	};
-	let resolvedRequiredMark = props.requiredMark;
-	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
-	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
-	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
-	return {
-		label: props.label ?? field.title,
-		description: props.description ?? field.description,
-		feedbackStatus: takeFeedbackStatus(),
-		feedbackText: takeFeedbackText(),
-		requiredMark: resolvedRequiredMark
-	};
-}));
+const FormItem = connect(BaseFormItem, mapProps(mapFormItemProps));
 
 //#endregion
 export { FormItem };

package/dist/components/form-item/map-form-item-props.cjs

@@ -0,0 +1,50 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let __formily_core = require("@formily/core");
+__formily_core = require_rolldown_runtime.__toESM(__formily_core);
+
+//#region src/components/form-item/map-form-item-props.ts
+/**
+* Maps Formily field state onto FormItem props (label, description, validation
+* feedback, required mark).
+*
+* Shared by every decorator that presents a field the way FormItem does —
+* FormItem itself plus the overlay decorators — so they stay in step.
+* Runs inside `mapProps`, which is why calling hooks here is allowed.
+*/
+function mapFormItemProps(props, field) {
+	const schema = (0, __formily_react.useFieldSchema)();
+	if ((0, __formily_core.isVoidField)(field)) return {
+		label: field.title ?? props.label,
+		description: props.description ?? field.description,
+		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
+	};
+	const takeFeedbackStatus = () => {
+		if (field.validating) return void 0;
+		if (field.selfErrors?.length) return "error";
+		if (field.selfWarnings?.length) return "warning";
+		if (field.selfSuccesses?.length) return "success";
+	};
+	const takeFeedbackText = () => {
+		if (field.validating) return void 0;
+		if (props.feedbackText != null) return props.feedbackText;
+		if (field.selfErrors?.length) return field.selfErrors.join(", ");
+		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
+		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
+	};
+	let resolvedRequiredMark = props.requiredMark;
+	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
+	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
+	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
+	return {
+		label: props.label ?? field.title,
+		description: props.description ?? field.description,
+		feedbackStatus: takeFeedbackStatus(),
+		feedbackText: takeFeedbackText(),
+		requiredMark: resolvedRequiredMark
+	};
+}
+
+//#endregion
+exports.mapFormItemProps = mapFormItemProps;

package/dist/components/form-item/map-form-item-props.js

@@ -0,0 +1,47 @@
+import { useFieldSchema } from "@formily/react";
+import { isVoidField } from "@formily/core";
+
+//#region src/components/form-item/map-form-item-props.ts
+/**
+* Maps Formily field state onto FormItem props (label, description, validation
+* feedback, required mark).
+*
+* Shared by every decorator that presents a field the way FormItem does —
+* FormItem itself plus the overlay decorators — so they stay in step.
+* Runs inside `mapProps`, which is why calling hooks here is allowed.
+*/
+function mapFormItemProps(props, field) {
+	const schema = useFieldSchema();
+	if (isVoidField(field)) return {
+		label: field.title ?? props.label,
+		description: props.description ?? field.description,
+		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
+	};
+	const takeFeedbackStatus = () => {
+		if (field.validating) return void 0;
+		if (field.selfErrors?.length) return "error";
+		if (field.selfWarnings?.length) return "warning";
+		if (field.selfSuccesses?.length) return "success";
+	};
+	const takeFeedbackText = () => {
+		if (field.validating) return void 0;
+		if (props.feedbackText != null) return props.feedbackText;
+		if (field.selfErrors?.length) return field.selfErrors.join(", ");
+		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
+		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
+	};
+	let resolvedRequiredMark = props.requiredMark;
+	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
+	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
+	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
+	return {
+		label: props.label ?? field.title,
+		description: props.description ?? field.description,
+		feedbackStatus: takeFeedbackStatus(),
+		feedbackText: takeFeedbackText(),
+		requiredMark: resolvedRequiredMark
+	};
+}
+
+//#endregion
+export { mapFormItemProps };

package/dist/components/object-container/ObjectContainer.cjs

@@ -112,7 +112,7 @@ const ObjectContainer = ({ className, children, label, description, variant: var
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormItemContainer.FormItemContainer, {
 			...mergedContentProps,
 			as: __pixpilot_shadcn.CardContent,
-			className: (0, __pixpilot_shadcn.cn)("form-object-content", mergedContentProps.className, isFlat && "px-0"),
+			className: (0, __pixpilot_shadcn.cn)("grid form-object-content", mergedContentProps.className, isFlat && "px-0"),
 			children
 		})]
 	});

package/dist/components/object-container/ObjectContainer.js

@@ -109,7 +109,7 @@ const ObjectContainer = ({ className, children, label, description, variant: var
 		}), /* @__PURE__ */ jsx(FormItemContainer, {
 			...mergedContentProps,
 			as: CardContent,
-			className: cn("form-object-content", mergedContentProps.className, isFlat && "px-0"),
+			className: cn("grid form-object-content", mergedContentProps.className, isFlat && "px-0"),
 			children
 		})]
 	});

package/dist/components/overlay-common/OverlayFields.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/overlay-common/OverlayFields.tsx
+/**
+* Keeps an object's fields mounted while its overlay (dialog/popover) is closed.
+*
+* Formily destroys a field instance when its component unmounts, and the fields
+* inside a closed overlay are unmounted. Without this, `form.submit()` would
+* skip them entirely — a required field the user never opened would pass
+* validation. Rendering them in a hidden container keeps the field instances
+* alive so form-level validation still covers them.
+*
+* `hidden` (rather than unmounting) is the same approach ListItem uses to keep
+* array item fields attached while a row is collapsed.
+*/
+const OverlayFields = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	hidden: true,
+	"aria-hidden": "true",
+	children
+});
+OverlayFields.displayName = "OverlayFields";
+
+//#endregion
+exports.OverlayFields = OverlayFields;

package/dist/components/overlay-common/OverlayFields.d.cts

@@ -0,0 +1 @@
+import React from "react";

package/dist/components/overlay-common/OverlayFields.d.ts

@@ -0,0 +1 @@
+import React from "react";

package/dist/components/overlay-common/OverlayFields.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlay-common/OverlayFields.tsx
+/**
+* Keeps an object's fields mounted while its overlay (dialog/popover) is closed.
+*
+* Formily destroys a field instance when its component unmounts, and the fields
+* inside a closed overlay are unmounted. Without this, `form.submit()` would
+* skip them entirely — a required field the user never opened would pass
+* validation. Rendering them in a hidden container keeps the field instances
+* alive so form-level validation still covers them.
+*
+* `hidden` (rather than unmounting) is the same approach ListItem uses to keep
+* array item fields attached while a row is collapsed.
+*/
+const OverlayFields = ({ children }) => /* @__PURE__ */ jsx("div", {
+	hidden: true,
+	"aria-hidden": "true",
+	children
+});
+OverlayFields.displayName = "OverlayFields";
+
+//#endregion
+export { OverlayFields };

package/dist/components/overlay-common/OverlayTrigger.cjs

@@ -0,0 +1,27 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/overlay-common/OverlayTrigger.tsx
+/**
+* Button that opens an object overlay (dialog or popover).
+*/
+const OverlayTrigger = ({ label, icon, invalid, className,...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+	type: "button",
+	variant: "outline",
+	"aria-invalid": invalid === true ? true : void 0,
+	...rest,
+	className: (0, __pixpilot_shadcn.cn)("form-object-trigger w-full justify-between gap-4 font-normal", invalid === true && "border-destructive text-destructive", className),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "min-w-0 truncate text-left",
+		children: label
+	}), icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "size-4 shrink-0 opacity-50" })]
+});
+OverlayTrigger.displayName = "OverlayTrigger";
+
+//#endregion
+exports.OverlayTrigger = OverlayTrigger;

package/dist/components/overlay-common/OverlayTrigger.d.cts

@@ -0,0 +1,15 @@
+import { SyncReactNode } from "../../types/react.cjs";
+import React from "react";
+import { Button } from "@pixpilot/shadcn";
+
+//#region src/components/overlay-common/OverlayTrigger.d.ts
+interface OverlayTriggerProps extends Omit<React.ComponentProps<typeof Button>, 'children'> {
+  /** Text of the trigger button. */
+  label?: SyncReactNode;
+  /** Icon rendered at the trailing edge. Defaults to a chevron. */
+  icon?: React.ReactNode;
+  /** Renders the trigger in an error state. */
+  invalid?: boolean;
+}
+//#endregion
+export { OverlayTriggerProps };

package/dist/components/overlay-common/OverlayTrigger.d.ts

@@ -0,0 +1,15 @@
+import { SyncReactNode } from "../../types/react.js";
+import React from "react";
+import { Button } from "@pixpilot/shadcn";
+
+//#region src/components/overlay-common/OverlayTrigger.d.ts
+interface OverlayTriggerProps extends Omit<React.ComponentProps<typeof Button>, 'children'> {
+  /** Text of the trigger button. */
+  label?: SyncReactNode;
+  /** Icon rendered at the trailing edge. Defaults to a chevron. */
+  icon?: React.ReactNode;
+  /** Renders the trigger in an error state. */
+  invalid?: boolean;
+}
+//#endregion
+export { OverlayTriggerProps };

package/dist/components/overlay-common/OverlayTrigger.js

@@ -0,0 +1,23 @@
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@pixpilot/shadcn";
+
+//#region src/components/overlay-common/OverlayTrigger.tsx
+/**
+* Button that opens an object overlay (dialog or popover).
+*/
+const OverlayTrigger = ({ label, icon, invalid, className,...rest }) => /* @__PURE__ */ jsxs(Button, {
+	type: "button",
+	variant: "outline",
+	"aria-invalid": invalid === true ? true : void 0,
+	...rest,
+	className: cn("form-object-trigger w-full justify-between gap-4 font-normal", invalid === true && "border-destructive text-destructive", className),
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate text-left",
+		children: label
+	}), icon ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 opacity-50" })]
+});
+OverlayTrigger.displayName = "OverlayTrigger";
+
+//#endregion
+export { OverlayTrigger };

package/dist/components/overlay-common/constants.cjs

@@ -0,0 +1,10 @@
+
+//#region src/components/overlay-common/constants.ts
+/**
+* Fallback noun for the DialogItem / PopoverItem trigger when the field has
+* no title — e.g. "Add item" / "Edit item".
+*/
+const DEFAULT_TRIGGER_NOUN = "item";
+
+//#endregion
+exports.DEFAULT_TRIGGER_NOUN = DEFAULT_TRIGGER_NOUN;

package/dist/components/overlay-common/constants.js

@@ -0,0 +1,9 @@
+//#region src/components/overlay-common/constants.ts
+/**
+* Fallback noun for the DialogItem / PopoverItem trigger when the field has
+* no title — e.g. "Add item" / "Edit item".
+*/
+const DEFAULT_TRIGGER_NOUN = "item";
+
+//#endregion
+export { DEFAULT_TRIGGER_NOUN };

package/dist/components/overlay-common/index.cjs

@@ -0,0 +1,5 @@
+const require_constants = require('./constants.cjs');
+const require_is_empty_field_value = require('./is-empty-field-value.cjs');
+const require_OverlayFields = require('./OverlayFields.cjs');
+const require_OverlayTrigger = require('./OverlayTrigger.cjs');
+const require_use_overlay = require('./use-overlay.cjs');

package/dist/components/overlay-common/index.d.cts

@@ -0,0 +1,4 @@
+import { OverlayBaseSlots, OverlayProps } from "./overlay-types.cjs";
+import "./OverlayFields.cjs";
+import { OverlayTriggerProps } from "./OverlayTrigger.cjs";
+import "./use-overlay.cjs";

package/dist/components/overlay-common/index.d.ts

@@ -0,0 +1,4 @@
+import { OverlayBaseSlots, OverlayProps } from "./overlay-types.js";
+import "./OverlayFields.js";
+import { OverlayTriggerProps } from "./OverlayTrigger.js";
+import "./use-overlay.js";

package/dist/components/overlay-common/index.js

@@ -0,0 +1,5 @@
+import { DEFAULT_TRIGGER_NOUN } from "./constants.js";
+import { isEmptyFieldValue } from "./is-empty-field-value.js";
+import { OverlayFields } from "./OverlayFields.js";
+import { OverlayTrigger } from "./OverlayTrigger.js";
+import { useOverlay } from "./use-overlay.js";

package/dist/components/overlay-common/is-empty-field-value.cjs

@@ -0,0 +1,23 @@
+
+//#region src/components/overlay-common/is-empty-field-value.ts
+/**
+* Whether a field value holds nothing the user would consider data.
+*
+* Used to pick the trigger verb: an object with no data reads "Add <title>",
+* one with data reads "Edit <title>".
+*
+* Comparing `value` against `initialValue` does not work here: Formily gives an
+* object field an initial value of `{}` while its `initialValue` stays
+* undefined, so an untouched object would always look changed. Empty strings
+* count as empty because clearing an input leaves `''` behind, but `false` and
+* `0` are real values.
+*/
+function isEmptyFieldValue(value) {
+	if (value == null || value === "") return true;
+	if (Array.isArray(value)) return value.every(isEmptyFieldValue);
+	if (typeof value === "object") return Object.values(value).every(isEmptyFieldValue);
+	return false;
+}
+
+//#endregion
+exports.isEmptyFieldValue = isEmptyFieldValue;

package/dist/components/overlay-common/is-empty-field-value.js

@@ -0,0 +1,22 @@
+//#region src/components/overlay-common/is-empty-field-value.ts
+/**
+* Whether a field value holds nothing the user would consider data.
+*
+* Used to pick the trigger verb: an object with no data reads "Add <title>",
+* one with data reads "Edit <title>".
+*
+* Comparing `value` against `initialValue` does not work here: Formily gives an
+* object field an initial value of `{}` while its `initialValue` stays
+* undefined, so an untouched object would always look changed. Empty strings
+* count as empty because clearing an input leaves `''` behind, but `false` and
+* `0` are real values.
+*/
+function isEmptyFieldValue(value) {
+	if (value == null || value === "") return true;
+	if (Array.isArray(value)) return value.every(isEmptyFieldValue);
+	if (typeof value === "object") return Object.values(value).every(isEmptyFieldValue);
+	return false;
+}
+
+//#endregion
+export { isEmptyFieldValue };

package/dist/components/overlay-common/overlay-types.d.cts

@@ -0,0 +1,27 @@
+import { SyncReactNode } from "../../types/react.cjs";
+import React from "react";
+
+//#region src/components/overlay-common/overlay-types.d.ts
+
+/**
+ * The overlay itself — the `dialog` prop on DialogItem and the `popover` prop
+ * on PopoverItem.
+ *
+ * `TSlots` differs per overlay (only a dialog has a footer), so each component
+ * supplies its own slot map.
+ */
+interface OverlayProps<TSlots> {
+  /** Heading inside the overlay. Defaults to the field label. */
+  title?: SyncReactNode;
+  /** Description inside the overlay. Defaults to the field description. */
+  description?: SyncReactNode;
+  /** Props for the overlay's internal parts. */
+  slots?: TSlots;
+}
+/** Slots every overlay has, whatever kind it is. */
+interface OverlayBaseSlots {
+  header?: React.ComponentProps<'div'>;
+  body?: React.ComponentProps<'div'>;
+}
+//#endregion
+export { OverlayBaseSlots, OverlayProps };

package/dist/components/overlay-common/overlay-types.d.ts

@@ -0,0 +1,27 @@
+import { SyncReactNode } from "../../types/react.js";
+import React from "react";
+
+//#region src/components/overlay-common/overlay-types.d.ts
+
+/**
+ * The overlay itself — the `dialog` prop on DialogItem and the `popover` prop
+ * on PopoverItem.
+ *
+ * `TSlots` differs per overlay (only a dialog has a footer), so each component
+ * supplies its own slot map.
+ */
+interface OverlayProps<TSlots> {
+  /** Heading inside the overlay. Defaults to the field label. */
+  title?: SyncReactNode;
+  /** Description inside the overlay. Defaults to the field description. */
+  description?: SyncReactNode;
+  /** Props for the overlay's internal parts. */
+  slots?: TSlots;
+}
+/** Slots every overlay has, whatever kind it is. */
+interface OverlayBaseSlots {
+  header?: React.ComponentProps<'div'>;
+  body?: React.ComponentProps<'div'>;
+}
+//#endregion
+export { OverlayBaseSlots, OverlayProps };