@bysages/react 0.2.2 → 0.3.0

package/dist/components/image-viewer/index.mjs

@@ -0,0 +1,110 @@
+import { Button } from "../button/index.mjs";
+import { ButtonGroup } from "../button-group/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/image-viewer/index.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's line-drawn glyphs, fresh per render. */
+const TOOL_GLYPHS = {
+	zoomIn: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
+		/* @__PURE__ */ jsx("path", { d: "M11 8v6" })
+	] }),
+	zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+	] }),
+	rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
+	close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
+};
+function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
+	injectComponentStyle("image-viewer");
+	const [localOpen, setLocalOpen] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const isOpen = open ?? localOpen;
+	const setOpen = (value) => {
+		if (open === void 0) setLocalOpen(value);
+		onOpenChange?.(value);
+	};
+	useEffect(() => {
+		if (isOpen) {
+			setScale(1);
+			setRotation(0);
+		}
+	}, [isOpen]);
+	function zoom(step) {
+		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
+	}
+	function rotate() {
+		setRotation((current) => (current + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: glyph()
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: "bs-image-viewer-positioner",
+			children: /* @__PURE__ */ jsxs(Dialog.Content, {
+				className: "bs-image-viewer-content",
+				"aria-label": alt || "Image preview",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					"data-scope": "image-viewer",
+					"data-part": "viewport",
+					src,
+					alt,
+					style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
+						toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
+						toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
+					] })
+				})]
+			})
+		})] })
+	});
+}
+//#endregion
+export { ImageViewer };

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

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from "react";
+//#region src/components/input/index.d.ts
+/** The bare text input: the field recipe — border, surface, focus halo —
+ * on a native control. Standing alone it styles itself from the `invalid`
+ * prop; inside a `Field.Root` it consumes the field context, picking up
+ * the label id, the described-by wiring and the invalid state for free,
+ * which is also the seam the Form validation layer will drive. Disabled
+ * rides the native attribute. */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  value?: string | number;
+  size?: "sm" | "md" | "lg";
+  invalid?: boolean;
+  /** Entry mask - `9` digit, `a` letter, `*` either, anything else is
+   * literal. e.g. `"999-99-9999"`, `"(999) 999-9999"`. */
+  mask?: string;
+  onValueChange?: (value: string) => void;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion

package/dist/components/input/index.mjs

@@ -0,0 +1,2 @@
+import { t as Input } from "../../input-2oezH-dY.mjs";
+export { Input };

