@bysages/react 0.4.4 → 0.6.0

package/dist/components/command/index.mjs

@@ -1,15 +1,15 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Dialog as Dialog$1 } from "../dialog/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog } from "@ark-ui/react/dialog";
-//#region src/components/command/index.tsx
-function CommandImpl({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }) {
+// src/components/command/index.tsx
+function CommandImpl({ portal = true, items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
 	const hostId = useElementId("command", { id });
@@ -72,78 +72,80 @@ function CommandImpl({ items = [], placeholder, open, autoFilter = true, inputVa
 		id: `${hostId}:dialog`,
 		open: currentOpen,
 		onOpenChange: (details) => setOpen(details.open),
-		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("div", {
-				"data-scope": "command",
-				"data-part": "positioner",
-				children: /* @__PURE__ */ jsx(Dialog.Content, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("div", {
-						"data-scope": "command",
-						"data-part": "content",
-						"aria-label": messages.command.palette,
-						children: /* @__PURE__ */ jsxs(Combobox.Root, {
-							id: `${hostId}:combobox`,
-							collection,
-							inputValue,
-							open: listOpen,
-							onOpenChange: (details) => setListOpen(details.open),
-							inputBehavior: "autohighlight",
-							loopFocus: true,
-							onInputValueChange: (details) => {
-								setFieldText(details.inputValue);
-								if (autoFilter) filter(details.inputValue);
-								onInputValueChange?.(details.inputValue);
-							},
-							onValueChange: (details) => {
-								const [first] = details.value;
-								if (first == null) return;
-								onSelect?.(first);
-								setOpen(false);
-							},
-							children: [/* @__PURE__ */ jsx(Combobox.Input, {
-								asChild: true,
-								children: /* @__PURE__ */ jsx("input", {
-									type: "text",
-									placeholder: resolvedPlaceholder,
-									"aria-label": resolvedPlaceholder,
-									"data-scope": "command",
-									"data-part": "input"
-								})
-							}), /* @__PURE__ */ jsx(Combobox.Content, {
-								asChild: true,
-								children: /* @__PURE__ */ jsxs("div", {
-									"data-scope": "command",
-									"data-part": "list",
-									children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
-										asChild: true,
-										children: /* @__PURE__ */ jsxs("div", {
-											"data-scope": "command",
-											"data-part": "group",
-											children: [/* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
-												asChild: true,
-												children: /* @__PURE__ */ jsx("div", {
-													"data-scope": "command",
-													"data-part": "group-label",
-													children: group
-												})
-											}), entries.map(row)]
-										})
-									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs(FloatingPortal, {
+			portal,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-scope": "command",
+					"data-part": "positioner",
+					children: /* @__PURE__ */ jsx(Dialog.Content, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("div", {
+							"data-scope": "command",
+							"data-part": "content",
+							"aria-label": messages.command.palette,
+							children: /* @__PURE__ */ jsxs(Combobox.Root, {
+								id: `${hostId}:combobox`,
+								collection,
+								inputValue,
+								open: listOpen,
+								onOpenChange: (details) => setListOpen(details.open),
+								inputBehavior: "autohighlight",
+								loopFocus: true,
+								onInputValueChange: (details) => {
+									setFieldText(details.inputValue);
+									if (autoFilter) filter(details.inputValue);
+									onInputValueChange?.(details.inputValue);
+								},
+								onValueChange: (details) => {
+									const [first] = details.value;
+									if (first == null) return;
+									onSelect?.(first);
+									setOpen(false);
+								},
+								children: [/* @__PURE__ */ jsx(Combobox.Input, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("input", {
+										type: "text",
+										placeholder: resolvedPlaceholder,
+										"aria-label": resolvedPlaceholder,
 										"data-scope": "command",
-										"data-part": "empty",
-										children: resolvedEmptyText
-									}) : null]
-								})
-							})]
+										"data-part": "input"
+									})
+								}), /* @__PURE__ */ jsx(Combobox.Content, {
+									asChild: true,
+									children: /* @__PURE__ */ jsxs("div", {
+										"data-scope": "command",
+										"data-part": "list",
+										children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
+											asChild: true,
+											children: /* @__PURE__ */ jsxs("div", {
+												"data-scope": "command",
+												"data-part": "group",
+												children: [/* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
+													asChild: true,
+													children: /* @__PURE__ */ jsx("div", {
+														"data-scope": "command",
+														"data-part": "group-label",
+														children: group
+													})
+												}), entries.map(row)]
+											})
+										}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+											"data-scope": "command",
+											"data-part": "empty",
+											children: resolvedEmptyText
+										}) : null]
+									})
+								})]
+							})
 						})
 					})
 				})
-			})
-		})] })
+			})]
+		})
 	});
 }
 const Command = Object.assign(CommandImpl, Dialog$1);
