@bysages/react 0.4.4 → 0.6.0

package/dist/components/cascade-select/index.mjs

@@ -1,21 +1,21 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
+import { t as Input } from "../../input-YRjehBhU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
 import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/react";
-//#region src/components/cascade-select/index.tsx
+// src/components/cascade-select/index.tsx
 const chevronDown = iconNode("chevron-down");
 const chevronRight = iconNode("chevron-right");
 const checkIcon = iconNode("check");
-function CascadeSelectImpl({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
+function CascadeSelectImpl({ portal = false, value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("cascade-select");
 	const messages = useComponentMessages();
 	const id = useElementId("cascade-select", rest);
@@ -169,42 +169,44 @@ function CascadeSelectImpl({ value, data, placeholder = "Select…", highlightTr
 					children: chevronDown
 				})]
 			})
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
-			...api.getPositionerProps(),
-			children: /* @__PURE__ */ jsxs("div", {
-				...api.getContentProps(),
-				"data-size": size,
-				children: [filterable ? /* @__PURE__ */ jsx("div", {
-					"data-scope": "cascade-select",
-					"data-part": "search",
-					children: /* @__PURE__ */ jsx(Input, {
-						size: "sm",
-						value: query,
-						onValueChange: setQuery,
-						placeholder: messages.select.filter,
-						"aria-label": messages.select.filter
-					})
-				}) : null, /* @__PURE__ */ jsx("div", {
-					"data-scope": "cascade-select",
-					"data-part": "corridor",
-					"data-flow": filtering ? "flat" : "columns",
-					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+		}), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx("div", {
+				...api.getPositionerProps(),
+				children: /* @__PURE__ */ jsxs("div", {
+					...api.getContentProps(),
+					"data-size": size,
+					children: [filterable ? /* @__PURE__ */ jsx("div", {
 						"data-scope": "cascade-select",
-						"data-part": "empty",
-						children: "Nothing matches"
-					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
-						type: "button",
+						"data-part": "search",
+						children: /* @__PURE__ */ jsx(Input, {
+							size: "sm",
+							value: query,
+							onValueChange: setQuery,
+							placeholder: messages.select.filter,
+							"aria-label": messages.select.filter
+						})
+					}) : null, /* @__PURE__ */ jsx("div", {
 						"data-scope": "cascade-select",
-						"data-part": "match",
-						"data-selected": isSelected(hit.path) || void 0,
-						onClick: () => pickMatch(hit.path),
-						children: hit.labels.join(" / ")
-					}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])
-				})]
+						"data-part": "corridor",
+						"data-flow": filtering ? "flat" : "columns",
+						children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+							"data-scope": "cascade-select",
+							"data-part": "empty",
+							children: "Nothing matches"
+						}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-scope": "cascade-select",
+							"data-part": "match",
+							"data-selected": isSelected(hit.path) || void 0,
+							onClick: () => pickMatch(hit.path),
+							children: hit.labels.join(" / ")
+						}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])
+					})]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 const CascadeSelect = withSelfRoot(CascadeSelectImpl);
-//#endregion
 export { CascadeSelect };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
