@bysages/react 0.2.1 → 0.2.3

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

@@ -0,0 +1,19 @@
+import { t as chevron } from "../../chevron-BeHvt46K.mjs";
+import { Collapsible } from "../collapsible/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-reasoning/index.tsx
+function Reasoning({ label = "Thinking", children, ...rest }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		...rest,
+		"data-ai": "reasoning",
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron })] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", {
+			"data-scope": "ai",
+			"data-part": "reasoning-content",
+			children
+		}) })]
+	});
+}
+//#endregion
+export { Reasoning as AiReasoning, Reasoning };

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from "react";
+//#region src/components/ai-response/index.d.ts
+/** Markdown set on the paper. Rendering goes through
+ * `@tanstack/markdown`, whose defaults leave raw HTML and executable
+ * links inert — streaming-safe by construction. An optional
+ * highlighter re-inks fenced code; the component stays agnostic about
+ * which engine provides it. */
+export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
+  /** The markdown text to set on the paper — streamed in freely; raw
+   * HTML and executable links stay inert. */
+  content: string;
+  /** Optional code-highlighting function re-inking fenced blocks; the
+   * component stays agnostic about which engine provides it. */
+  highlighter?: (code: string, lang?: string) => string;
+  /** The copy stamp's accessible name before the copy lands. */
+  copyLabel?: string;
+  /** The copy stamp's accessible name once the text has landed. */
+  copiedLabel?: string;
+}
+export declare function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps): import("react").JSX.Element;
+//#endregion
+export { Response as AiResponse };

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

@@ -0,0 +1,2 @@
+import { t as Response } from "../../ai-response-jZy-0Tvv.mjs";
+export { Response as AiResponse, Response };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/ai-source/index.d.ts
+/** One place the ink came from; href and the rest ride the anchor. */
+export interface SourceProps extends HTMLAttributes<HTMLAnchorElement> {
+  /** Where the ink came from — also the link text when no children are
+   * given; opens in a new tab, referrer-free. */
+  href: string;
+  children?: ReactNode;
+}
+export declare function Source({ href, children, ...rest }: SourceProps): import("react").JSX.Element;
+/** The reading list under a response: where this ink came from. */
+export interface SourcesProps extends HTMLAttributes<HTMLOListElement> {
+  children?: ReactNode;
+}
+export declare function Sources({ children, ...rest }: SourcesProps): import("react").JSX.Element;
+//#endregion
+export { Source as AiSource, Sources as AiSources };

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

@@ -0,0 +1,27 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai-source/index.tsx
+function Source({ href, children, ...rest }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsx("li", {
+		"data-scope": "ai",
+		"data-part": "source",
+		children: /* @__PURE__ */ jsx("a", {
+			...rest,
+			href,
+			target: "_blank",
+			rel: "noreferrer",
+			children: children ?? href
+		})
+	});
+}
+function Sources({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("ol", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "sources",
+		children
+	});
+}
+//#endregion
+export { Source as AiSource, Source, Sources as AiSources, Sources };

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+//#region src/components/ai-suggestion/index.d.ts
+/** A seal-cut button proposing the next stroke; selection hands back
+ * the prompt. The shared Button in its outline register. */
+export interface SuggestionProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  /** The next stroke this seal proposes — also its label; handed back
+   * whole on `onSelect`. */
+  prompt: string;
+  onSelect?: (prompt: string) => void;
+}
+export declare function Suggestion({ prompt, onSelect, ...rest }: SuggestionProps): import("react").JSX.Element;
+//#endregion
+export { Suggestion as AiSuggestion };

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