-//#endregion
 export { Command };

package/dist/components/comment/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/comment/index.d.ts
 /**
  * A voice on the record: the portrait hangs left (the `avatar` prop),
  * the body carries the byline from `author` and `datetime`, the ink is
@@ -17,4 +16,4 @@ declare function CommentImpl({ author, datetime, avatar, actions, children, ...r
 export declare const Comment: typeof CommentImpl & {
   Root: typeof CommentImpl;
 };
-//#endregion
+export {};

package/dist/components/comment/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/comment/index.tsx
+// src/components/comment/index.tsx
 function CommentImpl({ author, datetime, avatar, actions, children, ...rest }) {
 	injectComponentStyle("comment");
 	return /* @__PURE__ */ jsxs("article", {
@@ -45,5 +45,4 @@ function CommentImpl({ author, datetime, avatar, actions, children, ...rest }) {
 	});
 }
 const Comment = withSelfRoot(CommentImpl);
-//#endregion
 export { Comment };

package/dist/components/config-provider/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/config-provider/index.d.ts
 /** The four density tiers the token layer's `[data-density]` selectors
  * name — whitespace and control heights compress, readability never
  * does. */
@@ -49,4 +48,4 @@ declare function ConfigProviderImpl({ density, scene, accent, dir, locale, messa
 export declare const ConfigProvider: typeof ConfigProviderImpl & {
   Root: typeof ConfigProviderImpl;
 };
-//#endregion
+export {};

package/dist/components/config-provider/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-//#region src/components/config-provider/index.tsx
+// src/components/config-provider/index.tsx
 const ConfigContextImpl = createContext({});
 /** The nearest provider's snapshot, or an empty one when no provider
 * wraps the caller — the hook the date and format families will consume
@@ -40,5 +40,4 @@ function ConfigProviderImpl({ density, scene, accent, dir, locale, messages, chi
 	});
 }
 const ConfigProvider = withSelfRoot(ConfigProviderImpl);
-//#endregion
 export { ConfigProvider, useConfig };

package/dist/components/container/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/container/index.d.ts
 /** The reading frame: content held to a measure and centered on the
  * page. The sizes name typographic measures, not breakpoints — the page
  * owns its edges, the container only owns how long a line of ink runs. */
@@ -13,4 +12,4 @@ declare function ContainerImpl({ size, padding, ...rest }: ContainerProps): impo
 export declare const Container: typeof ContainerImpl & {
   Root: typeof ContainerImpl;
 };
-//#endregion
+export {};

package/dist/components/container/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/container/index.tsx
+// src/components/container/index.tsx
 function ContainerImpl({ size = "readable", padding = true, ...rest }) {
 	injectComponentStyle("container");
 	return /* @__PURE__ */ jsx("div", {
@@ -13,5 +13,4 @@ function ContainerImpl({ size = "readable", padding = true, ...rest }) {
 	});
 }
 const Container = withSelfRoot(ContainerImpl);
-//#endregion
 export { Container };

package/dist/components/data-view/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/data-view/index.d.ts
 export interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
   items: unknown[];
   /** Ledger rows or a lattice of cards. */
@@ -18,4 +17,4 @@ declare function DataViewImpl({ items, layout, pageSize, renderItem, header, ...
 export declare const DataView: typeof DataViewImpl & {
   Root: typeof DataViewImpl;
 };
-//#endregion
+export {};

package/dist/components/data-view/index.mjs

@@ -1,10 +1,10 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { Pagination } from "../pagination/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-//#region src/components/data-view/index.tsx
+// src/components/data-view/index.tsx
 /** One vessel, two layouts: the caller renders each record through
 * renderItem, the view lays the records out as a ledger or a lattice
 * and — when a page size is given — pages them with the pagination
@@ -64,5 +64,4 @@ function DataViewImpl({ items, layout = "list", pageSize, renderItem, header, ..
 	});
 }
 const DataView = withSelfRoot(DataViewImpl);
-//#endregion
 export { DataView };

package/dist/components/date-input/index.d.mts

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps } from "react";
 import { DateInput as DateInput$1, DateInputDateValue, DateInputFocusChangeDetails, DateInputValueChangeDetails } from "@ark-ui/react/date-input";
-//#region src/components/date-input/index.d.ts
 type DateInputRootProps = ComponentProps<typeof DateInput$1.Root> & {
   /** One rung of the control-height ladder for the segmented field. */
   size?: "sm" | "md" | "lg";
@@ -28,5 +27,4 @@ declare function DateInputFacade(props: DateInputFacadeProps): import("react").J
 export declare const DateInput: typeof DateInputFacade & Omit<typeof DateInput$1, "Root"> & {
   Root: typeof DateInputRoot;
 };
-//#endregion
 export type { DateInputFocusChangeDetails, DateInputValueChangeDetails };

package/dist/components/date-input/index.mjs

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateInput as DateInput$1 } from "@ark-ui/react/date-input";
-//#region src/components/date-input/index.tsx
+// src/components/date-input/index.tsx
 function DateInputRoot(props) {
 	injectComponentStyle("date-input");
 	const id = useElementId("date-input", props);
@@ -41,5 +41,4 @@ const DateInput = Object.assign(DateInputFacade, {
 	...DateInput$1,
 	Root: DateInputRoot
 });
-//#endregion
 export { DateInput };

package/dist/components/date-picker/index.d.mts

@@ -1,6 +1,6 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { CSSProperties, ComponentProps } from "react";
 import { DatePicker as DatePicker$1, DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails, DateValue } from "@ark-ui/react/date-picker";
-//#region src/components/date-picker/index.d.ts
 type DatePickerRootProps$1 = ComponentProps<typeof DatePicker$1.Root> & {
   /** One rung of the control-height ladder for the field row. */
   size?: "sm" | "md" | "lg";
@@ -14,6 +14,8 @@ declare function DatePickerRoot(props: DatePickerRootProps$1): import("react").J
  * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
 type DatePickerFacadeValue = DateValue | DateValue[];
 type DatePickerFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: DatePickerFacadeValue;
   defaultValue?: DatePickerFacadeValue;
   disabled?: boolean;
@@ -28,9 +30,13 @@ type DatePickerFacadeProps = {
 };
 /** The complete picker behind one date: the field opens a single day grid,
  * while ranges, multiple selection, and custom views remain anatomy work. */
+declare const DatePickerPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & DatePicker$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function DatePickerFacade(props: DatePickerFacadeProps): import("react").JSX.Element;
-export declare const DatePicker: typeof DatePickerFacade & Omit<typeof DatePicker$1, "Root"> & {
+export declare const DatePicker: typeof DatePickerFacade & Omit<typeof DatePicker$1, "Root" | "Positioner"> & {
+  Positioner: typeof DatePickerPositioner;
   Root: typeof DatePickerRoot;
 };
-//#endregion
 export type { DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails };

package/dist/components/date-picker/index.mjs

@@ -1,9 +1,10 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as definePositioner, t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
-//#region src/components/date-picker/index.tsx
+// src/components/date-picker/index.tsx
 function DatePickerRoot(props) {
 	injectComponentStyle("date-picker");
 	const id = useElementId("date-picker", props);
@@ -20,8 +21,9 @@ function toDatePickerValue(value) {
 }
 /** The complete picker behind one date: the field opens a single day grid,
 * while ranges, multiple selection, and custom views remain anatomy work. */
+const DatePickerPositioner = definePositioner(DatePicker$1.Positioner);
 function DatePickerFacade(props) {
-	const { value, defaultValue, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	const { portal = false, value, defaultValue, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
 	return /* @__PURE__ */ jsxs(DatePickerRoot, {
 		size,
 		defaultValue: toDatePickerValue(defaultValue),
@@ -39,32 +41,35 @@ function DatePickerFacade(props) {
 				width: 16,
 				height: 16
 			}) })] }),
-			/* @__PURE__ */ jsx(DatePicker$1.Positioner, { children: /* @__PURE__ */ jsx(DatePicker$1.Content, { children: /* @__PURE__ */ jsx(DatePicker$1.View, {
-				view: "day",
-				children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
-					/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: iconNode("chevron-left", {
-						width: 14,
-						height: 14
-					}) }),
-					/* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: /* @__PURE__ */ jsx(DatePicker$1.RangeText, {}) }),
-					/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: iconNode("chevron-right", {
-						width: 14,
-						height: 14
-					}) })
-				] }), /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: dp.weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
-					"aria-label": day.long,
-					children: day.narrow
-				}, index)) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: dp.weeks.map((week, index) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
-					value: day,
-					children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
-				}, dayIndex)) }, index)) })] })] }) })
-			}) }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(DatePicker$1.Positioner, { children: /* @__PURE__ */ jsx(DatePicker$1.Content, { children: /* @__PURE__ */ jsx(DatePicker$1.View, {
+					view: "day",
+					children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
+						/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: iconNode("chevron-left", {
+							width: 14,
+							height: 14
+						}) }),
+						/* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: /* @__PURE__ */ jsx(DatePicker$1.RangeText, {}) }),
+						/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: iconNode("chevron-right", {
+							width: 14,
+							height: 14
+						}) })
+					] }), /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: dp.weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
+						"aria-label": day.long,
+						children: day.narrow
+					}, index)) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: dp.weeks.map((week, index) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
+						value: day,
+						children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
+					}, dayIndex)) }, index)) })] })] }) })
+				}) }) })
+			})
 		]
 	});
 }
 const DatePicker = Object.assign(DatePickerFacade, {
 	...DatePicker$1,
+	Positioner: DatePickerPositioner,
 	Root: DatePickerRoot
 });
