@bysages/solid 0.3.1 → 0.4.0

package/dist/{mentions-f5Js_2W7.mjs → mentions-CeG5u8Qm.mjs}

@@ -1,7 +1,10 @@
-import { Textarea } from "./components/textarea/index.mjs";
+import { n as withSelfRoot, t as defineFamily } from "./family-Cmd8HEyK.mjs";
+import { t as useElementId } from "./id-2ygNzPHF.mjs";
+import { Popover as Popover$1 } from "./components/popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
-import { For, createEffect, createSignal, splitProps } from "solid-js";
+import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "@solidjs/web";
+import { For, createSignal, splitProps } from "solid-js";
+import { Field } from "@ark-ui/solid/field";
 import { Portal } from "solid-js/web";
 import { Popover } from "@ark-ui/solid/popover";
 //#region src/components/mentions/use-mentions.ts
@@ -89,30 +92,39 @@ function useMentions(options, textarea, handlers) {
 //#endregion
 //#region src/components/mentions/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=mentions data-part=option>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><!><!>`);
-/** 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(props) {
+var _tmpl$2 = /* @__PURE__ */ template(`<div role=option tabindex=-1 data-scope=mentions data-part=option>`);
+/** The vessel: the candidates themselves as a floating card. A host can
+* render its field through the Anchor; the rectangle fallback keeps the
+* textarea in the host's own anatomy. Shares the detection state with
+* the host through `useMentions`. */
+const MentionsVessel = withSelfRoot(function MentionsVessel(props) {
 	injectComponentStyle("mentions");
+	const id = useElementId("mentions-vessel");
 	return createComponent(Popover.Root, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return props.open ?? false;
 		},
 		onOpenChange: (details) => props.onOpenChange?.(details.open),
-		positioning: {
-			placement: "bottom-start",
-			getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
+		get positioning() {
+			return props.children ? { placement: "bottom-start" } : {
+				placement: "bottom-start",
+				getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
+			};
 		},
 		get children() {
-			return createComponent(Portal, { get children() {
+			return [memo(() => {
+				return memo(() => {
+					return !!props.children;
+				})() ? createComponent(Popover.Anchor, { asChild: (anchorProps) => typeof props.children === "function" ? props.children(anchorProps()) : props.children }) : null;
+			}), createComponent(Portal, { get children() {
 				return createComponent(Popover.Positioner, { get children() {
 					return createComponent(Popover.Content, { asChild: (contentProps) => (() => {
 						var _el$ = _tmpl$();
 						spread(_el$, [contentProps, {
+							role: "listbox",
 							"data-scope": "mentions",
 							"data-part": "popup",
 							get "data-size"() {
@@ -125,14 +137,25 @@ function MentionsVessel(props) {
 							},
 							children: (entry, index) => (() => {
 								var _el$2 = _tmpl$2();
+								_el$2._$$keydown = (event) => {
+									if (event.key !== "Enter" && event.key !== " ") return;
+									event.preventDefault();
+									props.onInsert?.(entry);
+								};
 								_el$2._$$click = () => props.onInsert?.(entry);
 								_el$2._$$mousedown = (event) => event.preventDefault();
 								_el$2.addEventListener("mouseenter", () => props.onActiveChange?.(index()));
 								insert(_el$2, () => {
 									return entry.label;
 								});
-								effect(() => index() === (props.active ?? 0) ? "" : void 0, (_v$) => {
-									setAttribute(_el$2, "data-active", _v$);
+								effect(() => {
+									return {
+										e: index() === (props.active ?? 0),
+										t: index() === (props.active ?? 0) ? "" : void 0
+									};
+								}, ({ e, t }, _p$) => {
+									e !== _p$?.e && setAttribute(_el$2, "aria-selected", e);
+									t !== _p$?.t && setAttribute(_el$2, "data-active", t);
 								});
 								return _el$2;
 							})()
@@ -140,10 +163,10 @@ function MentionsVessel(props) {
 						return _el$;
 					})() });
 				} });
-			} });
+			} })];
 		}
 	});
-}
+});
 /**
 * @-mentions: a plain textarea that, when the text before the caret ends
 * with the trigger character followed by a token, offers the matching
@@ -159,7 +182,7 @@ function MentionsVessel(props) {
 * own field anatomy (the AI prompt input) skip this shell and wire
 * `useMentions` plus `MentionsVessel` themselves.
 */
-function Mentions(props) {
+function MentionsImpl(props) {
 	const [own, rest] = splitProps(props, [
 		"items",
 		"value",
@@ -183,13 +206,6 @@ function Mentions(props) {
 			own.onValueChange?.(next);
 		}
 	});
-	createEffect(() => {
-		value();
-		const node = fieldEl();
-		if (!node || !(own.autoresize ?? false)) return;
-		node.style.height = "auto";
-		node.style.height = `${node.scrollHeight}px`;
-	});
 	const onInput = () => {
 		const node = fieldEl();
 		if (!node) return;
@@ -197,20 +213,13 @@ function Mentions(props) {
 		own.onValueChange?.(node.value);
 		mentions.onInput();
 	};
-	var _el$3 = _tmpl$3();
-	var _el$4 = _el$3.firstChild;
-	var _el$5 = _el$4.nextSibling;
-	spread(_el$3, [rest, {
-		"data-scope": "mentions",
-		"data-part": "root",
-		get "data-size"() {
-			return own.size ?? "md";
-		}
-	}], true);
-	insert(_el$3, createComponent(Textarea, {
+	const field = (anchorProps) => createComponent(Field.Textarea, mergeProps(anchorProps, {
 		ref: (node) => setFieldEl(node),
-		get invalid() {
-			return own.invalid;
+		get autoresize() {
+			return own.autoresize ?? false;
+		},
+		get "aria-invalid"() {
+			return own.invalid ? "true" : void 0;
 		},
 		rows: 3,
 		get placeholder() {
@@ -219,17 +228,21 @@ function Mentions(props) {
 		get value() {
 			return value();
 		},
-		onValueChange: (next) => {
-			setInternal(next);
-			own.onValueChange?.(next);
-		},
 		onInput,
 		onKeyDown: (event) => {
 			mentions.onKeydown(event);
 		},
 		"data-scope": "mentions",
 		"data-part": "textarea"
-	}), _el$4);
+	}));
+	var _el$3 = _tmpl$();
+	spread(_el$3, [rest, {
+		"data-scope": "mentions",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}], true);
 	insert(_el$3, createComponent(MentionsVessel, {
 		get open() {
 			return mentions.open();
@@ -243,9 +256,6 @@ function Mentions(props) {
 		get size() {
 			return own.size ?? "md";
 		},
-		get anchor() {
-			return fieldEl();
-		},
 		get onInsert() {
 			return mentions.insert;
 		},
@@ -254,10 +264,16 @@ function Mentions(props) {
 		},
 		onOpenChange: (open) => {
 			if (!open) mentions.close();
-		}
-	}), _el$5);
+		},
+		children: field
+	}));
 	return _el$3;
 }
-delegateEvents(["mousedown", "click"]);
+const Mentions = defineFamily(MentionsImpl, Popover$1);
+delegateEvents([
+	"mousedown",
+	"click",
+	"keydown"
+]);
 //#endregion
 export { MentionsVessel as n, useMentions as r, Mentions as t };

package/dist/select-7YjMSBGx.mjs

@@ -0,0 +1,292 @@
+import { t as defineFamily } from "./family-Cmd8HEyK.mjs";
+import { r as iconNode } from "./icon-DTqmJCd5.mjs";
+import { t as useElementId } from "./id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { For, Show, createEffect, createSignal, onMount, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { Select, createListCollection } from "@ark-ui/solid/select";
+//#region src/components/select/native.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<option value disabled>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span><select><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<option>`);
+function NativeSelect(props) {
+	injectComponentStyle("select");
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"size",
+		"invalid",
+		"placeholder",
+		"disabled",
+		"onValueChange",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	const [select, setSelect] = createSignal(null);
+	onMount(() => {
+		createEffect(() => {
+			const el = select();
+			if (el) el.value = own.value ?? "";
+		});
+	});
+	const fieldProps = field?.().getInputProps() ?? {};
+	const empty = () => own.value == null || own.value === "";
+	const off = () => own.disabled || field?.().disabled;
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	var _el$4 = _el$2.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "select",
+		"data-part": "native-root",
+		get "data-size"() {
+			return own.size ?? "md";
+		},
+		get "data-invalid"() {
+			return own.invalid || field?.().invalid ? "" : void 0;
+		},
+		get "data-disabled"() {
+			return off() ? "" : void 0;
+		},
+		get "data-placeholder-shown"() {
+			return empty() ? "" : void 0;
+		}
+	}], true);
+	ref(() => {
+		return setSelect;
+	}, _el$2);
+	spread(_el$2, [fieldProps, {
+		get "aria-label"() {
+			return own["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return own["aria-labelledby"];
+		},
+		"data-scope": "select",
+		"data-part": "native",
+		get disabled() {
+			return off() || void 0;
+		},
+		onChange: (event) => own.onValueChange?.(event.currentTarget.value)
+	}], true);
+	insert(_el$2, createComponent(Show, {
+		get when() {
+			return own.placeholder;
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			insert(_el$3, () => {
+				return own.placeholder;
+			});
+			effect(() => empty() ? void 0 : true, (_v$) => {
+				setAttribute(_el$3, "hidden", _v$);
+			});
+			return _el$3;
+		}
+	}), _el$4);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return own.options;
+		},
+		children: (option) => (() => {
+			var _el$6 = _tmpl$3();
+			insert(_el$6, () => {
+				return option.label;
+			});
+			effect(() => {
+				return {
+					e: option.value,
+					t: option.disabled
+				};
+			}, ({ e, t }, _p$) => {
+				_el$6.value = e;
+				t !== _p$?.t && setAttribute(_el$6, "disabled", t);
+			});
+			return _el$6;
+		})()
+	}), _el$5);
+	insert(_el$, () => {
+		return iconNode("chevron-down", {
+			"data-scope": "select",
+			"data-part": "native-icon"
+		});
+	}, null);
+	return _el$;
+}
+//#endregion
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	const id = useElementId("select", () => rest.id);
+	return createComponent(Select.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
+}
+function toArkValue(value) {
+	return value === void 0 || value === "" ? [] : Array.isArray(value) ? value : [value];
+}
+function SelectFacade(props) {
+	injectComponentStyle("select");
+	const collection = createListCollection({ items: props.options });
+	return createComponent(SelectRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get autoComplete() {
+			return props.autoComplete;
+		},
+		collection,
+		get deselectable() {
+			return props.deselectable;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get form() {
+			return props.form;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		lazyMount: true,
+		get multiple() {
+			return props.multiple;
+		},
+		unmountOnExit: true,
+		get name() {
+			return props.name;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get required() {
+			return props.required;
+		},
+		get defaultValue() {
+			return toArkValue(props.value ?? props.defaultValue);
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: toArkValue(props.value) };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(props.multiple ? details.value : details.value.at(0) ?? ""),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Select.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Select.Control, { get children() {
+					return [
+						createComponent(Select.Trigger, {
+							get "aria-label"() {
+								return memo(() => {
+									return !!props.label;
+								})() ? void 0 : props.placeholder;
+							},
+							get children() {
+								return createComponent(Select.ValueText, { get placeholder() {
+									return props.placeholder;
+								} });
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.clearable !== false;
+							},
+							get children() {
+								return createComponent(Select.ClearTrigger, { get children() {
+									return iconNode("x", {
+										width: "14",
+										height: "14"
+									});
+								} });
+							}
+						}),
+						createComponent(Select.Indicator, { get children() {
+							return iconNode("chevrons-up-down", {
+								width: "14",
+								height: "14"
+							});
+						} })
+					];
+				} }),
+				createComponent(Select.Positioner, { get children() {
+					return createComponent(Select.Content, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return props.groupLabel;
+							},
+							get fallback() {
+								return createComponent(Select.List, { get children() {
+									return createComponent(For, {
+										get each() {
+											return collection.items;
+										},
+										children: (item) => createComponent(Select.Item, {
+											item,
+											get children() {
+												return [createComponent(Select.ItemText, { get children() {
+													return item.label;
+												} }), createComponent(Select.ItemIndicator, { get children() {
+													return iconNode("check", {
+														width: "14",
+														height: "14"
+													});
+												} })];
+											}
+										})
+									});
+								} });
+							},
+							get children() {
+								return createComponent(Select.ItemGroup, { get children() {
+									return [createComponent(Select.ItemGroupLabel, { get children() {
+										return props.groupLabel;
+									} }), createComponent(For, {
+										get each() {
+											return collection.items;
+										},
+										children: (item) => createComponent(Select.Item, {
+											item,
+											get children() {
+												return [createComponent(Select.ItemText, { get children() {
+													return item.label;
+												} }), createComponent(Select.ItemIndicator, { get children() {
+													return iconNode("check", {
+														width: "14",
+														height: "14"
+													});
+												} })];
+											}
+										})
+									})];
+								} });
+							}
+						});
+					} });
+				} }),
+				createComponent(Select.HiddenSelect, {})
+			];
+		}
+	}));
+}
+const Select$1 = defineFamily(SelectFacade, {
+	...Select,
+	Root: SelectRoot
+});
+injectComponentStyle("select");
+//#endregion
+export { NativeSelect as n, Select$1 as t };

