@deftui/react 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,43 @@
+# @deftui/react
+
+A React component library built on Base UI, shadcn/ui, and their open-source registry ecosystem, offering easy-to-use compound component APIs.
+
+[Upstream documentation](./dist/vendor/README.md): To look up component usage, check the local exports first, then consult the upstream.
+
+> Most basic components expose exactly the same APIs as their shadcn/ui counterparts backed by Base UI.
+
+## Installation
+
+```sh
+bun add @deftui/react
+```
+
+## Usage
+
+Install Tailwind CSS 4 in your project first, then import the styles in your application's global CSS:
+
+```css
+@import "tailwindcss";
+@import "@deftui/react/styles";
+```
+
+Component Example:
+
+```tsx
+import { Button, Card } from "@deftui/react";
+
+export function Example() {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title>Welcome to Deft UI</Card.Title>
+        <Card.Description>Compose your UI using Compound Component API</Card.Description>
+      </Card.Header>
+
+      <Card.Content>
+        <Button>Get started</Button>
+      </Card.Content>
+    </Card>
+  );
+}
+```

package/dist/index.d.mts

@@ -16,6 +16,7 @@ import { Dropzone, formatSize } from "./widgets/dropzone.mjs";
 import { LightboxActions, LightboxBackdrop, LightboxCaptions, LightboxChangeReason, LightboxClose, LightboxContent, LightboxControl, LightboxControlContext, LightboxCounter, LightboxDownload, LightboxImageChangeEventDetails, LightboxImageItem, LightboxItem, LightboxMore, LightboxNext, LightboxOpenEventDetails, LightboxPrevious, LightboxProps, LightboxSlide, LightboxSlides, LightboxThumbnail, LightboxThumbnails, LightboxToolbar, LightboxTrigger, LightboxTriggerProps, LightboxVideoItem, LightboxViewport, LightboxZoom, LightboxZoomButton, useLightbox } from "./vendor/tailored/lightbox.mjs";
 import { Carousel, Image, ImageProps, Lightbox } from "./widgets/multimedia.mjs";
 import { Pagination } from "./widgets/pagination.mjs";
+import { Form } from "./vendor/coss/form.mjs";
 import { Badge } from "./vendor/shadcn/badge.mjs";
 import { Switch } from "./vendor/shadcn/switch.mjs";
 import { Spinner } from "./vendor/shadcn/spinner.mjs";
@@ -23,12 +24,13 @@ import { Skeleton } from "./vendor/shadcn/skeleton.mjs";
 import { Checkbox } from "./vendor/shadcn/checkbox.mjs";
 import { Textarea } from "./vendor/shadcn/textarea.mjs";
 import { ScrollArea } from "./vendor/coss/scroll-area.mjs";
-import { Form } from "./vendor/coss/form.mjs";
 import { IconSwap } from "./vendor/tailored/icon-swap.mjs";
