@bysages/react 0.3.1 → 0.4.1

package/dist/components/layout/index.mjs

@@ -1,20 +1,105 @@
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Splitter } from "@ark-ui/react/splitter";
 //#region src/components/layout/index.tsx
 const LAYOUT_CONTEXT = createContext(null);
+/** One step of Ark's keyboard resize, converted to a splitter percentage
+* at render time so the public behavior remains a 16px move. */
+const RESIZE_STEP = 16;
 /**
 * 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 Root({ sider, children, ...rest }) {
+function Root({ sider, children, style, ...rest }) {
+	const [siderState, setSiderState] = useState(null);
+	const [rootWidth, setRootWidth] = useState(0);
+	const siderStateRef = useRef(siderState);
+	const resizeHandlers = useRef({
+		start: () => {},
+		resize: () => {},
+		end: () => {}
+	});
+	siderStateRef.current = siderState;
+	const splitterRoot = useRef(null);
+	const splitterActive = !!sider;
+	useEffect(() => {
+		const element = splitterActive ? splitterRoot.current : null;
+		if (!element || typeof ResizeObserver === "undefined") {
+			if (!element) setRootWidth(0);
+			else setRootWidth(element.getBoundingClientRect().width);
+			return;
+		}
+		const observer = new ResizeObserver(() => {
+			setRootWidth(element.getBoundingClientRect().width);
+		});
+		observer.observe(element);
+		setRootWidth(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [splitterActive]);
+	const context = useMemo(() => ({
+		siderPlacement: () => sider,
+		getSiderState: () => siderStateRef.current,
+		setSiderState,
+		setResizeHandlers: (handlers) => {
+			resizeHandlers.current = handlers;
+		},
+		resizeStart: () => resizeHandlers.current.start(),
+		resize: (width) => resizeHandlers.current.resize(width),
+		resizeEnd: () => resizeHandlers.current.end()
+	}), [sider]);
+	const keyboardResizeBy = rootWidth > 0 ? RESIZE_STEP / rootWidth * 100 : RESIZE_STEP;
+	const panels = useMemo(() => {
+		if (!siderState) return [];
+		const rail = {
+			id: "sider",
+			minSize: siderState.minWidth,
+			maxSize: siderState.maxWidth
+		};
+		const flow = {
+			id: "flow",
+			minSize: "0px"
+		};
+		return sider === "end" ? [flow, rail] : [rail, flow];
+	}, [sider, siderState]);
+	const size = useMemo(() => sider === "end" ? [void 0, siderState?.width] : [siderState?.width, void 0], [sider, siderState?.width]);
+	const siderIndex = sider === "end" ? 1 : 0;
+	const callerStyle = style ?? {};
+	const gridStyle = {
+		...callerStyle,
+		display: callerStyle.display ?? "grid",
+		width: callerStyle.width ?? "auto",
+		height: callerStyle.height ?? "auto",
+		overflow: callerStyle.overflow ?? "visible"
+	};
 	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
-		value: { siderPlacement: () => sider },
-		children: /* @__PURE__ */ jsx("div", {
+		value: context,
+		children: splitterActive ? /* @__PURE__ */ jsx(Splitter.Root, {
+			ref: splitterRoot,
+			asChild: true,
+			panels,
+			size,
+			keyboardResizeBy,
+			onResize: (details) => {
+				const width = rootWidth * (details.size[siderIndex] ?? 0) / 100;
+				if (width > 0) context.resize(width);
+			},
+			onResizeStart: context.resizeStart,
+			onResizeEnd: context.resizeEnd,
+			children: /* @__PURE__ */ jsx("div", {
+				...rest,
+				style: gridStyle,
+				"data-scope": "layout",
+				"data-part": "root",
+				"data-sider": sider,
+				children
+			})
+		}) : /* @__PURE__ */ jsx("div", {
 			...rest,
+			style: gridStyle,
 			"data-scope": "layout",
 			"data-part": "root",
 			"data-sider": sider,
@@ -26,27 +111,59 @@ function Root({ sider, children, ...rest }) {
 * main content each land on their native element and their grid area. */
 function region(name, tag) {
 	const Tag = tag;
-	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
-		...rest,
-		"data-scope": "layout",
-		"data-part": name.toLowerCase(),
-		children
-	});
+	const Component = ({ children, ...rest }) => {
+		const layout = useContext(LAYOUT_CONTEXT);
+		const splitPanel = name === "Content" && !!layout?.siderPlacement() && !!layout.getSiderState()?.resizable && !layout.getSiderState().collapsed;
+		return /* @__PURE__ */ jsx(Tag, {
+			...rest,
+			"data-scope": "layout",
+			"data-part": name.toLowerCase(),
+			children: splitPanel ? /* @__PURE__ */ jsx(Splitter.Panel, {
+				id: "flow",
+				children
+			}) : children
+		});
+	};
 	Component.displayName = "Layout" + name;
 	return Component;
 }
 const Header = region("Header", "header");
 const Content = region("Content", "main");
 const Footer = region("Footer", "footer");
-/** One step of the arrow-key resize, in px. */
-const RESIZE_STEP = 16;
 function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
 	const layout = useContext(LAYOUT_CONTEXT);
 	const messages = useComponentMessages();
-	const rail = useRef(null);
 	const [dragging, setDragging] = useState(false);
+	const active = resizable && !collapsed;
+	useEffect(() => {
+		if (!active) setDragging(false);
+	}, [active]);
 	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
 	const width = widthProp !== void 0 ? widthProp : innerWidth;
+	useEffect(() => {
+		layout?.setSiderState((previous) => previous ? {
+			...previous,
+			resizable,
+			collapsed,
+			width,
+			minWidth,
+			maxWidth
+		} : {
+			resizable,
+			collapsed,
+			width,
+			minWidth,
+			maxWidth
+		});
+	}, [
+		layout,
+		resizable,
+		collapsed,
+		width,
+		minWidth,
+		maxWidth
+	]);
+	useEffect(() => () => layout?.setSiderState(null), [layout]);
 	const prevCollapsed = useRef(collapsed);
 	useEffect(() => {
 		if (prevCollapsed.current === collapsed) return;
@@ -60,55 +177,32 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		setInnerWidth(widthProp);
 		onWidthChange?.(widthProp);
 	}, [widthProp, onWidthChange]);
-	const applyWidth = (next) => {
-		setInnerWidth(next);
-		onWidthChange?.(next);
-	};
-	const dragStart = useRef({
-		x: 0,
-		width: 0
-	});
-	const onPointerDown = (event) => {
-		setDragging(true);
-		dragStart.current = {
-			x: event.clientX,
-			width: rail.current ? rail.current.getBoundingClientRect().width : 0
-		};
-		event.currentTarget.setPointerCapture(event.pointerId);
-	};
-	const onPointerMove = (event) => {
-		if (!dragging) return;
-		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
-		applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}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 current = rail.current ? rail.current.getBoundingClientRect().width : 0;
-		applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
-	};
-	const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
-		"data-scope": "layout",
-		"data-part": "sider-resize",
-		"data-dragging": dragging ? "" : void 0,
-		role: "separator",
-		"aria-orientation": "vertical",
-		tabIndex: 0,
-		"aria-label": messages.sidebar.resize,
-		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
-		onPointerDown,
-		onPointerMove,
-		onPointerUp,
-		onKeyDown
-	}) : null;
-	return /* @__PURE__ */ jsxs("aside", {
+	useEffect(() => {
+		layout?.setResizeHandlers({
+			start: () => setDragging(true),
+			resize: (nextWidth) => {
+				const next = `${Math.round(nextWidth)}px`;
+				setInnerWidth(next);
+				onWidthChange?.(next);
+			},
+			end: () => setDragging(false)
+		});
+		return () => layout?.setResizeHandlers({
+			start: () => {},
+			resize: () => {},
+			end: () => {}
+		});
+	}, [layout, onWidthChange]);
+	const contents = typeof children === "function" ? children({ collapsed }) : children;
+	const body = active ? /* @__PURE__ */ jsxs(Splitter.Panel, {
+		id: "sider",
+		children: [contents, /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+			id: layout?.siderPlacement() === "end" ? "flow:sider" : "sider:flow",
+			"aria-label": messages.sidebar.resize
+		})]
+	}) : contents;
+	return /* @__PURE__ */ jsx("aside", {
 		...rest,
-		ref: rail,
 		style: {
 			...style,
 			"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
@@ -119,8 +213,8 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		"data-part": "sider",
 		"data-collapsed": collapsed ? "" : void 0,
 		"data-dragging": dragging ? "" : void 0,
-		"data-resizable": resizable ? "" : void 0,
-		children: [typeof children === "function" ? children({ collapsed }) : children, handle]
+		"data-resizable": active ? "" : void 0,
+		children: body
 	});
 }
 const Layout = Object.assign(Root, {

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

@@ -6,5 +6,8 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 /** 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({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+declare function LinkImpl({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+export declare const Link: typeof LinkImpl & {
+  Root: typeof LinkImpl;
+};
 //#endregion

package/dist/components/link/index.mjs

@@ -1,10 +1,11 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/link/index.tsx
 /** 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({ underline = "hover", children, ...rest }) {
+function LinkImpl({ underline = "hover", children, ...rest }) {
 	injectComponentStyle("link");
 	return /* @__PURE__ */ jsx("a", {
 		...rest,
@@ -14,5 +15,6 @@ function Link({ underline = "hover", children, ...rest }) {
 		children
 	});
 }
+const Link = withSelfRoot(LinkImpl);
 //#endregion
 export { Link };

package/dist/components/list/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list/index.tsx
 /** A ledger of rows: Root is the list, Item one row, Leading the mark

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Listbox as Listbox$1, ListboxRootComponentProps, createListCollection } from "@ark-ui/react/listbox";
 //#region src/components/listbox/index.d.ts
@@ -11,7 +12,27 @@ type ListboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootComponentProps<T, ListboxOwnProps>): import("react").JSX.Element;
-export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+type ListboxOption = {
+  label: string;
+  value: string;
+};
+type ListboxFacadeValue = string | string[];
+type ListboxFacadeProps = {
+  value?: ListboxFacadeValue;
+  defaultValue?: ListboxFacadeValue;
+  options: ListboxOption[];
+  multiple?: boolean;
+  disabled?: boolean;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value?: ListboxFacadeValue) => void;
+};
+/** The complete listbox behind one model value: options become rows and the
+ * label names the quiet register. */
+declare function ListboxFacade(props: ListboxFacadeProps): import("react").JSX.Element;
+export declare const Listbox: typeof ListboxFacade & Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
 //#endregion

package/dist/components/listbox/index.mjs

@@ -1,18 +1,50 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+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 { Listbox as Listbox$1, createListCollection } from "@ark-ui/react/listbox";
 //#region src/components/listbox/index.tsx
 function ListboxRoot(props) {
+	injectComponentStyle("listbox");
+	const id = useElementId("listbox", props);
 	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Listbox$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const Listbox = {
+function toListboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+/** The complete listbox behind one model value: options become rows and the
+* label names the quiet register. */
+function ListboxFacade(props) {
+	const { value, defaultValue, options, multiple, disabled, label, size = "md", className, style, onValueChange } = props;
+	const collection = createListCollection({ items: options });
+	return /* @__PURE__ */ jsxs(ListboxRoot, {
+		size,
+		collection,
+		defaultValue: toListboxValue(defaultValue),
+		value: toListboxValue(value),
+		disabled,
+		selectionMode: multiple ? "multiple" : "single",
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(multiple ? event.value : event.value.at(0)),
+		children: [label ? /* @__PURE__ */ jsx(Listbox$1.Label, { children: label }) : null, /* @__PURE__ */ jsx(Listbox$1.Content, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Listbox$1.Item, {
+			item,
+			children: [/* @__PURE__ */ jsx(Listbox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Listbox$1.ItemIndicator, { children: iconNode("check", {
+				width: 14,
+				height: 14
+			}) })]
+		}, item.value)) })]
+	});
+}
+const Listbox = Object.assign(ListboxFacade, {
 	...Listbox$1,
 	Root: ListboxRoot
-};
-injectComponentStyle("listbox");
+});
 //#endregion
 export { Listbox, createListCollection };

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

