@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/Tree-kgLG4IbP.cjs

@@ -0,0 +1,445 @@
+const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_components_Collapsible = require("./components/Collapsible.cjs.js");
+const require_components_DisclosureChevron = require("./components/DisclosureChevron.cjs.js");
+const require_primitives_password_manager_autofill = require("./primitives/password-manager-autofill.cjs.js");
+const require_hooks_use_isomorphic_layout_effect = require("./hooks/use-isomorphic-layout-effect.cjs.js");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/ds/components/Tree/tree-context.tsx
+var TreeContext = react.createContext(null);
+function TreeProvider({ children, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTreeContext() {
+	return react.useContext(TreeContext);
+}
+var TreeFolderContext = react.createContext(null);
+function TreeFolderProvider({ children, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeFolderContext.Provider, {
+		value,
+		children
+	});
+}
+function useTreeFolderContext() {
+	return react.useContext(TreeFolderContext);
+}
+var TreeDepthContext = react.createContext(0);
+function TreeDepthProvider({ children, depth }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeDepthContext.Provider, {
+		value: depth,
+		children
+	});
+}
+function useTreeDepth() {
+	return react.useContext(TreeDepthContext);
+}
+// src/ds/components/Tree/tree-file.tsx
+var TreeFile = react.forwardRef(({ id, className, children }, ref) => {
+	const treeCtx = useTreeContext();
+	const depth = useTreeDepth();
+	const isSelected = id != null && treeCtx?.selectedId === id;
+	const handleClick = (e) => {
+		treeCtx?.focusItem?.(e.currentTarget);
+		if (id != null && treeCtx?.onSelect) treeCtx.onSelect(id);
+	};
+	const handleFocus = (e) => {
+		treeCtx?.focusItem?.(e.currentTarget, { focus: false });
+	};
+	const handleKeyDown = (e) => {
+		if ((e.key === "Enter" || e.key === " ") && id != null && treeCtx?.onSelect) {
+			e.preventDefault();
+			treeCtx.onSelect(id);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		ref,
+		role: "treeitem",
+		"aria-level": depth + 1,
+		"aria-selected": isSelected || void 0,
+		"data-tree-item-kind": "file",
+		"data-tree-item-id": id,
+		tabIndex: -1,
+		className: require_utils.cn("group flex h-7 min-w-0 cursor-pointer items-center gap-1.5 rounded-sm px-1", require_primitives_transitions.transitions.colors, "outline-hidden hover:bg-fill-subtle focus-visible:bg-fill-subtle focus-visible:text-foreground focus-visible:outline-hidden", isSelected && "bg-fill-hover text-foreground", className),
+		style: { paddingLeft: depth * 12 + 18 },
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		children
+	});
+});
+TreeFile.displayName = "Tree.File";
+// src/ds/components/Tree/tree-folder.tsx
+var TreeFolder = react.forwardRef(({ id, defaultOpen, open, onOpenChange, className, children }, ref) => {
+	const treeCtx = useTreeContext();
+	const depth = useTreeDepth();
+	const [internalOpen, setInternalOpen] = react.useState(defaultOpen ?? false);
+	const [isFocused, setIsFocused] = react.useState(false);
+	const isOpen = open ?? internalOpen;
+	const handleOpenChange = react.useCallback((nextOpen) => {
+		setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [onOpenChange]);
+	const handleFocus = react.useCallback((e) => {
+		if (e.target !== e.currentTarget) {
+			setIsFocused(false);
+			return;
+		}
+		setIsFocused(true);
+		treeCtx?.focusItem?.(e.currentTarget, { focus: false });
+	}, [treeCtx]);
+	const handleBlur = react.useCallback(() => {
+		setIsFocused(false);
+	}, []);
+	const folderContextValue = react.useMemo(() => ({
+		isFocused,
+		isOpen
+	}), [isFocused, isOpen]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		ref,
+		role: "treeitem",
+		"aria-expanded": isOpen,
+		"aria-level": depth + 1,
+		"data-tree-item-kind": "folder",
+		"data-tree-item-id": id,
+		tabIndex: -1,
+		className: require_utils.cn("flex flex-col outline-hidden", className),
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeFolderProvider, {
+			value: folderContextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Collapsible.Collapsible, {
+				open: isOpen,
+				onOpenChange: handleOpenChange,
+				children
+			})
+		})
+	});
+});
+TreeFolder.displayName = "Tree.Folder";
+// src/ds/components/Tree/tree-folder-content.tsx
+var TreeFolderContent = react.forwardRef(({ className, children }, ref) => {
+	const depth = useTreeDepth();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Collapsible.CollapsibleContent, {
+		ref,
+		fill: true,
+		className: require_utils.cn(className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeDepthProvider, {
+			depth: depth + 1,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				role: "group",
+				className: "flex flex-col",
+				children
+			})
+		})
+	});
+});
+TreeFolderContent.displayName = "Tree.FolderContent";
+// src/ds/components/Tree/tree-folder-trigger.tsx
+var TreeFolderTrigger = react.forwardRef(({ className, children, actions }, ref) => {
+	const treeCtx = useTreeContext();
+	const folderCtx = useTreeFolderContext();
+	const depth = useTreeDepth();
+	const focusFolderItem = react.useCallback((target, options) => {
+		const item = target.closest("[data-tree-item-kind=\"folder\"]");
+		if (item) treeCtx?.focusItem?.(item, options);
+	}, [treeCtx]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		"data-tree-folder-row": "true",
+		className: require_utils.cn("group flex h-7 w-full min-w-0 items-center rounded-sm hover:bg-fill-subtle", require_primitives_transitions.transitions.colors, folderCtx?.isFocused && "bg-fill-hover text-foreground", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.CollapsibleTrigger, {
+			"data-tree-folder-trigger": "true",
+			tabIndex: -1,
+			className: "flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-sm px-1 outline-hidden focus-visible:outline-hidden",
+			style: { paddingLeft: depth * 12 },
+			onMouseDown: (e) => {
+				e.preventDefault();
+				focusFolderItem(e.currentTarget);
+			},
+			onFocus: (e) => {
+				focusFolderItem(e.currentTarget, { focus: false });
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_DisclosureChevron.DisclosureChevron, {
+				direction: "right",
+				open: folderCtx?.isOpen,
+				className: "size-3 text-muted-foreground"
+			}), children]
+		}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "shrink-0 pr-1",
+			onClick: (e) => e.stopPropagation(),
+			children: actions
+		})]
+	});
+});
+TreeFolderTrigger.displayName = "Tree.FolderTrigger";
+// src/ds/components/Tree/tree-icon.tsx
+var TreeIcon = react.forwardRef(({ className, children }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	ref,
+	className: require_utils.cn("flex shrink-0 items-center [&>svg]:size-3.5", className),
+	children
+}));
+TreeIcon.displayName = "Tree.Icon";
+// src/ds/components/Tree/tree-input.tsx
+var TreeInput = react.forwardRef(({ type, onSubmit, onCancel, defaultValue = "", placeholder, autoFocus = true, className }, ref) => {
+	const depth = useTreeDepth();
+	const inputRef = react.useRef(null);
+	const submittedRef = react.useRef(false);
+	const handleSubmit = react.useCallback((value) => {
+		if (submittedRef.current) return;
+		const trimmed = value.trim();
+		if (trimmed) {
+			submittedRef.current = true;
+			onSubmit(trimmed);
+		} else onCancel?.();
+	}, [onSubmit, onCancel]);
+	const handleKeyDown = react.useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSubmit(e.currentTarget.value);
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			onCancel?.();
+		}
+	}, [handleSubmit, onCancel]);
+	const handleBlur = react.useCallback((e) => {
+		handleSubmit(e.currentTarget.value);
+	}, [handleSubmit]);
+	const handleFocus = react.useCallback((e) => {
+		e.currentTarget.select();
+	}, []);
+	const Icon = type === "folder" ? lucide_react.Folder : lucide_react.File;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		ref,
+		role: "treeitem",
+		"aria-level": depth + 1,
+		"data-tree-item-kind": "input",
+		className: require_utils.cn("group flex h-7 min-w-0 items-center gap-1.5 rounded-sm px-1", require_primitives_transitions.transitions.colors, "focus-within:bg-fill-subtle focus-within:text-foreground focus-within:outline-hidden", className),
+		style: { paddingLeft: depth * 12 + 18 },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex shrink-0 items-center [&>svg]:size-3.5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "text-muted-foreground" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: inputRef,
+			type: "text",
+			defaultValue,
+			placeholder,
+			autoFocus,
+			onKeyDown: handleKeyDown,
+			onBlur: handleBlur,
+			onFocus: handleFocus,
+			...require_primitives_password_manager_autofill.passwordManagerOptOutProps,
+			className: "min-w-0 flex-1 border-none bg-transparent text-caption text-foreground outline-hidden placeholder:text-muted-foreground"
+		})]
+	});
+});
+TreeInput.displayName = "Tree.Input";
+// src/ds/components/Tree/tree-label.tsx
+var TreeLabel = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	ref,
+	className: require_utils.cn("truncate text-foreground", className),
+	...props,
+	children
+}));
+TreeLabel.displayName = "Tree.Label";
+// src/ds/components/Tree/tree-root.tsx
+var TREE_FOCUSABLE_ITEM_SELECTOR = "[data-tree-item-kind=\"folder\"], [data-tree-item-kind=\"file\"]";
+var TREE_FOLDER_TRIGGER_SELECTOR = "[data-tree-folder-trigger=\"true\"]";
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function getTreeItems(root) {
+	return Array.from(root.querySelectorAll(TREE_FOCUSABLE_ITEM_SELECTOR)).filter((item) => item.getAttribute("role") === "treeitem");
+}
+function setTabStops(items, focusableItem) {
+	for (const item of items) item.tabIndex = item === focusableItem ? 0 : -1;
+}
+function syncTreeItemSetMetadata(root) {
+	const groups = [root, ...Array.from(root.querySelectorAll("[role=\"group\"]"))];
+	for (const group of groups) {
+		const items = Array.from(group.children).filter((child) => child instanceof HTMLElement && child.getAttribute("role") === "treeitem" && child.hasAttribute("data-tree-item-kind"));
+		items.forEach((item, index) => {
+			item.setAttribute("aria-posinset", String(index + 1));
+			item.setAttribute("aria-setsize", String(items.length));
+		});
+	}
+}
+function findSelectedItem(items, selectedId) {
+	if (!selectedId) return null;
+	return items.find((item) => item.dataset.treeItemId === selectedId) ?? null;
+}
+function getActiveTreeItem(root, items) {
+	const activeElement = root.ownerDocument.activeElement;
+	if (!(activeElement instanceof HTMLElement) || !root.contains(activeElement)) return null;
+	const activeItem = activeElement.closest(TREE_FOCUSABLE_ITEM_SELECTOR);
+	return activeItem && items.includes(activeItem) ? activeItem : null;
+}
+function getClosestTreeItem(root, target) {
+	if (!(target instanceof HTMLElement) || !root.contains(target)) return null;
+	const item = target.closest(TREE_FOCUSABLE_ITEM_SELECTOR);
+	return item?.getAttribute("role") === "treeitem" ? item : null;
+}
+function focusTreeItem(root, item, options = {}) {
+	const items = getTreeItems(root);
+	if (!items.includes(item)) return;
+	setTabStops(items, item);
+	if (options.focus !== false) item.focus();
+}
+function syncTreeTabStops(root, selectedId) {
+	const items = getTreeItems(root);
+	syncTreeItemSetMetadata(root);
+	const firstItem = items[0];
+	if (!firstItem) return;
+	const activeItem = getActiveTreeItem(root, items);
+	const selectedItem = findSelectedItem(items, selectedId);
+	setTabStops(items, activeItem ?? selectedItem ?? firstItem);
+}
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.dataset.treeFolderTrigger === "true") return false;
+	if (target.isContentEditable) return true;
+	return !!target.closest("input, textarea, select, button, [contenteditable=\"true\"]");
+}
+function getFolderTrigger(item) {
+	return item.querySelector(TREE_FOLDER_TRIGGER_SELECTOR);
+}
+function getParentTreeItem(item) {
+	return (item.parentElement?.closest("[role=\"group\"]"))?.closest(TREE_FOCUSABLE_ITEM_SELECTOR) ?? null;
+}
+function activateTreeItem(item) {
+	const trigger = getFolderTrigger(item);
+	if (trigger) trigger.click();
+	else item.click();
+}
+var TreeRoot = react.forwardRef(({ selectedId, onSelect, className, children }, ref) => {
+	const rootRef = react.useRef(null);
+	const handleRootRef = react.useCallback((node) => {
+		rootRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	const focusItem = react.useCallback((item, options) => {
+		const root = rootRef.current;
+		if (!root) return;
+		focusTreeItem(root, item, options);
+	}, []);
+	const handleKeyDown = react.useCallback((event) => {
+		if (event.defaultPrevented || isEditableTarget(event.target)) return;
+		const root = rootRef.current;
+		if (!root) return;
+		const items = getTreeItems(root);
+		const currentItem = getClosestTreeItem(root, event.target) ?? getActiveTreeItem(root, items) ?? items.find((item) => item.tabIndex === 0);
+		if (!currentItem) return;
+		const currentIndex = items.indexOf(currentItem);
+		if (currentIndex < 0) return;
+		let nextItem = null;
+		let handled = true;
+		switch (event.key) {
+			case "ArrowDown":
+				nextItem = items[Math.min(currentIndex + 1, items.length - 1)] ?? null;
+				break;
+			case "ArrowUp":
+				nextItem = items[Math.max(currentIndex - 1, 0)] ?? null;
+				break;
+			case "Home":
+				nextItem = items[0] ?? null;
+				break;
+			case "End":
+				nextItem = items[items.length - 1] ?? null;
+				break;
+			case "ArrowRight": {
+				const trigger = getFolderTrigger(currentItem);
+				if (trigger && currentItem.getAttribute("aria-expanded") !== "true") {
+					trigger.click();
+					nextItem = currentItem;
+				} else nextItem = items[Math.min(currentIndex + 1, items.length - 1)] ?? null;
+				break;
+			}
+			case "ArrowLeft": {
+				const trigger = getFolderTrigger(currentItem);
+				if (trigger && currentItem.getAttribute("aria-expanded") === "true") {
+					trigger.click();
+					nextItem = currentItem;
+				} else nextItem = getParentTreeItem(currentItem);
+				break;
+			}
+			case "Enter":
+			case " ":
+			case "Spacebar":
+				activateTreeItem(currentItem);
+				nextItem = currentItem;
+				break;
+			default: handled = false;
+		}
+		if (!handled) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (nextItem) focusTreeItem(root, nextItem);
+	}, []);
+	require_hooks_use_isomorphic_layout_effect.useIsomorphicLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		syncTreeTabStops(root, selectedId);
+	}, [children, selectedId]);
+	react.useEffect(() => {
+		const root = rootRef.current;
+		if (!root || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(() => {
+			syncTreeTabStops(root, selectedId);
+		});
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [selectedId]);
+	const contextValue = react.useMemo(() => ({
+		selectedId,
+		onSelect,
+		focusItem
+	}), [
+		selectedId,
+		onSelect,
+		focusItem
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeDepthProvider, {
+			depth: 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				ref: handleRootRef,
+				role: "tree",
+				className: require_utils.cn("flex flex-col text-caption", className),
+				onKeyDown: handleKeyDown,
+				children
+			})
+		})
+	});
+});
+TreeRoot.displayName = "Tree";
+// src/ds/components/Tree/tree.tsx
+var Tree = Object.assign(TreeRoot, {
+	Folder: TreeFolder,
+	FolderTrigger: TreeFolderTrigger,
+	FolderContent: TreeFolderContent,
+	File: TreeFile,
+	Icon: TreeIcon,
+	Label: TreeLabel,
+	Input: TreeInput
+});
+Object.defineProperty(exports, "Tree", {
+	enumerable: true,
+	get: function() {
+		return Tree;
+	}
+});
+
+//# sourceMappingURL=Tree-kgLG4IbP.cjs.map

