mobigrid-module 1.0.2 → 1.0.3
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 +7 -2
- package/rollup.config.js +0 -35
- package/src/components/CustomTable/CustomTable.tsx +0 -182
- package/src/components/CustomTable/Pagination.tsx +0 -136
- package/src/components/Icon.tsx +0 -27
- package/src/components/Layout/PageHeader.tsx +0 -270
- package/src/components/ui/alert.tsx +0 -59
- package/src/components/ui/button.tsx +0 -57
- package/src/components/ui/calendar.tsx +0 -70
- package/src/components/ui/date-picker-with-range.tsx +0 -167
- package/src/components/ui/dialog.tsx +0 -120
- package/src/components/ui/input.tsx +0 -22
- package/src/components/ui/pagination.tsx +0 -117
- package/src/components/ui/popover.tsx +0 -31
- package/src/components/ui/select.tsx +0 -157
- package/src/components/ui/sonner.tsx +0 -30
- package/src/components/ui/table.tsx +0 -120
- package/src/index.tsx +0 -254
- package/src/lib/utils.ts +0 -6
- package/tsconfig.json +0 -29
- package/vite.config.ts +0 -6
- package/yarn-error.log +0 -4300
@@ -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 }
|
@@ -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,70 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import { ChevronLeft, ChevronRight } from "lucide-react"
|
3
|
-
import { DayPicker } from "react-day-picker"
|
4
|
-
|
5
|
-
import { cn } from "../../lib/utils"
|
6
|
-
import { buttonVariants } from "./button"
|
7
|
-
|
8
|
-
export type CalendarProps = React.ComponentProps<typeof DayPicker>
|
9
|
-
|
10
|
-
function Calendar({
|
11
|
-
className,
|
12
|
-
classNames,
|
13
|
-
showOutsideDays = true,
|
14
|
-
...props
|
15
|
-
}: CalendarProps) {
|
16
|
-
return (
|
17
|
-
<DayPicker
|
18
|
-
showOutsideDays={showOutsideDays}
|
19
|
-
className={cn("p-3", className)}
|
20
|
-
classNames={{
|
21
|
-
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
22
|
-
month: "space-y-4",
|
23
|
-
caption: "flex justify-center pt-1 relative items-center",
|
24
|
-
caption_label: "text-sm font-medium",
|
25
|
-
nav: "space-x-1 flex items-center",
|
26
|
-
nav_button: cn(
|
27
|
-
buttonVariants({ variant: "outline" }),
|
28
|
-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
29
|
-
),
|
30
|
-
nav_button_previous: "absolute left-1",
|
31
|
-
nav_button_next: "absolute right-1",
|
32
|
-
table: "w-full border-collapse space-y-1",
|
33
|
-
head_row: "flex",
|
34
|
-
head_cell:
|
35
|
-
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
|
36
|
-
row: "flex w-full mt-2",
|
37
|
-
cell: cn(
|
38
|
-
"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",
|
39
|
-
props.mode === "range"
|
40
|
-
? "[&: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"
|
41
|
-
: "[&:has([aria-selected])]:rounded-md"
|
42
|
-
),
|
43
|
-
day: cn(
|
44
|
-
buttonVariants({ variant: "ghost" }),
|
45
|
-
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
|
46
|
-
),
|
47
|
-
day_range_start: "day-range-start",
|
48
|
-
day_range_end: "day-range-end",
|
49
|
-
day_selected:
|
50
|
-
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
51
|
-
day_today: "bg-accent text-accent-foreground",
|
52
|
-
day_outside:
|
53
|
-
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
|
54
|
-
day_disabled: "text-muted-foreground opacity-50",
|
55
|
-
day_range_middle:
|
56
|
-
"aria-selected:bg-accent aria-selected:text-accent-foreground",
|
57
|
-
day_hidden: "invisible",
|
58
|
-
...classNames,
|
59
|
-
}}
|
60
|
-
components={{
|
61
|
-
IconLeft: () => <ChevronLeft className="h-4 w-4" />,
|
62
|
-
IconRight: () => <ChevronRight className="h-4 w-4" />,
|
63
|
-
}}
|
64
|
-
{...props}
|
65
|
-
/>
|
66
|
-
)
|
67
|
-
}
|
68
|
-
Calendar.displayName = "Calendar"
|
69
|
-
|
70
|
-
export { Calendar }
|
@@ -1,167 +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 { CalendarIcon } from "lucide-react";
|
15
|
-
import { DateRange } from "react-day-picker";
|
16
|
-
|
17
|
-
import { cn } from "../../lib/utils";
|
18
|
-
import { Button } from "../../components/ui/button";
|
19
|
-
import { Calendar } from "../../components/ui/calendar";
|
20
|
-
import {
|
21
|
-
Popover,
|
22
|
-
PopoverContent,
|
23
|
-
PopoverTrigger,
|
24
|
-
} from "../../components/ui/popover";
|
25
|
-
import {
|
26
|
-
Select,
|
27
|
-
SelectContent,
|
28
|
-
SelectItem,
|
29
|
-
SelectTrigger,
|
30
|
-
SelectValue,
|
31
|
-
} from "../../components/ui/select";
|
32
|
-
|
33
|
-
export function DatePickerWithRange({
|
34
|
-
className,
|
35
|
-
dateFrom,
|
36
|
-
dateTo,
|
37
|
-
handleDateChange,
|
38
|
-
}: React.HTMLAttributes<HTMLDivElement> & {
|
39
|
-
dateFrom?: Date;
|
40
|
-
dateTo?: Date;
|
41
|
-
handleDateChange?: (range: DateRange | undefined) => void;
|
42
|
-
}) {
|
43
|
-
const [date, setDate] = React.useState<DateRange | undefined>({
|
44
|
-
from: dateFrom || new Date(2022, 0, 20),
|
45
|
-
to: dateTo || addDays(new Date(2022, 0, 20), 20),
|
46
|
-
});
|
47
|
-
|
48
|
-
const presets = [
|
49
|
-
{
|
50
|
-
label: "Hier",
|
51
|
-
getValue: () => {
|
52
|
-
const yesterday = new Date();
|
53
|
-
yesterday.setDate(yesterday.getDate() - 1);
|
54
|
-
return { from: yesterday, to: yesterday };
|
55
|
-
},
|
56
|
-
},
|
57
|
-
{
|
58
|
-
label: "Cette semaine",
|
59
|
-
getValue: () => {
|
60
|
-
const today = new Date();
|
61
|
-
return { from: startOfWeek(today), to: endOfWeek(today) };
|
62
|
-
},
|
63
|
-
},
|
64
|
-
{
|
65
|
-
label: "Ce mois-ci",
|
66
|
-
getValue: () => {
|
67
|
-
const today = new Date();
|
68
|
-
return { from: startOfMonth(today), to: endOfMonth(today) };
|
69
|
-
},
|
70
|
-
},
|
71
|
-
{
|
72
|
-
label: "Le mois dernier",
|
73
|
-
getValue: () => {
|
74
|
-
const today = new Date();
|
75
|
-
const lastMonth = subMonths(today, 1);
|
76
|
-
return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
|
77
|
-
},
|
78
|
-
},
|
79
|
-
{
|
80
|
-
label: "Cette année",
|
81
|
-
getValue: () => {
|
82
|
-
const today = new Date();
|
83
|
-
return { from: startOfYear(today), to: endOfYear(today) };
|
84
|
-
},
|
85
|
-
},
|
86
|
-
{
|
87
|
-
label: "L'année dernière",
|
88
|
-
getValue: () => {
|
89
|
-
const today = new Date();
|
90
|
-
const lastYear = subYears(today, 1);
|
91
|
-
return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
|
92
|
-
},
|
93
|
-
},
|
94
|
-
];
|
95
|
-
|
96
|
-
const handleSelect = (newDate: DateRange | undefined) => {
|
97
|
-
setDate(newDate);
|
98
|
-
handleDateChange?.(newDate);
|
99
|
-
};
|
100
|
-
|
101
|
-
return (
|
102
|
-
<div className={cn("grid gap-2", className)}>
|
103
|
-
<Popover>
|
104
|
-
<PopoverTrigger asChild>
|
105
|
-
<Button
|
106
|
-
id="date"
|
107
|
-
variant={"outline"}
|
108
|
-
className={cn(
|
109
|
-
"w-[300px] justify-start text-left font-normal",
|
110
|
-
!date && "text-muted-foreground"
|
111
|
-
)}
|
112
|
-
>
|
113
|
-
<CalendarIcon className="mr-2 h-4 w-4" />
|
114
|
-
{date?.from ? (
|
115
|
-
date.to ? (
|
116
|
-
<>
|
117
|
-
{format(date.from, "LLL dd, y")} -{" "}
|
118
|
-
{format(date.to, "LLL dd, y")}
|
119
|
-
</>
|
120
|
-
) : (
|
121
|
-
format(date.from, "LLL dd, y")
|
122
|
-
)
|
123
|
-
) : (
|
124
|
-
<span>Choisissez une date</span>
|
125
|
-
)}
|
126
|
-
</Button>
|
127
|
-
</PopoverTrigger>
|
128
|
-
<PopoverContent
|
129
|
-
className="flex w-auto flex-col space-y-4 p-4"
|
130
|
-
align="start"
|
131
|
-
>
|
132
|
-
<Select
|
133
|
-
onValueChange={(value) => {
|
134
|
-
const preset = presets.find((preset) => preset.label === value);
|
135
|
-
if (preset) {
|
136
|
-
const newDate = preset.getValue();
|
137
|
-
setDate(newDate);
|
138
|
-
handleDateChange?.(newDate);
|
139
|
-
}
|
140
|
-
}}
|
141
|
-
>
|
142
|
-
<SelectTrigger className="w-[300px]">
|
143
|
-
<SelectValue placeholder="Sélectionnez un préréglage" />
|
144
|
-
</SelectTrigger>
|
145
|
-
<SelectContent position="popper">
|
146
|
-
{presets.map((preset) => (
|
147
|
-
<SelectItem key={preset.label} value={preset.label}>
|
148
|
-
{preset.label}
|
149
|
-
</SelectItem>
|
150
|
-
))}
|
151
|
-
</SelectContent>
|
152
|
-
</Select>
|
153
|
-
<div className="rounded-md border">
|
154
|
-
<Calendar
|
155
|
-
initialFocus
|
156
|
-
mode="range"
|
157
|
-
defaultMonth={date?.from}
|
158
|
-
selected={date}
|
159
|
-
onSelect={handleSelect}
|
160
|
-
numberOfMonths={2}
|
161
|
-
/>
|
162
|
-
</div>
|
163
|
-
</PopoverContent>
|
164
|
-
</Popover>
|
165
|
-
</div>
|
166
|
-
);
|
167
|
-
}
|
@@ -1,120 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
3
|
-
import { X } from "lucide-react"
|
4
|
-
|
5
|
-
import { cn } from "../../lib/utils"
|
6
|
-
|
7
|
-
const Dialog = DialogPrimitive.Root
|
8
|
-
|
9
|
-
const DialogTrigger = DialogPrimitive.Trigger
|
10
|
-
|
11
|
-
const DialogPortal = DialogPrimitive.Portal
|
12
|
-
|
13
|
-
const DialogClose = DialogPrimitive.Close
|
14
|
-
|
15
|
-
const DialogOverlay = React.forwardRef<
|
16
|
-
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
17
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
18
|
-
>(({ className, ...props }, ref) => (
|
19
|
-
<DialogPrimitive.Overlay
|
20
|
-
ref={ref}
|
21
|
-
className={cn(
|
22
|
-
"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",
|
23
|
-
className
|
24
|
-
)}
|
25
|
-
{...props}
|
26
|
-
/>
|
27
|
-
))
|
28
|
-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
29
|
-
|
30
|
-
const DialogContent = React.forwardRef<
|
31
|
-
React.ElementRef<typeof DialogPrimitive.Content>,
|
32
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
33
|
-
>(({ className, children, ...props }, ref) => (
|
34
|
-
<DialogPortal>
|
35
|
-
<DialogOverlay />
|
36
|
-
<DialogPrimitive.Content
|
37
|
-
ref={ref}
|
38
|
-
className={cn(
|
39
|
-
"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",
|
40
|
-
className
|
41
|
-
)}
|
42
|
-
{...props}
|
43
|
-
>
|
44
|
-
{children}
|
45
|
-
<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">
|
46
|
-
<X className="h-4 w-4" />
|
47
|
-
<span className="sr-only">Close</span>
|
48
|
-
</DialogPrimitive.Close>
|
49
|
-
</DialogPrimitive.Content>
|
50
|
-
</DialogPortal>
|
51
|
-
))
|
52
|
-
DialogContent.displayName = DialogPrimitive.Content.displayName
|
53
|
-
|
54
|
-
const DialogHeader = ({
|
55
|
-
className,
|
56
|
-
...props
|
57
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
58
|
-
<div
|
59
|
-
className={cn(
|
60
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
61
|
-
className
|
62
|
-
)}
|
63
|
-
{...props}
|
64
|
-
/>
|
65
|
-
)
|
66
|
-
DialogHeader.displayName = "DialogHeader"
|
67
|
-
|
68
|
-
const DialogFooter = ({
|
69
|
-
className,
|
70
|
-
...props
|
71
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
72
|
-
<div
|
73
|
-
className={cn(
|
74
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
75
|
-
className
|
76
|
-
)}
|
77
|
-
{...props}
|
78
|
-
/>
|
79
|
-
)
|
80
|
-
DialogFooter.displayName = "DialogFooter"
|
81
|
-
|
82
|
-
const DialogTitle = React.forwardRef<
|
83
|
-
React.ElementRef<typeof DialogPrimitive.Title>,
|
84
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
85
|
-
>(({ className, ...props }, ref) => (
|
86
|
-
<DialogPrimitive.Title
|
87
|
-
ref={ref}
|
88
|
-
className={cn(
|
89
|
-
"text-lg font-semibold leading-none tracking-tight",
|
90
|
-
className
|
91
|
-
)}
|
92
|
-
{...props}
|
93
|
-
/>
|
94
|
-
))
|
95
|
-
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
96
|
-
|
97
|
-
const DialogDescription = React.forwardRef<
|
98
|
-
React.ElementRef<typeof DialogPrimitive.Description>,
|
99
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
100
|
-
>(({ className, ...props }, ref) => (
|
101
|
-
<DialogPrimitive.Description
|
102
|
-
ref={ref}
|
103
|
-
className={cn("text-sm text-muted-foreground", className)}
|
104
|
-
{...props}
|
105
|
-
/>
|
106
|
-
))
|
107
|
-
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
108
|
-
|
109
|
-
export {
|
110
|
-
Dialog,
|
111
|
-
DialogPortal,
|
112
|
-
DialogOverlay,
|
113
|
-
DialogTrigger,
|
114
|
-
DialogClose,
|
115
|
-
DialogContent,
|
116
|
-
DialogHeader,
|
117
|
-
DialogFooter,
|
118
|
-
DialogTitle,
|
119
|
-
DialogDescription,
|
120
|
-
}
|
@@ -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 }
|
@@ -1,117 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
|
3
|
-
|
4
|
-
import { cn } from "../../lib/utils"
|
5
|
-
import { ButtonProps, buttonVariants } from "../../components/ui/button"
|
6
|
-
|
7
|
-
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
|
8
|
-
<nav
|
9
|
-
role="navigation"
|
10
|
-
aria-label="pagination"
|
11
|
-
className={cn("mx-auto flex w-full justify-center", className)}
|
12
|
-
{...props}
|
13
|
-
/>
|
14
|
-
)
|
15
|
-
Pagination.displayName = "Pagination"
|
16
|
-
|
17
|
-
const PaginationContent = React.forwardRef<
|
18
|
-
HTMLUListElement,
|
19
|
-
React.ComponentProps<"ul">
|
20
|
-
>(({ className, ...props }, ref) => (
|
21
|
-
<ul
|
22
|
-
ref={ref}
|
23
|
-
className={cn("flex flex-row items-center gap-1", className)}
|
24
|
-
{...props}
|
25
|
-
/>
|
26
|
-
))
|
27
|
-
PaginationContent.displayName = "PaginationContent"
|
28
|
-
|
29
|
-
const PaginationItem = React.forwardRef<
|
30
|
-
HTMLLIElement,
|
31
|
-
React.ComponentProps<"li">
|
32
|
-
>(({ className, ...props }, ref) => (
|
33
|
-
<li ref={ref} className={cn("", className)} {...props} />
|
34
|
-
))
|
35
|
-
PaginationItem.displayName = "PaginationItem"
|
36
|
-
|
37
|
-
type PaginationLinkProps = {
|
38
|
-
isActive?: boolean
|
39
|
-
} & Pick<ButtonProps, "size"> &
|
40
|
-
React.ComponentProps<"a">
|
41
|
-
|
42
|
-
const PaginationLink = ({
|
43
|
-
className,
|
44
|
-
isActive,
|
45
|
-
size = "icon",
|
46
|
-
...props
|
47
|
-
}: PaginationLinkProps) => (
|
48
|
-
<a
|
49
|
-
aria-current={isActive ? "page" : undefined}
|
50
|
-
className={cn(
|
51
|
-
buttonVariants({
|
52
|
-
variant: isActive ? "outline" : "ghost",
|
53
|
-
size,
|
54
|
-
}),
|
55
|
-
className
|
56
|
-
)}
|
57
|
-
{...props}
|
58
|
-
/>
|
59
|
-
)
|
60
|
-
PaginationLink.displayName = "PaginationLink"
|
61
|
-
|
62
|
-
const PaginationPrevious = ({
|
63
|
-
className,
|
64
|
-
...props
|
65
|
-
}: React.ComponentProps<typeof PaginationLink>) => (
|
66
|
-
<PaginationLink
|
67
|
-
aria-label="Go to previous page"
|
68
|
-
size="default"
|
69
|
-
className={cn("gap-1 pl-2.5", className)}
|
70
|
-
{...props}
|
71
|
-
>
|
72
|
-
<ChevronLeft className="h-4 w-4" />
|
73
|
-
<span>Previous</span>
|
74
|
-
</PaginationLink>
|
75
|
-
)
|
76
|
-
PaginationPrevious.displayName = "PaginationPrevious"
|
77
|
-
|
78
|
-
const PaginationNext = ({
|
79
|
-
className,
|
80
|
-
...props
|
81
|
-
}: React.ComponentProps<typeof PaginationLink>) => (
|
82
|
-
<PaginationLink
|
83
|
-
aria-label="Go to next page"
|
84
|
-
size="default"
|
85
|
-
className={cn("gap-1 pr-2.5", className)}
|
86
|
-
{...props}
|
87
|
-
>
|
88
|
-
<span>Next</span>
|
89
|
-
<ChevronRight className="h-4 w-4" />
|
90
|
-
</PaginationLink>
|
91
|
-
)
|
92
|
-
PaginationNext.displayName = "PaginationNext"
|
93
|
-
|
94
|
-
const PaginationEllipsis = ({
|
95
|
-
className,
|
96
|
-
...props
|
97
|
-
}: React.ComponentProps<"span">) => (
|
98
|
-
<span
|
99
|
-
aria-hidden
|
100
|
-
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
101
|
-
{...props}
|
102
|
-
>
|
103
|
-
<MoreHorizontal className="h-4 w-4" />
|
104
|
-
<span className="sr-only">More pages</span>
|
105
|
-
</span>
|
106
|
-
)
|
107
|
-
PaginationEllipsis.displayName = "PaginationEllipsis"
|
108
|
-
|
109
|
-
export {
|
110
|
-
Pagination,
|
111
|
-
PaginationContent,
|
112
|
-
PaginationLink,
|
113
|
-
PaginationItem,
|
114
|
-
PaginationPrevious,
|
115
|
-
PaginationNext,
|
116
|
-
PaginationEllipsis,
|
117
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
3
|
-
|
4
|
-
import { cn } from "../../lib/utils"
|
5
|
-
|
6
|
-
const Popover = PopoverPrimitive.Root
|
7
|
-
|
8
|
-
const PopoverTrigger = PopoverPrimitive.Trigger
|
9
|
-
|
10
|
-
const PopoverAnchor = PopoverPrimitive.Anchor
|
11
|
-
|
12
|
-
const PopoverContent = React.forwardRef<
|
13
|
-
React.ElementRef<typeof PopoverPrimitive.Content>,
|
14
|
-
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
15
|
-
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
16
|
-
<PopoverPrimitive.Portal>
|
17
|
-
<PopoverPrimitive.Content
|
18
|
-
ref={ref}
|
19
|
-
align={align}
|
20
|
-
sideOffset={sideOffset}
|
21
|
-
className={cn(
|
22
|
-
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
|
23
|
-
className
|
24
|
-
)}
|
25
|
-
{...props}
|
26
|
-
/>
|
27
|
-
</PopoverPrimitive.Portal>
|
28
|
-
))
|
29
|
-
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
30
|
-
|
31
|
-
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|