@bysages/react 0.4.3 → 0.5.0

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

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 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
+// src/components/angle-slider/index.tsx
 function AngleSliderRoot(props) {
 	const id = useElementId("angle-slider", props);
 	const { size = "md", ...rest } = props;
@@ -40,5 +40,4 @@ const AngleSlider = Object.assign(AngleSliderFacade, {
 	Root: AngleSliderRoot
 });
 injectComponentStyle("angle-slider");
-//#endregion
 export { AngleSlider };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/aspect-ratio/index.d.ts
 /** A frame that keeps its shape: the box holds the given ratio whatever
  * the width it is dealt, and the child fills the frame it is given. */
 export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
@@ -10,4 +9,4 @@ declare function AspectRatioImpl({ ratio, ...rest }: AspectRatioProps): import("
 export declare const AspectRatio: typeof AspectRatioImpl & {
   Root: typeof AspectRatioImpl;
 };
-//#endregion
+export {};

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

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

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

@@ -1,6 +1,5 @@
 import { Combobox } from "../combobox/index.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/autocomplete/index.d.ts
 /**
  * Free text with suggestions: the reader types anything, the list
  * narrows to help, and both a pick and a custom value end up in the
@@ -20,4 +19,4 @@ export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 declare function AutoCompleteImpl({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
 export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
-//#endregion
+export {};

package/dist/components/autocomplete/index.mjs

@@ -1,5 +1,5 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +7,7 @@ import { useEffect, useRef } from "react";
 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
+// src/components/autocomplete/index.tsx
 function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("combobox");
 	const messages = useComponentMessages();
@@ -45,5 +45,4 @@ function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size =
 	});
 }
 const AutoComplete = Object.assign(AutoCompleteImpl, Combobox$1);
-//#endregion
 export { AutoComplete };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
-//#region src/components/avatar/index.d.ts
 /** Avatar, dressed in the paper-and-ink system: a circular seal on
  * inset paper that holds initials until the image loads over them.
  * `size` picks a control-height rung for the seal — the core styles
@@ -9,7 +8,7 @@ import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 export type AvatarSize = "sm" | "md" | "lg";
 export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   /** Seal diameter: the small, medium, or large control rung. The
-   * default (large) stands as tall as the biggest control so an avatar
+   * default (medium) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
   /** The corner: round by default; square cuts it sharp, a stamp
@@ -17,7 +16,17 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   shape?: "circle" | "square";
 }
 declare function AvatarRoot(props: AvatarProps): import("react").JSX.Element;
-export declare const Avatar: typeof AvatarRoot & typeof Avatar$1 & {
+export interface AvatarFacadeProps extends AvatarProps {
+  /** The person's name; its first two initials wait beneath an image. */
+  name?: string;
+  /** The portrait to load over the name's initials. */
+  src?: string;
+}
+declare function AvatarFacade({ name, src, size, shape, children, ...rest }: AvatarFacadeProps): import("react").JSX.Element;
+declare namespace AvatarFacade {
+  var displayName: string;
+}
+export declare const Avatar: typeof AvatarFacade & typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };
-//#endregion
+export {};

package/dist/components/avatar/index.mjs

@@ -1,11 +1,14 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
-//#region src/components/avatar/index.tsx
+// src/components/avatar/index.tsx
+function initials(name) {
+	return name?.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") ?? "";
+}
 function AvatarRoot(props) {
 	const id = useElementId("avatar", props);
-	const { size, shape = "circle", ...rest } = props;
+	const { size = "md", shape = "circle", ...rest } = props;
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
 		id,
@@ -13,10 +16,21 @@ function AvatarRoot(props) {
 		"data-shape": shape
 	});
 }
-const Avatar = Object.assign(AvatarRoot, {
+function AvatarFacade({ name, src, size = "md", shape, children, ...rest }) {
+	return /* @__PURE__ */ jsx(AvatarRoot, {
+		size,
+		shape,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
+			src,
+			alt: name
+		}) : null, name ? /* @__PURE__ */ jsx(Avatar$1.Fallback, { children: initials(name) }) : null] })
+	});
+}
+AvatarFacade.displayName = "SAvatar";
+const Avatar = Object.assign(AvatarFacade, {
 	...Avatar$1,
 	Root: AvatarRoot
 });
 injectComponentStyle("avatar");
-//#endregion
 export { Avatar };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/avatar-group/index.d.ts
 /** Avatars overlapping one row, each rimmed in the ground so the pile
  * stays legible. */
 export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
