@bysages/react 0.3.1 → 0.4.1

package/dist/{mentions-DMIBCBOd.mjs → mentions-BwnyvdXz.mjs}

@@ -1,5 +1,8 @@
+import { t as useElementId } from "./id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
 import { Field } from "./components/field/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { Popover as Popover$1 } from "./components/popover/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Popover } from "@ark-ui/react/popover";
@@ -89,14 +92,42 @@ function useMentions(options, textarea, handlers) {
 }
 //#endregion
 //#region src/components/mentions/index.tsx
+function MentionsPopup({ size, matches, active, onInsert, onActiveChange, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "mentions",
+		"data-part": "popup",
+		"data-size": size,
+		role: "listbox",
+		children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
+			role: "option",
+			"aria-selected": index === active,
+			tabIndex: -1,
+			"data-scope": "mentions",
+			"data-part": "option",
+			"data-active": index === active ? "" : void 0,
+			onMouseEnter: () => onActiveChange?.(index),
+			onMouseDown: (event) => event.preventDefault(),
+			onClick: () => onInsert?.(entry),
+			onKeyDown: (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				onInsert?.(entry);
+			},
+			children: entry.label
+		}, entry.value))
+	});
+}
 /** 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 }) {
+function MentionsVesselImpl({ size = "md", open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange, id }) {
 	injectComponentStyle("mentions");
+	const hostId = useElementId("mentions", { id });
 	return /* @__PURE__ */ jsx(Popover.Root, {
+		id: `${hostId}:vessel`,
 		open,
 		onOpenChange: (details) => onOpenChange?.(details.open),
 		positioning: {
@@ -105,24 +136,19 @@ function MentionsVessel({ size = "md", open = false, matches = [], active = 0, a
 		},
 		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))
+			children: /* @__PURE__ */ jsx(MentionsPopup, {
+				size,
+				matches,
+				active,
+				onInsert,
+				onActiveChange
 			})
 		}) }) })
 	});
 }
-function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
+const MentionsVessel = withSelfRoot(MentionsVesselImpl);
+function MentionsImpl({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
+	const hostId = useElementId("mentions", rest);
 	const [internal, setInternal] = useState("");
 	const fieldRef = useRef(null);
 	const el = () => fieldRef.current;
@@ -148,34 +174,40 @@ function Mentions({ items = [], value, trigger = "@", placeholder, autoresize =
 		"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
-		]
+		children: [/* @__PURE__ */ jsxs(Popover.Root, {
+			id: `${hostId}:vessel`,
+			open: mentions.open,
+			onOpenChange: (details) => {
+				if (!details.open) mentions.close();
+			},
+			positioning: { placement: "bottom-start" },
+			children: [/* @__PURE__ */ jsx(Popover.Anchor, {
+				asChild: true,
+				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(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
+				})
+			}) })]
+		}), children]
 	});
 }
+const Mentions = Object.assign(MentionsImpl, Popover$1);
 //#endregion
 export { MentionsVessel as n, useMentions as r, Mentions as t };

package/dist/select-i9UZsQCU.mjs

@@ -0,0 +1,121 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { t as useElementId } from "./id-C37UYLwJ.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
+function NativeSelect({ value, options, size = "md", invalid = false, placeholder, disabled = false, onValueChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...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,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			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))]
+		}), iconNode("chevron-down", {
+			"data-scope": "select",
+			"data-part": "native-icon"
+		})]
+	});
+}
+//#endregion
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const id = useElementId("select", props);
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Select.Root, {
+		...rest,
+		id,
+		"data-size": size
+	});
+}
+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 collection = useMemo(() => createListCollection({ items: options }), [options]);
+	return /* @__PURE__ */ jsxs(SelectRoot, {
+		size,
+		autoComplete,
+		collection,
+		deselectable,
+		disabled,
+		form,
+		invalid,
+		lazyMount: true,
+		multiple,
+		unmountOnExit: true,
+		name,
+		readOnly,
+		required,
+		defaultValue: toArkValue(value ?? defaultValue),
+		...value === void 0 ? {} : { value: toArkValue(value) },
+		onValueChange: (details) => onValueChange?.(multiple ? details.value : details.value.at(0) ?? ""),
+		children: [
+			label ? /* @__PURE__ */ jsx(Select.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(Select.Control, { children: [
+				/* @__PURE__ */ jsx(Select.Trigger, {
+					"aria-label": label ? void 0 : placeholder,
+					children: /* @__PURE__ */ jsx(Select.ValueText, { placeholder })
+				}),
+				clearable ? /* @__PURE__ */ jsx(Select.ClearTrigger, { children: iconNode("x", {
+					width: 14,
+					height: 14
+				}) }) : null,
+				/* @__PURE__ */ jsx(Select.Indicator, { children: iconNode("chevrons-up-down", {
+					width: 14,
+					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(Select.HiddenSelect, {})
+		]
+	});
+}
+SelectFacade.displayName = "SSelect";
+const Select$1 = Object.assign(SelectFacade, {
+	...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.3.1",
+  "version": "0.4.1",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -32,78 +32,7 @@
     "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"
-  ],
+  "sideEffects": false,
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "exports": {
@@ -117,15 +46,14 @@
     }
   },
   "dependencies": {
-    "@ark-ui/react": "5.39.2",
+    "@ark-ui/react": "5.39.3",
     "@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.3.1",
-    "@bysages/icons": "0.3.1"
+    "@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.1"
   },
   "devDependencies": {
     "@json-render/core": "0.21.0",
@@ -134,7 +62,7 @@
     "@storybook/react-vite": "10.6.1",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "ai": "7.0.126",
+    "ai": "7.0.137",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.1",

package/dist/chevron-BeHvt46K.mjs

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/ai/chevron.tsx
-/** The folding chevron the shared indicator turns. */
-const chevron = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 16 16",
-	fill: "none",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", {
-		d: "M6 4l4 4-4 4",
-		stroke: "currentColor",
-		strokeWidth: 1.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})
-});
-//#endregion
-export { chevron as t };

package/dist/glyph-VI989p8H.mjs

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/internal/glyph.tsx
-/** Render a lucide glyph as a bare svg element — the components' own
-* default icons. No span shell: the part rules size the svg directly. */
-function glyphNode(glyph, attrs = {}) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: `0 0 ${glyph.width} ${glyph.height}`,
-		"aria-hidden": "true",
-		...attrs,
-		dangerouslySetInnerHTML: { __html: glyph.body }
-	});
-}
-//#endregion
-export { glyphNode as t };

package/dist/select-eAHutw56.mjs

@@ -1,70 +0,0 @@
-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, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...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,
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledby,
-			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 };