@deftui/react 0.3.1 → 0.3.3

package/dist/index.d.mts

@@ -25,9 +25,9 @@ import { Form } from "./vendor/coss/form.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 { AlertDialog, Breadcrumb, ButtonGroup, Card, Cascader, Combobox, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Timeline, Tooltip } from "./widgets/index.mjs";
+import { AlertDialog, Breadcrumb, ButtonGroup, Card, Cascader, Combobox, ContextMenu, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Timeline, Tooltip } from "./widgets/index.mjs";
 import { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 export * from "react-dropzone";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, type CascaderChangeDetails, type CascaderLabels, type CascaderMode, type CascaderNode, type CascaderProps, type CascaderSingleProps, Checkbox, Combobox, DatePicker, type DateRange, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, Frame, IconSwap, Image, ImageProps, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toaster as ToastProvider, Tooltip, cn, cva, formatBytes, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, type useLightbox, useMediaQuery, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, type CascaderChangeDetails, type CascaderLabels, type CascaderMode, type CascaderNode, type CascaderProps, type CascaderSingleProps, Checkbox, Combobox, ContextMenu, DatePicker, type DateRange, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, Frame, IconSwap, Image, ImageProps, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, type LightboxActions, type LightboxBackdrop, type LightboxCaptions, type LightboxChangeReason, type LightboxClose, type LightboxContent, type LightboxControl, type LightboxControlContext, type LightboxCounter, type LightboxDownload, type LightboxImageChangeEventDetails, type LightboxImageItem, type LightboxItem, type LightboxMore, type LightboxNext, type LightboxOpenEventDetails, type LightboxPrevious, type LightboxProps, type LightboxSlide, type LightboxSlides, type LightboxThumbnail, type LightboxThumbnails, type LightboxToolbar, type LightboxTrigger, type LightboxTriggerProps, type LightboxVideoItem, type LightboxViewport, type LightboxZoom, type LightboxZoomButton, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toaster as ToastProvider, Tooltip, cn, cva, formatBytes, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, type useLightbox, useMediaQuery, useSidebar };

package/dist/index.mjs

@@ -22,8 +22,8 @@ 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 { AlertDialog, Breadcrumb, ButtonGroup, Card, Cascader, Combobox, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Timeline, Tooltip } from "./widgets/index.mjs";
+import { AlertDialog, Breadcrumb, ButtonGroup, Card, Cascader, Combobox, ContextMenu, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Timeline, 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, 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, cn, cva, formatBytes, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Checkbox, Combobox, ContextMenu, 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, cn, cva, formatBytes, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };

package/dist/vendor/README.md

