@bysages/react 0.2.2 → 0.3.0

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

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
+//#region src/components/tabs/index.d.ts
+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, variant, ...rest }: TabsRootProps): import("react").JSX.Element;
+/**
+ * Tabs — tabbed navigation.
+ *
+ * Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
+ * bar on the list rule).
+ */
+export declare const Tabs: Omit<typeof Tabs$1, "Root"> & {
+  Root: typeof TabsRoot;
+};
+//#endregion

package/dist/components/tabs/index.mjs

@@ -0,0 +1,24 @@
+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", variant = "line", ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		...rest,
+		"data-size": size,
+		"data-variant": variant
+	});
+}
+/**
+* Tabs — tabbed navigation.
+*
+* Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
+* bar on the list rule).
+*/
+const Tabs = {
+	...Tabs$1,
+	Root: TabsRoot
+};
+injectComponentStyle("tabs");
+//#endregion
+export { Tabs };

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

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
+//#region src/components/tags-input/index.d.ts
+type TagsInputRootProps = ComponentProps<typeof TagsInput$1.Root> & {
+  /** One rung of the control-height ladder for the vessel at rest. */
+  size?: "sm" | "md" | "lg";
+};
+declare function TagsInputRoot({ size, ...rest }: TagsInputRootProps): import("react").JSX.Element;
+/** Ark's TagsInput, dressed in the paper-and-ink system: one field vessel
+ * whose chips rest as quiet ink and lift only a tone when edited. The API
+ * is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
+ * ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
+ * Context. */
+export declare const TagsInput: Omit<typeof TagsInput$1, "Root"> & {
+  Root: typeof TagsInputRoot;
+};
+//#endregion

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

@@ -0,0 +1,22 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
+//#region src/components/tags-input/index.tsx
+function TagsInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(TagsInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's TagsInput, dressed in the paper-and-ink system: one field vessel
+* whose chips rest as quiet ink and lift only a tone when edited. The API
+* is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
+* ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
+* Context. */
+const TagsInput = {
+	...TagsInput$1,
+	Root: TagsInputRoot
+};
+injectComponentStyle("tags-input");
+//#endregion
+export { TagsInput };

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/textarea/index.d.mts

@@ -0,0 +1,14 @@
+import { TextareaHTMLAttributes } from "react";
+//#region src/components/textarea/index.d.ts
+/** The bare multi-line input: the field recipe on a `<textarea>`, sized
+ * by rows and resizable in the block direction. 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. Disabled rides the native attribute. */
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  value?: string;
+  invalid?: boolean;
+  onValueChange?: (value: string) => void;
+}
+export declare function Textarea({ value, invalid, onValueChange, ...rest }: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/textarea/index.mjs

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

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { HTMLAttributes } from "react";
+//#region src/components/timeline/index.d.ts
+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>): React.JSX.Element;
+    displayName: string;
+  };
+  Marker: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
+    displayName: string;
+  };
+  Content: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/timeline/index.mjs

@@ -0,0 +1,40 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/timeline/index.tsx
+/** A line of moments: Root is the ordered thread, Item one moment on it,
+* Marker the point where the thread passes, Content what the moment
+* holds. The hairline between markers is drawn by the stylesheet. */
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "timeline",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Timeline" + name;
+	return Component;
+}
+function Root({ orientation = "vertical", children, ...rest }) {
+	injectComponentStyle("timeline");
+	return /* @__PURE__ */ jsx("ol", {
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "root",
+		"data-orientation": orientation,
+		children
+	});
+}
+Root.displayName = "TimelineRoot";
+const Item = part("Item", "li");
+const Marker = part("Marker", "span");
+const Content = part("Content", "div");
+const Timeline = Object.assign(Root, {
+	Root,
+	Item,
+	Marker,
+	Content
+});
+injectComponentStyle("timeline");
+//#endregion
+export { Timeline };

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

