@deftui/react 0.3.0 → 0.3.2

package/dist/vendor/tailored/file-tree.d.mts

@@ -1,21 +0,0 @@
-import * as React$1 from "react";
-export type FileTreeNode = {
-  id: string;
-  name: string;
-  kind?: "file" | "folder";
-  children?: FileTreeNode[];
-  meta?: React$1.ReactNode;
-  icon?: React$1.ReactNode;
-};
-export type FileTreeProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
-  nodes: FileTreeNode[];
-  expandedIds?: string[];
-  defaultExpandedIds?: string[];
-  onExpandedChange?: (ids: string[]) => void;
-  selectedId?: string | null;
-  defaultSelectedId?: string | null;
-  onSelect?: (node: FileTreeNode) => void;
-  label?: string;
-};
-/** https://ui.tinkererslabs.com/docs/components/file-tree/ */
-export declare function FileTree({ nodes, expandedIds, defaultExpandedIds, onExpandedChange, selectedId, defaultSelectedId, onSelect, label, className, ...rootProps }: FileTreeProps): React$1.JSX.Element;

package/dist/vendor/tailored/file-tree.mjs

@@ -1,146 +0,0 @@
-"use client";
-import { cn } from "../shadcn/lib/utils.mjs";
-import * as React$1 from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
-// src/vendor/tailored/file-tree.tsx
-function isFolder(node) {
-	return node.kind === "folder" || Array.isArray(node.children);
-}
-function flatten(nodes, expanded, level = 1) {
-	return nodes.flatMap((node) => {
-		const folder = isFolder(node);
-		const open = folder && expanded.has(node.id);
-		const self = {
-			node,
-			level,
-			isFolder: folder,
-			isExpanded: open
-		};
-		if (!open || !node.children) return [self];
-		return [self, ...flatten(node.children, expanded, level + 1)];
-	});
-}
-/** https://ui.tinkererslabs.com/docs/components/file-tree/ */
-function FileTree({ nodes, expandedIds, defaultExpandedIds = [], onExpandedChange, selectedId, defaultSelectedId = null, onSelect, label = "Files", className, ...rootProps }) {
-	const [uncontrolledExpanded, setUncontrolledExpanded] = React$1.useState(defaultExpandedIds);
-	const [uncontrolledSelected, setUncontrolledSelected] = React$1.useState(defaultSelectedId);
-	const expandedList = expandedIds ?? uncontrolledExpanded;
-	const expanded = React$1.useMemo(() => new Set(expandedList), [expandedList]);
-	const selected = selectedId === void 0 ? uncontrolledSelected : selectedId;
-	const rows = React$1.useMemo(() => flatten(nodes, expanded), [nodes, expanded]);
-	const containerRef = React$1.useRef(null);
-	const setExpanded = (ids) => {
-		if (expandedIds === void 0) setUncontrolledExpanded(ids);
-		onExpandedChange?.(ids);
-	};
-	const toggle = (id, open) => {
-		const shouldOpen = open ?? !expanded.has(id);
-		if (shouldOpen === expanded.has(id)) return;
-		setExpanded(shouldOpen ? [...expandedList, id] : expandedList.filter((entry) => entry !== id));
-	};
-	const select = (node) => {
-		if (selectedId === void 0) setUncontrolledSelected(node.id);
-		onSelect?.(node);
-	};
-	const focusRow = (index) => {
-		const target = rows[index];
-		if (!target) return;
-		containerRef.current?.querySelector(`[data-node="${CSS.escape(target.node.id)}"]`)?.focus();
-	};
-	const onKeyDown = (event, row, index) => {
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				focusRow(Math.min(index + 1, rows.length - 1));
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				focusRow(Math.max(index - 1, 0));
-				break;
-			case "ArrowRight":
-				event.preventDefault();
-				if (row.isFolder && !row.isExpanded) toggle(row.node.id, true);
-				else if (row.isFolder) focusRow(index + 1);
-				break;
-			case "ArrowLeft": {
-				event.preventDefault();
-				if (row.isFolder && row.isExpanded) {
-					toggle(row.node.id, false);
-					break;
-				}
-				const parent = rows.slice(0, index).reverse().findIndex((entry) => entry.level < row.level);
-				if (parent >= 0) focusRow(index - 1 - parent);
-				break;
-			}
-			case "Home":
-				event.preventDefault();
-				focusRow(0);
-				break;
-			case "End":
-				event.preventDefault();
-				focusRow(rows.length - 1);
-				break;
-			case "Enter":
-			case " ":
-				event.preventDefault();
-				if (row.isFolder) toggle(row.node.id);
-				select(row.node);
-		}
-	};
-	const activeIndex = Math.max(rows.findIndex((row) => row.node.id === selected), 0);
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		"data-slot": "file-tree",
-		className: cn("border-border bg-card text-card-foreground rounded-[var(--radius)] border p-1.5", className),
-		...rootProps,
-		children: /* @__PURE__ */ jsx("div", {
-			role: "tree",
-			"aria-label": label,
-			children: rows.map((row, index) => {
-				const isSelected = row.node.id === selected;
-				const Icon = row.isFolder ? row.isExpanded ? FolderOpen : Folder : File;
-				return /* @__PURE__ */ jsxs("div", {
-					role: "treeitem",
-					"data-node": row.node.id,
-					"data-slot": "file-tree-item",
-					"aria-level": row.level,
-					"aria-selected": isSelected,
-					"aria-expanded": row.isFolder ? row.isExpanded : void 0,
-					tabIndex: index === activeIndex ? 0 : -1,
-					className: cn("focus-visible:ring-ring flex min-h-9 cursor-default items-center gap-1.5 rounded-[calc(var(--radius)-0.35rem)] pr-2 text-sm focus-visible:ring-2 focus-visible:outline-none", isSelected ? "bg-muted font-semibold" : "hover:bg-muted/60 transition-colors duration-150 motion-reduce:transition-none"),
-					style: { paddingLeft: `${(row.level - 1) * .85 + .35}rem` },
-					onClick: () => {
-						if (row.isFolder) toggle(row.node.id);
-						select(row.node);
-					},
-					onKeyDown: (event) => onKeyDown(event, row, index),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "flex size-4 shrink-0 items-center justify-center",
-							children: row.isFolder ? /* @__PURE__ */ jsx(ChevronRight, {
-								"aria-hidden": "true",
-								size: 13,
-								className: cn("text-muted-foreground transition-transform duration-150 motion-reduce:transition-none", row.isExpanded && "rotate-90")
-							}) : null
-						}),
-						/* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							className: "text-muted-foreground shrink-0",
-							children: row.node.icon ?? /* @__PURE__ */ jsx(Icon, { size: 15 })
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 truncate",
-							children: row.node.name
-						}),
-						row.node.meta ? /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground shrink-0 text-xs",
-							children: row.node.meta
-						}) : null
-					]
-				}, row.node.id);
-			})
-		})
-	});
-}
-export { FileTree };