+import { JsonViewer } from "./vendor/tailored/json-viewer.mjs";
+import { FileTree, FileTreeNode } from "./vendor/tailored/file-tree.mjs";
 import { AlertDialog, Breadcrumb, ButtonGroup, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.mjs";
 import { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useDropzone } from "react-dropzone";
 export type * from "react-dropzone";
-export { AlertDialog, type AlertDialogHandle, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, Dialog, type DialogHandle, Drawer, type DrawerHandle, Dropdown, Dropzone, Empty, Field, Form, IconSwap, Image, ImageProps, Input, InputGroup, Kbd, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, type useLightbox, useMediaQuery, useSidebar };
+export { AlertDialog, type AlertDialogHandle, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, Dialog, type DialogHandle, Drawer, type DrawerHandle, Dropdown, Dropzone, Empty, Field, FileTree, type FileTreeNode, Form, IconSwap, Image, ImageProps, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, type useLightbox, useMediaQuery, useSidebar };

package/dist/index.mjs

@@ -18,15 +18,17 @@ import { DatePicker, DateRangePicker, TimePicker } from "./widgets/datetime.mjs"
 import { Dropzone, formatSize } from "./widgets/dropzone.mjs";
 import { Carousel, Image, Lightbox } from "./widgets/multimedia.mjs";
 import { Pagination } from "./widgets/pagination.mjs";
+import { Form } from "./vendor/coss/form.mjs";
 import { Badge } from "./vendor/shadcn/badge.mjs";
 import { Switch } from "./vendor/shadcn/switch.mjs";
 import { Checkbox } from "./vendor/shadcn/checkbox.mjs";
 import { ScrollArea } from "./vendor/coss/scroll-area.mjs";
-import { Form } from "./vendor/coss/form.mjs";
 import { IconSwap } from "./vendor/tailored/icon-swap.mjs";
+import { JsonViewer } from "./vendor/tailored/json-viewer.mjs";
+import { FileTree } from "./vendor/tailored/file-tree.mjs";
 import { AlertDialog, Breadcrumb, ButtonGroup, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.mjs";
 import { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useDropzone } from "react-dropzone";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, IconSwap, Image, Input, InputGroup, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, FileTree, Form, IconSwap, Image, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };

package/dist/styles.shadcn.css

@@ -1,4 +1,4 @@
-/* Ejected from shadcn v4.22.2 — cSpell: disable */
+/* Ejected from shadcn v4.23.0 — cSpell: disable */
 
 @theme inline {
   @keyframes accordion-down {

package/dist/vendor/README.md

@@ -54,14 +54,15 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 
 ## Tailored
 
-`tailored/` 存放基于上游、需要较大结构或行为调整的单体组件。仅需导入路径、图标或少量样式适配的组件，仍放在对应的来源目录。
+`tailored/` 存放：仅少量引入的上游组件 或 需要较大调整的单体组件
 
 - 按本地需求维护，对比后选择性吸收上游修复，避免直接覆盖本地实现。
 - 优先复用已有基础组件；仅供该组件使用的依赖可内联，分别记录其来源。
-- 下表记录主组件及内联依赖的 registry ID、文档和主要修改；对外的组合封装放在 `widgets/`。
 
 | ID | File | Docs | Modifications |
 | --- | --- | --- | --- |
 | `https://ui.iandefined.com/r/icon-swap.json` | [tailored/icon-swap.tsx](tailored/icon-swap.tsx) | [Icon Swap](https://ui.iandefined.com/docs/utilities/icon-swap/) | 进出场动画减弱模糊为 2px，缩短为 0.2s 时长 |
 | `https://ui.iandefined.com/r/lightbox.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Lightbox](https://ui.iandefined.com/docs/components/lightbox/) | 适配本地组件和尺寸；修正嵌套弹层层级与点击隔离；补充加载失败反馈 |
 | `https://ui.iandefined.com/r/scroll-area.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Scroll Area](https://ui.iandefined.com/docs/components/scroll-area/) | 作为 Lightbox 的私有依赖内联 |
+| `Tinkerers-Labs/mischief-ui/file-tree` | [tailored/file-tree.tsx](tailored/file-tree.tsx) | [File Tree](https://ui.tinkererslabs.com/docs/components/file-tree/) | — |
+| `Tinkerers-Labs/mischief-ui/json-viewer` | [tailored/json-viewer.tsx](tailored/json-viewer.tsx) | [JSON Viewer](https://ui.tinkererslabs.com/docs/components/json-viewer/) | — |

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

@@ -0,0 +1,20 @@
+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;
+};
+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

@@ -0,0 +1,145 @@
+"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)];
+	});
+}
+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 };

package/dist/vendor/tailored/json-viewer.d.mts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+export type JsonViewerProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  value: unknown;
+  rootName?: string;
+  defaultExpandedDepth?: number;
+  maxStringLength?: number;
+  copyable?: boolean;
+  label?: string;
+};
+export declare function JsonViewer({ value, rootName, defaultExpandedDepth, maxStringLength, copyable, label, className, ...rootProps }: JsonViewerProps): React$1.JSX.Element;

package/dist/vendor/tailored/json-viewer.mjs