-//#region src/components/checkbox/index.d.ts
 type CheckboxRootProps = ComponentProps<typeof Checkbox$1.Root> & {
   /** One rung for the control's box: the tick scales with it. */
   size?: "sm" | "md" | "lg";
@@ -31,4 +30,4 @@ type CheckboxParts = Omit<typeof Checkbox$1, "Root"> & {
   Root: typeof CheckboxRoot;
 };
 export declare const Checkbox: typeof CheckboxFacade & CheckboxParts;
-//#endregion
+export {};

package/dist/components/checkbox/index.mjs

@@ -1,9 +1,9 @@
-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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
-//#region src/components/checkbox/index.tsx
+// src/components/checkbox/index.tsx
 function CheckboxRoot(props) {
 	const id = useElementId("checkbox", props);
 	const { size = "md", ...rest } = props;
@@ -37,5 +37,4 @@ const Checkbox = Object.assign(CheckboxFacade, {
 	Root: CheckboxRoot
 });
 injectComponentStyle("checkbox");
-//#endregion
 export { Checkbox };

package/dist/components/checkbox-group/index.d.mts

@@ -1,6 +1,5 @@
 import { Checkbox } from "../checkbox/index.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/checkbox-group/index.d.ts
 export interface CheckboxOption {
   label: string;
   value: string;
@@ -27,4 +26,4 @@ export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function CheckboxGroupImpl({ value, defaultValue, options, layout, size, invalid, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
 export declare const CheckboxGroup: typeof CheckboxGroupImpl & typeof Checkbox;
-//#endregion
+export {};

package/dist/components/checkbox-group/index.mjs

@@ -1,11 +1,11 @@
-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 { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 import { Checkbox } from "@ark-ui/react/checkbox";
-//#region src/components/checkbox-group/index.tsx
+// src/components/checkbox-group/index.tsx
 const checkIcon = iconNode("check");
 /**
 * One question, many answers: a labelled stack (or row) of the seal-cut
@@ -57,5 +57,4 @@ function CheckboxGroupImpl({ value, defaultValue, options, layout = "vertical",
 	});
 }
 const CheckboxGroup = Object.assign(CheckboxGroupImpl, Checkbox$1);
-//#endregion
 export { CheckboxGroup };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/chip/index.d.ts
 /** A counting coin: the numeric value, capped at `max` with an ellipsis
  * of the remainder ("99+"). */
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
@@ -12,4 +11,4 @@ declare function ChipImpl({ value, max, tone, variant, ...rest }: ChipProps): im
 export declare const Chip: typeof ChipImpl & {
   Root: typeof ChipImpl;
 };
-//#endregion
+export {};

package/dist/components/chip/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/chip/index.tsx
+// src/components/chip/index.tsx
 function ChipImpl({ value, max, tone = "ink", variant = "solid", ...rest }) {
 	injectComponentStyle("chip");
 	const text = max != null && value > max ? `${max}+` : String(value);
@@ -15,5 +15,4 @@ function ChipImpl({ value, max, tone = "ink", variant = "solid", ...rest }) {
 	});
 }
 const Chip = withSelfRoot(ChipImpl);
-//#endregion
 export { Chip };

package/dist/components/client-only/index.d.mts

@@ -1,7 +1,5 @@
 import { ClientOnlyProps } from "@ark-ui/react/client-only";
-//#region src/components/client-only/index.d.ts
 export declare const ClientOnly: ((props: import("@ark-ui/react/client-only").ClientOnlyProps) => React.ReactNode) & {
   Root: (props: import("@ark-ui/react/client-only").ClientOnlyProps) => React.ReactNode;
 };
-//#endregion
 export type { ClientOnlyProps };

package/dist/components/client-only/index.mjs

@@ -1,6 +1,5 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { ClientOnly as ClientOnly$1 } from "@ark-ui/react/client-only";
-//#region src/components/client-only/index.tsx
+// src/components/client-only/index.tsx
 const ClientOnly = withSelfRoot(ClientOnly$1);
-//#endregion
 export { ClientOnly };

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

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps, HTMLAttributes } from "react";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
-//#region src/components/clipboard/index.d.ts
 /** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
  * field beside an icon-sized copy trigger whose ink turns bamboo while the
  * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
@@ -27,4 +26,4 @@ declare function ClipboardFacade(props: ClipboardFacadeProps): import("react").J
 export declare const Clipboard: typeof ClipboardFacade & Omit<typeof Clipboard$1, "Root"> & {
   Root: typeof ClipboardRoot;
 };
-//#endregion
+export {};

package/dist/components/clipboard/index.mjs

@@ -1,9 +1,9 @@
-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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
-//#region src/components/clipboard/index.tsx
+// src/components/clipboard/index.tsx
 function ClipboardRoot(props) {
 	injectComponentStyle("clipboard");
 	const id = useElementId("clipboard", props);
@@ -41,5 +41,4 @@ const Clipboard = Object.assign(ClipboardFacade, {
 	...Clipboard$1,
 	Root: ClipboardRoot
 });
-//#endregion
 export { Clipboard };

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

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
-//#region src/components/collapsible/index.d.ts
 export interface CollapsibleFacadeProps {
   open?: boolean;
   defaultOpen?: boolean;
@@ -16,4 +15,4 @@ declare namespace CollapsibleFacade {
 }
 type CollapsibleParts = typeof Collapsible$1;
 export declare const Collapsible: typeof CollapsibleFacade & CollapsibleParts;
-//#endregion
+export {};

package/dist/components/collapsible/index.mjs

@@ -1,9 +1,9 @@
-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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
-//#region src/components/collapsible/index.tsx
+// src/components/collapsible/index.tsx
 /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
 * the paper, its panel dissolving open to the machine's measured height.
 * The API is Ark's own — Root, Trigger, Content, Indicator. */
@@ -30,5 +30,4 @@ const Collapsible = Object.assign(CollapsibleFacade, {
 	Root: CollapsibleRoot
 });
 injectComponentStyle("collapsible");
-//#endregion
 export { Collapsible };

package/dist/components/collection/index.mjs

@@ -1,2 +1 @@
-import { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";
-export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";

package/dist/components/color-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 { Color, ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
-//#region src/components/color-picker/index.d.ts
 type ColorPickerRootProps = ComponentProps<typeof ColorPicker$1.Root> & {
   /** One rung of the control-height ladder for the swatch seal. */
   size?: "sm" | "md" | "lg";
@@ -15,6 +15,8 @@ declare function ColorPickerRoot(props: ColorPickerRootProps): import("react").J
  * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
  * FormatSelect, HiddenInput, Context. */
 type ColorPickerFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: string | Color;
   defaultValue?: string | Color;
   disabled?: boolean;
@@ -31,8 +33,13 @@ type ColorPickerFacadeProps = {
 /** The complete picker behind one color: the hex input rides beside the
  * swatch trigger, while the popup carries the area and hue/alpha tracks.
  * Saved swatches and format switches remain anatomy work. */
+declare const ColorPickerPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & ColorPicker$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("react").JSX.Element;
-export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root"> & {
+export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root" | "Positioner"> & {
+  Positioner: typeof ColorPickerPositioner;
   Root: typeof ColorPickerRoot;
 };
-//#endregion
+export {};

package/dist/components/color-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 { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/react/color-picker";
-//#region src/components/color-picker/index.tsx
+// src/components/color-picker/index.tsx
 const checkIcon = iconNode("check", {
 	width: 12,
 	height: 12
@@ -21,7 +22,9 @@ function ColorPickerRoot(props) {
 /** The complete picker behind one color: the hex input rides beside the
 * swatch trigger, while the popup carries the area and hue/alpha tracks.
 * Saved swatches and format switches remain anatomy work. */
+const ColorPickerPositioner = definePositioner(ColorPicker$1.Positioner);
 function ColorPickerFacade(props) {
+	const { portal = false } = props;
 	const { value, defaultValue, disabled, invalid, required, label, swatches = [], size = "md", className, style, onValueChange } = props;
 	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
 	return /* @__PURE__ */ jsxs(ColorPickerRoot, {
@@ -37,45 +40,48 @@ function ColorPickerFacade(props) {
 		children: [
 			label ? /* @__PURE__ */ jsx(ColorPicker$1.Label, { children: label }) : null,
 			/* @__PURE__ */ jsxs(ColorPicker$1.Control, { children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelInput, { channel: "hex" }), /* @__PURE__ */ jsxs(ColorPicker$1.Trigger, { children: [/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}), /* @__PURE__ */ jsx(ColorPicker$1.ValueSwatch, {})] })] }),
-			/* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [
-				/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }),
-				/* @__PURE__ */ jsxs("div", {
-					"data-scope": "color-picker",
-					"data-part": "channel-controls",
-					children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
-						width: 14,
-						height: 14
-					}) }), /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [
+					/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }),
+					/* @__PURE__ */ jsxs("div", {
 						"data-scope": "color-picker",
-						"data-part": "channel-sliders",
-						children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-							channel: "hue",
-							children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
-						}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-							channel: "alpha",
-							children: [
-								/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
-								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
-								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
-							]
+						"data-part": "channel-controls",
+						children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
+							width: 14,
+							height: 14
+						}) }), /* @__PURE__ */ jsxs("div", {
+							"data-scope": "color-picker",
+							"data-part": "channel-sliders",
+							children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+								channel: "hue",
+								children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
+							}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+								channel: "alpha",
+								children: [
+									/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
+									/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
+									/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
+								]
+							})]
 						})]
-					})]
-				}),
-				swatches.length > 0 ? /* @__PURE__ */ jsx(ColorPicker$1.SwatchGroup, { children: swatches.map((color) => /* @__PURE__ */ jsx(ColorPicker$1.SwatchTrigger, {
-					value: color,
-					children: /* @__PURE__ */ jsx(ColorPicker$1.Swatch, {
+					}),
+					swatches.length > 0 ? /* @__PURE__ */ jsx(ColorPicker$1.SwatchGroup, { children: swatches.map((color) => /* @__PURE__ */ jsx(ColorPicker$1.SwatchTrigger, {
 						value: color,
-						children: /* @__PURE__ */ jsx(ColorPicker$1.SwatchIndicator, { children: checkIcon })
-					})
-				}, color)) }) : null
-			] }) }),
+						children: /* @__PURE__ */ jsx(ColorPicker$1.Swatch, {
+							value: color,
+							children: /* @__PURE__ */ jsx(ColorPicker$1.SwatchIndicator, { children: checkIcon })
+						})
+					}, color)) }) : null
+				] }) })
+			}),
 			/* @__PURE__ */ jsx(ColorPicker$1.HiddenInput, {})
 		]
 	});
 }
 const ColorPicker = Object.assign(ColorPickerFacade, {
 	...ColorPicker$1,
+	Positioner: ColorPickerPositioner,
 	Root: ColorPickerRoot
 });
