@bysages/react 0.2.2 → 0.3.0

package/dist/input-2oezH-dY.mjs

@@ -0,0 +1,58 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useFieldContext } from "@ark-ui/react/field";
+//#region src/components/input/mask.ts
+function accepts(slot, ch) {
+	if (slot === "9") return /\d/.test(ch);
+	if (slot === "a") return /[a-zA-Z]/.test(ch);
+	return /[\da-zA-Z]/.test(ch);
+}
+/** Apply the entry mask: `9` takes a digit, `a` a letter, `*` either;
+* every other character is literal. A literal already typed is consumed,
+* not duplicated; a literal met out of place holds the walk and lets its
+* own slot claim it — so deleting through the middle reflows the shape
+* instead of corrupting it. */
+function applyMask(raw, mask) {
+	const literals = new Set(mask.split("").filter((s) => s !== "9" && s !== "a" && s !== "*"));
+	let out = "";
+	let at = 0;
+	slots: for (const slot of mask) {
+		if (at >= raw.length) break;
+		if (slot === "9" || slot === "a" || slot === "*") {
+			let ch = raw[at];
+			while (ch !== void 0 && !accepts(slot, ch)) {
+				if (literals.has(ch)) continue slots;
+				at += 1;
+				ch = raw[at];
+			}
+			if (ch === void 0) break;
+			out += ch;
+			at += 1;
+		} else if (raw[at] === slot) {
+			at += 1;
+			out += slot;
+		} else out += slot;
+	}
+	return out;
+}
+//#endregion
+//#region src/components/input/index.tsx
+const Input = forwardRef(function Input({ value, size = "md", invalid = false, mask, onValueChange, ...rest }, ref) {
+	injectComponentStyle("input");
+	const field = useFieldContext();
+	const fieldProps = field?.getInputProps() ?? {};
+	return /* @__PURE__ */ jsx("input", {
+		...fieldProps,
+		...rest,
+		...value !== void 0 ? { value } : {},
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size,
+		ref,
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		onChange: (event) => onValueChange?.(mask ? applyMask(event.target.value, mask) : event.target.value)
+	});
+});
+//#endregion
+export { Input as t };

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/dist/select-D1xiT1oJ.mjs

@@ -0,0 +1,68 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { Select } from "@ark-ui/react/select";
+//#region src/components/select/native.tsx
+function NativeSelect({ value, options, size = "md", invalid = false, placeholder, disabled = false, onValueChange, ...rest }) {
+	injectComponentStyle("select");
+	const field = useFieldContext();
+	const fieldProps = field?.getInputProps() ?? {};
+	const empty = value == null || value === "";
+	const off = disabled || field?.disabled;
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "select",
+		"data-part": "native-root",
+		"data-size": size,
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		"data-disabled": off ? "" : void 0,
+		"data-placeholder-shown": empty ? "" : void 0,
+		children: [/* @__PURE__ */ jsxs("select", {
+			...fieldProps,
+			value: value ?? "",
+			"data-scope": "select",
+			"data-part": "native",
+			disabled: off || void 0,
+			onChange: (event) => onValueChange?.(event.target.value),
+			children: [placeholder ? /* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				hidden: empty ? void 0 : true,
+				children: placeholder
+			}) : null, options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value))]
+		}), /* @__PURE__ */ jsx("svg", {
+			"data-scope": "select",
+			"data-part": "native-icon",
+			viewBox: "0 0 16 16",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 6l4 4 4-4",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Select.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Select$1 = {
+	...Select,
+	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.2.2",
+  "version": "0.3.0",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -32,42 +32,136 @@
     "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": {
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
+    },
+    "./generative": {
+      "types": "./dist/generative/index.d.mts",
+      "import": "./dist/generative/index.mjs"
     }
   },
   "dependencies": {
     "@ark-ui/react": "5.39.2",
-    "@tanstack/markdown": "0.0.15",
+    "@tanstack/markdown": "1.0.0",
+    "@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.3.0",
+    "@bysages/icons": "0.3.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "10.6.0",
-    "@storybook/react-vite": "10.6.0",
+    "@json-render/core": "0.21.0",
+    "@json-render/react": "0.21.0",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "ai": "7.0.107",
+    "ai": "7.0.126",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "storybook": "10.6.0",
+    "storybook": "10.6.1",
     "zod": "4.6.5"
   },
   "peerDependencies": {
+    "@json-render/core": "^0.21.0",
+    "@json-render/react": "^0.21.0",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "zod": "^4.0"
+  },
+  "peerDependenciesMeta": {
+    "@json-render/core": {
+      "optional": true
+    },
+    "@json-render/react": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "vp pack",
+    "build:workbench": "storybook build -o ../../docs/public/storybook/react",
     "release": "basis publish"
   }
 }