package/dist/components/input-group/index.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+//#region src/components/input-group/index.d.ts
+export type InputGroupPartProps = HTMLAttributes<HTMLDivElement>;
+export declare const InputGroup: {
+  ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+    displayName: string;
+  };
+  Addon: {
+    ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/input-group/index.mjs

@@ -0,0 +1,31 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input-group/index.tsx
+function part(name) {
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "input-group",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "InputGroup" + name;
+	return Component;
+}
+/**
+* Merged controls: attachments and the entry fused into one seal. The
+* Root draws the single hairline and carries the group's focus halo;
+* the Addon is a recessed cell for the reader's fixed words — a scheme,
+* a unit, a quiet button — placed before or after the entry. Put our
+* Input (or Textarea) inside and its own border and halo step aside in
+* favor of the group's; the stylesheet does the merging, the wrapper
+* adds no visuals of its own.
+*/
+const Root = part("Root");
+const Addon = part("Addon");
+const InputGroup = Object.assign(Root, {
+	Root,
+	Addon
+});
+injectComponentStyle("input-group");
+//#endregion
+export { InputGroup };

package/dist/components/json-tree-view/index.d.mts

@@ -0,0 +1,7 @@
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+//#region src/components/json-tree-view/index.d.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The API is
+ * Ark's own — Root, Tree, plus createJsonTreeCollection. */
+export declare const JsonTreeView: typeof JsonTreeView$1;
+//#endregion

package/dist/components/json-tree-view/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+//#region src/components/json-tree-view/index.tsx
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The API is
+* Ark's own — Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = JsonTreeView$1;
+injectComponentStyle("json-tree-view");
+//#endregion
+export { JsonTreeView };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+//#region src/components/kbd/index.d.ts
+/** A keycap in miniature, riding the type it annotates. */
+export type KbdProps = HTMLAttributes<HTMLElement>;
+export declare function Kbd({ children, ...rest }: KbdProps): import("react").JSX.Element;
+//#endregion

package/dist/components/kbd/index.mjs

@@ -0,0 +1,14 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd/index.tsx
+function Kbd({ children, ...rest }) {
+	injectComponentStyle("kbd");
+	return /* @__PURE__ */ jsx("kbd", {
+		...rest,
+		"data-scope": "kbd",
+		"data-part": "root",
+		children
+	});
+}
+//#endregion
+export { Kbd };

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

@@ -0,0 +1,63 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/layout/index.d.ts
+/** Declare which edge the skeleton reserves for its sider — without
+ * it the root is a single column. */
+export interface LayoutRootProps extends HTMLAttributes<HTMLDivElement> {
+  sider?: "start" | "end";
+  children?: ReactNode;
+}
+/** Which edge the enclosing root reserves for its rail — shared so the
+ * sider's resize handle knows which way the hand pulls. */
+export interface LayoutContextValue {
+  siderPlacement: () => "start" | "end" | undefined;
+}
+/**
+ * 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.
+ */
+declare function Root({ sider, children, ...rest }: LayoutRootProps): import("react").JSX.Element;
+export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The caller drives the fold; the sider mirrors it and echoes every
+   * change back through `onCollapsedChange`. */
+  collapsed?: boolean;
+  /** The rail's resting inline size — a layout parameter, not a visual
+   * token, so it rides an inline variable. */
+  width?: string;
+  /** The inline size when folded. */
+  collapsedWidth?: string;
+  /** Offer the hairline at the flow edge: the rail's width follows the
+   * hand (and the arrow keys), clamped by `minWidth`/`maxWidth`, and
+   * every change rides `onWidthChange`. */
+  resizable?: boolean;
+  /** The rail's narrowest inline size while resizing. */
+  minWidth?: string;
+  /** The rail's widest inline size while resizing. */
+  maxWidth?: string;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  onWidthChange?: (width: string) => void;
+  /** The rail's contents; a function receives `{ collapsed }` so a
+   * caller can swap label content while the edge moves. */
+  children?: ReactNode | ((state: {
+    collapsed: boolean;
+  }) => ReactNode);
+}
+declare function Sider({ collapsed, width: widthProp, collapsedWidth, resizable, minWidth, maxWidth, style, onCollapsedChange, onWidthChange, children, ...rest }: LayoutSiderProps): import("react").JSX.Element;
+export declare const Layout: typeof Root & {
+  Root: typeof Root;
+  Header: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Sider: typeof Sider;
+  Content: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Footer: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/layout/index.mjs

@@ -0,0 +1,133 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/components/layout/index.tsx
+const LAYOUT_CONTEXT = createContext(null);
+/**
+* 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 }) {
+	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
+		value: { siderPlacement: () => sider },
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "layout",
+			"data-part": "root",
+			"data-sider": sider,
+			children
+		})
+	});
+}
+/** A semantic block of the skeleton — header, footer, and the flow's
+* 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
+	});
+	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 rail = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
+	const width = widthProp !== void 0 ? widthProp : innerWidth;
+	const prevCollapsed = useRef(collapsed);
+	useEffect(() => {
+		if (prevCollapsed.current === collapsed) return;
+		prevCollapsed.current = collapsed;
+		onCollapsedChange?.(collapsed);
+	}, [collapsed, onCollapsedChange]);
+	const innerWidthRef = useRef(innerWidth);
+	innerWidthRef.current = innerWidth;
+	useEffect(() => {
+		if (widthProp === void 0 || widthProp === innerWidthRef.current) return;
+		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": "Resize sidebar",
+		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onKeyDown
+	}) : null;
+	return /* @__PURE__ */ jsxs("aside", {
+		...rest,
+		ref: rail,
+		style: {
+			...style,
+			"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
+			"--bs-layout-sider-min": collapsed ? collapsedWidth : minWidth,
+			"--bs-layout-sider-max": collapsed ? collapsedWidth : maxWidth
+		},
+		"data-scope": "layout",
+		"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]
+	});
+}
+const Layout = Object.assign(Root, {
+	Root,
+	Header,
+	Sider,
+	Content,
+	Footer
+});
+injectComponentStyle("layout");
+//#endregion
+export { Layout };

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

