@bysages/solid 0.2.2 → 0.3.0

package/dist/components/layout/index.mjs

@@ -0,0 +1,192 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
+import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
+//#region src/components/layout/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<header>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<main>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<footer>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
+var _tmpl$6 = /* @__PURE__ */ template(`<aside><!><!>`);
+const LayoutContext = createContext();
+/**
+* The application skeleton: Root, Header, Sider, Content, Footer —
+* the admin arrangement dressed in the paper-and-ink surfaces. The
+* root is a full-height grid; a declared `sider` turns the columns
+* around to meet whichever edge the rail stands on.
+*/
+function LayoutRoot(props) {
+	const [own, rest] = splitProps(props, ["sider"]);
+	return createComponent(LayoutContext.Provider, {
+		value: { siderPlacement: () => own.sider },
+		get children() {
+			var _el$ = _tmpl$();
+			spread(_el$, [rest, {
+				"data-scope": "layout",
+				"data-part": "root",
+				get "data-sider"() {
+					return own.sider;
+				}
+			}], false);
+			return _el$;
+		}
+	});
+}
+function LayoutHeader(props) {
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [props, {
+		"data-scope": "layout",
+		"data-part": "header"
+	}], false);
+	return _el$2;
+}
+function LayoutContent(props) {
+	var _el$3 = _tmpl$3();
+	spread(_el$3, [props, {
+		"data-scope": "layout",
+		"data-part": "content"
+	}], false);
+	return _el$3;
+}
+function LayoutFooter(props) {
+	var _el$4 = _tmpl$4();
+	spread(_el$4, [props, {
+		"data-scope": "layout",
+		"data-part": "footer"
+	}], false);
+	return _el$4;
+}
+/** One step of the arrow-key resize, in px. */
+const RESIZE_STEP = 16;
+function LayoutSider(props) {
+	const [own, rest] = splitProps(props, [
+		"collapsed",
+		"width",
+		"collapsedWidth",
+		"resizable",
+		"minWidth",
+		"maxWidth",
+		"onCollapsedChange",
+		"onWidthChange",
+		"style",
+		"children"
+	]);
+	const collapsed = () => own.collapsed ?? false;
+	const [innerWidth, setInnerWidth] = createSignal(own.width ?? "16rem");
+	const width = () => own.width ?? innerWidth();
+	createEffect(() => {
+		const next = own.width;
+		if (next === void 0 || next === innerWidth()) return;
+		setInnerWidth(next);
+		own.onWidthChange?.(next);
+	});
+	let prevCollapsed = collapsed();
+	createEffect(() => {
+		const next = collapsed();
+		if (next === prevCollapsed) return;
+		prevCollapsed = next;
+		own.onCollapsedChange?.(next);
+	});
+	const layout = useContext(LayoutContext);
+	const [dragging, setDragging] = createSignal(false);
+	let rail;
+	let startPointerX = 0;
+	let startWidth = 0;
+	const railWidth = () => rail ? Math.round(rail.getBoundingClientRect().width) : 0;
+	const onPointerDown = (event) => {
+		setDragging(true);
+		startPointerX = event.clientX;
+		startWidth = railWidth();
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (!dragging()) return;
+		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
+		const next = Math.round(startWidth + towardFlow * (event.clientX - startPointerX));
+		setInnerWidth(`${next}px`);
+		own.onWidthChange?.(`${next}px`);
+	};
+	const onPointerUp = (event) => {
+		setDragging(false);
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+		const next = railWidth() + (widen ? RESIZE_STEP : -16);
+		setInnerWidth(`${next}px`);
+		own.onWidthChange?.(`${next}px`);
+	};
+	const handle = () => own.resizable && !collapsed() ? (() => {
+		var _el$5 = _tmpl$5();
+		_el$5._$$keydown = onKeyDown;
+		_el$5._$$pointerup = onPointerUp;
+		_el$5._$$pointermove = onPointerMove;
+		_el$5._$$pointerdown = onPointerDown;
+		effect(() => {
+			return {
+				e: dragging() ? "" : void 0,
+				t: railWidth()
+			};
+		}, ({ e, t }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
+			t !== _p$?.t && setAttribute(_el$5, "aria-valuenow", t);
+		});
+		return _el$5;
+	})() : null;
+	const foldedWidth = () => own.collapsedWidth ?? "3.5rem";
+	var _el$6 = _tmpl$6();
+	var _el$7 = _el$6.firstChild;
+	var _el$8 = _el$7.nextSibling;
+	ref(() => {
+		return (el) => rail = el;
+	}, _el$6);
+	spread(_el$6, [rest, {
+		get style() {
+			return {
+				...typeof own.style === "object" ? own.style : {},
+				"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
+				"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
+				"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
+			};
+		},
+		"data-scope": "layout",
+		"data-part": "sider",
+		get "data-collapsed"() {
+			return collapsed() ? "" : void 0;
+		},
+		get "data-dragging"() {
+			return dragging() ? "" : void 0;
+		},
+		get "data-resizable"() {
+			return own.resizable ? "" : void 0;
+		}
+	}], true);
+	insert(_el$6, (() => {
+		var _c$ = memo(() => {
+			return typeof own.children === "function";
+		});
+		return () => {
+			return _c$() ? own.children({ collapsed: collapsed() }) : own.children;
+		};
+	})(), _el$7);
+	insert(_el$6, handle, _el$8);
+	return _el$6;
+}
+const Layout = Object.assign(LayoutRoot, {
+	Root: LayoutRoot,
+	Header: LayoutHeader,
+	Sider: LayoutSider,
+	Content: LayoutContent,
+	Footer: LayoutFooter
+});
+injectComponentStyle("layout");
+delegateEvents([
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"keydown"
+]);
+//#endregion
+export { Layout };

