@bysages/react 0.2.3 → 0.3.0

package/dist/components/timeline/index.mjs

@@ -15,7 +15,17 @@ function part(name, tag) {
 	Component.displayName = "Timeline" + name;
 	return Component;
 }
-const Root = part("Root", "ol");
+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");

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/transfer/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";
 import { useState } from "react";

package/dist/components/tree-select/index.mjs

@@ -1,4 +1,4 @@
-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";
 import { useMemo, useState } from "react";

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

@@ -0,0 +1,20 @@
+import { AvatarSize } from "../avatar/index.mjs";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/user/index.d.ts
+export interface UserProps extends HTMLAttributes<HTMLDivElement> {
+  /** The person's name — the loud line. */
+  name: string;
+  /** The quiet echo beneath the name: a role, a title, an address. */
+  description?: string;
+  /** Seal diameter: one rung of the Avatar's own ladder. */
+  size?: AvatarSize;
+  src?: string;
+  shape?: "circle" | "square";
+  children?: ReactNode;
+}
+/** A person on one line: the seal before the words, the name and its
+ * quiet echo beneath. The mark is the Avatar itself — one component
+ * renders it here, so every size and shape the Avatar knows the user
+ * inherits; this row only lays the words out beside it. */
+export declare function User({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+//#endregion

package/dist/components/user/index.mjs

@@ -0,0 +1,42 @@
+import { Avatar } from "../avatar/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/user/index.tsx
+function initialsOf(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+/** A person on one line: the seal before the words, the name and its
+* quiet echo beneath. The mark is the Avatar itself — one component
+* renders it here, so every size and shape the Avatar knows the user
+* inherits; this row only lays the words out beside it. */
+function User({ name, description, size, src, shape = "circle", children, ...rest }) {
+	injectComponentStyle("user");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "user",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+			size,
+			shape,
+			children: [src ? /* @__PURE__ */ jsx(Avatar.Image, { src }) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: initialsOf(name) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-scope": "user",
+			"data-part": "meta",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "name",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "description",
+					children: description
+				}) : null,
+				children
+			]
+		})]
+	});
+}
+//#endregion
+export { User };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/virtual-list/index.d.ts
+export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** The height every row occupies — fixed rows keep it simple. */
+  itemHeight?: number;
+  /** The viewport height the ledger scrolls within. */
+  height?: number | string;
+  /** Renders one record into its positioned row. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+}
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+ * scroll length by a spacer sized from the row height, the rows
+ * themselves are positioned against it — a ten-thousand-row list
+ * costs the DOM a window, not the ledger. */
+export declare function VirtualList({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,52 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/virtual-list/index.tsx
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+* scroll length by a spacer sized from the row height, the rows
+* themselves are positioned against it — a ten-thousand-row list
+* costs the DOM a window, not the ledger. */
+function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
+	injectComponentStyle("virtual-list");
+	const viewport = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => viewport.current,
+		estimateSize: () => itemHeight,
+		overscan: 6
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: viewport,
+		"data-scope": "virtual-list",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			blockSize: typeof height === "number" ? `${height}px` : height
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-scope": "virtual-list",
+			"data-part": "inner",
+			style: {
+				blockSize: virtualizer.getTotalSize(),
+				position: "relative"
+			},
+			children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "virtual-list",
+				"data-part": "row",
+				style: {
+					position: "absolute",
+					top: 0,
+					insetInlineStart: 0,
+					inlineSize: "100%",
+					transform: `translateY(${row.start}px)`,
+					blockSize: row.size
+				},
+				children: renderItem?.(items[row.index], row.index)
+			}, String(row.key)))
+		})
+	});
+}
+//#endregion
+export { VirtualList };