@@ -11,4 +10,4 @@ declare function AvatarGroupImpl({ size, children, ...rest }: AvatarGroupProps):
 export declare const AvatarGroup: typeof AvatarGroupImpl & {
   Root: typeof AvatarGroupImpl;
 };
-//#endregion
+export {};

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

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

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/back-top/index.d.ts
 export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
   /** How far the reader must have travelled (px) before the affordance
    * appears. */
@@ -32,4 +31,4 @@ declare function BackTopImpl({ threshold, label, scrollEl, ...rest }: BackTopPro
 export declare const BackTop: typeof BackTopImpl & {
   Root: typeof BackTopImpl;
 };
-//#endregion
+export {};

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

@@ -1,10 +1,10 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-//#region src/components/back-top/index.tsx
+// src/components/back-top/index.tsx
 const chevronUp = iconNode("chevron-up", {
 	width: 16,
 	height: 16
@@ -73,5 +73,4 @@ function BackTopImpl({ threshold = 400, label = "Back to top", scrollEl, ...rest
 	});
 }
 const BackTop = withSelfRoot(BackTopImpl);
-//#endregion
 export { BackTop };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/badge/index.d.ts
 /** A small seal of state. Ink is the neutral tone; the four semantic
  * pigments are fixed. Subtle and outline re-register the same pigment. */
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -10,4 +9,4 @@ declare function BadgeImpl({ tone, variant, ...rest }: BadgeProps): import("reac
 export declare const Badge: typeof BadgeImpl & {
   Root: typeof BadgeImpl;
 };
-//#endregion
+export {};

package/dist/components/badge/index.mjs

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

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

@@ -1,10 +1,23 @@
-import { ButtonHTMLAttributes, HTMLAttributes } from "react";
-//#region src/components/banner/index.d.ts
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 export type BannerStatus = "ink" | "info" | "success" | "warning" | "danger";
 export interface BannerRootProps extends HTMLAttributes<HTMLElement> {
   status?: BannerStatus;
 }
-export declare const Banner: (({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element) & {
+export interface BannerFacadeProps extends Omit<BannerRootProps, "title"> {
+  /** The glance line, set in the serif. */
+  title?: string;
+  /** The supporting line beneath the title. */
+  message?: string;
+  /** Adds the close control and lets the facade own dismissal. */
+  dismissible?: boolean;
+  /** The reader's answers, laid beside the notice's prose. */
+  actions?: ReactNode;
+}
+declare function BannerFacade({ status, title, message, dismissible, actions, children, ...rest }: BannerFacadeProps): import("react").JSX.Element | null;
+declare namespace BannerFacade {
+  var displayName: string;
+}
+export declare const Banner: typeof BannerFacade & {
   Root: ({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element;
   Icon: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
@@ -28,4 +41,4 @@ export declare const Banner: (({ status, children, ...rest }: BannerRootProps) =
   };
   Close: (rest: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
 };
-//#endregion
+export {};

package/dist/components/banner/index.mjs

@@ -1,8 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/banner/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/banner/index.tsx
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -44,7 +45,22 @@ const Close = (rest) => {
 		children: iconNode("x")
 	});
 };
-const Banner = Object.assign(Root, {
+function BannerFacade({ status = "ink", title, message, dismissible = false, actions, children, ...rest }) {
+	const [open, setOpen] = useState(true);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs(Root, {
+		status,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Body, { children: [
+			title ? /* @__PURE__ */ jsx(Title, { children: title }) : null,
+			message ? /* @__PURE__ */ jsx(Description, { children: message }) : null,
+			children,
+			actions ? /* @__PURE__ */ jsx(Actions, { children: actions }) : null
+		] }), dismissible ? /* @__PURE__ */ jsx(Close, { onClick: () => setOpen(false) }) : null]
+	});
+}
+BannerFacade.displayName = "SBanner";
+const Banner = Object.assign(BannerFacade, {
 	Root,
 	Icon,
 	Body,
@@ -54,5 +70,4 @@ const Banner = Object.assign(Root, {
 	Close
 });
 injectComponentStyle("banner");
-//#endregion
 export { Banner };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/bento/index.d.ts
 export interface BentoProps extends HTMLAttributes<HTMLDivElement> {
   /** Tracks across the lattice. */
   columns?: number;
@@ -22,5 +21,4 @@ export declare function BentoCell({ span, rowSpan, children, ...rest }: BentoCel
 export declare const Bento: typeof BentoRoot & {
   Root: typeof BentoRoot;
   Cell: typeof BentoCell;
-};
-//#endregion
+};

package/dist/components/bento/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/bento/index.tsx
+// src/components/bento/index.tsx
 /** The bento lattice: a grid of unequal tiles that reads as one plate.
 * The container owns the track count; each cell claims its own span. */
 function BentoRoot({ columns = 3, children, ...rest }) {
@@ -37,5 +37,4 @@ const Bento = Object.assign(BentoRoot, {
 	Root: BentoRoot,
 	Cell: BentoCell
 });
-//#endregion
 export { Bento, BentoCell, BentoRoot };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/block-ui/index.d.ts
 export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
   /** Whether the curtain is drawn. */
   blocked?: boolean;
@@ -12,4 +11,4 @@ declare function BlockUIImpl({ blocked, children, ...rest }: BlockUIProps): impo
 export declare const BlockUI: typeof BlockUIImpl & {
   Root: typeof BlockUIImpl;
 };
-//#endregion
+export {};

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

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { Spinner } from "../spinner/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/block-ui/index.tsx
+// src/components/block-ui/index.tsx
 /** 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. */
@@ -22,5 +22,4 @@ function BlockUIImpl({ blocked = false, children, ...rest }) {
 	});
 }
 const BlockUI = withSelfRoot(BlockUIImpl);
-//#endregion
 export { BlockUI };

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

@@ -1,7 +1,20 @@
 import { AnchorHTMLAttributes, HTMLAttributes } from "react";
-//#region src/components/breadcrumb/index.d.ts
 declare function Root({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export declare const Breadcrumb: typeof Root & {
+export type BreadcrumbItem = string | {
+  label: string;
+  href?: string;
+};
+export interface BreadcrumbFacadeProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The trail, ordered from its origin to the current page. */
+  items: BreadcrumbItem[];
+  /** Replaces the shared accessible name for the trail. */
+  label?: string;
+}
+declare function BreadcrumbFacade({ items, label, className, ...rest }: BreadcrumbFacadeProps): import("react").JSX.Element;
+declare namespace BreadcrumbFacade {
+  var displayName: string;
+}
+export declare const Breadcrumb: typeof BreadcrumbFacade & {
   Root: typeof Root;
   List: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
@@ -24,4 +37,4 @@ export declare const Breadcrumb: typeof Root & {
     displayName: string;
   };
 };
-//#endregion
+export {};

package/dist/components/breadcrumb/index.mjs

@@ -1,7 +1,8 @@
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/breadcrumb/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+// src/components/breadcrumb/index.tsx
 /** A trail of waymarks: Root wraps the nav, List the ordered trail, and
 * each Item carries a Link — or the Current page — parted by a quiet
 * Separator. Links take href and the rest through attributes. */
@@ -32,7 +33,24 @@ const Item = part("Item", "li");
 const Link = part("Link", "a");
 const Current = part("Current", "span", { "aria-current": "page" });
 const Separator = part("Separator", "span", { "aria-hidden": "true" }, "/");
-const Breadcrumb = Object.assign(Root, {
+function BreadcrumbFacade({ items, label, className, ...rest }) {
+	const last = items.length - 1;
+	return /* @__PURE__ */ jsx(Root, {
+		className,
+		...rest,
+		"aria-label": rest["aria-label"] ?? label,
+		children: /* @__PURE__ */ jsx(List, { children: items.map((item, index) => {
+			const text = typeof item === "string" ? item : item.label;
+			const href = typeof item === "string" ? void 0 : item.href;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item, { children: index === last ? /* @__PURE__ */ jsx(Current, { children: text }) : /* @__PURE__ */ jsx(Link, {
+				href,
+				children: text
+			}) }), index < last ? /* @__PURE__ */ jsx(Separator, {}) : null] }, `${text}-${index}`);
+		}) })
+	});
+}
+BreadcrumbFacade.displayName = "SBreadcrumb";
+const Breadcrumb = Object.assign(BreadcrumbFacade, {
 	Root,
 	List,
 	Item,
@@ -41,5 +59,4 @@ const Breadcrumb = Object.assign(Root, {
 	Separator
 });
 injectComponentStyle("breadcrumb");
-//#endregion
 export { Breadcrumb };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/browser/index.d.ts
 export interface BrowserPartProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
 }
@@ -19,5 +18,4 @@ export declare const Browser: typeof BrowserRoot & {
   Dots: typeof BrowserDots;
   UrlBar: typeof BrowserUrlBar;
   Body: typeof BrowserBody;
-};
-//#endregion
+};

package/dist/components/browser/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/browser/index.tsx
+// src/components/browser/index.tsx
 /** The three lamps are the system's own fixed pigments — the same
 * semantics reserved for danger, warning, and success. */
 function BrowserDots(props) {
@@ -66,5 +66,4 @@ const Browser = Object.assign(BrowserRoot, {
 	UrlBar: BrowserUrlBar,
 	Body: BrowserBody
 });
-//#endregion
 export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };

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

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
-//#region src/components/button/index.d.ts
 /** The control recipe as a standalone button: the variant chooses how it
  * rests, the tone chooses the pigment. Ink is the solemn default; any
  * action can carry the primary weight. */
@@ -19,4 +18,4 @@ declare function ButtonImpl({ variant, tone, size, square, asChild, disabled, ty
 export declare const Button: typeof ButtonImpl & {
   Root: typeof ButtonImpl;
 };
-//#endregion
+export {};

package/dist/components/button/index.mjs

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

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/button-group/index.d.ts
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
   /** The seam runs across the group (default) or down it. */
   orientation?: "horizontal" | "vertical";
@@ -21,4 +20,4 @@ declare function Root({ orientation, size, radius, children, ...rest }: ButtonGr
 export declare const ButtonGroup: typeof Root & {
   Root: typeof Root;
 };
-//#endregion
+export {};

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

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/button-group/index.tsx
+// src/components/button-group/index.tsx
 /**
 * Buttons fused into one control: the group owns only the joinery, so
 * members keep every variant they were given — a solid action can sit
@@ -21,5 +21,4 @@ function Root({ orientation = "horizontal", size, radius, children, ...rest }) {
 }
 const ButtonGroup = Object.assign(Root, { Root });
 injectComponentStyle("button-group");
-//#endregion
 export { ButtonGroup };

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

@@ -1,7 +1,6 @@
 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
 export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Selected date(s) — an array, as the machine speaks in ranges. */
   value?: DatePickerRootProps["value"];
@@ -27,4 +26,4 @@ export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "def
  * on a month overview; choosing a month drills into its day grid. */
 declare function CalendarImpl({ value, defaultValue, min, max, variant, mode, selectionMode, startOfWeek, fixedWeeks, showWeekNumbers, outsideDaySelectable, closeOnSelect, minView, maxView, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
 export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
-//#endregion
+export {};

package/dist/components/calendar/index.mjs

@@ -1,10 +1,10 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react/date-picker";
-//#region src/components/calendar/index.tsx
+// src/components/calendar/index.tsx
 function chevron(dir) {
 	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
 		width: 16,
@@ -127,5 +127,4 @@ function CalendarImpl({ value, defaultValue, min, max, variant = "compact", mode
 	});
 }
 const Calendar = Object.assign(CalendarImpl, DatePicker$1);
-//#endregion
 export { Calendar };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/card/index.d.ts
 export declare const Card: {
   ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
     asChild?: boolean;
@@ -42,5 +41,4 @@ export declare const Card: {
     }): import("react").JSX.Element | null;
     displayName: string;
   };
-};
-//#endregion
+};

package/dist/components/card/index.mjs

@@ -1,7 +1,7 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from "react";
-//#region src/components/card/index.tsx
+// src/components/card/index.tsx
 /** A vessel: round, resting at the first elevation, one hairline for its
 * edge. Root, Header, Title, Description, Content, Footer — sections
 * carry their own whitespace, so any subset composes. */
@@ -40,5 +40,4 @@ const Card = Object.assign(Root, {
 	Footer
 });
 injectComponentStyle("card");
-//#endregion
 export { Card };

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

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps } from "react";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
-//#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
  * hairline-clipped lane, the triggers are quiet outline controls, and the
  * current indicator alone carries the ink. The API is Ark's own — Root,
@@ -26,4 +25,4 @@ declare function CarouselFacade(props: CarouselFacadeProps): import("react").JSX
 export declare const Carousel: typeof CarouselFacade & Omit<typeof Carousel$1, "Root"> & {
   Root: typeof CarouselRoot;
 };
-//#endregion
+export {};