@deftui/react 0.3.0 → 0.3.2

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mjs";
 import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
+import { CascaderChangeDetails, CascaderLabels, CascaderMode, CascaderNode } from "./vendor/reui.io/cascader/cascader-types.mjs";
+import { CascaderProps, CascaderSingleProps } from "./vendor/reui.io/cascader/cascader.mjs";
 import { Separator } from "./vendor/shadcn/separator.mjs";
 import { Label } from "./vendor/shadcn/label.mjs";
 import { Button } from "./vendor/shadcn/button.mjs";
@@ -23,10 +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 { FileTree, FileTreeNode } from "./vendor/tailored/file-tree.mjs";
-import { AlertDialog, Breadcrumb, ButtonGroup, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { 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, Checkbox, Combobox, DatePicker, type DateRange, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, FileTree, type FileTreeNode, 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, 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, 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,9 +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 { FileTree } from "./vendor/tailored/file-tree.mjs";
-import { AlertDialog, Breadcrumb, ButtonGroup, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, Frame, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, FileTree, Form, Frame, IconSwap, Image, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Toaster as ToastProvider, Tooltip, cn, cva, formatBytes, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };
+export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, Form, Frame, IconSwap, Image, Input, InputGroup, JsonViewer, Kbd, Label, Lightbox, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toaster as ToastProvider, Tooltip, 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` 支持初始打开时的入场动画 |
@@ -22,6 +22,9 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `@coss/table` | [coss/table.tsx](coss/table.tsx) | [Table](https://coss.com/ui/docs/components/table) | 默认变体的 `TableFooter` 移除底色，与 `card` 变体一样保持透明 |
 | `@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` 则自动包裹 |
 | `button` | [shadcn/button.tsx](shadcn/button.tsx) | [Button](https://ui.shadcn.com/docs/components/base/button) | `pill` 提供全圆角；`isPending` 提供加载态；提供额外 `destructive` 系列样式变体 |
@@ -64,5 +67,4 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `https://ui.iandefined.com/r/icon-swap.json` | [tailored/icon-swap.tsx](tailored/icon-swap.tsx) | [Icon Swap](https://ui.iandefined.com/docs/utilities/icon-swap/) | 进出场动画减弱模糊为 2px，缩短为 0.2s 时长 |
 | `https://ui.iandefined.com/r/lightbox.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Lightbox](https://ui.iandefined.com/docs/components/lightbox/) | 适配本地组件和尺寸；修正嵌套弹层层级与点击隔离；补充加载失败反馈 |
 | `https://ui.iandefined.com/r/scroll-area.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Scroll Area](https://ui.iandefined.com/docs/components/scroll-area/) | 作为 Lightbox 的私有依赖内联 |
-| `Tinkerers-Labs/mischief-ui/file-tree` | [tailored/file-tree.tsx](tailored/file-tree.tsx) | [File Tree](https://ui.tinkererslabs.com/docs/components/file-tree/) | — |
 | `Tinkerers-Labs/mischief-ui/json-viewer` | [tailored/json-viewer.tsx](tailored/json-viewer.tsx) | [JSON Viewer](https://ui.tinkererslabs.com/docs/components/json-viewer/) | — |

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

@@ -0,0 +1,20 @@
+import { CascaderLoadContext, CascaderLoadResult, CascaderNode, CascaderSearchContext } from "./cascader-types.mjs";
+/**
+ * Async data for the cascader. Loaded pages live in their own store and are
+ * MERGED onto the index built from `items`, never folded into that build:
+ * `items` changes identity on any parent re-render, and folding would discard
+ * every level the user drilled into. Map membership is the load discriminator:
+ * no `states` entry means never fetched, while an entry with no `loading`, no
+ * `error` and no children means empty for real.
+ */
+/**
+ * Fetches one level. `node` is `null` for the root level, and only
+ * `{ value, label: value }`, no `data`, for a level on screen whose node has
+ * not loaded: a deep link before the level above loads, or a page-loaded
+ * level after a `loadKey` change.
+ */
+export type CascaderGetChildren<T = unknown> = (node: CascaderNode<T> | null, context: CascaderLoadContext) => CascaderNode<T>[] | CascaderLoadResult<T> | Promise<CascaderNode<T>[] | CascaderLoadResult<T>>;
+/** Server-side search, replacing the local index scan while the query is set. */
+export type CascaderOnSearch<T = unknown> = (query: string, context: CascaderSearchContext) => CascaderNode<T>[] | CascaderLoadResult<T> | Promise<CascaderNode<T>[] | CascaderLoadResult<T>>;
+/** Resolves a selected value to its ancestor chain, root first, node last. */
+export type CascaderResolveValue<T = unknown> = (value: string, context: CascaderLoadContext) => CascaderNode<T>[] | Promise<CascaderNode<T>[]>;