@bysages/react 0.3.1 → 0.4.0

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

@@ -1,13 +1,16 @@
-import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { chevron_right } from "@bysages/icons";
-import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/index.tsx
 function TreeViewRoot(props) {
+	injectComponentStyle("tree-view");
+	const id = useElementId("tree-view", props);
 	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(TreeView$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
@@ -22,18 +25,57 @@ function TreeViewNodeCheckbox(props) {
 /** A branch is born with its chevron — the indicator stays a consumer's
 * children to override, never a chore to remember. */
 function TreeViewBranchIndicator(props) {
-	const { children = glyphNode(chevron_right), ...rest } = props;
+	const { children = iconNode("chevron-right"), ...rest } = props;
 	return /* @__PURE__ */ jsx(TreeView$1.BranchIndicator, {
 		...rest,
 		children
 	});
 }
-const TreeView = {
+function treeNodes(items, path = []) {
+	return items.map((node, index) => {
+		const indexPath = [...path, index];
+		const row = node.children?.length ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: iconNode("chevron-right") }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsx(TreeView$1.BranchContent, { children: treeNodes(node.children, indexPath) })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, { children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label }) });
+		return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
+			node,
+			indexPath,
+			children: row
+		}, node.value);
+	});
+}
+/** The complete tree behind selected values: nested options render their own
+* branches and leaves, while async and checkbox trees remain anatomy work. */
+function TreeViewFacade(props) {
+	const { value, defaultValue, options, multiple, label, size = "md", className, style, onValueChange } = props;
+	const branchValues = options.filter((option) => option.children?.length).map((option) => option.value);
+	const collection = createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		isNodeDisabled: (node) => !!node.disabled,
+		rootNode: {
+			value: "root",
+			label: "",
+			children: options
+		}
+	});
+	return /* @__PURE__ */ jsx(TreeViewRoot, {
+		size,
+		collection,
+		defaultExpandedValue: branchValues,
+		defaultSelectedValue: defaultValue,
+		selectedValue: value,
+		selectionMode: multiple ? "multiple" : "single",
+		"aria-label": label,
+		className,
+		style,
+		onSelectionChange: (event) => onValueChange?.(event.selectedValue),
+		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options) })
+	});
+}
+const TreeView = Object.assign(TreeViewFacade, {
 	...TreeView$1,
 	Root: TreeViewRoot,
 	NodeCheckbox: TreeViewNodeCheckbox,
 	BranchIndicator: TreeViewBranchIndicator
-};
-injectComponentStyle("tree-view");
+});
 //#endregion
 export { TreeView };

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

@@ -4,6 +4,10 @@ export declare const Typography: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
 } & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
   Display: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/typography/index.mjs