@@ -1,7 +1,24 @@
+import { CSSProperties, ComponentProps } from "react";
 import { Marquee as Marquee$1 } from "@ark-ui/react/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;
+declare function MarqueeRoot(props: ComponentProps<typeof Marquee$1.Root>): import("react").JSX.Element;
+type MarqueeItem = string | {
+  label: string;
+};
+type MarqueeFacadeProps = {
+  items: MarqueeItem[];
+  spacing?: string;
+  speed?: number;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+/** The complete ribbon behind a list of short marks. */
+declare function MarqueeFacade(props: MarqueeFacadeProps): import("react").JSX.Element;
+export declare const Marquee: typeof MarqueeFacade & Omit<typeof Marquee$1, "Root"> & {
+  Root: typeof MarqueeRoot;
+};
 //#endregion

package/dist/components/marquee/index.mjs

@@ -1,10 +1,42 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
 //#region src/components/marquee/index.tsx
 /** 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");
+function MarqueeRoot(props) {
+	injectComponentStyle("marquee");
+	const id = useElementId("marquee", props);
+	return /* @__PURE__ */ jsx(Marquee$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete ribbon behind a list of short marks. */
+function MarqueeFacade(props) {
+	const { items, spacing, speed, label, className, style } = props;
+	const labels = items.map((item) => typeof item === "string" ? item : item.label);
+	return /* @__PURE__ */ jsx(MarqueeRoot, {
+		"aria-label": label,
+		spacing,
+		speed,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Marquee$1.Viewport, { children: /* @__PURE__ */ jsx(Marquee$1.Content, { children: labels.map((item, index) => /* @__PURE__ */ jsxs(Marquee$1.Item, { children: [/* @__PURE__ */ jsx("svg", {
+			width: 16,
+			height: 16,
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M12 3 3 9l9 12 9-12-9-6Z" })
+		}), /* @__PURE__ */ jsx("span", { children: item })] }, `${item}-${index}`)) }) })
+	});
+}
+const Marquee = Object.assign(MarqueeFacade, {
+	...Marquee$1,
+	Root: MarqueeRoot
+});
 //#endregion
 export { Marquee };

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

@@ -7,5 +7,8 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
   columns?: number;
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 }
-export declare function Masonry({ columns, gap, ...rest }: MasonryProps): import("react").JSX.Element;
+declare function MasonryImpl({ columns, gap, ...rest }: MasonryProps): import("react").JSX.Element;
+export declare const Masonry: typeof MasonryImpl & {
+  Root: typeof MasonryImpl;
+};
 //#endregion