-//#endregion
 export { ColorPicker };

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

@@ -1,7 +1,7 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Combobox as Combobox$1, ComboboxRootComponentProps } from "@ark-ui/react/combobox";
-//#region src/components/combobox/index.d.ts
 /** Ark's Combobox, dressed in the paper-and-ink system: the field carries
  * the control recipe and its matches dissolve open as a paper vessel, the
  * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
@@ -18,6 +18,8 @@ type ComboboxOption = {
 };
 type ComboboxFacadeValue = string | string[];
 type ComboboxFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: ComboboxFacadeValue;
   defaultValue?: ComboboxFacadeValue;
   options: ComboboxOption[];
@@ -36,8 +38,13 @@ type ComboboxFacadeProps = {
 };
 /** The complete combobox behind one model value: options become the vessel's
  * rows while typing, clearing, and selection stay on the common field path. */
+declare const ComboboxPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Combobox$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function ComboboxFacade(props: ComboboxFacadeProps): import("react").JSX.Element;
-export declare const Combobox: typeof ComboboxFacade & Omit<typeof Combobox$1, "Root"> & {
+export declare const Combobox: typeof ComboboxFacade & Omit<typeof Combobox$1, "Root" | "Positioner"> & {
+  Positioner: typeof ComboboxPositioner;
   Root: typeof ComboboxRoot;
 };
-//#endregion
+export {};

package/dist/components/combobox/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 { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox as Combobox$1, createListCollection } from "@ark-ui/react/combobox";
-//#region src/components/combobox/index.tsx
+// src/components/combobox/index.tsx
 function ComboboxRoot(props) {
 	injectComponentStyle("combobox");
 	const id = useElementId("combobox", props);
@@ -23,8 +24,9 @@ function fromComboboxValue(value, multiple) {
 }
 /** The complete combobox behind one model value: options become the vessel's
 * rows while typing, clearing, and selection stay on the common field path. */
+const ComboboxPositioner = definePositioner(Combobox$1.Positioner);
 function ComboboxFacade(props) {
-	const { value, defaultValue, options, multiple, clearable = true, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	const { portal = false, value, defaultValue, options, multiple, clearable = true, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
 	const collection = createListCollection({ items: options });
 	return /* @__PURE__ */ jsxs(ComboboxRoot, {
 		size,
@@ -57,19 +59,22 @@ function ComboboxFacade(props) {
 					height: 16
 				}) })
 			] }),
-			/* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No results found" }), /* @__PURE__ */ jsx(Combobox$1.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
-				item,
-				children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: iconNode("check", {
-					width: 14,
-					height: 14
-				}) })]
-			}, item.value)) })] }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No results found" }), /* @__PURE__ */ jsx(Combobox$1.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
+					item,
+					children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: iconNode("check", {
+						width: 14,
+						height: 14
+					}) })]
+				}, item.value)) })] }) })
+			})
 		]
 	});
 }
 const Combobox = Object.assign(ComboboxFacade, {
 	...Combobox$1,
+	Positioner: ComboboxPositioner,
 	Root: ComboboxRoot
 });
-//#endregion
 export { Combobox };

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

@@ -1,5 +1,5 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Dialog } from "../dialog/index.mjs";
-//#region src/components/command/index.d.ts
 export interface CommandEntry {
   label: string;
   value: string;
@@ -18,6 +18,8 @@ export interface CommandEntry {
  * grafts onto the sheet's list.
  */
 export interface CommandProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   id?: string;
   /** The commands on offer, grouped as they arrive. */
   items?: CommandEntry[];
@@ -41,6 +43,6 @@ export interface CommandProps {
   /** Reports the field's live text. */
   onInputValueChange?: (value: string) => void;
 }
-declare function CommandImpl({ items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }: CommandProps): import("react").JSX.Element;
+declare function CommandImpl({ portal, items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }: CommandProps): import("react").JSX.Element;
 export declare const Command: typeof CommandImpl & typeof Dialog;
-//#endregion
+export {};