@bysages/react 0.2.2 → 0.2.3

package/dist/mentions-DMIBCBOd.mjs

@@ -0,0 +1,181 @@
+import { Field } from "./components/field/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Popover } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
+//#region 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 resolve = () => typeof options === "function" ? options() : options;
+	const closePopup = () => {
+		setPopupOpen(false);
+		setMatches([]);
+	};
+	const detect = () => {
+		const text = handlers.getText();
+		const caret = textarea()?.selectionStart ?? text.length;
+		caretIndex.current = caret;
+		const head = text.slice(0, caret);
+		const char = resolve().trigger ?? "@";
+		const anchor = head.lastIndexOf(char);
+		const token = anchor === -1 ? "" : head.slice(anchor + char.length);
+		if (anchor === -1 || /\s/.test(token)) {
+			closePopup();
+			return;
+		}
+		const found = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
+		setMatches(found);
+		setActive(0);
+		anchorIndex.current = anchor;
+		setPopupOpen(found.length > 0);
+	};
+	const insert = (entry) => {
+		const text = handlers.getText();
+		const char = resolve().trigger ?? "@";
+		const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
+		handlers.setText(next);
+		closePopup();
+		setTimeout(() => {
+			const el = textarea();
+			if (!el) return;
+			const caret = anchorIndex.current + char.length + entry.label.length + 1;
+			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, Enter inserts, 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();
+			setActive((current) => (current + 1) % matches.length);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive((current) => (current - 1 + matches.length) % matches.length);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			insert(matches[active]);
+		} else if (event.key === "Escape") closePopup();
+		else return false;
+		return true;
+	};
+	return {
+		open: popupOpen,
+		matches,
+		active,
+		setActive,
+		insert,
+		close: closePopup,
+		onInput,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/components/mentions/index.tsx
+/** 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 MentionsVessel({ size = "md", open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
+	injectComponentStyle("mentions");
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
+		},
+		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scope": "mentions",
+				"data-part": "popup",
+				"data-size": size,
+				children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
+					"data-scope": "mentions",
+					"data-part": "option",
+					"data-active": index === active ? "" : void 0,
+					onMouseEnter: () => onActiveChange?.(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => onInsert?.(entry),
+					children: entry.label
+				}, entry.value))
+			})
+		}) }) })
+	});
+}
+function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
+	const [internal, setInternal] = useState("");
+	const fieldRef = useRef(null);
+	const el = () => fieldRef.current;
+	const current = value ?? internal;
+	const mentions = useMentions({
+		items,
+		trigger
+	}, el, {
+		getText: () => el()?.value ?? current,
+		setText: (next) => {
+			setInternal(next);
+			onValueChange?.(next);
+		}
+	});
+	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__ */ jsx(Field.Textarea, {
+				ref: fieldRef,
+				autoresize,
+				rows: 3,
+				placeholder,
+				value: current,
+				onChange: handleChange,
+				onKeyDown: (event) => mentions.onKeydown(event),
+				"data-invalid": invalid || void 0,
+				"data-scope": "mentions",
+				"data-part": "textarea"
+			}),
+			/* @__PURE__ */ jsx(MentionsVessel, {
+				size,
+				open: mentions.open,
+				matches: mentions.matches,
+				active: mentions.active,
+				anchor: el(),
+				onInsert: mentions.insert,
+				onActiveChange: mentions.setActive,
+				onOpenChange: (open) => {
+					if (!open) mentions.close();
+				}
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { MentionsVessel as n, useMentions as r, Mentions as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -32,6 +32,78 @@
     "dist"
   ],
   "type": "module",
+  "sideEffects": [
+    "./dist/components/accordion/index.mjs",
+    "./dist/components/ai/index.mjs",
+    "./dist/components/alert/index.mjs",
+    "./dist/components/angle-slider/index.mjs",
+    "./dist/components/avatar/index.mjs",
+    "./dist/components/banner/index.mjs",
+    "./dist/components/breadcrumb/index.mjs",
+    "./dist/components/button-group/index.mjs",
+    "./dist/components/card/index.mjs",
+    "./dist/components/carousel/index.mjs",
+    "./dist/components/checkbox/index.mjs",
+    "./dist/components/clipboard/index.mjs",
+    "./dist/components/collapsible/index.mjs",
+    "./dist/components/color-picker/index.mjs",
+    "./dist/components/combobox/index.mjs",
+    "./dist/components/date-input/index.mjs",
+    "./dist/components/date-picker/index.mjs",
+    "./dist/components/dialog/index.mjs",
+    "./dist/components/drawer/index.mjs",
+    "./dist/components/editable/index.mjs",
+    "./dist/components/empty/index.mjs",
+    "./dist/components/field/index.mjs",
+    "./dist/components/fieldset/index.mjs",
+    "./dist/components/file-upload/index.mjs",
+    "./dist/components/float-button/index.mjs",
+    "./dist/components/floating-panel/index.mjs",
+    "./dist/components/highlight/index.mjs",
+    "./dist/components/hover-card/index.mjs",
+    "./dist/components/image-cropper/index.mjs",
+    "./dist/components/input-group/index.mjs",
+    "./dist/components/json-tree-view/index.mjs",
+    "./dist/components/layout/index.mjs",
+    "./dist/components/list/index.mjs",
+    "./dist/components/listbox/index.mjs",
+    "./dist/components/marquee/index.mjs",
+    "./dist/components/menu/index.mjs",
+    "./dist/components/meter/index.mjs",
+    "./dist/components/navigation-menu/index.mjs",
+    "./dist/components/number-input/index.mjs",
+    "./dist/components/page-header/index.mjs",
+    "./dist/components/pagination/index.mjs",
+    "./dist/components/password-input/index.mjs",
+    "./dist/components/pin-input/index.mjs",
+    "./dist/components/popover/index.mjs",
+    "./dist/components/progress/index.mjs",
+    "./dist/components/qr-code/index.mjs",
+    "./dist/components/radio-group/index.mjs",
+    "./dist/components/rating-group/index.mjs",
+    "./dist/components/scroll-area/index.mjs",
+    "./dist/components/segment-group/index.mjs",
+    "./dist/components/select/index.mjs",
+    "./dist/components/signature-pad/index.mjs",
+    "./dist/components/slider/index.mjs",
+    "./dist/components/splitter/index.mjs",
+    "./dist/components/stat/index.mjs",
+    "./dist/components/steps/index.mjs",
+    "./dist/components/swap/index.mjs",
+    "./dist/components/switch/index.mjs",
+    "./dist/components/tabs/index.mjs",
+    "./dist/components/tags-input/index.mjs",
+    "./dist/components/timeline/index.mjs",
+    "./dist/components/timer/index.mjs",
+    "./dist/components/toast/index.mjs",
+    "./dist/components/toc/index.mjs",
+    "./dist/components/toggle/index.mjs",
+    "./dist/components/toggle-group/index.mjs",
+    "./dist/components/tooltip/index.mjs",
+    "./dist/components/tour/index.mjs",
+    "./dist/components/tree-view/index.mjs",
+    "./dist/components/typography/index.mjs"
+  ],
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "exports": {
@@ -43,19 +115,20 @@
   "dependencies": {
     "@ark-ui/react": "5.39.2",
     "@tanstack/markdown": "0.0.15",
+    "@tanstack/react-form": "1.33.5",
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.13",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/react": "1.44.0",
-    "@bysages/core": "0.2.2",
-    "@bysages/icons": "0.2.2"
+    "@bysages/core": "0.2.3",
+    "@bysages/icons": "0.2.3"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "ai": "7.0.107",
+    "ai": "7.0.118",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.0",