@bysages/react 0.2.3 → 0.3.1

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

@@ -0,0 +1,53 @@
+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,
+		tabIndex: 0,
+		"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 };

package/dist/glyph-VI989p8H.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/glyph.tsx
+/** Render a lucide glyph as a bare svg element — the components' own
+* default icons. No span shell: the part rules size the svg directly. */
+function glyphNode(glyph, attrs = {}) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${glyph.width} ${glyph.height}`,
+		"aria-hidden": "true",
+		...attrs,
+		dangerouslySetInnerHTML: { __html: glyph.body }
+	});
+}
+//#endregion
+export { glyphNode as t };