@@ -0,0 +1,230 @@
+"use client";
+import { cn } from "../shadcn/lib/utils.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight, Clipboard } from "lucide-react";
+// src/vendor/tailored/json-viewer.tsx
+function kindOf(value) {
+	if (value === null) return "null";
+	if (Array.isArray(value)) return "array";
+	switch (typeof value) {
+		case "object": return "object";
+		case "string": return "string";
+		case "number": return "number";
+		case "boolean": return "boolean";
+		default: return "other";
+	}
+}
+function entriesOf(value) {
+	if (Array.isArray(value)) return value.map((entry, index) => [String(index), entry]);
+	return Object.entries(value);
+}
+function size(value) {
+	return Array.isArray(value) ? value.length : Object.keys(value).length;
+}
+/** What a collapsed branch says about itself, without unfolding it. */
+function summarise(value, kind) {
+	const count = size(value);
+	const noun = count === 1 ? "item" : "items";
+	return kind === "array" ? `[ ${count} ${noun} ]` : `{ ${count} ${noun} }`;
+}
+/**
+* A JSON path in the notation somebody would paste back into code, so the copy
+* is worth taking: `data.rows[0].name` rather than a list of segments.
+*/
+function joinPath(parent, key, inArray) {
+	if (inArray) return `${parent}[${key}]`;
+	return /^[A-Za-z_$][\w$]*$/.test(key) ? `${parent}.${key}` : `${parent}[${JSON.stringify(key)}]`;
+}
+function flatten(value, expanded, rootName) {
+	const walk = (node, key, path, level, index) => {
+		const kind = kindOf(node);
+		const branch = (kind === "object" || kind === "array") && size(node) > 0;
+		const open = branch && expanded.has(path);
+		const self = {
+			path,
+			key,
+			value: node,
+			kind,
+			level,
+			branch,
+			expanded: open,
+			index
+		};
+		if (!open) return [self];
+		const inArray = kind === "array";
+		return [self, ...entriesOf(node).flatMap(([childKey, child], at) => walk(child, childKey, joinPath(path, childKey, inArray), level + 1, inArray ? at : null))];
+	};
+	return walk(value, null, rootName, 1, null);
+}
+/** Every path down to the requested depth, so the first view is not one line. */
+function pathsToDepth(value, rootName, depth) {
+	const open = /* @__PURE__ */ new Set();
+	const walk = (node, path, level) => {
+		const kind = kindOf(node);
+		if (kind !== "object" && kind !== "array") return;
+		if (size(node) === 0 || level > depth) return;
+		open.add(path);
+		const inArray = kind === "array";
+		for (const [key, child] of entriesOf(node)) walk(child, joinPath(path, key, inArray), level + 1);
+	};
+	walk(value, rootName, 1);
+	return open;
+}
+const VALUE_CLASS = {
+	string: "text-emerald-600 dark:text-emerald-400",
+	number: "text-sky-600 dark:text-sky-400",
+	boolean: "text-violet-600 dark:text-violet-400",
+	null: "text-muted-foreground",
+	other: "text-muted-foreground",
+	object: "text-muted-foreground",
+	array: "text-muted-foreground"
+};
+function JsonViewer({ value, rootName = "root", defaultExpandedDepth = 1, maxStringLength = 120, copyable = true, label = "JSON", className, ...rootProps }) {
+	const [expanded, setExpanded] = React$1.useState(() => pathsToDepth(value, rootName, defaultExpandedDepth));
+	const [copied, setCopied] = React$1.useState(null);
+	const [activePath, setActivePath] = React$1.useState(null);
+	const containerRef = React$1.useRef(null);
+	const timer = React$1.useRef(null);
+	React$1.useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const rows = React$1.useMemo(() => flatten(value, expanded, rootName), [
+		value,
+		expanded,
+		rootName
+	]);
+	const active = activePath && rows.some((row) => row.path === activePath) ? activePath : rows[0]?.path;
+	const toggle = (path, open) => {
+		setExpanded((current) => {
+			const shouldOpen = open ?? !current.has(path);
+			if (shouldOpen === current.has(path)) return current;
+			const next = new Set(current);
+			if (shouldOpen) next.add(path);
+			else next.delete(path);
+			return next;
+		});
+	};
+	const focusRow = (index) => {
+		const target = rows[index];
+		if (!target) return;
+		setActivePath(target.path);
+		containerRef.current?.querySelector(`[data-path="${CSS.escape(target.path)}"]`)?.focus();
+	};
+	async function copyValue(row) {
+		try {
+			await navigator.clipboard.writeText(typeof row.value === "string" ? row.value : JSON.stringify(row.value, null, 2));
+			setCopied(row.path);
+		} catch {
+			setCopied(null);
+		}
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => setCopied(null), 1400);
+	}
+	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.branch && !row.expanded) toggle(row.path, true);
+				else if (row.branch) focusRow(index + 1);
+				break;
+			case "ArrowLeft": {
+				event.preventDefault();
+				if (row.branch && row.expanded) {
+					toggle(row.path, false);
+					break;
+				}
+				const back = rows.slice(0, index).reverse().findIndex((entry) => entry.level < row.level);
+				if (back >= 0) focusRow(index - 1 - back);
+				break;
+			}
+			case "Home":
+				event.preventDefault();
+				focusRow(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusRow(rows.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				if (!row.branch) break;
+				event.preventDefault();
+				toggle(row.path);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "json-viewer",
+		ref: containerRef,
+		className: cn("border-border bg-muted/40 min-w-0 overflow-hidden rounded-[calc(var(--radius)+0.15rem)] border font-mono text-xs", className),
+		...rootProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tree",
+			"aria-label": label,
+			className: "max-h-96 overflow-auto py-1",
+			children: rows.map((row, index) => {
+				const preview = row.kind === "string" ? JSON.stringify(row.value).length > maxStringLength ? `${JSON.stringify(row.value).slice(0, maxStringLength)}…"` : JSON.stringify(row.value) : row.branch || row.kind === "object" || row.kind === "array" ? summarise(row.value, row.kind) : String(row.value);
+				return /* @__PURE__ */ jsxs("div", {
+					"data-path": row.path,
+					role: "treeitem",
+					"aria-level": row.level,
+					"aria-expanded": row.branch ? row.expanded : void 0,
+					"aria-selected": row.path === active,
+					tabIndex: row.path === active ? 0 : -1,
+					onFocus: () => setActivePath(row.path),
+					onKeyDown: (event) => onKeyDown(event, row, index),
+					onClick: () => row.branch && toggle(row.path),
+					style: { paddingInlineStart: `${row.level * .85}rem` },
+					className: cn("group hover:bg-muted/70 focus-visible:ring-ring flex min-h-7 items-center gap-1.5 pr-2 focus-visible:ring-2 focus-visible:outline-none", row.branch && "cursor-pointer"),
+					children: [
+						/* @__PURE__ */ jsx(ChevronRight, {
+							"aria-hidden": "true",
+							size: 13,
+							className: cn("text-muted-foreground shrink-0 transition-transform motion-reduce:transition-none", !row.branch && "invisible", row.expanded && "rotate-90")
+						}),
+						row.key !== null ? /* @__PURE__ */ jsx("span", {
+							className: "text-foreground shrink-0",
+							children: row.index === null ? `${row.key}:` : `${row.index}:`
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground shrink-0",
+							children: rootName
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("truncate", VALUE_CLASS[row.kind]),
+							children: preview
+						}),
+						copyable ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": copied === row.path ? "Copied" : `Copy ${row.path}`,
+							onClick: (event) => {
+								event.stopPropagation();
+								copyValue(row);
+							},
+							className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-auto hidden size-6 shrink-0 items-center justify-center rounded group-focus-within:flex group-hover:flex focus-visible:ring-2 focus-visible:outline-none",
+							children: copied === row.path ? /* @__PURE__ */ jsx(Check, {
+								"aria-hidden": "true",
+								size: 12
+							}) : /* @__PURE__ */ jsx(Clipboard, {
+								"aria-hidden": "true",
+								size: 12
+							})
+						}) : null
+					]
+				}, row.path);
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			children: copied ? `${copied} copied to clipboard.` : ""
+		})]
+	});
+}
+export { JsonViewer };