@@ -22,6 +22,7 @@ const Body = part("Body", "p");
 const Muted = part("Muted", "p");
 const Label = part("Label", "p");
 const Typography = Object.assign(Display, {
+	Root: Display,
 	Display,
 	Heading,
 	Lead,

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

@@ -16,5 +16,8 @@ export interface UserProps extends HTMLAttributes<HTMLDivElement> {
  * quiet echo beneath. The mark is the Avatar itself — one component
  * renders it here, so every size and shape the Avatar knows the user
  * inherits; this row only lays the words out beside it. */
-export declare function User({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+declare function UserImpl({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+export declare const User: typeof UserImpl & {
+  Root: typeof UserImpl;
+};
 //#endregion

package/dist/components/user/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Avatar } from "../avatar/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +10,7 @@ function initialsOf(name) {
 * quiet echo beneath. The mark is the Avatar itself — one component
 * renders it here, so every size and shape the Avatar knows the user
 * inherits; this row only lays the words out beside it. */
-function User({ name, description, size, src, shape = "circle", children, ...rest }) {
+function UserImpl({ name, description, size, src, shape = "circle", children, ...rest }) {
 	injectComponentStyle("user");
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -38,5 +39,6 @@ function User({ name, description, size, src, shape = "circle", children, ...res
 		})]
 	});
 }
+const User = withSelfRoot(UserImpl);
 //#endregion
 export { User };

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

@@ -13,5 +13,8 @@ export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
  * scroll length by a spacer sized from the row height, the rows
  * themselves are positioned against it — a ten-thousand-row list
  * costs the DOM a window, not the ledger. */
-export declare function VirtualList({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+declare function VirtualListImpl({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+export declare const VirtualList: typeof VirtualListImpl & {
+  Root: typeof VirtualListImpl;
+};
 //#endregion

package/dist/components/virtual-list/index.mjs

@@ -1,13 +1,17 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/virtual-list/index.tsx
+function toCssLength(length) {
+	return typeof length === "number" ? `${length}px` : length;
+}
 /** A ledger that only mounts the rows on stage: the viewport keeps its
 * scroll length by a spacer sized from the row height, the rows
 * themselves are positioned against it — a ten-thousand-row list
 * costs the DOM a window, not the ledger. */
-function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
+function VirtualListImpl({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
 	injectComponentStyle("virtual-list");
 	const viewport = useRef(null);
 	const virtualizer = useVirtualizer({
@@ -24,30 +28,24 @@ function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest
 		"data-part": "root",
 		style: {
 			...rest.style,
-			blockSize: typeof height === "number" ? `${height}px` : height
+			"--bs-virtual-list-height": toCssLength(height)
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			"data-scope": "virtual-list",
 			"data-part": "inner",
-			style: {
-				blockSize: virtualizer.getTotalSize(),
-				position: "relative"
-			},
+			style: { "--bs-virtual-list-total": `${virtualizer.getTotalSize()}px` },
 			children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
 				"data-scope": "virtual-list",
 				"data-part": "row",
 				style: {
-					position: "absolute",
-					top: 0,
-					insetInlineStart: 0,
-					inlineSize: "100%",
-					transform: `translateY(${row.start}px)`,
-					blockSize: row.size
+					"--bs-virtual-list-row-start": `${row.start}px`,
+					"--bs-virtual-list-row-size": `${row.size}px`
 				},
 				children: renderItem?.(items[row.index], row.index)
 			}, String(row.key)))
 		})
 	});
 }
+const VirtualList = withSelfRoot(VirtualListImpl);
 //#endregion
 export { VirtualList };

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

@@ -12,5 +12,8 @@ export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
  * density) and the marks layer repeats it over the children. The seal
  * redraws itself when a prop turns — and it never takes a pointer.
  */
-export declare function Watermark({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+declare function WatermarkImpl({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+export declare const Watermark: typeof WatermarkImpl & {
+  Root: typeof WatermarkImpl;
+};
 //#endregion

package/dist/components/watermark/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -17,7 +18,7 @@ function toPx(size) {
 * density) and the marks layer repeats it over the children. The seal
 * redraws itself when a prop turns — and it never takes a pointer.
 */
-function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
+function WatermarkImpl({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
 	injectComponentStyle("watermark");
 	const [root, setRoot] = useState(null);
 	const [tile, setTile] = useState("");
@@ -72,9 +73,10 @@ function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem"
 			"data-scope": "watermark",
 			"data-part": "marks",
 			"aria-hidden": "true",
-			style: { backgroundImage: tile }
+			style: { "--bs-watermark-image": tile }
 		})]
 	});
 }
+const Watermark = withSelfRoot(WatermarkImpl);
 //#endregion
 export { Watermark };

package/dist/family-DE_GQeeM.mjs

@@ -0,0 +1,9 @@
+//#region src/internal/family.ts
+/** Gives a single-component family the same callable + Root surface. */
+function withSelfRoot(component) {
+	const family = component;
+	family.Root = component;
+	return family;
+}
+//#endregion
+export { withSelfRoot as t };

package/dist/icon-BALgGtNK.mjs

@@ -0,0 +1,18 @@
+import { getIcon } from "@bysages/core/icons";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/icon.tsx
+/** Render a curated registry icon as a bare svg element — the components
+* own default icons. No span shell: the part rules size the svg directly.
+* Extra body appends after the icon's own body, for composed marks. */
+function iconNode(name, attrs = {}, extraBody = "") {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs,
+		dangerouslySetInnerHTML: { __html: icon.body + extraBody }
+	});
+}
+//#endregion
+export { iconNode as t };

package/dist/id-C37UYLwJ.mjs

@@ -0,0 +1,13 @@
+import { useId } from "react";
+//#region src/internal/id.ts
+/** Zag composes owned-part ids with separators, so React's generated id
+* is narrowed to characters that survive both markup and selectors. */
+const UNSAFE_ID_CHARACTERS = /[^a-zA-Z0-9_-]/g;
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, props = {}) {
+	const generated = useId();
+	const explicit = props.id;
+	return typeof explicit === "string" && explicit ? explicit : `bs-${scope}-${generated.replace(UNSAFE_ID_CHARACTERS, "-")}`;
+}
+//#endregion
+export { useElementId as t };

package/dist/image-viewer-Cf6thHax.mjs

@@ -0,0 +1,141 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { t as useElementId } from "./id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
+import { Button } from "./components/button/index.mjs";
+import { ButtonGroup } from "./components/button-group/index.mjs";
+import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { 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/preview.tsx
+/** The default doorway is the curated preview icon; custom content keeps
+* that icon as its hover and focus affordance. */
+function ImageViewerPreview({ label, children, "data-part": dataPart, ...rest }) {
+	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
+	const parts = [dataPart, "preview"].filter(Boolean).join(" ");
+	const isIcon = children == null;
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "image-viewer",
+		"data-part": parts,
+		...isIcon ? {
+			"data-empty": "true",
+			"aria-label": messages.imageViewer.preview
+		} : {},
+		children: [children ?? iconNode("eye"), isIcon ? null : /* @__PURE__ */ jsxs("span", {
+			"data-scope": "image-viewer",
+			"data-part": "preview-overlay",
+			"aria-hidden": true,
+			children: [iconNode("eye"), label ? /* @__PURE__ */ jsx("span", {
+				"data-part": "preview-label",
+				children: label
+			}) : null]
+		})]
+	});
+}
+//#endregion
+//#region src/components/image-viewer/index.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+const TOOL_ICONS = {
+	zoomIn: "zoom-in",
+	zoomOut: "zoom-out",
+	rotate: "rotate-cw",
+	close: "x"
+};
+function ImageViewerImpl({ src, alt = "", open, zoomable = true, width, height, children, onOpenChange, id }) {
+	injectComponentStyle("image-viewer");
+	const hostId = useElementId("image-viewer", { id });
+	const messages = useComponentMessages();
+	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, icon, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: iconNode(icon)
+		});
+	}
+	function closeToolButton(label, icon) {
+		return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				square: true,
+				size: "lg",
+				"aria-label": label,
+				children: iconNode(icon)
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		id: `${hostId}:dialog`,
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			asChild: true,
+			"data-scope": "image-viewer",
+			"data-part": "trigger",
+			children: children ?? /* @__PURE__ */ jsx(ImageViewerPreview, {})
+		}), /* @__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,
+					width,
+					height,
+					style: { "--bs-image-viewer-transform": `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_ICONS.rotate, rotate),
+						closeToolButton(messages.imageViewer.close, TOOL_ICONS.close)
+					] })
+				})]
+			})
+		})] })]
+	});
+}
+const ImageViewer = Object.assign(ImageViewerImpl, {
+	...Dialog$1,
+	Preview: ImageViewerPreview
+});
+//#endregion
+export { ImageViewer as t };

package/dist/{index-Uefyw7Im.d.mts → index-Bbg4heDO.d.mts}

@@ -1,3 +1,4 @@
+import { t as Popover } from "./index-Eu-Bttta.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/mentions/use-mentions.d.ts
 interface UseMentionsOptions {
@@ -45,6 +46,7 @@ interface MentionEntry {
   value: string;
 }
 interface MentionsVesselProps {
+  id?: string;
   /** The host field's rung, so the rows keep the field's register. */
   size?: "sm" | "md" | "lg";
   /** Whether the candidates are up. */
