@deftui/react 0.0.6 → 0.1.1

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 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";
@@ -19,12 +20,14 @@ import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./widgets/da
 import { Badge } from "./vendor/shadcn/badge.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 { 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, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { 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, Card, Carousel, Combobox, type ComboboxItemCollection, type ComboboxPrimitiveValue, type CreateComboboxItemsOptions, DatePicker, type DateRange, DateRangePicker, Dialog, type DialogHandle, Drawer, type DrawerHandle, Dropdown, 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, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, mergeProps, toast, useCopyToClipboard, 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, 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 };

package/dist/index.mjs

@@ -1,5 +1,6 @@
 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";
@@ -11,6 +12,7 @@ import { createDialogHandle } from "./vendor/shadcn/dialog.mjs";
 import { createDrawerHandle } from "./vendor/shadcn/drawer.mjs";
 import { Label } from "./vendor/shadcn/label.mjs";
 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";
@@ -19,11 +21,12 @@ import { Carousel, Image, Lightbox } from "./widgets/multimedia.mjs";
 import { DatePicker, DateRangePicker, TimePicker } from "./widgets/datetime-picker.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, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Card, Carousel, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Empty, Field, Form, IconSwap, Image, Input, InputGroup, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, createAlertDialogHandle, createComboboxItems, createDialogHandle, createDrawerHandle, cva, mergeProps, toast, useCopyToClipboard, useIsMobile, useMediaQuery, useSidebar };
+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 };

package/dist/vendor/README.md

@@ -11,10 +11,12 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 
 | ID | File | Docs | Modifications |
 | --- | --- | --- | --- |
+| `@coss/empty` | [coss/empty.tsx](coss/empty.tsx) | [Empty](https://coss.com/ui/docs/components/empty) | — |
 | `@coss/form` | [coss/form.tsx](coss/form.tsx) | [Form](https://coss.com/ui/docs/components/form) | — |
 | `@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) | — |
@@ -23,12 +25,12 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `calendar` | [shadcn/calendar.tsx](shadcn/calendar.tsx) | [Calendar](https://ui.shadcn.com/docs/components/base/calendar) | 将 `react-day-picker` 导入改为 `@daypicker/react` |
 | `card` | [shadcn/card.tsx](shadcn/card.tsx) | [Card](https://ui.shadcn.com/docs/components/base/card) | — |
 | `carousel` | [shadcn/carousel.tsx](shadcn/carousel.tsx) | [Carousel](https://ui.shadcn.com/docs/components/base/carousel) | — |
+| `checkbox` | [shadcn/checkbox.tsx](shadcn/checkbox.tsx) | [Checkbox](https://ui.shadcn.com/docs/components/base/checkbox) | — |
 | `combobox` | [shadcn/combobox.tsx](shadcn/combobox.tsx) | [Combobox](https://ui.shadcn.com/docs/components/base/combobox) | 额外导出 `createComboboxItems` 及其类型 |
 | `dialog` | [shadcn/dialog.tsx](shadcn/dialog.tsx) | [Dialog](https://ui.shadcn.com/docs/components/base/dialog) | 额外导出 `createDialogHandle` 及其类型 |
 | `direction` | [shadcn/direction.tsx](shadcn/direction.tsx) | [Direction](https://ui.shadcn.com/docs/components/base/direction) | — |
 | `drawer` | [shadcn/drawer.tsx](shadcn/drawer.tsx) | [Drawer](https://ui.shadcn.com/docs/components/base/drawer) | 额外导出 `createDrawerHandle` 及其类型 |
 | `dropdown-menu` | [shadcn/dropdown-menu.tsx](shadcn/dropdown-menu.tsx) | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) | — |
-| `empty` | [shadcn/empty.tsx](shadcn/empty.tsx) | [Empty](https://ui.shadcn.com/docs/components/base/empty) | — |
 | `field` | [shadcn/field.tsx](shadcn/field.tsx) | [Field](https://ui.shadcn.com/docs/components/base/field) | — |
 | `input` | [shadcn/input.tsx](shadcn/input.tsx) | [Input](https://ui.shadcn.com/docs/components/base/input) | 参考 coss ui 处理自动填充的文字颜色，用背景色过渡抑制浏览器底色、内阴影绘制填充色 |
 | `input-group` | [shadcn/input-group.tsx](shadcn/input-group.tsx) | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) | — |

package/dist/vendor/coss/empty.d.mts

@@ -0,0 +1,12 @@
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+export declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+export declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.ReactElement;
+export declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+export declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.ReactElement;
+export declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+export {};

package/dist/vendor/coss/empty.mjs

@@ -0,0 +1,74 @@
+import { cn } from "../shadcn/lib/utils.mjs";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/vendor/coss/empty.tsx
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5"
+	} }
+});
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance px-6 py-12 text-center md:py-20", className),
+		"data-slot": "empty",
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex max-w-sm flex-col items-center text-center", className),
+		"data-slot": "empty-header",
+		...props
+	});
+}
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative mb-6", className),
+		"data-slot": "empty-media",
+		"data-variant": variant,
+		...props,
+		children: [variant === "icon" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			}), "pointer-events-none absolute bottom-px origin-bottom-left -translate-x-0.5 -rotate-10 scale-84 shadow-none")
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			}), "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none")
+		})] }), /* @__PURE__ */ jsx("div", {
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			})),
+			...props
+		})]
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("font-bold font-heading text-xl", className),
+		"data-slot": "empty-title",
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1", className),
+		"data-slot": "empty-description",
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", className),
+		"data-slot": "empty-content",
+		...props
+	});
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

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

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