package/dist/components/link/index.d.mts

@@ -0,0 +1,10 @@
+import { JSX } from "solid-js";
+//#region src/components/link/index.d.ts
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  underline?: "always" | "hover" | "none";
+}
+/** A link is ink in the accent's voice: quiet at rest, deepening under
+ * the hand, the halo at focus. The underline follows the prose —
+ * always, on hover, or never. */
+export declare function Link(props: LinkProps): JSX.Element;
+//#endregion

package/dist/components/link/index.mjs

@@ -0,0 +1,24 @@
+import { injectComponentStyle } from "@bysages/core";
+import { claimElement, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/link/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<a>`);
+/** A link is ink in the accent's voice: quiet at rest, deepening under
+* the hand, the halo at focus. The underline follows the prose —
+* always, on hover, or never. */
+function Link(props) {
+	injectComponentStyle("link");
+	const [own, rest] = splitProps(props, ["underline"]);
+	var _el$ = _tmpl$();
+	claimElement(_el$);
+	spread(_el$, [rest, {
+		"data-scope": "link",
+		"data-part": "root",
+		get "data-underline"() {
+			return own.underline ?? "hover";
+		}
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Link };

package/dist/components/list/index.d.mts

@@ -0,0 +1,26 @@
+import { Component, JSX } from "solid-js";
+//#region src/components/list/index.d.ts
+export interface ListRootProps extends JSX.HTMLAttributes<HTMLUListElement> {
+  /** One hairline between rows. */
+  bordered?: boolean;
+  /** Every row answers the pointer with a wash. */
+  hoverable?: boolean;
+}
+declare function Root(props: ListRootProps): JSX.Element;
+export interface ListContentProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** The row's title, riding its own part above the words. */
+  title?: JSX.Element;
+  /** The quiet echo beneath the title. */
+  description?: JSX.Element;
+}
+/** The row's words: `title` and `description` ride their own named
+ * parts, the children follow them for anything else. */
+declare function Content(props: ListContentProps): JSX.Element;
+export declare const List: typeof Root & {
+  Root: typeof Root;
+  Item: Component<JSX.HTMLAttributes<HTMLElement>>;
+  Leading: Component<JSX.HTMLAttributes<HTMLElement>>;
+  Content: typeof Content;
+  Actions: Component<JSX.HTMLAttributes<HTMLElement>>;
+};
+//#endregion

package/dist/components/list/index.mjs

@@ -0,0 +1,97 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/list/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=list data-part=title>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=list data-part=description>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div><!><!><!>`);
+/** A ledger of rows: Root is the list, Item one row, Leading the mark
+* before the words, Content the title and its quiet echo, Actions the
+* way out. The bordered variant draws the hairlines; the hoverable
+* variant gives every row the wash — and any row the caller makes
+* clickable (role="button") answers the pointer on its own. */
+function part(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "list",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Item = part("Item", "li");
+const Leading = part("Leading", "div");
+const Actions = part("Actions", "div");
+function Root(props) {
+	const [own, rest] = splitProps(props, ["bordered", "hoverable"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "list",
+		"data-part": "root",
+		get "data-bordered"() {
+			return own.bordered || void 0;
+		},
+		get "data-hoverable"() {
+			return own.hoverable || void 0;
+		}
+	}], false);
+	return _el$;
+}
+/** The row's words: `title` and `description` ride their own named
+* parts, the children follow them for anything else. */
+function Content(props) {
+	const [own, rest] = splitProps(props, [
+		"title",
+		"description",
+		"children"
+	]);
+	var _el$2 = _tmpl$4();
+	var _el$4 = _el$2.firstChild;
+	var _el$6 = _el$4.nextSibling;
+	var _el$7 = _el$6.nextSibling;
+	spread(_el$2, [rest, {
+		"data-scope": "list",
+		"data-part": "content"
+	}], true);
+	insert(_el$2, createComponent(Show, {
+		get when() {
+			return own.title;
+		},
+		get children() {
+			var _el$3 = _tmpl$2();
+			insert(_el$3, () => {
+				return own.title;
+			});
+			return _el$3;
+		}
+	}), _el$4);
+	insert(_el$2, createComponent(Show, {
+		get when() {
+			return own.description;
+		},
+		get children() {
+			var _el$5 = _tmpl$3();
+			insert(_el$5, () => {
+				return own.description;
+			});
+			return _el$5;
+		}
+	}), _el$6);
+	insert(_el$2, () => {
+		return own.children;
+	}, _el$7);
+	return _el$2;
+}
+const List = Object.assign(Root, {
+	Root,
+	Item,
+	Leading,
+	Content,
+	Actions
+});
+injectComponentStyle("list");
+//#endregion
+export { List };