package/dist/{toc-CZmYEaQR.mjs → toc-DYKaKQ_X.mjs}

@@ -1,5 +1,8 @@
+import { t as defineFamily } from "./family-Cmd8HEyK.mjs";
+import { t as useElementId } from "./id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Toc } from "@ark-ui/solid/toc";
 //#region src/components/toc/TocIndicator.tsx
 /** The active stroke is decoration; hidden so the list reads as links
@@ -12,10 +15,17 @@ function TocIndicator(props) {
 /** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
 * beside the scroll, one stroke of primary ink marking where the reader
 * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
-const Toc$1 = {
+function TocRoot(props) {
+	const id = useElementId("toc", () => props.id);
+	return createComponent$1(Toc.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+const Toc$1 = defineFamily(TocRoot, {
 	...Toc,
+	Root: TocRoot,
 	Indicator: TocIndicator
-};
+});
 injectComponentStyle("toc");
 //#endregion
 export { Toc$1 as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/solid",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "By Sages Elements components for Solid — 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/solid-virtual": "3.13.40",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/solid": "1.44.0",
-    "@bysages/icons": "0.3.1",
-    "@bysages/core": "0.3.1"
+    "@bysages/core": "0.4.0"
   },
   "devDependencies": {
     "@json-render/core": "0.21.0",

package/dist/chevron-D5RzcayK.mjs

@@ -1,9 +0,0 @@
-import { template } from "@solidjs/web";
-//#region src/components/ai/chevron.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M6 4l4 4-4 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
-/** The folding chevron the shared indicator turns. */
-function chevron() {
-	return _tmpl$();
-}
-//#endregion
-export { chevron as t };

package/dist/index-DdsnfV4f.d.mts

@@ -1,16 +0,0 @@
-import { ComponentProps } from "solid-js";
-import { Toc } from "@ark-ui/solid/toc";
-//#region src/components/toc/TocIndicator.d.ts
-/** The active stroke is decoration; hidden so the list reads as links
- * alone. */
-declare function TocIndicator(props: ComponentProps<typeof Toc.Indicator>): import("solid-js").JSX.Element;
-//#endregion
-//#region src/components/toc/index.d.ts
-/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
- * beside the scroll, one stroke of primary ink marking where the reader
- * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
-declare const Toc$1: Omit<typeof Toc, "Indicator"> & {
-  Indicator: typeof TocIndicator;
-};
-//#endregion
-export { Toc$1 as t };