@deftui/react 0.3.0 → 0.3.2

package/dist/vendor/reui.io/frame.d.mts

@@ -0,0 +1,22 @@
+import { VariantProps } from "class-variance-authority";
+/**
+ * Frame sets --frame-panel-bg and --frame-panel-border-color; FramePanel reads
+ * them back as bg-(--frame-panel-bg) and border-(--frame-panel-border-color).
+ * So variant="inverse" re-points every panel from one place, and a consumer's
+ * own bg-* on a panel still wins on source order, with no :not() and no `!`.
+ */
+declare const frameVariants: (props?: ({
+  variant?: "default" | "ghost" | "inverse" | null | undefined;
+  spacing?: "default" | "lg" | "sm" | "xs" | null | undefined;
+  stacked?: boolean | null | undefined;
+  dense?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Frame({ className, variant, spacing, stacked, dense, ...props }: React.ComponentProps<"div"> & VariantProps<typeof frameVariants>): import("react").JSX.Element;
+declare function FramePanel({ className, fit, ...props }: React.ComponentProps<"div"> & {
+  fit?: boolean;
+}): import("react").JSX.Element;
+declare function FrameHeader({ className, ...props }: React.ComponentProps<"header">): import("react").JSX.Element;
+declare function FrameTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FrameDescription({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FrameFooter({ className, ...props }: React.ComponentProps<"footer">): import("react").JSX.Element;
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, frameVariants };

package/dist/vendor/reui.io/frame.mjs

@@ -0,0 +1,106 @@
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+// src/vendor/reui.io/frame.tsx
+/**
+* Frame sets --frame-panel-bg and --frame-panel-border-color; FramePanel reads
+* them back as bg-(--frame-panel-bg) and border-(--frame-panel-border-color).
+* So variant="inverse" re-points every panel from one place, and a consumer's
+* own bg-* on a panel still wins on source order, with no :not() and no `!`.
+*/
+const frameVariants = cva([
+	"relative flex flex-col bg-muted/50 gap-(--frame-gap) px-(--frame-px) py-(--frame-py) rounded-(--frame-radius)",
+	"[--frame-radius:var(--radius-xl)]",
+	"[--frame-gap:--spacing(0.75)] [--frame-px:--spacing(0.75)] [--frame-py:--spacing(0.75)] [--frame-panel-header-gap:0rem] [--frame-panel-footer-gap:--spacing(1)]",
+	"[--frame-panel-px-adjust:0px] [--frame-panel-py-adjust:0px] [--frame-panel-header-px-adjust:0px] [--frame-panel-header-py-adjust:0px] [--frame-panel-footer-px-adjust:0px] [--frame-panel-footer-py-adjust:0px]",
+	"[--frame-panel-px:calc(var(--frame-panel-px-base)+var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)+var(--frame-panel-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)+var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)+var(--frame-panel-header-py-adjust))] [--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)+var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)+var(--frame-panel-footer-py-adjust))]",
+	"",
+	"[--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)] [--frame-border-color:var(--color-border)]",
+	"[--frame-panel-radius:calc(var(--frame-radius)-var(--frame-px)-1px)]"
+], {
+	variants: {
+		variant: {
+			default: "border border-[var(--frame-border-color)] bg-clip-padding",
+			inverse: "[--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)] border border-[var(--frame-border-color)] bg-background bg-clip-padding",
+			ghost: "[--frame-panel-radius:calc(var(--frame-radius)-var(--frame-px))]"
+		},
+		spacing: {
+			xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(0.5)]",
+			sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(1.5)]",
+			default: "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(2)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(2)]",
+			lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(2.5)]"
+		},
+		stacked: {
+			true: [
+				"gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none",
+				"*:has-[+[data-slot=frame-panel]]:before:hidden",
+				"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none",
+				"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0"
+			],
+			false: [
+				"data-[spacing=sm]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-0.5",
+				"data-[spacing=default]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+				"data-[spacing=lg]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-2"
+			]
+		},
+		dense: {
+			true: "p-0 gap-0 border-[var(--frame-border-color)] [--frame-panel-radius:var(--frame-radius)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		spacing: "default",
+		stacked: false,
+		dense: false
+	}
+});
+function Frame({ className, variant, spacing, stacked, dense, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(frameVariants({
+			variant,
+			spacing,
+			stacked,
+			dense
+		}), className),
+		"data-slot": "frame",
+		"data-spacing": spacing,
+		...props
+	});
+}
+function FramePanel({ className, fit, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative overflow-hidden rounded-(--frame-panel-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs", !fit && "grow", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-panel-radius)-1px)] before:shadow-black/5", "dark:bg-clip-border dark:before:shadow-white/5", "px-(--frame-panel-px) py-(--frame-panel-py)", className),
+		"data-slot": "frame-panel",
+		...props
+	});
+}
+function FrameHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("flex flex-col gap-(--frame-panel-header-gap) px-(--frame-panel-header-px) py-(--frame-panel-header-py)", className),
+		"data-slot": "frame-panel-header",
+		...props
+	});
+}
+function FrameTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-sm font-semibold", className),
+		"data-slot": "frame-panel-title",
+		...props
+	});
+}
+function FrameDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "frame-panel-description",
+		...props
+	});
+}
+function FrameFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn("flex flex-col gap-(--frame-panel-footer-gap) px-(--frame-panel-footer-px) py-(--frame-panel-footer-py)", className),
+		"data-slot": "frame-panel-footer",
+		...props
+	});
+}
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, frameVariants };

package/dist/vendor/reui.io/timeline.d.mts

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react/use-render";
+interface TimelineProps extends useRender.ComponentProps<"div"> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
+}
+declare function Timeline({ defaultValue, value, onValueChange, orientation, className, render, children, ...props }: TimelineProps): import("react").JSX.Element;
+declare function TimelineContent({ className, render, children, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type TimelineDateProps = useRender.ComponentProps<"time">;
+declare function TimelineDate({ className, render, children, ...props }: TimelineDateProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function TimelineHeader({ className, render, children, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type TimelineIndicatorProps = useRender.ComponentProps<"div">;
+declare function TimelineIndicator({ className, children, render, ...props }: TimelineIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+interface TimelineItemProps extends useRender.ComponentProps<"div"> {
+  step: number;
+}
+declare function TimelineItem({ step, className, render, children, ...props }: TimelineItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function TimelineSeparator({ className, render, children, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function TimelineTitle({ className, render, children, ...props }: useRender.ComponentProps<"h3">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle };

package/dist/vendor/reui.io/timeline.mjs

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createContext, useCallback, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+// src/vendor/reui.io/timeline.tsx
+const TimelineContext = createContext(void 0);
+const useTimeline = () => {
+	const context = useContext(TimelineContext);
+	if (!context) throw new Error("useTimeline must be used within a Timeline");
+	return context;
+};
+function Timeline({ defaultValue = 1, value, onValueChange, orientation = "vertical", className, render, children, ...props }) {
+	const [activeStep, setInternalStep] = useState(defaultValue);
+	const setActiveStep = useCallback((step) => {
+		if (value === void 0) setInternalStep(step);
+		onValueChange?.(step);
+	}, [value, onValueChange]);
+	const currentStep = value ?? activeStep;
+	const defaultProps = {
+		className: cn("group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col", className),
+		"data-orientation": orientation,
+		"data-slot": "timeline",
+		children
+	};
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: {
+			activeStep: currentStep,
+			setActiveStep
+		},
+		children: useRender({
+			defaultTagName: "div",
+			render,
+			props: mergeProps(defaultProps, props)
+		})
+	});
+}
+function TimelineContent({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "timeline-content",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineDate({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("mb-1 block font-medium text-muted-foreground text-xs group-data-[orientation=vertical]/timeline:max-sm:h-4", className),
+		"data-slot": "timeline-date",
+		children
+	};
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineHeader({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn(className),
+		"data-slot": "timeline-header",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineIndicator({ className, children, render, ...props }) {
+	const defaultProps = {
+		"aria-hidden": true,
+		className: cn("group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:left-0 group-data-completed/timeline-item:border-primary", className),
+		"data-slot": "timeline-indicator",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineItem({ step, className, render, children, ...props }) {
+	const { activeStep } = useTimeline();
+	const defaultProps = {
+		className: cn("group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:not-last:pb-6 has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary", className),
+		"data-completed": step <= activeStep || void 0,
+		"data-slot": "timeline-item",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineSeparator({ className, render, children, ...props }) {
+	const defaultProps = {
+		"aria-hidden": true,
+		className: cn("group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=vertical]/timeline:translate-y-4.5", className),
+		"data-slot": "timeline-separator",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TimelineTitle({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("font-medium text-sm", className),
+		"data-slot": "timeline-title",
+		children
+	};
+	return useRender({
+		defaultTagName: "h3",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle };

package/dist/widgets/datetime.mjs

@@ -6,7 +6,6 @@ import { cn } from "cn";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CalendarIcon } from "lucide-react";
-import { enUS, zhCN } from "@daypicker/react/locale";
 import { format } from "date-fns";
 // src/widgets/datetime.tsx
 function TimePicker({ className, step = "1", ...props }) {
@@ -19,7 +18,6 @@ function TimePicker({ className, step = "1", ...props }) {
 }
 function DatePicker({ value, defaultValue = null, placeholder = "请选择日期", disabled, onChange, className, calendarProps, ...props }) {
 	const [internalValue, setInternalValue] = useState(defaultValue);
-	const locale = navigator.language.startsWith("zh") ? zhCN : enUS;
 	const date = value === void 0 ? internalValue : value;
 	function handleSelect(selected) {
 		const nextValue = selected ?? null;
@@ -36,7 +34,6 @@ function DatePicker({ value, defaultValue = null, placeholder = "请选择日期
 		}),
 		children: [/* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }), date ? format(date, "PPP") : placeholder]
 	}), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(Calendar, {
-		locale,
 		defaultMonth: date ?? void 0,
 		...calendarProps,
 		disabled: disabled || calendarProps?.disabled,
@@ -47,7 +44,6 @@ function DatePicker({ value, defaultValue = null, placeholder = "请选择日期
 }
 function DateRangePicker({ value, defaultValue = null, placeholder = "请选择日期范围", disabled, onChange, className, calendarProps, ...props }) {
 	const [internalValue, setInternalValue] = useState(defaultValue);
-	const locale = navigator.language.startsWith("zh") ? zhCN : enUS;
 	const date = value === void 0 ? internalValue : value;
 	function handleSelect(selected) {
 		const nextValue = selected ?? null;
@@ -68,7 +64,6 @@ function DateRangePicker({ value, defaultValue = null, placeholder = "请选择
 			date?.to && /* @__PURE__ */ jsxs(Fragment, { children: [" - ", format(date.to, "LLL dd, y")] })
 		]
 	}), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(Calendar, {
-		locale,
 		defaultMonth: date?.from,
 		...calendarProps,
 		disabled: disabled || calendarProps?.disabled,

package/dist/widgets/export.d.mts

@@ -0,0 +1,28 @@
+import "./toast.mjs";
+import { Sidebar } from "./sidebar.mjs";
+import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./datetime.mjs";
+import { Dropzone, formatBytes, useDropzone } from "./dropzone.mjs";
+import { Carousel, Image, ImageProps, Lightbox } from "./multimedia.mjs";
+import { Toaster, toast } from "../vendor/shadcn/toast.mjs";
+import { Pagination } from "./pagination.mjs";
+import { Label } from "../vendor/shadcn/label.mjs";
+import { useSidebar } from "../vendor/shadcn/sidebar.mjs";
+import { Input } from "../vendor/shadcn/input.mjs";
+import { Badge } from "../vendor/shadcn/badge.mjs";
+import { Button } from "../vendor/shadcn/button.mjs";
+import { Switch } from "../vendor/shadcn/switch.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 { Spinner } from "../vendor/shadcn/spinner.mjs";
+import { Skeleton } from "../vendor/shadcn/skeleton.mjs";
+import { Checkbox } from "../vendor/shadcn/checkbox.mjs";
+import { Textarea } from "../vendor/shadcn/textarea.mjs";
+import { Separator } from "../vendor/shadcn/separator.mjs";
+import { Form } from "../vendor/coss/form.mjs";
+import { Calendar } from "../vendor/coss/calendar.mjs";
+import { ScrollArea } from "../vendor/coss/scroll-area.mjs";
+import { IconSwap } from "../vendor/tailored/icon-swap.mjs";
+import { JsonViewer } from "../vendor/tailored/json-viewer.mjs";
+import { CascaderProps, CascaderSingleProps } from "../vendor/reui.io/cascader/cascader.mjs";
+import { CascaderChangeDetails, CascaderLabels, CascaderMode, CascaderNode } from "../vendor/reui.io/cascader/cascader-types.mjs";
+export * from "react-dropzone";
+export { Badge, Button, Calendar, Carousel, type CascaderChangeDetails, type CascaderLabels, type CascaderMode, type CascaderNode, type CascaderProps, type CascaderSingleProps, Checkbox, DatePicker, type DateRange, DateRangePicker, Dropzone, 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, formatBytes, toast, useDropzone, type useLightbox, useSidebar };

package/dist/widgets/index.d.mts

@@ -1,14 +1,25 @@
 import { AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPrimitive, AlertDialogTitle, AlertDialogTrigger } from "../vendor/coss/alert-dialog.mjs";
-import { Card as Card$1, CardAction, CardContent as CardPanel, CardDescription, CardFooter, CardFrame, CardFrameAction, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle } from "../vendor/coss/card.mjs";
+import { Card as Card$1, CardAction, CardContent as CardPanel, CardDescription, CardFooter, CardHeader, CardTitle } from "../vendor/coss/card.mjs";
 import { DialogClose, DialogContent as DialogPopup, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPrimitive, DialogTitle, DialogTrigger } from "../vendor/coss/dialog.mjs";
 import { Drawer as Drawer$1, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, DrawerTrigger } from "../vendor/coss/drawer.mjs";
 import { Empty as Empty$1, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../vendor/coss/empty.mjs";
 import { Table as Table$1, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../vendor/coss/table.mjs";
+import { CascaderChangeDetails, CascaderLabels, CascaderMode, CascaderNode } from "../vendor/reui.io/cascader/cascader-types.mjs";
+import { Cascader as Cascader$1, CascaderChip, CascaderChips, CascaderContent, CascaderEmpty, CascaderList, CascaderPanel, CascaderProps, CascaderSingleProps, CascaderStatus, CascaderTrigger } from "../vendor/reui.io/cascader/cascader.mjs";
+import { CascaderAction, CascaderFooter, CascaderSubmenu, CascaderSubmenuContent, CascaderSubmenuTrigger } from "../vendor/reui.io/cascader/cascader-footer.mjs";
+import { CascaderGroup, CascaderItemProps, CascaderItems, CascaderLabel, CascaderSeparator } from "../vendor/reui.io/cascader/cascader-item.mjs";
+import { CascaderBack, CascaderBreadcrumb, CascaderInput, CascaderNav, CascaderValue } from "../vendor/reui.io/cascader/cascader-nav.mjs";
+import { CascaderVirtualItems } from "../vendor/reui.io/cascader/cascader-virtual.mjs";
+import { Frame as Frame$1, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "../vendor/reui.io/frame.mjs";
+import { Timeline as Timeline$1, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from "../vendor/reui.io/timeline.mjs";
 import { Breadcrumb as Breadcrumb$1, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../vendor/shadcn/breadcrumb.mjs";
+import { Separator } from "../vendor/shadcn/separator.mjs";
 import { ButtonGroup as ButtonGroup$1, ButtonGroupSeparator, ButtonGroupText } from "../vendor/shadcn/button-group.mjs";
 import { ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxValue } from "../vendor/shadcn/combobox.mjs";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../vendor/shadcn/dropdown-menu.mjs";
+import { Label } from "../vendor/shadcn/label.mjs";
 import { Field as Field$1, FieldDescription, FieldError, FieldLabel } from "../vendor/shadcn/field.mjs";
+import { Button } from "../vendor/shadcn/button.mjs";
 import { InputGroup as InputGroup$1, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "../vendor/shadcn/input-group.mjs";
 import { Kbd as Kbd$1, KbdGroup } from "../vendor/shadcn/kbd.mjs";
 import { Popover as Popover$1, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "../vendor/shadcn/popover.mjs";
@@ -17,31 +28,27 @@ import { RadioGroup, RadioGroupItem } from "../vendor/shadcn/radio-group.mjs";
 import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "../vendor/shadcn/select.mjs";
 import { Tabs as Tabs$1, TabsContent, TabsList, TabsTrigger } from "../vendor/shadcn/tabs.mjs";
 import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../vendor/shadcn/tooltip.mjs";
-import "./toast.mjs";
+import { Toaster, toast } from "../vendor/shadcn/toast.mjs";
+import { Input } from "../vendor/shadcn/input.mjs";
+import { useSidebar } from "../vendor/shadcn/sidebar.mjs";
 import { Sidebar } from "./sidebar.mjs";
+import { Calendar } from "../vendor/coss/calendar.mjs";
 import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./datetime.mjs";
-import { Toaster, toast } from "../vendor/shadcn/toast.mjs";
 import { Dropzone, formatBytes, useDropzone } 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 { useSidebar } from "../vendor/shadcn/sidebar.mjs";
 import { Pagination } from "./pagination.mjs";
-import { Label } from "../vendor/shadcn/label.mjs";
-import { Input } from "../vendor/shadcn/input.mjs";
 import { Badge } from "../vendor/shadcn/badge.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 { Button } from "../vendor/shadcn/button.mjs";
 import { Switch } from "../vendor/shadcn/switch.mjs";
 import { Spinner } from "../vendor/shadcn/spinner.mjs";
 import { Skeleton } from "../vendor/shadcn/skeleton.mjs";
 import { Checkbox } from "../vendor/shadcn/checkbox.mjs";
 import { Textarea } from "../vendor/shadcn/textarea.mjs";
-import { Separator } from "../vendor/shadcn/separator.mjs";
 import { Form } from "../vendor/coss/form.mjs";
-import { Calendar } from "../vendor/coss/calendar.mjs";
 import { ScrollArea } from "../vendor/coss/scroll-area.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 "./export.mjs";
 export * from "react-dropzone";
 /** https://ui.shadcn.com/docs/components/base/kbd */
 export declare const Kbd: typeof Kbd$1 & {
@@ -62,13 +69,13 @@ export declare const Card: typeof Card$1 & {
   Action: typeof CardAction;
   Description: typeof CardDescription;
 };
-/** https://coss.com/ui/docs/components/card#cardframe */
-export declare const Frame: typeof CardFrame & {
-  Header: typeof CardFrameHeader;
-  Footer: typeof CardFrameFooter;
-  Title: typeof CardFrameTitle;
-  Description: typeof CardFrameDescription;
-  Action: typeof CardFrameAction;
+/** https://reui.io/docs/components/base/frame */
+export declare const Frame: typeof Frame$1 & {
+  Header: typeof FrameHeader;
+  Panel: typeof FramePanel;
+  Footer: typeof FrameFooter;
+  Title: typeof FrameTitle;
+  Description: typeof FrameDescription;
 };
 /** https://ui.shadcn.com/docs/components/base/field */
 export declare const Field: typeof Field$1 & {
@@ -143,6 +150,34 @@ export declare const Popover: typeof Popover$1 & {
   Title: typeof PopoverTitle;
   Description: typeof PopoverDescription;
 };
+/** https://reui.io/docs/components/cascader */
+export declare const Cascader: typeof Cascader$1 & {
+  Trigger: typeof CascaderTrigger;
+  Popup: typeof CascaderContent;
+  Panel: typeof CascaderPanel;
+  List: typeof CascaderList;
+  Empty: typeof CascaderEmpty;
+  Status: typeof CascaderStatus;
+  Chips: typeof CascaderChips;
+  Chip: typeof CascaderChip;
+  Nav: typeof CascaderNav;
+  Back: typeof CascaderBack;
+  Breadcrumb: typeof CascaderBreadcrumb;
+  Input: typeof CascaderInput;
+  Value: typeof CascaderValue;
+  Item: import("react").MemoExoticComponent<({ node, index, depth, showPath, as, expanded, indent, branch: branchProp, selectable: selectableProp, selected: selectedProp, indeterminate: indeterminateProp, selectedCount: selectedCountProp, loading, error, childrenLoading, childrenError, className, children, onClick, onMouseUp, style, ...props }: CascaderItemProps) => import("react").JSX.Element>;
+  Items: typeof CascaderItems;
+  Group: typeof CascaderGroup;
+  Label: typeof CascaderLabel;
+  Separator: typeof CascaderSeparator;
+  Footer: typeof CascaderFooter;
+  Action: typeof CascaderAction;
+  Submenu: typeof CascaderSubmenu;
+  SubmenuTrigger: typeof CascaderSubmenuTrigger;
+  SubmenuContent: typeof CascaderSubmenuContent;
+  /** Windowed replacement for `Items` inside `List`. */
+  VirtualItems: typeof CascaderVirtualItems;
+};
 /** https://ui.shadcn.com/docs/components/base/dropdown-menu */
 export declare const Dropdown: typeof DropdownMenu & {
   Trigger: typeof DropdownMenuTrigger;
@@ -182,6 +217,16 @@ export declare const Progress: typeof Progress$1 & {
   Track: typeof ProgressTrack;
   Indicator: typeof ProgressIndicator;
 };
+/** https://reui.io/docs/components/timeline */
+export declare const Timeline: typeof Timeline$1 & {
+  Item: typeof TimelineItem;
+  Header: typeof TimelineHeader;
+  Content: typeof TimelineContent;
+  Indicator: typeof TimelineIndicator;
+  Separator: typeof TimelineSeparator;
+  Date: typeof TimelineDate;
+  Title: typeof TimelineTitle;
+};
 /** https://ui.shadcn.com/docs/components/base/breadcrumb */
 export declare const Breadcrumb: typeof Breadcrumb$1 & {
   List: typeof BreadcrumbList;
@@ -214,4 +259,4 @@ export declare const InputGroup: typeof InputGroup$1 & {
   Textarea: typeof InputGroupTextarea;
   Button: typeof InputGroupButton;
 };
-export { Badge, Button, Calendar, Carousel, Checkbox, DatePicker, type DateRange, DateRangePicker, 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, formatBytes, toast, useDropzone, type useLightbox, useSidebar };
+export { Badge, Button, Calendar, Carousel, type CascaderChangeDetails, type CascaderLabels, type CascaderMode, type CascaderNode, type CascaderProps, type CascaderSingleProps, Checkbox, DatePicker, type DateRange, DateRangePicker, Dropzone, 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, formatBytes, toast, useDropzone, type useLightbox, useSidebar };

package/dist/widgets/index.mjs

@@ -1,5 +1,5 @@
 import { AlertDialog as AlertDialog$1, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../vendor/coss/alert-dialog.mjs";
-import { Card as Card$1, CardAction, CardContent as CardPanel, CardDescription, CardFooter, CardFrame, CardFrameAction, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle } from "../vendor/coss/card.mjs";
+import { Card as Card$1, CardAction, CardContent as CardPanel, CardDescription, CardFooter, CardHeader, CardTitle } from "../vendor/coss/card.mjs";
 import { Spinner } from "../vendor/shadcn/spinner.mjs";
 import { Button } from "../vendor/shadcn/button.mjs";
 import { ScrollArea } from "../vendor/coss/scroll-area.mjs";
@@ -7,6 +7,13 @@ import { Dialog as Dialog$1, DialogClose, DialogContent as DialogPopup, DialogDe
 import { Drawer as Drawer$1, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, DrawerTrigger } from "../vendor/coss/drawer.mjs";
 import { Empty as Empty$1, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../vendor/coss/empty.mjs";
 import { Table as Table$1, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../vendor/coss/table.mjs";
+import { Cascader as Cascader$1, CascaderChip, CascaderChips, CascaderContent, CascaderEmpty, CascaderList, CascaderPanel, CascaderStatus, CascaderTrigger } from "../vendor/reui.io/cascader/cascader.mjs";
+import { CascaderAction, CascaderFooter, CascaderSubmenu, CascaderSubmenuContent, CascaderSubmenuTrigger } from "../vendor/reui.io/cascader/cascader-footer.mjs";
+import { CascaderGroup, CascaderItem, CascaderItems, CascaderLabel, CascaderSeparator } from "../vendor/reui.io/cascader/cascader-item.mjs";
+import { CascaderBack, CascaderBreadcrumb, CascaderInput, CascaderNav, CascaderValue } from "../vendor/reui.io/cascader/cascader-nav.mjs";
+import { CascaderVirtualItems } from "../vendor/reui.io/cascader/cascader-virtual.mjs";
+import { Frame as Frame$1, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "../vendor/reui.io/frame.mjs";
+import { Timeline as Timeline$1, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from "../vendor/reui.io/timeline.mjs";
 import { Breadcrumb as Breadcrumb$1, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../vendor/shadcn/breadcrumb.mjs";
 import { Separator } from "../vendor/shadcn/separator.mjs";
 import { ButtonGroup as ButtonGroup$1, ButtonGroupSeparator, ButtonGroupText } from "../vendor/shadcn/button-group.mjs";
@@ -39,7 +46,6 @@ import { Checkbox } from "../vendor/shadcn/checkbox.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
 /** https://ui.shadcn.com/docs/components/base/kbd */
 const Kbd = /* @__PURE__ */ Object.assign(Kbd$1, { Group: KbdGroup });
@@ -58,13 +64,13 @@ const Card = /* @__PURE__ */ Object.assign(Card$1, {
 	Action: CardAction,
 	Description: CardDescription
 });
-/** https://coss.com/ui/docs/components/card#cardframe */
-const Frame = /* @__PURE__ */ Object.assign(CardFrame, {
-	Header: CardFrameHeader,
-	Footer: CardFrameFooter,
-	Title: CardFrameTitle,
-	Description: CardFrameDescription,
-	Action: CardFrameAction
+/** https://reui.io/docs/components/base/frame */
+const Frame = /* @__PURE__ */ Object.assign(Frame$1, {
+	Header: FrameHeader,
+	Panel: FramePanel,
+	Footer: FrameFooter,
+	Title: FrameTitle,
+	Description: FrameDescription
 });
 /** https://ui.shadcn.com/docs/components/base/field */
 const Field = /* @__PURE__ */ Object.assign(Field$1, {
@@ -137,6 +143,34 @@ const Popover = /* @__PURE__ */ Object.assign(Popover$1, {
 	Title: PopoverTitle,
 	Description: PopoverDescription
 });
+/** https://reui.io/docs/components/cascader */
+const Cascader = /* @__PURE__ */ Object.assign(Cascader$1, {
+	Trigger: CascaderTrigger,
+	Popup: CascaderContent,
+	Panel: CascaderPanel,
+	List: CascaderList,
+	Empty: CascaderEmpty,
+	Status: CascaderStatus,
+	Chips: CascaderChips,
+	Chip: CascaderChip,
+	Nav: CascaderNav,
+	Back: CascaderBack,
+	Breadcrumb: CascaderBreadcrumb,
+	Input: CascaderInput,
+	Value: CascaderValue,
+	Item: CascaderItem,
+	Items: CascaderItems,
+	Group: CascaderGroup,
+	Label: CascaderLabel,
+	Separator: CascaderSeparator,
+	Footer: CascaderFooter,
+	Action: CascaderAction,
+	Submenu: CascaderSubmenu,
+	SubmenuTrigger: CascaderSubmenuTrigger,
+	SubmenuContent: CascaderSubmenuContent,
+	/** Windowed replacement for `Items` inside `List`. */
+	VirtualItems: CascaderVirtualItems
+});
 /** https://ui.shadcn.com/docs/components/base/dropdown-menu */
 const Dropdown = /* @__PURE__ */ Object.assign(DropdownMenu, {
 	Trigger: DropdownMenuTrigger,
@@ -176,6 +210,16 @@ const Progress = /* @__PURE__ */ Object.assign(Progress$1, {
 	Track: ProgressTrack,
 	Indicator: ProgressIndicator
 });
+/** https://reui.io/docs/components/timeline */
+const Timeline = /* @__PURE__ */ Object.assign(Timeline$1, {
+	Item: TimelineItem,
+	Header: TimelineHeader,
+	Content: TimelineContent,
+	Indicator: TimelineIndicator,
+	Separator: TimelineSeparator,
+	Date: TimelineDate,
+	Title: TimelineTitle
+});
 /** https://ui.shadcn.com/docs/components/base/breadcrumb */
 const Breadcrumb = /* @__PURE__ */ Object.assign(Breadcrumb$1, {
 	List: BreadcrumbList,
@@ -208,4 +252,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, FileTree, Form, Frame, 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, formatBytes, toast, useDropzone, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, Frame, IconSwap, Image, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toaster as ToastProvider, Tooltip, formatBytes, toast, useDropzone, useSidebar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -45,7 +45,6 @@
     "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.23.0",
@@ -53,6 +52,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.9.0",
+    "@tanstack/react-virtual": "^3.14.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.3.0"