@arch-cadre/ui 0.0.45 → 0.0.47
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/package.json +6 -3
- package/build.config.js +0 -22
- package/build.config.ts +0 -23
- package/components.json +0 -20
- package/postcss.config.mjs +0 -6
- package/scripts/switchToDist.js +0 -55
- package/scripts/switchToSrc.js +0 -52
- package/src/components/.gitkeep +0 -0
- package/src/components/accordion.tsx +0 -66
- package/src/components/alert-dialog.tsx +0 -157
- package/src/components/alert.tsx +0 -66
- package/src/components/aspect-ratio.tsx +0 -12
- package/src/components/avatar.tsx +0 -53
- package/src/components/badge.tsx +0 -46
- package/src/components/breadcrumb.tsx +0 -111
- package/src/components/button-group.tsx +0 -86
- package/src/components/button.tsx +0 -62
- package/src/components/calendar.tsx +0 -220
- package/src/components/card.tsx +0 -92
- package/src/components/checkbox.tsx +0 -32
- package/src/components/collapsible.tsx +0 -34
- package/src/components/command.tsx +0 -184
- package/src/components/context-menu.tsx +0 -252
- package/src/components/dialog.tsx +0 -143
- package/src/components/drawer.tsx +0 -135
- package/src/components/dropdown-menu.tsx +0 -257
- package/src/components/empty.tsx +0 -105
- package/src/components/field.tsx +0 -251
- package/src/components/form.tsx +0 -170
- package/src/components/hover-card.tsx +0 -44
- package/src/components/input-group.tsx +0 -170
- package/src/components/input-otp.tsx +0 -77
- package/src/components/input.tsx +0 -21
- package/src/components/item.tsx +0 -193
- package/src/components/kbd.tsx +0 -29
- package/src/components/label.tsx +0 -24
- package/src/components/language-switcher.tsx +0 -49
- package/src/components/menubar.tsx +0 -276
- package/src/components/navigation-menu.tsx +0 -168
- package/src/components/pagination.tsx +0 -130
- package/src/components/popover.tsx +0 -48
- package/src/components/progress.tsx +0 -31
- package/src/components/radio-group.tsx +0 -45
- package/src/components/scroll-area.tsx +0 -67
- package/src/components/select.tsx +0 -190
- package/src/components/separator.tsx +0 -28
- package/src/components/sheet.tsx +0 -139
- package/src/components/sidebar.tsx +0 -726
- package/src/components/skeleton.tsx +0 -14
- package/src/components/slider.tsx +0 -63
- package/src/components/sonner.tsx +0 -41
- package/src/components/spinner.tsx +0 -17
- package/src/components/switch.tsx +0 -31
- package/src/components/table.tsx +0 -116
- package/src/components/tabs.tsx +0 -66
- package/src/components/textarea.tsx +0 -18
- package/src/components/toggle-group.tsx +0 -83
- package/src/components/toggle.tsx +0 -47
- package/src/components/tooltip.tsx +0 -61
- package/src/hooks/.gitkeep +0 -0
- package/src/hooks/use-mobile.ts +0 -21
- package/src/hooks/use-user.ts +0 -27
- package/src/index.ts +0 -15
- package/src/lib/utils.ts +0 -6
- package/src/logo.tsx +0 -49
- package/src/postcss.config.mjs +0 -6
- package/src/providers/auth-provider.tsx +0 -66
- package/src/providers/index.tsx +0 -50
- package/src/shared/access-denied.tsx +0 -31
- package/src/shared/loader.tsx +0 -109
- package/src/shared/page-loader.tsx +0 -24
- package/src/shared/scroll-fade-effect.tsx +0 -23
- package/src/styles/globals.css +0 -314
- package/tsconfig.json +0 -25
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { Progress as ProgressPrimitive } from "radix-ui";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils";
|
|
7
|
-
|
|
8
|
-
function Progress({
|
|
9
|
-
className,
|
|
10
|
-
value,
|
|
11
|
-
...props
|
|
12
|
-
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
|
13
|
-
return (
|
|
14
|
-
<ProgressPrimitive.Root
|
|
15
|
-
data-slot="progress"
|
|
16
|
-
className={cn(
|
|
17
|
-
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
|
18
|
-
className,
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<ProgressPrimitive.Indicator
|
|
23
|
-
data-slot="progress-indicator"
|
|
24
|
-
className="bg-primary h-full w-full flex-1 transition-all"
|
|
25
|
-
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
|
26
|
-
/>
|
|
27
|
-
</ProgressPrimitive.Root>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export { Progress };
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { CircleIcon } from "lucide-react";
|
|
4
|
-
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
|
|
7
|
-
import { cn } from "../lib/utils";
|
|
8
|
-
|
|
9
|
-
function RadioGroup({
|
|
10
|
-
className,
|
|
11
|
-
...props
|
|
12
|
-
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
|
13
|
-
return (
|
|
14
|
-
<RadioGroupPrimitive.Root
|
|
15
|
-
data-slot="radio-group"
|
|
16
|
-
className={cn("grid gap-3", className)}
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function RadioGroupItem({
|
|
23
|
-
className,
|
|
24
|
-
...props
|
|
25
|
-
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
|
26
|
-
return (
|
|
27
|
-
<RadioGroupPrimitive.Item
|
|
28
|
-
data-slot="radio-group-item"
|
|
29
|
-
className={cn(
|
|
30
|
-
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
|
31
|
-
className,
|
|
32
|
-
)}
|
|
33
|
-
{...props}
|
|
34
|
-
>
|
|
35
|
-
<RadioGroupPrimitive.Indicator
|
|
36
|
-
data-slot="radio-group-indicator"
|
|
37
|
-
className="relative flex items-center justify-center"
|
|
38
|
-
>
|
|
39
|
-
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
|
40
|
-
</RadioGroupPrimitive.Indicator>
|
|
41
|
-
</RadioGroupPrimitive.Item>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { RadioGroup, RadioGroupItem };
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils";
|
|
7
|
-
|
|
8
|
-
function ScrollArea({
|
|
9
|
-
className,
|
|
10
|
-
children,
|
|
11
|
-
orientation = "vertical",
|
|
12
|
-
...props
|
|
13
|
-
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
|
|
14
|
-
orientation: "vertical" | "horizontal";
|
|
15
|
-
}) {
|
|
16
|
-
return (
|
|
17
|
-
<ScrollAreaPrimitive.Root
|
|
18
|
-
data-slot="scroll-area"
|
|
19
|
-
className={cn("relative", className)}
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<ScrollAreaPrimitive.Viewport
|
|
23
|
-
data-slot="scroll-area-viewport"
|
|
24
|
-
data-orientation={orientation}
|
|
25
|
-
onScroll={props.onScroll}
|
|
26
|
-
className="
|
|
27
|
-
focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1
|
|
28
|
-
data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto
|
|
29
|
-
data-[orientation=horizontal]:scroll-fade-effect-x data-[orientation=vertical]:scroll-fade-effect-y
|
|
30
|
-
"
|
|
31
|
-
>
|
|
32
|
-
{children}
|
|
33
|
-
</ScrollAreaPrimitive.Viewport>
|
|
34
|
-
<ScrollBar />
|
|
35
|
-
<ScrollAreaPrimitive.Corner />
|
|
36
|
-
</ScrollAreaPrimitive.Root>
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function ScrollBar({
|
|
41
|
-
className,
|
|
42
|
-
orientation = "vertical",
|
|
43
|
-
...props
|
|
44
|
-
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
|
45
|
-
return (
|
|
46
|
-
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
47
|
-
data-slot="scroll-area-scrollbar"
|
|
48
|
-
orientation={orientation}
|
|
49
|
-
className={cn(
|
|
50
|
-
"flex touch-none p-px transition-colors select-none",
|
|
51
|
-
orientation === "vertical" &&
|
|
52
|
-
"h-full w-2.5 border-l border-l-transparent",
|
|
53
|
-
orientation === "horizontal" &&
|
|
54
|
-
"h-2.5 flex-col border-t border-t-transparent",
|
|
55
|
-
className,
|
|
56
|
-
)}
|
|
57
|
-
{...props}
|
|
58
|
-
>
|
|
59
|
-
<ScrollAreaPrimitive.ScrollAreaThumb
|
|
60
|
-
data-slot="scroll-area-thumb"
|
|
61
|
-
className="bg-border relative flex-1 rounded-full"
|
|
62
|
-
/>
|
|
63
|
-
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
export { ScrollArea, ScrollBar };
|
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
4
|
-
import { Select as SelectPrimitive } from "radix-ui";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
|
|
7
|
-
import { cn } from "../lib/utils";
|
|
8
|
-
|
|
9
|
-
function Select({
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
|
12
|
-
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function SelectGroup({
|
|
16
|
-
...props
|
|
17
|
-
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
18
|
-
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function SelectValue({
|
|
22
|
-
...props
|
|
23
|
-
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
24
|
-
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function SelectTrigger({
|
|
28
|
-
className,
|
|
29
|
-
size = "default",
|
|
30
|
-
children,
|
|
31
|
-
...props
|
|
32
|
-
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
33
|
-
size?: "sm" | "default";
|
|
34
|
-
}) {
|
|
35
|
-
return (
|
|
36
|
-
<SelectPrimitive.Trigger
|
|
37
|
-
data-slot="select-trigger"
|
|
38
|
-
data-size={size}
|
|
39
|
-
className={cn(
|
|
40
|
-
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
41
|
-
className,
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
>
|
|
45
|
-
{children}
|
|
46
|
-
<SelectPrimitive.Icon asChild>
|
|
47
|
-
<ChevronDownIcon className="size-4 opacity-50" />
|
|
48
|
-
</SelectPrimitive.Icon>
|
|
49
|
-
</SelectPrimitive.Trigger>
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function SelectContent({
|
|
54
|
-
className,
|
|
55
|
-
children,
|
|
56
|
-
position = "item-aligned",
|
|
57
|
-
align = "center",
|
|
58
|
-
...props
|
|
59
|
-
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
|
60
|
-
return (
|
|
61
|
-
<SelectPrimitive.Portal>
|
|
62
|
-
<SelectPrimitive.Content
|
|
63
|
-
data-slot="select-content"
|
|
64
|
-
className={cn(
|
|
65
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
|
66
|
-
position === "popper" &&
|
|
67
|
-
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
68
|
-
className,
|
|
69
|
-
)}
|
|
70
|
-
position={position}
|
|
71
|
-
align={align}
|
|
72
|
-
{...props}
|
|
73
|
-
>
|
|
74
|
-
<SelectScrollUpButton />
|
|
75
|
-
<SelectPrimitive.Viewport
|
|
76
|
-
className={cn(
|
|
77
|
-
"p-1",
|
|
78
|
-
position === "popper" &&
|
|
79
|
-
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
|
|
80
|
-
)}
|
|
81
|
-
>
|
|
82
|
-
{children}
|
|
83
|
-
</SelectPrimitive.Viewport>
|
|
84
|
-
<SelectScrollDownButton />
|
|
85
|
-
</SelectPrimitive.Content>
|
|
86
|
-
</SelectPrimitive.Portal>
|
|
87
|
-
);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function SelectLabel({
|
|
91
|
-
className,
|
|
92
|
-
...props
|
|
93
|
-
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
|
94
|
-
return (
|
|
95
|
-
<SelectPrimitive.Label
|
|
96
|
-
data-slot="select-label"
|
|
97
|
-
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
|
98
|
-
{...props}
|
|
99
|
-
/>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function SelectItem({
|
|
104
|
-
className,
|
|
105
|
-
children,
|
|
106
|
-
...props
|
|
107
|
-
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
|
108
|
-
return (
|
|
109
|
-
<SelectPrimitive.Item
|
|
110
|
-
data-slot="select-item"
|
|
111
|
-
className={cn(
|
|
112
|
-
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
113
|
-
className,
|
|
114
|
-
)}
|
|
115
|
-
{...props}
|
|
116
|
-
>
|
|
117
|
-
<span
|
|
118
|
-
data-slot="select-item-indicator"
|
|
119
|
-
className="absolute right-2 flex size-3.5 items-center justify-center"
|
|
120
|
-
>
|
|
121
|
-
<SelectPrimitive.ItemIndicator>
|
|
122
|
-
<CheckIcon className="size-4" />
|
|
123
|
-
</SelectPrimitive.ItemIndicator>
|
|
124
|
-
</span>
|
|
125
|
-
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
126
|
-
</SelectPrimitive.Item>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function SelectSeparator({
|
|
131
|
-
className,
|
|
132
|
-
...props
|
|
133
|
-
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
|
134
|
-
return (
|
|
135
|
-
<SelectPrimitive.Separator
|
|
136
|
-
data-slot="select-separator"
|
|
137
|
-
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
|
138
|
-
{...props}
|
|
139
|
-
/>
|
|
140
|
-
);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function SelectScrollUpButton({
|
|
144
|
-
className,
|
|
145
|
-
...props
|
|
146
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
147
|
-
return (
|
|
148
|
-
<SelectPrimitive.ScrollUpButton
|
|
149
|
-
data-slot="select-scroll-up-button"
|
|
150
|
-
className={cn(
|
|
151
|
-
"flex cursor-default items-center justify-center py-1",
|
|
152
|
-
className,
|
|
153
|
-
)}
|
|
154
|
-
{...props}
|
|
155
|
-
>
|
|
156
|
-
<ChevronUpIcon className="size-4" />
|
|
157
|
-
</SelectPrimitive.ScrollUpButton>
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
function SelectScrollDownButton({
|
|
162
|
-
className,
|
|
163
|
-
...props
|
|
164
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
165
|
-
return (
|
|
166
|
-
<SelectPrimitive.ScrollDownButton
|
|
167
|
-
data-slot="select-scroll-down-button"
|
|
168
|
-
className={cn(
|
|
169
|
-
"flex cursor-default items-center justify-center py-1",
|
|
170
|
-
className,
|
|
171
|
-
)}
|
|
172
|
-
{...props}
|
|
173
|
-
>
|
|
174
|
-
<ChevronDownIcon className="size-4" />
|
|
175
|
-
</SelectPrimitive.ScrollDownButton>
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
export {
|
|
180
|
-
Select,
|
|
181
|
-
SelectContent,
|
|
182
|
-
SelectGroup,
|
|
183
|
-
SelectItem,
|
|
184
|
-
SelectLabel,
|
|
185
|
-
SelectScrollDownButton,
|
|
186
|
-
SelectScrollUpButton,
|
|
187
|
-
SelectSeparator,
|
|
188
|
-
SelectTrigger,
|
|
189
|
-
SelectValue,
|
|
190
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { Separator as SeparatorPrimitive } from "radix-ui";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils";
|
|
7
|
-
|
|
8
|
-
function Separator({
|
|
9
|
-
className,
|
|
10
|
-
orientation = "horizontal",
|
|
11
|
-
decorative = true,
|
|
12
|
-
...props
|
|
13
|
-
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
|
14
|
-
return (
|
|
15
|
-
<SeparatorPrimitive.Root
|
|
16
|
-
data-slot="separator"
|
|
17
|
-
decorative={decorative}
|
|
18
|
-
orientation={orientation}
|
|
19
|
-
className={cn(
|
|
20
|
-
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
21
|
-
className,
|
|
22
|
-
)}
|
|
23
|
-
{...props}
|
|
24
|
-
/>
|
|
25
|
-
);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { Separator };
|
package/src/components/sheet.tsx
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { XIcon } from "lucide-react";
|
|
4
|
-
import { Dialog as SheetPrimitive } from "radix-ui";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
|
|
7
|
-
import { cn } from "../lib/utils";
|
|
8
|
-
|
|
9
|
-
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
|
10
|
-
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function SheetTrigger({
|
|
14
|
-
...props
|
|
15
|
-
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
|
16
|
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function SheetClose({
|
|
20
|
-
...props
|
|
21
|
-
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
|
22
|
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function SheetPortal({
|
|
26
|
-
...props
|
|
27
|
-
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
|
28
|
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function SheetOverlay({
|
|
32
|
-
className,
|
|
33
|
-
...props
|
|
34
|
-
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
|
35
|
-
return (
|
|
36
|
-
<SheetPrimitive.Overlay
|
|
37
|
-
data-slot="sheet-overlay"
|
|
38
|
-
className={cn(
|
|
39
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
40
|
-
className,
|
|
41
|
-
)}
|
|
42
|
-
{...props}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function SheetContent({
|
|
48
|
-
className,
|
|
49
|
-
children,
|
|
50
|
-
side = "right",
|
|
51
|
-
...props
|
|
52
|
-
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
53
|
-
side?: "top" | "right" | "bottom" | "left";
|
|
54
|
-
}) {
|
|
55
|
-
return (
|
|
56
|
-
<SheetPortal>
|
|
57
|
-
<SheetOverlay />
|
|
58
|
-
<SheetPrimitive.Content
|
|
59
|
-
data-slot="sheet-content"
|
|
60
|
-
className={cn(
|
|
61
|
-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
62
|
-
side === "right" &&
|
|
63
|
-
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
64
|
-
side === "left" &&
|
|
65
|
-
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
66
|
-
side === "top" &&
|
|
67
|
-
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
|
68
|
-
side === "bottom" &&
|
|
69
|
-
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
70
|
-
className,
|
|
71
|
-
)}
|
|
72
|
-
{...props}
|
|
73
|
-
>
|
|
74
|
-
{children}
|
|
75
|
-
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
|
76
|
-
<XIcon className="size-4" />
|
|
77
|
-
<span className="sr-only">Close</span>
|
|
78
|
-
</SheetPrimitive.Close>
|
|
79
|
-
</SheetPrimitive.Content>
|
|
80
|
-
</SheetPortal>
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
85
|
-
return (
|
|
86
|
-
<div
|
|
87
|
-
data-slot="sheet-header"
|
|
88
|
-
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
89
|
-
{...props}
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
95
|
-
return (
|
|
96
|
-
<div
|
|
97
|
-
data-slot="sheet-footer"
|
|
98
|
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
99
|
-
{...props}
|
|
100
|
-
/>
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
function SheetTitle({
|
|
105
|
-
className,
|
|
106
|
-
...props
|
|
107
|
-
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
|
108
|
-
return (
|
|
109
|
-
<SheetPrimitive.Title
|
|
110
|
-
data-slot="sheet-title"
|
|
111
|
-
className={cn("text-foreground font-semibold", className)}
|
|
112
|
-
{...props}
|
|
113
|
-
/>
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
function SheetDescription({
|
|
118
|
-
className,
|
|
119
|
-
...props
|
|
120
|
-
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
|
121
|
-
return (
|
|
122
|
-
<SheetPrimitive.Description
|
|
123
|
-
data-slot="sheet-description"
|
|
124
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
125
|
-
{...props}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
export {
|
|
131
|
-
Sheet,
|
|
132
|
-
SheetTrigger,
|
|
133
|
-
SheetClose,
|
|
134
|
-
SheetContent,
|
|
135
|
-
SheetHeader,
|
|
136
|
-
SheetFooter,
|
|
137
|
-
SheetTitle,
|
|
138
|
-
SheetDescription,
|
|
139
|
-
};
|