@deftui/react 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +2 -6
- package/dist/index.mjs +2 -6
- package/dist/styles.css +0 -1
- package/dist/styles.tokens.css +20 -5
- package/dist/vendor/README.md +6 -6
- package/dist/vendor/coss/alert-dialog.d.mts +15 -0
- package/dist/vendor/coss/alert-dialog.mjs +75 -0
- package/dist/vendor/coss/dialog.d.mts +21 -0
- package/dist/vendor/coss/dialog.mjs +113 -0
- package/dist/vendor/coss/drawer.d.mts +34 -0
- package/dist/vendor/coss/drawer.mjs +158 -0
- package/dist/vendor/coss/empty.mjs +1 -1
- package/dist/vendor/shadcn/breadcrumb.mjs +1 -1
- package/dist/vendor/shadcn/button.d.mts +1 -1
- package/dist/vendor/shadcn/button.mjs +6 -3
- package/dist/vendor/shadcn/combobox.d.mts +1 -3
- package/dist/vendor/shadcn/combobox.mjs +1 -4
- package/dist/vendor/shadcn/sheet.mjs +1 -1
- package/dist/vendor/shadcn/sidebar.d.mts +1 -1
- package/dist/vendor/shadcn/sidebar.mjs +3 -3
- package/dist/vendor/tailored/lightbox.d.mts +1 -1
- package/dist/vendor/tailored/lightbox.mjs +4 -4
- package/dist/widgets/index.d.mts +21 -21
- package/dist/widgets/index.mjs +15 -14
- package/package.json +5 -6
- package/dist/vendor/shadcn/alert-dialog.d.mts +0 -17
- package/dist/vendor/shadcn/alert-dialog.mjs +0 -90
- package/dist/vendor/shadcn/dialog.d.mts +0 -17
- package/dist/vendor/shadcn/dialog.mjs +0 -94
- package/dist/vendor/shadcn/drawer.d.mts +0 -15
- package/dist/vendor/shadcn/drawer.mjs +0 -125
- package/dist/widgets/utils.d.mts +0 -5
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mjs";
|
|
2
2
|
import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
|
|
3
|
-
import { Button } from "./vendor/shadcn/button.mjs";
|
|
4
|
-
import { AlertDialogHandle, createAlertDialogHandle } from "./vendor/shadcn/alert-dialog.mjs";
|
|
5
3
|
import { Separator } from "./vendor/shadcn/separator.mjs";
|
|
6
|
-
import {
|
|
7
|
-
import { DialogHandle, createDialogHandle } from "./vendor/shadcn/dialog.mjs";
|
|
8
|
-
import { DrawerHandle, createDrawerHandle } from "./vendor/shadcn/drawer.mjs";
|
|
4
|
+
import { Button } from "./vendor/shadcn/button.mjs";
|
|
9
5
|
import { Label } from "./vendor/shadcn/label.mjs";
|
|
10
6
|
import { Toaster, toast } from "./vendor/shadcn/toast.mjs";
|
|
11
7
|
import { Input } from "./vendor/shadcn/input.mjs";
|
|
@@ -33,4 +29,4 @@ import { cva } from "class-variance-authority";
|
|
|
33
29
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
34
30
|
import { useDropzone } from "react-dropzone";
|
|
35
31
|
export type * from "react-dropzone";
|
|
36
|
-
export { AlertDialog,
|
|
32
|
+
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 };
|
package/dist/index.mjs
CHANGED
|
@@ -2,13 +2,10 @@ import { useCopyToClipboard } from "./vendor/coss/hooks/use-copy-to-clipboard.mj
|
|
|
2
2
|
import { useIsMobile, useMediaQuery } from "./vendor/coss/hooks/use-media-query.mjs";
|
|
3
3
|
import { Spinner } from "./vendor/shadcn/spinner.mjs";
|
|
4
4
|
import { Button } from "./vendor/shadcn/button.mjs";
|
|
5
|
-
import {
|
|
5
|
+
import { ScrollArea } from "./vendor/coss/scroll-area.mjs";
|
|
6
6
|
import { Separator } from "./vendor/shadcn/separator.mjs";
|
|
7
7
|
import { Input } from "./vendor/shadcn/input.mjs";
|
|
8
8
|
import { Textarea } from "./vendor/shadcn/textarea.mjs";
|
|
9
|
-
import { createComboboxItems } from "./vendor/shadcn/combobox.mjs";
|
|
10
|
-
import { createDialogHandle } from "./vendor/shadcn/dialog.mjs";
|
|
11
|
-
import { createDrawerHandle } from "./vendor/shadcn/drawer.mjs";
|
|
12
9
|
import { Label } from "./vendor/shadcn/label.mjs";
|
|
13
10
|
import { Toaster, toast } from "./vendor/shadcn/toast.mjs";
|
|
14
11
|
import { Skeleton } from "./vendor/shadcn/skeleton.mjs";
|
|
@@ -22,7 +19,6 @@ import { Form } from "./vendor/coss/form.mjs";
|
|
|
22
19
|
import { Badge } from "./vendor/shadcn/badge.mjs";
|
|
23
20
|
import { Switch } from "./vendor/shadcn/switch.mjs";
|
|
24
21
|
import { Checkbox } from "./vendor/shadcn/checkbox.mjs";
|
|
25
|
-
import { ScrollArea } from "./vendor/coss/scroll-area.mjs";
|
|
26
22
|
import { IconSwap } from "./vendor/tailored/icon-swap.mjs";
|
|
27
23
|
import { JsonViewer } from "./vendor/tailored/json-viewer.mjs";
|
|
28
24
|
import { FileTree } from "./vendor/tailored/file-tree.mjs";
|
|
@@ -31,4 +27,4 @@ import { cn } from "cn";
|
|
|
31
27
|
import { cva } from "class-variance-authority";
|
|
32
28
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
33
29
|
import { useDropzone } from "react-dropzone";
|
|
34
|
-
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,
|
|
30
|
+
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 };
|
package/dist/styles.css
CHANGED
package/dist/styles.tokens.css
CHANGED
|
@@ -20,10 +20,15 @@
|
|
|
20
20
|
--primary-foreground: oklch(0.985 0 0);
|
|
21
21
|
--secondary-foreground: oklch(0.205 0 0);
|
|
22
22
|
|
|
23
|
-
--info:
|
|
24
|
-
--warning:
|
|
25
|
-
--success:
|
|
26
|
-
--destructive:
|
|
23
|
+
--info: var(--color-blue-500);
|
|
24
|
+
--warning: var(--color-amber-500);
|
|
25
|
+
--success: var(--color-emerald-500);
|
|
26
|
+
--destructive: var(--color-red-500);
|
|
27
|
+
|
|
28
|
+
--info-foreground: var(--color-blue-700);
|
|
29
|
+
--warning-foreground: var(--color-amber-700);
|
|
30
|
+
--success-foreground: var(--color-emerald-700);
|
|
31
|
+
--destructive-foreground: var(--color-red-700);
|
|
27
32
|
|
|
28
33
|
--chart-1: oklch(0.87 0 0);
|
|
29
34
|
--chart-2: oklch(0.556 0 0);
|
|
@@ -65,10 +70,20 @@
|
|
|
65
70
|
--primary-foreground: oklch(0.205 0 0);
|
|
66
71
|
--secondary-foreground: oklch(0.985 0 0);
|
|
67
72
|
|
|
73
|
+
--info: var(--color-blue-500);
|
|
74
|
+
--warning: var(--color-amber-500);
|
|
75
|
+
--success: var(--color-emerald-500);
|
|
76
|
+
--destructive: oklch(65.51% 0.2212 23.35);
|
|
77
|
+
|
|
78
|
+
--info-foreground: var(--color-blue-400);
|
|
79
|
+
--warning-foreground: var(--color-amber-400);
|
|
80
|
+
--success-foreground: var(--color-emerald-400);
|
|
81
|
+
--destructive-foreground: var(--color-red-400);
|
|
82
|
+
|
|
68
83
|
--info: oklch(0.707 0.165 254.624);
|
|
69
84
|
--warning: oklch(0.828 0.189 84.429);
|
|
70
85
|
--success: oklch(0.792 0.209 151.711);
|
|
71
|
-
--destructive: oklch(0.
|
|
86
|
+
--destructive: oklch(0.655 0.221 23.4);
|
|
72
87
|
|
|
73
88
|
--chart-1: oklch(0.87 0 0);
|
|
74
89
|
--chart-2: oklch(0.556 0 0);
|
package/dist/vendor/README.md
CHANGED
|
@@ -11,24 +11,24 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
|
|
|
11
11
|
|
|
12
12
|
| ID | File | Docs | Modifications |
|
|
13
13
|
| --- | --- | --- | --- |
|
|
14
|
-
| `@coss/
|
|
14
|
+
| `@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` 支持初始打开时的入场动画 |
|
|
15
|
+
| `@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` 支持初始打开时的入场动画 |
|
|
16
|
+
| `@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` 支持初始打开时的入场动画 |
|
|
17
|
+
| `@coss/empty` | [coss/empty.tsx](coss/empty.tsx) | [Empty](https://coss.com/ui/docs/components/empty) | `font-bold text-xl` 换为 `font-semibold text-lg` |
|
|
15
18
|
| `@coss/form` | [coss/form.tsx](coss/form.tsx) | [Form](https://coss.com/ui/docs/components/form) | — |
|
|
16
19
|
| `@coss/scroll-area` | [coss/scroll-area.tsx](coss/scroll-area.tsx) | [Scroll Area](https://coss.com/ui/docs/components/scroll-area) | — |
|
|
17
20
|
| `@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) | — |
|
|
18
21
|
| `@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 默认值一致 |
|
|
19
|
-
| `alert-dialog` | [shadcn/alert-dialog.tsx](shadcn/alert-dialog.tsx) | [Alert Dialog](https://ui.shadcn.com/docs/components/base/alert-dialog) | 额外导出 `createAlertDialogHandle` 及其类型 |
|
|
20
22
|
| `badge` | [shadcn/badge.tsx](shadcn/badge.tsx) | [Badge](https://ui.shadcn.com/docs/components/base/badge) | 提供 `info`、`success`、`warning` 语义变体 |
|
|
21
23
|
| `breadcrumb` | [shadcn/breadcrumb.tsx](shadcn/breadcrumb.tsx) | [Breadcrumb](https://ui.shadcn.com/docs/components/base/breadcrumb) | 未显式指定 `BreadcrumbList` 则自动包裹 |
|
|
22
|
-
| `button` | [shadcn/button.tsx](shadcn/button.tsx) | [Button](https://ui.shadcn.com/docs/components/base/button) | `pill` 提供全圆角;`isPending`
|
|
24
|
+
| `button` | [shadcn/button.tsx](shadcn/button.tsx) | [Button](https://ui.shadcn.com/docs/components/base/button) | `pill` 提供全圆角;`isPending` 提供加载态;提供额外 `destructive` 系列样式变体,`destructive-soft` 保留 shadcn 的浅色危险样式 |
|
|
23
25
|
| `button-group` | [shadcn/button-group.tsx](shadcn/button-group.tsx) | [Button Group](https://ui.shadcn.com/docs/components/base/button-group) | — |
|
|
24
26
|
| `calendar` | [shadcn/calendar.tsx](shadcn/calendar.tsx) | [Calendar](https://ui.shadcn.com/docs/components/base/calendar) | 将 `react-day-picker` 导入改为 `@daypicker/react` |
|
|
25
27
|
| `card` | [shadcn/card.tsx](shadcn/card.tsx) | [Card](https://ui.shadcn.com/docs/components/base/card) | — |
|
|
26
28
|
| `carousel` | [shadcn/carousel.tsx](shadcn/carousel.tsx) | [Carousel](https://ui.shadcn.com/docs/components/base/carousel) | — |
|
|
27
29
|
| `checkbox` | [shadcn/checkbox.tsx](shadcn/checkbox.tsx) | [Checkbox](https://ui.shadcn.com/docs/components/base/checkbox) | — |
|
|
28
|
-
| `combobox` | [shadcn/combobox.tsx](shadcn/combobox.tsx) | [Combobox](https://ui.shadcn.com/docs/components/base/combobox) |
|
|
29
|
-
| `dialog` | [shadcn/dialog.tsx](shadcn/dialog.tsx) | [Dialog](https://ui.shadcn.com/docs/components/base/dialog) | 额外导出 `createDialogHandle` 及其类型 |
|
|
30
|
+
| `combobox` | [shadcn/combobox.tsx](shadcn/combobox.tsx) | [Combobox](https://ui.shadcn.com/docs/components/base/combobox) | 将选中标记移至左侧 |
|
|
30
31
|
| `direction` | [shadcn/direction.tsx](shadcn/direction.tsx) | [Direction](https://ui.shadcn.com/docs/components/base/direction) | — |
|
|
31
|
-
| `drawer` | [shadcn/drawer.tsx](shadcn/drawer.tsx) | [Drawer](https://ui.shadcn.com/docs/components/base/drawer) | 额外导出 `createDrawerHandle` 及其类型 |
|
|
32
32
|
| `dropdown-menu` | [shadcn/dropdown-menu.tsx](shadcn/dropdown-menu.tsx) | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) | — |
|
|
33
33
|
| `field` | [shadcn/field.tsx](shadcn/field.tsx) | [Field](https://ui.shadcn.com/docs/components/base/field) | — |
|
|
34
34
|
| `input` | [shadcn/input.tsx](shadcn/input.tsx) | [Input](https://ui.shadcn.com/docs/components/base/input) | 参考 coss ui 处理自动填充的文字颜色,用背景色过渡抑制浏览器底色、内阴影绘制填充色 |
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
3
|
+
export declare function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): React.ReactElement;
|
|
4
|
+
export declare function AlertDialogPopup({ className, bottomStickOnMobile, portalProps, ...props }: AlertDialogPrimitive.Popup.Props & {
|
|
5
|
+
bottomStickOnMobile?: boolean;
|
|
6
|
+
portalProps?: AlertDialogPrimitive.Portal.Props;
|
|
7
|
+
}): React.ReactElement;
|
|
8
|
+
export declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
|
|
9
|
+
export declare function AlertDialogFooter({ className, variant, ...props }: React.ComponentProps<"div"> & {
|
|
10
|
+
variant?: "default" | "bare";
|
|
11
|
+
}): React.ReactElement;
|
|
12
|
+
export declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props): React.ReactElement;
|
|
13
|
+
export declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props): React.ReactElement;
|
|
14
|
+
export declare function AlertDialogClose(props: AlertDialogPrimitive.Close.Props): React.ReactElement;
|
|
15
|
+
export { AlertDialogPopup as AlertDialogContent, AlertDialogPrimitive };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../shadcn/lib/utils.mjs";
|
|
3
|
+
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
AlertDialogPrimitive.createHandle;
|
|
6
|
+
const AlertDialog = AlertDialogPrimitive.Root;
|
|
7
|
+
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
8
|
+
function AlertDialogTrigger(props) {
|
|
9
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, {
|
|
10
|
+
"data-slot": "alert-dialog-trigger",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function AlertDialogBackdrop({ className, ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Backdrop, {
|
|
16
|
+
className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 starting:opacity-0 supports-[-webkit-touch-callout:none]:absolute", className),
|
|
17
|
+
"data-slot": "alert-dialog-backdrop",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function AlertDialogViewport({ className, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Viewport, {
|
|
23
|
+
className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", className),
|
|
24
|
+
"data-slot": "alert-dialog-viewport",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function AlertDialogPopup({ className, bottomStickOnMobile = true, portalProps, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsxs(AlertDialogPortal, {
|
|
30
|
+
...portalProps,
|
|
31
|
+
children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, {
|
|
32
|
+
className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
|
|
33
|
+
children: /* @__PURE__ */ jsx(AlertDialogPrimitive.Popup, {
|
|
34
|
+
className: cn("relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 starting:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 sm:starting:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:starting:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none", className),
|
|
35
|
+
"data-slot": "alert-dialog-popup",
|
|
36
|
+
...props
|
|
37
|
+
})
|
|
38
|
+
})]
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function AlertDialogHeader({ className, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx("div", {
|
|
43
|
+
className: cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className),
|
|
44
|
+
"data-slot": "alert-dialog-header",
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function AlertDialogFooter({ className, variant = "default", ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx("div", {
|
|
50
|
+
className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "border-t bg-muted/72 py-4", variant === "bare" && "pb-6", className),
|
|
51
|
+
"data-slot": "alert-dialog-footer",
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function AlertDialogTitle({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
57
|
+
className: cn("font-semibold font-heading text-lg leading-none", className),
|
|
58
|
+
"data-slot": "alert-dialog-title",
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function AlertDialogDescription({ className, ...props }) {
|
|
63
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
64
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
65
|
+
"data-slot": "alert-dialog-description",
|
|
66
|
+
...props
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function AlertDialogClose(props) {
|
|
70
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Close, {
|
|
71
|
+
"data-slot": "alert-dialog-close",
|
|
72
|
+
...props
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPortal, AlertDialogPrimitive, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
+
export declare function DialogTrigger(props: DialogPrimitive.Trigger.Props): React.ReactElement;
|
|
5
|
+
export declare function DialogClose(props: DialogPrimitive.Close.Props): React.ReactElement;
|
|
6
|
+
export declare function DialogPopup({ className, children, showCloseButton, bottomStickOnMobile, closeProps, portalProps, ...props }: DialogPrimitive.Popup.Props & {
|
|
7
|
+
showCloseButton?: boolean;
|
|
8
|
+
bottomStickOnMobile?: boolean;
|
|
9
|
+
closeProps?: DialogPrimitive.Close.Props;
|
|
10
|
+
portalProps?: DialogPrimitive.Portal.Props;
|
|
11
|
+
}): React.ReactElement;
|
|
12
|
+
export declare function DialogHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
|
|
13
|
+
export declare function DialogFooter({ className, variant, render, ...props }: useRender.ComponentProps<"div"> & {
|
|
14
|
+
variant?: "default" | "bare";
|
|
15
|
+
}): React.ReactElement;
|
|
16
|
+
export declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.ReactElement;
|
|
17
|
+
export declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.ReactElement;
|
|
18
|
+
export declare function DialogPanel({ className, scrollFade, render, ...props }: useRender.ComponentProps<"div"> & {
|
|
19
|
+
scrollFade?: boolean;
|
|
20
|
+
}): React.ReactElement;
|
|
21
|
+
export { DialogPopup as DialogContent, DialogPrimitive };
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../shadcn/lib/utils.mjs";
|
|
3
|
+
import { Button } from "../shadcn/button.mjs";
|
|
4
|
+
import { ScrollArea } from "./scroll-area.mjs";
|
|
5
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
8
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
9
|
+
import { XIcon } from "lucide-react";
|
|
10
|
+
DialogPrimitive.createHandle;
|
|
11
|
+
const Dialog$1 = DialogPrimitive.Root;
|
|
12
|
+
const DialogPortal = DialogPrimitive.Portal;
|
|
13
|
+
function DialogTrigger(props) {
|
|
14
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
15
|
+
"data-slot": "dialog-trigger",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function DialogClose(props) {
|
|
20
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
21
|
+
"data-slot": "dialog-close",
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function DialogBackdrop({ className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Backdrop, {
|
|
27
|
+
className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 starting:opacity-0 supports-[-webkit-touch-callout:none]:absolute", className),
|
|
28
|
+
"data-slot": "dialog-backdrop",
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function DialogViewport({ className, ...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Viewport, {
|
|
34
|
+
className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", className),
|
|
35
|
+
"data-slot": "dialog-viewport",
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function DialogPopup({ className, children, showCloseButton = true, bottomStickOnMobile = true, closeProps, portalProps, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
41
|
+
...portalProps,
|
|
42
|
+
children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsx(DialogViewport, {
|
|
43
|
+
className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
|
|
44
|
+
children: /* @__PURE__ */ jsxs(DialogPrimitive.Popup, {
|
|
45
|
+
className: cn("relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 starting:opacity-0 motion-reduce:transition-opacity sm:scale-[calc(1-0.1*var(--nested-dialogs))] motion-safe:sm:data-ending-style:scale-98 motion-safe:sm:data-starting-style:scale-98 motion-safe:sm:starting:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 motion-safe:max-sm:data-ending-style:translate-y-4 motion-safe:max-sm:data-starting-style:translate-y-4 motion-safe:max-sm:starting:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none", className),
|
|
46
|
+
"data-slot": "dialog-popup",
|
|
47
|
+
...props,
|
|
48
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
49
|
+
"aria-label": "Close",
|
|
50
|
+
className: "absolute end-2 top-2",
|
|
51
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
52
|
+
size: "icon",
|
|
53
|
+
variant: "ghost"
|
|
54
|
+
}),
|
|
55
|
+
...closeProps,
|
|
56
|
+
children: /* @__PURE__ */ jsx(XIcon, {})
|
|
57
|
+
})]
|
|
58
|
+
})
|
|
59
|
+
})]
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function DialogHeader({ className, render, ...props }) {
|
|
63
|
+
const defaultProps = {
|
|
64
|
+
className: cn("flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4", className),
|
|
65
|
+
"data-slot": "dialog-header"
|
|
66
|
+
};
|
|
67
|
+
return useRender({
|
|
68
|
+
defaultTagName: "div",
|
|
69
|
+
props: mergeProps(defaultProps, props),
|
|
70
|
+
render
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
function DialogFooter({ className, variant = "default", render, ...props }) {
|
|
74
|
+
const defaultProps = {
|
|
75
|
+
className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "border-t bg-muted/72 py-4", variant === "bare" && "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6", className),
|
|
76
|
+
"data-slot": "dialog-footer"
|
|
77
|
+
};
|
|
78
|
+
return useRender({
|
|
79
|
+
defaultTagName: "div",
|
|
80
|
+
props: mergeProps(defaultProps, props),
|
|
81
|
+
render
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
function DialogTitle({ className, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
86
|
+
className: cn("font-semibold font-heading text-lg leading-none", className),
|
|
87
|
+
"data-slot": "dialog-title",
|
|
88
|
+
...props
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
function DialogDescription({ className, ...props }) {
|
|
92
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
93
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
94
|
+
"data-slot": "dialog-description",
|
|
95
|
+
...props
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
function DialogPanel({ className, scrollFade = true, render, ...props }) {
|
|
99
|
+
const defaultProps = {
|
|
100
|
+
className: cn("p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1", className),
|
|
101
|
+
"data-slot": "dialog-panel"
|
|
102
|
+
};
|
|
103
|
+
return /* @__PURE__ */ jsx(ScrollArea, {
|
|
104
|
+
overscrollContain: true,
|
|
105
|
+
scrollFade,
|
|
106
|
+
children: useRender({
|
|
107
|
+
defaultTagName: "div",
|
|
108
|
+
props: mergeProps(defaultProps, props),
|
|
109
|
+
render
|
|
110
|
+
})
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
export { Dialog$1 as Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogPrimitive, DialogTitle, DialogTrigger, DialogViewport };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
import { Checkbox } from "@base-ui/react/checkbox";
|
|
4
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
5
|
+
import { Radio } from "@base-ui/react/radio";
|
|
6
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
7
|
+
type DrawerPosition = "right" | "left" | "top" | "bottom";
|
|
8
|
+
export declare function Drawer({ swipeDirection, position, ...props }: DrawerPrimitive.Root.Props & {
|
|
9
|
+
position?: DrawerPosition;
|
|
10
|
+
}): React.ReactElement;
|
|
11
|
+
export declare function DrawerTrigger(props: DrawerPrimitive.Trigger.Props): React.ReactElement;
|
|
12
|
+
export declare function DrawerClose(props: DrawerPrimitive.Close.Props): React.ReactElement;
|
|
13
|
+
export declare function DrawerPopup({ className, children, showCloseButton, position: positionProp, variant, showBar, portalProps, ...props }: DrawerPrimitive.Popup.Props & {
|
|
14
|
+
showCloseButton?: boolean;
|
|
15
|
+
position?: DrawerPosition;
|
|
16
|
+
variant?: "default" | "straight" | "inset";
|
|
17
|
+
showBar?: boolean;
|
|
18
|
+
portalProps?: DrawerPrimitive.Portal.Props;
|
|
19
|
+
}): React.ReactElement;
|
|
20
|
+
export declare function DrawerHeader({ className, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
|
|
21
|
+
allowSelection?: boolean;
|
|
22
|
+
}): React.ReactElement;
|
|
23
|
+
export declare function DrawerFooter({ className, variant, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
|
|
24
|
+
variant?: "default" | "bare";
|
|
25
|
+
allowSelection?: boolean;
|
|
26
|
+
}): React.ReactElement;
|
|
27
|
+
export declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.ReactElement;
|
|
28
|
+
export declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.ReactElement;
|
|
29
|
+
export declare function DrawerPanel({ className, scrollFade, scrollable, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
|
|
30
|
+
scrollFade?: boolean;
|
|
31
|
+
scrollable?: boolean;
|
|
32
|
+
allowSelection?: boolean;
|
|
33
|
+
}): React.ReactElement;
|
|
34
|
+
export { DrawerPrimitive };
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../shadcn/lib/utils.mjs";
|
|
3
|
+
import { Button } from "../shadcn/button.mjs";
|
|
4
|
+
import { ScrollArea } from "./scroll-area.mjs";
|
|
5
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
6
|
+
import { createContext, useContext } from "react";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
9
|
+
import { XIcon } from "lucide-react";
|
|
10
|
+
import "@base-ui/react/checkbox";
|
|
11
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
12
|
+
import "@base-ui/react/radio";
|
|
13
|
+
import "@base-ui/react/radio-group";
|
|
14
|
+
// src/vendor/coss/drawer.tsx
|
|
15
|
+
const DrawerContext = createContext({ position: "bottom" });
|
|
16
|
+
const directionMap = {
|
|
17
|
+
bottom: "down",
|
|
18
|
+
left: "left",
|
|
19
|
+
right: "right",
|
|
20
|
+
top: "up"
|
|
21
|
+
};
|
|
22
|
+
DrawerPrimitive.createHandle;
|
|
23
|
+
function Drawer({ swipeDirection, position = "bottom", ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsx(DrawerContext.Provider, {
|
|
25
|
+
value: { position },
|
|
26
|
+
children: /* @__PURE__ */ jsx(DrawerPrimitive.Root, {
|
|
27
|
+
swipeDirection: swipeDirection ?? directionMap[position],
|
|
28
|
+
...props
|
|
29
|
+
})
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
const DrawerPortal = DrawerPrimitive.Portal;
|
|
33
|
+
function DrawerTrigger(props) {
|
|
34
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, {
|
|
35
|
+
"data-slot": "drawer-trigger",
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function DrawerClose(props) {
|
|
40
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
|
|
41
|
+
"data-slot": "drawer-close",
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function DrawerBackdrop({ className, ...props }) {
|
|
46
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, {
|
|
47
|
+
className: cn("fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 starting:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute", className),
|
|
48
|
+
"data-slot": "drawer-backdrop",
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function DrawerViewport({ className, position, variant = "default", ...props }) {
|
|
53
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
|
|
54
|
+
className: cn("fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]", "touch-none", position === "bottom" && "grid grid-rows-[1fr_auto] pt-[max(--spacing(2),env(safe-area-inset-top,0px))]", position === "top" && "grid grid-rows-[auto_1fr] pb-12", position === "left" && "flex justify-start", position === "right" && "flex justify-end", variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", className),
|
|
55
|
+
"data-slot": "drawer-viewport",
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function DrawerPopup({ className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, portalProps, ...props }) {
|
|
60
|
+
const { position: contextPosition } = useContext(DrawerContext);
|
|
61
|
+
const position = positionProp ?? contextPosition;
|
|
62
|
+
const popup = /* @__PURE__ */ jsxs(DrawerPortal, {
|
|
63
|
+
...portalProps,
|
|
64
|
+
children: [/* @__PURE__ */ jsx(DrawerBackdrop, {}), /* @__PURE__ */ jsx(DrawerViewport, {
|
|
65
|
+
position,
|
|
66
|
+
variant,
|
|
67
|
+
children: /* @__PURE__ */ jsxs(DrawerPrimitive.Popup, {
|
|
68
|
+
className: cn("relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent starting:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "touch-none", position === "bottom" && "transform-[translateY(calc(var(--keyboard-snap-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] starting:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--keyboard-snap-offset)+clamp(0,1,var(--keyboard-snap-offset)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(max(env(safe-area-inset-bottom,0px),var(--drawer-keyboard-inset,0px))+var(--keyboard-snap-offset)+clamp(0,1,var(--keyboard-snap-offset)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] [--keyboard-snap-offset:max(0px,calc(var(--drawer-snap-point-offset,0px)-var(--drawer-keyboard-inset,0px)))] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 starting:mb-0 data-ending-style:pb-0 data-starting-style:pb-0 starting:pb-0", position === "top" && "data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] starting:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2", position === "left" && "data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] starting:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2", position === "right" && "transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] starting:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2", variant !== "straight" && cn(position === "bottom" && "rounded-t-2xl", position === "top" && "rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]", position === "right" && "rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]"), variant === "default" && cn(position === "bottom" && "before:rounded-t-[calc(var(--radius-2xl)-1px)]", position === "top" && "before:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "before:rounded-e-[calc(var(--radius-2xl)-1px)]", position === "right" && "before:rounded-s-[calc(var(--radius-2xl)-1px)]"), variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "straight" && "[--stack-step:0]", (position === "bottom" || position === "top") && "h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)", position === "bottom" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]", position === "top" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]", position === "left" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right", position === "right" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left", className),
|
|
69
|
+
"data-slot": "drawer-popup",
|
|
70
|
+
...props,
|
|
71
|
+
children: [
|
|
72
|
+
children,
|
|
73
|
+
showCloseButton && /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
|
|
74
|
+
"aria-label": "Close",
|
|
75
|
+
className: "absolute end-2 top-2 z-1",
|
|
76
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
77
|
+
size: "icon",
|
|
78
|
+
variant: "ghost"
|
|
79
|
+
}),
|
|
80
|
+
children: /* @__PURE__ */ jsx(XIcon, {})
|
|
81
|
+
}),
|
|
82
|
+
showBar && /* @__PURE__ */ jsx(DrawerBar, {})
|
|
83
|
+
]
|
|
84
|
+
})
|
|
85
|
+
})]
|
|
86
|
+
});
|
|
87
|
+
return position === "bottom" ? /* @__PURE__ */ jsx(DrawerPrimitive.VirtualKeyboardProvider, { children: popup }) : popup;
|
|
88
|
+
}
|
|
89
|
+
function DrawerHeader({ className, allowSelection = false, render, ...props }) {
|
|
90
|
+
const defaultProps = {
|
|
91
|
+
className: cn("flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4", !allowSelection && "cursor-default", className),
|
|
92
|
+
"data-slot": "drawer-header"
|
|
93
|
+
};
|
|
94
|
+
return useRender({
|
|
95
|
+
defaultTagName: "div",
|
|
96
|
+
props: mergeProps(defaultProps, props),
|
|
97
|
+
render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
function DrawerFooter({ className, variant = "default", allowSelection = true, render, ...props }) {
|
|
101
|
+
const defaultProps = {
|
|
102
|
+
className: cn("flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end", !allowSelection && "cursor-default", variant === "default" && "border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]", variant === "bare" && "in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]", className),
|
|
103
|
+
"data-slot": "drawer-footer"
|
|
104
|
+
};
|
|
105
|
+
return useRender({
|
|
106
|
+
defaultTagName: "div",
|
|
107
|
+
props: mergeProps(defaultProps, props),
|
|
108
|
+
render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
function DrawerTitle({ className, ...props }) {
|
|
112
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Title, {
|
|
113
|
+
className: cn("font-semibold font-heading text-lg leading-none", className),
|
|
114
|
+
"data-slot": "drawer-title",
|
|
115
|
+
...props
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
function DrawerDescription({ className, ...props }) {
|
|
119
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Description, {
|
|
120
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
121
|
+
"data-slot": "drawer-description",
|
|
122
|
+
...props
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
function DrawerPanel({ className, scrollFade = true, scrollable = true, allowSelection = true, render, ...props }) {
|
|
126
|
+
const defaultProps = {
|
|
127
|
+
className: cn("p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1", !allowSelection && "cursor-default", className),
|
|
128
|
+
"data-slot": "drawer-panel"
|
|
129
|
+
};
|
|
130
|
+
const content = useRender({
|
|
131
|
+
defaultTagName: "div",
|
|
132
|
+
props: mergeProps(defaultProps, props),
|
|
133
|
+
render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
|
|
134
|
+
});
|
|
135
|
+
if (scrollable) return /* @__PURE__ */ jsx(ScrollArea, {
|
|
136
|
+
className: "touch-auto *:data-[slot=scroll-area-viewport]:pb-0!",
|
|
137
|
+
overscrollContain: true,
|
|
138
|
+
scrollFade,
|
|
139
|
+
children: content
|
|
140
|
+
});
|
|
141
|
+
return content;
|
|
142
|
+
}
|
|
143
|
+
function DrawerBar({ className, position: positionProp, render, ...props }) {
|
|
144
|
+
const { position: contextPosition } = useContext(DrawerContext);
|
|
145
|
+
const position = positionProp ?? contextPosition;
|
|
146
|
+
const defaultProps = {
|
|
147
|
+
"aria-hidden": true,
|
|
148
|
+
className: cn("absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input", position === "left" || position === "right" ? "inset-y-0 before:h-12 before:w-1" : "inset-x-0 before:h-1 before:w-12", position === "top" && "bottom-0", position === "bottom" && "top-0", position === "left" && "right-0", position === "right" && "left-0", className),
|
|
149
|
+
"data-slot": "drawer-bar"
|
|
150
|
+
};
|
|
151
|
+
return useRender({
|
|
152
|
+
defaultTagName: "div",
|
|
153
|
+
props: mergeProps(defaultProps, props),
|
|
154
|
+
render
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
const DrawerContent = DrawerPrimitive.Content;
|
|
158
|
+
export { Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerTitle, DrawerTrigger, DrawerViewport };
|
|
@@ -52,7 +52,7 @@ function EmptyMedia({ className, variant = "default", ...props }) {
|
|
|
52
52
|
}
|
|
53
53
|
function EmptyTitle({ className, ...props }) {
|
|
54
54
|
return /* @__PURE__ */ jsx("div", {
|
|
55
|
-
className: cn("font-
|
|
55
|
+
className: cn("font-semibold font-heading text-lg", className),
|
|
56
56
|
"data-slot": "empty-title",
|
|
57
57
|
...props
|
|
58
58
|
});
|
|
@@ -2,8 +2,8 @@ import { cn } from "cn";
|
|
|
2
2
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
6
5
|
import { useRender } from "@base-ui/react/use-render";
|
|
6
|
+
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
7
7
|
// src/vendor/shadcn/breadcrumb.tsx
|
|
8
8
|
function containsBreadcrumbList(children) {
|
|
9
9
|
return React$1.Children.toArray(children).some((child) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from "class-variance-authority";
|
|
2
2
|
import { Button } from "@base-ui/react/button";
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
|
|
4
|
+
variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "destructive-soft" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
|
|
5
5
|
size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
|
|
6
6
|
pill?: boolean | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -8,11 +8,14 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
|
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
10
|
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
11
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
12
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
11
13
|
outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
12
14
|
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
13
|
-
|
|
14
|
-
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
15
|
-
|
|
15
|
+
destructive: "bg-destructive text-white hover:bg-[color-mix(in_oklch,var(--destructive),var(--foreground)_5%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
16
|
+
"destructive-soft": "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
17
|
+
"destructive-ghost": "text-destructive hover:bg-destructive/10 aria-expanded:bg-destructive/10 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:hover:bg-destructive/20 dark:aria-expanded:bg-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
18
|
+
"destructive-outline": "border-border bg-background text-destructive shadow-xs hover:border-destructive/32 hover:bg-destructive/10 aria-expanded:border-destructive/32 aria-expanded:bg-destructive/10 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:border-input dark:bg-input/30 dark:hover:border-destructive/32 dark:aria-expanded:border-destructive/32 dark:aria-expanded:bg-destructive/20 dark:focus-visible:ring-destructive/40"
|
|
16
19
|
},
|
|
17
20
|
size: {
|
|
18
21
|
default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|