package/dist/widgets/index.d.mts

@@ -32,6 +32,7 @@ import { Dropzone, formatSize } from "./dropzone.mjs";
 import { LightboxActions, LightboxBackdrop, LightboxCaptions, LightboxChangeReason, LightboxClose, LightboxContent, LightboxControl, LightboxControlContext, LightboxCounter, LightboxDownload, LightboxImageChangeEventDetails, LightboxImageItem, LightboxItem, LightboxMore, LightboxNext, LightboxOpenEventDetails, LightboxPrevious, LightboxProps, LightboxSlide, LightboxSlides, LightboxThumbnail, LightboxThumbnails, LightboxToolbar, LightboxTrigger, LightboxTriggerProps, LightboxVideoItem, LightboxViewport, LightboxZoom, LightboxZoomButton, useLightbox } from "../vendor/tailored/lightbox.mjs";
 import { Carousel, Image, ImageProps, Lightbox } from "./multimedia.mjs";
 import { Pagination } from "./pagination.mjs";
+import { Form } from "../vendor/coss/form.mjs";
 import { Badge } from "../vendor/shadcn/badge.mjs";
 import { Switch } from "../vendor/shadcn/switch.mjs";
 import { Spinner } from "../vendor/shadcn/spinner.mjs";
@@ -39,8 +40,9 @@ import { Skeleton } from "../vendor/shadcn/skeleton.mjs";
 import { Checkbox } from "../vendor/shadcn/checkbox.mjs";
 import { Textarea } from "../vendor/shadcn/textarea.mjs";
 import { ScrollArea } from "../vendor/coss/scroll-area.mjs";