@@ -0,0 +1,16 @@
+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 }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		...rest,
+		onClick: () => onSelect?.(prompt),
+		children: prompt
+	});
+}
+//#endregion
+export { Suggestion as AiSuggestion, Suggestion };

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/ai-tool/index.d.ts
+export type ToolStatus = "pending" | "running" | "completed" | "error";
+/** A tool call: the shared collapsible as the vessel — the name it was
+ * reached by and the state it reached in on the trigger, its input and
+ * output folded inside. */
+export interface ToolProps extends HTMLAttributes<HTMLDivElement> {
+  /** The name the tool was reached by — shown raw on the trigger
+   * unless a `label` speaks friendlier words ("Searching pages…"). */
+  name: string;
+  label?: ReactNode;
+  /** The state the call reached — pending, running, completed, or
+   * error; stamped on the fold and whispered in the status chip. */
+  status?: ToolStatus;
+  defaultOpen?: boolean;
+  input?: ReactNode;
+  output?: ReactNode;
+}
+export declare function Tool({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
+//#endregion
+export { Tool as AiTool };

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

@@ -0,0 +1,36 @@
+import { t as chevron } from "../../chevron-BeHvt46K.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 }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		...rest,
+		"data-ai": "tool",
+		"data-status": status,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
+			/* @__PURE__ */ jsx("span", { children: label ?? name }),
+			status ? /* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-status",
+				children: status.charAt(0).toUpperCase() + status.slice(1)
+			}) : null,
+			/* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron })
+		] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
+			"data-scope": "ai",
+			"data-part": "tool-body",
+			children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-label",
+				children: "Input"
+			}), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-label",
+				children: "Output"
+			}), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
+		}) })]
+	});
+}
+//#endregion
+export { Tool as AiTool, Tool };

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/alert/index.d.ts
+export type AlertStatus = "ink" | "info" | "success" | "warning" | "danger";
+/** 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. */
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  status?: AlertStatus;
+  children?: ReactNode;
+}
+declare function AlertRoot({ status, children, ...rest }: AlertProps): import("react").JSX.Element;
+declare function Icon(): import("react").JSX.Element;
+declare function Body({ children, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Title({ children, ...rest }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+declare function Description({ children, ...rest }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+  Root: typeof AlertRoot;
+  Icon: typeof Icon;
+  Body: typeof Body;
+  Title: typeof Title;
+  Description: typeof Description;
+};
+//#endregion

package/dist/components/alert/index.mjs

@@ -0,0 +1,80 @@
+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", {
+		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] })
+	});
+}
+function AlertRoot({ status = "ink", children, ...rest }) {
+	return /* @__PURE__ */ jsx(StatusContext.Provider, {
+		value: status,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			role: status === "ink" || status === "info" ? "status" : "alert",
+			"data-scope": "alert",
+			"data-part": "root",
+			"data-status": status,
+			children
+		})
+	});
+}
+function Icon() {
+	const status = useContext(StatusContext);
+	return /* @__PURE__ */ jsx("span", {
+		"data-scope": "alert",
+		"data-part": "icon",
+		children: glyph(status)
+	});
+}
+function Body({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "alert",
+		"data-part": "body",
+		children
+	});
+}
+function Title({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		...rest,
+		"data-scope": "alert",
+		"data-part": "title",
+		children
+	});
+}
+function Description({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		...rest,
+		"data-scope": "alert",
+		"data-part": "description",
+		children
+	});
+}
+const Alert = Object.assign(AlertRoot, {
+	Root: AlertRoot,
+	Icon,
+	Body,
+	Title,
+	Description
+});
+injectComponentStyle("alert");
+//#endregion
+export { Alert };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
+//#region src/components/angle-slider/index.d.ts
+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;
+/** 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"> & {
+  Root: typeof AngleSliderRoot;
+};
+//#endregion

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } 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 }) {
+	return /* @__PURE__ */ jsx(AngleSlider$1.Root, {
+		...rest,
+		"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 = {
+	...AngleSlider$1,
+	Root: AngleSliderRoot
+};
+injectComponentStyle("angle-slider");
+//#endregion
+export { AngleSlider };

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

@@ -0,0 +1,10 @@
+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> {
+  /** A CSS `aspect-ratio` value — "16 / 9", "4 / 3", "1 / 1". */
+  ratio?: string;
+}
+export declare function AspectRatio({ ratio, ...rest }: AspectRatioProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,17 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/aspect-ratio/index.tsx
+function AspectRatio({ ratio = "1 / 1", ...rest }) {
+	injectComponentStyle("aspect-ratio");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			...rest.style,
+			"--bs-aspect-ratio": ratio
+		},
+		"data-scope": "aspect-ratio",
+		"data-part": "root"
+	});
+}
+//#endregion
+export { AspectRatio };

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

