@deftui/react 0.2.4 → 0.3.0

package/README.md

@@ -2,8 +2,6 @@
 
 A React component library built on Base UI, shadcn/ui, and their open-source registry ecosystem, offering easy-to-use compound component APIs.
 
-[Upstream documentation](./dist/vendor/README.md): To look up component usage, check the local exports first, then consult the upstream.
-
 > Most basic components expose exactly the same APIs as their shadcn/ui counterparts backed by Base UI.
 
 ## Installation
@@ -34,9 +32,9 @@ export function Example() {
         <Card.Description>Compose your UI using Compound Component API</Card.Description>
       </Card.Header>
 
-      <Card.Content>
+      <Card.Panel>
         <Button>Get started</Button>
-      </Card.Content>
+      </Card.Panel>
     </Card>
   );
 }

package/dist/index.d.mts

@@ -1,32 +1,32 @@
 import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mjs";
 import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
 import { Separator } from "./vendor/shadcn/separator.mjs";
-import { Button } from "./vendor/shadcn/button.mjs";
 import { Label } from "./vendor/shadcn/label.mjs";
+import { Button } from "./vendor/shadcn/button.mjs";
 import { Toaster, toast } from "./vendor/shadcn/toast.mjs";
 import { Input } from "./vendor/shadcn/input.mjs";
 import { useSidebar } from "./vendor/shadcn/sidebar.mjs";
 import { Sidebar } from "./widgets/sidebar.mjs";
+import { Calendar } from "./vendor/coss/calendar.mjs";
 import { DatePicker, DateRange, DateRangePicker, TimePicker } from "./widgets/datetime.mjs";
-import { Dropzone, formatSize } from "./widgets/dropzone.mjs";
+import { Dropzone, formatBytes, useDropzone } from "./widgets/dropzone.mjs";
 import { LightboxActions, LightboxBackdrop, LightboxCaptions, LightboxChangeReason, LightboxClose, LightboxContent, LightboxControl, LightboxControlContext, LightboxCounter, LightboxDownload, LightboxImageChangeEventDetails, LightboxImageItem, LightboxItem, LightboxMore, LightboxNext, LightboxOpenEventDetails, LightboxPrevious, LightboxProps, LightboxSlide, LightboxSlides, LightboxThumbnail, LightboxThumbnails, LightboxToolbar, LightboxTrigger, LightboxTriggerProps, LightboxVideoItem, LightboxViewport, LightboxZoom, LightboxZoomButton, useLightbox } from "./vendor/tailored/lightbox.mjs";
 import { Carousel, Image, ImageProps, Lightbox } from "./widgets/multimedia.mjs";
 import { Pagination } from "./widgets/pagination.mjs";
-import { Form } from "./vendor/coss/form.mjs";
 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 { 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, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { useDropzone } from "react-dropzone";
-export type * 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, 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, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, type useLightbox, useMediaQuery, useSidebar };
+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 };

package/dist/index.mjs

@@ -11,20 +11,20 @@ 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 { Calendar } from "./vendor/coss/calendar.mjs";
 import { DatePicker, DateRangePicker, TimePicker } from "./widgets/datetime.mjs";
-import { Dropzone, formatSize } from "./widgets/dropzone.mjs";
+import { Dropzone, formatBytes, useDropzone } from "./widgets/dropzone.mjs";
 import { Carousel, Image, Lightbox } from "./widgets/multimedia.mjs";
 import { Pagination } from "./widgets/pagination.mjs";
-import { Form } from "./vendor/coss/form.mjs";
 import { Badge } from "./vendor/shadcn/badge.mjs";
 import { Switch } from "./vendor/shadcn/switch.mjs";
 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, Calendar, Card, Combobox, Dialog, Drawer, Dropdown, Empty, Field, InputGroup, Kbd, Popover, Progress, Radio, Select, Table, Tabs, Tooltip } from "./widgets/index.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 { cn } from "cn";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { useDropzone } from "react-dropzone";
-export { AlertDialog, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Dropdown, Dropzone, Empty, Field, FileTree, Form, 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, formatSize, mergeProps, toast, useCopyToClipboard, useDropzone, useIsMobile, useMediaQuery, useSidebar };
+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 };

package/dist/styles.css

@@ -65,6 +65,9 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+
+  --card-gap: calc(var(--spacing) * 4);
+  --card-spacing: calc(var(--spacing) * 6);
 }
 
 @layer base {

package/dist/vendor/README.md

@@ -11,20 +11,21 @@ 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/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` 支持初始打开时的入场动画 |
-| `@coss/empty` | [coss/empty.tsx](coss/empty.tsx) | [Empty](https://coss.com/ui/docs/components/empty) | `font-bold text-xl` 换为 `font-semibold text-lg` |
+| `@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/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` 支持初始打开时的入场动画 |
+| `@coss/empty` | [coss/empty.tsx](coss/empty.tsx) | [Empty](https://coss.com/ui/docs/components/empty) | `font-bold text-xl` 替换为 `font-semibold text-lg` |
 | `@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/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 默认值一致 |
 | `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` 系列样式变体，`destructive-soft` 保留 shadcn 的浅色危险样式 |
+| `button` | [shadcn/button.tsx](shadcn/button.tsx) | [Button](https://ui.shadcn.com/docs/components/base/button) | `pill` 提供全圆角；`isPending` 提供加载态；提供额外 `destructive` 系列样式变体 |
 | `button-group` | [shadcn/button-group.tsx](shadcn/button-group.tsx) | [Button Group](https://ui.shadcn.com/docs/components/base/button-group) | — |
-| `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) | 将选中标记移至左侧 |
@@ -46,7 +47,6 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
 | `skeleton` | [shadcn/skeleton.tsx](shadcn/skeleton.tsx) | [Skeleton](https://ui.shadcn.com/docs/components/base/skeleton) | — |
 | `spinner` | [shadcn/spinner.tsx](shadcn/spinner.tsx) | [Spinner](https://ui.shadcn.com/docs/components/base/spinner) | — |
 | `switch` | [shadcn/switch.tsx](shadcn/switch.tsx) | [Switch](https://ui.shadcn.com/docs/components/base/switch) | — |
-| `table` | [shadcn/table.tsx](shadcn/table.tsx) | [Table](https://ui.shadcn.com/docs/components/base/table) | — |
 | `tabs` | [shadcn/tabs.tsx](shadcn/tabs.tsx) | [Tabs](https://ui.shadcn.com/docs/components/base/tabs) | — |
 | `textarea` | [shadcn/textarea.tsx](shadcn/textarea.tsx) | [Textarea](https://ui.shadcn.com/docs/components/base/textarea) | — |
 | `toast` | [shadcn/toast.tsx](shadcn/toast.tsx) | [Toast](https://ui.shadcn.com/docs/components/base/toast) | — |

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

@@ -0,0 +1,4 @@
+import * as React$1 from "react";
+import { DayPicker } from "@daypicker/react";
+/** https://coss.com/ui/docs/components/calendar */
+export declare function Calendar({ className, classNames, showOutsideDays, components: userComponents, mode, ...props }: React$1.ComponentProps<typeof DayPicker>): React$1.ReactElement;

package/dist/vendor/coss/calendar.mjs

@@ -0,0 +1,70 @@
+"use client";
+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";
+// 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 */
+function Calendar({ className, classNames, showOutsideDays = true, components: userComponents, mode = "single", ...props }) {
+	const defaultClassNames = {
+		button_next: buttonClassNames,
+		button_previous: buttonClassNames,
+		caption_label: "text-base sm:text-sm font-medium flex items-center gap-2 h-full",
+		day: "size-(--cell-size) text-sm py-px",
+		day_button: cn(buttonClassNames, "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"),
+		dropdown: "absolute bg-popover inset-0 opacity-0",
+		dropdown_root: "relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_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]:-me-1",
+		dropdowns: "w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium",
+		hidden: "invisible",
+		month: "w-full",
+		month_caption: "relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2",
+		months: "relative flex flex-col sm:flex-row gap-2",
+		nav: "absolute top-0 flex w-full justify-between z-1",
+		outside: "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",
+		range_end: "range-end",
+		range_middle: "range-middle",
+		range_start: "range-start",
+		today: "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
+		week_number: "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
+		weekday: "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72"
+	};
+	const mergedClassNames = Object.keys(defaultClassNames).reduce((acc, key) => {
+		const userClass = classNames?.[key];
+		const baseClass = defaultClassNames[key];
+		acc[key] = userClass ? cn(baseClass, userClass) : baseClass;
+		return acc;
+	}, { ...defaultClassNames });
+	const mergedComponents = {
+		Chevron: ({ className, orientation, ...props }) => {
+			if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+				className: cn(className, "rtl:rotate-180"),
+				...props,
+				"aria-hidden": "true"
+			});
+			if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+				className: cn(className, "rtl:rotate-180"),
+				...props,
+				"aria-hidden": "true"
+			});
+			return /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+				className,
+				...props,
+				"aria-hidden": "true"
+			});
+		},
+		...userComponents
+	};
+	const dayPickerProps = {
+		className: cn("w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]", className),
+		classNames: mergedClassNames,
+		components: mergedComponents,
+		"data-slot": "calendar",
+		formatters: { formatMonthDropdown: (month, dateLib) => dateLib.format(month, "LLL") },
+		mode,
+		showOutsideDays,
+		...props
+	};
+	return /* @__PURE__ */ jsx(DayPicker, { ...dayPickerProps });
+}
+export { Calendar };

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { useRender } from "@base-ui/react/use-render";
+type SpacingProps = {
+  /** Gap between card sections. Numbers use the spacing scale. */
+  gap?: CardSpacing;
+  /** Outer inset and horizontal section padding. Numbers use the spacing scale. */
+  spacing?: CardSpacing;
+};
+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;
+export declare function CardAction({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export declare function CardPanel({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export declare function CardFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export { CardPanel as CardContent };

package/dist/vendor/coss/card.mjs

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../shadcn/lib/utils.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/vendor/coss/card.tsx
+function resolveSpacing(value) {
+	return typeof value === "number" ? `calc(var(--spacing) * ${value})` : value;
+}
+function getCardStyle(spacing, gap) {
+	return {
+		...spacing !== void 0 && { "--card-spacing": resolveSpacing(spacing) },
+		...gap !== void 0 && { "--card-gap": resolveSpacing(gap) }
+	};
+}
+function Card({ className, render, gap, spacing, ...props }) {
+	const defaultProps = {
+		className: cn("relative flex flex-col gap-(--card-gap) rounded-2xl border bg-card not-dark:bg-clip-padding py-(--card-spacing) text-card-foreground text-sm shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-[>img:first-child]:pt-0 has-[>img:last-child]:pb-0 *:[img:first-child]:rounded-t-2xl *:[img:last-child]:rounded-b-2xl dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "card",
+		style: getCardStyle(spacing, gap)
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, 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),
+		"data-slot": "card-header"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardTitle({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("font-heading font-semibold text-base leading-normal", className),
+		"data-slot": "card-title"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardDescription({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "card-description"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardAction({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end", className),
+		"data-slot": "card-action"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardPanel({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex-1 px-(--card-spacing)", className),
+		"data-slot": "card-panel"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFooter({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex items-center px-(--card-spacing) [.border-t]:pt-(--card-gap)", className),
+		"data-slot": "card-footer"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+export { Card, CardAction, CardPanel as CardContent, CardPanel, CardDescription, CardFooter, CardFrame, CardFrameAction, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle };

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { useRender } from "@base-ui/react/use-render";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 export declare function DialogTrigger(props: DialogPrimitive.Trigger.Props): React.ReactElement;
 export declare function DialogClose(props: DialogPrimitive.Close.Props): React.ReactElement;
 export declare function DialogPopup({ className, children, showCloseButton, bottomStickOnMobile, closeProps, portalProps, ...props }: DialogPrimitive.Popup.Props & {

package/dist/vendor/coss/dialog.mjs

@@ -4,8 +4,8 @@ import { Button } from "../shadcn/button.mjs";
 import { ScrollArea } from "./scroll-area.mjs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { useRender } from "@base-ui/react/use-render";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
 DialogPrimitive.createHandle;
 const Dialog$1 = DialogPrimitive.Root;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { Form as FormPrimitive } from "@base-ui/react/form";
+/** https://coss.com/ui/docs/components/form */
 export declare function Form({ className, ...props }: FormPrimitive.Props): React.ReactElement;
 export { FormPrimitive };

package/dist/vendor/coss/form.mjs

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Form as FormPrimitive } from "@base-ui/react/form";
 // src/vendor/coss/form.tsx
+/** https://coss.com/ui/docs/components/form */
 function Form({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FormPrimitive, {
 		className,

package/dist/vendor/coss/scroll-area.d.mts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+/** https://coss.com/ui/docs/components/scroll-area */
 declare function ScrollArea$1({ className, children, scrollFade, scrollbarGutter, fill, clampContentMinWidth, overscrollContain, ...props }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;

package/dist/vendor/coss/scroll-area.mjs

@@ -3,6 +3,7 @@ import { cn } from "../shadcn/lib/utils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 // src/vendor/coss/scroll-area.tsx
+/** https://coss.com/ui/docs/components/scroll-area */
 function ScrollArea$1({ className, children, scrollFade = false, scrollbarGutter = false, fill = false, clampContentMinWidth = true, overscrollContain = false, ...props }) {
 	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
 		className: cn("size-full min-h-0", className),

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { useRender } from "@base-ui/react/use-render";
+export type TableVariant = "default" | "card";
+export type TableProps = React.ComponentProps<"table"> & {
+  variant?: TableVariant;
+  render?: useRender.ComponentProps<"div">["render"];
+};
+export declare function Table({ className, variant, render, ...props }: TableProps): React.ReactElement;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.ReactElement;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.ReactElement;
+export declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.ReactElement;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.ReactElement;
+export declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.ReactElement;
+export declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.ReactElement;
+export declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.ReactElement;

package/dist/vendor/coss/table.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "../shadcn/lib/utils.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+// src/vendor/coss/table.tsx
+function Table({ className, variant = "default", render, ...props }) {
+	const defaultProps = {
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn("w-full caption-bottom in-data-[variant=card]:border-separate in-data-[variant=card]:border-spacing-0 text-sm", className),
+			"data-slot": "table",
+			...props
+		}),
+		className: "relative w-full overflow-x-auto",
+		"data-slot": "table-container",
+		"data-variant": variant
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, {}),
+		render
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		className: cn("[&_tr]:border-b", className),
+		"data-slot": "table-header",
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		className: cn("relative in-data-[variant=card]:rounded-xl in-data-[variant=card]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[variant=card]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[variant=card]:*:[tr]:border-0 in-data-[variant=card]:*:[tr]:*:[td]:border-b in-data-[variant=card]:*:[tr]:*:[td]:bg-card in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[variant=card]:*:[tr]:*:[td]:first:border-s in-data-[variant=card]:*:[tr]:first:*:[td]:border-t in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[variant=card]:*:[tr]:*:[td]:last:border-e in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] dark:in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_4%)] dark:in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)]", className),
+		"data-slot": "table-body",
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		className: cn("border-t in-data-[variant=card]:border-none bg-transparent font-medium [&>tr]:last:border-b-0", className),
+		"data-slot": "table-footer",
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		className: cn("relative border-b not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-black)_2%)] not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-black)_4%)] dark:not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-white)_4%)] dark:not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-white)_2%)]", className),
+		"data-slot": "table-row",
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		className: cn("h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0", className),
+		"data-slot": "table-head",
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("whitespace-nowrap bg-clip-padding p-2.5 in-data-[slot=table-footer]:py-3.5 align-middle leading-none in-data-[variant=card]:first:ps-[calc(--spacing(2.5)-1px)] in-data-[variant=card]:last:pe-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0", className),
+		"data-slot": "table-cell",
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		className: cn("in-data-[variant=card]:my-4 mt-4 text-muted-foreground text-sm", className),
+		"data-slot": "table-caption",
+		...props
+	});
+}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/vendor/shadcn/badge.d.mts

@@ -3,5 +3,6 @@ import { useRender } from "@base-ui/react/use-render";
 declare const badgeVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "info" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** https://ui.shadcn.com/docs/components/base/badge */
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/vendor/shadcn/badge.mjs

@@ -17,6 +17,7 @@ const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-cent
 	} },
 	defaultVariants: { variant: "default" }
 });
+/** https://ui.shadcn.com/docs/components/base/badge */
 function Badge({ className, variant = "default", render, ...props }) {
 	return useRender({
 		defaultTagName: "span",

package/dist/vendor/shadcn/button.d.mts

@@ -5,6 +5,7 @@ declare const buttonVariants: (props?: ({
   size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
   pill?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** https://ui.shadcn.com/docs/components/base/button */
 declare function Button$1({ className, variant, size, pill, isPending, disabled, children, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {
   isPending?: boolean;
 }): import("react").JSX.Element;

package/dist/vendor/shadcn/button.mjs

@@ -34,6 +34,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 		size: "default"
 	}
 });
+/** https://ui.shadcn.com/docs/components/base/button */
 function Button$1({ className, variant = "default", size = "default", pill = false, isPending = false, disabled, children, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		"data-slot": "button",

package/dist/vendor/shadcn/checkbox.d.mts

@@ -1,3 +1,4 @@
 import { Checkbox } from "@base-ui/react/checkbox";
+/** https://ui.shadcn.com/docs/components/base/checkbox */
 declare function Checkbox$1({ className, ...props }: Checkbox.Root.Props): import("react").JSX.Element;
 export { Checkbox$1 as Checkbox };

package/dist/vendor/shadcn/checkbox.mjs

@@ -4,6 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
 // src/vendor/shadcn/checkbox.tsx
+/** https://ui.shadcn.com/docs/components/base/checkbox */
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-slot": "checkbox",

package/dist/vendor/shadcn/input.d.mts

@@ -1,3 +1,4 @@
 import * as React$1 from "react";
+/** https://ui.shadcn.com/docs/components/base/input */
 declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
 export { Input };

package/dist/vendor/shadcn/input.mjs

@@ -3,6 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 // src/vendor/shadcn/input.tsx
+/** https://ui.shadcn.com/docs/components/base/input */
 function Input$1({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
 		type,