package/dist/components/listbox/index.d.mts

@@ -0,0 +1,17 @@
+import { CollectionItem } from "@ark-ui/solid/collection";
+import { Listbox as Listbox$1, ListboxRootProps } from "@ark-ui/solid/listbox";
+//#region src/components/listbox/index.d.ts
+/** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
+ * where the checked row alone takes the flat primary fill. The API is
+ * Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
+ * ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
+ * createListCollection. */
+type ListboxOwnProps = {
+  /** One rung of the ladder for the row register and the filter field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootProps<T> & ListboxOwnProps): import("solid-js").JSX.Element;
+export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+  Root: typeof ListboxRoot;
+};
+//#endregion

package/dist/components/listbox/index.mjs

@@ -0,0 +1,19 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
+//#region src/components/listbox/index.tsx
+const ArkRoot = Listbox$1.Root;
+function ListboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const Listbox = {
+	...Listbox$1,
+	Root: ListboxRoot
+};
+injectComponentStyle("listbox");
+//#endregion
+export { Listbox };

package/dist/components/marquee/index.d.mts

@@ -0,0 +1,7 @@
+import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
+//#region src/components/marquee/index.d.ts
+/** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
+ * seal-cut chips that dissolves into the paper at its edges rather than
+ * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
+export declare const Marquee: typeof Marquee$1;
+//#endregion

package/dist/components/marquee/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
+//#region src/components/marquee/index.ts
+/** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
+* seal-cut chips that dissolves into the paper at its edges rather than
+* cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
+const Marquee = Marquee$1;
+injectComponentStyle("marquee");
+//#endregion
+export { Marquee };

package/dist/components/masonry/index.d.mts

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+//#region src/components/masonry/index.d.ts
+/** A wall of uneven heights: items flow down each column before
+ * crossing to the next, so the order is column-first. A row-flow wall
+ * would need grid masonry, which browsers do not ship yet. */
+export interface MasonryProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  columns?: number;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare function Masonry(props: MasonryProps): JSX.Element;
+//#endregion

package/dist/components/masonry/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/masonry/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The same named steps of the space ramp the stack uses — one
+* vocabulary of distance across the layout primitives. */
+const gapVars = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Masonry(props) {
+	injectComponentStyle("masonry");
+	const [own, rest] = splitProps(props, ["columns", "gap"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-masonry-columns": String(own.columns ?? 3),
+				"--bs-masonry-gap": gapVars[own.gap ?? "md"] ?? gapVars.md
+			};
+		},
+		"data-scope": "masonry",
+		"data-part": "root"
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Masonry };

package/dist/components/mentions/index.d.mts

@@ -0,0 +1,2 @@
+import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-DDX7x8aT.mjs";
+export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -0,0 +1,3 @@
+import "../textarea/index.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-f5Js_2W7.mjs";
+export { Mentions, MentionsVessel, useMentions };

package/dist/components/menu/index.d.mts

@@ -0,0 +1,13 @@
+import { Menu as Menu$1 } from "@ark-ui/solid/menu";
+//#region src/components/menu/index.d.ts
+type MenuOwnProps = {
+  /** One rung of the control-height ladder for the vessel's rows. */
+  size?: "sm" | "md" | "lg";
+};
+declare function MenuRoot(props: Parameters<typeof Menu$1.Root>[0] & MenuOwnProps): import("solid-js").JSX.Element;
+declare function MenuContent(props: Parameters<typeof Menu$1.Content>[0]): import("solid-js").JSX.Element;
+export declare const Menu: Omit<typeof Menu$1, "Root" | "Content"> & {
+  Root: typeof MenuRoot;
+  Content: typeof MenuContent;
+};
+//#endregion

package/dist/components/menu/index.mjs

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { createContext, splitProps, useContext } from "solid-js";
+import { Menu as Menu$1 } from "@ark-ui/solid/menu";
+//#region src/components/menu/index.tsx
+/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
+* elevation, hover as light on the row, checked items as the flat ink fill.
+* The API is Ark's own — Root, Trigger, ContextTrigger, Indicator, Positioner,
+* Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
+* TriggerItem, Separator, Arrow, ArrowTip. */
+/** The row rung rides the context because Ark's Root renders no DOM of
+* its own — the vessel (Content) is the element the rung can land on,
+* and the Portal breaks CSS ancestry between the two. The getter keeps
+* the rung live, so a bound size retunes an open vessel. */
+const MenuSizeContext = createContext();
+function MenuRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(MenuSizeContext.Provider, {
+		value: () => own.size ?? "md",
+		get children() {
+			return createComponent(Menu$1.Root, rest);
+		}
+	});
+}
+function MenuContent(props) {
+	const size = useContext(MenuSizeContext);
+	return createComponent(Menu$1.Content, mergeProps(props, { get "data-size"() {
+		return size?.() ?? "md";
+	} }));
+}
+const Menu = {
+	...Menu$1,
+	Root: MenuRoot,
+	Content: MenuContent
+};
+injectComponentStyle("menu");
+//#endregion
+export { Menu };

