@bysages/react 0.2.3 → 0.3.1

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

@@ -10,8 +10,14 @@ export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError"
   alt?: string;
   fit?: "cover" | "contain" | "fill" | "none";
   loading?: "lazy" | "eager";
+  /** Intrinsic rendered width, reserved on the image to avoid layout
+   * shift while the source loads. */
+  width?: number | string;
+  /** Intrinsic rendered height, reserved on the image to avoid layout
+   * shift while the source loads. */
+  height?: number | string;
   /** Shown in place of the picture when the source breaks. */
   fallback?: ReactNode;
 }
-export declare function Image({ src, alt, fit, loading, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+export declare function Image({ src, alt, fit, loading, width, height, fallback, ...rest }: ImageProps): import("react").JSX.Element;
 //#endregion

package/dist/components/image/index.mjs

@@ -27,7 +27,7 @@ function placeholderGlyph() {
 		]
 	});
 }
-function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
+function Image({ src, alt = "", fit = "cover", loading = "lazy", width, height, fallback, ...rest }) {
 	injectComponentStyle("image");
 	const [state, setState] = useState("loading");
 	useEffect(() => setState("loading"), [src]);
@@ -44,6 +44,8 @@ function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...re
 			alt,
 			loading,
 			decoding: "async",
+			width,
+			height,
 			onLoad: () => setState("loaded"),
 			onError: () => setState("error")
 		}), state === "error" ? /* @__PURE__ */ jsx("div", {

package/dist/components/image-viewer/index.d.mts

@@ -11,8 +11,14 @@ export interface ImageViewerProps {
   alt?: string;
   open?: boolean;
   zoomable?: boolean;
+  /** Intrinsic rendered width, reserved on the image to avoid layout
+   * shift while the source loads. */
+  width?: number | string;
+  /** Intrinsic rendered height, reserved on the image to avoid layout
+   * shift while the source loads. */
+  height?: number | string;
   /** Reports the viewer's next state. */
   onOpenChange?: (open: boolean) => void;
 }
-export declare function ImageViewer({ src, alt, open, zoomable, onOpenChange }: ImageViewerProps): import("react").JSX.Element;
+export declare function ImageViewer({ src, alt, open, zoomable, width, height, onOpenChange }: ImageViewerProps): import("react").JSX.Element;
 //#endregion

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

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { ButtonGroup } from "../button-group/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -33,8 +34,9 @@ const TOOL_GLYPHS = {
 	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 }) {
+function ImageViewer({ src, alt = "", open, zoomable = true, width, height, onOpenChange }) {
 	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
 	const [localOpen, setLocalOpen] = useState(false);
 	const [scale, setScale] = useState(1);
 	const [rotation, setRotation] = useState(0);
@@ -92,14 +94,16 @@ function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
 					"data-part": "viewport",
 					src,
 					alt,
+					width,
+					height,
 					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))
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_GLYPHS.rotate, rotate),
+						toolButton(messages.imageViewer.close, TOOL_GLYPHS.close, () => setOpen(false))
 					] })
 				})]
 			})

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

@@ -10,7 +10,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   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 function Input({ value, size, invalid, onValueChange, ...rest }: InputProps): import("react").JSX.Element;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion

package/dist/components/input/index.mjs

@@ -1,21 +1,2 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { useFieldContext } from "@ark-ui/react/field";
-//#region src/components/input/index.tsx
-function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
-	injectComponentStyle("input");
-	const field = useFieldContext();
-	const fieldProps = field?.getInputProps() ?? {};
-	return /* @__PURE__ */ jsx("input", {
-		...fieldProps,
-		...rest,
-		...value !== void 0 ? { value } : {},
-		"data-scope": "input",
-		"data-part": "root",
-		"data-size": size,
-		"data-invalid": invalid || field?.invalid ? "" : void 0,
-		onChange: (event) => onValueChange?.(event.target.value)
-	});
-}
-//#endregion
+import { t as Input } from "../../input-2oezH-dY.mjs";
 export { Input };

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

@@ -1,7 +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. */
+/** JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The parts —
+ * Root, Tree, plus createJsonTreeCollection. */
 export declare const JsonTreeView: typeof JsonTreeView$1;
 //#endregion

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

