@bysages/react 0.4.4 → 0.6.0

package/dist/mentions-B59tQDPt.mjs

@@ -0,0 +1,341 @@
+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";
+// 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
+* them. The field element arrives as a getter because hosts wrap it
+* differently (a bare textarea, a field part's ref).
+*
+* `onKeydown` answers whether the vessel consumed the key, so a host
+* with its own Enter semantics — a composer that sends — can yield to
+* the candidates first and act only when the vessel stands down. */
+function useMentions(options, textarea, handlers) {
+	const [popupOpen, setPopupOpen] = useState(false);
+	const [matches, setMatches] = useState([]);
+	const [active, setActive] = useState(0);
+	const anchorIndex = useRef(0);
+	const caretIndex = useRef(0);
+	const activeTrigger = useRef("@");
+	const resolve = () => typeof options === "function" ? options() : options;
+	const triggers = () => {
+		const value = resolve().triggers ?? resolve().trigger ?? "@";
+		return (Array.isArray(value) ? value : [value]).filter((trigger) => trigger.length > 0);
+	};
+	const closePopup = () => {
+		setPopupOpen(false);
+		setMatches([]);
+	};
+	const moveActive = (delta) => {
+		const enabled = matches.map((entry, index) => ({
+			entry,
+			index
+		})).filter(({ entry }) => !entry.disabled);
+		if (enabled.length === 0) return;
+		const position = enabled.findIndex(({ index }) => index === active);
+		const next = position === -1 ? 0 : (position + delta + enabled.length) % enabled.length;
+		setActive(enabled[next]?.index ?? 0);
+	};
+	const detect = () => {
+		const text = handlers.getText();
+		const el = textarea();
+		const caret = handlers.getCaret?.() ?? el?.selectionStart ?? text.length;
+		caretIndex.current = caret;
+		const head = text.slice(0, caret);
+		const found = triggers().map((trigger) => ({
+			trigger,
+			anchor: head.lastIndexOf(trigger)
+		})).filter((candidate) => candidate.anchor !== -1).sort((left, right) => right.anchor - left.anchor || right.trigger.length - left.trigger.length)[0];
+		const token = found ? head.slice(found.anchor + found.trigger.length) : "";
+		if (!found || /\s/.test(token)) {
+			closePopup();
+			return;
+		}
+		const query = token.toLowerCase();
+		const roster = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(query) || entry.value.toLowerCase().startsWith(query));
+		setMatches(roster);
+		setActive(roster.findIndex((entry) => !entry.disabled));
+		anchorIndex.current = found.anchor;
+		activeTrigger.current = found.trigger;
+		setPopupOpen(roster.length > 0);
+	};
+	const insert = (entry) => {
+		if (entry.disabled) {
+			closePopup();
+			return;
+		}
+		if (handlers.select?.(entry) === false) {
+			handlers.commit?.(entry);
+			closePopup();
+			return;
+		}
+		if (handlers.commit) {
+			handlers.commit(entry);
+			closePopup();
+			return;
+		}
+		const text = handlers.getText();
+		const trigger = activeTrigger.current;
+		const replacement = entry.insertText ?? trigger + entry.label;
+		const suffix = entry.insertText == null ? " " : "";
+		const next = text.slice(0, anchorIndex.current) + replacement + suffix + text.slice(caretIndex.current);
+		handlers.setText(next);
+		closePopup();
+		setTimeout(() => {
+			const el = textarea();
+			if (!el) return;
+			const caret = anchorIndex.current + replacement.length + suffix.length;
+			el.focus();
+			el.setSelectionRange(caret, caret);
+		}, 0);
+	};
+	/** Feed the field's input events through here — the vessel watches
+	* the text as it lands, from the element itself. */
+	const onInput = () => detect();
+	/** Arrows move, configured commit keys insert, Escape dismisses. Answers
+	* `true` when the vessel consumed the key. */
+	const onKeydown = (event) => {
+		if (!popupOpen || matches.length === 0) return false;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveActive(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			moveActive(-1);
+		} else if ((resolve().commitKeys ?? ["Enter", " "]).includes(event.key)) {
+			const entry = matches[active];
+			if (!entry || entry.disabled) return false;
+			event.preventDefault();
+			insert(entry);
+		} else if (event.key === "Escape") closePopup();
+		else return false;
+		return true;
+	};
+	return {
+		open: popupOpen,
+		matches,
+		active,
+		setActive,
+		anchorIndex,
+		caretIndex,
+		activeTrigger,
+		insert,
+		close: closePopup,
+		onInput,
+		onKeydown
+	};
+}
+// src/components/mentions/index.tsx
+function MentionsPopup({ size, matches, active, onInsert, onActiveChange, ...rest }) {
+	const id = useElementId("mentions-popup", rest);
+	const groups = [];
+	const byName = /* @__PURE__ */ new Map();
+	matches.forEach((entry, index) => {
+		const name = entry.group ?? "";
+		const group = byName.get(name);
+		if (group) group.entries.push({
+			entry,
+			index
+		});
+		else {
+			const next = {
+				name,
+				entries: [{
+					entry,
+					index
+				}]
+			};
+			byName.set(name, next);
+			groups.push(next);
+		}
+	});
+	const optionId = (index) => `${id}:option-${index}`;
+	const activeEntry = matches[active];
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		id,
+		"data-scope": "mentions",
+		"data-part": "popup",
+		"data-size": size,
+		role: "listbox",
+		"aria-activedescendant": activeEntry && !activeEntry.disabled ? optionId(active) : void 0,
+		children: groups.map((group, groupIndex) => {
+			const labelId = group.name ? `${id}:group-${groupIndex}` : void 0;
+			const options = group.entries.map(({ entry, index }) => /* @__PURE__ */ jsxs("div", {
+				id: optionId(index),
+				role: "option",
+				"aria-selected": index === active && !entry.disabled,
+				"aria-disabled": entry.disabled ? "true" : void 0,
+				tabIndex: -1,
+				"data-scope": "mentions",
+				"data-part": "option",
+				"data-active": index === active && !entry.disabled ? "" : void 0,
+				"data-disabled": entry.disabled ? "" : void 0,
+				onMouseEnter: () => {
+					if (!entry.disabled) onActiveChange?.(index);
+				},
+				onMouseDown: (event) => {
+					if (event.button !== 0) return;
+					event.preventDefault();
+					if (!entry.disabled) onInsert?.(entry);
+				},
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					if (!entry.disabled) onInsert?.(entry);
+				},
+				children: [
+					entry.icon ? /* @__PURE__ */ jsx(Icon, { name: entry.icon }) : null,
+					/* @__PURE__ */ jsxs("span", {
+						"data-scope": "mentions",
+						"data-part": "option-main",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-scope": "mentions",
+							"data-part": "option-label",
+							children: entry.label
+						}), entry.description ? /* @__PURE__ */ jsx("span", {
+							"data-scope": "mentions",
+							"data-part": "option-description",
+							children: entry.description
+						}) : null]
+					}),
+					entry.kind ? /* @__PURE__ */ jsx("span", {
+						"data-scope": "mentions",
+						"data-part": "option-kind",
+						children: entry.kind
+					}) : null
+				]
+			}, `${entry.id ?? entry.value}:${index}`));
+			if (!group.name) return /* @__PURE__ */ jsx(Fragment$1, { children: options }, "ungrouped");
+			return /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-labelledby": labelId,
+				"data-scope": "mentions",
+				"data-part": "group",
+				children: [/* @__PURE__ */ jsx("div", {
+					id: labelId,
+					"data-scope": "mentions",
+					"data-part": "group-label",
+					children: group.name
+				}), options]
+			}, `group:${group.name}`);
+		})
+	});
+}
+/** The vessel: the candidates themselves as a floating card. The anchor
+* is virtual — a live rectangle off the host's field — so a host keeps
+* 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({ 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, {
+		id: `${hostId}:vessel`,
+		ids: { content: `${hostId}:popup` },
+		open,
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		positioning: {
+			placement,
+			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
+		},
+		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({ 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);
+	const el = () => fieldRef.current;
+	const current = value ?? internal;
+	const mentions = useMentions(() => ({
+		items,
+		trigger,
+		triggers,
+		commitKeys
+	}), el, {
+		getText: () => el()?.value ?? current,
+		setText: (next) => {
+			setInternal(next);
+			onValueChange?.(next);
+		},
+		select: (entry) => {
+			onSelect?.(entry);
+			return insertOnSelect;
+		}
+	});
+	const handleChange = (event) => {
+		const node = event.currentTarget;
+		setInternal(node.value);
+		onValueChange?.(node.value);
+		mentions.onInput();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "mentions",
+		"data-part": "root",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsxs(Popover.Root, {
+			id: `${hostId}:vessel`,
+			ids: { content: `${hostId}:vessel:popup` },
+			open: mentions.open,
+			onOpenChange: (details) => {
+				if (!details.open) mentions.close();
+			},
+			positioning: { placement },
+			children: [/* @__PURE__ */ jsx(Popover.Anchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Field.Textarea, {
+					ref: fieldRef,
+					autoresize,
+					rows: 3,
+					placeholder,
+					value: current,
+					"aria-expanded": mentions.open,
+					"aria-controls": mentions.open ? `${hostId}:vessel:popup` : void 0,
+					onChange: handleChange,
+					onKeyDown: (event) => mentions.onKeydown(event),
+					"data-invalid": invalid || void 0,
+					"data-scope": "mentions",
+					"data-part": "textarea"
+				})
+			}), /* @__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]
+	});
+}
+const Mentions = Object.assign(MentionsImpl, Popover$1);
+export { MentionsVessel as n, useMentions as r, Mentions as t };

package/dist/{messages-1jJWtaYU.mjs → messages-B6n0lVyt.mjs}

@@ -1,7 +1,7 @@
 import { useConfig } from "./components/config-provider/index.mjs";
 import { resolveComponentMessages } from "@bysages/core";
 import { useMemo } from "react";
-//#region src/internal/messages.ts
+// src/internal/messages.ts
 /** Complete wrapper-owned copy for the nearest ConfigProvider, resolved
 * from its locale and partial message overrides. */
 function useComponentMessages() {
@@ -12,5 +12,4 @@ function useComponentMessages() {
 function formatMessage(template, values) {
 	return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
 }
-//#endregion
 export { useComponentMessages as n, formatMessage as t };

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

@@ -1,11 +1,12 @@
-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 { useMemo } from "react";
 import { useFieldContext } from "@ark-ui/react/field";
 import { Select, createListCollection } from "@ark-ui/react/select";
-//#region src/components/select/native.tsx
+// src/components/select/native.tsx
 function NativeSelect({ value, options, size = "md", invalid = false, placeholder, disabled = false, onValueChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest }) {
 	injectComponentStyle("select");
 	const field = useFieldContext();
@@ -45,8 +46,7 @@ function NativeSelect({ value, options, size = "md", invalid = false, placeholde
 		})]
 	});
 }
