lecom-ui 5.0.11 → 5.0.13
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/README.md +1 -1
- package/dist/badge.js +26 -0
- package/dist/button-dropdown.js +117 -0
- package/dist/button.js +104 -0
- package/dist/calendar.js +62 -0
- package/dist/card.js +56 -0
- package/dist/checkbox.js +55 -0
- package/dist/collapse.js +60 -0
- package/dist/collapsible.js +7 -0
- package/dist/command.js +107 -0
- package/dist/components/DataTable/Table.js +1 -1
- package/dist/components/Header/ModulesMenu.js +6 -3
- package/dist/data-table/data-table.js +490 -0
- package/dist/date-picker.js +92 -0
- package/dist/dialog.js +95 -0
- package/dist/dropdown-menu.js +138 -0
- package/dist/fonts/Montserrat-Bold.otf +0 -0
- package/dist/fonts/Montserrat-Medium.otf +0 -0
- package/dist/fonts/Montserrat-Regular.otf +0 -0
- package/dist/fonts/Roboto-Bold.otf +0 -0
- package/dist/fonts/Roboto-Light.otf +0 -0
- package/dist/fonts/Roboto-Medium.otf +0 -0
- package/dist/fonts/Roboto-Regular.otf +0 -0
- package/dist/form.js +102 -0
- package/dist/header.js +90 -0
- package/dist/hook/useDebounce.js +16 -0
- package/dist/icon-handler.js +72 -0
- package/dist/icons/brandModules.js +27 -0
- package/dist/icons/companyLogo.js +61 -0
- package/dist/icons/createUseAuxiliary.js +107 -0
- package/dist/icons/footerInfo.js +25 -0
- package/dist/icons/logo_lecom.svg.js +3 -0
- package/dist/icons/newUpdate.js +23 -0
- package/dist/icons/robertyRPA.js +30 -0
- package/dist/ilustrations/access_denied.js +252 -0
- package/dist/ilustrations/page_not_found.js +188 -0
- package/dist/index.d.ts +4 -3
- package/dist/input.js +42 -0
- package/dist/label.js +20 -0
- package/dist/modal.js +27 -0
- package/dist/pagination.js +474 -0
- package/dist/plugin/extend.ts +78 -78
- package/dist/plugin/fontFaces.ts +172 -172
- package/dist/plugin/general.ts +12 -12
- package/dist/plugin/pluginDev.cjs +5 -5
- package/dist/plugin/pluginNext.cjs +5 -5
- package/dist/plugin/pluginVite.cjs +5 -5
- package/dist/plugin/template.ts +31 -31
- package/dist/plugin/typographies.ts +152 -152
- package/dist/plugin/varsTheme.ts +79 -79
- package/dist/plugin.cjs +298 -0
- package/dist/popover.js +24 -0
- package/dist/radio-group.js +74 -0
- package/dist/range-picker.js +99 -0
- package/dist/scroll-area.js +37 -0
- package/dist/search-bar.js +151 -0
- package/dist/select.js +156 -0
- package/dist/separator.js +24 -0
- package/dist/sheet.js +106 -0
- package/dist/sidebar.js +188 -0
- package/dist/skeleton.js +17 -0
- package/dist/slider.js +23 -0
- package/dist/status-screen.js +71 -0
- package/dist/switch.js +27 -0
- package/dist/table.js +83 -0
- package/dist/tabs.js +44 -0
- package/dist/tag.js +33 -0
- package/dist/textarea.js +22 -0
- package/dist/toast.js +105 -0
- package/dist/toaster.js +23 -0
- package/dist/tooltip.js +133 -0
- package/dist/use-toast.js +121 -0
- package/package.json +1 -1
package/dist/table.js
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { cn } from './lib/utils.js';
|
|
4
|
+
|
|
5
|
+
const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto scrollbar-thin", children: /* @__PURE__ */ jsx(
|
|
6
|
+
"table",
|
|
7
|
+
{
|
|
8
|
+
ref,
|
|
9
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
10
|
+
...props
|
|
11
|
+
}
|
|
12
|
+
) }));
|
|
13
|
+
Table.displayName = "Table";
|
|
14
|
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
15
|
+
TableHeader.displayName = "TableHeader";
|
|
16
|
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
17
|
+
"tbody",
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
21
|
+
...props
|
|
22
|
+
}
|
|
23
|
+
));
|
|
24
|
+
TableBody.displayName = "TableBody";
|
|
25
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
26
|
+
"tfoot",
|
|
27
|
+
{
|
|
28
|
+
ref,
|
|
29
|
+
className: cn(
|
|
30
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
31
|
+
className
|
|
32
|
+
),
|
|
33
|
+
...props
|
|
34
|
+
}
|
|
35
|
+
));
|
|
36
|
+
TableFooter.displayName = "TableFooter";
|
|
37
|
+
const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
38
|
+
"tr",
|
|
39
|
+
{
|
|
40
|
+
ref,
|
|
41
|
+
className: cn(
|
|
42
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
43
|
+
className
|
|
44
|
+
),
|
|
45
|
+
...props
|
|
46
|
+
}
|
|
47
|
+
));
|
|
48
|
+
TableRow.displayName = "TableRow";
|
|
49
|
+
const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
50
|
+
"th",
|
|
51
|
+
{
|
|
52
|
+
ref,
|
|
53
|
+
className: cn(
|
|
54
|
+
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
55
|
+
className
|
|
56
|
+
),
|
|
57
|
+
...props
|
|
58
|
+
}
|
|
59
|
+
));
|
|
60
|
+
TableHead.displayName = "TableHead";
|
|
61
|
+
const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
62
|
+
"td",
|
|
63
|
+
{
|
|
64
|
+
ref,
|
|
65
|
+
className: cn(
|
|
66
|
+
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
67
|
+
className
|
|
68
|
+
),
|
|
69
|
+
...props
|
|
70
|
+
}
|
|
71
|
+
));
|
|
72
|
+
TableCell.displayName = "TableCell";
|
|
73
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
74
|
+
"caption",
|
|
75
|
+
{
|
|
76
|
+
ref,
|
|
77
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
78
|
+
...props
|
|
79
|
+
}
|
|
80
|
+
));
|
|
81
|
+
TableCaption.displayName = "TableCaption";
|
|
82
|
+
|
|
83
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
package/dist/tabs.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
4
|
+
import { cn } from './lib/utils.js';
|
|
5
|
+
|
|
6
|
+
const Tabs = TabsPrimitive.Root;
|
|
7
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
8
|
+
TabsPrimitive.List,
|
|
9
|
+
{
|
|
10
|
+
ref,
|
|
11
|
+
className: cn(
|
|
12
|
+
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
|
13
|
+
className
|
|
14
|
+
),
|
|
15
|
+
...props
|
|
16
|
+
}
|
|
17
|
+
));
|
|
18
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
19
|
+
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
20
|
+
TabsPrimitive.Trigger,
|
|
21
|
+
{
|
|
22
|
+
ref,
|
|
23
|
+
className: cn(
|
|
24
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
|
25
|
+
className
|
|
26
|
+
),
|
|
27
|
+
...props
|
|
28
|
+
}
|
|
29
|
+
));
|
|
30
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
31
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
32
|
+
TabsPrimitive.Content,
|
|
33
|
+
{
|
|
34
|
+
ref,
|
|
35
|
+
className: cn(
|
|
36
|
+
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
37
|
+
className
|
|
38
|
+
),
|
|
39
|
+
...props
|
|
40
|
+
}
|
|
41
|
+
));
|
|
42
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
43
|
+
|
|
44
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger };
|
package/dist/tag.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from './lib/utils.js';
|
|
4
|
+
|
|
5
|
+
const tagVariants = cva(
|
|
6
|
+
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
7
|
+
{
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: "border-default/30 bg-default/10 text-default",
|
|
11
|
+
magenta: "border-magenta/30 bg-magenta/10 text-magenta",
|
|
12
|
+
red: "border-red/30 bg-red/10 text-red",
|
|
13
|
+
volcano: "border-volcano/30 bg-volcano/10 text-volcano",
|
|
14
|
+
orange: "border-orange/30 bg-orange/10 text-orange",
|
|
15
|
+
gold: "border-gold/30 bg-gold/10 text-gold",
|
|
16
|
+
lime: "border-lime/30 bg-lime/10 text-lime",
|
|
17
|
+
green: "border-green/30 bg-green/10 text-green",
|
|
18
|
+
cyan: "border-cyan/30 bg-cyan/10 text-cyan",
|
|
19
|
+
blue: "border-blue/30 bg-blue/10 text-blue",
|
|
20
|
+
geekblue: "border-geekblue/30 bg-geekblue/10 text-geekblue",
|
|
21
|
+
purple: "border-purple/30 bg-purple/10 text-purple"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
variant: "default"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
function Tag({ className, variant, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx("div", { className: cn(tagVariants({ variant }), className), ...props });
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Tag, tagVariants };
|
package/dist/textarea.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { cn } from './lib/utils.js';
|
|
4
|
+
|
|
5
|
+
const Textarea = React.forwardRef(
|
|
6
|
+
({ className, ...props }, ref) => {
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"textarea",
|
|
9
|
+
{
|
|
10
|
+
className: cn(
|
|
11
|
+
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
12
|
+
className
|
|
13
|
+
),
|
|
14
|
+
ref,
|
|
15
|
+
...props
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
Textarea.displayName = "Textarea";
|
|
21
|
+
|
|
22
|
+
export { Textarea };
|
package/dist/toast.js
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { XIcon } from 'lucide-react';
|
|
6
|
+
import { cn } from './lib/utils.js';
|
|
7
|
+
|
|
8
|
+
const ToastProvider = ({ ...props }) => {
|
|
9
|
+
return /* @__PURE__ */ jsx(ToastPrimitives.Provider, { ...props });
|
|
10
|
+
};
|
|
11
|
+
ToastProvider.displayName = ToastPrimitives.Provider.displayName;
|
|
12
|
+
const ToastViewport = React.forwardRef(({ className, swipeDirectionY = "bottom", swipeDirectionX = "left", ...props }, ref) => /* @__PURE__ */ jsx(
|
|
13
|
+
ToastPrimitives.Viewport,
|
|
14
|
+
{
|
|
15
|
+
ref,
|
|
16
|
+
className: cn(
|
|
17
|
+
"fixed top-0 z-[9998] flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px]",
|
|
18
|
+
{
|
|
19
|
+
"sm:bottom-4 sm:left-2 sm:top-auto": swipeDirectionX === "left" && swipeDirectionY === "bottom",
|
|
20
|
+
"sm:top-2 sm:left-2 sm:bottom-auto": swipeDirectionX === "left" && swipeDirectionY === "top",
|
|
21
|
+
"sm:bottom-4 sm:right-2 sm:top-auto": swipeDirectionX === "right" && swipeDirectionY === "bottom",
|
|
22
|
+
"sm:top-2 sm:right-2 sm:bottom-auto": swipeDirectionX === "right" && swipeDirectionY === "top"
|
|
23
|
+
},
|
|
24
|
+
className
|
|
25
|
+
),
|
|
26
|
+
...props
|
|
27
|
+
}
|
|
28
|
+
));
|
|
29
|
+
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
30
|
+
const toastVariants = cva(
|
|
31
|
+
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
32
|
+
{
|
|
33
|
+
variants: {
|
|
34
|
+
variant: {
|
|
35
|
+
default: "border bg-background text-foreground",
|
|
36
|
+
destructive: "destructive group border-red-dark bg-red-dark text-destructive-foreground",
|
|
37
|
+
success: "success group border-brand-green-foreground bg-brand-green text-neutral-50",
|
|
38
|
+
info: "info group border-blue-dark bg-blue-dark text-neutral-50",
|
|
39
|
+
alert: "alert group border-yellow-dark bg-yellow-dark text-neutral-50"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
defaultVariants: {
|
|
43
|
+
variant: "default"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
ToastPrimitives.Root,
|
|
50
|
+
{
|
|
51
|
+
ref,
|
|
52
|
+
className: cn(toastVariants({ variant }), className),
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
});
|
|
57
|
+
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
58
|
+
const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
59
|
+
ToastPrimitives.Action,
|
|
60
|
+
{
|
|
61
|
+
ref,
|
|
62
|
+
className: cn(
|
|
63
|
+
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
64
|
+
className
|
|
65
|
+
),
|
|
66
|
+
...props
|
|
67
|
+
}
|
|
68
|
+
));
|
|
69
|
+
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
70
|
+
const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
71
|
+
ToastPrimitives.Close,
|
|
72
|
+
{
|
|
73
|
+
"aria-label": "Close",
|
|
74
|
+
ref,
|
|
75
|
+
className: cn(
|
|
76
|
+
"absolute right-1 top-1 rounded-md p-1 text-white opacity-80 transition-opacity focus:outline-none focus:ring-transparent hover:opacity-100",
|
|
77
|
+
className
|
|
78
|
+
),
|
|
79
|
+
"toast-close": "T",
|
|
80
|
+
...props,
|
|
81
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4", strokeWidth: "3" })
|
|
82
|
+
}
|
|
83
|
+
));
|
|
84
|
+
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
85
|
+
const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
86
|
+
ToastPrimitives.Title,
|
|
87
|
+
{
|
|
88
|
+
ref,
|
|
89
|
+
className: cn("text-base font-semibold [&+div]:text-xs", className),
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
));
|
|
93
|
+
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
94
|
+
const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
95
|
+
ToastPrimitives.Description,
|
|
96
|
+
{
|
|
97
|
+
ref,
|
|
98
|
+
style: { fontSize: "14px" },
|
|
99
|
+
className: cn("opacity-90", className),
|
|
100
|
+
...props
|
|
101
|
+
}
|
|
102
|
+
));
|
|
103
|
+
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
104
|
+
|
|
105
|
+
export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };
|
package/dist/toaster.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cn } from './lib/utils.js';
|
|
3
|
+
import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from './toast.js';
|
|
4
|
+
import { useToast } from './use-toast.js';
|
|
5
|
+
|
|
6
|
+
function Toaster({ swipeDirectionY = "bottom", swipeDirectionX = "left" }) {
|
|
7
|
+
const { toasts } = useToast();
|
|
8
|
+
return /* @__PURE__ */ jsxs(ToastProvider, { children: [
|
|
9
|
+
toasts.map(function({ id, title, description, action, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
|
|
11
|
+
/* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
|
|
12
|
+
title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
|
|
13
|
+
description && /* @__PURE__ */ jsx(ToastDescription, { className: cn({ "px-1 py-1 min-w-full": !title }), children: description })
|
|
14
|
+
] }),
|
|
15
|
+
action,
|
|
16
|
+
/* @__PURE__ */ jsx(ToastClose, {})
|
|
17
|
+
] }, id);
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ jsx(ToastViewport, { swipeDirectionX, swipeDirectionY })
|
|
20
|
+
] });
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export { Toaster };
|
package/dist/tooltip.js
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
4
|
+
import { cn } from './lib/utils.js';
|
|
5
|
+
|
|
6
|
+
const TooltipProvider = TooltipPrimitive.Provider;
|
|
7
|
+
const TooltipRoot = TooltipPrimitive.Root;
|
|
8
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
9
|
+
const TooltipArrow = React.forwardRef(
|
|
10
|
+
({ className, style, color, ...props }, ref) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
TooltipPrimitive.Arrow,
|
|
13
|
+
{
|
|
14
|
+
width: 12,
|
|
15
|
+
height: 7,
|
|
16
|
+
ref,
|
|
17
|
+
className: cn(
|
|
18
|
+
"fill-current text-primary",
|
|
19
|
+
className
|
|
20
|
+
),
|
|
21
|
+
style: { ...style, color },
|
|
22
|
+
...props
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
|
28
|
+
const TooltipContent = React.forwardRef(({ className, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
29
|
+
TooltipPrimitive.Content,
|
|
30
|
+
{
|
|
31
|
+
ref,
|
|
32
|
+
className: cn(
|
|
33
|
+
`z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade`,
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
style,
|
|
37
|
+
...props,
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
));
|
|
41
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
42
|
+
const Tooltip = ({
|
|
43
|
+
title,
|
|
44
|
+
side = "top",
|
|
45
|
+
align = "center",
|
|
46
|
+
arrow = false,
|
|
47
|
+
color,
|
|
48
|
+
defaultOpen = false,
|
|
49
|
+
mouseEnterDelay = 0.3,
|
|
50
|
+
mouseLeaveDelay = 0.3,
|
|
51
|
+
overlayStyle,
|
|
52
|
+
overlayInnerStyle,
|
|
53
|
+
trigger = "hover",
|
|
54
|
+
open,
|
|
55
|
+
zIndex,
|
|
56
|
+
onOpenChange,
|
|
57
|
+
sideOffset = 2,
|
|
58
|
+
alignOffset = 2,
|
|
59
|
+
ariaLabel = "",
|
|
60
|
+
asChild = false,
|
|
61
|
+
className = "",
|
|
62
|
+
children
|
|
63
|
+
}) => {
|
|
64
|
+
const [isOpen, setIsOpen] = React.useState(defaultOpen);
|
|
65
|
+
const [isTouchDevice, setIsTouchDevice] = React.useState(false);
|
|
66
|
+
const elementRef = React.useRef(null);
|
|
67
|
+
React.useEffect(() => {
|
|
68
|
+
const checkIfTouchDevice = () => {
|
|
69
|
+
setIsTouchDevice(
|
|
70
|
+
"ontouchstart" in window || navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
checkIfTouchDevice();
|
|
74
|
+
window.addEventListener("resize", checkIfTouchDevice);
|
|
75
|
+
return () => {
|
|
76
|
+
window.removeEventListener("resize", checkIfTouchDevice);
|
|
77
|
+
};
|
|
78
|
+
}, []);
|
|
79
|
+
const handleOpenChange = (isOpen2) => {
|
|
80
|
+
if (!isTouchDevice) {
|
|
81
|
+
if (onOpenChange) {
|
|
82
|
+
onOpenChange(isOpen2);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
const handleClick = (event) => {
|
|
87
|
+
if (isTouchDevice) {
|
|
88
|
+
event.preventDefault();
|
|
89
|
+
setIsOpen((prev) => !prev);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const triggerProps = {
|
|
93
|
+
onMouseEnter: trigger === "hover" && !isTouchDevice ? () => setTimeout(() => setIsOpen(true), mouseEnterDelay * 1e3) : void 0,
|
|
94
|
+
onMouseLeave: trigger === "hover" && !isTouchDevice ? () => setTimeout(() => setIsOpen(false), mouseLeaveDelay * 1e3) : void 0,
|
|
95
|
+
onFocus: trigger === "focus" ? () => setIsOpen(true) : void 0,
|
|
96
|
+
onBlur: trigger === "focus" ? () => setIsOpen(false) : void 0,
|
|
97
|
+
onClick: isTouchDevice || trigger === "click" ? handleClick : void 0
|
|
98
|
+
};
|
|
99
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: mouseEnterDelay * 1e3, children: /* @__PURE__ */ jsxs(
|
|
100
|
+
TooltipRoot,
|
|
101
|
+
{
|
|
102
|
+
open: open !== void 0 ? open : isOpen,
|
|
103
|
+
onOpenChange: handleOpenChange,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { className: "relative", asChild, ...triggerProps, ref: elementRef, children: /* @__PURE__ */ jsx("span", { children }) }),
|
|
106
|
+
/* @__PURE__ */ jsxs(
|
|
107
|
+
TooltipContent,
|
|
108
|
+
{
|
|
109
|
+
className: cn("bg-slate-900 text-white", className),
|
|
110
|
+
side,
|
|
111
|
+
align,
|
|
112
|
+
"aria-label": ariaLabel,
|
|
113
|
+
sideOffset,
|
|
114
|
+
alignOffset,
|
|
115
|
+
style: { ...overlayStyle, zIndex, backgroundColor: color },
|
|
116
|
+
children: [
|
|
117
|
+
/* @__PURE__ */ jsx("div", { style: overlayInnerStyle, children: title }),
|
|
118
|
+
arrow && /* @__PURE__ */ jsx(
|
|
119
|
+
TooltipArrow,
|
|
120
|
+
{
|
|
121
|
+
className: cn("text-slate-900"),
|
|
122
|
+
style: { color }
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
) });
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
const TOAST_LIMIT = 1;
|
|
4
|
+
const TOAST_REMOVE_DELAY = 1e6;
|
|
5
|
+
let count = 0;
|
|
6
|
+
function genId() {
|
|
7
|
+
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
8
|
+
return count.toString();
|
|
9
|
+
}
|
|
10
|
+
const toastTimeouts = /* @__PURE__ */ new Map();
|
|
11
|
+
const addToRemoveQueue = (toastId) => {
|
|
12
|
+
if (toastTimeouts.has(toastId)) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const timeout = setTimeout(() => {
|
|
16
|
+
toastTimeouts.delete(toastId);
|
|
17
|
+
dispatch({
|
|
18
|
+
type: "REMOVE_TOAST",
|
|
19
|
+
toastId
|
|
20
|
+
});
|
|
21
|
+
}, TOAST_REMOVE_DELAY);
|
|
22
|
+
toastTimeouts.set(toastId, timeout);
|
|
23
|
+
};
|
|
24
|
+
const reducer = (state, action) => {
|
|
25
|
+
switch (action.type) {
|
|
26
|
+
case "ADD_TOAST":
|
|
27
|
+
return {
|
|
28
|
+
...state,
|
|
29
|
+
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
30
|
+
};
|
|
31
|
+
case "UPDATE_TOAST":
|
|
32
|
+
return {
|
|
33
|
+
...state,
|
|
34
|
+
toasts: state.toasts.map(
|
|
35
|
+
(t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
36
|
+
)
|
|
37
|
+
};
|
|
38
|
+
case "DISMISS_TOAST": {
|
|
39
|
+
const { toastId } = action;
|
|
40
|
+
if (toastId) {
|
|
41
|
+
addToRemoveQueue(toastId);
|
|
42
|
+
} else {
|
|
43
|
+
state.toasts.forEach((toast2) => {
|
|
44
|
+
addToRemoveQueue(toast2.id);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
...state,
|
|
49
|
+
toasts: state.toasts.map(
|
|
50
|
+
(t) => t.id === toastId || toastId === void 0 ? {
|
|
51
|
+
...t,
|
|
52
|
+
open: false
|
|
53
|
+
} : t
|
|
54
|
+
)
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
case "REMOVE_TOAST":
|
|
58
|
+
if (action.toastId === void 0) {
|
|
59
|
+
return {
|
|
60
|
+
...state,
|
|
61
|
+
toasts: []
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
...state,
|
|
66
|
+
toasts: state.toasts.filter((t) => t.id !== action.toastId)
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const listeners = [];
|
|
71
|
+
let memoryState = { toasts: [] };
|
|
72
|
+
function dispatch(action) {
|
|
73
|
+
memoryState = reducer(memoryState, action);
|
|
74
|
+
listeners.forEach((listener) => {
|
|
75
|
+
listener(memoryState);
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
function toast({ ...props }) {
|
|
79
|
+
const id = genId();
|
|
80
|
+
const update = (props2) => dispatch({
|
|
81
|
+
type: "UPDATE_TOAST",
|
|
82
|
+
toast: { ...props2, id }
|
|
83
|
+
});
|
|
84
|
+
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
85
|
+
dispatch({
|
|
86
|
+
type: "ADD_TOAST",
|
|
87
|
+
toast: {
|
|
88
|
+
...props,
|
|
89
|
+
id,
|
|
90
|
+
open: true,
|
|
91
|
+
onOpenChange: (open) => {
|
|
92
|
+
if (!open)
|
|
93
|
+
dismiss();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
return {
|
|
98
|
+
id,
|
|
99
|
+
dismiss,
|
|
100
|
+
update
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function useToast() {
|
|
104
|
+
const [state, setState] = React.useState(memoryState);
|
|
105
|
+
React.useEffect(() => {
|
|
106
|
+
listeners.push(setState);
|
|
107
|
+
return () => {
|
|
108
|
+
const index = listeners.indexOf(setState);
|
|
109
|
+
if (index > -1) {
|
|
110
|
+
listeners.splice(index, 1);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
}, [state]);
|
|
114
|
+
return {
|
|
115
|
+
...state,
|
|
116
|
+
toast,
|
|
117
|
+
dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export { reducer, toast, useToast };
|