package/dist/components/masonry/index.mjs

@@ -1,4 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/masonry/index.tsx
 /** The same named steps of the space ramp the stack uses — one
@@ -11,7 +12,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Masonry({ columns = 3, gap = "md", ...rest }) {
+function MasonryImpl({ columns = 3, gap = "md", ...rest }) {
 	injectComponentStyle("masonry");
 	const style = {
 		...rest.style,
@@ -25,5 +26,6 @@ function Masonry({ columns = 3, gap = "md", ...rest }) {
 		"data-part": "root"
 	});
 }
+const Masonry = withSelfRoot(MasonryImpl);
 //#endregion
 export { Masonry };

package/dist/components/media-player/index.d.mts

@@ -0,0 +1,2 @@
+import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-BcRdWGY-.mjs";
+export { Audio, type MediaPlayerProps, type MediaSourceOption, type MediaTextTrackOption, Video, formatMediaTime };

package/dist/components/media-player/index.mjs

@@ -0,0 +1,2 @@
+import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-DjVvo1_7.mjs";
+export { Audio, Video, formatMediaTime };

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

@@ -1,2 +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-Uefyw7Im.mjs";
+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-Bbg4heDO.mjs";
 export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -1,2 +1,2 @@
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-DMIBCBOd.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-BwnyvdXz.mjs";
 export { Mentions, MentionsVessel, useMentions };

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

@@ -1,20 +1,38 @@
+import { ComponentProps } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
 //#region src/components/menu/index.d.ts
-type MenuRootProps = Parameters<typeof Menu$1.Root>[0] & {
+type MenuRootProps = ComponentProps<typeof Menu$1.Root> & {
   /** One rung of the control-height ladder for the vessel's rows. */
   size?: "sm" | "md" | "lg";
 };
