@bysages/react 0.2.3 → 0.3.1

package/dist/components/cascade-select/index.mjs

@@ -1,6 +1,7 @@
-import { Input } from "../input/index.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
@@ -40,6 +41,7 @@ const checkGlyph = /* @__PURE__ */ jsx("svg", {
 });
 function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("cascade-select");
+	const messages = useComponentMessages();
 	const id = useId();
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
@@ -151,6 +153,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 							children: item.label
 						}),
 						itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
+							"data-scope": "cascade-select",
 							"data-part": "branch-indicator",
 							"aria-hidden": "true",
 							children: chevronRight
@@ -164,7 +167,8 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			})
 		});
 		const next = nodeState.highlightedChild;
-		return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
+		const child = next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [list, child] });
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -174,6 +178,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			...api.getControlProps(),
 			children: /* @__PURE__ */ jsxs("button", {
 				...api.getTriggerProps(),
+				"aria-labelledby": id + ":value-text",
 				onClick: (event) => {
 					api.getTriggerProps().onClick?.(event);
 					setQuery("");
@@ -181,6 +186,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 				disabled: disabled || void 0,
 				children: [/* @__PURE__ */ jsx("span", {
 					...api.getValueTextProps(),
+					id: id + ":value-text",
 					children: display || placeholder
 				}), /* @__PURE__ */ jsx("span", {
 					...api.getIndicatorProps(),
@@ -193,22 +199,26 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 				...api.getContentProps(),
 				"data-size": size,
 				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "cascade-select",
 					"data-part": "search",
 					children: /* @__PURE__ */ jsx(Input, {
 						size: "sm",
 						value: query,
 						onValueChange: setQuery,
-						placeholder: "Filter…",
-						"aria-label": "Filter options"
+						placeholder: messages.select.filter,
+						"aria-label": messages.select.filter
 					})
 				}) : null, /* @__PURE__ */ jsx("div", {
+					"data-scope": "cascade-select",
 					"data-part": "corridor",
 					"data-flow": filtering ? "flat" : "columns",
 					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "cascade-select",
 						"data-part": "empty",
 						children: "Nothing matches"
 					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
 						type: "button",
+						"data-scope": "cascade-select",
 						"data-part": "match",
 						"data-selected": isSelected(hit.path) || void 0,
 						onClick: () => pickMatch(hit.path),

package/dist/components/command/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 { useEffect, useState } from "react";
@@ -6,9 +7,12 @@ import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog } from "@ark-ui/react/dialog";
 //#region src/components/command/index.tsx
-function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText = "No matching commands", onSelect, onOpenChange, onInputValueChange }) {
+function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange }) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
+	const messages = useComponentMessages();
+	const resolvedPlaceholder = placeholder ?? messages.command.search;
+	const resolvedEmptyText = emptyText ?? messages.command.noMatches;
 	const [internalOpen, setInternalOpen] = useState(false);
 	const [listOpen, setListOpen] = useState(true);
 	const [fieldText, setFieldText] = useState("");
@@ -74,6 +78,7 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 					children: /* @__PURE__ */ jsx("div", {
 						"data-scope": "command",
 						"data-part": "content",
+						"aria-label": messages.command.palette,
 						children: /* @__PURE__ */ jsxs(Combobox.Root, {
 							collection,
 							inputValue,
@@ -96,7 +101,8 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 								asChild: true,
 								children: /* @__PURE__ */ jsx("input", {
 									type: "text",
-									placeholder,
+									placeholder: resolvedPlaceholder,
+									"aria-label": resolvedPlaceholder,
 									"data-scope": "command",
 									"data-part": "input"
 								})
@@ -122,7 +128,7 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
 										"data-scope": "command",
 										"data-part": "empty",
-										children: emptyText
+										children: resolvedEmptyText
 									}) : null]
 								})
 							})]

package/dist/components/config-provider/index.d.mts

@@ -1,4 +1,4 @@
-import { ThemeScene } from "@bysages/core";
+import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/config-provider/index.d.ts
 /** The four density tiers the token layer's `[data-density]` selectors
@@ -22,6 +22,8 @@ export interface ConfigContext {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Partial leaf overrides for wrapper-owned runtime copy. */
+  messages?: ComponentMessagesOverride;
 }
 /** The nearest provider's snapshot, or an empty one when no provider
  * wraps the caller — the hook the date and format families will consume
@@ -33,6 +35,7 @@ export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
   accent?: string;
   dir?: "ltr" | "rtl";
   locale?: string;
+  messages?: ComponentMessagesOverride;
   children?: ReactNode;
 }
 /**
@@ -42,5 +45,5 @@ export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
  * descendants through `useConfig`, so interactive behavior (formatting,
  * messages) and visual theming stay one decision.
  */
-export declare function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest }: ConfigProviderProps): import("react").JSX.Element;
+export declare function ConfigProvider({ density, scene, accent, dir, locale, messages, children, ...rest }: ConfigProviderProps): import("react").JSX.Element;
 //#endregion

package/dist/components/config-provider/index.mjs

@@ -15,14 +15,15 @@ function useConfig() {
 * descendants through `useConfig`, so interactive behavior (formatting,
 * messages) and visual theming stay one decision.
 */
-function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest }) {
+function ConfigProvider({ density, scene, accent, dir, locale, messages, children, ...rest }) {
 	return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
 		value: {
 			density,
 			scene,
 			accent,
 			dir,
-			locale
+			locale,
+			messages
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			...rest,

package/dist/components/data-view/index.d.mts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-view/index.d.ts
+export interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** Ledger rows or a lattice of cards. */
+  layout?: "list" | "grid";
+  /** Records per page; leave unset to show everything at once. */
+  pageSize?: number;
+  /** Renders one record; the view lays the returned nodes out. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+  header?: ReactNode;
+}
+/** One vessel, two layouts: the caller renders each record through
+ * renderItem, the view lays the records out as a ledger or a lattice
+ * and — when a page size is given — pages them with the pagination
+ * family's own parts rather than a second implementation. */
+export declare function DataView({ items, layout, pageSize, renderItem, header, ...rest }: DataViewProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,66 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { Pagination } from "../pagination/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/data-view/index.tsx
+/** One vessel, two layouts: the caller renders each record through
+* renderItem, the view lays the records out as a ledger or a lattice
+* and — when a page size is given — pages them with the pagination
+* family's own parts rather than a second implementation. */
+function DataView({ items, layout = "list", pageSize, renderItem, header, ...rest }) {
+	injectComponentStyle("data-view");
+	const [page, setPage] = useState(1);
+	const messages = useComponentMessages();
+	const pageCount = pageSize ? Math.max(1, Math.ceil(items.length / pageSize)) : 1;
+	const visible = pageSize ? items.slice((page - 1) * pageSize, page * pageSize) : items;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "data-view",
+		"data-part": "root",
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "content",
+				"data-layout": layout,
+				children: visible.map((item, index) => /* @__PURE__ */ jsx("div", {
+					"data-scope": "data-view",
+					"data-part": "cell",
+					children: renderItem?.(item, index)
+				}, index))
+			}),
+			pageSize && pageCount > 1 ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "pager",
+				children: /* @__PURE__ */ jsxs(Pagination.Root, {
+					count: items.length,
+					pageSize,
+					page,
+					siblingCount: 1,
+					onPageChange: (details) => setPage(details.page),
+					children: [
+						/* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+							"aria-label": messages.pagination.previous,
+							children: "‹"
+						}),
+						/* @__PURE__ */ jsx(Pagination.Context, { children: (pagination) => pagination.pages.map((entry, index) => entry.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, {
+							index,
+							children: "…"
+						}, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+							type: "page",
+							value: entry.value,
+							children: entry.value
+						}, entry.value)) }),
+						/* @__PURE__ */ jsx(Pagination.NextTrigger, {
+							"aria-label": messages.pagination.next,
+							children: "›"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DataView };

package/dist/components/deferred-content/index.d.mts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/deferred-content/index.d.ts
+export interface DeferredContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** How much of the placeholder must be visible before the content
+   * mounts, from 0 (any pixel) to 1 (the whole box). */
+  threshold?: number;
+  /** Drawn until the box approaches the viewport. */
+  placeholder?: ReactNode;
+  children?: ReactNode;
+}
+/** Content that waits to be worth rendering: the slot stays off the
+ * tree until the placeholder scrolls near the viewport, then mounts
+ * once and stays. The placeholder is drawn by the caller, so the late
+ * arrival costs no layout shift it cannot predict. */
+export declare function DeferredContent({ threshold, placeholder, children, ...rest }: DeferredContentProps): import("react").JSX.Element;
+//#endregion

package/dist/components/deferred-content/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/deferred-content/index.tsx
+/** Content that waits to be worth rendering: the slot stays off the
+* tree until the placeholder scrolls near the viewport, then mounts
+* once and stays. The placeholder is drawn by the caller, so the late
+* arrival costs no layout shift it cannot predict. */
+function DeferredContent({ threshold = .2, placeholder, children, ...rest }) {
+	injectComponentStyle("deferred-content");
+	const host = useRef(null);
+	const [active, setActive] = useState(false);
+	useEffect(() => {
+		const node = host.current;
+		if (!node) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setActive(true);
+				observer.disconnect();
+			}
+		}, { threshold });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [threshold]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: host,
+		...rest,
+		"data-scope": "deferred-content",
+		"data-part": "root",
+		children: active ? children : placeholder
+	});
+}
+//#endregion
+export { DeferredContent };

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

@@ -5,14 +5,22 @@ import { HTMLAttributes } from "react";
  * stacks each pair for narrow measures. */
 export interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement> {
   layout?: "horizontal" | "vertical";
+  /** The framed register: one hairline round the whole, terms on
+   * inset paper. */
+  bordered?: boolean;
+  /** Pairs across the grid: one ledger per column. */
+  column?: number;
+}
+export declare function DescriptionsRoot({ layout, bordered, column, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
+declare function DescriptionsItem({ span, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  span?: number;
+}): import("react").JSX.Element;
+declare namespace DescriptionsItem {
+  var displayName: string;
 }
-export declare function DescriptionsRoot({ layout, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
 export declare const Descriptions: {
   Root: typeof DescriptionsRoot;
-  Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  Item: typeof DescriptionsItem;
   Term: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/descriptions/index.mjs

@@ -1,13 +1,18 @@
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/descriptions/index.tsx
-function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
+function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1, children, ...rest }) {
 	injectComponentStyle("descriptions");
 	return /* @__PURE__ */ jsx("dl", {
 		...rest,
 		"data-scope": "descriptions",
 		"data-part": "root",
 		"data-layout": layout,
+		"data-bordered": bordered || void 0,
+		style: {
+			...rest.style,
+			"--bs-desc-columns": String(column)
+		},
 		children
 	});
 }
@@ -22,9 +27,22 @@ function part(name, tag) {
 	Component.displayName = "Descriptions" + name;
 	return Component;
 }
+function DescriptionsItem({ span = 1, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			...rest.style,
+			"--bs-desc-span": String(span * 2)
+		},
+		"data-scope": "descriptions",
+		"data-part": "item",
+		children
+	});
+}
+DescriptionsItem.displayName = "DescriptionsItem";
 const Descriptions = {
 	Root: DescriptionsRoot,
-	Item: part("Item", "div"),
+	Item: DescriptionsItem,
 	Term: part("Term", "dt"),
 	Detail: part("Detail", "dd")
 };

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/dock/index.d.ts
+export interface DockProps extends HTMLAttributes<HTMLDivElement> {
+  /** The tallest an item swells under the hand — 1 stands still. */
+  maxScale?: number;
+  /** How far the hand reaches, in px, before an item stops answering. */
+  radius?: number;
+  children?: ReactNode;
+}
+export interface DockItemProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+/** The magnifying dock: a floating rail whose icons swell toward the
+ * hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+ * eases the chase, so no spring engine rides along. */
+export declare function DockRoot({ maxScale, radius, children, ...rest }: DockProps): import("react").JSX.Element;
+/** One moored place in the rail: whatever slots in grows from the
+ * floor, never from its center. */
+export declare function DockItem({ children, ...rest }: DockItemProps): import("react").JSX.Element;
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+export declare const Dock: typeof DockRoot & {
+  Root: typeof DockRoot;
+  Item: typeof DockItem;
+};
+//#endregion

package/dist/components/dock/index.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dock/index.tsx
+const ITEM = "[data-scope=\"dock\"][data-part=\"item\"]";
+/** The magnifying dock: a floating rail whose icons swell toward the
+* hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+* eases the chase, so no spring engine rides along. */
+function DockRoot({ maxScale = 1.5, radius = 96, children, ...rest }) {
+	injectComponentStyle("dock");
+	const magnify = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) {
+			const rect = item.getBoundingClientRect();
+			const dist = Math.abs(event.clientX - (rect.left + rect.width / 2));
+			const t = Math.max(0, 1 - dist / radius);
+			item.style.setProperty("--bs-dock-scale", (1 + (maxScale - 1) * t * t).toFixed(4));
+		}
+	};
+	const reset = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) item.style.removeProperty("--bs-dock-scale");
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "dock",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-dock-max-scale": maxScale
+		},
+		onPointerMove: magnify,
+		onPointerLeave: reset,
+		children
+	});
+}
+/** One moored place in the rail: whatever slots in grows from the
+* floor, never from its center. */
+function DockItem({ children, ...rest }) {
+	injectComponentStyle("dock");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "dock",
+		"data-part": "item",
+		children
+	});
+}
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+const Dock = Object.assign(DockRoot, {
+	Root: DockRoot,
+	Item: DockItem
+});
+//#endregion
+export { Dock, DockItem, DockRoot };

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

