oneslash-design-system 1.2.1 → 1.2.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/.claude/settings.local.json +9 -0
- package/components/alert.tsx +97 -20
- package/components/navigation.tsx +1 -1
- package/dist/components/alert.d.ts +3 -2
- package/dist/components/alert.jsx +69 -14
- package/dist/components/navigation.jsx +1 -1
- package/dist/output.css +37 -12
- package/package.json +1 -1
package/components/alert.tsx
CHANGED
|
@@ -1,30 +1,86 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React, { useEffect } from 'react';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import {
|
|
4
|
+
InformationCircleIcon,
|
|
5
|
+
ExclamationCircleIcon,
|
|
6
|
+
ExclamationTriangleIcon,
|
|
7
|
+
CheckCircleIcon
|
|
8
|
+
} from '@heroicons/react/24/outline';
|
|
9
|
+
import IconButton from './iconButton';
|
|
3
10
|
|
|
4
11
|
interface AlertProps {
|
|
5
12
|
open?: boolean;
|
|
6
|
-
type: 'success' | 'warning' | 'error' | 'info';
|
|
13
|
+
type: 'success' | 'warning' | 'error' | 'info' | 'default';
|
|
7
14
|
message: string;
|
|
8
15
|
onClose: () => void;
|
|
16
|
+
showCloseButton?: boolean;
|
|
9
17
|
}
|
|
10
18
|
|
|
11
|
-
export default function Alert({
|
|
12
|
-
open,
|
|
13
|
-
type,
|
|
14
|
-
message,
|
|
15
|
-
onClose
|
|
19
|
+
export default function Alert({
|
|
20
|
+
open,
|
|
21
|
+
type,
|
|
22
|
+
message,
|
|
23
|
+
onClose,
|
|
24
|
+
showCloseButton = false
|
|
16
25
|
}: AlertProps) {
|
|
17
|
-
|
|
26
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
27
|
+
const [shouldRender, setShouldRender] = useState(false);
|
|
28
|
+
|
|
18
29
|
useEffect(() => {
|
|
19
30
|
if (open) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
setShouldRender(true);
|
|
32
|
+
// Small delay to trigger the animation
|
|
33
|
+
const showTimer = setTimeout(() => setIsVisible(true), 10);
|
|
34
|
+
|
|
35
|
+
// Only auto-dismiss if there's no close button
|
|
36
|
+
if (!showCloseButton) {
|
|
37
|
+
const dismissTimer = setTimeout(() => {
|
|
38
|
+
handleClose();
|
|
39
|
+
}, 5000);
|
|
40
|
+
return () => {
|
|
41
|
+
clearTimeout(showTimer);
|
|
42
|
+
clearTimeout(dismissTimer);
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return () => clearTimeout(showTimer);
|
|
47
|
+
} else if (shouldRender) {
|
|
48
|
+
// When open becomes false, trigger fade out
|
|
49
|
+
setIsVisible(false);
|
|
50
|
+
const hideTimer = setTimeout(() => {
|
|
51
|
+
setShouldRender(false);
|
|
52
|
+
}, 300);
|
|
53
|
+
return () => clearTimeout(hideTimer);
|
|
24
54
|
}
|
|
25
|
-
}, [open,
|
|
55
|
+
}, [open, showCloseButton, shouldRender]);
|
|
56
|
+
|
|
57
|
+
const handleClose = () => {
|
|
58
|
+
setIsVisible(false);
|
|
59
|
+
// Wait for animation to complete before unmounting
|
|
60
|
+
setTimeout(() => {
|
|
61
|
+
setShouldRender(false);
|
|
62
|
+
onClose();
|
|
63
|
+
}, 300);
|
|
64
|
+
};
|
|
26
65
|
|
|
27
|
-
if (!
|
|
66
|
+
if (!shouldRender) return null;
|
|
67
|
+
|
|
68
|
+
// Get the appropriate icon based on type
|
|
69
|
+
const getIcon = () => {
|
|
70
|
+
switch (type) {
|
|
71
|
+
case 'error':
|
|
72
|
+
return <ExclamationCircleIcon className="w-6 h-6" />;
|
|
73
|
+
case 'warning':
|
|
74
|
+
return <ExclamationTriangleIcon className="w-6 h-6" />;
|
|
75
|
+
case 'info':
|
|
76
|
+
return <InformationCircleIcon className="w-6 h-6" />;
|
|
77
|
+
case 'success':
|
|
78
|
+
return <CheckCircleIcon className="w-6 h-6" />;
|
|
79
|
+
case 'default':
|
|
80
|
+
default:
|
|
81
|
+
return <InformationCircleIcon className="w-6 h-6" />;
|
|
82
|
+
}
|
|
83
|
+
};
|
|
28
84
|
|
|
29
85
|
let bgColor;
|
|
30
86
|
switch (type) {
|
|
@@ -40,15 +96,36 @@ export default function Alert({
|
|
|
40
96
|
case 'success':
|
|
41
97
|
bgColor = 'bg-light-success-main dark:bg-dark-success-main';
|
|
42
98
|
break;
|
|
99
|
+
case 'default':
|
|
100
|
+
default:
|
|
101
|
+
bgColor = 'bg-light-secondary-light dark:bg-dark-secondary-light';
|
|
102
|
+
break;
|
|
43
103
|
}
|
|
44
104
|
|
|
45
105
|
return (
|
|
46
|
-
<div className="fixed top-
|
|
47
|
-
<div
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
106
|
+
<div className="fixed top-0 inset-x-0 z-50 flex justify-center pointer-events-none">
|
|
107
|
+
<div
|
|
108
|
+
className={`flex items-start justify-between w-full max-w-md p-2 rounded-[8px] pointer-events-auto transition-opacity duration-200 ease-out ${bgColor} ${
|
|
109
|
+
isVisible
|
|
110
|
+
? 'opacity-100'
|
|
111
|
+
: 'opacity-0'
|
|
112
|
+
}`}
|
|
113
|
+
>
|
|
114
|
+
<div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
|
|
115
|
+
{getIcon()}
|
|
116
|
+
<span className="body1">{message}</span>
|
|
117
|
+
</div>
|
|
118
|
+
{showCloseButton && (
|
|
119
|
+
<div className="ml-4">
|
|
120
|
+
<IconButton
|
|
121
|
+
color="iconOnly"
|
|
122
|
+
state="enabled"
|
|
123
|
+
size="small"
|
|
124
|
+
iconName="XMarkIcon"
|
|
125
|
+
onClick={handleClose}
|
|
126
|
+
/>
|
|
127
|
+
</div>
|
|
128
|
+
)}
|
|
52
129
|
</div>
|
|
53
130
|
</div>
|
|
54
131
|
);
|
|
@@ -14,7 +14,7 @@ export default function Navigation({
|
|
|
14
14
|
<nav
|
|
15
15
|
className={`
|
|
16
16
|
bg-light-background-default dark:bg-dark-background-default
|
|
17
|
-
border-r border-light-
|
|
17
|
+
border-r border-light-misc-divider dark:border-dark-misc-divider
|
|
18
18
|
p-[10px]
|
|
19
19
|
${className}
|
|
20
20
|
`}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface AlertProps {
|
|
3
3
|
open?: boolean;
|
|
4
|
-
type: 'success' | 'warning' | 'error' | 'info';
|
|
4
|
+
type: 'success' | 'warning' | 'error' | 'info' | 'default';
|
|
5
5
|
message: string;
|
|
6
6
|
onClose: () => void;
|
|
7
|
+
showCloseButton?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export default function Alert({ open, type, message, onClose }: AlertProps): React.JSX.Element | null;
|
|
9
|
+
export default function Alert({ open, type, message, onClose, showCloseButton }: AlertProps): React.JSX.Element | null;
|
|
9
10
|
export {};
|
|
@@ -1,17 +1,63 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React, { useEffect } from 'react';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import { InformationCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
|
|
4
|
+
import IconButton from './iconButton';
|
|
3
5
|
export default function Alert(_a) {
|
|
4
|
-
var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose;
|
|
6
|
+
var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b;
|
|
7
|
+
var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
|
|
8
|
+
var _d = useState(false), shouldRender = _d[0], setShouldRender = _d[1];
|
|
5
9
|
useEffect(function () {
|
|
6
10
|
if (open) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
|
|
11
|
+
setShouldRender(true);
|
|
12
|
+
// Small delay to trigger the animation
|
|
13
|
+
var showTimer_1 = setTimeout(function () { return setIsVisible(true); }, 10);
|
|
14
|
+
// Only auto-dismiss if there's no close button
|
|
15
|
+
if (!showCloseButton) {
|
|
16
|
+
var dismissTimer_1 = setTimeout(function () {
|
|
17
|
+
handleClose();
|
|
18
|
+
}, 5000);
|
|
19
|
+
return function () {
|
|
20
|
+
clearTimeout(showTimer_1);
|
|
21
|
+
clearTimeout(dismissTimer_1);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return function () { return clearTimeout(showTimer_1); };
|
|
11
25
|
}
|
|
12
|
-
|
|
13
|
-
|
|
26
|
+
else if (shouldRender) {
|
|
27
|
+
// When open becomes false, trigger fade out
|
|
28
|
+
setIsVisible(false);
|
|
29
|
+
var hideTimer_1 = setTimeout(function () {
|
|
30
|
+
setShouldRender(false);
|
|
31
|
+
}, 300);
|
|
32
|
+
return function () { return clearTimeout(hideTimer_1); };
|
|
33
|
+
}
|
|
34
|
+
}, [open, showCloseButton, shouldRender]);
|
|
35
|
+
var handleClose = function () {
|
|
36
|
+
setIsVisible(false);
|
|
37
|
+
// Wait for animation to complete before unmounting
|
|
38
|
+
setTimeout(function () {
|
|
39
|
+
setShouldRender(false);
|
|
40
|
+
onClose();
|
|
41
|
+
}, 300);
|
|
42
|
+
};
|
|
43
|
+
if (!shouldRender)
|
|
14
44
|
return null;
|
|
45
|
+
// Get the appropriate icon based on type
|
|
46
|
+
var getIcon = function () {
|
|
47
|
+
switch (type) {
|
|
48
|
+
case 'error':
|
|
49
|
+
return <ExclamationCircleIcon className="w-6 h-6"/>;
|
|
50
|
+
case 'warning':
|
|
51
|
+
return <ExclamationTriangleIcon className="w-6 h-6"/>;
|
|
52
|
+
case 'info':
|
|
53
|
+
return <InformationCircleIcon className="w-6 h-6"/>;
|
|
54
|
+
case 'success':
|
|
55
|
+
return <CheckCircleIcon className="w-6 h-6"/>;
|
|
56
|
+
case 'default':
|
|
57
|
+
default:
|
|
58
|
+
return <InformationCircleIcon className="w-6 h-6"/>;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
15
61
|
var bgColor;
|
|
16
62
|
switch (type) {
|
|
17
63
|
case 'error':
|
|
@@ -26,13 +72,22 @@ export default function Alert(_a) {
|
|
|
26
72
|
case 'success':
|
|
27
73
|
bgColor = 'bg-light-success-main dark:bg-dark-success-main';
|
|
28
74
|
break;
|
|
75
|
+
case 'default':
|
|
76
|
+
default:
|
|
77
|
+
bgColor = 'bg-light-secondary-light dark:bg-dark-secondary-light';
|
|
78
|
+
break;
|
|
29
79
|
}
|
|
30
|
-
return (<div className="fixed top-
|
|
31
|
-
<div className={"flex items-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
80
|
+
return (<div className="fixed top-0 inset-x-0 z-50 flex justify-center pointer-events-none">
|
|
81
|
+
<div className={"flex items-start justify-between w-full max-w-md p-2 rounded-[8px] pointer-events-auto transition-opacity duration-200 ease-out ".concat(bgColor, " ").concat(isVisible
|
|
82
|
+
? 'opacity-100'
|
|
83
|
+
: 'opacity-0')}>
|
|
84
|
+
<div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
|
|
85
|
+
{getIcon()}
|
|
86
|
+
<span className="body1">{message}</span>
|
|
87
|
+
</div>
|
|
88
|
+
{showCloseButton && (<div className="ml-4">
|
|
89
|
+
<IconButton color="iconOnly" state="enabled" size="small" iconName="XMarkIcon" onClick={handleClose}/>
|
|
90
|
+
</div>)}
|
|
36
91
|
</div>
|
|
37
92
|
</div>);
|
|
38
93
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export default function Navigation(_a) {
|
|
4
4
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
5
|
-
return (<nav className={"\n bg-light-background-default dark:bg-dark-background-default\n border-r border-light-
|
|
5
|
+
return (<nav className={"\n bg-light-background-default dark:bg-dark-background-default\n border-r border-light-misc-divider dark:border-dark-misc-divider\n p-[10px]\n ".concat(className, "\n ")}>
|
|
6
6
|
{children}
|
|
7
7
|
</nav>);
|
|
8
8
|
}
|
package/dist/output.css
CHANGED
|
@@ -530,6 +530,12 @@ video {
|
|
|
530
530
|
max-width: 1536px;
|
|
531
531
|
}
|
|
532
532
|
}
|
|
533
|
+
.pointer-events-none {
|
|
534
|
+
pointer-events: none;
|
|
535
|
+
}
|
|
536
|
+
.pointer-events-auto {
|
|
537
|
+
pointer-events: auto;
|
|
538
|
+
}
|
|
533
539
|
.visible {
|
|
534
540
|
visibility: visible;
|
|
535
541
|
}
|
|
@@ -552,8 +558,8 @@ video {
|
|
|
552
558
|
.left-0 {
|
|
553
559
|
left: 0px;
|
|
554
560
|
}
|
|
555
|
-
.top-
|
|
556
|
-
top:
|
|
561
|
+
.top-0 {
|
|
562
|
+
top: 0px;
|
|
557
563
|
}
|
|
558
564
|
.z-10 {
|
|
559
565
|
z-index: 10;
|
|
@@ -687,6 +693,9 @@ video {
|
|
|
687
693
|
.flex-col {
|
|
688
694
|
flex-direction: column;
|
|
689
695
|
}
|
|
696
|
+
.items-start {
|
|
697
|
+
align-items: flex-start;
|
|
698
|
+
}
|
|
690
699
|
.items-center {
|
|
691
700
|
align-items: center;
|
|
692
701
|
}
|
|
@@ -699,6 +708,9 @@ video {
|
|
|
699
708
|
.justify-between {
|
|
700
709
|
justify-content: space-between;
|
|
701
710
|
}
|
|
711
|
+
.gap-2 {
|
|
712
|
+
gap: 0.5rem;
|
|
713
|
+
}
|
|
702
714
|
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
|
|
703
715
|
--tw-space-x-reverse: 0;
|
|
704
716
|
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
|
|
@@ -858,6 +870,10 @@ video {
|
|
|
858
870
|
--tw-bg-opacity: 1;
|
|
859
871
|
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
|
|
860
872
|
}
|
|
873
|
+
.bg-light-secondary-light {
|
|
874
|
+
--tw-bg-opacity: 1;
|
|
875
|
+
background-color: rgb(209 209 209 / var(--tw-bg-opacity));
|
|
876
|
+
}
|
|
861
877
|
.bg-light-secondary-main {
|
|
862
878
|
--tw-bg-opacity: 1;
|
|
863
879
|
background-color: rgb(176 176 176 / var(--tw-bg-opacity));
|
|
@@ -889,9 +905,6 @@ video {
|
|
|
889
905
|
.p-2 {
|
|
890
906
|
padding: 0.5rem;
|
|
891
907
|
}
|
|
892
|
-
.p-4 {
|
|
893
|
-
padding: 1rem;
|
|
894
|
-
}
|
|
895
908
|
.p-6 {
|
|
896
909
|
padding: 1.5rem;
|
|
897
910
|
}
|
|
@@ -943,13 +956,6 @@ video {
|
|
|
943
956
|
.text-h6 {
|
|
944
957
|
font-size: 20px;
|
|
945
958
|
}
|
|
946
|
-
.text-xl {
|
|
947
|
-
font-size: 1.25rem;
|
|
948
|
-
line-height: 1.75rem;
|
|
949
|
-
}
|
|
950
|
-
.font-bold {
|
|
951
|
-
font-weight: 700;
|
|
952
|
-
}
|
|
953
959
|
.leading-\[18px\] {
|
|
954
960
|
line-height: 18px;
|
|
955
961
|
}
|
|
@@ -991,6 +997,12 @@ video {
|
|
|
991
997
|
--tw-text-opacity: 1;
|
|
992
998
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
993
999
|
}
|
|
1000
|
+
.opacity-0 {
|
|
1001
|
+
opacity: 0;
|
|
1002
|
+
}
|
|
1003
|
+
.opacity-100 {
|
|
1004
|
+
opacity: 1;
|
|
1005
|
+
}
|
|
994
1006
|
.opacity-50 {
|
|
995
1007
|
opacity: 0.5;
|
|
996
1008
|
}
|
|
@@ -1054,6 +1066,11 @@ video {
|
|
|
1054
1066
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1055
1067
|
transition-duration: 150ms;
|
|
1056
1068
|
}
|
|
1069
|
+
.transition-opacity {
|
|
1070
|
+
transition-property: opacity;
|
|
1071
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1072
|
+
transition-duration: 150ms;
|
|
1073
|
+
}
|
|
1057
1074
|
.transition-transform {
|
|
1058
1075
|
transition-property: transform;
|
|
1059
1076
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -1065,6 +1082,9 @@ video {
|
|
|
1065
1082
|
.ease-in-out {
|
|
1066
1083
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1067
1084
|
}
|
|
1085
|
+
.ease-out {
|
|
1086
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1087
|
+
}
|
|
1068
1088
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
|
|
1069
1089
|
|
|
1070
1090
|
body {
|
|
@@ -1196,6 +1216,11 @@ body {
|
|
|
1196
1216
|
background-color: rgb(233 233 233 / var(--tw-bg-opacity));
|
|
1197
1217
|
}
|
|
1198
1218
|
|
|
1219
|
+
.dark\:bg-dark-secondary-light {
|
|
1220
|
+
--tw-bg-opacity: 1;
|
|
1221
|
+
background-color: rgb(109 109 109 / var(--tw-bg-opacity));
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1199
1224
|
.dark\:bg-dark-secondary-main {
|
|
1200
1225
|
--tw-bg-opacity: 1;
|
|
1201
1226
|
background-color: rgb(79 79 79 / var(--tw-bg-opacity));
|