@bysages/react 0.3.0 → 0.4.0

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

@@ -1,4 +1,7 @@
+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 { Popover as Popover$1 } from "./components/popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
@@ -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/messages-1jJWtaYU.mjs

@@ -0,0 +1,16 @@
+import { useConfig } from "./components/config-provider/index.mjs";
+import { resolveComponentMessages } from "@bysages/core";
+import { useMemo } from "react";
+//#region src/internal/messages.ts
+/** Complete wrapper-owned copy for the nearest ConfigProvider, resolved
+* from its locale and partial message overrides. */
+function useComponentMessages() {
+	const config = useConfig();
+	return useMemo(() => resolveComponentMessages(config.locale ?? "en", config.messages), [config.locale, config.messages]);
+}
+/** Fill a core message's `{name}`-shaped slots. */
+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-ozUFq0zd.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";
+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.0",
+  "version": "0.4.0",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -68,6 +68,7 @@
     "./dist/components/list/index.mjs",
     "./dist/components/listbox/index.mjs",
     "./dist/components/marquee/index.mjs",
+    "./dist/components/media-player/index.mjs",
     "./dist/components/menu/index.mjs",
     "./dist/components/meter/index.mjs",
     "./dist/components/navigation-menu/index.mjs",
@@ -124,8 +125,7 @@
     "@tanstack/react-virtual": "3.14.13",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/react": "1.44.0",
-    "@bysages/core": "0.3.0",
-    "@bysages/icons": "0.3.0"
+    "@bysages/core": "0.4.0"
   },
   "devDependencies": {
     "@json-render/core": "0.21.0",

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

@@ -1,68 +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, ...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 };