mobigrid-module 1.0.6 → 1.0.8
Sign up to get free protection for your applications and to get access to all the features.
- package/components/CustomTable/CustomTable.tsx +182 -0
- package/components/CustomTable/Pagination.tsx +136 -0
- package/components/Icon.tsx +27 -0
- package/components/Layout/PageHeader.tsx +270 -0
- package/components/ui/alert.tsx +59 -0
- package/components/ui/button.tsx +57 -0
- package/components/ui/calendar.tsx +70 -0
- package/components/ui/date-picker-with-range.tsx +167 -0
- package/components/ui/dialog.tsx +120 -0
- package/components/ui/input.tsx +22 -0
- package/components/ui/pagination.tsx +117 -0
- package/components/ui/popover.tsx +31 -0
- package/components/ui/select.tsx +157 -0
- package/components/ui/sonner.tsx +30 -0
- package/components/ui/table.tsx +120 -0
- package/dist/components/ui/alert.d.ts +1 -1
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/components/ui/pagination.d.ts +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.tsx.map +1 -1
- package/index.d.ts +55 -0
- package/index.tsx +4 -4
- package/lib/utils.ts +6 -0
- package/package.json +7 -5
@@ -0,0 +1,157 @@
|
|
1
|
+
import * as React from "react"
|
2
|
+
import * as SelectPrimitive from "@radix-ui/react-select"
|
3
|
+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
4
|
+
|
5
|
+
import { cn } from "../../lib/utils"
|
6
|
+
|
7
|
+
const Select = SelectPrimitive.Root
|
8
|
+
|
9
|
+
const SelectGroup = SelectPrimitive.Group
|
10
|
+
|
11
|
+
const SelectValue = SelectPrimitive.Value
|
12
|
+
|
13
|
+
const SelectTrigger = React.forwardRef<
|
14
|
+
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
15
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
16
|
+
>(({ className, children, ...props }, ref) => (
|
17
|
+
<SelectPrimitive.Trigger
|
18
|
+
ref={ref}
|
19
|
+
className={cn(
|
20
|
+
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
21
|
+
className
|
22
|
+
)}
|
23
|
+
{...props}
|
24
|
+
>
|
25
|
+
{children}
|
26
|
+
<SelectPrimitive.Icon asChild>
|
27
|
+
<ChevronDown className="h-4 w-4 opacity-50" />
|
28
|
+
</SelectPrimitive.Icon>
|
29
|
+
</SelectPrimitive.Trigger>
|
30
|
+
))
|
31
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
32
|
+
|
33
|
+
const SelectScrollUpButton = React.forwardRef<
|
34
|
+
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
35
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
36
|
+
>(({ className, ...props }, ref) => (
|
37
|
+
<SelectPrimitive.ScrollUpButton
|
38
|
+
ref={ref}
|
39
|
+
className={cn(
|
40
|
+
"flex cursor-default items-center justify-center py-1",
|
41
|
+
className
|
42
|
+
)}
|
43
|
+
{...props}
|
44
|
+
>
|
45
|
+
<ChevronUp className="h-4 w-4" />
|
46
|
+
</SelectPrimitive.ScrollUpButton>
|
47
|
+
))
|
48
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
49
|
+
|
50
|
+
const SelectScrollDownButton = React.forwardRef<
|
51
|
+
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
52
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
53
|
+
>(({ className, ...props }, ref) => (
|
54
|
+
<SelectPrimitive.ScrollDownButton
|
55
|
+
ref={ref}
|
56
|
+
className={cn(
|
57
|
+
"flex cursor-default items-center justify-center py-1",
|
58
|
+
className
|
59
|
+
)}
|
60
|
+
{...props}
|
61
|
+
>
|
62
|
+
<ChevronDown className="h-4 w-4" />
|
63
|
+
</SelectPrimitive.ScrollDownButton>
|
64
|
+
))
|
65
|
+
SelectScrollDownButton.displayName =
|
66
|
+
SelectPrimitive.ScrollDownButton.displayName
|
67
|
+
|
68
|
+
const SelectContent = React.forwardRef<
|
69
|
+
React.ElementRef<typeof SelectPrimitive.Content>,
|
70
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
71
|
+
>(({ className, children, position = "popper", ...props }, ref) => (
|
72
|
+
<SelectPrimitive.Portal>
|
73
|
+
<SelectPrimitive.Content
|
74
|
+
ref={ref}
|
75
|
+
className={cn(
|
76
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
|
77
|
+
position === "popper" &&
|
78
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
79
|
+
className
|
80
|
+
)}
|
81
|
+
position={position}
|
82
|
+
{...props}
|
83
|
+
>
|
84
|
+
<SelectScrollUpButton />
|
85
|
+
<SelectPrimitive.Viewport
|
86
|
+
className={cn(
|
87
|
+
"p-1",
|
88
|
+
position === "popper" &&
|
89
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
90
|
+
)}
|
91
|
+
>
|
92
|
+
{children}
|
93
|
+
</SelectPrimitive.Viewport>
|
94
|
+
<SelectScrollDownButton />
|
95
|
+
</SelectPrimitive.Content>
|
96
|
+
</SelectPrimitive.Portal>
|
97
|
+
))
|
98
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName
|
99
|
+
|
100
|
+
const SelectLabel = React.forwardRef<
|
101
|
+
React.ElementRef<typeof SelectPrimitive.Label>,
|
102
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
103
|
+
>(({ className, ...props }, ref) => (
|
104
|
+
<SelectPrimitive.Label
|
105
|
+
ref={ref}
|
106
|
+
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
107
|
+
{...props}
|
108
|
+
/>
|
109
|
+
))
|
110
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
111
|
+
|
112
|
+
const SelectItem = React.forwardRef<
|
113
|
+
React.ElementRef<typeof SelectPrimitive.Item>,
|
114
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
115
|
+
>(({ className, children, ...props }, ref) => (
|
116
|
+
<SelectPrimitive.Item
|
117
|
+
ref={ref}
|
118
|
+
className={cn(
|
119
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
120
|
+
className
|
121
|
+
)}
|
122
|
+
{...props}
|
123
|
+
>
|
124
|
+
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
125
|
+
<SelectPrimitive.ItemIndicator>
|
126
|
+
<Check className="h-4 w-4" />
|
127
|
+
</SelectPrimitive.ItemIndicator>
|
128
|
+
</span>
|
129
|
+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
130
|
+
</SelectPrimitive.Item>
|
131
|
+
))
|
132
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName
|
133
|
+
|
134
|
+
const SelectSeparator = React.forwardRef<
|
135
|
+
React.ElementRef<typeof SelectPrimitive.Separator>,
|
136
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
137
|
+
>(({ className, ...props }, ref) => (
|
138
|
+
<SelectPrimitive.Separator
|
139
|
+
ref={ref}
|
140
|
+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
141
|
+
{...props}
|
142
|
+
/>
|
143
|
+
))
|
144
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
145
|
+
|
146
|
+
export {
|
147
|
+
Select,
|
148
|
+
SelectGroup,
|
149
|
+
SelectValue,
|
150
|
+
SelectTrigger,
|
151
|
+
SelectContent,
|
152
|
+
SelectLabel,
|
153
|
+
SelectItem,
|
154
|
+
SelectSeparator,
|
155
|
+
SelectScrollUpButton,
|
156
|
+
SelectScrollDownButton,
|
157
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { useTheme } from "next-themes"
|
3
|
+
import { Toaster as Sonner } from "sonner"
|
4
|
+
|
5
|
+
type ToasterProps = React.ComponentProps<typeof Sonner>
|
6
|
+
|
7
|
+
const Toaster = ({ ...props }: ToasterProps) => {
|
8
|
+
const { theme = "system" } = useTheme()
|
9
|
+
|
10
|
+
return (
|
11
|
+
<Sonner
|
12
|
+
theme={theme as ToasterProps["theme"]}
|
13
|
+
className="toaster group"
|
14
|
+
toastOptions={{
|
15
|
+
classNames: {
|
16
|
+
toast:
|
17
|
+
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
18
|
+
description: "group-[.toast]:text-muted-foreground",
|
19
|
+
actionButton:
|
20
|
+
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
21
|
+
cancelButton:
|
22
|
+
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
23
|
+
},
|
24
|
+
}}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
)
|
28
|
+
}
|
29
|
+
|
30
|
+
export { Toaster }
|
@@ -0,0 +1,120 @@
|
|
1
|
+
import * as React from "react"
|
2
|
+
|
3
|
+
import { cn } from "../../lib/utils"
|
4
|
+
|
5
|
+
const Table = React.forwardRef<
|
6
|
+
HTMLTableElement,
|
7
|
+
React.HTMLAttributes<HTMLTableElement>
|
8
|
+
>(({ className, ...props }, ref) => (
|
9
|
+
<div className="relative w-full overflow-auto">
|
10
|
+
<table
|
11
|
+
ref={ref}
|
12
|
+
className={cn("w-full caption-bottom text-sm", className)}
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
</div>
|
16
|
+
))
|
17
|
+
Table.displayName = "Table"
|
18
|
+
|
19
|
+
const TableHeader = React.forwardRef<
|
20
|
+
HTMLTableSectionElement,
|
21
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
22
|
+
>(({ className, ...props }, ref) => (
|
23
|
+
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
24
|
+
))
|
25
|
+
TableHeader.displayName = "TableHeader"
|
26
|
+
|
27
|
+
const TableBody = React.forwardRef<
|
28
|
+
HTMLTableSectionElement,
|
29
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
30
|
+
>(({ className, ...props }, ref) => (
|
31
|
+
<tbody
|
32
|
+
ref={ref}
|
33
|
+
className={cn("[&_tr:last-child]:border-0", className)}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
))
|
37
|
+
TableBody.displayName = "TableBody"
|
38
|
+
|
39
|
+
const TableFooter = React.forwardRef<
|
40
|
+
HTMLTableSectionElement,
|
41
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
42
|
+
>(({ className, ...props }, ref) => (
|
43
|
+
<tfoot
|
44
|
+
ref={ref}
|
45
|
+
className={cn(
|
46
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
47
|
+
className
|
48
|
+
)}
|
49
|
+
{...props}
|
50
|
+
/>
|
51
|
+
))
|
52
|
+
TableFooter.displayName = "TableFooter"
|
53
|
+
|
54
|
+
const TableRow = React.forwardRef<
|
55
|
+
HTMLTableRowElement,
|
56
|
+
React.HTMLAttributes<HTMLTableRowElement>
|
57
|
+
>(({ className, ...props }, ref) => (
|
58
|
+
<tr
|
59
|
+
ref={ref}
|
60
|
+
className={cn(
|
61
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
62
|
+
className
|
63
|
+
)}
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
))
|
67
|
+
TableRow.displayName = "TableRow"
|
68
|
+
|
69
|
+
const TableHead = React.forwardRef<
|
70
|
+
HTMLTableCellElement,
|
71
|
+
React.ThHTMLAttributes<HTMLTableCellElement>
|
72
|
+
>(({ className, ...props }, ref) => (
|
73
|
+
<th
|
74
|
+
ref={ref}
|
75
|
+
className={cn(
|
76
|
+
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
77
|
+
className
|
78
|
+
)}
|
79
|
+
{...props}
|
80
|
+
/>
|
81
|
+
))
|
82
|
+
TableHead.displayName = "TableHead"
|
83
|
+
|
84
|
+
const TableCell = React.forwardRef<
|
85
|
+
HTMLTableCellElement,
|
86
|
+
React.TdHTMLAttributes<HTMLTableCellElement>
|
87
|
+
>(({ className, ...props }, ref) => (
|
88
|
+
<td
|
89
|
+
ref={ref}
|
90
|
+
className={cn(
|
91
|
+
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
92
|
+
className
|
93
|
+
)}
|
94
|
+
{...props}
|
95
|
+
/>
|
96
|
+
))
|
97
|
+
TableCell.displayName = "TableCell"
|
98
|
+
|
99
|
+
const TableCaption = React.forwardRef<
|
100
|
+
HTMLTableCaptionElement,
|
101
|
+
React.HTMLAttributes<HTMLTableCaptionElement>
|
102
|
+
>(({ className, ...props }, ref) => (
|
103
|
+
<caption
|
104
|
+
ref={ref}
|
105
|
+
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
106
|
+
{...props}
|
107
|
+
/>
|
108
|
+
))
|
109
|
+
TableCaption.displayName = "TableCaption"
|
110
|
+
|
111
|
+
export {
|
112
|
+
Table,
|
113
|
+
TableHeader,
|
114
|
+
TableBody,
|
115
|
+
TableFooter,
|
116
|
+
TableHead,
|
117
|
+
TableRow,
|
118
|
+
TableCell,
|
119
|
+
TableCaption,
|
120
|
+
}
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
3
3
|
declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
4
4
|
variant?: "default" | "destructive" | null | undefined;
|
5
|
-
} & import("class-variance-authority/dist/types
|
5
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
6
6
|
declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
|
7
7
|
declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
8
8
|
export { Alert, AlertTitle, AlertDescription };
|
@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
4
4
|
variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
6
|
-
} & import("class-variance-authority/dist/types
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
7
7
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
8
8
|
asChild?: boolean;
|
9
9
|
}
|