package/dist/components/menubar/index.d.mts

@@ -0,0 +1,32 @@
+import { JSX } from "solid-js";
+//#region src/components/menubar/index.d.ts
+export interface MenubarEntry {
+  label: string;
+  value: string;
+  danger?: boolean;
+  disabled?: boolean;
+}
+export interface MenubarGroup {
+  label: string;
+  items: MenubarEntry[];
+}
+export interface MenubarProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** The menus across the bar, each with its entries. */
+  items?: MenubarGroup[];
+  /** Called with the entry's `value` when it is chosen. */
+  onSelect?: (value: string) => void;
+}
+/**
+ * A desktop-style menu bar: a row of quiet ghost triggers, each opening
+ * the same paper vessel as the menu family. The triggers are our own
+ * buttons grafted onto the menu machine's trigger via `asChild` — the
+ * machine keeps the trigger element (positioning, focus restore,
+ * `data-state`) while the element wears the menubar scope. The popups
+ * keep the menu parts untouched, so the menu stylesheet dresses them.
+ *
+ * Keyboard note: the triggers move between each other with Tab, not
+ * arrow keys — cross-menu arrow traversal is out of scope for this
+ * version. Inside an open menu the machine handles arrows and Escape.
+ */
+export declare function Menubar(props: MenubarProps): JSX.Element;
+//#endregion

