@bysages/react 0.3.0 → 0.4.0

package/dist/components/ai-suggestion/index.mjs

@@ -1,8 +1,9 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-suggestion/index.tsx
-function Suggestion({ prompt, onSelect, ...rest }) {
+function SuggestionImpl({ prompt, onSelect, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
@@ -12,5 +13,6 @@ function Suggestion({ prompt, onSelect, ...rest }) {
 		children: prompt
 	});
 }
+const Suggestion = withSelfRoot(SuggestionImpl);
 //#endregion
 export { Suggestion as AiSuggestion, Suggestion };

package/dist/components/ai-tool/index.d.mts

@@ -16,6 +16,9 @@ export interface ToolProps extends HTMLAttributes<HTMLDivElement> {
   input?: ReactNode;
   output?: ReactNode;
 }
-export declare function Tool({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
+declare function ToolImpl({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
+export declare const Tool: typeof ToolImpl & {
+  Root: typeof ToolImpl;
+};
 //#endregion
 export { Tool as AiTool };

package/dist/components/ai-tool/index.mjs

@@ -1,9 +1,10 @@
-import { t as chevron } from "../../chevron-BeHvt46K.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-tool/index.tsx
-function Tool({ name, label, status, input, output, ...rest }) {
+function ToolImpl({ name, label, status, input, output, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
@@ -32,5 +33,6 @@ function Tool({ name, label, status, input, output, ...rest }) {
 		}) })]
 	});
 }
+const Tool = withSelfRoot(ToolImpl);
 //#endregion
 export { Tool as AiTool, Tool };

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

@@ -1,6 +1,8 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/alert/index.d.ts
 export type AlertStatus = "ink" | "info" | "success" | "warning" | "danger";
+/** A notice
+
 /** A notice drawn on the page: a wash of the status pigment, one heavier
  * hairline on the leading edge, the serif for its title. Root, Icon,
  * Body, Title, Description — the icon reads the status from the Root. */

package/dist/components/alert/index.mjs

@@ -1,26 +1,19 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/components/alert/index.tsx
 const StatusContext = createContext("ink");
-function glyph(status) {
-	return /* @__PURE__ */ jsx("svg", {
+function statusIcon(status) {
+	return iconNode({
+		info: "info",
+		success: "circle-check",
+		warning: "triangle-alert",
+		danger: "circle-x",
+		ink: "info"
+	}[status], {
 		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: {
-			info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-			success: "m4 12.5 5 5L20 6.5",
-			warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-			danger: "M6 6l12 12M18 6 6 18",
-			ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
-		}[status] })
+		height: 16
 	});
 }
 function AlertRoot({ status = "ink", children, ...rest }) {
@@ -41,7 +34,7 @@ function Icon() {
 	return /* @__PURE__ */ jsx("span", {
 		"data-scope": "alert",
 		"data-part": "icon",
-		children: glyph(status)
+		children: statusIcon(status)
 	});
 }
 function Body({ children, ...rest }) {

package/dist/components/angle-slider/index.d.mts

@@ -5,12 +5,29 @@ type AngleSliderRootProps = ComponentProps<typeof AngleSlider$1.Root> & {
   /** One rung of the dial ladder — the diameter the needle sweeps. */
   size?: "sm" | "md" | "lg";
 };
-declare function AngleSliderRoot({ size, ...rest }: AngleSliderRootProps): import("react").JSX.Element;
+declare function AngleSliderRoot(props: AngleSliderRootProps): import("react").JSX.Element;
+export interface AngleSliderFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  step?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** One rung of the dial ladder — the diameter the needle sweeps. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: number) => void;
+}
+declare function AngleSliderFacade({ value, defaultValue, label, step, disabled, readOnly, size, className, onValueChange }: AngleSliderFacadeProps): import("react").JSX.Element;
+declare namespace AngleSliderFacade {
+  var displayName: string;
+}
 /** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
  * the thumb sweeps as a pigment needle over hairline degree ticks. The API
  * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
  * Marker, HiddenInput. */
-export declare const AngleSlider: Omit<typeof AngleSlider$1, "Root"> & {
+type AngleSliderParts = Omit<typeof AngleSlider$1, "Root"> & {
   Root: typeof AngleSliderRoot;
 };
+export declare const AngleSlider: typeof AngleSliderFacade & AngleSliderParts;
 //#endregion

package/dist/components/angle-slider/index.mjs

@@ -1,21 +1,44 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
 //#region src/components/angle-slider/index.tsx
-function AngleSliderRoot({ size = "md", ...rest }) {
+function AngleSliderRoot(props) {
+	const id = useElementId("angle-slider", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(AngleSlider$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
-* the thumb sweeps as a pigment needle over hairline degree ticks. The API
-* is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
-* Marker, HiddenInput. */
-const AngleSlider = {
+function AngleSliderFacade({ value, defaultValue = 45, label, step = 1, disabled = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(AngleSliderRoot, {
+		className,
+		size,
+		disabled,
+		readOnly,
+		step,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value),
+		children: [
+			label ? /* @__PURE__ */ jsx(AngleSlider$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(AngleSlider$1.ValueText, {}),
+			/* @__PURE__ */ jsxs(AngleSlider$1.Control, { children: [/* @__PURE__ */ jsx(AngleSlider$1.MarkerGroup, { children: [
+				0,
+				90,
+				180,
+				270
+			].map((degree) => /* @__PURE__ */ jsx(AngleSlider$1.Marker, { value: degree }, degree)) }), /* @__PURE__ */ jsx(AngleSlider$1.Thumb, { children: /* @__PURE__ */ jsx(AngleSlider$1.HiddenInput, {}) })] })
+		]
+	});
+}
+AngleSliderFacade.displayName = "SAngleSlider";
+const AngleSlider = Object.assign(AngleSliderFacade, {
 	...AngleSlider$1,
 	Root: AngleSliderRoot
-};
+});
 injectComponentStyle("angle-slider");
 //#endregion
 export { AngleSlider };

package/dist/components/aspect-ratio/index.d.mts

@@ -6,5 +6,8 @@ export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
   /** A CSS `aspect-ratio` value — "16 / 9", "4 / 3", "1 / 1". */
   ratio?: string;
 }
-export declare function AspectRatio({ ratio, ...rest }: AspectRatioProps): import("react").JSX.Element;
+declare function AspectRatioImpl({ ratio, ...rest }: AspectRatioProps): import("react").JSX.Element;
+export declare const AspectRatio: typeof AspectRatioImpl & {
+  Root: typeof AspectRatioImpl;
+};
 //#endregion

package/dist/components/aspect-ratio/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/aspect-ratio/index.tsx
-function AspectRatio({ ratio = "1 / 1", ...rest }) {
+function AspectRatioImpl({ ratio = "1 / 1", ...rest }) {
 	injectComponentStyle("aspect-ratio");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -13,5 +14,6 @@ function AspectRatio({ ratio = "1 / 1", ...rest }) {
 		"data-part": "root"
 	});
 }
+const AspectRatio = withSelfRoot(AspectRatioImpl);
 //#endregion
 export { AspectRatio };

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

@@ -1,3 +1,4 @@
+import { Combobox } from "../combobox/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/autocomplete/index.d.ts
 /**
@@ -17,5 +18,6 @@ export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>,
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string) => void;
 }
-export declare function AutoComplete({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+declare function AutoCompleteImpl({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
 //#endregion

package/dist/components/autocomplete/index.mjs

@@ -1,17 +1,23 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 //#region src/components/autocomplete/index.tsx
-function AutoComplete({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
+function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("combobox");
+	const messages = useComponentMessages();
+	const hostId = useElementId("autocomplete", rest);
 	const { collection, filter: filterItems } = useListCollection({
 		initialItems: items,
 		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rest,
+		id: `${hostId}:combobox`,
 		collection,
 		inputValue: value,
 		allowCustomValue: true,
@@ -25,11 +31,12 @@ function AutoComplete({ value = "", items = [], placeholder, filter, size = "md"
 			onValueChange?.(details.inputValue);
 		},
 		positioning: { sameWidth: true },
-		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: "No matches" }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
+		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: messages.command.noMatches }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
 			item,
 			children: /* @__PURE__ */ jsx(Combobox.ItemText, { children: item })
 		}, item))] }) }) })]
 	});
 }