@@ -1,10 +1,23 @@
+import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+import { chevron_right } from "@bysages/icons";
 //#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;
+/** The auto-rendered tree hands every branch its chevron from the
+* `arrow` element — filled with the house glyph unless the consumer
+* draws their own, so a JSON tree never opens as a bare indent. */
+function JsonTreeViewTree(props) {
+	const { arrow = glyphNode(chevron_right), ...rest } = props;
+	return /* @__PURE__ */ jsx(JsonTreeView$1.Tree, {
+		...rest,
+		arrow
+	});
+}
+/** JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The parts —
+* Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = Object.assign({}, JsonTreeView$1, { Tree: JsonTreeViewTree });
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

package/dist/components/layout/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
@@ -41,6 +42,7 @@ const Footer = region("Footer", "footer");
 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 [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
@@ -97,7 +99,7 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		role: "separator",
 		"aria-orientation": "vertical",
 		tabIndex: 0,
-		"aria-label": "Resize sidebar",
+		"aria-label": messages.sidebar.resize,
 		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
 		onPointerDown,
 		onPointerMove,

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

@@ -10,6 +10,10 @@ declare function Root({ bordered, hoverable, children, ...rest }: ListRootProps)
 declare namespace Root {
   var displayName: string;
 }
+declare function Item({ children, ...attrs }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+declare namespace Item {
+  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"> {
@@ -22,10 +26,7 @@ declare namespace Content {
 }
 export declare const List: typeof Root & {
   Root: typeof Root;
-  Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  Item: typeof Item;
   Leading: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/list/index.mjs

@@ -30,7 +30,16 @@ function Root({ bordered = false, hoverable = false, children, ...rest }) {
 	});
 }
 Root.displayName = "ListRoot";
-const Item = part("Item", "li");
+function Item({ children, ...attrs }) {
+	delete attrs.role;
+	return /* @__PURE__ */ jsx("li", {
+		...attrs,
+		"data-scope": "list",
+		"data-part": "item",
+		children
+	});
+}
+Item.displayName = "ListItem";
 const Leading = part("Leading", "div");
 const Actions = part("Actions", "div");
 function Content({ title, description, children, ...rest }) {

package/dist/components/menubar/index.mjs

@@ -17,6 +17,7 @@ function Menubar({ items, onSelect, children, ...rest }) {
 				asChild: true,
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
+					role: "menuitem",
 					"data-scope": "menubar",
 					"data-part": "trigger",
 					children: group.label

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+//#region src/components/order-list/index.d.ts
+export interface OrderOption {
+  label: string;
+  value: string;
+}
+export interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
+  /** The rows in their current order — the value is the order. */
+  value: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+  onValueChange?: (value: string[]) => void;
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows, and the group reports the new order as the value itself —
+ * the model is the order. Dragging rides the native drag events — a
+ * hairline of primary ink marks the seam the row will land on — so
+ * touch keeps the buttons as its route. */
+export declare function OrderList({ value, options, label, onValueChange, ...rest }: OrderListProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,161 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//#region src/components/order-list/index.tsx
+const ARROWS = {
+	up: ["m18 15-6-6-6 6"],
+	down: ["m6 9 6 6 6-6"],
+	top: ["m18 15-6-6-6 6", "M5 4h14"],
+	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+};
+function arrowGlyph(paths) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 12,
+		height: 12,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+	});
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+* arrows, and the group reports the new order as the value itself —
+* the model is the order. Dragging rides the native drag events — a
+* hairline of primary ink marks the seam the row will land on — so
+* touch keeps the buttons as its route. */
+function OrderList({ value, options, label, onValueChange, ...rest }) {
+	injectComponentStyle("order-list");
+	const messages = useComponentMessages();
+	const dragging = useRef(null);
+	const [dropLine, setDropLine] = useState(null);
+	const rows = value.map((entry) => options.find((option) => option.value === entry)).filter((option) => option != null);
+	function reset() {
+		dragging.current = null;
+		setDropLine(null);
+	}
+	function move(entry, offset) {
+		const next = [...value];
+		const from = next.indexOf(entry);
+		const to = Math.max(0, Math.min(next.length - 1, from + offset));
+		if (from === to) return;
+		next.splice(to, 0, ...next.splice(from, 1));
+		onValueChange?.(next);
+	}
+	function drop() {
+		const entry = dragging.current;
+		if (entry == null) return;
+		const seam = dropLine;
+		const from = value.indexOf(entry);
+		if (seam && seam.index === from) return reset();
+		const next = value.filter((candidate) => candidate !== entry);
+		let at = seam ? seam.before ? seam.index : seam.index + 1 : next.length;
+		if (from < at) at -= 1;
+		next.splice(Math.max(0, Math.min(next.length, at)), 0, entry);
+		onValueChange?.(next);
+		reset();
+	}
+	function over(event, index, entry) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+		const rect = event.currentTarget.getBoundingClientRect();
+		const before = event.clientY < rect.top + rect.height / 2;
+		setDropLine(dragging.current != null && !(entry.value === dragging.current && before) ? {
+			index,
+			before
+		} : null);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "order-list",
+		"data-part": "root",
+		onDragLeave: (event) => {
+			const host = event.currentTarget;
+			if (!event.relatedTarget || !host.contains(event.relatedTarget)) setDropLine(null);
+		},
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-scope": "order-list",
+			"data-part": "list",
+			"aria-label": label ?? void 0,
+			children: rows.map((option, index) => {
+				const seam = dropLine && dropLine.index === index ? dropLine.before ? "top" : "bottom" : void 0;
+				return /* @__PURE__ */ jsxs("li", {
+					draggable: true,
+					"aria-roledescription": "Sortable item",
+					"data-scope": "order-list",
+					"data-part": "item",
+					"data-dragging": dragging.current === option.value ? "" : void 0,
+					"data-drop-line": seam,
+					onDragStart: (event) => {
+						dragging.current = option.value;
+						event.dataTransfer?.setData("text/plain", option.value);
+						if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+					},
+					onDragEnd: reset,
+					onDragOver: (event) => over(event, index, option),
+					onDrop: (event) => {
+						event.preventDefault();
+						drop();
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "grip",
+							"aria-hidden": "true",
+							children: "⋮⋮"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "label",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "controls",
+							children: [
+								[
+									messages.orderList.toTop,
+									ARROWS.top,
+									-index,
+									0
+								],
+								[
+									messages.orderList.moveUp,
+									ARROWS.up,
+									-1,
+									0
+								],
+								[
+									messages.orderList.moveDown,
+									ARROWS.down,
+									1,
+									rows.length - 1
+								],
+								[
+									messages.orderList.toBottom,
+									ARROWS.bottom,
+									rows.length - 1 - index,
+									rows.length - 1
+								]
+							].map(([aria, paths, offset, edge]) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": aria,
+								"data-scope": "order-list",
+								"data-part": "move",
+								disabled: index === edge,
+								onClick: () => move(option.value, offset),
+								children: arrowGlyph([...paths])
+							}, aria))
+						})
+					]
+				}, option.value);
+			})
+		})
+	});
+}
+//#endregion
+export { OrderList };

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/result/index.d.ts
+type Status = "success" | "warning" | "danger" | "info";
+export interface ResultRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** The verdict the operation returned; the fixed pigments speak it. */
+  status?: Status;
+  children?: ReactNode;
+}
+export declare function ResultRoot({ status, children, ...rest }: ResultRootProps): import("react").JSX.Element;
+/** The mark carries all four verdicts and lets the root choose, so the
+ * icon can never drift from the status the root declares. */
+export declare function ResultIcon({ children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** A verdict drawn after the deed: the mark washes in the fixed
+ * pigment, the title rides the serif, and the extra carries the way
+ * onward. Any subset composes. */
+export declare const Result: {
+  Root: typeof ResultRoot;
+  Icon: typeof ResultIcon;
+  Title: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+  Description: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+  Extra: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+};
+//#endregion

package/dist/components/result/index.mjs

@@ -0,0 +1,59 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/result/index.tsx
+const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";
+function ResultRoot({ status = "info", children, ...rest }) {
+	injectComponentStyle("result");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "result",
+		"data-part": "root",
+		"data-status": status,
+		children
+	});
+}
+/** The mark carries all four verdicts and lets the root choose, so the
+* icon can never drift from the status the root declares. */
+function ResultIcon({ children, ...rest }) {
+	injectComponentStyle("result");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "result",
+		"data-part": "icon",
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			width: 24,
+			height: 24,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			dangerouslySetInnerHTML: { __html: MARK }
+		})
+	});
+}
+function part(name, tag) {
+	return function Part({ children, ...rest }) {
+		injectComponentStyle("result");
+		return /* @__PURE__ */ jsx(tag, {
+			...rest,
+			"data-scope": "result",
+			"data-part": name,
+			children
+		});
+	};
+}
+/** A verdict drawn after the deed: the mark washes in the fixed
+* pigment, the title rides the serif, and the extra carries the way
+* onward. Any subset composes. */
+const Result = {
+	Root: ResultRoot,
+	Icon: ResultIcon,
+	Title: part("title", "h3"),
+	Description: part("description", "p"),
+	Extra: part("extra", "div")
+};
+//#endregion
+export { Result, ResultIcon, ResultRoot };

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