package/dist/components/menubar/index.mjs

@@ -0,0 +1,83 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { For, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Menu } from "@ark-ui/solid/menu";
+//#region src/components/menubar/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+/**
+* A desktop-style menu bar: a row of quiet ghost triggers, each opening
+* the same paper vessel as the menu family. The triggers are our own
+* buttons grafted onto the menu machine's trigger via `asChild` — the
+* machine keeps the trigger element (positioning, focus restore,
+* `data-state`) while the element wears the menubar scope. The popups
+* keep the menu parts untouched, so the menu stylesheet dresses them.
+*
+* Keyboard note: the triggers move between each other with Tab, not
+* arrow keys — cross-menu arrow traversal is out of scope for this
+* version. Inside an open menu the machine handles arrows and Escape.
+*/
+function Menubar(props) {
+	injectComponentStyle("menubar");
+	injectComponentStyle("menu");
+	const [own, rest] = splitProps(props, ["items", "onSelect"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "menubar",
+		"data-part": "root",
+		role: "menubar"
+	}], true);
+	insert(_el$, createComponent(For, {
+		get each() {
+			return own.items ?? [];
+		},
+		children: (group) => createComponent(Menu.Root, {
+			positioning: { placement: "bottom-start" },
+			get children() {
+				return [createComponent(Menu.Trigger, { asChild: (triggerProps) => (() => {
+					var _el$2 = _tmpl$2();
+					spread(_el$2, [triggerProps, {
+						type: "button",
+						"data-scope": "menubar",
+						"data-part": "trigger"
+					}], true);
+					insert(_el$2, () => {
+						return group.label;
+					});
+					return _el$2;
+				})() }), createComponent(Portal, { get children() {
+					return createComponent(Menu.Positioner, { get children() {
+						return createComponent(Menu.Content, { get children() {
+							return createComponent(For, {
+								get each() {
+									return group.items;
+								},
+								children: (entry) => createComponent(Menu.Item, {
+									get value() {
+										return entry.value;
+									},
+									get disabled() {
+										return entry.disabled;
+									},
+									get "data-danger"() {
+										return entry.danger ? "" : void 0;
+									},
+									onSelect: () => own.onSelect?.(entry.value),
+									get children() {
+										return createComponent(Menu.ItemText, { get children() {
+											return entry.label;
+										} });
+									}
+								})
+							});
+						} });
+					} });
+				} })];
+			}
+		})
+	}));
+	return _el$;
+}
+//#endregion
+export { Menubar };

package/dist/components/meter/index.d.mts

@@ -0,0 +1,21 @@
+import { JSX } from "solid-js";
+//#region src/components/meter/index.d.ts
+export interface MeterRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The measured value — clamped between min and max. */
+  value: number;
+  min?: number;
+  max?: number;
+  /** The pigment the ink rides: primary unless a threshold is crossed. */
+  level?: "normal" | "success" | "warning" | "danger";
+  label?: string;
+  /** One rung of the groove ladder — the track's thickness. */
+  size?: "sm" | "md" | "lg";
+}
+declare function Root(props: MeterRootProps): JSX.Element;
+export declare const Meter: typeof Root & {
+  Root: typeof Root;
+  Label: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+  ValueText: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+  Track: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+};
+//#endregion