+const AutoComplete = Object.assign(AutoCompleteImpl, Combobox$1);
 //#endregion
 export { AutoComplete };

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

@@ -16,8 +16,8 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
    * beside a round portrait. */
   shape?: "circle" | "square";
 }
-declare function AvatarRoot({ size, shape, ...rest }: AvatarProps): import("react").JSX.Element;
-export declare const Avatar: typeof Avatar$1 & {
+declare function AvatarRoot(props: AvatarProps): import("react").JSX.Element;
+export declare const Avatar: typeof AvatarRoot & typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/index.mjs

@@ -1,15 +1,22 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx
-function AvatarRoot({ size, shape = "circle", ...rest }) {
+function AvatarRoot(props) {
+	const id = useElementId("avatar", props);
+	const { size, shape = "circle", ...rest } = props;
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
+		id,
 		"data-size": size,
 		"data-shape": shape
 	});
 }
-const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
+const Avatar = Object.assign(AvatarRoot, {
+	...Avatar$1,
+	Root: AvatarRoot
+});
 injectComponentStyle("avatar");
 //#endregion
 export { Avatar };

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

@@ -7,5 +7,8 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
    * stylesheet to re-point the avatars' measure. */
   size?: "sm" | "md" | "lg";
 }
-export declare function AvatarGroup({ size, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+declare function AvatarGroupImpl({ size, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export declare const AvatarGroup: typeof AvatarGroupImpl & {
+  Root: typeof AvatarGroupImpl;
+};
 //#endregion

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

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar-group/index.tsx
-function AvatarGroup({ size, children, ...rest }) {
+function AvatarGroupImpl({ size, children, ...rest }) {
 	injectComponentStyle("avatar-group");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -11,5 +12,6 @@ function AvatarGroup({ size, children, ...rest }) {
 		children
 	});
 }
+const AvatarGroup = withSelfRoot(AvatarGroupImpl);
 //#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.d.mts

@@ -11,6 +11,9 @@ export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
    * scrollTop. The host supplies the positioning context. */
   scrollEl?: () => HTMLElement | null;
 }
+/**
+ * A way
+
 /**
  * A way home: after the page has scrolled past `threshold`, a small
  * floating control rises at the page's corner and returns the reader to
@@ -25,5 +28,8 @@ export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
  * paper, hairline and halo are its; this family owns only the floating
  * and the entrance.
  */
-export declare function BackTop({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
+declare function BackTopImpl({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
+export declare const BackTop: typeof BackTopImpl & {
+  Root: typeof BackTopImpl;
+};
 //#endregion

package/dist/components/back-top/index.mjs

@@ -1,23 +1,17 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 //#region src/components/back-top/index.tsx
-/** The single glyph a way-home control needs: one stroke pointing up. */
-function chevronUp() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 14 6-6 6 6" })
-	});
-}
+const chevronUp = iconNode("chevron-up", {
+	width: 16,
+	height: 16
+});
+/**
+* A way
+
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -32,7 +26,7 @@ function chevronUp() {
 * paper, hairline and halo are its; this family owns only the floating
 * and the entrance.
 */
-function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
+function BackTopImpl({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
 	injectComponentStyle("back-top");
 	const [visible, setVisible] = useState(false);
 	useEffect(() => {
@@ -74,9 +68,10 @@ function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest })
 			"aria-hidden": visible ? void 0 : "true",
 			tabIndex: visible ? 0 : -1,
 			onClick: toTop,
-			children: rest.children ?? chevronUp()
+			children: rest.children ?? chevronUp
 		})
 	});
 }
+const BackTop = withSelfRoot(BackTopImpl);
 //#endregion
 export { BackTop };

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

@@ -6,5 +6,8 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Badge({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+declare function BadgeImpl({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+export declare const Badge: typeof BadgeImpl & {
+  Root: typeof BadgeImpl;
+};
 //#endregion

package/dist/components/badge/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/index.tsx
-function Badge({ tone = "ink", variant = "solid", ...rest }) {
+function BadgeImpl({ tone = "ink", variant = "solid", ...rest }) {
 	injectComponentStyle("badge");
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
@@ -11,5 +12,6 @@ function Badge({ tone = "ink", variant = "solid", ...rest }) {
 		"data-variant": variant
 	});
 }
+const Badge = withSelfRoot(BadgeImpl);
 //#endregion
 export { Badge };

package/dist/components/banner/index.mjs

@@ -1,3 +1,5 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/index.tsx
@@ -31,24 +33,17 @@ const Description = part("Description", "p");
 const Actions = part("Actions", "div");
 /** The quiet close: a plain square-cut button; dismissal stays the
 * consumer's state. */
-const Close = (rest) => /* @__PURE__ */ jsx("button", {
-	...rest,
-	type: rest.type ?? "button",
-	"aria-label": rest["aria-label"] ?? "Dismiss",
-	"data-scope": "banner",
-	"data-part": "close",
-	children: /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M4 4l8 8M12 4l-8 8",
-			stroke: "currentColor",
-			strokeWidth: 1.5,
-			strokeLinecap: "round"
-		})
-	})
-});
+const Close = (rest) => {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: rest.type ?? "button",
+		"aria-label": rest["aria-label"] ?? messages.banner.dismiss,
+		"data-scope": "banner",
+		"data-part": "close",
+		children: iconNode("x")
+	});
+};
 const Banner = Object.assign(Root, {
 	Root,
 	Icon,

package/dist/components/block-ui/index.d.mts

@@ -8,5 +8,8 @@ export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
 /** A curtain over content that must wait: the blocked region keeps its
  * shape and dims under frosted paper while a quiet wheel reports the
  * wait. Callers own the state; the curtain only answers it. */
-export declare function BlockUI({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+declare function BlockUIImpl({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+export declare const BlockUI: typeof BlockUIImpl & {
+  Root: typeof BlockUIImpl;
+};
 //#endregion

package/dist/components/block-ui/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Spinner } from "../spinner/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** A curtain over content that must wait: the blocked region keeps its
 * shape and dims under frosted paper while a quiet wheel reports the
 * wait. Callers own the state; the curtain only answers it. */
-function BlockUI({ blocked = false, children, ...rest }) {
+function BlockUIImpl({ blocked = false, children, ...rest }) {
 	injectComponentStyle("block-ui");
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -20,5 +21,6 @@ function BlockUI({ blocked = false, children, ...rest }) {
 		}) : null]
 	});
 }
+const BlockUI = withSelfRoot(BlockUIImpl);
 //#endregion
 export { BlockUI };

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

@@ -1,13 +1,8 @@
 import { AnchorHTMLAttributes, HTMLAttributes } from "react";
 //#region src/components/breadcrumb/index.d.ts
-export declare const Breadcrumb: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-} & {
-  Root: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+declare function Root({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare const Breadcrumb: typeof Root & {
+  Root: typeof Root;
   List: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/breadcrumb/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/breadcrumb/index.tsx
@@ -16,7 +17,16 @@ function part(name, tag, extra = {}, fallback) {
 	Component.displayName = "Breadcrumb" + name;
 	return Component;
 }
-const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+function Root({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		"aria-label": rest["aria-label"] ?? messages.breadcrumb.label,
+		"data-scope": "breadcrumb",
+		"data-part": "root",
+		children
+	});
+}
 const List = part("List", "ol");
 const Item = part("Item", "li");
 const Link = part("Link", "a");

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

@@ -15,5 +15,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children?: ReactNode;
 }
-export declare function Button({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+declare function ButtonImpl({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+export declare const Button: typeof ButtonImpl & {
+  Root: typeof ButtonImpl;
+};
 //#endregion

package/dist/components/button/index.mjs

@@ -1,8 +1,9 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from "react";
 //#region src/components/button/index.tsx
-function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
+function ButtonImpl({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
 	injectComponentStyle("button");
 	const partProps = {
 		...rest,
@@ -25,5 +26,6 @@ function Button({ variant = "solid", tone = "ink", size = "md", square = false,
 		children
 	});
 }
+const Button = withSelfRoot(ButtonImpl);
 //#endregion
 export { Button };

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

@@ -1,3 +1,4 @@
+import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { HTMLAttributes } from "react";
 import { DatePickerRootProps } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.d.ts
@@ -13,5 +14,6 @@ export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
  * title zooms out through month and year grids; the grids themselves
  * are the shared machinery — value, range selection, and focus ride
  * Ark's own contract. */
-export declare function Calendar({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+declare function CalendarImpl({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion