@deftui/react 0.3.1 → 0.3.2

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` 则自动包裹 |

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/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,6 +10,7 @@ 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";
@@ -68,13 +69,13 @@ export declare const Card: typeof Card$1 & {
   Action: typeof CardAction;
   Description: typeof CardDescription;
 };
-/** https://coss.com/ui/docs/components/card#cardframe */
-export declare const Frame: typeof CardFrame & {
-  Header: typeof CardFrameHeader;
-  Footer: typeof CardFrameFooter;
-  Title: typeof CardFrameTitle;
-  Description: typeof CardFrameDescription;
-  Action: typeof CardFrameAction;
+/** https://reui.io/docs/components/base/frame */
+export declare const Frame: typeof Frame$1 & {
+  Header: typeof FrameHeader;
+  Panel: typeof FramePanel;
+  Footer: typeof FrameFooter;
+  Title: typeof FrameTitle;
+  Description: typeof FrameDescription;
 };
 /** https://ui.shadcn.com/docs/components/base/field */
 export declare const Field: typeof Field$1 & {

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";
@@ -63,13 +64,13 @@ const Card = /* @__PURE__ */ Object.assign(Card$1, {
 	Action: CardAction,
 	Description: CardDescription
 });
-/** https://coss.com/ui/docs/components/card#cardframe */
-const Frame = /* @__PURE__ */ Object.assign(CardFrame, {
-	Header: CardFrameHeader,
-	Footer: CardFrameFooter,
-	Title: CardFrameTitle,
-	Description: CardFrameDescription,
-	Action: CardFrameAction
+/** https://reui.io/docs/components/base/frame */
+const Frame = /* @__PURE__ */ Object.assign(Frame$1, {
+	Header: FrameHeader,
+	Panel: FramePanel,
+	Footer: FrameFooter,
+	Title: FrameTitle,
+	Description: FrameDescription
 });
 /** https://ui.shadcn.com/docs/components/base/field */
 const Field = /* @__PURE__ */ Object.assign(Field$1, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/react",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",