@deftui/react 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mjs";
 import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
-import { FileUploadProps, useFileUpload as useStore } from "./vendor/diceui/file-upload.mjs";
 import { Button } from "./vendor/shadcn/button.mjs";
 import { AlertDialogHandle, createAlertDialogHandle } from "./vendor/shadcn/alert-dialog.mjs";
 import { Separator } from "./vendor/shadcn/separator.mjs";
@@ -12,11 +11,11 @@ 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 "./widgets/sidebar.mjs";
-import { Breadcrumb } from "./widgets/breadcrumb.mjs";
-import { Pagination } from "./widgets/pagination.mjs";
+import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./widgets/datetime.mjs";
+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 { DatePicker, DateRange, DateRangePicker, TimePicker } from "./widgets/datetime-picker.mjs";
+import { Pagination } from "./widgets/pagination.mjs";
 import { Badge } from "./vendor/shadcn/badge.mjs";
 import { Switch } from "./vendor/shadcn/switch.mjs";
 import { Spinner } from "./vendor/shadcn/spinner.mjs";
@@ -26,8 +25,10 @@ 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 { AlertDialog, ButtonGroup, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, FileUpload, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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";
-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, Empty, Field, FileUpload, type FileUploadProps, 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, mergeProps, toast, useCopyToClipboard, useStore as useFileUpload, useIsMobile, type useLightbox, useMediaQuery, useSidebar };
+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 };

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mjs";
 import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
-import { useFileUpload as useStore } from "./vendor/diceui/file-upload.mjs";
 import { Spinner } from "./vendor/shadcn/spinner.mjs";
 import { Button } from "./vendor/shadcn/button.mjs";
 import { createAlertDialogHandle } from "./vendor/shadcn/alert-dialog.mjs";
@@ -15,18 +14,19 @@ import { Toaster, toast } from "./vendor/shadcn/toast.mjs";
 import { Skeleton } from "./vendor/shadcn/skeleton.mjs";
 import { useSidebar } from "./vendor/shadcn/sidebar.mjs";
 import { Sidebar } from "./widgets/sidebar.mjs";
-import { Breadcrumb } from "./widgets/breadcrumb.mjs";
-import { Pagination } from "./widgets/pagination.mjs";
+import { DatePicker, DateRangePicker, TimePicker } from "./widgets/datetime.mjs";
+import { Dropzone, formatSize } from "./widgets/dropzone.mjs";
 import { Carousel, Image, Lightbox } from "./widgets/multimedia.mjs";
-import { DatePicker, DateRangePicker, TimePicker } from "./widgets/datetime-picker.mjs";
+import { Pagination } from "./widgets/pagination.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 { AlertDialog, ButtonGroup, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, FileUpload, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Empty, Field, FileUpload, 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, mergeProps, toast, useCopyToClipboard, useStore as useFileUpload, useIsMobile, useMediaQuery, useSidebar };
+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 };

package/dist/vendor/README.md

@@ -16,7 +16,6 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `@coss/scroll-area` | [coss/scroll-area.tsx](coss/scroll-area.tsx) | [Scroll Area](https://coss.com/ui/docs/components/scroll-area) | — |
 | `@coss/use-copy-to-clipboard` | [coss/hooks/use-copy-to-clipboard.ts](coss/hooks/use-copy-to-clipboard.ts) | [useCopyToClipboard](https://coss.com/ui/docs/hooks/use-copy-to-clipboard) | — |
 | `@coss/use-media-query` | [coss/hooks/use-media-query.ts](coss/hooks/use-media-query.ts) | [useMediaQuery](https://coss.com/ui/docs/hooks/use-media-query) | 断点：`md` 设为 768px，与 Tailwind 默认值一致 |
-| `@diceui/file-upload` | [diceui/file-upload.tsx](diceui/file-upload.tsx) | [File Upload](https://diceui.com/docs/components/base/file-upload) | — |
 | `alert-dialog` | [shadcn/alert-dialog.tsx](shadcn/alert-dialog.tsx) | [Alert Dialog](https://ui.shadcn.com/docs/components/base/alert-dialog) | 额外导出 `createAlertDialogHandle` 及其类型 |
 | `badge` | [shadcn/badge.tsx](shadcn/badge.tsx) | [Badge](https://ui.shadcn.com/docs/components/base/badge) | 提供 `info`、`success`、`warning` 语义变体 |
 | `breadcrumb` | [shadcn/breadcrumb.tsx](shadcn/breadcrumb.tsx) | [Breadcrumb](https://ui.shadcn.com/docs/components/base/breadcrumb) | — |

package/dist/vendor/shadcn/breadcrumb.mjs

@@ -1,9 +1,9 @@
 import { cn } from "cn";
 import { mergeProps } from "@base-ui/react/merge-props";
 import "react";
-import { useRender } from "@base-ui/react/use-render";
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 // src/vendor/shadcn/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {

package/dist/vendor/shadcn/button-group.mjs

@@ -2,8 +2,8 @@ import { Separator } from "./separator.mjs";
 import { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 // src/vendor/shadcn/button-group.tsx
 const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
 	variants: { orientation: {

package/dist/vendor/shadcn/calendar.mjs

@@ -2,8 +2,8 @@
 import { Button, buttonVariants } from "./button.mjs";
 import { cn } from "cn";
 import * as React$1 from "react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { DayPicker, getDefaultClassNames } from "@daypicker/react";
 // src/vendor/shadcn/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {

package/dist/vendor/shadcn/carousel.mjs

@@ -2,8 +2,8 @@
 import { Button } from "./button.mjs";
 import { cn } from "cn";
 import * as React$1 from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import useEmblaCarousel from "embla-carousel-react";
 // src/vendor/shadcn/carousel.tsx
 const CarouselContext = React$1.createContext(null);

package/dist/vendor/shadcn/checkbox.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "cn";
-import { CheckIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
 // src/vendor/shadcn/checkbox.tsx
 function Checkbox$1({ className, ...props }) {

package/dist/vendor/shadcn/combobox.mjs

@@ -3,8 +3,8 @@ import { Button } from "./button.mjs";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
 import { cn } from "cn";
 import "react";
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { Combobox } from "@base-ui/react";
 // src/vendor/shadcn/combobox.tsx
 const Combobox$1 = Combobox.Root;

package/dist/vendor/shadcn/dialog.mjs

@@ -2,8 +2,8 @@
 import { Button } from "./button.mjs";
 import { cn } from "cn";
 import "react";
-import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
 import { Dialog } from "@base-ui/react/dialog";
 // src/vendor/shadcn/dialog.tsx
 function Dialog$1({ ...props }) {

package/dist/vendor/shadcn/dropdown-menu.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "cn";
 import "react";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { Menu } from "@base-ui/react/menu";
 // src/vendor/shadcn/dropdown-menu.tsx
 function DropdownMenu({ ...props }) {

package/dist/vendor/shadcn/pagination.mjs

@@ -1,8 +1,8 @@
 import { Button } from "./button.mjs";
 import { cn } from "cn";
 import "react";
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 // src/vendor/shadcn/pagination.tsx
 function Pagination({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {

package/dist/vendor/shadcn/select.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "cn";
 import "react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { Select } from "@base-ui/react/select";
 // src/vendor/shadcn/select.tsx
 const Select$1 = Select.Root;

package/dist/vendor/shadcn/sheet.mjs

@@ -2,8 +2,8 @@
 import { Button } from "./button.mjs";
 import { cn } from "cn";
 import "react";
-import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
 import { Dialog } from "@base-ui/react/dialog";
 // src/vendor/shadcn/sheet.tsx
 function Sheet({ ...props }) {

package/dist/vendor/shadcn/sidebar.mjs

@@ -9,9 +9,9 @@ import { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import * as React$1 from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { PanelLeftIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 // src/vendor/shadcn/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 604800;

package/dist/vendor/shadcn/spinner.mjs

@@ -1,6 +1,6 @@
 import { cn } from "cn";
-import { Loader2Icon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
 // src/vendor/shadcn/spinner.tsx
 function Spinner({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Loader2Icon, {

package/dist/vendor/shadcn/toast.mjs

@@ -2,8 +2,8 @@
 import { Button } from "./button.mjs";
 import { cn } from "cn";
 import "react";
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
 // src/vendor/shadcn/toast.tsx
 const toast = Toast.createToastManager();

package/dist/vendor/tailored/lightbox.mjs

@@ -6,9 +6,9 @@ import { Skeleton } from "../shadcn/skeleton.mjs";
 import { cn } from "cn";
 import { mergeProps } from "@base-ui/react/merge-props";
 import * as React$1 from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, EllipsisIcon, ImageOffIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, EllipsisIcon, ImageOffIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 import { Dialog } from "@base-ui/react/dialog";
 import { Menu } from "@base-ui/react/menu";
 import { animate, useReducedMotion } from "motion/react";

package/dist/widgets/{datetime-picker.mjs → datetime.mjs}

@@ -4,10 +4,10 @@ import { Input } from "../vendor/shadcn/input.mjs";
 import { Popover, PopoverContent, PopoverTrigger } from "../vendor/shadcn/popover.mjs";
 import { cn } from "cn";
 import { useState } from "react";
-import { CalendarIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
-// src/widgets/datetime-picker.tsx
+// src/widgets/datetime.tsx
 function TimePicker({ className, step = "1", ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
 		...props,

package/dist/widgets/dropzone.d.mts

@@ -0,0 +1,6 @@
+import { DropzoneOptions } from "react-dropzone";
+import { ComponentProps } from "react";
+type DropzoneProps = DropzoneOptions & Omit<ComponentProps<"div">, keyof DropzoneOptions>;
+export declare function formatSize(bytes: number): string;
+export declare function Dropzone({ accept, minSize, maxSize, maxFiles, multiple, disabled, preventDropOnDocument, noClick, noKeyboard, noDrag, noDragEventsBubbling, noPaste, onDrop, onDropAccepted, onDropRejected, onDragEnter, onDragOver, onDragLeave, getFilesFromEvent, onFileDialogCancel, onFileDialogOpen, onError, validator, getErrorMessage, useFsAccessApi, autoFocus, children, className, ref, ...props }: DropzoneProps): import("react").JSX.Element;
+export {};

package/dist/widgets/dropzone.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { buttonVariants } from "../vendor/shadcn/button.mjs";
+import { cn } from "cn";
+import { useDropzone } from "react-dropzone";
+import { useId, useImperativeHandle } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { UploadIcon } from "lucide-react";
+// src/widgets/dropzone.tsx
+function formatSize(bytes) {
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const index = bytes > 0 ? Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1) : 0;
+	return `${Number((bytes / 1024 ** index).toFixed(1))} ${units[index]}`;
+}
+function Dropzone({ accept, minSize, maxSize, maxFiles, multiple, disabled, preventDropOnDocument, noClick, noKeyboard, noDrag, noDragEventsBubbling, noPaste, onDrop, onDropAccepted, onDropRejected, onDragEnter, onDragOver, onDragLeave, getFilesFromEvent, onFileDialogCancel, onFileDialogOpen, onError, validator, getErrorMessage, useFsAccessApi, autoFocus, children, className, ref, ...props }) {
+	const { getRootProps, getInputProps, rootRef, isDragActive, isDragReject, isProcessing } = useDropzone({
+		accept,
+		minSize,
+		maxSize,
+		maxFiles,
+		multiple,
+		disabled,
+		preventDropOnDocument,
+		noClick,
+		noKeyboard,
+		noDrag,
+		noDragEventsBubbling,
+		noPaste,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		onDragEnter,
+		onDragOver,
+		onDragLeave,
+		getFilesFromEvent,
+		onFileDialogCancel,
+		onFileDialogOpen,
+		onError,
+		validator,
+		getErrorMessage,
+		useFsAccessApi,
+		autoFocus
+	});
+	useImperativeHandle(ref, () => rootRef.current);
+	const descriptionId = useId();
+	const limits = [multiple === false ? "单个文件" : maxFiles && maxFiles > 0 ? `最多 ${maxFiles} 个文件` : void 0, maxSize !== void 0 && Number.isFinite(maxSize) ? `每个不超过 ${formatSize(maxSize)}` : void 0].filter(Boolean);
+	return /* @__PURE__ */ jsxs("div", {
+		...getRootProps({
+			"role": "button",
+			"aria-label": children == null ? "选择文件" : void 0,
+			"data-slot": "dropzone",
+			"data-state": isDragReject ? "reject" : isDragActive ? "active" : "idle",
+			"data-disabled": disabled || void 0,
+			...props,
+			"aria-describedby": children == null ? [props["aria-describedby"], descriptionId].filter(Boolean).join(" ") : props["aria-describedby"],
+			"aria-busy": isProcessing || props["aria-busy"],
+			"className": cn("bg-background hover:bg-muted/30 focus-visible:border-ring focus-visible:ring-ring/50 data-[state=active]:border-ring data-[state=active]:bg-muted/50 data-[state=reject]:border-destructive data-[state=reject]:bg-destructive/5 data-[disabled]:hover:bg-background flex min-h-48 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed px-6 py-6 text-center text-sm transition-colors outline-none focus-visible:ring-3 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className)
+		}),
+		children: [/* @__PURE__ */ jsx("input", { ...getInputProps({
+			disabled,
+			"aria-hidden": true
+		}) }), children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "dropzone-icon",
+				className: "text-muted-foreground mb-2 grid size-11 place-items-center rounded-full border",
+				children: /* @__PURE__ */ jsx(UploadIcon, {
+					"aria-hidden": "true",
+					className: "size-5"
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				"data-slot": "dropzone-title",
+				className: "font-medium",
+				children: isDragReject ? "暂不支持这些文件" : isDragActive ? "松开以添加文件" : "将文件拖到此处"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				id: descriptionId,
+				"data-slot": "dropzone-description",
+				className: "text-muted-foreground mt-1 text-xs",
+				children: ["或点击选择", limits.length > 0 && `（${limits.join("，")}）`]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "dropzone-action",
+				className: cn(buttonVariants({
+					variant: "outline",
+					size: "sm"
+				}), "mt-4"),
+				children: "选择文件"
+			})
+		] })]
+	});
+}
+export { Dropzone, formatSize };

package/dist/widgets/index.d.mts

@@ -1,7 +1,7 @@
-import { FileUpload as FileUpload$1, FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadTrigger } from "../vendor/diceui/file-upload.mjs";
 import { Empty as Empty$1, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../vendor/coss/empty.mjs";
 import { Button } from "../vendor/shadcn/button.mjs";
 import { AlertDialog as AlertDialog$1, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHandle, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, createAlertDialogHandle } from "../vendor/shadcn/alert-dialog.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 { Calendar as Calendar$1, CalendarDayButton } from "../vendor/shadcn/calendar.mjs";
@@ -27,11 +27,11 @@ import "./toast.mjs";
 import { Input } from "../vendor/shadcn/input.mjs";
 import { useSidebar } from "../vendor/shadcn/sidebar.mjs";
 import { Sidebar } from "./sidebar.mjs";
-import { Breadcrumb } from "./breadcrumb.mjs";
-import { Pagination } from "./pagination.mjs";
+import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./datetime.mjs";
+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 { DatePicker, DateRange, DateRangePicker, TimePicker } from "./datetime-picker.mjs";
+import { Pagination } from "./pagination.mjs";
 import { Badge } from "../vendor/shadcn/badge.mjs";
 import { Switch } from "../vendor/shadcn/switch.mjs";
 import { Spinner } from "../vendor/shadcn/spinner.mjs";
@@ -156,6 +156,14 @@ export declare const Progress: typeof Progress$1 & {
 export declare const Calendar: typeof Calendar$1 & {
   DayButton: typeof CalendarDayButton;
 };
+export declare const Breadcrumb: typeof Breadcrumb$1 & {
+  List: typeof BreadcrumbList;
+  Item: typeof BreadcrumbItem;
+  Separator: typeof BreadcrumbSeparator;
+  Link: typeof BreadcrumbLink;
+  Ellipsis: typeof BreadcrumbEllipsis;
+  Page: typeof BreadcrumbPage;
+};
 export declare const AlertDialog: typeof AlertDialog$1 & {
   Trigger: typeof AlertDialogTrigger;
   Close: typeof AlertDialogCancel;
@@ -177,15 +185,4 @@ export declare const InputGroup: typeof InputGroup$1 & {
   Textarea: typeof InputGroupTextarea;
   Button: typeof InputGroupButton;
 };
-export declare const FileUpload: typeof FileUpload$1 & {
-  Dropzone: typeof FileUploadDropzone;
-  Trigger: typeof FileUploadTrigger;
-  List: typeof FileUploadList;
-  Item: typeof FileUploadItem;
-  ItemPreview: typeof FileUploadItemPreview;
-  ItemMetadata: typeof FileUploadItemMetadata;
-  ItemProgress: typeof FileUploadItemProgress;
-  ItemDelete: typeof FileUploadItemDelete;
-  Clear: typeof FileUploadClear;
-};
-export { type AlertDialogHandle, Badge, Breadcrumb, Button, Carousel, Checkbox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, type DialogHandle, type DrawerHandle, 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, 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, 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 };

package/dist/widgets/index.mjs

@@ -1,8 +1,8 @@
-import { FileUpload as FileUpload$1, FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadTrigger } from "../vendor/diceui/file-upload.mjs";
 import { Empty as Empty$1, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../vendor/coss/empty.mjs";
 import { Spinner } from "../vendor/shadcn/spinner.mjs";
 import { Button } from "../vendor/shadcn/button.mjs";
 import { AlertDialog as AlertDialog$1, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, createAlertDialogHandle } from "../vendor/shadcn/alert-dialog.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 { Calendar as Calendar$1, CalendarDayButton } from "../vendor/shadcn/calendar.mjs";
@@ -28,10 +28,10 @@ import { Toaster, toast } from "../vendor/shadcn/toast.mjs";
 import { Skeleton } from "../vendor/shadcn/skeleton.mjs";
 import { useSidebar } from "../vendor/shadcn/sidebar.mjs";
 import { Sidebar } from "./sidebar.mjs";
-import { Breadcrumb } from "./breadcrumb.mjs";
-import { Pagination } from "./pagination.mjs";
+import { DatePicker, DateRangePicker, TimePicker } from "./datetime.mjs";
+import { Dropzone, formatSize } from "./dropzone.mjs";
 import { Carousel, Image, Lightbox } from "./multimedia.mjs";
-import { DatePicker, DateRangePicker, TimePicker } from "./datetime-picker.mjs";
+import { Pagination } from "./pagination.mjs";
 import { Badge } from "../vendor/shadcn/badge.mjs";
 import { Switch } from "../vendor/shadcn/switch.mjs";
 import { Checkbox } from "../vendor/shadcn/checkbox.mjs";
@@ -148,6 +148,14 @@ const Progress = /* @__PURE__ */ Object.assign(Progress$1, {
 	Indicator: ProgressIndicator
 });
 const Calendar = /* @__PURE__ */ Object.assign(Calendar$1, { DayButton: CalendarDayButton });
+const Breadcrumb = /* @__PURE__ */ Object.assign(Breadcrumb$1, {
+	List: BreadcrumbList,
+	Item: BreadcrumbItem,
+	Separator: BreadcrumbSeparator,
+	Link: BreadcrumbLink,
+	Ellipsis: BreadcrumbEllipsis,
+	Page: BreadcrumbPage
+});
 const AlertDialog = /* @__PURE__ */ Object.assign(AlertDialog$1, {
 	Trigger: AlertDialogTrigger,
 	Close: AlertDialogCancel,
@@ -169,15 +177,4 @@ const InputGroup = /* @__PURE__ */ Object.assign(InputGroup$1, {
 	Textarea: InputGroupTextarea,
 	Button: InputGroupButton
 });
-const FileUpload = /* @__PURE__ */ Object.assign(FileUpload$1, {
-	Dropzone: FileUploadDropzone,
-	Trigger: FileUploadTrigger,
-	List: FileUploadList,
-	Item: FileUploadItem,
-	ItemPreview: FileUploadItemPreview,
-	ItemMetadata: FileUploadItemMetadata,
-	ItemProgress: FileUploadItemProgress,
-	ItemDelete: FileUploadItemDelete,
-	Clear: FileUploadClear
-});
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Empty, Field, FileUpload, 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, toast, useSidebar };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@base-ui/utils": "^0.5.0",
     "@daypicker/react": "^10.0.2",
     "@fontsource-variable/inter": "^5.3.0",
     "class-variance-authority": "^0.7.1",
@@ -44,6 +43,7 @@
     "lucide-react": "^1.62.0",
     "motion": "^14.7.1",
     "radashi": "^12.9.7",
+    "react-dropzone": "^20.1.4",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {

package/dist/vendor/diceui/file-upload.d.mts

@@ -1,74 +0,0 @@
-import * as React$1 from "react";
-import { useRender } from "@base-ui/react/use-render";
-type Direction = "ltr" | "rtl";
-interface FileState {
-  file: File;
-  progress: number;
-  error?: string;
-  status: "idle" | "uploading" | "error" | "success";
-}
-interface StoreState {
-  files: Map<File, FileState>;
-  dragOver: boolean;
-  invalid: boolean;
-}
-declare function useStore<T>(selector: (state: StoreState) => T): T;
-interface FileUploadProps extends Omit<React$1.ComponentProps<"div"> & useRender.ComponentProps<"div">, "defaultValue" | "onChange"> {
-  value?: File[];
-  defaultValue?: File[];
-  onValueChange?: (files: File[]) => void;
-  onAccept?: (files: File[]) => void;
-  onFileAccept?: (file: File) => void;
-  onFileReject?: (file: File, message: string) => void;
-  onFileValidate?: (file: File) => string | null | undefined;
-  onUpload?: (files: File[], options: {
-    onProgress: (file: File, progress: number) => void;
-    onSuccess: (file: File) => void;
-    onError: (file: File, error: Error) => void;
-  }) => Promise<void> | void;
-  accept?: string;
-  maxFiles?: number;
-  maxSize?: number;
-  dir?: Direction;
-  label?: string;
-  name?: string;
-  disabled?: boolean;
-  invalid?: boolean;
-  multiple?: boolean;
-  required?: boolean;
-}
-declare function FileUpload(props: FileUploadProps): React$1.JSX.Element;
-interface FileUploadDropzoneProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {}
-declare function FileUploadDropzone(props: FileUploadDropzoneProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-interface FileUploadTriggerProps extends React$1.ComponentProps<"button">, useRender.ComponentProps<"button"> {}
-declare function FileUploadTrigger(props: FileUploadTriggerProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-interface FileUploadListProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {
-  orientation?: "horizontal" | "vertical";
-  forceMount?: boolean;
-}
-declare function FileUploadList(props: FileUploadListProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-interface FileUploadItemProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {
-  value: File;
-}
-declare function FileUploadItem(props: FileUploadItemProps): React$1.JSX.Element | null;
-interface FileUploadItemPreviewProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {
-  previewRender?: (file: File, fallback: () => React$1.ReactNode) => React$1.ReactNode;
-}
-declare function FileUploadItemPreview(props: FileUploadItemPreviewProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-interface FileUploadItemMetadataProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {
-  size?: "default" | "sm";
-}
-declare function FileUploadItemMetadata(props: FileUploadItemMetadataProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-interface FileUploadItemProgressProps extends React$1.ComponentProps<"div">, useRender.ComponentProps<"div"> {
-  variant?: "linear" | "circular" | "fill";
-  size?: number;
-  forceMount?: boolean;
-}
-declare function FileUploadItemProgress(props: FileUploadItemProgressProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-interface FileUploadItemDeleteProps extends React$1.ComponentProps<"button">, useRender.ComponentProps<"button"> {}
-declare function FileUploadItemDelete(props: FileUploadItemDeleteProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-interface FileUploadClearProps extends React$1.ComponentProps<"button">, useRender.ComponentProps<"button"> {
-  forceMount?: boolean;
-}
-declare function FileUploadClear(props: FileUploadClearProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | null;
-export { FileUpload, FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, type FileUploadProps, FileUploadTrigger, useStore as useFileUpload };