@bysages/react 0.2.2 → 0.3.0

package/dist/components/ai-prompt-input/index.mjs

@@ -0,0 +1,135 @@
+import { Button } from "../button/index.mjs";
+import { Field } from "../field/index.mjs";
+import { n as MentionsVessel, r as useMentions } from "../../mentions-DMIBCBOd.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+//#region src/components/ai-prompt-input/index.tsx
+const arrowUpGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 14,
+	height: 14,
+	"aria-hidden": "true",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "square",
+	children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
+});
+const stopGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 14,
+	height: 14,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("rect", {
+		x: 4.5,
+		y: 4.5,
+		width: 7,
+		height: 7,
+		fill: "currentColor"
+	})
+});
+/** An empty slot leaves no part in the anatomy — the bare vessel keeps
+* its single-line posture. */
+function row(part, content) {
+	if (content == null || Array.isArray(content) && content.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "ai",
+		"data-part": part,
+		children: content
+	});
+}
+function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
+	injectComponentStyle("ai");
+	const fieldRef = useRef(null);
+	const mentionState = useMentions(() => ({
+		items: mentions?.items ?? [],
+		trigger: mentions?.trigger
+	}), () => fieldRef.current, {
+		getText: () => fieldRef.current?.value ?? value,
+		setText: (next) => onValueChange?.(next)
+	});
+	const mentionsActive = mentions != null;
+	const submit = () => {
+		const text = value.trim();
+		if (!text || disabled || busy) return;
+		onSubmit?.(text);
+		onValueChange?.("");
+	};
+	const seal = busy ? /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "button",
+		"aria-label": "Stop",
+		disabled,
+		onClick: () => onStop?.(),
+		children: stopGlyph
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "submit",
+		"aria-label": "Send",
+		disabled: disabled || !value.trim(),
+		children: arrowUpGlyph
+	});
+	const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
+	return /* @__PURE__ */ jsxs("form", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "prompt",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		children: [
+			row("prompt-header", header),
+			/* @__PURE__ */ jsxs("div", {
+				"data-scope": "ai",
+				"data-part": "prompt-main",
+				children: [
+					row("prompt-leading", leading),
+					/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
+						ref: fieldRef,
+						autoresize: true,
+						rows: 1,
+						value,
+						placeholder,
+						disabled,
+						onChange: (event) => {
+							onValueChange?.(event.target.value);
+							mentionState.onInput();
+						},
+						onKeyDown: (event) => {
+							if (mentionState.onKeydown(event)) return;
+							if (event.key === "Enter" && !event.shiftKey) {
+								event.preventDefault();
+								submit();
+							}
+						}
+					}) }),
+					mentionsActive ? /* @__PURE__ */ jsx(MentionsVessel, {
+						open: mentionState.open,
+						matches: mentionState.matches,
+						active: mentionState.active,
+						anchor: fieldRef.current,
+						onInsert: mentionState.insert,
+						onActiveChange: mentionState.setActive,
+						onOpenChange: (open) => {
+							if (!open) mentionState.close();
+						}
+					}) : null,
+					row("prompt-trailing", hasFooter ? trailing : trailing ?? seal)
+				]
+			}),
+			hasFooter ? /* @__PURE__ */ jsxs("div", {
+				"data-scope": "ai",
+				"data-part": "prompt-footer",
+				children: [footer, row("prompt-end", footerEnd == null ? seal : /* @__PURE__ */ jsxs(Fragment, { children: [footerEnd, seal] }))]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { PromptInput as AiPromptInput, PromptInput };

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/ai-reasoning/index.d.ts
+/** The model's thought, folded by the shared collapsible in its quiet
+ * register: bare ink for a trigger, the thought on one hairline. */
+export interface ReasoningProps extends HTMLAttributes<HTMLDivElement> {
+  /** The trigger's words — the fold arrives open under them. */
+  label?: string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+}
+export declare function Reasoning({ label, children, ...rest }: ReasoningProps): import("react").JSX.Element;
+//#endregion
+export { Reasoning as AiReasoning };

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,23 @@
+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;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * 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 & {
+  Root: typeof AvatarRoot;
+};
+//#endregion

package/dist/components/avatar/index.mjs

@@ -0,0 +1,15 @@
+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 }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		...rest,
+		"data-size": size,
+		"data-shape": shape
+	});
+}
+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 };