@@ -0,0 +1,8 @@
+import { Timer as Timer$1 } from "@ark-ui/react/timer";
+//#region src/components/timer/index.d.ts
+/** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
+ * that never jitter, quiet action triggers on the control recipe. The API
+ * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
+ * Context. Unit labels are plain content, not a machine part. */
+export declare const Timer: typeof Timer$1;
+//#endregion

package/dist/components/timer/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Timer as Timer$1 } from "@ark-ui/react/timer";
+//#region src/components/timer/index.tsx
+/** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
+* that never jitter, quiet action triggers on the control recipe. The API
+* is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
+* Context. Unit labels are plain content, not a machine part. */
+const Timer = Timer$1;
+injectComponentStyle("timer");
+//#endregion
+export { Timer };

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

@@ -0,0 +1,11 @@
+import { CreateToasterReturn, Toast as Toast$1, createToaster } from "@ark-ui/react/toast";
+//#region src/components/toast/index.d.ts
+/** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
+ * popup vessel while a pigment accents the title by type, and the machine's
+ * translate variables carry the slide. The API is Ark's own — Toaster,
+ * Root, Title, Description, ActionTrigger, CloseTrigger, plus
+ * createToaster. */
+export declare const Toast: typeof Toast$1;
+export declare const Toaster: import("react").ForwardRefExoticComponent<import("@ark-ui/react/toast").ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { type CreateToasterReturn, createToaster };

package/dist/components/toast/index.mjs

@@ -0,0 +1,13 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/react/toast";
+//#region src/components/toast/index.tsx
+/** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
+* popup vessel while a pigment accents the title by type, and the machine's
+* translate variables carry the slide. The API is Ark's own — Toaster,
+* Root, Title, Description, ActionTrigger, CloseTrigger, plus
+* createToaster. */
+const Toast = Toast$1;
+const Toaster = Toaster$1;
+injectComponentStyle("toast");
+//#endregion
+export { Toast, Toaster, createToaster };

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

@@ -0,0 +1,7 @@
+import { Toc as Toc$1 } from "@ark-ui/react/toc";
+//#region src/components/toc/index.d.ts
+/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+ * beside the scroll, one stroke of primary ink marking where the reader
+ * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+export declare const Toc: typeof Toc$1;
+//#endregion

package/dist/components/toc/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Toc as Toc$1 } from "@ark-ui/react/toc";
+//#region src/components/toc/index.tsx
+/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+* beside the scroll, one stroke of primary ink marking where the reader
+* stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+const Toc = Toc$1;
+injectComponentStyle("toc");
+//#endregion
+export { Toc };

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

@@ -0,0 +1,7 @@
+import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
+//#region src/components/toggle/index.d.ts
+/** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
+ * settles into the flat ink fill while pressed on. The API is Ark's own —
+ * Root, Indicator. */
+export declare const Toggle: typeof Toggle$1;
+//#endregion