@@ -0,0 +1,10 @@
+import { AnchorHTMLAttributes } from "react";
+//#region src/components/link/index.d.ts
+export interface LinkProps extends 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({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+//#endregion

package/dist/components/link/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+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 }) {
+	injectComponentStyle("link");
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		"data-scope": "link",
+		"data-part": "root",
+		"data-underline": underline,
+		children
+	});
+}
+//#endregion
+export { Link };

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/list/index.d.ts
+export interface ListRootProps extends HTMLAttributes<HTMLUListElement> {
+  /** One hairline between rows. */
+  bordered?: boolean;
+  /** Every row answers the pointer with a wash. */
+  hoverable?: boolean;
+}
+declare function Root({ bordered, hoverable, children, ...rest }: ListRootProps): import("react").JSX.Element;
+declare namespace Root {
+  var displayName: string;
+}
+/** The row's words: `title` and `description` ride their own slots, the
+ * children follow them for anything else. */
+export interface ListContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+}
+declare function Content({ title, description, children, ...rest }: ListContentProps): import("react").JSX.Element;
+declare namespace Content {
+  var displayName: string;
+}
+export declare const List: typeof Root & {
+  Root: typeof Root;
+  Item: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Leading: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Content: typeof Content;
+  Actions: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/list/index.mjs

@@ -0,0 +1,66 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* 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) {
+	const Tag = tag;
+	function Component({ children, ...rest }) {
+		return /* @__PURE__ */ jsx(Tag, {
+			...rest,
+			"data-scope": "list",
+			"data-part": name.toLowerCase(),
+			children
+		});
+	}
+	Component.displayName = "List" + name;
+	return Component;
+}
+function Root({ bordered = false, hoverable = false, children, ...rest }) {
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		"data-scope": "list",
+		"data-part": "root",
+		"data-bordered": bordered || void 0,
+		"data-hoverable": hoverable || void 0,
+		children
+	});
+}
+Root.displayName = "ListRoot";
+const Item = part("Item", "li");
+const Leading = part("Leading", "div");
+const Actions = part("Actions", "div");
+function Content({ title, description, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "list",
+		"data-part": "content",
+		children: [
+			title ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "list",
+				"data-part": "title",
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "list",
+				"data-part": "description",
+				children: description
+			}) : null,
+			children
+		]
+	});
+}
+Content.displayName = "ListContent";
+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,18 @@
+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
+/** 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: ListboxRootComponentProps<T, ListboxOwnProps>): import("react").JSX.Element;
+export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+  Root: typeof ListboxRoot;
+};
+//#endregion
+export { createListCollection };

package/dist/components/listbox/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Listbox as Listbox$1, createListCollection } from "@ark-ui/react/listbox";
+//#region src/components/listbox/index.tsx
+function ListboxRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Listbox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Listbox = {
+	...Listbox$1,
+	Root: ListboxRoot
+};
+injectComponentStyle("listbox");
+//#endregion
+export { Listbox, createListCollection };

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

@@ -0,0 +1,7 @@
+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;
+//#endregion

package/dist/components/marquee/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+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");
+//#endregion
+export { Marquee };

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+//#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 HTMLAttributes<HTMLDivElement> {
+  columns?: number;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare function Masonry({ columns, gap, ...rest }: MasonryProps): import("react").JSX.Element;
+//#endregion

package/dist/components/masonry/index.mjs

@@ -0,0 +1,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/masonry/index.tsx
+/** 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({ columns = 3, gap = "md", ...rest }) {
+	injectComponentStyle("masonry");
+	const style = {
+		...rest.style,
+		"--bs-masonry-columns": String(columns),
+		"--bs-masonry-gap": gapVars[gap] ?? gapVars.md
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "masonry",
+		"data-part": "root"
+	});
+}
+//#endregion
+export { Masonry };