@@ -1,5 +1,6 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dynamic-input/index.tsx
@@ -13,6 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, size = "md", onValueChange, children: _children, ...rest }) {
 	injectComponentStyle("dynamic-input");
+	const messages = useComponentMessages();
 	const values = value ?? [""];
 	const update = (index, next) => {
 		const rows = values.slice();
@@ -47,7 +49,7 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 				square: true,
 				size,
 				disabled: disabled || !canRemove,
-				"aria-label": `Remove entry ${index + 1}`,
+				"aria-label": messages.dynamicEntry.remove,
 				onClick: () => remove(index),
 				children: crossIcon()
 			})]

package/dist/components/file-upload/index.d.mts

@@ -6,13 +6,20 @@ type FileUploadRootProps = ComponentProps<typeof FileUpload$1.Root> & {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot({ size, ...rest }: FileUploadRootProps): import("react").JSX.Element;
+/** The inner trigger repeats the click binding the dropzone already
+ * owns, and no flavor of taming a nested button survives the audit —
+ * assistive tech can still land on it. So the visual cue is a plain
+ * span wearing the trigger props; the dropzone stays the one real
+ * control, keyboard included. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("react").JSX.Element;
 /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
  * dropzone that floods with subtle light on drag-over, and accepted files
  * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
  * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
  * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
  * Context. */
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root"> & {
+export declare const FileUpload: Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
 };
 //#endregion