-//#endregion
-//#region src/components/select/index.tsx
+// src/components/select/index.tsx
 function SelectRoot(props) {
 	const id = useElementId("select", props);
 	const { size = "md", ...rest } = props;
@@ -59,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,
@@ -94,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, {})
 		]
 	});
@@ -114,8 +118,8 @@ function SelectFacade({ value, defaultValue, options, multiple = false, deselect
 SelectFacade.displayName = "SSelect";
 const Select$1 = Object.assign(SelectFacade, {
 	...Select,
+	Positioner: SelectPositioner,
 	Root: SelectRoot
 });
 injectComponentStyle("select");
-//#endregion
 export { NativeSelect as n, Select$1 as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/react",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -46,31 +46,31 @@
     }
   },
   "dependencies": {
-    "@ark-ui/react": "5.39.3",
-    "@tanstack/markdown": "1.0.0",
+    "@ark-ui/react": "5.40.0",
     "@tanstack/react-form": "1.33.5",
-    "@tanstack/react-table": "9.2.8",
-    "@tanstack/react-virtual": "3.14.14",
-    "@zag-js/cascade-select": "1.45.0",
-    "@zag-js/react": "1.45.0",
-    "@bysages/core": "0.4.4"
+    "@tanstack/react-table": "9.3.1",
+    "@tanstack/react-virtual": "3.14.25",
+    "@zag-js/cascade-select": "1.47.0",
+    "@zag-js/react": "1.47.0",
+    "@bysages/core": "0.6.0"
   },
   "devDependencies": {
-    "@json-render/core": "0.21.0",
-    "@json-render/react": "0.21.0",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/react-vite": "10.6.1",
+    "@json-render/core": "0.21.4",
+    "@json-render/react": "0.21.4",
+    "@storybook/addon-a11y": "10.6.5",
+    "@storybook/react-vite": "10.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "ai": "7.0.137",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "storybook": "10.6.1",
-    "zod": "4.6.5"
+    "ai": "7.0.159",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.5",
+    "zod": "4.6.7"
   },
   "peerDependencies": {
     "@json-render/core": "^0.21.0",
     "@json-render/react": "^0.21.0",
+    "ai": "^7.0.0",
     "react": ">=18",
     "react-dom": ">=18",
     "zod": "^4.0"