package/dist/Tree-kgLG4IbP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree-kgLG4IbP.cjs","names":["React","React","cn","transitions","React","cn","Collapsible","React","CollapsibleContent","cn","React","cn","transitions","CollapsibleTrigger","DisclosureChevron","React","cn","React","Folder","File","cn","transitions","passwordManagerOptOutProps","React","cn","React","cn"],"sources":["../src/ds/components/Tree/tree-context.tsx","../src/ds/components/Tree/tree-file.tsx","../src/ds/components/Tree/tree-folder.tsx","../src/ds/components/Tree/tree-folder-content.tsx","../src/ds/components/Tree/tree-folder-trigger.tsx","../src/ds/components/Tree/tree-icon.tsx","../src/ds/components/Tree/tree-input.tsx","../src/ds/components/Tree/tree-label.tsx","../src/ds/components/Tree/tree-root.tsx","../src/ds/components/Tree/tree.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react';\n\nexport interface TreeContextValue {\n  selectedId?: string;\n  onSelect?: (id: string) => void;\n  focusItem?: (item: HTMLElement, options?: { focus?: boolean }) => void;\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null);\n\nexport function TreeProvider({ children, value }: { children: React.ReactNode; value: TreeContextValue }) {\n  return <TreeContext.Provider value={value}>{children}</TreeContext.Provider>;\n}\n\nexport function useTreeContext(): TreeContextValue | null {\n  return React.useContext(TreeContext);\n}\n\nexport interface TreeFolderContextValue {\n  isFocused: boolean;\n  isOpen: boolean;\n}\n\nconst TreeFolderContext = React.createContext<TreeFolderContextValue | null>(null);\n\nexport function TreeFolderProvider({ children, value }: { children: React.ReactNode; value: TreeFolderContextValue }) {\n  return <TreeFolderContext.Provider value={value}>{children}</TreeFolderContext.Provider>;\n}\n\nexport function useTreeFolderContext(): TreeFolderContextValue | null {\n  return React.useContext(TreeFolderContext);\n}\n\nconst TreeDepthContext = React.createContext<number>(0);\n\nexport function TreeDepthProvider({ children, depth }: { children: React.ReactNode; depth: number }) {\n  return <TreeDepthContext.Provider value={depth}>{children}</TreeDepthContext.Provider>;\n}\n\nexport function useTreeDepth(): number {\n  return React.useContext(TreeDepthContext);\n}\n","import * as React from 'react';\nimport { useTreeContext, useTreeDepth } from './tree-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeFileProps {\n  id?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TreeFile = React.forwardRef<HTMLLIElement, TreeFileProps>(({ id, className, children }, ref) => {\n  const treeCtx = useTreeContext();\n  const depth = useTreeDepth();\n  const isSelected = id != null && treeCtx?.selectedId === id;\n\n  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {\n    treeCtx?.focusItem?.(e.currentTarget);\n    if (id != null && treeCtx?.onSelect) {\n      treeCtx.onSelect(id);\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLLIElement>) => {\n    treeCtx?.focusItem?.(e.currentTarget, { focus: false });\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if ((e.key === 'Enter' || e.key === ' ') && id != null && treeCtx?.onSelect) {\n      e.preventDefault();\n      treeCtx.onSelect(id);\n    }\n  };\n\n  return (\n    <li\n      ref={ref}\n      role=\"treeitem\"\n      aria-level={depth + 1}\n      aria-selected={isSelected || undefined}\n      data-tree-item-kind=\"file\"\n      data-tree-item-id={id}\n      tabIndex={-1}\n      className={cn(\n        'group flex h-7 min-w-0 cursor-pointer items-center gap-1.5 rounded-sm px-1',\n        transitions.colors,\n        'outline-hidden hover:bg-fill-subtle focus-visible:bg-fill-subtle focus-visible:text-foreground focus-visible:outline-hidden',\n        isSelected && 'bg-fill-hover text-foreground',\n        className,\n      )}\n      // +18 offsets past the chevron (size-3 = 12px) + flex gap (gap-1.5 = 6px) that folders have\n      style={{ paddingLeft: depth * 12 + 18 }}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </li>\n  );\n});\nTreeFile.displayName = 'Tree.File';\n","import * as React from 'react';\nimport { TreeFolderProvider, useTreeContext, useTreeDepth } from './tree-context';\nimport { Collapsible } from '@/ds/components/Collapsible';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeFolderProps {\n  id?: string;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TreeFolder = React.forwardRef<HTMLLIElement, TreeFolderProps>(\n  ({ id, defaultOpen, open, onOpenChange, className, children }, ref) => {\n    const treeCtx = useTreeContext();\n    const depth = useTreeDepth();\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);\n    const [isFocused, setIsFocused] = React.useState(false);\n    const isOpen = open ?? internalOpen;\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        setInternalOpen(nextOpen);\n        onOpenChange?.(nextOpen);\n      },\n      [onOpenChange],\n    );\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLLIElement>) => {\n        if (e.target !== e.currentTarget) {\n          setIsFocused(false);\n          return;\n        }\n\n        setIsFocused(true);\n        treeCtx?.focusItem?.(e.currentTarget, { focus: false });\n      },\n      [treeCtx],\n    );\n\n    const handleBlur = React.useCallback(() => {\n      setIsFocused(false);\n    }, []);\n\n    const folderContextValue = React.useMemo(() => ({ isFocused, isOpen }), [isFocused, isOpen]);\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={isOpen}\n        aria-level={depth + 1}\n        data-tree-item-kind=\"folder\"\n        data-tree-item-id={id}\n        tabIndex={-1}\n        className={cn('flex flex-col outline-hidden', className)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        <TreeFolderProvider value={folderContextValue}>\n          <Collapsible open={isOpen} onOpenChange={handleOpenChange}>\n            {children}\n          </Collapsible>\n        </TreeFolderProvider>\n      </li>\n    );\n  },\n);\nTreeFolder.displayName = 'Tree.Folder';\n","import * as React from 'react';\nimport { useTreeDepth, TreeDepthProvider } from './tree-context';\nimport { CollapsibleContent } from '@/ds/components/Collapsible';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeFolderContentProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TreeFolderContent = React.forwardRef<HTMLDivElement, TreeFolderContentProps>(\n  ({ className, children }, ref) => {\n    const depth = useTreeDepth();\n\n    return (\n      <CollapsibleContent ref={ref} fill className={cn(className)}>\n        <TreeDepthProvider depth={depth + 1}>\n          <ul role=\"group\" className=\"flex flex-col\">\n            {children}\n          </ul>\n        </TreeDepthProvider>\n      </CollapsibleContent>\n    );\n  },\n);\nTreeFolderContent.displayName = 'Tree.FolderContent';\n","import * as React from 'react';\nimport { useTreeContext, useTreeDepth, useTreeFolderContext } from './tree-context';\nimport { CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeFolderTriggerProps {\n  className?: string;\n  children: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nexport const TreeFolderTrigger = React.forwardRef<HTMLDivElement, TreeFolderTriggerProps>(\n  ({ className, children, actions }, ref) => {\n    const treeCtx = useTreeContext();\n    const folderCtx = useTreeFolderContext();\n    const depth = useTreeDepth();\n\n    const focusFolderItem = React.useCallback(\n      (target: HTMLElement, options?: { focus?: boolean }) => {\n        const item = target.closest<HTMLElement>('[data-tree-item-kind=\"folder\"]');\n        if (item) {\n          treeCtx?.focusItem?.(item, options);\n        }\n      },\n      [treeCtx],\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-tree-folder-row=\"true\"\n        className={cn(\n          'group flex h-7 w-full min-w-0 items-center rounded-sm hover:bg-fill-subtle',\n          transitions.colors,\n          folderCtx?.isFocused && 'bg-fill-hover text-foreground',\n          className,\n        )}\n      >\n        <CollapsibleTrigger\n          data-tree-folder-trigger=\"true\"\n          tabIndex={-1}\n          className=\"flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-sm px-1 outline-hidden focus-visible:outline-hidden\"\n          style={{ paddingLeft: depth * 12 }}\n          onMouseDown={e => {\n            e.preventDefault();\n            focusFolderItem(e.currentTarget);\n          }}\n          onFocus={e => {\n            focusFolderItem(e.currentTarget, { focus: false });\n          }}\n        >\n          <DisclosureChevron direction=\"right\" open={folderCtx?.isOpen} className=\"size-3 text-muted-foreground\" />\n          {children}\n        </CollapsibleTrigger>\n        {actions && (\n          <span className=\"shrink-0 pr-1\" onClick={e => e.stopPropagation()}>\n            {actions}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\nTreeFolderTrigger.displayName = 'Tree.FolderTrigger';\n","import * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeIconProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TreeIcon = React.forwardRef<HTMLSpanElement, TreeIconProps>(({ className, children }, ref) => (\n  <span ref={ref} className={cn('flex shrink-0 items-center [&>svg]:size-3.5', className)}>\n    {children}\n  </span>\n));\nTreeIcon.displayName = 'Tree.Icon';\n","import { File, Folder } from 'lucide-react';\nimport * as React from 'react';\nimport { useTreeDepth } from './tree-context';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeInputProps {\n  type: 'file' | 'folder';\n  onSubmit: (name: string) => void;\n  onCancel?: () => void;\n  defaultValue?: string;\n  placeholder?: string;\n  autoFocus?: boolean;\n  className?: string;\n}\n\nexport const TreeInput = React.forwardRef<HTMLLIElement, TreeInputProps>(\n  ({ type, onSubmit, onCancel, defaultValue = '', placeholder, autoFocus = true, className }, ref) => {\n    const depth = useTreeDepth();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const submittedRef = React.useRef(false);\n\n    const handleSubmit = React.useCallback(\n      (value: string) => {\n        if (submittedRef.current) return;\n        const trimmed = value.trim();\n        if (trimmed) {\n          submittedRef.current = true;\n          onSubmit(trimmed);\n        } else {\n          onCancel?.();\n        }\n      },\n      [onSubmit, onCancel],\n    );\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          handleSubmit(e.currentTarget.value);\n        } else if (e.key === 'Escape') {\n          e.preventDefault();\n          onCancel?.();\n        }\n      },\n      [handleSubmit, onCancel],\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        handleSubmit(e.currentTarget.value);\n      },\n      [handleSubmit],\n    );\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.currentTarget.select();\n    }, []);\n\n    const Icon = type === 'folder' ? Folder : File;\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-level={depth + 1}\n        data-tree-item-kind=\"input\"\n        className={cn(\n          'group flex h-7 min-w-0 items-center gap-1.5 rounded-sm px-1',\n          transitions.colors,\n          'focus-within:bg-fill-subtle focus-within:text-foreground focus-within:outline-hidden',\n          className,\n        )}\n        style={{ paddingLeft: depth * 12 + 18 }}\n      >\n        <span className=\"flex shrink-0 items-center [&>svg]:size-3.5\">\n          <Icon className=\"text-muted-foreground\" />\n        </span>\n        <input\n          ref={inputRef}\n          type=\"text\"\n          defaultValue={defaultValue}\n          placeholder={placeholder}\n          autoFocus={autoFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          onFocus={handleFocus}\n          {...passwordManagerOptOutProps}\n          className=\"min-w-0 flex-1 border-none bg-transparent text-caption text-foreground outline-hidden placeholder:text-muted-foreground\"\n        />\n      </li>\n    );\n  },\n);\nTreeInput.displayName = 'Tree.Input';\n","import * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TreeLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TreeLabel = React.forwardRef<HTMLSpanElement, TreeLabelProps>(({ className, children, ...props }, ref) => (\n  <span ref={ref} className={cn('truncate text-foreground', className)} {...props}>\n    {children}\n  </span>\n));\nTreeLabel.displayName = 'Tree.Label';\n","import * as React from 'react';\nimport { TreeProvider, TreeDepthProvider } from './tree-context';\nimport { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect';\nimport { cn } from '@/lib/utils';\n\nconst TREE_FOCUSABLE_ITEM_SELECTOR = '[data-tree-item-kind=\"folder\"], [data-tree-item-kind=\"file\"]';\nconst TREE_FOLDER_TRIGGER_SELECTOR = '[data-tree-folder-trigger=\"true\"]';\n\nexport interface TreeRootProps {\n  selectedId?: string;\n  onSelect?: (id: string) => void;\n  className?: string;\n  children: React.ReactNode;\n}\n\nfunction assignRef<T>(ref: React.ForwardedRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n}\n\nfunction getTreeItems(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(TREE_FOCUSABLE_ITEM_SELECTOR)).filter(\n    item => item.getAttribute('role') === 'treeitem',\n  );\n}\n\nfunction setTabStops(items: HTMLElement[], focusableItem: HTMLElement) {\n  for (const item of items) {\n    item.tabIndex = item === focusableItem ? 0 : -1;\n  }\n}\n\nfunction syncTreeItemSetMetadata(root: HTMLElement) {\n  const groups = [root, ...Array.from(root.querySelectorAll<HTMLElement>('[role=\"group\"]'))];\n\n  for (const group of groups) {\n    const items = Array.from(group.children).filter(\n      (child): child is HTMLElement =>\n        child instanceof HTMLElement &&\n        child.getAttribute('role') === 'treeitem' &&\n        child.hasAttribute('data-tree-item-kind'),\n    );\n\n    items.forEach((item, index) => {\n      item.setAttribute('aria-posinset', String(index + 1));\n      item.setAttribute('aria-setsize', String(items.length));\n    });\n  }\n}\n\nfunction findSelectedItem(items: HTMLElement[], selectedId: string | undefined): HTMLElement | null {\n  if (!selectedId) return null;\n  return items.find(item => item.dataset.treeItemId === selectedId) ?? null;\n}\n\nfunction getActiveTreeItem(root: HTMLElement, items: HTMLElement[]): HTMLElement | null {\n  const activeElement = root.ownerDocument.activeElement;\n  if (!(activeElement instanceof HTMLElement) || !root.contains(activeElement)) return null;\n\n  const activeItem = activeElement.closest<HTMLElement>(TREE_FOCUSABLE_ITEM_SELECTOR);\n  return activeItem && items.includes(activeItem) ? activeItem : null;\n}\n\nfunction getClosestTreeItem(root: HTMLElement, target: EventTarget | null): HTMLElement | null {\n  if (!(target instanceof HTMLElement) || !root.contains(target)) return null;\n  const item = target.closest<HTMLElement>(TREE_FOCUSABLE_ITEM_SELECTOR);\n  return item?.getAttribute('role') === 'treeitem' ? item : null;\n}\n\nfunction focusTreeItem(root: HTMLElement, item: HTMLElement, options: { focus?: boolean } = {}) {\n  const items = getTreeItems(root);\n  if (!items.includes(item)) return;\n\n  setTabStops(items, item);\n  if (options.focus !== false) {\n    item.focus();\n  }\n}\n\nfunction syncTreeTabStops(root: HTMLElement, selectedId: string | undefined) {\n  const items = getTreeItems(root);\n  syncTreeItemSetMetadata(root);\n\n  const firstItem = items[0];\n  if (!firstItem) return;\n\n  const activeItem = getActiveTreeItem(root, items);\n  const selectedItem = findSelectedItem(items, selectedId);\n  setTabStops(items, activeItem ?? selectedItem ?? firstItem);\n}\n\nfunction isEditableTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.dataset.treeFolderTrigger === 'true') return false;\n  if (target.isContentEditable) return true;\n\n  return !!target.closest('input, textarea, select, button, [contenteditable=\"true\"]');\n}\n\nfunction getFolderTrigger(item: HTMLElement): HTMLButtonElement | null {\n  return item.querySelector<HTMLButtonElement>(TREE_FOLDER_TRIGGER_SELECTOR);\n}\n\nfunction getParentTreeItem(item: HTMLElement): HTMLElement | null {\n  const parentGroup = item.parentElement?.closest('[role=\"group\"]');\n  return parentGroup?.closest<HTMLElement>(TREE_FOCUSABLE_ITEM_SELECTOR) ?? null;\n}\n\nfunction activateTreeItem(item: HTMLElement) {\n  const trigger = getFolderTrigger(item);\n  if (trigger) {\n    trigger.click();\n  } else {\n    item.click();\n  }\n}\n\nexport const TreeRoot = React.forwardRef<HTMLUListElement, TreeRootProps>(\n  ({ selectedId, onSelect, className, children }, ref) => {\n    const rootRef = React.useRef<HTMLUListElement | null>(null);\n\n    const handleRootRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        rootRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    const focusItem = React.useCallback((item: HTMLElement, options?: { focus?: boolean }) => {\n      const root = rootRef.current;\n      if (!root) return;\n      focusTreeItem(root, item, options);\n    }, []);\n\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (event.defaultPrevented || isEditableTarget(event.target)) return;\n\n      const root = rootRef.current;\n      if (!root) return;\n\n      const items = getTreeItems(root);\n      const currentItem =\n        getClosestTreeItem(root, event.target) ??\n        getActiveTreeItem(root, items) ??\n        items.find(item => item.tabIndex === 0);\n      if (!currentItem) return;\n\n      const currentIndex = items.indexOf(currentItem);\n      if (currentIndex < 0) return;\n\n      let nextItem: HTMLElement | null = null;\n      let handled = true;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          nextItem = items[Math.min(currentIndex + 1, items.length - 1)] ?? null;\n          break;\n        case 'ArrowUp':\n          nextItem = items[Math.max(currentIndex - 1, 0)] ?? null;\n          break;\n        case 'Home':\n          nextItem = items[0] ?? null;\n          break;\n        case 'End':\n          nextItem = items[items.length - 1] ?? null;\n          break;\n        case 'ArrowRight': {\n          const trigger = getFolderTrigger(currentItem);\n          if (trigger && currentItem.getAttribute('aria-expanded') !== 'true') {\n            trigger.click();\n            nextItem = currentItem;\n          } else {\n            nextItem = items[Math.min(currentIndex + 1, items.length - 1)] ?? null;\n          }\n          break;\n        }\n        case 'ArrowLeft': {\n          const trigger = getFolderTrigger(currentItem);\n          if (trigger && currentItem.getAttribute('aria-expanded') === 'true') {\n            trigger.click();\n            nextItem = currentItem;\n          } else {\n            nextItem = getParentTreeItem(currentItem);\n          }\n          break;\n        }\n        case 'Enter':\n        case ' ':\n        case 'Spacebar':\n          activateTreeItem(currentItem);\n          nextItem = currentItem;\n          break;\n        default:\n          handled = false;\n      }\n\n      if (!handled) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (nextItem) {\n        focusTreeItem(root, nextItem);\n      }\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      const root = rootRef.current;\n      if (!root) return;\n      syncTreeTabStops(root, selectedId);\n    }, [children, selectedId]);\n\n    React.useEffect(() => {\n      const root = rootRef.current;\n      if (!root || typeof MutationObserver === 'undefined') return;\n\n      const observer = new MutationObserver(() => {\n        syncTreeTabStops(root, selectedId);\n      });\n      observer.observe(root, { childList: true, subtree: true });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [selectedId]);\n\n    const contextValue = React.useMemo(() => ({ selectedId, onSelect, focusItem }), [selectedId, onSelect, focusItem]);\n\n    return (\n      <TreeProvider value={contextValue}>\n        <TreeDepthProvider depth={0}>\n          <ul\n            ref={handleRootRef}\n            role=\"tree\"\n            className={cn('flex flex-col text-caption', className)}\n            onKeyDown={handleKeyDown}\n          >\n            {children}\n          </ul>\n        </TreeDepthProvider>\n      </TreeProvider>\n    );\n  },\n);\nTreeRoot.displayName = 'Tree';\n","import { TreeFile } from './tree-file';\nimport { TreeFolder } from './tree-folder';\nimport { TreeFolderContent } from './tree-folder-content';\nimport { TreeFolderTrigger } from './tree-folder-trigger';\nimport { TreeIcon } from './tree-icon';\nimport { TreeInput } from './tree-input';\nimport { TreeLabel } from './tree-label';\nimport { TreeRoot } from './tree-root';\n\nexport const Tree = Object.assign(TreeRoot, {\n  Folder: TreeFolder,\n  FolderTrigger: TreeFolderTrigger,\n  FolderContent: TreeFolderContent,\n  File: TreeFile,\n  Icon: TreeIcon,\n  Label: TreeLabel,\n  Input: TreeInput,\n});\n"],"mappings":"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"}

package/dist/Txt-5efBsb2p.js

@@ -0,0 +1,21 @@
+import { textStyle } from "./primitives/text.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { useRender } from "@base-ui/react/use-render";
+// src/ds/components/Txt/Txt.tsx
+/** Typography for text elements. Controls and layout containers own their markup. */
+function Txt({ as, className, variant, tone, font, ...props }) {
+	return useRender({
+		defaultTagName: as ?? "p",
+		props: {
+			...props,
+			className: cn(textStyle({
+				variant: variant ?? "body",
+				tone,
+				font
+			}), variant === void 0 && (as === "strong" || as === "b") && "font-bold", className)
+		}
+	});
+}
+export { Txt as t };
+
+//# sourceMappingURL=Txt-5efBsb2p.js.map

package/dist/Txt-5efBsb2p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-5efBsb2p.js","names":[],"sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport type { ComponentPropsWithoutRef, HTMLAttributes, Ref } from 'react';\n\nimport { textStyle } from '@/ds/primitives/text';\nimport type { TextStyleProps } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\ntype TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong' | 'b' | 'time';\n\nexport interface TxtProps extends HTMLAttributes<HTMLElement>, TextStyleProps {\n  as?: TextElement;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n}\n\ntype ElementTxtProps<T extends TextElement> = TextStyleProps & {\n  as?: T;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n} & Omit<ComponentPropsWithoutRef<T>, keyof TextStyleProps | 'as' | 'ref'>;\n\n/** Typography for text elements. Controls and layout containers own their markup. */\nexport function Txt<T extends TextElement = 'p'>({ as, className, variant, tone, font, ...props }: ElementTxtProps<T>) {\n  return useRender({\n    defaultTagName: as ?? 'p',\n    props: {\n      ...props,\n      className: cn(\n        textStyle({ variant: variant ?? 'body', tone, font }),\n        variant === undefined && (as === 'strong' || as === 'b') && 'font-bold',\n        className,\n      ),\n    },\n  });\n}\n"],"mappings":";;;;;AAsBA,SAAgB,IAAiC,EAAE,IAAI,WAAW,SAAS,MAAM,MAAM,GAAG,SAA6B;CACrH,OAAO,UAAU;EACf,gBAAgB,MAAM;EACtB,OAAO;GACL,GAAG;GACH,WAAW,GACT,UAAU;IAAE,SAAS,WAAW;IAAQ;IAAM;GAAK,CAAC,GACpD,YAAY,KAAA,MAAc,OAAO,YAAY,OAAO,QAAQ,aAC5D,SACF;EACF;CACF,CAAC;AACH"}

package/dist/Txt-_00wWxTd.cjs

@@ -0,0 +1,26 @@
+const require_primitives_text = require("./primitives/text.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+// src/ds/components/Txt/Txt.tsx
+/** Typography for text elements. Controls and layout containers own their markup. */
+function Txt({ as, className, variant, tone, font, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: as ?? "p",
+		props: {
+			...props,
+			className: require_utils.cn(require_primitives_text.textStyle({
+				variant: variant ?? "body",
+				tone,
+				font
+			}), variant === void 0 && (as === "strong" || as === "b") && "font-bold", className)
+		}
+	});
+}
+Object.defineProperty(exports, "Txt", {
+	enumerable: true,
+	get: function() {
+		return Txt;
+	}
+});
+
+//# sourceMappingURL=Txt-_00wWxTd.cjs.map

package/dist/Txt-_00wWxTd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-_00wWxTd.cjs","names":["useRender","cn","textStyle"],"sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport type { ComponentPropsWithoutRef, HTMLAttributes, Ref } from 'react';\n\nimport { textStyle } from '@/ds/primitives/text';\nimport type { TextStyleProps } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\ntype TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong' | 'b' | 'time';\n\nexport interface TxtProps extends HTMLAttributes<HTMLElement>, TextStyleProps {\n  as?: TextElement;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n}\n\ntype ElementTxtProps<T extends TextElement> = TextStyleProps & {\n  as?: T;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n} & Omit<ComponentPropsWithoutRef<T>, keyof TextStyleProps | 'as' | 'ref'>;\n\n/** Typography for text elements. Controls and layout containers own their markup. */\nexport function Txt<T extends TextElement = 'p'>({ as, className, variant, tone, font, ...props }: ElementTxtProps<T>) {\n  return useRender({\n    defaultTagName: as ?? 'p',\n    props: {\n      ...props,\n      className: cn(\n        textStyle({ variant: variant ?? 'body', tone, font }),\n        variant === undefined && (as === 'strong' || as === 'b') && 'font-bold',\n        className,\n      ),\n    },\n  });\n}\n"],"mappings":";;;;;AAsBA,SAAgB,IAAiC,EAAE,IAAI,WAAW,SAAS,MAAM,MAAM,GAAG,SAA6B;CACrH,QAAA,GAAOA,0BAAAA,UAAAA,CAAU;EACf,gBAAgB,MAAM;EACtB,OAAO;GACL,GAAG;GACH,WAAWC,cAAAA,GACTC,wBAAAA,UAAU;IAAE,SAAS,WAAW;IAAQ;IAAM;GAAK,CAAC,GACpD,YAAY,KAAA,MAAc,OAAO,YAAY,OAAO,QAAQ,aAC5D,SACF;EACF;CACF,CAAC;AACH"}