@@ -67,7 +69,10 @@ interface MentionsVesselProps {
  * 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`. */
-declare function MentionsVessel({ size, open, matches, active, anchor, onInsert, onActiveChange, onOpenChange }: MentionsVesselProps): import("react").JSX.Element;
+declare function MentionsVesselImpl({ size, open, matches, active, anchor, onInsert, onActiveChange, onOpenChange, id }: MentionsVesselProps): import("react").JSX.Element;
+declare const MentionsVessel: typeof MentionsVesselImpl & {
+  Root: typeof MentionsVesselImpl;
+};
 /**
  * @-mentions: a plain textarea that, when the text before the caret ends
  * with the trigger character followed by a token, offers the matching
@@ -77,11 +82,10 @@ declare function MentionsVessel({ size, open, matches, active, anchor, onInsert,
  *
  * The field is the shared `Field.Textarea` — field wiring (label ids,
  * the invalid state, autoresize) rides on it for free — and the vessel
- * anchors to the field as a whole (popover machinery), not to the caret
- * coordinates; caret-precise positioning would need a second
- * positioning system for no practical gain at typical field sizes.
- * Composers that keep their own field anatomy (the AI prompt input)
- * skip this shell and wire `useMentions` plus `MentionsVessel`
+ * anchors through the popover's own `Anchor` part wrapped around the
+ * field, so the machine, not a local rectangle, points the popup at the
+ * input. Composers that keep their own field anatomy (the AI prompt
+ * input) skip this shell and wire `useMentions` plus `MentionsVessel`
  * themselves.
  */
 interface MentionsProps extends HTMLAttributes<HTMLDivElement> {
@@ -103,6 +107,7 @@ interface MentionsProps extends HTMLAttributes<HTMLDivElement> {
   /** Reports the field's next text. */
   onValueChange?: (value: string) => void;
 }
-declare function Mentions({ items, value, trigger, placeholder, autoresize, invalid, size, onValueChange, children, ...rest }: MentionsProps): import("react").JSX.Element;
+declare function MentionsImpl({ items, value, trigger, placeholder, autoresize, invalid, size, onValueChange, children, ...rest }: MentionsProps): import("react").JSX.Element;
+declare const Mentions: typeof MentionsImpl & typeof Popover;
 //#endregion
 export { MentionsVesselProps as a, useMentions as c, MentionsVessel as i, Mentions as n, UseMentionsHandlers as o, MentionsProps as r, UseMentionsOptions as s, MentionEntry as t };

package/dist/index-BcRdWGY-.d.mts

@@ -0,0 +1,115 @@
+import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/media-player/parts.d.ts
+type MediaPartProps = HTMLAttributes<HTMLElement>;
+type ButtonPartProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  label?: string;
+};
+type InputPartProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+};
+type DivPartProps = HTMLAttributes<HTMLDivElement> & {
+  label?: string;
+};
+/** The native media element, framed by the shared shell's state machine. */
+declare function Media(props: MediaPartProps): import("react").JSX.Element;
+/** Play and pause share one seal-cut control: the state changes the mark,
+ * never the control's place in the hand. */
+declare function PlayButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element;
+/** The elapsed and total time bracket the timeline. */
+declare function Time(props: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+/** Seeking writes straight to currentTime; buffered ranges can later
+ * ride the same part as a second ink wash. */
+declare function Timeline({ label, ...props }: InputPartProps): import("react").JSX.Element;
+/** Muting stays at the left of the volume well, the way a hand expects. */
+declare function MuteButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element;
+declare function Volume({ label, ...props }: InputPartProps): import("react").JSX.Element;
+/** Playback rate is a real choice, not hidden behind native menus. */
+declare function Rate({ label, ...props }: DivPartProps): import("react").JSX.Element;
+/** Text tracks use the browser's native model; the control chooses a
+ * track index, while rendering stays with the media element. */
+declare function Captions({ label, ...props }: DivPartProps): import("react").JSX.Element | null;
+/** Picture-in-picture is video-only and capability-detected. */
+declare function PipButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element | null;
+/** Fullscreen takes the whole vessel, not just the moving picture. */
+declare function FullscreenButton({ label, ...props }: MediaPartProps & {
+  label?: string;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/components/media-player/use-media-controls.d.ts
+/** One alternative encoding offered to the browser before playback. */
+interface MediaSourceOption {
+  src: string;
+  type?: string;
+}
+/** A WebVTT track handed to the native text-track model. */
+interface MediaTextTrackOption {
+  src: string;
+  kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+  label?: string;
+  srcLang?: string;
+  default?: boolean;
+}
+/** A compact clock for player chrome: hours only when the media asks
+ * for them, stable digits so the time never jitters the controls. */
+declare function formatMediaTime(seconds: number): string;
+//#endregion
+//#region src/components/media-player/shell.d.ts
+interface MediaPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause" | "onEnded" | "onTimeUpdate" | "onVolumeChange" | "onRateChange" | "onError"> {
+  label?: string;
+  src?: string;
+  sources?: MediaSourceOption[];
+  tracks?: MediaTextTrackOption[];
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: "none" | "metadata" | "auto";
+  volume?: number;
+  playbackRate?: number;
+  playbackRates?: number[];
+  disabled?: boolean;
+  poster?: string;
+  playsInline?: boolean;
+  onPlay?: (event: Event) => void;
+  onPause?: (event: Event) => void;
+  onEnded?: (event: Event) => void;
+  onTimeupdate?: (event: Event) => void;
+  onVolumechange?: (event: Event) => void;
+  onRatechange?: (event: Event) => void;
+  onError?: (event: Event) => void;
+}
+//#endregion
+//#region src/components/media-player/index.d.ts
+/** Audio and video share one instrument: the same state, the same keys,
+ * and the same control rhythm, while each face keeps its native element's
+ * own semantics. The parts — Root, Stage, Media, Controls, PlayButton,
+ * Timeline, Time, MuteButton, Volume, Rate, Captions, PipButton,
+ * FullscreenButton. */
+declare const Audio: ((props: MediaPlayerProps) => import("react").JSX.Element) & {
+  Root: (props: MediaPlayerProps) => import("react").JSX.Element;
+  Stage: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  Media: typeof Media;
+  Controls: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+};
+declare const Video: ((props: MediaPlayerProps) => import("react").JSX.Element) & {
+  Root: (props: MediaPlayerProps) => import("react").JSX.Element;
+  Stage: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  Media: typeof Media;
+  Controls: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+  Captions: typeof Captions;
+  PipButton: typeof PipButton;
+  FullscreenButton: typeof FullscreenButton;
+};
+//#endregion
+export { MediaTextTrackOption as a, MediaSourceOption as i, Video as n, formatMediaTime as o, MediaPlayerProps as r, Audio as t };

package/dist/{index-Iy8m0Qev.d.mts → index-D_iKc2Uw.d.mts}

@@ -35,8 +35,37 @@ type SelectOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SelectRoot<T extends CollectionItem>(props: SelectRootComponentProps<T, SelectOwnProps>): import("react").JSX.Element;
-declare const Select$1: Omit<typeof Select, "Root"> & {
+type SelectFacadeValue = string | string[];
+type SelectParts = Omit<typeof Select, "Root"> & {
   Root: typeof SelectRoot;
 };
+interface SelectFacadeProps {
+  value?: SelectFacadeValue;
+  defaultValue?: SelectFacadeValue;
+  options: NativeSelectOption[];
+  multiple?: boolean;
+  deselectable?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  /** Heading above the flat option list. */
+  groupLabel?: string;
+  placeholder?: string;
+  name?: string;
+  form?: string;
+  autoComplete?: string;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string | string[]) => void;
+}
+declare function SelectFacade({ value, defaultValue, options, multiple, deselectable, clearable, disabled, invalid, required, readOnly, label, groupLabel, placeholder, name, form, autoComplete, size, onValueChange }: SelectFacadeProps): import("react").JSX.Element;
+declare namespace SelectFacade {
+  var displayName: string;
+}
+declare const Select$1: typeof SelectFacade & SelectParts;
 //#endregion
-export { NativeSelectProps as i, NativeSelect as n, NativeSelectOption as r, Select$1 as t };
+export { NativeSelectProps as a, NativeSelectOption as i, SelectFacadeProps as n, NativeSelect as r, Select$1 as t };