@bysages/react 0.2.2 → 0.2.3

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/image/index.d.ts
+/** A framed picture: while the source loads, the frame keeps the
+ * skeleton's breath; the picture dissolves in when it lands; a broken
+ * source leaves the `fallback` — or the placeholder glyph when the
+ * caller has nothing local to say. The frame's size is the consumer's
+ * to give. */
+export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError" | "onLoad"> {
+  src: string;
+  alt?: string;
+  fit?: "cover" | "contain" | "fill" | "none";
+  loading?: "lazy" | "eager";
+  /** Shown in place of the picture when the source breaks. */
+  fallback?: ReactNode;
+}
+export declare function Image({ src, alt, fit, loading, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+//#endregion

package/dist/components/image/index.mjs

@@ -0,0 +1,57 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/image/index.tsx
+/** The mark for a source that never arrived: a quiet mountain-and-sun,
+* drawn in the stylesheet's stroke and hidden from the reader. */
+function placeholderGlyph() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: 3,
+				y: 4,
+				width: 18,
+				height: 16,
+				rx: 1.5
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 10,
+				r: 1.5
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
+		]
+	});
+}
+function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
+	injectComponentStyle("image");
+	const [state, setState] = useState("loading");
+	useEffect(() => setState("loading"), [src]);
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		"data-scope": "image",
+		"data-part": "root",
+		"data-state": state,
+		"data-fit": fit,
+		children: [/* @__PURE__ */ jsx("img", {
+			"data-scope": "image",
+			"data-part": "img",
+			src,
+			alt,
+			loading,
+			decoding: "async",
+			onLoad: () => setState("loaded"),
+			onError: () => setState("error")
+		}), state === "error" ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "image",
+			"data-part": "fallback",
+			children: fallback ?? placeholderGlyph()
+		}) : null]
+	});
+}
+//#endregion
+export { Image };

package/dist/components/image-cropper/index.d.mts

@@ -0,0 +1,8 @@
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
+//#region src/components/image-cropper/index.d.ts
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+ * holding the photograph, one lit selection window framed by light hairlines.
+ * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+ * Context. */
+export declare const ImageCropper: typeof ImageCropper$1;
+//#endregion

package/dist/components/image-cropper/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
+//#region src/components/image-cropper/index.tsx
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+* holding the photograph, one lit selection window framed by light hairlines.
+* The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+* Context. */
+const ImageCropper = ImageCropper$1;
+injectComponentStyle("image-cropper");
+//#endregion
+export { ImageCropper };

package/dist/components/image-viewer/index.d.mts

@@ -0,0 +1,18 @@
+//#region src/components/image-viewer/index.d.ts
+/**
+ * A lightbox: the picture over a dimmed page, with a small toolbar
+ * beneath it. Zoom is the reader's hand (half to three times, clamped),
+ * a quarter turn at a time rotates, Escape and the scrim close — the
+ * dialog machine carries the modal part. `open` may stay with the
+ * caller; left undefined the viewer keeps it to itself.
+ */
+export interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  open?: boolean;
+  zoomable?: boolean;
+  /** Reports the viewer's next state. */
+  onOpenChange?: (open: boolean) => void;
+}
+export declare function ImageViewer({ src, alt, open, zoomable, onOpenChange }: ImageViewerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/image-viewer/index.mjs

@@ -0,0 +1,110 @@
+import { Button } from "../button/index.mjs";
+import { ButtonGroup } from "../button-group/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/image-viewer/index.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's line-drawn glyphs, fresh per render. */
+const TOOL_GLYPHS = {
+	zoomIn: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
+		/* @__PURE__ */ jsx("path", { d: "M11 8v6" })
+	] }),
+	zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+	] }),
+	rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
+	close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
+};
+function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
+	injectComponentStyle("image-viewer");
+	const [localOpen, setLocalOpen] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const isOpen = open ?? localOpen;
+	const setOpen = (value) => {
+		if (open === void 0) setLocalOpen(value);
+		onOpenChange?.(value);
+	};
+	useEffect(() => {
+		if (isOpen) {
+			setScale(1);
+			setRotation(0);
+		}
+	}, [isOpen]);
+	function zoom(step) {
+		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
+	}
+	function rotate() {
+		setRotation((current) => (current + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: glyph()
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: "bs-image-viewer-positioner",
+			children: /* @__PURE__ */ jsxs(Dialog.Content, {
+				className: "bs-image-viewer-content",
+				"aria-label": alt || "Image preview",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					"data-scope": "image-viewer",
+					"data-part": "viewport",
+					src,
+					alt,
+					style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
+						toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
+						toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
+					] })
+				})]
+			})
+		})] })
+	});
+}
+//#endregion
+export { ImageViewer };

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

