mobigrid-module 1.1.6 → 1.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/CustomTable/CustomTable.d.ts +8 -0
- package/dist/components/CustomTable/Pagination.d.ts +8 -0
- package/dist/components/Icon.d.ts +6 -0
- package/dist/components/InvalidConfig.d.ts +2 -0
- package/dist/components/Layout/PageHeader.d.ts +13 -0
- package/dist/components/LoadingConfig.d.ts +2 -0
- package/dist/components/ui/alert.d.ts +8 -0
- package/dist/components/ui/button.d.ts +11 -0
- package/dist/components/ui/calendar.d.ts +8 -0
- package/dist/components/ui/date-picker-with-range.d.ts +7 -0
- package/dist/components/ui/dialog.d.ts +19 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/pagination.d.ts +28 -0
- package/dist/components/ui/popover.d.ts +7 -0
- package/dist/components/ui/select.d.ts +13 -0
- package/dist/components/ui/sonner.d.ts +5 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/index.cjs +53 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.esm.js +70 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +53 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/vite.config.d.ts +2 -0
- package/package.json +12 -9
- package/components/CustomTable/CustomTable.tsx +0 -182
- package/components/CustomTable/Pagination.tsx +0 -136
- package/components/Icon.tsx +0 -27
- package/components/InvalidConfig.tsx +0 -26
- package/components/Layout/PageHeader.tsx +0 -270
- package/components/LoadingConfig.tsx +0 -38
- package/components/ui/alert.tsx +0 -59
- package/components/ui/button.tsx +0 -57
- package/components/ui/calendar.tsx +0 -99
- package/components/ui/date-picker-with-range.tsx +0 -176
- package/components/ui/dialog.tsx +0 -132
- package/components/ui/input.tsx +0 -22
- package/components/ui/pagination.tsx +0 -142
- package/components/ui/popover.tsx +0 -31
- package/components/ui/select.tsx +0 -208
- package/components/ui/sonner.tsx +0 -30
- package/components/ui/table.tsx +0 -120
- package/index.d.ts +0 -55
- package/index.tsx +0 -209
- package/lib/utils.ts +0 -6
- package/tsconfig.json +0 -36
@@ -1,38 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
|
3
|
-
export default function LoadingConfig() {
|
4
|
-
return (
|
5
|
-
<div
|
6
|
-
style={{
|
7
|
-
display: "flex",
|
8
|
-
justifyContent: "center",
|
9
|
-
alignItems: "center",
|
10
|
-
height: "100vh",
|
11
|
-
}}
|
12
|
-
>
|
13
|
-
<div style={{ position: "absolute" }}>
|
14
|
-
<svg
|
15
|
-
className="animate-spin h-5 w-5 mx-auto mb-2"
|
16
|
-
xmlns="http://www.w3.org/2000/svg"
|
17
|
-
fill="none"
|
18
|
-
viewBox="0 0 24 24"
|
19
|
-
>
|
20
|
-
<circle
|
21
|
-
className="opacity-25"
|
22
|
-
cx="12"
|
23
|
-
cy="12"
|
24
|
-
r="10"
|
25
|
-
stroke="currentColor"
|
26
|
-
strokeWidth="4"
|
27
|
-
></circle>
|
28
|
-
<path
|
29
|
-
className="opacity-75"
|
30
|
-
fill="currentColor"
|
31
|
-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
32
|
-
></path>
|
33
|
-
</svg>
|
34
|
-
<div>Loading configuration...</div>
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
);
|
38
|
-
}
|
package/components/ui/alert.tsx
DELETED
@@ -1,59 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
3
|
-
|
4
|
-
import { cn } from "../../lib/utils"
|
5
|
-
|
6
|
-
const alertVariants = cva(
|
7
|
-
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
8
|
-
{
|
9
|
-
variants: {
|
10
|
-
variant: {
|
11
|
-
default: "bg-background text-foreground",
|
12
|
-
destructive:
|
13
|
-
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
14
|
-
},
|
15
|
-
},
|
16
|
-
defaultVariants: {
|
17
|
-
variant: "default",
|
18
|
-
},
|
19
|
-
}
|
20
|
-
)
|
21
|
-
|
22
|
-
const Alert = React.forwardRef<
|
23
|
-
HTMLDivElement,
|
24
|
-
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
25
|
-
>(({ className, variant, ...props }, ref) => (
|
26
|
-
<div
|
27
|
-
ref={ref}
|
28
|
-
role="alert"
|
29
|
-
className={cn(alertVariants({ variant }), className)}
|
30
|
-
{...props}
|
31
|
-
/>
|
32
|
-
))
|
33
|
-
Alert.displayName = "Alert"
|
34
|
-
|
35
|
-
const AlertTitle = React.forwardRef<
|
36
|
-
HTMLParagraphElement,
|
37
|
-
React.HTMLAttributes<HTMLHeadingElement>
|
38
|
-
>(({ className, ...props }, ref) => (
|
39
|
-
<h5
|
40
|
-
ref={ref}
|
41
|
-
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
42
|
-
{...props}
|
43
|
-
/>
|
44
|
-
))
|
45
|
-
AlertTitle.displayName = "AlertTitle"
|
46
|
-
|
47
|
-
const AlertDescription = React.forwardRef<
|
48
|
-
HTMLParagraphElement,
|
49
|
-
React.HTMLAttributes<HTMLParagraphElement>
|
50
|
-
>(({ className, ...props }, ref) => (
|
51
|
-
<div
|
52
|
-
ref={ref}
|
53
|
-
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
54
|
-
{...props}
|
55
|
-
/>
|
56
|
-
))
|
57
|
-
AlertDescription.displayName = "AlertDescription"
|
58
|
-
|
59
|
-
export { Alert, AlertTitle, AlertDescription }
|
package/components/ui/button.tsx
DELETED
@@ -1,57 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
4
|
-
|
5
|
-
import { cn } from "../../lib/utils"
|
6
|
-
|
7
|
-
const buttonVariants = cva(
|
8
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
9
|
-
{
|
10
|
-
variants: {
|
11
|
-
variant: {
|
12
|
-
default:
|
13
|
-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
14
|
-
destructive:
|
15
|
-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
16
|
-
outline:
|
17
|
-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
18
|
-
secondary:
|
19
|
-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
20
|
-
ghost: "hover:bg-accent hover:text-accent-foreground",
|
21
|
-
link: "text-primary underline-offset-4 hover:underline",
|
22
|
-
},
|
23
|
-
size: {
|
24
|
-
default: "h-9 px-4 py-2",
|
25
|
-
sm: "h-8 rounded-md px-3 text-xs",
|
26
|
-
lg: "h-10 rounded-md px-8",
|
27
|
-
icon: "h-9 w-9",
|
28
|
-
},
|
29
|
-
},
|
30
|
-
defaultVariants: {
|
31
|
-
variant: "default",
|
32
|
-
size: "default",
|
33
|
-
},
|
34
|
-
}
|
35
|
-
)
|
36
|
-
|
37
|
-
export interface ButtonProps
|
38
|
-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
39
|
-
VariantProps<typeof buttonVariants> {
|
40
|
-
asChild?: boolean
|
41
|
-
}
|
42
|
-
|
43
|
-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
44
|
-
({ className, variant, size, asChild = false, ...props }, ref) => {
|
45
|
-
const Comp = asChild ? Slot : "button"
|
46
|
-
return (
|
47
|
-
<Comp
|
48
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
49
|
-
ref={ref}
|
50
|
-
{...props}
|
51
|
-
/>
|
52
|
-
)
|
53
|
-
}
|
54
|
-
)
|
55
|
-
Button.displayName = "Button"
|
56
|
-
|
57
|
-
export { Button, buttonVariants }
|
@@ -1,99 +0,0 @@
|
|
1
|
-
import * as React from "react";
|
2
|
-
import { DayPicker } from "react-day-picker";
|
3
|
-
|
4
|
-
import { cn } from "../../lib/utils";
|
5
|
-
import { buttonVariants } from "./button";
|
6
|
-
|
7
|
-
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
|
8
|
-
|
9
|
-
function Calendar({
|
10
|
-
className,
|
11
|
-
classNames,
|
12
|
-
showOutsideDays = true,
|
13
|
-
...props
|
14
|
-
}: CalendarProps) {
|
15
|
-
return (
|
16
|
-
<DayPicker
|
17
|
-
showOutsideDays={showOutsideDays}
|
18
|
-
className={cn("p-3", className)}
|
19
|
-
classNames={{
|
20
|
-
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
21
|
-
month: "space-y-4",
|
22
|
-
caption: "flex justify-center pt-1 relative items-center",
|
23
|
-
caption_label: "text-sm font-medium",
|
24
|
-
nav: "space-x-1 flex items-center",
|
25
|
-
nav_button: cn(
|
26
|
-
buttonVariants({ variant: "outline" }),
|
27
|
-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
28
|
-
),
|
29
|
-
nav_button_previous: "absolute left-1",
|
30
|
-
nav_button_next: "absolute right-1",
|
31
|
-
table: "w-full border-collapse space-y-1",
|
32
|
-
head_row: "flex",
|
33
|
-
head_cell:
|
34
|
-
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
|
35
|
-
row: "flex w-full mt-2",
|
36
|
-
cell: cn(
|
37
|
-
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
|
38
|
-
props.mode === "range"
|
39
|
-
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
|
40
|
-
: "[&:has([aria-selected])]:rounded-md"
|
41
|
-
),
|
42
|
-
day: cn(
|
43
|
-
buttonVariants({ variant: "ghost" }),
|
44
|
-
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
|
45
|
-
),
|
46
|
-
day_range_start: "day-range-start",
|
47
|
-
day_range_end: "day-range-end",
|
48
|
-
day_selected:
|
49
|
-
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
50
|
-
day_today: "bg-accent text-accent-foreground",
|
51
|
-
day_outside:
|
52
|
-
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
|
53
|
-
day_disabled: "text-muted-foreground opacity-50",
|
54
|
-
day_range_middle:
|
55
|
-
"aria-selected:bg-accent aria-selected:text-accent-foreground",
|
56
|
-
day_hidden: "invisible",
|
57
|
-
...classNames,
|
58
|
-
}}
|
59
|
-
components={{
|
60
|
-
IconLeft: () => (
|
61
|
-
<svg
|
62
|
-
xmlns="http://www.w3.org/2000/svg"
|
63
|
-
fill="none"
|
64
|
-
viewBox="0 0 24 24"
|
65
|
-
strokeWidth="1.5"
|
66
|
-
stroke="currentColor"
|
67
|
-
className="size-6"
|
68
|
-
>
|
69
|
-
<path
|
70
|
-
strokeLinecap="round"
|
71
|
-
strokeLinejoin="round"
|
72
|
-
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
|
73
|
-
/>
|
74
|
-
</svg>
|
75
|
-
),
|
76
|
-
IconRight: () => (
|
77
|
-
<svg
|
78
|
-
xmlns="http://www.w3.org/2000/svg"
|
79
|
-
fill="none"
|
80
|
-
viewBox="0 0 24 24"
|
81
|
-
strokeWidth="1.5"
|
82
|
-
stroke="currentColor"
|
83
|
-
className="size-6"
|
84
|
-
>
|
85
|
-
<path
|
86
|
-
strokeLinecap="round"
|
87
|
-
strokeLinejoin="round"
|
88
|
-
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
|
89
|
-
/>
|
90
|
-
</svg>
|
91
|
-
),
|
92
|
-
}}
|
93
|
-
{...props}
|
94
|
-
/>
|
95
|
-
);
|
96
|
-
}
|
97
|
-
Calendar.displayName = "Calendar";
|
98
|
-
|
99
|
-
export { Calendar };
|
@@ -1,176 +0,0 @@
|
|
1
|
-
import * as React from "react";
|
2
|
-
import {
|
3
|
-
addDays,
|
4
|
-
startOfWeek,
|
5
|
-
endOfWeek,
|
6
|
-
startOfMonth,
|
7
|
-
endOfMonth,
|
8
|
-
subMonths,
|
9
|
-
format,
|
10
|
-
subYears,
|
11
|
-
startOfYear,
|
12
|
-
endOfYear,
|
13
|
-
} from "date-fns";
|
14
|
-
import { DateRange } from "react-day-picker";
|
15
|
-
|
16
|
-
import { cn } from "../../lib/utils";
|
17
|
-
import { Button } from "./button";
|
18
|
-
import { Calendar } from "./calendar";
|
19
|
-
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
|
20
|
-
import {
|
21
|
-
Select,
|
22
|
-
SelectContent,
|
23
|
-
SelectItem,
|
24
|
-
SelectTrigger,
|
25
|
-
SelectValue,
|
26
|
-
} from "./select";
|
27
|
-
|
28
|
-
export function DatePickerWithRange({
|
29
|
-
className,
|
30
|
-
dateFrom,
|
31
|
-
dateTo,
|
32
|
-
handleDateChange,
|
33
|
-
}: React.HTMLAttributes<HTMLDivElement> & {
|
34
|
-
dateFrom?: Date;
|
35
|
-
dateTo?: Date;
|
36
|
-
handleDateChange?: (range: DateRange | undefined) => void;
|
37
|
-
}) {
|
38
|
-
const [date, setDate] = React.useState<DateRange | undefined>({
|
39
|
-
from: dateFrom || new Date(2022, 0, 20),
|
40
|
-
to: dateTo || addDays(new Date(2022, 0, 20), 20),
|
41
|
-
});
|
42
|
-
|
43
|
-
const presets = [
|
44
|
-
{
|
45
|
-
label: "Hier",
|
46
|
-
getValue: () => {
|
47
|
-
const yesterday = new Date();
|
48
|
-
yesterday.setDate(yesterday.getDate() - 1);
|
49
|
-
return { from: yesterday, to: yesterday };
|
50
|
-
},
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Cette semaine",
|
54
|
-
getValue: () => {
|
55
|
-
const today = new Date();
|
56
|
-
return { from: startOfWeek(today), to: endOfWeek(today) };
|
57
|
-
},
|
58
|
-
},
|
59
|
-
{
|
60
|
-
label: "Ce mois-ci",
|
61
|
-
getValue: () => {
|
62
|
-
const today = new Date();
|
63
|
-
return { from: startOfMonth(today), to: endOfMonth(today) };
|
64
|
-
},
|
65
|
-
},
|
66
|
-
{
|
67
|
-
label: "Le mois dernier",
|
68
|
-
getValue: () => {
|
69
|
-
const today = new Date();
|
70
|
-
const lastMonth = subMonths(today, 1);
|
71
|
-
return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
|
72
|
-
},
|
73
|
-
},
|
74
|
-
{
|
75
|
-
label: "Cette année",
|
76
|
-
getValue: () => {
|
77
|
-
const today = new Date();
|
78
|
-
return { from: startOfYear(today), to: endOfYear(today) };
|
79
|
-
},
|
80
|
-
},
|
81
|
-
{
|
82
|
-
label: "L'année dernière",
|
83
|
-
getValue: () => {
|
84
|
-
const today = new Date();
|
85
|
-
const lastYear = subYears(today, 1);
|
86
|
-
return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
|
87
|
-
},
|
88
|
-
},
|
89
|
-
];
|
90
|
-
|
91
|
-
const handleSelect = (newDate: DateRange | undefined) => {
|
92
|
-
setDate(newDate);
|
93
|
-
handleDateChange?.(newDate);
|
94
|
-
};
|
95
|
-
|
96
|
-
return (
|
97
|
-
<div className={cn("grid gap-2", className)}>
|
98
|
-
<Popover>
|
99
|
-
<PopoverTrigger asChild>
|
100
|
-
<Button
|
101
|
-
id="date"
|
102
|
-
variant={"outline"}
|
103
|
-
className={cn(
|
104
|
-
"w-[300px] justify-start text-left font-normal",
|
105
|
-
!date && "text-muted-foreground"
|
106
|
-
)}
|
107
|
-
>
|
108
|
-
<svg
|
109
|
-
xmlns="http://www.w3.org/2000/svg"
|
110
|
-
fill="none"
|
111
|
-
viewBox="0 0 24 24"
|
112
|
-
strokeWidth="1.5"
|
113
|
-
stroke="currentColor"
|
114
|
-
className="size-6"
|
115
|
-
>
|
116
|
-
<path
|
117
|
-
strokeLinecap="round"
|
118
|
-
strokeLinejoin="round"
|
119
|
-
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
120
|
-
/>
|
121
|
-
</svg>
|
122
|
-
|
123
|
-
{date?.from ? (
|
124
|
-
date.to ? (
|
125
|
-
<>
|
126
|
-
{format(date.from, "LLL dd, y")} -{" "}
|
127
|
-
{format(date.to, "LLL dd, y")}
|
128
|
-
</>
|
129
|
-
) : (
|
130
|
-
format(date.from, "LLL dd, y")
|
131
|
-
)
|
132
|
-
) : (
|
133
|
-
<span>Choisissez une date</span>
|
134
|
-
)}
|
135
|
-
</Button>
|
136
|
-
</PopoverTrigger>
|
137
|
-
<PopoverContent
|
138
|
-
className="flex w-auto flex-col space-y-4 p-4"
|
139
|
-
align="start"
|
140
|
-
>
|
141
|
-
<Select
|
142
|
-
onValueChange={(value) => {
|
143
|
-
const preset = presets.find((preset) => preset.label === value);
|
144
|
-
if (preset) {
|
145
|
-
const newDate = preset.getValue();
|
146
|
-
setDate(newDate);
|
147
|
-
handleDateChange?.(newDate);
|
148
|
-
}
|
149
|
-
}}
|
150
|
-
>
|
151
|
-
<SelectTrigger className="w-[300px]">
|
152
|
-
<SelectValue placeholder="Sélectionnez un préréglage" />
|
153
|
-
</SelectTrigger>
|
154
|
-
<SelectContent position="popper">
|
155
|
-
{presets.map((preset) => (
|
156
|
-
<SelectItem key={preset.label} value={preset.label}>
|
157
|
-
{preset.label}
|
158
|
-
</SelectItem>
|
159
|
-
))}
|
160
|
-
</SelectContent>
|
161
|
-
</Select>
|
162
|
-
<div className="rounded-md border">
|
163
|
-
<Calendar
|
164
|
-
initialFocus
|
165
|
-
mode="range"
|
166
|
-
defaultMonth={date?.from}
|
167
|
-
selected={date}
|
168
|
-
onSelect={handleSelect}
|
169
|
-
numberOfMonths={2}
|
170
|
-
/>
|
171
|
-
</div>
|
172
|
-
</PopoverContent>
|
173
|
-
</Popover>
|
174
|
-
</div>
|
175
|
-
);
|
176
|
-
}
|
package/components/ui/dialog.tsx
DELETED
@@ -1,132 +0,0 @@
|
|
1
|
-
import * as React from "react";
|
2
|
-
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
3
|
-
|
4
|
-
import { cn } from "../../lib/utils";
|
5
|
-
|
6
|
-
const Dialog = DialogPrimitive.Root;
|
7
|
-
|
8
|
-
const DialogTrigger = DialogPrimitive.Trigger;
|
9
|
-
|
10
|
-
const DialogPortal = DialogPrimitive.Portal;
|
11
|
-
|
12
|
-
const DialogClose = DialogPrimitive.Close;
|
13
|
-
|
14
|
-
const DialogOverlay = React.forwardRef<
|
15
|
-
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
16
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
17
|
-
>(({ className, ...props }, ref) => (
|
18
|
-
<DialogPrimitive.Overlay
|
19
|
-
ref={ref}
|
20
|
-
className={cn(
|
21
|
-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
22
|
-
className
|
23
|
-
)}
|
24
|
-
{...props}
|
25
|
-
/>
|
26
|
-
));
|
27
|
-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
28
|
-
|
29
|
-
const DialogContent = React.forwardRef<
|
30
|
-
React.ElementRef<typeof DialogPrimitive.Content>,
|
31
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
32
|
-
>(({ className, children, ...props }, ref) => (
|
33
|
-
<DialogPortal>
|
34
|
-
<DialogOverlay />
|
35
|
-
<DialogPrimitive.Content
|
36
|
-
ref={ref}
|
37
|
-
className={cn(
|
38
|
-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
39
|
-
className
|
40
|
-
)}
|
41
|
-
{...props}
|
42
|
-
>
|
43
|
-
{children}
|
44
|
-
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
45
|
-
<svg
|
46
|
-
xmlns="http://www.w3.org/2000/svg"
|
47
|
-
fill="none"
|
48
|
-
viewBox="0 0 24 24"
|
49
|
-
strokeWidth="1.5"
|
50
|
-
stroke="currentColor"
|
51
|
-
className="size-6"
|
52
|
-
>
|
53
|
-
<path
|
54
|
-
strokeLinecap="round"
|
55
|
-
strokeLinejoin="round"
|
56
|
-
d="M6 18 18 6M6 6l12 12"
|
57
|
-
/>
|
58
|
-
</svg>
|
59
|
-
<span className="sr-only">Close</span>
|
60
|
-
</DialogPrimitive.Close>
|
61
|
-
</DialogPrimitive.Content>
|
62
|
-
</DialogPortal>
|
63
|
-
));
|
64
|
-
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
65
|
-
|
66
|
-
const DialogHeader = ({
|
67
|
-
className,
|
68
|
-
...props
|
69
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
70
|
-
<div
|
71
|
-
className={cn(
|
72
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
73
|
-
className
|
74
|
-
)}
|
75
|
-
{...props}
|
76
|
-
/>
|
77
|
-
);
|
78
|
-
DialogHeader.displayName = "DialogHeader";
|
79
|
-
|
80
|
-
const DialogFooter = ({
|
81
|
-
className,
|
82
|
-
...props
|
83
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
84
|
-
<div
|
85
|
-
className={cn(
|
86
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
87
|
-
className
|
88
|
-
)}
|
89
|
-
{...props}
|
90
|
-
/>
|
91
|
-
);
|
92
|
-
DialogFooter.displayName = "DialogFooter";
|
93
|
-
|
94
|
-
const DialogTitle = React.forwardRef<
|
95
|
-
React.ElementRef<typeof DialogPrimitive.Title>,
|
96
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
97
|
-
>(({ className, ...props }, ref) => (
|
98
|
-
<DialogPrimitive.Title
|
99
|
-
ref={ref}
|
100
|
-
className={cn(
|
101
|
-
"text-lg font-semibold leading-none tracking-tight",
|
102
|
-
className
|
103
|
-
)}
|
104
|
-
{...props}
|
105
|
-
/>
|
106
|
-
));
|
107
|
-
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
108
|
-
|
109
|
-
const DialogDescription = React.forwardRef<
|
110
|
-
React.ElementRef<typeof DialogPrimitive.Description>,
|
111
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
112
|
-
>(({ className, ...props }, ref) => (
|
113
|
-
<DialogPrimitive.Description
|
114
|
-
ref={ref}
|
115
|
-
className={cn("text-sm text-muted-foreground", className)}
|
116
|
-
{...props}
|
117
|
-
/>
|
118
|
-
));
|
119
|
-
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
120
|
-
|
121
|
-
export {
|
122
|
-
Dialog,
|
123
|
-
DialogPortal,
|
124
|
-
DialogOverlay,
|
125
|
-
DialogTrigger,
|
126
|
-
DialogClose,
|
127
|
-
DialogContent,
|
128
|
-
DialogHeader,
|
129
|
-
DialogFooter,
|
130
|
-
DialogTitle,
|
131
|
-
DialogDescription,
|
132
|
-
};
|
package/components/ui/input.tsx
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
|
3
|
-
import { cn } from "../../lib/utils"
|
4
|
-
|
5
|
-
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
6
|
-
({ className, type, ...props }, ref) => {
|
7
|
-
return (
|
8
|
-
<input
|
9
|
-
type={type}
|
10
|
-
className={cn(
|
11
|
-
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
12
|
-
className
|
13
|
-
)}
|
14
|
-
ref={ref}
|
15
|
-
{...props}
|
16
|
-
/>
|
17
|
-
)
|
18
|
-
}
|
19
|
-
)
|
20
|
-
Input.displayName = "Input"
|
21
|
-
|
22
|
-
export { Input }
|