@@ -12,7 +12,7 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | ID | File | Docs | Modifications |
 | --- | --- | --- | --- |
 | `@coss/alert-dialog` | [coss/alert-dialog.tsx](coss/alert-dialog.tsx) | [Alert Dialog](https://coss.com/ui/docs/components/alert-dialog) | `font-bold text-xl` 替换为 `font-semibold text-lg`；用 `@starting-style` 支持初始打开时的入场动画 |
-| `@coss/calendar` | [coss/calendar.tsx](coss/calendar.tsx) | [Calendar](https://coss.com/ui/docs/components/calendar) | — |
+| `@coss/calendar` | [coss/calendar.tsx](coss/calendar.tsx) | [Calendar](https://coss.com/ui/docs/components/calendar) | 根据 `navigator.language` 自动设置 `locale` 为 zhCN 或 enUS |
 | `@coss/card` | [coss/card.tsx](coss/card.tsx) | [Card](https://coss.com/ui/docs/components/card) | 用 `--card-spacing` 与 `--card-gap` 替代分段 padding；新增 `spacing`、`gap` 属性写入对应变量；标题改为 `text-base font-semibold leading-normal`；首尾图片贴边并补圆角 |
 | `@coss/dialog` | [coss/dialog.tsx](coss/dialog.tsx) | [Dialog](https://coss.com/ui/docs/components/dialog) | `font-bold text-xl` 替换为 `font-semibold text-lg`；用 `@starting-style` 支持初始打开时的入场动画 |
 | `@coss/drawer` | [coss/drawer.tsx](coss/drawer.tsx) | [Drawer](https://coss.com/ui/docs/components/drawer) | `font-bold text-xl` 替换为 `font-semibold text-lg`；用 `@starting-style` 支持初始打开时的入场动画 |
@@ -23,6 +23,7 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `@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 默认值一致 |
 | `@reui/cascader` | [reui.io/cascader/cascader.tsx](reui.io/cascader/cascader.tsx) | [Cascader](https://reui.io/docs/components/cascader) | 重映射 `scroll-area` 与 `spinner` 的导入 |
+| `@reui/frame` | [reui.io/frame.tsx](reui.io/frame.tsx) | [Frame](https://reui.io/docs/components/base/frame) | — |
 | `@reui/timeline` | [reui.io/timeline.tsx](reui.io/timeline.tsx) | [Timeline](https://reui.io/docs/components/timeline) | — |
 | `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) | 未显式指定 `BreadcrumbList` 则自动包裹 |
@@ -31,6 +32,7 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `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) | 将选中标记移至左侧 |
+| `context-menu` | [shadcn/context-menu.tsx](shadcn/context-menu.tsx) | [Context Menu](https://ui.shadcn.com/docs/components/base/context-menu) | — |
 | `direction` | [shadcn/direction.tsx](shadcn/direction.tsx) | [Direction](https://ui.shadcn.com/docs/components/base/direction) | — |
 | `dropdown-menu` | [shadcn/dropdown-menu.tsx](shadcn/dropdown-menu.tsx) | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) | — |
 | `field` | [shadcn/field.tsx](shadcn/field.tsx) | [Field](https://ui.shadcn.com/docs/components/base/field) | — |

package/dist/vendor/coss/calendar.mjs

@@ -3,6 +3,7 @@ import { cn } from "../shadcn/lib/utils.mjs";
 import { jsx } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon } from "lucide-react";
 import { DayPicker } from "@daypicker/react";
+import { enUS, zhCN } from "@daypicker/react/locale";
 // src/vendor/coss/calendar.tsx
 const buttonClassNames = "relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 /** https://coss.com/ui/docs/components/calendar */
@@ -63,6 +64,7 @@ function Calendar({ className, classNames, showOutsideDays = true, components: u
 		formatters: { formatMonthDropdown: (month, dateLib) => dateLib.format(month, "LLL") },
 		mode,
 		showOutsideDays,
+		locale: navigator.language.startsWith("zh") ? zhCN : enUS,
 		...props
 	};
 	return /* @__PURE__ */ jsx(DayPicker, { ...dayPickerProps });

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

@@ -8,12 +8,6 @@ type SpacingProps = {
 };
 type CardSpacing = number | (string & {});
 export declare function Card({ className, render, gap, spacing, ...props }: useRender.ComponentProps<"div"> & SpacingProps): React.ReactElement;
-export declare function CardFrame({ className, render, gap, spacing, ...props }: useRender.ComponentProps<"div"> & SpacingProps): React.ReactElement;
-export declare function CardFrameHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
-export declare function CardFrameTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
-export declare function CardFrameDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
-export declare function CardFrameAction({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
-export declare function CardFrameFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
 export declare function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
 export declare function CardTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
 export declare function CardDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;

package/dist/vendor/coss/card.mjs

@@ -24,73 +24,6 @@ function Card({ className, render, gap, spacing, ...props }) {
 		render
 	});
 }
-function CardFrame({ className, render, gap, spacing, ...props }) {
-	const defaultProps = {
-		className: cn("relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]", className),
-		"data-slot": "card-frame",
-		style: getCardStyle(spacing, gap)
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
-function CardFrameHeader({ className, render, ...props }) {
-	const defaultProps = {
-		className: cn("relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-(--card-spacing) py-(--card-gap) has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]", className),
-		"data-slot": "card-frame-header"
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
-function CardFrameTitle({ className, render, ...props }) {
-	const defaultProps = {
-		className: cn("self-center font-semibold text-sm", className),
-		"data-slot": "card-frame-title"
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
-function CardFrameDescription({ className, render, ...props }) {
-	const defaultProps = {
-		className: cn("self-center text-muted-foreground text-sm", className),
-		"data-slot": "card-frame-description"
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
-function CardFrameAction({ className, render, ...props }) {
-	const defaultProps = {
-		className: cn("col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end", className),
-		"data-slot": "card-frame-action"
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
-function CardFrameFooter({ className, render, ...props }) {
-	const defaultProps = {
-		className: cn("px-(--card-spacing) py-(--card-gap)", className),
-		"data-slot": "card-frame-footer"
-	};
-	return useRender({
-		defaultTagName: "div",
-		props: mergeProps(defaultProps, props),
-		render
-	});
-}
 function CardHeader({ className, render, ...props }) {
 	const defaultProps = {
 		className: cn("grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-(--card-spacing) [.border-b]:pb-(--card-gap) has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
@@ -157,4 +90,4 @@ function CardFooter({ className, render, ...props }) {
 		render
 	});
 }
-export { Card, CardAction, CardPanel as CardContent, CardPanel, CardDescription, CardFooter, CardFrame, CardFrameAction, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle };
+export { Card, CardAction, CardPanel as CardContent, CardPanel, CardDescription, CardFooter, CardHeader, CardTitle };

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/shadcn/context-menu.d.mts

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+declare function ContextMenu$1({ ...props }: ContextMenu.Root.Props): React$1.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenu.Trigger.Props): React$1.JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenu.Popup.Props & Pick<ContextMenu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React$1.JSX.Element;
+declare function ContextMenuGroup({ ...props }: ContextMenu.Group.Props): React$1.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenu.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenu.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function ContextMenuSub({ ...props }: ContextMenu.SubmenuRoot.Props): React$1.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenu.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSubContent({ ...props }: React$1.ComponentProps<typeof ContextMenuContent>): React$1.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenu.CheckboxItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: ContextMenu.RadioGroup.Props): React$1.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenu.RadioItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenu.Separator.Props): React$1.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

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

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "cn";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+// src/vendor/shadcn/context-menu.tsx
+function ContextMenu$1({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: cn("select-none", className),
+		...props
+	});
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
+		...props
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function ContextMenuSubContent({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "right",
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

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/index.d.mts

@@ -1,5 +1,5 @@
 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";
@@ -10,11 +10,13 @@ import { CascaderAction, CascaderFooter, CascaderSubmenu, CascaderSubmenuContent
 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 { ContextMenu as ContextMenu$1, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "../vendor/shadcn/context-menu.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";
@@ -68,13 +70,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 & {
@@ -235,6 +237,22 @@ export declare const Breadcrumb: typeof Breadcrumb$1 & {
   Ellipsis: typeof BreadcrumbEllipsis;
   Page: typeof BreadcrumbPage;
 };
+/** https://ui.shadcn.com/docs/components/base/context-menu */
+export declare const ContextMenu: typeof ContextMenu$1 & {
+  Trigger: typeof ContextMenuTrigger;
+  Content: typeof ContextMenuContent;
+  Sub: typeof ContextMenuSub;
+  SubTrigger: typeof ContextMenuSubTrigger;
+  SubContent: typeof ContextMenuSubContent;
+  Group: typeof ContextMenuGroup;
+  GroupLabel: typeof ContextMenuLabel;
+  Separator: typeof ContextMenuSeparator;
+  Item: typeof ContextMenuItem;
+  Shortcut: typeof ContextMenuShortcut;
+  RadioItem: typeof ContextMenuRadioItem;
+  RadioGroup: typeof ContextMenuRadioGroup;
+  CheckboxItem: typeof ContextMenuCheckboxItem;
+};
 /** https://coss.com/ui/docs/components/alert-dialog */
 export declare const AlertDialog: typeof AlertDialogPrimitive.Root & {
   Trigger: typeof AlertDialogTrigger;

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";
@@ -12,6 +12,7 @@ import { CascaderAction, CascaderFooter, CascaderSubmenu, CascaderSubmenuContent
 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";
@@ -19,6 +20,7 @@ import { ButtonGroup as ButtonGroup$1, ButtonGroupSeparator, ButtonGroupText } f
 import { Input } from "../vendor/shadcn/input.mjs";
 import { Textarea } from "../vendor/shadcn/textarea.mjs";
 import { Combobox as Combobox$1, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxValue } from "../vendor/shadcn/combobox.mjs";
+import { ContextMenu as ContextMenu$1, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "../vendor/shadcn/context-menu.mjs";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../vendor/shadcn/dropdown-menu.mjs";
 import { Field as Field$1, FieldDescription, FieldError, FieldLabel } from "../vendor/shadcn/field.mjs";
 import { Label } from "../vendor/shadcn/label.mjs";
@@ -63,13 +65,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, {
@@ -228,6 +230,22 @@ const Breadcrumb = /* @__PURE__ */ Object.assign(Breadcrumb$1, {
 	Ellipsis: BreadcrumbEllipsis,
 	Page: BreadcrumbPage
 });
+/** https://ui.shadcn.com/docs/components/base/context-menu */
+const ContextMenu = /* @__PURE__ */ Object.assign(ContextMenu$1, {
+	Trigger: ContextMenuTrigger,
+	Content: ContextMenuContent,
+	Sub: ContextMenuSub,
+	SubTrigger: ContextMenuSubTrigger,
+	SubContent: ContextMenuSubContent,
+	Group: ContextMenuGroup,
+	GroupLabel: ContextMenuLabel,
+	Separator: ContextMenuSeparator,
+	Item: ContextMenuItem,
+	Shortcut: ContextMenuShortcut,
+	RadioItem: ContextMenuRadioItem,
+	RadioGroup: ContextMenuRadioGroup,
+	CheckboxItem: ContextMenuCheckboxItem
+});
 /** https://coss.com/ui/docs/components/alert-dialog */
 const AlertDialog = /* @__PURE__ */ Object.assign(AlertDialog$1, {
 	Trigger: AlertDialogTrigger,
@@ -251,4 +269,4 @@ const InputGroup = /* @__PURE__ */ Object.assign(InputGroup$1, {
 	Textarea: InputGroupTextarea,
 	Button: InputGroupButton
 });
-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 };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Checkbox, Combobox, ContextMenu, 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.1",
+  "version": "0.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -38,10 +38,10 @@
     "cn": "^0.5.2",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^1.70.0",
-    "motion": "^14.10.1",
-    "radashi": "^13.0.2",
-    "react-dropzone": "^20.1.4",
+    "lucide-react": "^1.72.0",
+    "motion": "^14.13.0",
+    "radashi": "^13.0.4",
+    "react-dropzone": "^20.2.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {