@bysages/react 0.5.0 → 0.6.0

package/dist/{mentions-De7ChJbl.mjs → mentions-B59tQDPt.mjs}

@@ -1,13 +1,13 @@
 import { t as useElementId } from "./id-Ctic_3o8.mjs";
 import { t as withSelfRoot } from "./family-Co1YsN4N.mjs";
 import { Field } from "./components/field/index.mjs";
+import { t as FloatingPortal } from "./floating-CMR7cvmA.mjs";
 import { Icon } from "./components/icon/index.mjs";
 import { Popover as Popover$1 } from "./components/popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useRef, useState } from "react";
 import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
 // src/components/mentions/use-mentions.ts
 /** The detection machinery behind a mention field: watch the caret,
 * offer the matching candidates, and answer for the keys that drive
@@ -234,7 +234,7 @@ function MentionsPopup({ size, matches, active, onInsert, onActiveChange, ...res
 * its own anatomy (the textarea rides where the host puts it) and the
 * vessel still points at the right place. Shares the detection state
 * with the host through `useMentions`. */
-function MentionsVesselImpl({ size = "md", open = false, matches = [], active = 0, anchor = null, placement = "bottom-start", onInsert, onActiveChange, onOpenChange, id }) {
+function MentionsVesselImpl({ portal = false, size = "md", open = false, matches = [], active = 0, anchor = null, placement = "bottom-start", onInsert, onActiveChange, onOpenChange, id }) {
 	injectComponentStyle("mentions");
 	const hostId = useElementId("mentions", { id });
 	return /* @__PURE__ */ jsx(Popover.Root, {
@@ -246,21 +246,24 @@ function MentionsVesselImpl({ size = "md", open = false, matches = [], active =
 			placement,
 			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
 		},
-		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(MentionsPopup, {
-				size,
-				matches,
-				active,
-				onInsert,
-				onActiveChange,
-				id: `${hostId}:popup`
-			})
-		}) }) })
+		children: /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(MentionsPopup, {
+					size,
+					matches,
+					active,
+					onInsert,
+					onActiveChange,
+					id: `${hostId}:popup`
+				})
+			}) })
+		})
 	});
 }
 const MentionsVessel = withSelfRoot(MentionsVesselImpl);
-function MentionsImpl({ items = [], value, trigger = "@", triggers, insertOnSelect = true, commitKeys, placement = "bottom-start", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, onSelect, children, ...rest }) {
+function MentionsImpl({ portal = false, items = [], value, trigger = "@", triggers, insertOnSelect = true, commitKeys, placement = "bottom-start", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, onSelect, children, ...rest }) {
 	const hostId = useElementId("mentions", rest);
 	const [internal, setInternal] = useState("");
 	const fieldRef = useRef(null);
@@ -317,17 +320,20 @@ function MentionsImpl({ items = [], value, trigger = "@", triggers, insertOnSele
 					"data-scope": "mentions",
 					"data-part": "textarea"
 				})
-			}), /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(MentionsPopup, {
-					size,
-					matches: mentions.matches,
-					active: mentions.active,
-					onInsert: mentions.insert,
-					onActiveChange: mentions.setActive,
-					id: `${hostId}:vessel:popup`
-				})
-			}) })]
+			}), /* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(MentionsPopup, {
+						size,
+						matches: mentions.matches,
+						active: mentions.active,
+						onInsert: mentions.insert,
+						onActiveChange: mentions.setActive,
+						id: `${hostId}:vessel:popup`
+					})
+				}) })
+			})]
 		}), children]
 	});
 }

package/dist/{select-DQ5669_K.mjs → select-BLFqfeVw.mjs}

@@ -1,5 +1,6 @@
 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 { useMemo } from "react";
@@ -58,7 +59,8 @@ function SelectRoot(props) {
 function toArkValue(value) {
 	return value === void 0 || value === "" ? [] : Array.isArray(value) ? value : [value];
 }
-function SelectFacade({ value, defaultValue, options, multiple = false, deselectable = false, clearable = true, disabled = false, invalid = false, required = false, readOnly = false, label, groupLabel, placeholder, name, form, autoComplete, size = "md", onValueChange }) {
+const SelectPositioner = definePositioner(Select.Positioner);
+function SelectFacade({ portal = false, value, defaultValue, options, multiple = false, deselectable = false, clearable = true, disabled = false, invalid = false, required = false, readOnly = false, label, groupLabel, placeholder, name, form, autoComplete, size = "md", onValueChange }) {
 	const collection = useMemo(() => createListCollection({ items: options }), [options]);
 	return /* @__PURE__ */ jsxs(SelectRoot, {
 		size,
@@ -93,19 +95,22 @@ function SelectFacade({ value, defaultValue, options, multiple = false, deselect
 					height: 14
 				}) })
 			] }),
-			/* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: groupLabel ? /* @__PURE__ */ jsxs(Select.ItemGroup, { children: [/* @__PURE__ */ jsx(Select.ItemGroupLabel, { children: groupLabel }), collection.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
-				item,
-				children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: iconNode("check", {
-					width: 14,
-					height: 14
-				}) })]
-			}, item.value))] }) : /* @__PURE__ */ jsx(Select.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
-				item,
-				children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: iconNode("check", {
-					width: 14,
-					height: 14
-				}) })]
-			}, item.value)) }) }) }),
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: groupLabel ? /* @__PURE__ */ jsxs(Select.ItemGroup, { children: [/* @__PURE__ */ jsx(Select.ItemGroupLabel, { children: groupLabel }), collection.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+					item,
+					children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: iconNode("check", {
+						width: 14,
+						height: 14
+					}) })]
+				}, item.value))] }) : /* @__PURE__ */ jsx(Select.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+					item,
+					children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: iconNode("check", {
+						width: 14,
+						height: 14
+					}) })]
+				}, item.value)) }) }) })
+			}),
 			/* @__PURE__ */ jsx(Select.HiddenSelect, {})
 		]
 	});
@@ -113,6 +118,7 @@ function SelectFacade({ value, defaultValue, options, multiple = false, deselect
 SelectFacade.displayName = "SSelect";
 const Select$1 = Object.assign(SelectFacade, {
 	...Select,
+	Positioner: SelectPositioner,
 	Root: SelectRoot
 });
 injectComponentStyle("select");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -52,7 +52,7 @@
     "@tanstack/react-virtual": "3.14.25",
     "@zag-js/cascade-select": "1.47.0",
     "@zag-js/react": "1.47.0",
-    "@bysages/core": "0.5.0"
+    "@bysages/core": "0.6.0"
   },
   "devDependencies": {
     "@json-render/core": "0.21.4",

package/dist/index-BVdkcSSY.d.mts

@@ -1,22 +0,0 @@
-import { ReactNode } from "react";
-import { Popover } from "@ark-ui/react/popover";
-type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-interface PopoverFacadeProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  trigger?: ReactNode;
-  content?: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-  placement?: PopoverPlacement;
-  children?: ReactNode;
-  onOpenChange?: (open: boolean) => void;
-}
-declare function PopoverFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: PopoverFacadeProps): import("react").JSX.Element;
-declare namespace PopoverFacade {
-  var displayName: string;
-}
-type PopoverParts = typeof Popover;
-declare const Popover$1: typeof PopoverFacade & PopoverParts;
-export { PopoverFacadeProps as n, Popover$1 as t };