@@ -0,0 +1,21 @@
+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
+ * same `value`. A preset of the combobox machinery — same parts, same
+ * styling, one job. `items` seeds the suggestion list once; matching is
+ * a case-insensitive substring unless `filter` says otherwise.
+ */
+export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onSelect"> {
+  value?: string;
+  items?: string[];
+  placeholder?: string;
+  /** Field text to match against; defaults to the item itself. */
+  filter?: (item: string, input: string) => boolean;
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+export declare function AutoComplete({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/autocomplete/index.mjs

@@ -0,0 +1,35 @@
+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 }) {
+	injectComponentStyle("combobox");
+	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,
+		collection,
+		inputValue: value,
+		allowCustomValue: true,
+		"data-size": size,
+		onValueChange: (details) => {
+			const [first] = details.value;
+			if (first != null) onValueChange?.(first);
+		},
+		onInputValueChange: (details) => {
+			filterItems(details.inputValue);
+			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, {
+			item,
+			children: /* @__PURE__ */ jsx(Combobox.ItemText, { children: item })
+		}, item))] }) }) })]
+	});
+}
+//#endregion
+export { AutoComplete };

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

@@ -0,0 +1,20 @@
+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
+ * re-point `--bs-avatar-size` per rung, and scenes can still retune the
+ * variable directly. */
+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
+   * rides a row without stretching it. */
+  size?: AvatarSize;
+}
+declare function AvatarRoot({ size, ...rest }: AvatarProps): import("react").JSX.Element;
+export declare const Avatar: typeof Avatar$1 & {
+  Root: typeof AvatarRoot;
+};
+//#endregion

package/dist/components/avatar/index.mjs

@@ -0,0 +1,14 @@
+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, ...rest }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
+injectComponentStyle("avatar");
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,11 @@
+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> {
+  /** One register for every seal: falls onto data-size for the
+   * stylesheet to re-point the avatars' measure. */
+  size?: "sm" | "md" | "lg";
+}
+export declare function AvatarGroup({ size, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar-group/index.tsx
+function AvatarGroup({ size, children, ...rest }) {
+	injectComponentStyle("avatar-group");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "avatar-group",
+		"data-part": "root",
+		"data-size": size,
+		children
+	});
+}
+//#endregion
+export { AvatarGroup };

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

@@ -0,0 +1,29 @@
+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. */
+  threshold?: number;
+  /** The accessible name; the control is icon-only by default. */
+  label?: string;
+  /** Ride a scrolling element of your own instead of the page: the
+   * control moors inside that element's corner and watches its
+   * scrollTop. The host supplies the positioning context. */
+  scrollEl?: () => HTMLElement | null;
+}
+/**
+ * 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
+ * the top. The scroll itself stays native — `window.scrollTo` defers to
+ * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+ * back into an instant jump (a moored control asks the media query
+ * directly, since a scroller of its own has no stylesheet to defer to).
+ * The button stays mounted either way so the entrance is a transition,
+ * never a pop.
+ *
+ * The control itself is the shared `Button` (outline, square) — the
+ * 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;
+//#endregion

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

@@ -0,0 +1,82 @@
+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" })
+	});
+}
+/**
+* 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
+* the top. The scroll itself stays native — `window.scrollTo` defers to
+* the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+* back into an instant jump (a moored control asks the media query
+* directly, since a scroller of its own has no stylesheet to defer to).
+* The button stays mounted either way so the entrance is a transition,
+* never a pop.
+*
+* The control itself is the shared `Button` (outline, square) — the
+* 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 }) {
+	injectComponentStyle("back-top");
+	const [visible, setVisible] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const el = scrollEl?.() ?? null;
+		const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
+		onScroll();
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			if (el) el.removeEventListener("scroll", onScroll);
+			else window.removeEventListener("scroll", onScroll);
+		};
+	}, [threshold, scrollEl]);
+	const toTop = () => {
+		const el = scrollEl?.();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "back-top",
+		"data-part": "root",
+		"data-state": visible ? "shown" : "hidden",
+		...scrollEl ? { "data-container": "" } : {},
+		children: /* @__PURE__ */ jsx(Button, {
+			...rest,
+			variant: "outline",
+			square: true,
+			size: "lg",
+			type: "button",
+			"aria-label": label,
+			"aria-hidden": visible ? void 0 : "true",
+			tabIndex: visible ? 0 : -1,
+			onClick: toTop,
+			children: rest.children ?? chevronUp()
+		})
+	});
+}
+//#endregion
+export { BackTop };

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

@@ -0,0 +1,10 @@
+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> {
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  variant?: "solid" | "subtle" | "outline";
+}
+export declare function Badge({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/badge/index.mjs

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/index.tsx
+function Badge({ tone = "ink", variant = "solid", ...rest }) {
+	injectComponentStyle("badge");
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"data-scope": "badge",
+		"data-part": "root",
+		"data-tone": tone,
+		"data-variant": variant
+	});
+}
+//#endregion
+export { Badge };