@@ -1,17 +1,2 @@
-import { CollectionItem } from "@ark-ui/react/collection";
-import { Select as Select$1, SelectRootComponentProps } from "@ark-ui/react/select";
-//#region src/components/select/index.d.ts
-/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
- * whole control and its list dissolves open as a paper vessel, the checked
- * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
- * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
- * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-type SelectOwnProps = {
-  /** One rung of the control-height ladder for the trigger. */
-  size?: "sm" | "md" | "lg";
-};
-declare function SelectRoot<T extends CollectionItem>(props: SelectRootComponentProps<T, SelectOwnProps>): import("react").JSX.Element;
-export declare const Select: Omit<typeof Select$1, "Root"> & {
-  Root: typeof SelectRoot;
-};
-//#endregion
+import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-Iy8m0Qev.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };

package/dist/components/select/index.mjs

@@ -1,18 +1,2 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { Select as Select$1 } from "@ark-ui/react/select";
-//#region src/components/select/index.tsx
-function SelectRoot(props) {
-	const { size = "md", ...rest } = props;
-	return /* @__PURE__ */ jsx(Select$1.Root, {
-		...rest,
-		"data-size": size
-	});
-}
-const Select = {
-	...Select$1,
-	Root: SelectRoot
-};
-injectComponentStyle("select");
-//#endregion
-export { Select };
+import { n as NativeSelect, t as Select } from "../../select-eAHutw56.mjs";
+export { NativeSelect, Select };

package/dist/components/spinner/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/index.tsx
@@ -5,10 +6,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * default — it reports progress without claiming attention. */
 function Spinner({ size = "md", children, ...rest }) {
 	injectComponentStyle("spinner");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("span", {
 		...rest,
 		role: "status",
-		"aria-label": rest["aria-label"] ?? "Loading",
+		"aria-label": rest["aria-label"] ?? messages.spinner.loading,
 		"data-scope": "spinner",
 		"data-part": "root",
 		"data-size": size,

package/dist/components/split-button/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,6 +17,7 @@ import { Menu } from "@ark-ui/react/menu";
 function SplitButton({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-scope": "split-button",
@@ -39,7 +41,7 @@ function SplitButton({ label, items = [], variant = "solid", tone = "ink", size
 					"data-size": size,
 					"data-square": "true",
 					"data-motion": "ink-ripple lit",
-					"aria-label": "More actions",
+					"aria-label": messages.more.actions,
 					children: chevronDown()
 				})
 			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/spotlight/index.d.ts
+export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+  children?: ReactNode;
+}
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. The wrapper only measures and writes the geometry —
+ * the lamp itself is the two layers the stylesheet paints. */
+export declare function Spotlight({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spotlight/index.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spotlight/index.tsx
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. The wrapper only measures and writes the geometry —
+* the lamp itself is the two layers the stylesheet paints. */
+function Spotlight({ radius, children, ...rest }) {
+	injectComponentStyle("spotlight");
+	const track = (event) => {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "spotlight",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-spot-radius": radius
+		},
+		onPointerMove: track,
+		onPointerEnter: (event) => {
+			track(event);
+			event.currentTarget.setAttribute("data-hovered", "");
+		},
+		onPointerLeave: (event) => event.currentTarget.removeAttribute("data-hovered"),
+		children
+	});
+}
+//#endregion
+export { Spotlight };