@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/tooltip/tooltip.mjs

@@ -0,0 +1,197 @@
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { frameCollisionPadding, useFrameInsets } from "../../lib/frame-insets.mjs";
+import { Children, Fragment, isValidElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip.tsx
+const tooltip = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 pointer-events-none outline-none"],
+		content: [
+			"pointer-events-none relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-2.5 py-1",
+			"origin-(--transform-origin) outline-none",
+			"transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
+			"data-ending-style:scale-[0.99] data-ending-style:opacity-0",
+			"data-instant:transition-none",
+			"motion-reduce:transition-none",
+			"rounded-chip bg-layer-hud text-foreground-on-hud",
+			"font-sans font-medium",
+			"shadow-float",
+			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
+		],
+		body: [
+			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
+			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 [&_[data-slot=kbd]]:ml-1.5",
+			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
+			"**:data-[slot=kbd]:text-[12px] **:data-[slot=kbd]:leading-4 [&_[data-slot=kbd]]:font-normal"
+		],
+		bodyIcon: ["shrink-0 [&>svg]:block [&>svg]:size-3.5 [&>svg]:shrink-0"],
+		bodyText: ["min-w-0 flex-1"],
+		arrow: [
+			"pointer-events-none flex overflow-visible",
+			"data-[side=top]:bottom-[-5px]",
+			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
+		]
+	},
+	variants: { hasLeadingIcon: {
+		true: { body: ["flex items-center gap-x-1.5"] },
+		false: {}
+	} }
+});
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		...props
+	});
+}
+function Tooltip$1(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+	const { trigger } = tooltip();
+	const childSlot = isValidElement(props.render) ? props.render.props["data-slot"] : void 0;
+	const slot = props["data-slot"] ?? childSlot ?? "tooltip-trigger";
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": slot,
+		className: trigger({ className }),
+		...props
+	});
+}
+function TooltipPortal(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		"data-slot": "tooltip-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function TooltipArrow({ className, ...props }) {
+	const { arrow } = tooltip();
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		"data-slot": "tooltip-arrow",
+		className: arrow({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+	});
+}
+function TooltipArrowSvg(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "6",
+		viewBox: "0 0 12 6",
+		fill: "none",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 0H11L6 5.25Z",
+			className: "fill-layer-hud"
+		})
+	});
+}
+function flattenTooltipChildren(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (isValidElement(child) && child.type === Fragment) return flattenTooltipChildren(child.props.children);
+		return [child];
+	});
+}
+function isTooltipLeadingIcon(child) {
+	if (!isValidElement(child)) return false;
+	if (child.props["data-slot"] === "kbd") return false;
+	if (child.type === "svg") return true;
+	return typeof child.type !== "string";
+}
+function partitionTooltipBodyChildren(children) {
+	const items = flattenTooltipChildren(children);
+	const icons = [];
+	const rest = [];
+	let seenNonIcon = false;
+	for (const item of items) {
+		if (!seenNonIcon && isTooltipLeadingIcon(item)) {
+			icons.push(item);
+			continue;
+		}
+		seenNonIcon = true;
+		rest.push(item);
+	}
+	return {
+		icons,
+		rest
+	};
+}
+function TooltipBodyContent({ children }) {
+	const { icons, rest } = partitionTooltipBodyChildren(children);
+	const { body, bodyIcon, bodyText } = tooltip({ hasLeadingIcon: icons.length > 0 });
+	if (icons.length === 0) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tooltip-body",
+		className: body(),
+		children
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "tooltip-body",
+		className: body(),
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "tooltip-body-icon",
+			className: bodyIcon(),
+			children: icons
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "tooltip-body-text",
+			className: bodyText(),
+			children: rest
+		})]
+	});
+}
+const CONTENT_COLLISION_AVOIDANCE = {
+	side: "flip",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+/**
+* Inside the portal, so it mounts each time the tooltip opens and reads the
+* frame insets then (lib/frame-insets.ts): a tooltip that would open into
+* one flips away from it, and one that would overlap it along its trigger
+* shifts out of it. Its padding grows to the inset itself, not past it.
+*/
+function TooltipFramePositioner({ collisionPadding, container, ...props }) {
+	const insets = useFrameInsets(container);
+	const padding = useMemo(() => frameCollisionPadding(collisionPadding ?? 5, insets, 0), [collisionPadding, insets]);
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = CONTENT_COLLISION_AVOIDANCE, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "top", sideOffset, sticky, container, portalProps, className, children, ...props }) {
+	const { positioner, content } = tooltip();
+	const portalContainer = container !== void 0 ? container : portalProps?.container;
+	return /* @__PURE__ */ jsx(TooltipPortal, {
+		...portalProps,
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(TooltipFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalContainer,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset: sideOffset ?? 8,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				"data-slot": "tooltip-content",
+				className: content({ className }),
+				...props,
+				children: [/* @__PURE__ */ jsx(TooltipBodyContent, { children }), /* @__PURE__ */ jsx(TooltipArrow, {})]
+			})
+		})
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

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

@@ -0,0 +1,37 @@
+import { createContext, useContext } from "react";
+//#region src/components/virtual-list/ItemColumns.tsx
+const ColumnsContext = createContext(null);
+/**
+* Renders the item's columns in the current column range: `renderItemWithCols` once, else
+* `renderCol` for each column.
+*/
+function ItemColumns(props) {
+	const { index, item } = props;
+	const context = useContext(ColumnsContext);
+	if (!context) return null;
+	const { startIndex, endIndex, columns, renderCol, renderItemWithCols, getLeft } = context;
+	if (renderItemWithCols != null) return renderItemWithCols({
+		itemIndex: index,
+		startColIndex: startIndex,
+		endColIndex: endIndex,
+		allColumns: columns,
+		item,
+		getLeft
+	});
+	if (renderCol != null) {
+		const cols = [];
+		for (let i = startIndex; i <= endIndex; ++i) {
+			const column = columns[i];
+			cols.push(renderCol({
+				column,
+				left: getLeft(i),
+				item,
+				key: i
+			}));
+		}
+		return cols;
+	}
+	return null;
+}
+//#endregion
+export { ColumnsContext, ItemColumns };

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

@@ -0,0 +1,4 @@
+import { VirtualListProps } from "./public-types.mjs";
+//#region src/components/virtual-list/VirtualList.d.ts
+export declare function VirtualList<T>(props: VirtualListProps<T>): import("react").JSX.Element;
+//#endregion