-//#endregion
 export { DatePicker };

package/dist/components/deferred-content/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/deferred-content/index.d.ts
 export interface DeferredContentProps extends HTMLAttributes<HTMLDivElement> {
   /** How much of the placeholder must be visible before the content
    * mounts, from 0 (any pixel) to 1 (the whole box). */
@@ -16,4 +15,4 @@ declare function DeferredContentImpl({ threshold, placeholder, children, ...rest
 export declare const DeferredContent: typeof DeferredContentImpl & {
   Root: typeof DeferredContentImpl;
 };
-//#endregion
+export {};

package/dist/components/deferred-content/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-//#region src/components/deferred-content/index.tsx
+// src/components/deferred-content/index.tsx
 /** Content that waits to be worth rendering: the slot stays off the
 * tree until the placeholder scrolls near the viewport, then mounts
 * once and stays. The placeholder is drawn by the caller, so the late
@@ -32,5 +32,4 @@ function DeferredContentImpl({ threshold = .2, placeholder, children, ...rest })
 	});
 }
 const DeferredContent = withSelfRoot(DeferredContentImpl);
-//#endregion
 export { DeferredContent };

package/dist/components/descriptions/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/descriptions/index.d.ts
 /** Simple term/detail records for the callable facade. */
 export interface DescriptionsItemData {
   term: string;
@@ -38,4 +37,4 @@ export declare const Descriptions: typeof DescriptionsRoot & {
     displayName: string;
   };
 };
-//#endregion
+export {};

package/dist/components/descriptions/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/descriptions/index.tsx
+// src/components/descriptions/index.tsx
 function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1, items, children, ...rest }) {
 	injectComponentStyle("descriptions");
 	return /* @__PURE__ */ jsx("dl", {
@@ -51,5 +51,4 @@ const Descriptions = Object.assign(withSelfRoot(DescriptionsRoot), {
 	Term,
 	Detail
 });
-//#endregion
 export { Descriptions, DescriptionsRoot };

package/dist/components/dialog/index.d.mts

@@ -1,7 +1,40 @@
-import { ReactNode } from "react";
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
+import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/react/dialog";
-//#region src/components/dialog/index.d.ts
+export type DialogSize = "sm" | "md" | "lg" | "xl";
+interface DialogPartProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+/** A semantic section for the dialog's title and description. */
+declare function Header({ children, ...rest }: DialogPartProps): import("react").JSX.Element;
+declare namespace Header {
+  var displayName: string;
+}
+/** The dialog's principal content; it may shrink inside narrow sheets. */
+declare function Body({ children, ...rest }: DialogPartProps): import("react").JSX.Element;
+declare namespace Body {
+  var displayName: string;
+}
+/** The dialog's action row; actions read from start to end. */
+declare function Footer({ children, ...rest }: DialogPartProps): import("react").JSX.Element;
+declare namespace Footer {
+  var displayName: string;
+}
+/** The semantic sheet: `size` names one content measure instead of a caller
+ * overriding the sheet's max-width for every dialog. */
+interface DialogContentProps extends ComponentProps<typeof Dialog$1.Content> {
+  size?: DialogSize;
+}
+declare function DialogContent({ size, ...rest }: DialogContentProps): import("react").JSX.Element;
+/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
+ * in on elevation, the backdrop fades, and nested overlays stack through
+ * the shared z-index ladder. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Title, Description, CloseTrigger —
+ * plus the Header, Body, and Footer anatomy parts. */
+declare function DialogRoot(props: ComponentProps<typeof Dialog$1.Root>): import("react").JSX.Element;
 export interface DialogFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger?: string;
@@ -9,14 +42,25 @@ export interface DialogFacadeProps {
   label?: string;
   description?: string;
   disabled?: boolean;
+  size?: DialogSize;
   children?: ReactNode;
   onOpenChange?: (open: boolean) => void;
 }
-declare function DialogFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DialogFacadeProps): import("react").JSX.Element;
+declare const DialogPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Dialog$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function DialogFacade({ portal, open, defaultOpen, trigger, content, label, description, disabled, size, children, onOpenChange }: DialogFacadeProps): import("react").JSX.Element;
 declare namespace DialogFacade {
   var displayName: string;
 }
-type DialogParts = typeof Dialog$1;
+type DialogParts = Omit<typeof Dialog$1, "Root" | "Content" | "Positioner"> & {
+  Positioner: typeof DialogPositioner;
+  Root: typeof DialogRoot;
+  Content: typeof DialogContent;
+  Header: typeof Header;
+  Body: typeof Body;
+  Footer: typeof Footer;
+};
 export declare const Dialog: typeof DialogFacade & DialogParts;
-//#endregion
 export type { DialogOpenChangeDetails };