@@ -0,0 +1,16 @@
+import { InputHTMLAttributes } from "react";
+//#region src/components/input/index.d.ts
+/** The bare text input: the field recipe — border, surface, focus halo —
+ * on a native control. Standing alone it styles itself from the `invalid`
+ * prop; inside a `Field.Root` it consumes the field context, picking up
+ * the label id, the described-by wiring and the invalid state for free,
+ * which is also the seam the Form validation layer will drive. Disabled
+ * rides the native attribute. */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  value?: string | number;
+  size?: "sm" | "md" | "lg";
+  invalid?: boolean;
+  onValueChange?: (value: string) => void;
+}
+export declare function Input({ value, size, invalid, onValueChange, ...rest }: InputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/input/index.mjs

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+//#region src/components/input/index.tsx
+function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
+	injectComponentStyle("input");
+	const field = useFieldContext();
+	const fieldProps = field?.getInputProps() ?? {};
+	return /* @__PURE__ */ jsx("input", {
+		...fieldProps,
+		...rest,
+		...value !== void 0 ? { value } : {},
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size,
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		onChange: (event) => onValueChange?.(event.target.value)
+	});
+}
+//#endregion
+export { Input };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+//#region src/components/input-group/index.d.ts
+export type InputGroupPartProps = HTMLAttributes<HTMLDivElement>;
+export declare const InputGroup: {
+  ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+    displayName: string;
+  };
+  Addon: {
+    ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

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

@@ -0,0 +1,31 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input-group/index.tsx
+function part(name) {
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "input-group",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "InputGroup" + name;
+	return Component;
+}
+/**
+* Merged controls: attachments and the entry fused into one seal. The
+* Root draws the single hairline and carries the group's focus halo;
+* the Addon is a recessed cell for the reader's fixed words — a scheme,
+* a unit, a quiet button — placed before or after the entry. Put our
+* Input (or Textarea) inside and its own border and halo step aside in
+* favor of the group's; the stylesheet does the merging, the wrapper
+* adds no visuals of its own.
+*/
+const Root = part("Root");
+const Addon = part("Addon");
+const InputGroup = Object.assign(Root, {
+	Root,
+	Addon
+});
+injectComponentStyle("input-group");
+//#endregion
+export { InputGroup };

package/dist/components/json-tree-view/index.d.mts

@@ -0,0 +1,7 @@
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+//#region src/components/json-tree-view/index.d.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The API is
+ * Ark's own — Root, Tree, plus createJsonTreeCollection. */
+export declare const JsonTreeView: typeof JsonTreeView$1;
+//#endregion

package/dist/components/json-tree-view/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+//#region src/components/json-tree-view/index.tsx
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The API is
+* Ark's own — Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = JsonTreeView$1;
+injectComponentStyle("json-tree-view");
+//#endregion
+export { JsonTreeView };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+//#region src/components/kbd/index.d.ts
+/** A keycap in miniature, riding the type it annotates. */
+export type KbdProps = HTMLAttributes<HTMLElement>;
+export declare function Kbd({ children, ...rest }: KbdProps): import("react").JSX.Element;
+//#endregion

package/dist/components/kbd/index.mjs

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

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

@@ -0,0 +1,63 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/layout/index.d.ts
+/** Declare which edge the skeleton reserves for its sider — without
+ * it the root is a single column. */
+export interface LayoutRootProps extends HTMLAttributes<HTMLDivElement> {
+  sider?: "start" | "end";
+  children?: ReactNode;
+}
+/** Which edge the enclosing root reserves for its rail — shared so the
+ * sider's resize handle knows which way the hand pulls. */
+export interface LayoutContextValue {
+  siderPlacement: () => "start" | "end" | undefined;
+}
+/**
+ * The application skeleton: Root, Header, Sider, Content, Footer —
+ * the admin arrangement dressed in the paper-and-ink surfaces. The
+ * root is a full-height grid; a declared `sider` turns the columns
+ * around to meet whichever edge the rail stands on.
+ */
+declare function Root({ sider, children, ...rest }: LayoutRootProps): import("react").JSX.Element;
+export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The caller drives the fold; the sider mirrors it and echoes every
+   * change back through `onCollapsedChange`. */
+  collapsed?: boolean;
+  /** The rail's resting inline size — a layout parameter, not a visual
+   * token, so it rides an inline variable. */
+  width?: string;
+  /** The inline size when folded. */
+  collapsedWidth?: string;
+  /** Offer the hairline at the flow edge: the rail's width follows the
+   * hand (and the arrow keys), clamped by `minWidth`/`maxWidth`, and
+   * every change rides `onWidthChange`. */
+  resizable?: boolean;
+  /** The rail's narrowest inline size while resizing. */
+  minWidth?: string;
+  /** The rail's widest inline size while resizing. */
+  maxWidth?: string;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  onWidthChange?: (width: string) => void;
+  /** The rail's contents; a function receives `{ collapsed }` so a
+   * caller can swap label content while the edge moves. */
+  children?: ReactNode | ((state: {
+    collapsed: boolean;
+  }) => ReactNode);
+}
+declare function Sider({ collapsed, width: widthProp, collapsedWidth, resizable, minWidth, maxWidth, style, onCollapsedChange, onWidthChange, children, ...rest }: LayoutSiderProps): import("react").JSX.Element;
+export declare const Layout: typeof Root & {
+  Root: typeof Root;
+  Header: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Sider: typeof Sider;
+  Content: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Footer: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/layout/index.mjs

@@ -0,0 +1,133 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/components/layout/index.tsx
+const LAYOUT_CONTEXT = createContext(null);
+/**
+* The application skeleton: Root, Header, Sider, Content, Footer —
+* the admin arrangement dressed in the paper-and-ink surfaces. The
+* root is a full-height grid; a declared `sider` turns the columns
+* around to meet whichever edge the rail stands on.
+*/
+function Root({ sider, children, ...rest }) {
+	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
+		value: { siderPlacement: () => sider },
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "layout",
+			"data-part": "root",
+			"data-sider": sider,
+			children
+		})
+	});
+}
+/** A semantic block of the skeleton — header, footer, and the flow's
+* main content each land on their native element and their grid area. */
+function region(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "layout",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Layout" + name;
+	return Component;
+}
+const Header = region("Header", "header");
+const Content = region("Content", "main");
+const Footer = region("Footer", "footer");
+/** One step of the arrow-key resize, in px. */
+const RESIZE_STEP = 16;
+function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
+	const layout = useContext(LAYOUT_CONTEXT);
+	const rail = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
+	const width = widthProp !== void 0 ? widthProp : innerWidth;
+	const prevCollapsed = useRef(collapsed);
+	useEffect(() => {
+		if (prevCollapsed.current === collapsed) return;
+		prevCollapsed.current = collapsed;
+		onCollapsedChange?.(collapsed);
+	}, [collapsed, onCollapsedChange]);
+	const innerWidthRef = useRef(innerWidth);
+	innerWidthRef.current = innerWidth;
+	useEffect(() => {
+		if (widthProp === void 0 || widthProp === innerWidthRef.current) return;
+		setInnerWidth(widthProp);
+		onWidthChange?.(widthProp);
+	}, [widthProp, onWidthChange]);
+	const applyWidth = (next) => {
+		setInnerWidth(next);
+		onWidthChange?.(next);
+	};
+	const dragStart = useRef({
+		x: 0,
+		width: 0
+	});
+	const onPointerDown = (event) => {
+		setDragging(true);
+		dragStart.current = {
+			x: event.clientX,
+			width: rail.current ? rail.current.getBoundingClientRect().width : 0
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (!dragging) return;
+		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
+		applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}px`);
+	};
+	const onPointerUp = (event) => {
+		setDragging(false);
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+		const current = rail.current ? rail.current.getBoundingClientRect().width : 0;
+		applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
+	};
+	const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
+		"data-scope": "layout",
+		"data-part": "sider-resize",
+		"data-dragging": dragging ? "" : void 0,
+		role: "separator",
+		"aria-orientation": "vertical",
+		tabIndex: 0,
+		"aria-label": "Resize sidebar",
+		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onKeyDown
+	}) : null;
+	return /* @__PURE__ */ jsxs("aside", {
+		...rest,
+		ref: rail,
+		style: {
+			...style,
+			"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
+			"--bs-layout-sider-min": collapsed ? collapsedWidth : minWidth,
+			"--bs-layout-sider-max": collapsed ? collapsedWidth : maxWidth
+		},
+		"data-scope": "layout",
+		"data-part": "sider",
+		"data-collapsed": collapsed ? "" : void 0,
+		"data-dragging": dragging ? "" : void 0,
+		"data-resizable": resizable ? "" : void 0,
+		children: [typeof children === "function" ? children({ collapsed }) : children, handle]
+	});
+}
+const Layout = Object.assign(Root, {
+	Root,
+	Header,
+	Sider,
+	Content,
+	Footer
+});
+injectComponentStyle("layout");
+//#endregion
+export { Layout };

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

@@ -0,0 +1,10 @@
+import { AnchorHTMLAttributes } from "react";
+//#region src/components/link/index.d.ts
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  underline?: "always" | "hover" | "none";
+}
+/** A link is ink in the accent's voice: quiet at rest, deepening under
+ * the hand, the halo at focus. The underline follows the prose —
+ * always, on hover, or never. */
+export declare function Link({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+//#endregion

package/dist/components/link/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/link/index.tsx
+/** A link is ink in the accent's voice: quiet at rest, deepening under
+* the hand, the halo at focus. The underline follows the prose —
+* always, on hover, or never. */
+function Link({ underline = "hover", children, ...rest }) {
+	injectComponentStyle("link");
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		"data-scope": "link",
+		"data-part": "root",
+		"data-underline": underline,
+		children
+	});
+}
+//#endregion
+export { Link };

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/list/index.d.ts
+export interface ListRootProps extends HTMLAttributes<HTMLUListElement> {
+  /** One hairline between rows. */
+  bordered?: boolean;
+  /** Every row answers the pointer with a wash. */
+  hoverable?: boolean;
+}
+declare function Root({ bordered, hoverable, children, ...rest }: ListRootProps): import("react").JSX.Element;
+declare namespace Root {
+  var displayName: string;
+}
+/** The row's words: `title` and `description` ride their own slots, the
+ * children follow them for anything else. */
+export interface ListContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+}
+declare function Content({ title, description, children, ...rest }: ListContentProps): import("react").JSX.Element;
+declare namespace Content {
+  var displayName: string;
+}
+export declare const List: typeof Root & {
+  Root: typeof Root;
+  Item: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Leading: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Content: typeof Content;
+  Actions: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion