@bysages/react 0.2.3 → 0.3.0

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

@@ -1,5 +1,5 @@
 import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dynamic-input/index.tsx

package/dist/components/form/index.mjs

@@ -40,7 +40,7 @@ function FormField({ form: formProp, name, label, hint, required = false, invali
 		const errors = (!meta ? [] : meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
 		const isInvalid = invalid || errors.length > 0;
 		return /* @__PURE__ */ jsx("div", {
-			class: klass,
+			className: klass,
 			style,
 			"data-form-field": name,
 			children: /* @__PURE__ */ jsxs(Field.Root, {

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

@@ -1,9 +1,11 @@
 import { HTMLAttributes } from "react";
+import { IconifyIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `name` from the registry, or
- * bring your own; the well renders either. */
+ * size of its own. Bring a glyph through `glyph` (a direct registry
+ * import), through `name` from the whitelisted registry, or bring your
+ * own; the well renders either. */
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -11,9 +13,12 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry. Ignored when children are given — an
-   * explicit glyph always wins over the registry. */
+  /** A glyph from the registry, imported directly. Ignored when children
+   * are given — an explicit glyph always wins. */
+  glyph?: IconifyIcon;
+  /** A registry name — only the whitelisted set the wrappers draw
+   * themselves. Ignored when `glyph` or children are given. */
   name?: string;
 }
-export declare function Icon({ size, label, name, children, ...rest }: IconProps): import("react").JSX.Element;
+export declare function Icon({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
-import { getIcon } from "@bysages/icons";
+import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx
-function Icon({ size = "inherit", label, name, children, ...rest }) {
+function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
 	injectComponentStyle("icon");
-	const glyph = name && children == null ? getIcon(name) : void 0;
-	if (name && children == null && !glyph) console.error(`[icons] unknown icon name "${name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
+	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		role: label != null ? "img" : void 0,
@@ -14,11 +14,11 @@ function Icon({ size = "inherit", label, name, children, ...rest }) {
 		"data-scope": "icon",
 		"data-part": "root",
 		"data-size": size,
-		children: children ?? (glyph ? /* @__PURE__ */ jsx("svg", {
-			viewBox: `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`,
+		children: children ?? (resolved ? /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${resolved.width ?? 24} ${resolved.height ?? 24}`,
 			fill: "currentColor",
 			"aria-hidden": "true",
-			dangerouslySetInnerHTML: { __html: glyph.body }
+			dangerouslySetInnerHTML: { __html: resolved.body }
 		}) : null)
 	});
 }

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

@@ -10,7 +10,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   value?: string | number;
   size?: "sm" | "md" | "lg";
   invalid?: boolean;
+  /** Entry mask - `9` digit, `a` letter, `*` either, anything else is
+   * literal. e.g. `"999-99-9999"`, `"(999) 999-9999"`. */
+  mask?: string;
   onValueChange?: (value: string) => void;
 }
-export declare function Input({ value, size, invalid, onValueChange, ...rest }: InputProps): import("react").JSX.Element;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion

package/dist/components/input/index.mjs

@@ -1,21 +1,2 @@
-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
+import { t as Input } from "../../input-2oezH-dY.mjs";
 export { Input };

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+//#region src/components/order-list/index.d.ts
+export interface OrderOption {
+  label: string;
+  value: string;
+}
+export interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
+  /** The rows in their current order — the value is the order. */
+  value: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+  onValueChange?: (value: string[]) => void;
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows, and the group reports the new order as the value itself —
+ * the model is the order. Dragging rides the native drag events — a
+ * hairline of primary ink marks the seam the row will land on — so
+ * touch keeps the buttons as its route. */
+export declare function OrderList({ value, options, label, onValueChange, ...rest }: OrderListProps): import("react").JSX.Element;
+//#endregion

package/dist/components/order-list/index.mjs

@@ -0,0 +1,162 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//#region src/components/order-list/index.tsx
+const ARROWS = {
+	up: ["m18 15-6-6-6 6"],
+	down: ["m6 9 6 6 6-6"],
+	top: ["m18 15-6-6-6 6", "M5 4h14"],
+	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+};
+function arrowGlyph(paths) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 12,
+		height: 12,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+	});
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+* arrows, and the group reports the new order as the value itself —
+* the model is the order. Dragging rides the native drag events — a
+* hairline of primary ink marks the seam the row will land on — so
+* touch keeps the buttons as its route. */
+function OrderList({ value, options, label, onValueChange, ...rest }) {
+	injectComponentStyle("order-list");
+	const dragging = useRef(null);
+	const [dropLine, setDropLine] = useState(null);
+	const rows = value.map((entry) => options.find((option) => option.value === entry)).filter((option) => option != null);
+	function reset() {
+		dragging.current = null;
+		setDropLine(null);
+	}
+	function move(entry, offset) {
+		const next = [...value];
+		const from = next.indexOf(entry);
+		const to = Math.max(0, Math.min(next.length - 1, from + offset));
+		if (from === to) return;
+		next.splice(to, 0, ...next.splice(from, 1));
+		onValueChange?.(next);
+	}
+	function drop() {
+		const entry = dragging.current;
+		if (entry == null) return;
+		const seam = dropLine;
+		const from = value.indexOf(entry);
+		if (seam && seam.index === from) return reset();
+		const next = value.filter((candidate) => candidate !== entry);
+		let at = seam ? seam.before ? seam.index : seam.index + 1 : next.length;
+		if (from < at) at -= 1;
+		next.splice(Math.max(0, Math.min(next.length, at)), 0, entry);
+		onValueChange?.(next);
+		reset();
+	}
+	function over(event, index, entry) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+		const rect = event.currentTarget.getBoundingClientRect();
+		const before = event.clientY < rect.top + rect.height / 2;
+		setDropLine(dragging.current != null && !(entry.value === dragging.current && before) ? {
+			index,
+			before
+		} : null);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "listbox",
+		"aria-label": label ?? void 0,
+		"aria-multiselectable": false,
+		"data-scope": "order-list",
+		"data-part": "root",
+		onDragLeave: (event) => {
+			const host = event.currentTarget;
+			if (!event.relatedTarget || !host.contains(event.relatedTarget)) setDropLine(null);
+		},
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-scope": "order-list",
+			"data-part": "list",
+			children: rows.map((option, index) => {
+				const seam = dropLine && dropLine.index === index ? dropLine.before ? "top" : "bottom" : void 0;
+				return /* @__PURE__ */ jsxs("li", {
+					role: "option",
+					"aria-selected": true,
+					draggable: true,
+					"data-scope": "order-list",
+					"data-part": "item",
+					"data-dragging": dragging.current === option.value ? "" : void 0,
+					"data-drop-line": seam,
+					onDragStart: (event) => {
+						dragging.current = option.value;
+						event.dataTransfer?.setData("text/plain", option.value);
+						if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+					},
+					onDragEnd: reset,
+					onDragOver: (event) => over(event, index, option),
+					onDrop: (event) => {
+						event.preventDefault();
+						drop();
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "grip",
+							"aria-hidden": "true",
+							children: "⋮⋮"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "label",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "controls",
+							children: [
+								[
+									"Move to top",
+									ARROWS.top,
+									-index,
+									0
+								],
+								[
+									"Move up",
+									ARROWS.up,
+									-1,
+									0
+								],
+								[
+									"Move down",
+									ARROWS.down,
+									1,
+									rows.length - 1
+								],
+								[
+									"Move to bottom",
+									ARROWS.bottom,
+									rows.length - 1 - index,
+									rows.length - 1
+								]
+							].map(([aria, paths, offset, edge]) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": aria,
+								"data-scope": "order-list",
+								"data-part": "move",
+								disabled: index === edge,
+								onClick: () => move(option.value, offset),
+								children: arrowGlyph([...paths])
+							}, aria))
+						})
+					]
+				}, option.value);
+			})
+		})
+	});
+}
+//#endregion
+export { OrderList };

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/result/index.d.ts
+type Status = "success" | "warning" | "danger" | "info";
+export interface ResultRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** The verdict the operation returned; the fixed pigments speak it. */
+  status?: Status;
+  children?: ReactNode;
+}
+export declare function ResultRoot({ status, children, ...rest }: ResultRootProps): import("react").JSX.Element;
+/** The mark carries all four verdicts and lets the root choose, so the
+ * icon can never drift from the status the root declares. */
+export declare function ResultIcon({ children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** A verdict drawn after the deed: the mark washes in the fixed
+ * pigment, the title rides the serif, and the extra carries the way
+ * onward. Any subset composes. */
+export declare const Result: {
+  Root: typeof ResultRoot;
+  Icon: typeof ResultIcon;
+  Title: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+  Description: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+  Extra: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+  }) => import("react").JSX.Element;
+};
+//#endregion

package/dist/components/result/index.mjs

@@ -0,0 +1,59 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/result/index.tsx
+const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";
+function ResultRoot({ status = "info", children, ...rest }) {
+	injectComponentStyle("result");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "result",
+		"data-part": "root",
+		"data-status": status,
+		children
+	});
+}
+/** The mark carries all four verdicts and lets the root choose, so the
+* icon can never drift from the status the root declares. */
+function ResultIcon({ children, ...rest }) {
+	injectComponentStyle("result");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "result",
+		"data-part": "icon",
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			width: 24,
+			height: 24,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			dangerouslySetInnerHTML: { __html: MARK }
+		})
+	});
+}
+function part(name, tag) {
+	return function Part({ children, ...rest }) {
+		injectComponentStyle("result");
+		return /* @__PURE__ */ jsx(tag, {
+			...rest,
+			"data-scope": "result",
+			"data-part": name,
+			children
+		});
+	};
+}
+/** A verdict drawn after the deed: the mark washes in the fixed
+* pigment, the title rides the serif, and the extra carries the way
+* onward. Any subset composes. */
+const Result = {
+	Root: ResultRoot,
+	Icon: ResultIcon,
+	Title: part("title", "h3"),
+	Description: part("description", "p"),
+	Extra: part("extra", "div")
+};
+//#endregion
+export { Result, ResultIcon, ResultRoot };

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

@@ -1,17 +1,2 @@
-import { CollectionItem } from "@ark-ui/react/collection";
-import { Select as Select$1, SelectRootComponentProps } from "@ark-ui/react/select";
-//#region src/components/select/index.d.ts
-/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
- * whole control and its list dissolves open as a paper vessel, the checked
- * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
- * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
- * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-type SelectOwnProps = {
-  /** One rung of the control-height ladder for the trigger. */
-  size?: "sm" | "md" | "lg";
-};
-declare function SelectRoot<T extends CollectionItem>(props: SelectRootComponentProps<T, SelectOwnProps>): import("react").JSX.Element;
-export declare const Select: Omit<typeof Select$1, "Root"> & {
-  Root: typeof SelectRoot;
-};
-//#endregion
+import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-DFN9F5Zt.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };

package/dist/components/select/index.mjs

@@ -1,18 +1,2 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { Select as Select$1 } from "@ark-ui/react/select";
-//#region src/components/select/index.tsx
-function SelectRoot(props) {
-	const { size = "md", ...rest } = props;
-	return /* @__PURE__ */ jsx(Select$1.Root, {
-		...rest,
-		"data-size": size
-	});
-}
-const Select = {
-	...Select$1,
-	Root: SelectRoot
-};
-injectComponentStyle("select");
-//#endregion
-export { Select };
+import { n as NativeSelect, t as Select } from "../../select-D1xiT1oJ.mjs";
+export { NativeSelect, Select };

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/spotlight/index.d.ts
+export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+  children?: ReactNode;
+}
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. The wrapper only measures and writes the geometry —
+ * the lamp itself is the two layers the stylesheet paints. */
+export declare function Spotlight({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spotlight/index.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spotlight/index.tsx
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. The wrapper only measures and writes the geometry —
+* the lamp itself is the two layers the stylesheet paints. */
+function Spotlight({ radius, children, ...rest }) {
+	injectComponentStyle("spotlight");
+	const track = (event) => {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "spotlight",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-spot-radius": radius
+		},
+		onPointerMove: track,
+		onPointerEnter: (event) => {
+			track(event);
+			event.currentTarget.setAttribute("data-hovered", "");
+		},
+		onPointerLeave: (event) => event.currentTarget.removeAttribute("data-hovered"),
+		children
+	});
+}
+//#endregion
+export { Spotlight };

package/dist/components/table/index.mjs

@@ -1,5 +1,5 @@
 import { Pagination } from "../pagination/index.mjs";
-import { Select as Select$1 } from "../select/index.mjs";
+import { t as Select$1 } from "../../select-D1xiT1oJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";

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

@@ -4,8 +4,10 @@ import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 type TabsRootProps = ComponentProps<typeof Tabs$1.Root> & {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
 };
-declare function TabsRoot({ size, ...rest }: TabsRootProps): import("react").JSX.Element;
+declare function TabsRoot({ size, variant, ...rest }: TabsRootProps): import("react").JSX.Element;
 /**
  * Tabs — tabbed navigation.
  *

package/dist/components/tabs/index.mjs

@@ -2,10 +2,11 @@ import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.tsx
-function TabsRoot({ size = "md", ...rest }) {
+function TabsRoot({ size = "md", variant = "line", ...rest }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rest,
-		"data-size": size
+		"data-size": size,
+		"data-variant": variant
 	});
 }
 /**

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+//#region src/components/terminal/index.d.ts
+export interface TerminalProps extends HTMLAttributes<HTMLDivElement> {
+  /** The transcript, oldest line first. */
+  lines?: string[];
+  /** The sigil at the head of the entry line. */
+  prompt?: string;
+  placeholder?: string;
+  label?: string;
+  onCommand?: (text: string) => void;
+}
+/** A quiet console: the transcript above, the prompt line below. The
+ * component owns only the reading and the caret — each entered line
+ * leaves as an event, and the caller answers through the lines prop,
+ * so history stays theirs to shape. */
+export declare function Terminal({ lines, prompt, placeholder, label, onCommand, ...rest }: TerminalProps): import("react").JSX.Element;
+//#endregion

package/dist/components/terminal/index.mjs

@@ -0,0 +1,65 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/terminal/index.tsx
+/** A quiet console: the transcript above, the prompt line below. The
+* component owns only the reading and the caret — each entered line
+* leaves as an event, and the caller answers through the lines prop,
+* so history stays theirs to shape. */
+function Terminal({ lines = [], prompt = "$", placeholder, label, onCommand, ...rest }) {
+	injectComponentStyle("terminal");
+	const [draft, setDraft] = useState("");
+	const scroll = useRef(null);
+	useEffect(() => {
+		scroll.current?.scrollTo({ top: scroll.current.scrollHeight });
+	}, [lines.length]);
+	function submit() {
+		const text = draft.trim();
+		if (!text) return;
+		setDraft("");
+		onCommand?.(text);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		role: "log",
+		"aria-label": label ?? void 0,
+		"data-scope": "terminal",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroll,
+			"data-scope": "terminal",
+			"data-part": "scroll",
+			children: lines.map((line, index) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "terminal",
+				"data-part": "line",
+				children: line
+			}, index))
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-scope": "terminal",
+			"data-part": "entry",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "terminal",
+				"data-part": "sigil",
+				"aria-hidden": "true",
+				children: prompt
+			}), /* @__PURE__ */ jsx("input", {
+				"data-scope": "terminal",
+				"data-part": "input",
+				value: draft,
+				placeholder,
+				"aria-label": label ? `${label} command line` : "Command line",
+				spellCheck: false,
+				autoComplete: "off",
+				onInput: (event) => setDraft(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						submit();
+					}
+				}
+			})]
+		})]
+	});
+}
+//#endregion
+export { Terminal };

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

@@ -1,23 +1,25 @@
+import * as React from "react";
 import { HTMLAttributes } from "react";
 //#region src/components/timeline/index.d.ts
-export declare const Timeline: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-} & {
-  Root: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+declare function Root({ orientation, children, ...rest }: HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  orientation?: "vertical" | "horizontal";
+}): React.JSX.Element;
+declare namespace Root {
+  var displayName: string;
+}
+export declare const Timeline: typeof Root & {
+  Root: typeof Root;
   Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
   Marker: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
   Content: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
 };