package/dist/components/toggle/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
+//#region src/components/toggle/index.tsx
+/** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
+* settles into the flat ink fill while pressed on. The API is Ark's own —
+* Root, Indicator. */
+const Toggle = Toggle$1;
+injectComponentStyle("toggle");
+//#endregion
+export { Toggle };

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

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
+//#region src/components/toggle-group/index.d.ts
+type ToggleGroupRootProps = ComponentProps<typeof ToggleGroup$1.Root> & {
+  /** One rung of the control-height ladder for the items. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ToggleGroupRoot({ size, ...rest }: ToggleGroupRootProps): import("react").JSX.Element;
+/** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
+ * of quiet seals where the pressed item takes the flat ink fill. The API is
+ * Ark's own — Root, Item. */
+export declare const ToggleGroup: Omit<typeof ToggleGroup$1, "Root"> & {
+  Root: typeof ToggleGroupRoot;
+};
+//#endregion

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

@@ -0,0 +1,20 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
+//#region src/components/toggle-group/index.tsx
+function ToggleGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
+* of quiet seals where the pressed item takes the flat ink fill. The API is
+* Ark's own — Root, Item. */
+const ToggleGroup = {
+	...ToggleGroup$1,
+	Root: ToggleGroupRoot
+};
+injectComponentStyle("toggle-group");
+//#endregion
+export { ToggleGroup };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/toolbar/index.d.ts
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Accessible name when more than one toolbar shares a page. */
+  label?: string;
+  /** Tools at the leading edge; `children` land here when no start is
+   * given. */
+  start?: ReactNode;
+  /** Tools at the trailing edge. */
+  end?: ReactNode;
+  children?: ReactNode;
+}
+/** A workbench rail: the start tools at the leading edge, the end tools
+ * at the trailing, the rail itself carrying the toolbar role so
+ * assistive tech reads it as one group of commands. */
+export declare function Toolbar({ label, start, end, children, ...rest }: ToolbarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/toolbar/index.mjs

@@ -0,0 +1,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toolbar/index.tsx
+/** A workbench rail: the start tools at the leading edge, the end tools
+* at the trailing, the rail itself carrying the toolbar role so
+* assistive tech reads it as one group of commands. */
+function Toolbar({ label, start, end, children, ...rest }) {
+	injectComponentStyle("toolbar");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		role: "toolbar",
+		"aria-label": label ?? void 0,
+		"data-scope": "toolbar",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "toolbar",
+			"data-part": "group",
+			"data-edge": "start",
+			children: start ?? children
+		}), end ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "toolbar",
+			"data-part": "group",
+			"data-edge": "end",
+			children: end
+		}) : null]
+	});
+}
+//#endregion
+export { Toolbar };

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

@@ -0,0 +1,7 @@
+import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
+//#region src/components/tooltip/index.d.ts
+/** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
+ * vessel — a tight chip of ink that dissolves in over its anchor. The
+ * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
+export declare const Tooltip: typeof Tooltip$1;
+//#endregion

package/dist/components/tooltip/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
+//#region src/components/tooltip/index.tsx
+/** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
+* vessel — a tight chip of ink that dissolves in over its anchor. The
+* API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
+const Tooltip = Tooltip$1;
+injectComponentStyle("tooltip");
+//#endregion
+export { Tooltip };

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

@@ -0,0 +1,11 @@
+import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, useTour } from "@ark-ui/react/tour";
+//#region src/components/tour/index.d.ts
+/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
+ * the spotlight alone keeps the focus halo, and the anchored card rides
+ * the shared popup vessel. The API is Ark's own — Root, Backdrop,
+ * Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
+ * ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
+ * useTour. */
+export declare const Tour: typeof Tour$1;
+//#endregion
+export { type TourInteractOutsideEvent, type TourPointerDownOutsideEvent, type TourStepDetails, useTour };

package/dist/components/tour/index.mjs

@@ -0,0 +1,13 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
+//#region src/components/tour/index.tsx
+/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
+* the spotlight alone keeps the focus halo, and the anchored card rides
+* the shared popup vessel. The API is Ark's own — Root, Backdrop,
+* Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
+* ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
+* useTour. */
+const Tour = Tour$1;
+injectComponentStyle("tour");
+//#endregion
+export { Tour, useTour };

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from "react";
+//#region src/components/transfer/index.d.ts
+export interface TransferItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+export interface TransferProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string[];
+  data: TransferItem[];
+  titles?: string[];
+  searchable?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string[]) => void;
+}
+/**
+ * Two ledgers and a crossing: items sit in the source column until the
+ * reader checks them and walks them across — and back, the same way.
+ * `value` is the target column's value list; everything else in `data`
+ * stays on the left. `searchable` adds a filter line to each panel.
+ */
+export declare function Transfer({ value, data, titles, searchable, disabled, onValueChange, ...rest }: TransferProps): import("react").JSX.Element;
+//#endregion