-import { Form } from "../vendor/coss/form.mjs";
 import { IconSwap } from "../vendor/tailored/icon-swap.mjs";
+import { JsonViewer } from "../vendor/tailored/json-viewer.mjs";
+import { FileTree, FileTreeNode } from "../vendor/tailored/file-tree.mjs";
 export declare const Kbd: typeof Kbd$1 & {
   Group: typeof KbdGroup;
 };
@@ -185,4 +187,4 @@ export declare const InputGroup: typeof InputGroup$1 & {
   Textarea: typeof InputGroupTextarea;
   Button: typeof InputGroupButton;
 };
-export { type AlertDialogHandle, Badge, Button, Carousel, Checkbox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, type DialogHandle, type DrawerHandle, Dropzone, Form, IconSwap, Image, ImageProps, Input, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, ScrollArea, Separator, Sidebar, Skeleton, Spinner, Switch, Textarea, TimePicker, Toaster as ToastProvider, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, formatSize, toast, type useLightbox, useSidebar };
+export { type AlertDialogHandle, Badge, Button, Carousel, Checkbox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, type DialogHandle, type DrawerHandle, Dropzone, FileTree, type FileTreeNode, Form, IconSwap, Image, ImageProps, Input, JsonViewer, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, ScrollArea, Separator, Sidebar, Skeleton, Spinner, Switch, Textarea, TimePicker, Toaster as ToastProvider, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, formatSize, toast, type useLightbox, useSidebar };

package/dist/widgets/index.mjs

@@ -32,12 +32,14 @@ import { DatePicker, DateRangePicker, TimePicker } from "./datetime.mjs";
 import { Dropzone, formatSize } from "./dropzone.mjs";
 import { Carousel, Image, Lightbox } from "./multimedia.mjs";
 import { Pagination } from "./pagination.mjs";
+import { Form } from "../vendor/coss/form.mjs";
 import { Badge } from "../vendor/shadcn/badge.mjs";
 import { Switch } from "../vendor/shadcn/switch.mjs";
 import { Checkbox } from "../vendor/shadcn/checkbox.mjs";
 import { ScrollArea } from "../vendor/coss/scroll-area.mjs";
-import { Form } from "../vendor/coss/form.mjs";
 import { IconSwap } from "../vendor/tailored/icon-swap.mjs";
+import { JsonViewer } from "../vendor/tailored/json-viewer.mjs";
+import { FileTree } from "../vendor/tailored/file-tree.mjs";
 // src/widgets/index.ts
 const Kbd = /* @__PURE__ */ Object.assign(Kbd$1, { Group: KbdGroup });
 const Tabs = /* @__PURE__ */ Object.assign(Tabs$1, {
@@ -177,4 +179,4 @@ const InputGroup = /* @__PURE__ */ Object.assign(InputGroup$1, {
 	Textarea: InputGroupTextarea,
 	Button: InputGroupButton
 });
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, IconSwap, Image, Input, InputGroup, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, formatSize, toast, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, FileTree, Form, IconSwap, Image, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, formatSize, toast, useSidebar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -33,28 +33,29 @@
     "fix": "vp check --fix"
   },
   "dependencies": {
-    "@base-ui/react": "^1.9.0",
     "@daypicker/react": "^10.0.2",
     "@fontsource-variable/inter": "^5.3.0",
     "class-variance-authority": "^0.7.1",
-    "cn": "^0.5.0",
+    "cn": "^0.5.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^1.62.0",
-    "motion": "^14.7.1",
-    "radashi": "^12.9.7",
+    "lucide-react": "^1.66.0",
+    "motion": "^14.9.0",
+    "radashi": "^13.0.1",
     "react-dropzone": "^20.1.4",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@base-ui/react": "^1.9.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "shadcn": "^4.22.2",
+    "shadcn": "^4.23.0",
     "vite-plus": "catalog:"
   },
   "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19",
-    "tailwindcss": "^4"
+    "@base-ui/react": "^1.9.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0"
   }
 }