-declare function MenuRoot({ size, ...rest }: MenuRootProps): import("react").JSX.Element;
-declare function MenuContent(props: Parameters<typeof Menu$1.Content>[0]): import("react").JSX.Element;
-/** 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 parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
- * Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
- * TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
- * spread copies the members so Root and Content can be the sized
- * wrappers while the rest stay Ark's own parts. */
-export declare const Menu: Omit<typeof Menu$1, "Root" | "Content"> & {
+declare function MenuRoot(props: MenuRootProps): import("react").JSX.Element;
+declare function MenuContent(props: ComponentProps<typeof Menu$1.Content>): import("react").JSX.Element;
+/** One plain row in the callable menu; richer checkboxes, radios, and
+ * nested menus stay on the anatomy. */
+export interface MenuItemOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+type MenuPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface MenuFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  items: MenuItemOption[];
+  disabled?: boolean;
+  placement?: MenuPlacement;
+  size?: "sm" | "md" | "lg";
+  onSelect?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function MenuFacade({ open, defaultOpen, trigger, items, disabled, placement, size, onSelect, onOpenChange }: MenuFacadeProps): import("react").JSX.Element;
+declare namespace MenuFacade {
+  var displayName: string;
+}
+type MenuParts = Omit<typeof Menu$1, "Root" | "Content"> & {
   Root: typeof MenuRoot;
   Content: typeof MenuContent;
 };
+export declare const Menu: typeof MenuFacade & MenuParts;
 //#endregion

package/dist/components/menu/index.mjs

@@ -1,5 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+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 { createContext, useContext } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
 //#region src/components/menu/index.tsx
@@ -7,10 +9,15 @@ import { Menu as Menu$1 } from "@ark-ui/react/menu";
 * its own — the vessel (Content) is the element the rung can land on,
 * and the Portal breaks CSS ancestry between the two. */
 const MenuSizeContext = createContext("md");
-function MenuRoot({ size = "md", ...rest }) {
+function MenuRoot(props) {
+	const id = useElementId("menu", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(MenuSizeContext.Provider, {
 		value: size,
-		children: /* @__PURE__ */ jsx(Menu$1.Root, { ...rest })
+		children: /* @__PURE__ */ jsx(Menu$1.Root, {
+			...rest,
+			id
+		})
 	});
 }
 function MenuContent(props) {
@@ -20,18 +27,33 @@ function MenuContent(props) {
 		"data-size": size
 	});
 }
-/** 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 parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
-* Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
-* TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
-* spread copies the members so Root and Content can be the sized
-* wrappers while the rest stay Ark's own parts. */
-const Menu = {
+function MenuFacade({ open, defaultOpen, trigger, items, disabled = false, placement = "bottom-start", size = "md", onSelect, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		size,
+		positioning: { placement },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onSelect: (details) => onSelect?.(details.value),
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsxs(Menu$1.Trigger, {
+			disabled,
+			children: [trigger, /* @__PURE__ */ jsx(Menu$1.Indicator, { children: iconNode("chevron-down", {
+				width: 14,
+				height: 14
+			}) })]
+		}), /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(MenuContent, { children: items.map((item) => /* @__PURE__ */ jsx(Menu$1.Item, {
+			value: item.value,
+			disabled: item.disabled,
+			children: item.label
+		}, item.value)) }) })]
+	});
+}
+MenuFacade.displayName = "SMenu";
+const Menu = Object.assign(MenuFacade, {
 	...Menu$1,
 	Root: MenuRoot,
 	Content: MenuContent
-};
+});
 injectComponentStyle("menu");
 //#endregion
 export { Menu };