package/dist/components/file-upload/index.mjs

@@ -8,6 +8,24 @@ function FileUploadRoot({ size = "md", ...rest }) {
 		"data-size": size
 	});
 }
+/** The inner trigger repeats the click binding the dropzone already
+* owns, and no flavor of taming a nested button survives the audit —
+* assistive tech can still land on it. So the visual cue is a plain
+* span wearing the trigger props; the dropzone stays the one real
+* control, keyboard included. */
+function FileUploadTrigger(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(FileUpload$1.Trigger, {
+		asChild: true,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-scope": "file-upload",
+			"data-part": "trigger",
+			"aria-hidden": "true",
+			children
+		})
+	});
+}
 /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
 * dropzone that floods with subtle light on drag-over, and accepted files
 * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
@@ -16,7 +34,8 @@ function FileUploadRoot({ size = "md", ...rest }) {
 * Context. */
 const FileUpload = {
 	...FileUpload$1,
-	Root: FileUploadRoot
+	Root: FileUploadRoot,
+	Trigger: FileUploadTrigger
 };
 injectComponentStyle("file-upload");
 //#endregion

package/dist/components/float-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";
@@ -46,12 +47,13 @@ const STEP_DOWN = {
 };
 function Trigger({ label, children }) {
 	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "solid",
 		square: true,
 		size: context?.size ?? "lg",
 		onClick: () => context?.toggle(),
-		"aria-label": label || "Actions",
+		"aria-label": label || messages.floatButton.actions,
 		"aria-expanded": context ? context.open : false,
 		children
 	});

package/dist/components/form/index.mjs

@@ -40,7 +40,7 @@ function FormField({ form: formProp, name, label, hint, required = false, invali
 		const errors = (!meta ? [] : meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
 		const isInvalid = invalid || errors.length > 0;
 		return /* @__PURE__ */ jsx("div", {
-			class: klass,
+			className: klass,
 			style,
 			"data-form-field": name,
 			children: /* @__PURE__ */ jsxs(Field.Root, {

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

@@ -1,9 +1,11 @@
 import { HTMLAttributes } from "react";
+import { IconifyIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `name` from the registry, or
- * bring your own; the well renders either. */
+ * size of its own. Bring a glyph through `glyph` (a direct registry
+ * import), through `name` from the whitelisted registry, or bring your
+ * own; the well renders either. */
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -11,9 +13,12 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry. Ignored when children are given — an
-   * explicit glyph always wins over the registry. */
+  /** A glyph from the registry, imported directly. Ignored when children
+   * are given — an explicit glyph always wins. */
+  glyph?: IconifyIcon;
+  /** A registry name — only the whitelisted set the wrappers draw
+   * themselves. Ignored when `glyph` or children are given. */
   name?: string;
 }
-export declare function Icon({ size, label, name, children, ...rest }: IconProps): import("react").JSX.Element;
+export declare function Icon({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
-import { getIcon } from "@bysages/icons";
+import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx
-function Icon({ size = "inherit", label, name, children, ...rest }) {
+function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
 	injectComponentStyle("icon");
-	const glyph = name && children == null ? getIcon(name) : void 0;
-	if (name && children == null && !glyph) console.error(`[icons] unknown icon name "${name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
+	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		role: label != null ? "img" : void 0,
@@ -14,11 +14,11 @@ function Icon({ size = "inherit", label, name, children, ...rest }) {
 		"data-scope": "icon",
 		"data-part": "root",
 		"data-size": size,
-		children: children ?? (glyph ? /* @__PURE__ */ jsx("svg", {
-			viewBox: `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`,
+		children: children ?? (resolved ? /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${resolved.width ?? 24} ${resolved.height ?? 24}`,
 			fill: "currentColor",
 			"aria-hidden": "true",
-			dangerouslySetInnerHTML: { __html: glyph.body }
+			dangerouslySetInnerHTML: { __html: resolved.body }
 		}) : null)
 	});
 }