@deftui/react 0.0.0-stage → 0.0.2
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 +24 -0
- package/dist/index.mjs +24 -0
- package/dist/styles.css +88 -0
- package/dist/styles.shadcn.css +537 -0
- package/dist/styles.tokens.css +87 -0
- package/dist/vendor/coss/form.d.mts +4 -0
- package/dist/vendor/coss/form.mjs +12 -0
- package/dist/vendor/coss/hooks/use-copy-to-clipboard.d.mts +7 -0
- package/dist/vendor/coss/hooks/use-copy-to-clipboard.mjs +30 -0
- package/dist/vendor/coss/hooks/use-media-query.d.mts +20 -0
- package/dist/vendor/coss/hooks/use-media-query.mjs +57 -0
- package/dist/vendor/coss/scroll-area.d.mts +10 -0
- package/dist/vendor/coss/scroll-area.mjs +39 -0
- package/dist/vendor/shadcn/alert-dialog.d.mts +14 -0
- package/dist/vendor/shadcn/alert-dialog.mjs +80 -0
- package/dist/vendor/shadcn/badge.d.mts +7 -0
- package/dist/vendor/shadcn/badge.mjs +28 -0
- package/dist/vendor/shadcn/breadcrumb.d.mts +10 -0
- package/dist/vendor/shadcn/breadcrumb.mjs +71 -0
- package/dist/vendor/shadcn/button.d.mts +8 -0
- package/dist/vendor/shadcn/button.mjs +43 -0
- package/dist/vendor/shadcn/calendar.d.mts +7 -0
- package/dist/vendor/shadcn/calendar.mjs +107 -0
- package/dist/vendor/shadcn/card.d.mts +11 -0
- package/dist/vendor/shadcn/card.mjs +55 -0
- package/dist/vendor/shadcn/carousel.d.mts +19 -0
- package/dist/vendor/shadcn/carousel.mjs +131 -0
- package/dist/vendor/shadcn/combobox.d.mts +20 -0
- package/dist/vendor/shadcn/combobox.mjs +151 -0
- package/dist/vendor/shadcn/dialog.d.mts +15 -0
- package/dist/vendor/shadcn/dialog.mjs +91 -0
- package/dist/vendor/shadcn/drawer.d.mts +13 -0
- package/dist/vendor/shadcn/drawer.mjs +122 -0
- package/dist/vendor/shadcn/dropdown-menu.d.mts +28 -0
- package/dist/vendor/shadcn/dropdown-menu.mjs +130 -0
- package/dist/vendor/shadcn/empty.d.mts +11 -0
- package/dist/vendor/shadcn/empty.mjs +58 -0
- package/dist/vendor/shadcn/field.d.mts +14 -0
- package/dist/vendor/shadcn/field.mjs +60 -0
- package/dist/vendor/shadcn/input-group.d.mts +12 -0
- package/dist/vendor/shadcn/input-group.mjs +78 -0
- package/dist/vendor/shadcn/input.d.mts +3 -0
- package/dist/vendor/shadcn/input.mjs +14 -0
- package/dist/vendor/shadcn/kbd.d.mts +3 -0
- package/dist/vendor/shadcn/kbd.mjs +18 -0
- package/dist/vendor/shadcn/label.d.mts +3 -0
- package/dist/vendor/shadcn/label.mjs +13 -0
- package/dist/vendor/shadcn/lib/utils.mjs +1 -0
- package/dist/vendor/shadcn/pagination.d.mts +17 -0
- package/dist/vendor/shadcn/pagination.mjs +79 -0
- package/dist/vendor/shadcn/popover.d.mts +8 -0
- package/dist/vendor/shadcn/popover.mjs +47 -0
- package/dist/vendor/shadcn/progress.d.mts +7 -0
- package/dist/vendor/shadcn/progress.mjs +43 -0
- package/dist/vendor/shadcn/radio-group.d.mts +5 -0
- package/dist/vendor/shadcn/radio-group.mjs +26 -0
- package/dist/vendor/shadcn/select.d.mts +12 -0
- package/dist/vendor/shadcn/select.mjs +97 -0
- package/dist/vendor/shadcn/separator.d.mts +3 -0
- package/dist/vendor/shadcn/separator.mjs +14 -0
- package/dist/vendor/shadcn/sheet.mjs +69 -0
- package/dist/vendor/shadcn/sidebar.d.mts +60 -0
- package/dist/vendor/shadcn/sidebar.mjs +366 -0
- package/dist/vendor/shadcn/skeleton.mjs +3 -0
- package/dist/vendor/shadcn/spinner.d.mts +2 -0
- package/dist/vendor/shadcn/spinner.mjs +14 -0
- package/dist/vendor/shadcn/switch.d.mts +5 -0
- package/dist/vendor/shadcn/switch.mjs +18 -0
- package/dist/vendor/shadcn/table.d.mts +9 -0
- package/dist/vendor/shadcn/table.mjs +59 -0
- package/dist/vendor/shadcn/tabs.d.mts +10 -0
- package/dist/vendor/shadcn/tabs.mjs +44 -0
- package/dist/vendor/shadcn/textarea.d.mts +3 -0
- package/dist/vendor/shadcn/textarea.mjs +12 -0
- package/dist/vendor/shadcn/toast.d.mts +5 -0
- package/dist/vendor/shadcn/toast.mjs +122 -0
- package/dist/vendor/shadcn/tooltip.d.mts +5 -0
- package/dist/vendor/shadcn/tooltip.mjs +33 -0
- package/dist/vendor.css +1 -0
- package/dist/widgets/breadcrumb.d.mts +17 -0
- package/dist/widgets/breadcrumb.mjs +22 -0
- package/dist/widgets/datetime-picker.d.mts +25 -0
- package/dist/widgets/datetime-picker.mjs +75 -0
- package/dist/widgets/image-display.d.mts +12 -0
- package/dist/widgets/image-display.mjs +29 -0
- package/dist/widgets/index.d.mts +186 -0
- package/dist/widgets/index.mjs +187 -0
- package/dist/widgets/pagination.d.mts +10 -0
- package/dist/widgets/pagination.mjs +12 -0
- package/dist/widgets/sidebar.d.mts +26 -0
- package/dist/widgets/sidebar.mjs +27 -0
- package/dist/widgets/toast.d.mts +2 -0
- package/dist/widgets/toast.mjs +1 -0
- package/package.json +53 -4
- package/README.md +0 -3
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button, buttonVariants } from "./button.mjs";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
7
|
+
import { DayPicker, getDefaultClassNames } from "@daypicker/react";
|
|
8
|
+
// src/vendor/shadcn/calendar.tsx
|
|
9
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
|
|
10
|
+
const defaultClassNames = getDefaultClassNames();
|
|
11
|
+
return /* @__PURE__ */ jsx(DayPicker, {
|
|
12
|
+
showOutsideDays,
|
|
13
|
+
className: cn("group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
|
|
14
|
+
captionLayout,
|
|
15
|
+
locale,
|
|
16
|
+
formatters: {
|
|
17
|
+
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
|
|
18
|
+
...formatters
|
|
19
|
+
},
|
|
20
|
+
classNames: {
|
|
21
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
22
|
+
months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
|
|
23
|
+
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
24
|
+
nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
|
|
25
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
|
|
26
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
|
|
27
|
+
month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
|
|
28
|
+
dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
|
|
29
|
+
dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
|
|
30
|
+
dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
|
|
31
|
+
caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
|
|
32
|
+
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
|
|
33
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
34
|
+
weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
|
|
35
|
+
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
36
|
+
week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
|
|
37
|
+
week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
|
|
38
|
+
day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
|
|
39
|
+
range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
|
|
40
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
41
|
+
range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
|
|
42
|
+
today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
43
|
+
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
|
|
44
|
+
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
45
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
46
|
+
...classNames
|
|
47
|
+
},
|
|
48
|
+
components: {
|
|
49
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
50
|
+
return /* @__PURE__ */ jsx("div", {
|
|
51
|
+
"data-slot": "calendar",
|
|
52
|
+
ref: rootRef,
|
|
53
|
+
className: cn(className),
|
|
54
|
+
...props
|
|
55
|
+
});
|
|
56
|
+
},
|
|
57
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
58
|
+
if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
59
|
+
className: cn("size-4", className),
|
|
60
|
+
...props
|
|
61
|
+
});
|
|
62
|
+
if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
63
|
+
className: cn("size-4", className),
|
|
64
|
+
...props
|
|
65
|
+
});
|
|
66
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
67
|
+
className: cn("size-4", className),
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
70
|
+
},
|
|
71
|
+
DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
|
|
72
|
+
locale,
|
|
73
|
+
...props
|
|
74
|
+
}),
|
|
75
|
+
WeekNumber: ({ children, ...props }) => {
|
|
76
|
+
return /* @__PURE__ */ jsx("td", {
|
|
77
|
+
...props,
|
|
78
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: "flex size-(--cell-size) items-center justify-center text-center",
|
|
80
|
+
children
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
...components
|
|
85
|
+
},
|
|
86
|
+
...props
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
|
|
90
|
+
const defaultClassNames = getDefaultClassNames();
|
|
91
|
+
const ref = React$1.useRef(null);
|
|
92
|
+
React$1.useEffect(() => {
|
|
93
|
+
if (modifiers.focused) ref.current?.focus();
|
|
94
|
+
}, [modifiers.focused]);
|
|
95
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
96
|
+
variant: "ghost",
|
|
97
|
+
size: "icon",
|
|
98
|
+
"data-day": day.date.toLocaleDateString(locale?.code),
|
|
99
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
100
|
+
"data-range-start": modifiers.range_start,
|
|
101
|
+
"data-range-end": modifiers.range_end,
|
|
102
|
+
"data-range-middle": modifiers.range_middle,
|
|
103
|
+
className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
|
|
104
|
+
...props
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
declare function Card({ className, size, ...props }: React$1.ComponentProps<"div"> & {
|
|
3
|
+
size?: "default" | "sm";
|
|
4
|
+
}): React$1.JSX.Element;
|
|
5
|
+
declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
6
|
+
declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
7
|
+
declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
8
|
+
declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
9
|
+
declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
10
|
+
declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
11
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { cn } from "cn";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
// src/vendor/shadcn/card.tsx
|
|
5
|
+
function Card({ className, size = "default", ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-slot": "card",
|
|
8
|
+
"data-size": size,
|
|
9
|
+
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function CardHeader({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("div", {
|
|
15
|
+
"data-slot": "card-header",
|
|
16
|
+
className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function CardTitle({ className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx("div", {
|
|
22
|
+
"data-slot": "card-title",
|
|
23
|
+
className: cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className),
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function CardDescription({ className, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
"data-slot": "card-description",
|
|
30
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function CardAction({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx("div", {
|
|
36
|
+
"data-slot": "card-action",
|
|
37
|
+
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function CardContent({ className, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx("div", {
|
|
43
|
+
"data-slot": "card-content",
|
|
44
|
+
className: cn("flex flex-col gap-3 px-(--card-spacing)", className),
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function CardFooter({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx("div", {
|
|
50
|
+
"data-slot": "card-footer",
|
|
51
|
+
className: cn("flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Button } from "./button.mjs";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
4
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
7
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
8
|
+
type CarouselProps = {
|
|
9
|
+
opts?: CarouselOptions;
|
|
10
|
+
plugins?: CarouselPlugin;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
};
|
|
14
|
+
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps): React$1.JSX.Element;
|
|
15
|
+
declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
16
|
+
declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
17
|
+
declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
|
|
18
|
+
declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
|
|
19
|
+
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button } from "./button.mjs";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
7
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
8
|
+
// src/vendor/shadcn/carousel.tsx
|
|
9
|
+
const CarouselContext = React$1.createContext(null);
|
|
10
|
+
function useCarousel() {
|
|
11
|
+
const context = React$1.useContext(CarouselContext);
|
|
12
|
+
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
|
|
13
|
+
return context;
|
|
14
|
+
}
|
|
15
|
+
function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
|
|
16
|
+
const [carouselRef, api] = useEmblaCarousel({
|
|
17
|
+
...opts,
|
|
18
|
+
axis: orientation === "horizontal" ? "x" : "y"
|
|
19
|
+
}, plugins);
|
|
20
|
+
const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
|
|
21
|
+
const [canScrollNext, setCanScrollNext] = React$1.useState(false);
|
|
22
|
+
const onSelect = React$1.useCallback((api) => {
|
|
23
|
+
if (!api) return;
|
|
24
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
25
|
+
setCanScrollNext(api.canScrollNext());
|
|
26
|
+
}, []);
|
|
27
|
+
const scrollPrev = React$1.useCallback(() => {
|
|
28
|
+
api?.scrollPrev();
|
|
29
|
+
}, [api]);
|
|
30
|
+
const scrollNext = React$1.useCallback(() => {
|
|
31
|
+
api?.scrollNext();
|
|
32
|
+
}, [api]);
|
|
33
|
+
const handleKeyDown = React$1.useCallback((event) => {
|
|
34
|
+
if (event.key === "ArrowLeft") {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
scrollPrev();
|
|
37
|
+
} else if (event.key === "ArrowRight") {
|
|
38
|
+
event.preventDefault();
|
|
39
|
+
scrollNext();
|
|
40
|
+
}
|
|
41
|
+
}, [scrollPrev, scrollNext]);
|
|
42
|
+
React$1.useEffect(() => {
|
|
43
|
+
if (!api || !setApi) return;
|
|
44
|
+
setApi(api);
|
|
45
|
+
}, [api, setApi]);
|
|
46
|
+
React$1.useEffect(() => {
|
|
47
|
+
if (!api) return;
|
|
48
|
+
onSelect(api);
|
|
49
|
+
api.on("reInit", onSelect);
|
|
50
|
+
api.on("select", onSelect);
|
|
51
|
+
return () => {
|
|
52
|
+
api?.off("select", onSelect);
|
|
53
|
+
};
|
|
54
|
+
}, [api, onSelect]);
|
|
55
|
+
return /* @__PURE__ */ jsx(CarouselContext.Provider, {
|
|
56
|
+
value: {
|
|
57
|
+
carouselRef,
|
|
58
|
+
api,
|
|
59
|
+
opts,
|
|
60
|
+
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
61
|
+
scrollPrev,
|
|
62
|
+
scrollNext,
|
|
63
|
+
canScrollPrev,
|
|
64
|
+
canScrollNext
|
|
65
|
+
},
|
|
66
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
67
|
+
onKeyDownCapture: handleKeyDown,
|
|
68
|
+
className: cn("relative", className),
|
|
69
|
+
role: "region",
|
|
70
|
+
"aria-roledescription": "carousel",
|
|
71
|
+
"data-slot": "carousel",
|
|
72
|
+
...props,
|
|
73
|
+
children
|
|
74
|
+
})
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
function CarouselContent({ className, ...props }) {
|
|
78
|
+
const { carouselRef, orientation } = useCarousel();
|
|
79
|
+
return /* @__PURE__ */ jsx("div", {
|
|
80
|
+
ref: carouselRef,
|
|
81
|
+
className: "overflow-hidden",
|
|
82
|
+
"data-slot": "carousel-content",
|
|
83
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
84
|
+
className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
|
|
85
|
+
...props
|
|
86
|
+
})
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function CarouselItem({ className, ...props }) {
|
|
90
|
+
const { orientation } = useCarousel();
|
|
91
|
+
return /* @__PURE__ */ jsx("div", {
|
|
92
|
+
role: "group",
|
|
93
|
+
"aria-roledescription": "slide",
|
|
94
|
+
"data-slot": "carousel-item",
|
|
95
|
+
className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
|
|
96
|
+
...props
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
100
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
101
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
102
|
+
"data-slot": "carousel-previous",
|
|
103
|
+
variant,
|
|
104
|
+
size,
|
|
105
|
+
className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
|
|
106
|
+
disabled: !canScrollPrev,
|
|
107
|
+
onClick: scrollPrev,
|
|
108
|
+
...props,
|
|
109
|
+
children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
110
|
+
className: "sr-only",
|
|
111
|
+
children: "Previous slide"
|
|
112
|
+
})]
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
116
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
117
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
118
|
+
"data-slot": "carousel-next",
|
|
119
|
+
variant,
|
|
120
|
+
size,
|
|
121
|
+
className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
|
|
122
|
+
disabled: !canScrollNext,
|
|
123
|
+
onClick: scrollNext,
|
|
124
|
+
...props,
|
|
125
|
+
children: [/* @__PURE__ */ jsx(ChevronRightIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
126
|
+
className: "sr-only",
|
|
127
|
+
children: "Next slide"
|
|
128
|
+
})]
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
3
|
+
declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React$1.JSX.Element;
|
|
4
|
+
declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
|
|
5
|
+
showTrigger?: boolean;
|
|
6
|
+
showClear?: boolean;
|
|
7
|
+
}): React$1.JSX.Element;
|
|
8
|
+
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React$1.JSX.Element;
|
|
9
|
+
declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React$1.JSX.Element;
|
|
10
|
+
declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React$1.JSX.Element;
|
|
11
|
+
declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React$1.JSX.Element;
|
|
12
|
+
declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React$1.JSX.Element;
|
|
13
|
+
declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React$1.JSX.Element;
|
|
14
|
+
declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React$1.JSX.Element;
|
|
15
|
+
declare function ComboboxChips({ className, ...props }: React$1.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React$1.JSX.Element;
|
|
16
|
+
declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
|
|
17
|
+
showRemove?: boolean;
|
|
18
|
+
}): React$1.JSX.Element;
|
|
19
|
+
declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React$1.JSX.Element;
|
|
20
|
+
export { ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxValue };
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button } from "./button.mjs";
|
|
3
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
|
|
4
|
+
import { cn } from "cn";
|
|
5
|
+
import "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
8
|
+
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
|
|
9
|
+
// src/vendor/shadcn/combobox.tsx
|
|
10
|
+
const Combobox = ComboboxPrimitive.Root;
|
|
11
|
+
function ComboboxValue({ ...props }) {
|
|
12
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Value, {
|
|
13
|
+
"data-slot": "combobox-value",
|
|
14
|
+
...props
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function ComboboxTrigger({ className, children, ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsxs(ComboboxPrimitive.Trigger, {
|
|
19
|
+
"data-slot": "combobox-trigger",
|
|
20
|
+
className: cn("[&_svg:not([class*='size-'])]:size-4", className),
|
|
21
|
+
...props,
|
|
22
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })]
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function ComboboxClear({ className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Clear, {
|
|
27
|
+
"data-slot": "combobox-clear",
|
|
28
|
+
render: /* @__PURE__ */ jsx(InputGroupButton, {
|
|
29
|
+
variant: "ghost",
|
|
30
|
+
size: "icon-xs"
|
|
31
|
+
}),
|
|
32
|
+
className: cn(className),
|
|
33
|
+
...props,
|
|
34
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
39
|
+
className: cn("w-auto", className),
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
|
|
42
|
+
render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
|
|
43
|
+
...props
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ jsxs(InputGroupAddon, {
|
|
46
|
+
align: "inline-end",
|
|
47
|
+
children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
|
|
48
|
+
size: "icon-xs",
|
|
49
|
+
variant: "ghost",
|
|
50
|
+
render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
|
|
51
|
+
"data-slot": "input-group-button",
|
|
52
|
+
className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
|
|
53
|
+
disabled
|
|
54
|
+
}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
|
|
55
|
+
}),
|
|
56
|
+
children
|
|
57
|
+
]
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
61
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx(ComboboxPrimitive.Positioner, {
|
|
62
|
+
side,
|
|
63
|
+
sideOffset,
|
|
64
|
+
align,
|
|
65
|
+
alignOffset,
|
|
66
|
+
anchor,
|
|
67
|
+
className: "isolate z-50",
|
|
68
|
+
children: /* @__PURE__ */ jsx(ComboboxPrimitive.Popup, {
|
|
69
|
+
"data-slot": "combobox-content",
|
|
70
|
+
"data-chips": !!anchor,
|
|
71
|
+
className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
72
|
+
...props
|
|
73
|
+
})
|
|
74
|
+
}) });
|
|
75
|
+
}
|
|
76
|
+
function ComboboxList({ className, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.List, {
|
|
78
|
+
"data-slot": "combobox-list",
|
|
79
|
+
className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
|
|
80
|
+
...props
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function ComboboxItem({ className, children, ...props }) {
|
|
84
|
+
return /* @__PURE__ */ jsxs(ComboboxPrimitive.Item, {
|
|
85
|
+
"data-slot": "combobox-item",
|
|
86
|
+
className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
87
|
+
...props,
|
|
88
|
+
children: [children, /* @__PURE__ */ jsx(ComboboxPrimitive.ItemIndicator, {
|
|
89
|
+
render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
|
|
90
|
+
children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
|
|
91
|
+
})]
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
function ComboboxGroup({ className, ...props }) {
|
|
95
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Group, {
|
|
96
|
+
"data-slot": "combobox-group",
|
|
97
|
+
className: cn(className),
|
|
98
|
+
...props
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
function ComboboxLabel({ className, ...props }) {
|
|
102
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.GroupLabel, {
|
|
103
|
+
"data-slot": "combobox-label",
|
|
104
|
+
className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
|
|
105
|
+
...props
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
function ComboboxCollection({ ...props }) {
|
|
109
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Collection, {
|
|
110
|
+
"data-slot": "combobox-collection",
|
|
111
|
+
...props
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
function ComboboxEmpty({ className, ...props }) {
|
|
115
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Empty, {
|
|
116
|
+
"data-slot": "combobox-empty",
|
|
117
|
+
className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
|
|
118
|
+
...props
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
function ComboboxChips({ className, ...props }) {
|
|
122
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Chips, {
|
|
123
|
+
"data-slot": "combobox-chips",
|
|
124
|
+
className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
|
|
125
|
+
...props
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
129
|
+
return /* @__PURE__ */ jsxs(ComboboxPrimitive.Chip, {
|
|
130
|
+
"data-slot": "combobox-chip",
|
|
131
|
+
className: cn("flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
|
|
132
|
+
...props,
|
|
133
|
+
children: [children, showRemove && /* @__PURE__ */ jsx(ComboboxPrimitive.ChipRemove, {
|
|
134
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
135
|
+
variant: "ghost",
|
|
136
|
+
size: "icon-xs"
|
|
137
|
+
}),
|
|
138
|
+
className: "-ml-1 opacity-50 hover:opacity-100",
|
|
139
|
+
"data-slot": "combobox-chip-remove",
|
|
140
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
|
|
141
|
+
})]
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
function ComboboxChipsInput({ className, ...props }) {
|
|
145
|
+
return /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
|
|
146
|
+
"data-slot": "combobox-chip-input",
|
|
147
|
+
className: cn("min-w-16 flex-1 outline-none", className),
|
|
148
|
+
...props
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxTrigger, ComboboxValue };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
declare function Dialog$1({ ...props }: DialogPrimitive.Root.Props): React$1.JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React$1.JSX.Element;
|
|
5
|
+
declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React$1.JSX.Element;
|
|
6
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
|
|
7
|
+
showCloseButton?: boolean;
|
|
8
|
+
}): React$1.JSX.Element;
|
|
9
|
+
declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
10
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
|
|
11
|
+
showCloseButton?: boolean;
|
|
12
|
+
}): React$1.JSX.Element;
|
|
13
|
+
declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React$1.JSX.Element;
|
|
14
|
+
declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React$1.JSX.Element;
|
|
15
|
+
export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPrimitive, DialogTitle, DialogTrigger };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button } from "./button.mjs";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { XIcon } from "lucide-react";
|
|
7
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
8
|
+
// src/vendor/shadcn/dialog.tsx
|
|
9
|
+
function Dialog$1({ ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
11
|
+
"data-slot": "dialog",
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function DialogTrigger({ ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
17
|
+
"data-slot": "dialog-trigger",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function DialogPortal({ ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
23
|
+
"data-slot": "dialog-portal",
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function DialogClose({ ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
29
|
+
"data-slot": "dialog-close",
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function DialogOverlay({ className, ...props }) {
|
|
34
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Backdrop, {
|
|
35
|
+
"data-slot": "dialog-overlay",
|
|
36
|
+
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
37
|
+
...props
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Popup, {
|
|
42
|
+
"data-slot": "dialog-content",
|
|
43
|
+
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
44
|
+
...props,
|
|
45
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
46
|
+
"data-slot": "dialog-close",
|
|
47
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
48
|
+
variant: "ghost",
|
|
49
|
+
className: "absolute top-4 right-4",
|
|
50
|
+
size: "icon-sm"
|
|
51
|
+
}),
|
|
52
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
53
|
+
className: "sr-only",
|
|
54
|
+
children: "Close"
|
|
55
|
+
})]
|
|
56
|
+
})]
|
|
57
|
+
})] });
|
|
58
|
+
}
|
|
59
|
+
function DialogHeader({ className, ...props }) {
|
|
60
|
+
return /* @__PURE__ */ jsx("div", {
|
|
61
|
+
"data-slot": "dialog-header",
|
|
62
|
+
className: cn("flex flex-col gap-2", className),
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
67
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
68
|
+
"data-slot": "dialog-footer",
|
|
69
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
70
|
+
...props,
|
|
71
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
72
|
+
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
73
|
+
children: "Close"
|
|
74
|
+
})]
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
function DialogTitle({ className, ...props }) {
|
|
78
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
79
|
+
"data-slot": "dialog-title",
|
|
80
|
+
className: cn("leading-none font-medium", className),
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
function DialogDescription({ className, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
86
|
+
"data-slot": "dialog-description",
|
|
87
|
+
className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
|
|
88
|
+
...props
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogPrimitive, DialogTitle, DialogTrigger };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
3
|
+
declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: DrawerPrimitive.Root.Props & {
|
|
4
|
+
showSwipeHandle?: boolean;
|
|
5
|
+
}): React$1.JSX.Element;
|
|
6
|
+
declare function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props): React$1.JSX.Element;
|
|
7
|
+
declare function DrawerClose({ ...props }: DrawerPrimitive.Close.Props): React$1.JSX.Element;
|
|
8
|
+
declare function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props): React$1.JSX.Element;
|
|
9
|
+
declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
10
|
+
declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
11
|
+
declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React$1.JSX.Element;
|
|
12
|
+
declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React$1.JSX.Element;
|
|
13
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPrimitive, DrawerTitle, DrawerTrigger };
|