evelearn-theme 1.0.0 → 1.0.2
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/dist/index.d.mts +43 -33
- package/dist/index.d.ts +43 -33
- package/dist/index.js +120 -17
- package/dist/index.mjs +119 -17
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -4,12 +4,12 @@ import React__default, { CSSProperties, ReactNode } from 'react';
|
|
|
4
4
|
import { Placement } from '@floating-ui/react';
|
|
5
5
|
import * as next_dist_compiled__next_font from 'next/dist/compiled/@next/font';
|
|
6
6
|
|
|
7
|
-
type Props$
|
|
7
|
+
type Props$h = {
|
|
8
8
|
visible: boolean;
|
|
9
9
|
onClick: () => void;
|
|
10
10
|
opacity?: number;
|
|
11
11
|
};
|
|
12
|
-
declare const Backdrop: ({ visible, onClick, opacity }: Props$
|
|
12
|
+
declare const Backdrop: ({ visible, onClick, opacity }: Props$h) => react_jsx_runtime.JSX.Element | null;
|
|
13
13
|
|
|
14
14
|
interface BaseModalProps {
|
|
15
15
|
visible: boolean;
|
|
@@ -44,7 +44,7 @@ declare const Breakpoint: React__default.FC<{
|
|
|
44
44
|
children: React__default.ReactNode;
|
|
45
45
|
}>;
|
|
46
46
|
|
|
47
|
-
interface Props$
|
|
47
|
+
interface Props$g {
|
|
48
48
|
disabled?: boolean;
|
|
49
49
|
kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
|
|
50
50
|
size?: 'small' | 'fixed' | 'large';
|
|
@@ -53,9 +53,9 @@ interface Props$f {
|
|
|
53
53
|
children: React__default.ReactNode;
|
|
54
54
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
55
55
|
}
|
|
56
|
-
declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$
|
|
56
|
+
declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$g) => react_jsx_runtime.JSX.Element;
|
|
57
57
|
|
|
58
|
-
interface Props$
|
|
58
|
+
interface Props$f {
|
|
59
59
|
disabled?: boolean;
|
|
60
60
|
color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
|
|
61
61
|
type?: 'button' | 'submit';
|
|
@@ -66,9 +66,9 @@ interface Props$e {
|
|
|
66
66
|
size?: 'big' | 'base' | 'small' | 'square';
|
|
67
67
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
68
68
|
}
|
|
69
|
-
declare const FunButton: React__default.FC<Props$
|
|
69
|
+
declare const FunButton: React__default.FC<Props$f>;
|
|
70
70
|
|
|
71
|
-
interface Props$
|
|
71
|
+
interface Props$e {
|
|
72
72
|
disabled?: boolean;
|
|
73
73
|
color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
|
|
74
74
|
type?: 'button' | 'submit';
|
|
@@ -78,9 +78,9 @@ interface Props$d {
|
|
|
78
78
|
size?: number;
|
|
79
79
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
80
80
|
}
|
|
81
|
-
declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$
|
|
81
|
+
declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$e) => react_jsx_runtime.JSX.Element;
|
|
82
82
|
|
|
83
|
-
type Props$
|
|
83
|
+
type Props$d = {
|
|
84
84
|
name: string;
|
|
85
85
|
labelText: React__default.ReactNode;
|
|
86
86
|
onChange?: (value: boolean) => void;
|
|
@@ -88,7 +88,7 @@ type Props$c = {
|
|
|
88
88
|
isDisabled?: boolean;
|
|
89
89
|
};
|
|
90
90
|
declare const Checkbox: {
|
|
91
|
-
({ name, labelText, isLarge, onChange, isDisabled }: Props$
|
|
91
|
+
({ name, labelText, isLarge, onChange, isDisabled }: Props$d): react_jsx_runtime.JSX.Element;
|
|
92
92
|
Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
93
93
|
};
|
|
94
94
|
type MultiChoiceCheckBoxProps = {
|
|
@@ -99,16 +99,16 @@ type MultiChoiceCheckBoxProps = {
|
|
|
99
99
|
isLarge?: boolean;
|
|
100
100
|
};
|
|
101
101
|
|
|
102
|
-
type Props$
|
|
102
|
+
type Props$c = {
|
|
103
103
|
name: string;
|
|
104
104
|
isLarge?: boolean;
|
|
105
105
|
labelText?: string;
|
|
106
106
|
option: string;
|
|
107
107
|
onSelect?: () => void;
|
|
108
108
|
};
|
|
109
|
-
declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$
|
|
109
|
+
declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$c) => react_jsx_runtime.JSX.Element;
|
|
110
110
|
|
|
111
|
-
interface Props$
|
|
111
|
+
interface Props$b {
|
|
112
112
|
title: string;
|
|
113
113
|
cancelText?: string;
|
|
114
114
|
isVisible: boolean;
|
|
@@ -124,7 +124,7 @@ interface Props$a {
|
|
|
124
124
|
isDark?: boolean;
|
|
125
125
|
children?: React__default.ReactNode;
|
|
126
126
|
}
|
|
127
|
-
declare const BAWrapper: React__default.FC<Props$
|
|
127
|
+
declare const BAWrapper: React__default.FC<Props$b>;
|
|
128
128
|
|
|
129
129
|
interface ContainerProps {
|
|
130
130
|
backgroundColor?: string;
|
|
@@ -136,12 +136,12 @@ interface ContainerProps {
|
|
|
136
136
|
}
|
|
137
137
|
declare const Container: React__default.FC<ContainerProps>;
|
|
138
138
|
|
|
139
|
-
type Props$
|
|
139
|
+
type Props$a = {
|
|
140
140
|
text: string;
|
|
141
141
|
style?: CSSProperties | undefined;
|
|
142
142
|
classNames?: string;
|
|
143
143
|
};
|
|
144
|
-
declare const ErrorText: ({ text, style, classNames }: Props$
|
|
144
|
+
declare const ErrorText: ({ text, style, classNames }: Props$a) => react_jsx_runtime.JSX.Element;
|
|
145
145
|
|
|
146
146
|
declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
|
|
147
147
|
declare const createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
|
|
@@ -161,29 +161,29 @@ type IconInfoProps = {
|
|
|
161
161
|
};
|
|
162
162
|
declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
|
|
163
163
|
|
|
164
|
-
type Props$
|
|
164
|
+
type Props$9 = {
|
|
165
165
|
loading: boolean;
|
|
166
166
|
message?: string;
|
|
167
167
|
};
|
|
168
|
-
declare const NoResults: ({ loading, message }: Props$
|
|
168
|
+
declare const NoResults: ({ loading, message }: Props$9) => react_jsx_runtime.JSX.Element;
|
|
169
169
|
|
|
170
|
-
interface Props$
|
|
170
|
+
interface Props$8 {
|
|
171
171
|
type?: 'error' | 'warning' | 'info';
|
|
172
172
|
isDismissible?: boolean;
|
|
173
173
|
onDismiss?: () => void;
|
|
174
174
|
isVisible: boolean;
|
|
175
175
|
}
|
|
176
|
-
declare const NoticeBox: React__default.FC<Props$
|
|
176
|
+
declare const NoticeBox: React__default.FC<Props$8 & React__default.HTMLAttributes<HTMLDivElement>>;
|
|
177
177
|
|
|
178
178
|
declare const Pill: ({ text }: {
|
|
179
179
|
text: string;
|
|
180
180
|
}) => react_jsx_runtime.JSX.Element;
|
|
181
181
|
|
|
182
|
-
type Props$
|
|
182
|
+
type Props$7 = {
|
|
183
183
|
avgRating: number;
|
|
184
184
|
large?: boolean;
|
|
185
185
|
};
|
|
186
|
-
declare const RatingStars: ({ avgRating, large }: Props$
|
|
186
|
+
declare const RatingStars: ({ avgRating, large }: Props$7) => react_jsx_runtime.JSX.Element;
|
|
187
187
|
|
|
188
188
|
interface SliderProps {
|
|
189
189
|
min: number;
|
|
@@ -207,12 +207,12 @@ type DebouncedSliderProps = {
|
|
|
207
207
|
type Step = {
|
|
208
208
|
label: ReactNode;
|
|
209
209
|
};
|
|
210
|
-
type Props$
|
|
210
|
+
type Props$6 = {
|
|
211
211
|
steps: Step[];
|
|
212
212
|
activeStep: number;
|
|
213
213
|
onStepPress: (s: number) => void;
|
|
214
214
|
};
|
|
215
|
-
declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$
|
|
215
|
+
declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$6) => react_jsx_runtime.JSX.Element;
|
|
216
216
|
|
|
217
217
|
interface TippyProps {
|
|
218
218
|
children: ReactNode;
|
|
@@ -230,13 +230,13 @@ type FormikProps = {
|
|
|
230
230
|
label: string;
|
|
231
231
|
name: string;
|
|
232
232
|
};
|
|
233
|
-
type Props$
|
|
233
|
+
type Props$5 = {
|
|
234
234
|
label: string;
|
|
235
235
|
onChange: (bool: boolean) => void;
|
|
236
236
|
value: boolean;
|
|
237
237
|
};
|
|
238
238
|
declare const ToggleSwitch: {
|
|
239
|
-
({ label, onChange, value }: Props$
|
|
239
|
+
({ label, onChange, value }: Props$5): react_jsx_runtime.JSX.Element;
|
|
240
240
|
Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
|
|
241
241
|
};
|
|
242
242
|
|
|
@@ -250,11 +250,11 @@ type ModeProps = {
|
|
|
250
250
|
};
|
|
251
251
|
declare const UserContentSwitcher: ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }: ModeProps) => react_jsx_runtime.JSX.Element;
|
|
252
252
|
|
|
253
|
-
type Props$
|
|
253
|
+
type Props$4 = {
|
|
254
254
|
inProp: boolean;
|
|
255
255
|
children: React__default.ReactNode;
|
|
256
256
|
};
|
|
257
|
-
declare const Fade: ({ children, inProp }: Props$
|
|
257
|
+
declare const Fade: ({ children, inProp }: Props$4) => react_jsx_runtime.JSX.Element;
|
|
258
258
|
|
|
259
259
|
declare const openSans: next_dist_compiled__next_font.NextFontWithVariable;
|
|
260
260
|
declare const ubuntu: next_dist_compiled__next_font.NextFontWithVariable;
|
|
@@ -273,9 +273,9 @@ declare const ProgressBar: {
|
|
|
273
273
|
({ progress }: {
|
|
274
274
|
progress: number;
|
|
275
275
|
}): react_jsx_runtime.JSX.Element;
|
|
276
|
-
Step: ({ steps, stepIndex, onStepClick, color }: Props$
|
|
276
|
+
Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
|
|
277
277
|
};
|
|
278
|
-
type Props$
|
|
278
|
+
type Props$3 = {
|
|
279
279
|
steps: {
|
|
280
280
|
label: string;
|
|
281
281
|
}[];
|
|
@@ -284,14 +284,24 @@ type Props$2 = {
|
|
|
284
284
|
onStepClick?: (i: number) => void;
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
type Props$
|
|
287
|
+
type Props$2 = {
|
|
288
288
|
twColor?: string;
|
|
289
289
|
percentage: number;
|
|
290
290
|
radius: number;
|
|
291
291
|
fill?: string;
|
|
292
292
|
strokeWidth?: number;
|
|
293
293
|
};
|
|
294
|
-
declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$
|
|
294
|
+
declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
|
|
295
|
+
|
|
296
|
+
type Props$1 = {
|
|
297
|
+
twColor?: string;
|
|
298
|
+
percentage: number;
|
|
299
|
+
label: string;
|
|
300
|
+
};
|
|
301
|
+
declare const CourseProgress: {
|
|
302
|
+
({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
|
|
303
|
+
Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
304
|
+
};
|
|
295
305
|
|
|
296
306
|
declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
|
|
297
307
|
|
|
@@ -319,4 +329,4 @@ declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
|
|
|
319
329
|
|
|
320
330
|
declare const PRIMARY_COLOR = "#00b4d8";
|
|
321
331
|
|
|
322
|
-
export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
|
|
332
|
+
export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,12 +4,12 @@ import React__default, { CSSProperties, ReactNode } from 'react';
|
|
|
4
4
|
import { Placement } from '@floating-ui/react';
|
|
5
5
|
import * as next_dist_compiled__next_font from 'next/dist/compiled/@next/font';
|
|
6
6
|
|
|
7
|
-
type Props$
|
|
7
|
+
type Props$h = {
|
|
8
8
|
visible: boolean;
|
|
9
9
|
onClick: () => void;
|
|
10
10
|
opacity?: number;
|
|
11
11
|
};
|
|
12
|
-
declare const Backdrop: ({ visible, onClick, opacity }: Props$
|
|
12
|
+
declare const Backdrop: ({ visible, onClick, opacity }: Props$h) => react_jsx_runtime.JSX.Element | null;
|
|
13
13
|
|
|
14
14
|
interface BaseModalProps {
|
|
15
15
|
visible: boolean;
|
|
@@ -44,7 +44,7 @@ declare const Breakpoint: React__default.FC<{
|
|
|
44
44
|
children: React__default.ReactNode;
|
|
45
45
|
}>;
|
|
46
46
|
|
|
47
|
-
interface Props$
|
|
47
|
+
interface Props$g {
|
|
48
48
|
disabled?: boolean;
|
|
49
49
|
kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
|
|
50
50
|
size?: 'small' | 'fixed' | 'large';
|
|
@@ -53,9 +53,9 @@ interface Props$f {
|
|
|
53
53
|
children: React__default.ReactNode;
|
|
54
54
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
55
55
|
}
|
|
56
|
-
declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$
|
|
56
|
+
declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$g) => react_jsx_runtime.JSX.Element;
|
|
57
57
|
|
|
58
|
-
interface Props$
|
|
58
|
+
interface Props$f {
|
|
59
59
|
disabled?: boolean;
|
|
60
60
|
color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
|
|
61
61
|
type?: 'button' | 'submit';
|
|
@@ -66,9 +66,9 @@ interface Props$e {
|
|
|
66
66
|
size?: 'big' | 'base' | 'small' | 'square';
|
|
67
67
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
68
68
|
}
|
|
69
|
-
declare const FunButton: React__default.FC<Props$
|
|
69
|
+
declare const FunButton: React__default.FC<Props$f>;
|
|
70
70
|
|
|
71
|
-
interface Props$
|
|
71
|
+
interface Props$e {
|
|
72
72
|
disabled?: boolean;
|
|
73
73
|
color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
|
|
74
74
|
type?: 'button' | 'submit';
|
|
@@ -78,9 +78,9 @@ interface Props$d {
|
|
|
78
78
|
size?: number;
|
|
79
79
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
80
80
|
}
|
|
81
|
-
declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$
|
|
81
|
+
declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$e) => react_jsx_runtime.JSX.Element;
|
|
82
82
|
|
|
83
|
-
type Props$
|
|
83
|
+
type Props$d = {
|
|
84
84
|
name: string;
|
|
85
85
|
labelText: React__default.ReactNode;
|
|
86
86
|
onChange?: (value: boolean) => void;
|
|
@@ -88,7 +88,7 @@ type Props$c = {
|
|
|
88
88
|
isDisabled?: boolean;
|
|
89
89
|
};
|
|
90
90
|
declare const Checkbox: {
|
|
91
|
-
({ name, labelText, isLarge, onChange, isDisabled }: Props$
|
|
91
|
+
({ name, labelText, isLarge, onChange, isDisabled }: Props$d): react_jsx_runtime.JSX.Element;
|
|
92
92
|
Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
93
93
|
};
|
|
94
94
|
type MultiChoiceCheckBoxProps = {
|
|
@@ -99,16 +99,16 @@ type MultiChoiceCheckBoxProps = {
|
|
|
99
99
|
isLarge?: boolean;
|
|
100
100
|
};
|
|
101
101
|
|
|
102
|
-
type Props$
|
|
102
|
+
type Props$c = {
|
|
103
103
|
name: string;
|
|
104
104
|
isLarge?: boolean;
|
|
105
105
|
labelText?: string;
|
|
106
106
|
option: string;
|
|
107
107
|
onSelect?: () => void;
|
|
108
108
|
};
|
|
109
|
-
declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$
|
|
109
|
+
declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$c) => react_jsx_runtime.JSX.Element;
|
|
110
110
|
|
|
111
|
-
interface Props$
|
|
111
|
+
interface Props$b {
|
|
112
112
|
title: string;
|
|
113
113
|
cancelText?: string;
|
|
114
114
|
isVisible: boolean;
|
|
@@ -124,7 +124,7 @@ interface Props$a {
|
|
|
124
124
|
isDark?: boolean;
|
|
125
125
|
children?: React__default.ReactNode;
|
|
126
126
|
}
|
|
127
|
-
declare const BAWrapper: React__default.FC<Props$
|
|
127
|
+
declare const BAWrapper: React__default.FC<Props$b>;
|
|
128
128
|
|
|
129
129
|
interface ContainerProps {
|
|
130
130
|
backgroundColor?: string;
|
|
@@ -136,12 +136,12 @@ interface ContainerProps {
|
|
|
136
136
|
}
|
|
137
137
|
declare const Container: React__default.FC<ContainerProps>;
|
|
138
138
|
|
|
139
|
-
type Props$
|
|
139
|
+
type Props$a = {
|
|
140
140
|
text: string;
|
|
141
141
|
style?: CSSProperties | undefined;
|
|
142
142
|
classNames?: string;
|
|
143
143
|
};
|
|
144
|
-
declare const ErrorText: ({ text, style, classNames }: Props$
|
|
144
|
+
declare const ErrorText: ({ text, style, classNames }: Props$a) => react_jsx_runtime.JSX.Element;
|
|
145
145
|
|
|
146
146
|
declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
|
|
147
147
|
declare const createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
|
|
@@ -161,29 +161,29 @@ type IconInfoProps = {
|
|
|
161
161
|
};
|
|
162
162
|
declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
|
|
163
163
|
|
|
164
|
-
type Props$
|
|
164
|
+
type Props$9 = {
|
|
165
165
|
loading: boolean;
|
|
166
166
|
message?: string;
|
|
167
167
|
};
|
|
168
|
-
declare const NoResults: ({ loading, message }: Props$
|
|
168
|
+
declare const NoResults: ({ loading, message }: Props$9) => react_jsx_runtime.JSX.Element;
|
|
169
169
|
|
|
170
|
-
interface Props$
|
|
170
|
+
interface Props$8 {
|
|
171
171
|
type?: 'error' | 'warning' | 'info';
|
|
172
172
|
isDismissible?: boolean;
|
|
173
173
|
onDismiss?: () => void;
|
|
174
174
|
isVisible: boolean;
|
|
175
175
|
}
|
|
176
|
-
declare const NoticeBox: React__default.FC<Props$
|
|
176
|
+
declare const NoticeBox: React__default.FC<Props$8 & React__default.HTMLAttributes<HTMLDivElement>>;
|
|
177
177
|
|
|
178
178
|
declare const Pill: ({ text }: {
|
|
179
179
|
text: string;
|
|
180
180
|
}) => react_jsx_runtime.JSX.Element;
|
|
181
181
|
|
|
182
|
-
type Props$
|
|
182
|
+
type Props$7 = {
|
|
183
183
|
avgRating: number;
|
|
184
184
|
large?: boolean;
|
|
185
185
|
};
|
|
186
|
-
declare const RatingStars: ({ avgRating, large }: Props$
|
|
186
|
+
declare const RatingStars: ({ avgRating, large }: Props$7) => react_jsx_runtime.JSX.Element;
|
|
187
187
|
|
|
188
188
|
interface SliderProps {
|
|
189
189
|
min: number;
|
|
@@ -207,12 +207,12 @@ type DebouncedSliderProps = {
|
|
|
207
207
|
type Step = {
|
|
208
208
|
label: ReactNode;
|
|
209
209
|
};
|
|
210
|
-
type Props$
|
|
210
|
+
type Props$6 = {
|
|
211
211
|
steps: Step[];
|
|
212
212
|
activeStep: number;
|
|
213
213
|
onStepPress: (s: number) => void;
|
|
214
214
|
};
|
|
215
|
-
declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$
|
|
215
|
+
declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$6) => react_jsx_runtime.JSX.Element;
|
|
216
216
|
|
|
217
217
|
interface TippyProps {
|
|
218
218
|
children: ReactNode;
|
|
@@ -230,13 +230,13 @@ type FormikProps = {
|
|
|
230
230
|
label: string;
|
|
231
231
|
name: string;
|
|
232
232
|
};
|
|
233
|
-
type Props$
|
|
233
|
+
type Props$5 = {
|
|
234
234
|
label: string;
|
|
235
235
|
onChange: (bool: boolean) => void;
|
|
236
236
|
value: boolean;
|
|
237
237
|
};
|
|
238
238
|
declare const ToggleSwitch: {
|
|
239
|
-
({ label, onChange, value }: Props$
|
|
239
|
+
({ label, onChange, value }: Props$5): react_jsx_runtime.JSX.Element;
|
|
240
240
|
Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
|
|
241
241
|
};
|
|
242
242
|
|
|
@@ -250,11 +250,11 @@ type ModeProps = {
|
|
|
250
250
|
};
|
|
251
251
|
declare const UserContentSwitcher: ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }: ModeProps) => react_jsx_runtime.JSX.Element;
|
|
252
252
|
|
|
253
|
-
type Props$
|
|
253
|
+
type Props$4 = {
|
|
254
254
|
inProp: boolean;
|
|
255
255
|
children: React__default.ReactNode;
|
|
256
256
|
};
|
|
257
|
-
declare const Fade: ({ children, inProp }: Props$
|
|
257
|
+
declare const Fade: ({ children, inProp }: Props$4) => react_jsx_runtime.JSX.Element;
|
|
258
258
|
|
|
259
259
|
declare const openSans: next_dist_compiled__next_font.NextFontWithVariable;
|
|
260
260
|
declare const ubuntu: next_dist_compiled__next_font.NextFontWithVariable;
|
|
@@ -273,9 +273,9 @@ declare const ProgressBar: {
|
|
|
273
273
|
({ progress }: {
|
|
274
274
|
progress: number;
|
|
275
275
|
}): react_jsx_runtime.JSX.Element;
|
|
276
|
-
Step: ({ steps, stepIndex, onStepClick, color }: Props$
|
|
276
|
+
Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
|
|
277
277
|
};
|
|
278
|
-
type Props$
|
|
278
|
+
type Props$3 = {
|
|
279
279
|
steps: {
|
|
280
280
|
label: string;
|
|
281
281
|
}[];
|
|
@@ -284,14 +284,24 @@ type Props$2 = {
|
|
|
284
284
|
onStepClick?: (i: number) => void;
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
type Props$
|
|
287
|
+
type Props$2 = {
|
|
288
288
|
twColor?: string;
|
|
289
289
|
percentage: number;
|
|
290
290
|
radius: number;
|
|
291
291
|
fill?: string;
|
|
292
292
|
strokeWidth?: number;
|
|
293
293
|
};
|
|
294
|
-
declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$
|
|
294
|
+
declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
|
|
295
|
+
|
|
296
|
+
type Props$1 = {
|
|
297
|
+
twColor?: string;
|
|
298
|
+
percentage: number;
|
|
299
|
+
label: string;
|
|
300
|
+
};
|
|
301
|
+
declare const CourseProgress: {
|
|
302
|
+
({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
|
|
303
|
+
Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
304
|
+
};
|
|
295
305
|
|
|
296
306
|
declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
|
|
297
307
|
|
|
@@ -319,4 +329,4 @@ declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
|
|
|
319
329
|
|
|
320
330
|
declare const PRIMARY_COLOR = "#00b4d8";
|
|
321
331
|
|
|
322
|
-
export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
|
|
332
|
+
export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
|
package/dist/index.js
CHANGED
|
@@ -67,6 +67,7 @@ __export(index_exports, {
|
|
|
67
67
|
Checkbox: () => Checkbox_default,
|
|
68
68
|
CircleProgress: () => CircleProgress_default,
|
|
69
69
|
Container: () => Container_default,
|
|
70
|
+
CourseProgress: () => CourseProgress_default,
|
|
70
71
|
ErrorText: () => ErrorText_default,
|
|
71
72
|
Fade: () => Fade_default,
|
|
72
73
|
FunButton: () => FunButton_default,
|
|
@@ -77,7 +78,7 @@ __export(index_exports, {
|
|
|
77
78
|
NoticeBox: () => NoticeBox_default,
|
|
78
79
|
Overlay: () => Overlay_default,
|
|
79
80
|
OverlaySpinner: () => OverlaySpinner_default,
|
|
80
|
-
PRIMARY_COLOR: () =>
|
|
81
|
+
PRIMARY_COLOR: () => PRIMARY_COLOR3,
|
|
81
82
|
Pill: () => Pill_default,
|
|
82
83
|
ProgressBar: () => ProgressBar_default,
|
|
83
84
|
ProgressBarSimple: () => ProgressBarSimple_default,
|
|
@@ -1310,10 +1311,111 @@ var CircleProgress = ({ twColor, percentage, radius, fill, strokeWidth }) => {
|
|
|
1310
1311
|
};
|
|
1311
1312
|
var CircleProgress_default = CircleProgress;
|
|
1312
1313
|
|
|
1313
|
-
// src/ProgressBar/
|
|
1314
|
-
var import_react10 = require("react");
|
|
1314
|
+
// src/ProgressBar/CourseProgress.tsx
|
|
1315
1315
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1316
1316
|
var PRIMARY_COLOR = "#00b4d8";
|
|
1317
|
+
var CourseProgress = ({ twColor, percentage, label }) => {
|
|
1318
|
+
const cx = "50%";
|
|
1319
|
+
const cy = "50%";
|
|
1320
|
+
const r = 50;
|
|
1321
|
+
const strokeWidth = 10;
|
|
1322
|
+
const fullLength = 2 * Math.PI * r;
|
|
1323
|
+
const length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
|
|
1324
|
+
const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
|
|
1325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center flex-col justify-center space-y-0 dark:bg-inherit dark:text-gray-300", children: [
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full`, children: [
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `-rotate-90`, children: [
|
|
1328
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1329
|
+
"circle",
|
|
1330
|
+
{
|
|
1331
|
+
className: "text-gray-300",
|
|
1332
|
+
strokeWidth,
|
|
1333
|
+
stroke: "currentColor",
|
|
1334
|
+
fill: "transparent",
|
|
1335
|
+
r,
|
|
1336
|
+
cx,
|
|
1337
|
+
cy
|
|
1338
|
+
}
|
|
1339
|
+
),
|
|
1340
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1341
|
+
"circle",
|
|
1342
|
+
{
|
|
1343
|
+
style: { strokeDashoffset },
|
|
1344
|
+
color: twColor || PRIMARY_COLOR,
|
|
1345
|
+
ref: (ref) => {
|
|
1346
|
+
if (ref) {
|
|
1347
|
+
}
|
|
1348
|
+
},
|
|
1349
|
+
strokeWidth,
|
|
1350
|
+
strokeLinecap: "round",
|
|
1351
|
+
stroke: "currentColor",
|
|
1352
|
+
fill: "transparent",
|
|
1353
|
+
r,
|
|
1354
|
+
cx,
|
|
1355
|
+
cy,
|
|
1356
|
+
strokeDasharray: fullLength,
|
|
1357
|
+
strokeDashoffset: length
|
|
1358
|
+
}
|
|
1359
|
+
)
|
|
1360
|
+
] }),
|
|
1361
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `absolute top-[${50 / 2}] text-xl leading-none font-medium font-header hidden sm:block`, children: percentage.toString() + "%" })
|
|
1362
|
+
] }),
|
|
1363
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "font-medium sm:text-xl font-header text-center w-full", children: label })
|
|
1364
|
+
] });
|
|
1365
|
+
};
|
|
1366
|
+
var Small = ({ twColor, percentage, label }) => {
|
|
1367
|
+
const cx = 18;
|
|
1368
|
+
const cy = 18;
|
|
1369
|
+
const r = 14;
|
|
1370
|
+
const strokeWidth = 4;
|
|
1371
|
+
const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
|
|
1372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full", children: [
|
|
1373
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `flex items-center justify-center overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `w-10 h-11 transform translate-x-1 translate-y-1`, children: [
|
|
1374
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1375
|
+
"circle",
|
|
1376
|
+
{
|
|
1377
|
+
className: "text-gray-300",
|
|
1378
|
+
strokeWidth,
|
|
1379
|
+
stroke: "currentColor",
|
|
1380
|
+
fill: "transparent",
|
|
1381
|
+
r,
|
|
1382
|
+
cx,
|
|
1383
|
+
cy
|
|
1384
|
+
}
|
|
1385
|
+
),
|
|
1386
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1387
|
+
"circle",
|
|
1388
|
+
{
|
|
1389
|
+
style: { strokeDashoffset },
|
|
1390
|
+
className: twColor || "text-blue-500",
|
|
1391
|
+
ref: (ref) => {
|
|
1392
|
+
if (ref) {
|
|
1393
|
+
}
|
|
1394
|
+
},
|
|
1395
|
+
strokeWidth,
|
|
1396
|
+
strokeLinecap: "round",
|
|
1397
|
+
stroke: "currentColor",
|
|
1398
|
+
fill: "transparent",
|
|
1399
|
+
r,
|
|
1400
|
+
cx,
|
|
1401
|
+
cy
|
|
1402
|
+
}
|
|
1403
|
+
)
|
|
1404
|
+
] }) }),
|
|
1405
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1", children: [
|
|
1406
|
+
label,
|
|
1407
|
+
" ",
|
|
1408
|
+
percentage.toString() + "%"
|
|
1409
|
+
] })
|
|
1410
|
+
] });
|
|
1411
|
+
};
|
|
1412
|
+
CourseProgress.Small = Small;
|
|
1413
|
+
var CourseProgress_default = CourseProgress;
|
|
1414
|
+
|
|
1415
|
+
// src/ProgressBar/ScrollProgress.tsx
|
|
1416
|
+
var import_react10 = require("react");
|
|
1417
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1418
|
+
var PRIMARY_COLOR2 = "#00b4d8";
|
|
1317
1419
|
var ScrollProgress = () => {
|
|
1318
1420
|
const [scrollPercentage, setScrollPercentage] = (0, import_react10.useState)(0);
|
|
1319
1421
|
(0, import_react10.useEffect)(() => {
|
|
@@ -1329,7 +1431,7 @@ var ScrollProgress = () => {
|
|
|
1329
1431
|
window.removeEventListener("scroll", handleScroll);
|
|
1330
1432
|
};
|
|
1331
1433
|
}, []);
|
|
1332
|
-
return /* @__PURE__ */ (0,
|
|
1434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1333
1435
|
"div",
|
|
1334
1436
|
{
|
|
1335
1437
|
style: {
|
|
@@ -1342,12 +1444,12 @@ var ScrollProgress = () => {
|
|
|
1342
1444
|
left: "0px",
|
|
1343
1445
|
right: "0px"
|
|
1344
1446
|
},
|
|
1345
|
-
children: /* @__PURE__ */ (0,
|
|
1447
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1346
1448
|
"div",
|
|
1347
1449
|
{
|
|
1348
1450
|
style: {
|
|
1349
1451
|
height: "100%",
|
|
1350
|
-
backgroundColor:
|
|
1452
|
+
backgroundColor: PRIMARY_COLOR2,
|
|
1351
1453
|
borderRadius: 2,
|
|
1352
1454
|
width: `${scrollPercentage}%`
|
|
1353
1455
|
}
|
|
@@ -1360,7 +1462,7 @@ var ScrollProgress_default = ScrollProgress;
|
|
|
1360
1462
|
|
|
1361
1463
|
// src/Icons/AnimateLogo.tsx
|
|
1362
1464
|
var import_react11 = require("react");
|
|
1363
|
-
var
|
|
1465
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1364
1466
|
var AnimateLogo = () => {
|
|
1365
1467
|
const [isFirefox, setIsFirefox] = (0, import_react11.useState)(false);
|
|
1366
1468
|
(0, import_react11.useEffect)(() => {
|
|
@@ -1368,7 +1470,7 @@ var AnimateLogo = () => {
|
|
|
1368
1470
|
setIsFirefox(userAgent.indexOf("Firefox") > -1);
|
|
1369
1471
|
}, []);
|
|
1370
1472
|
if (isFirefox) {
|
|
1371
|
-
return /* @__PURE__ */ (0,
|
|
1473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1372
1474
|
"path",
|
|
1373
1475
|
{
|
|
1374
1476
|
className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
|
|
@@ -1380,7 +1482,7 @@ var AnimateLogo = () => {
|
|
|
1380
1482
|
strokeDasharray: "1600",
|
|
1381
1483
|
d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
|
|
1382
1484
|
children: [
|
|
1383
|
-
/* @__PURE__ */ (0,
|
|
1485
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1384
1486
|
"animate",
|
|
1385
1487
|
{
|
|
1386
1488
|
attributeName: "stroke-dashoffset",
|
|
@@ -1395,7 +1497,7 @@ var AnimateLogo = () => {
|
|
|
1395
1497
|
values: "1600;0;0;1600;1600"
|
|
1396
1498
|
}
|
|
1397
1499
|
),
|
|
1398
|
-
/* @__PURE__ */ (0,
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1399
1501
|
"animateTransform",
|
|
1400
1502
|
{
|
|
1401
1503
|
attributeName: "transform",
|
|
@@ -1415,7 +1517,7 @@ var AnimateLogo = () => {
|
|
|
1415
1517
|
}
|
|
1416
1518
|
) }) });
|
|
1417
1519
|
}
|
|
1418
|
-
return /* @__PURE__ */ (0,
|
|
1520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1419
1521
|
"g",
|
|
1420
1522
|
{
|
|
1421
1523
|
style: {
|
|
@@ -1425,7 +1527,7 @@ var AnimateLogo = () => {
|
|
|
1425
1527
|
height: 176,
|
|
1426
1528
|
width: 176,
|
|
1427
1529
|
children: [
|
|
1428
|
-
/* @__PURE__ */ (0,
|
|
1530
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1429
1531
|
"path",
|
|
1430
1532
|
{
|
|
1431
1533
|
className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
|
|
@@ -1442,7 +1544,7 @@ var AnimateLogo = () => {
|
|
|
1442
1544
|
strokeWidth: "82",
|
|
1443
1545
|
strokeDasharray: "1600",
|
|
1444
1546
|
d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
|
|
1445
|
-
children: /* @__PURE__ */ (0,
|
|
1547
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1446
1548
|
"animate",
|
|
1447
1549
|
{
|
|
1448
1550
|
attributeName: "stroke-dashoffset",
|
|
@@ -1459,7 +1561,7 @@ var AnimateLogo = () => {
|
|
|
1459
1561
|
)
|
|
1460
1562
|
}
|
|
1461
1563
|
),
|
|
1462
|
-
/* @__PURE__ */ (0,
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1463
1565
|
"animateTransform",
|
|
1464
1566
|
{
|
|
1465
1567
|
attributeName: "transform",
|
|
@@ -1484,14 +1586,14 @@ var AnimateLogo_default = AnimateLogo;
|
|
|
1484
1586
|
// src/Spinners/OverlaySpinner.tsx
|
|
1485
1587
|
var import_react12 = require("react");
|
|
1486
1588
|
var import_react_dom3 = require("react-dom");
|
|
1487
|
-
var
|
|
1589
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1488
1590
|
var OverlaySpinner = ({ visible }) => {
|
|
1489
1591
|
const [mounted, setMounted] = (0, import_react12.useState)(false);
|
|
1490
1592
|
(0, import_react12.useEffect)(() => setMounted(true), []);
|
|
1491
1593
|
if (!mounted) return null;
|
|
1492
1594
|
if (!visible) return null;
|
|
1493
1595
|
return (0, import_react_dom3.createPortal)(
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AnimateLogo_default, {}) }) }) }),
|
|
1495
1597
|
typeof window !== "undefined" ? document.body : {},
|
|
1496
1598
|
"spinner"
|
|
1497
1599
|
);
|
|
@@ -1499,7 +1601,7 @@ var OverlaySpinner = ({ visible }) => {
|
|
|
1499
1601
|
var OverlaySpinner_default = OverlaySpinner;
|
|
1500
1602
|
|
|
1501
1603
|
// src/constants.tsx
|
|
1502
|
-
var
|
|
1604
|
+
var PRIMARY_COLOR3 = "#00b4d8";
|
|
1503
1605
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1504
1606
|
0 && (module.exports = {
|
|
1505
1607
|
AnimateLogo,
|
|
@@ -1510,6 +1612,7 @@ var PRIMARY_COLOR2 = "#00b4d8";
|
|
|
1510
1612
|
Checkbox,
|
|
1511
1613
|
CircleProgress,
|
|
1512
1614
|
Container,
|
|
1615
|
+
CourseProgress,
|
|
1513
1616
|
ErrorText,
|
|
1514
1617
|
Fade,
|
|
1515
1618
|
FunButton,
|
package/dist/index.mjs
CHANGED
|
@@ -1246,10 +1246,111 @@ var CircleProgress = ({ twColor, percentage, radius, fill, strokeWidth }) => {
|
|
|
1246
1246
|
};
|
|
1247
1247
|
var CircleProgress_default = CircleProgress;
|
|
1248
1248
|
|
|
1249
|
+
// src/ProgressBar/CourseProgress.tsx
|
|
1250
|
+
import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1251
|
+
var PRIMARY_COLOR = "#00b4d8";
|
|
1252
|
+
var CourseProgress = ({ twColor, percentage, label }) => {
|
|
1253
|
+
const cx = "50%";
|
|
1254
|
+
const cy = "50%";
|
|
1255
|
+
const r = 50;
|
|
1256
|
+
const strokeWidth = 10;
|
|
1257
|
+
const fullLength = 2 * Math.PI * r;
|
|
1258
|
+
const length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
|
|
1259
|
+
const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
|
|
1260
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex items-center flex-col justify-center space-y-0 dark:bg-inherit dark:text-gray-300", children: [
|
|
1261
|
+
/* @__PURE__ */ jsxs15("div", { className: `relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full`, children: [
|
|
1262
|
+
/* @__PURE__ */ jsxs15("svg", { className: `-rotate-90`, children: [
|
|
1263
|
+
/* @__PURE__ */ jsx33(
|
|
1264
|
+
"circle",
|
|
1265
|
+
{
|
|
1266
|
+
className: "text-gray-300",
|
|
1267
|
+
strokeWidth,
|
|
1268
|
+
stroke: "currentColor",
|
|
1269
|
+
fill: "transparent",
|
|
1270
|
+
r,
|
|
1271
|
+
cx,
|
|
1272
|
+
cy
|
|
1273
|
+
}
|
|
1274
|
+
),
|
|
1275
|
+
/* @__PURE__ */ jsx33(
|
|
1276
|
+
"circle",
|
|
1277
|
+
{
|
|
1278
|
+
style: { strokeDashoffset },
|
|
1279
|
+
color: twColor || PRIMARY_COLOR,
|
|
1280
|
+
ref: (ref) => {
|
|
1281
|
+
if (ref) {
|
|
1282
|
+
}
|
|
1283
|
+
},
|
|
1284
|
+
strokeWidth,
|
|
1285
|
+
strokeLinecap: "round",
|
|
1286
|
+
stroke: "currentColor",
|
|
1287
|
+
fill: "transparent",
|
|
1288
|
+
r,
|
|
1289
|
+
cx,
|
|
1290
|
+
cy,
|
|
1291
|
+
strokeDasharray: fullLength,
|
|
1292
|
+
strokeDashoffset: length
|
|
1293
|
+
}
|
|
1294
|
+
)
|
|
1295
|
+
] }),
|
|
1296
|
+
/* @__PURE__ */ jsx33("span", { className: `absolute top-[${50 / 2}] text-xl leading-none font-medium font-header hidden sm:block`, children: percentage.toString() + "%" })
|
|
1297
|
+
] }),
|
|
1298
|
+
/* @__PURE__ */ jsx33("p", { className: "font-medium sm:text-xl font-header text-center w-full", children: label })
|
|
1299
|
+
] });
|
|
1300
|
+
};
|
|
1301
|
+
var Small = ({ twColor, percentage, label }) => {
|
|
1302
|
+
const cx = 18;
|
|
1303
|
+
const cy = 18;
|
|
1304
|
+
const r = 14;
|
|
1305
|
+
const strokeWidth = 4;
|
|
1306
|
+
const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
|
|
1307
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full", children: [
|
|
1308
|
+
/* @__PURE__ */ jsx33("div", { className: `flex items-center justify-center overflow-hidden`, children: /* @__PURE__ */ jsxs15("svg", { className: `w-10 h-11 transform translate-x-1 translate-y-1`, children: [
|
|
1309
|
+
/* @__PURE__ */ jsx33(
|
|
1310
|
+
"circle",
|
|
1311
|
+
{
|
|
1312
|
+
className: "text-gray-300",
|
|
1313
|
+
strokeWidth,
|
|
1314
|
+
stroke: "currentColor",
|
|
1315
|
+
fill: "transparent",
|
|
1316
|
+
r,
|
|
1317
|
+
cx,
|
|
1318
|
+
cy
|
|
1319
|
+
}
|
|
1320
|
+
),
|
|
1321
|
+
/* @__PURE__ */ jsx33(
|
|
1322
|
+
"circle",
|
|
1323
|
+
{
|
|
1324
|
+
style: { strokeDashoffset },
|
|
1325
|
+
className: twColor || "text-blue-500",
|
|
1326
|
+
ref: (ref) => {
|
|
1327
|
+
if (ref) {
|
|
1328
|
+
}
|
|
1329
|
+
},
|
|
1330
|
+
strokeWidth,
|
|
1331
|
+
strokeLinecap: "round",
|
|
1332
|
+
stroke: "currentColor",
|
|
1333
|
+
fill: "transparent",
|
|
1334
|
+
r,
|
|
1335
|
+
cx,
|
|
1336
|
+
cy
|
|
1337
|
+
}
|
|
1338
|
+
)
|
|
1339
|
+
] }) }),
|
|
1340
|
+
/* @__PURE__ */ jsxs15("p", { className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1", children: [
|
|
1341
|
+
label,
|
|
1342
|
+
" ",
|
|
1343
|
+
percentage.toString() + "%"
|
|
1344
|
+
] })
|
|
1345
|
+
] });
|
|
1346
|
+
};
|
|
1347
|
+
CourseProgress.Small = Small;
|
|
1348
|
+
var CourseProgress_default = CourseProgress;
|
|
1349
|
+
|
|
1249
1350
|
// src/ProgressBar/ScrollProgress.tsx
|
|
1250
1351
|
import { useEffect as useEffect5, useState as useState5 } from "react";
|
|
1251
|
-
import { jsx as
|
|
1252
|
-
var
|
|
1352
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1353
|
+
var PRIMARY_COLOR2 = "#00b4d8";
|
|
1253
1354
|
var ScrollProgress = () => {
|
|
1254
1355
|
const [scrollPercentage, setScrollPercentage] = useState5(0);
|
|
1255
1356
|
useEffect5(() => {
|
|
@@ -1265,7 +1366,7 @@ var ScrollProgress = () => {
|
|
|
1265
1366
|
window.removeEventListener("scroll", handleScroll);
|
|
1266
1367
|
};
|
|
1267
1368
|
}, []);
|
|
1268
|
-
return /* @__PURE__ */
|
|
1369
|
+
return /* @__PURE__ */ jsx34(
|
|
1269
1370
|
"div",
|
|
1270
1371
|
{
|
|
1271
1372
|
style: {
|
|
@@ -1278,12 +1379,12 @@ var ScrollProgress = () => {
|
|
|
1278
1379
|
left: "0px",
|
|
1279
1380
|
right: "0px"
|
|
1280
1381
|
},
|
|
1281
|
-
children: /* @__PURE__ */
|
|
1382
|
+
children: /* @__PURE__ */ jsx34(
|
|
1282
1383
|
"div",
|
|
1283
1384
|
{
|
|
1284
1385
|
style: {
|
|
1285
1386
|
height: "100%",
|
|
1286
|
-
backgroundColor:
|
|
1387
|
+
backgroundColor: PRIMARY_COLOR2,
|
|
1287
1388
|
borderRadius: 2,
|
|
1288
1389
|
width: `${scrollPercentage}%`
|
|
1289
1390
|
}
|
|
@@ -1296,7 +1397,7 @@ var ScrollProgress_default = ScrollProgress;
|
|
|
1296
1397
|
|
|
1297
1398
|
// src/Icons/AnimateLogo.tsx
|
|
1298
1399
|
import { useEffect as useEffect6, useState as useState6 } from "react";
|
|
1299
|
-
import { jsx as
|
|
1400
|
+
import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1300
1401
|
var AnimateLogo = () => {
|
|
1301
1402
|
const [isFirefox, setIsFirefox] = useState6(false);
|
|
1302
1403
|
useEffect6(() => {
|
|
@@ -1304,7 +1405,7 @@ var AnimateLogo = () => {
|
|
|
1304
1405
|
setIsFirefox(userAgent.indexOf("Firefox") > -1);
|
|
1305
1406
|
}, []);
|
|
1306
1407
|
if (isFirefox) {
|
|
1307
|
-
return /* @__PURE__ */
|
|
1408
|
+
return /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsx35("g", { children: /* @__PURE__ */ jsxs16(
|
|
1308
1409
|
"path",
|
|
1309
1410
|
{
|
|
1310
1411
|
className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
|
|
@@ -1316,7 +1417,7 @@ var AnimateLogo = () => {
|
|
|
1316
1417
|
strokeDasharray: "1600",
|
|
1317
1418
|
d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
|
|
1318
1419
|
children: [
|
|
1319
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsx35(
|
|
1320
1421
|
"animate",
|
|
1321
1422
|
{
|
|
1322
1423
|
attributeName: "stroke-dashoffset",
|
|
@@ -1331,7 +1432,7 @@ var AnimateLogo = () => {
|
|
|
1331
1432
|
values: "1600;0;0;1600;1600"
|
|
1332
1433
|
}
|
|
1333
1434
|
),
|
|
1334
|
-
/* @__PURE__ */
|
|
1435
|
+
/* @__PURE__ */ jsx35(
|
|
1335
1436
|
"animateTransform",
|
|
1336
1437
|
{
|
|
1337
1438
|
attributeName: "transform",
|
|
@@ -1351,7 +1452,7 @@ var AnimateLogo = () => {
|
|
|
1351
1452
|
}
|
|
1352
1453
|
) }) });
|
|
1353
1454
|
}
|
|
1354
|
-
return /* @__PURE__ */
|
|
1455
|
+
return /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsxs16(
|
|
1355
1456
|
"g",
|
|
1356
1457
|
{
|
|
1357
1458
|
style: {
|
|
@@ -1361,7 +1462,7 @@ var AnimateLogo = () => {
|
|
|
1361
1462
|
height: 176,
|
|
1362
1463
|
width: 176,
|
|
1363
1464
|
children: [
|
|
1364
|
-
/* @__PURE__ */
|
|
1465
|
+
/* @__PURE__ */ jsx35(
|
|
1365
1466
|
"path",
|
|
1366
1467
|
{
|
|
1367
1468
|
className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
|
|
@@ -1378,7 +1479,7 @@ var AnimateLogo = () => {
|
|
|
1378
1479
|
strokeWidth: "82",
|
|
1379
1480
|
strokeDasharray: "1600",
|
|
1380
1481
|
d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
|
|
1381
|
-
children: /* @__PURE__ */
|
|
1482
|
+
children: /* @__PURE__ */ jsx35(
|
|
1382
1483
|
"animate",
|
|
1383
1484
|
{
|
|
1384
1485
|
attributeName: "stroke-dashoffset",
|
|
@@ -1395,7 +1496,7 @@ var AnimateLogo = () => {
|
|
|
1395
1496
|
)
|
|
1396
1497
|
}
|
|
1397
1498
|
),
|
|
1398
|
-
/* @__PURE__ */
|
|
1499
|
+
/* @__PURE__ */ jsx35(
|
|
1399
1500
|
"animateTransform",
|
|
1400
1501
|
{
|
|
1401
1502
|
attributeName: "transform",
|
|
@@ -1420,14 +1521,14 @@ var AnimateLogo_default = AnimateLogo;
|
|
|
1420
1521
|
// src/Spinners/OverlaySpinner.tsx
|
|
1421
1522
|
import { useEffect as useEffect7, useState as useState7 } from "react";
|
|
1422
1523
|
import { createPortal } from "react-dom";
|
|
1423
|
-
import { jsx as
|
|
1524
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
1424
1525
|
var OverlaySpinner = ({ visible }) => {
|
|
1425
1526
|
const [mounted, setMounted] = useState7(false);
|
|
1426
1527
|
useEffect7(() => setMounted(true), []);
|
|
1427
1528
|
if (!mounted) return null;
|
|
1428
1529
|
if (!visible) return null;
|
|
1429
1530
|
return createPortal(
|
|
1430
|
-
/* @__PURE__ */
|
|
1531
|
+
/* @__PURE__ */ jsx36("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx36("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ jsx36("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ jsx36(AnimateLogo_default, {}) }) }) }),
|
|
1431
1532
|
typeof window !== "undefined" ? document.body : {},
|
|
1432
1533
|
"spinner"
|
|
1433
1534
|
);
|
|
@@ -1435,7 +1536,7 @@ var OverlaySpinner = ({ visible }) => {
|
|
|
1435
1536
|
var OverlaySpinner_default = OverlaySpinner;
|
|
1436
1537
|
|
|
1437
1538
|
// src/constants.tsx
|
|
1438
|
-
var
|
|
1539
|
+
var PRIMARY_COLOR3 = "#00b4d8";
|
|
1439
1540
|
export {
|
|
1440
1541
|
AnimateLogo_default as AnimateLogo,
|
|
1441
1542
|
Backdrop_default as Backdrop,
|
|
@@ -1445,6 +1546,7 @@ export {
|
|
|
1445
1546
|
Checkbox_default as Checkbox,
|
|
1446
1547
|
CircleProgress_default as CircleProgress,
|
|
1447
1548
|
Container_default as Container,
|
|
1549
|
+
CourseProgress_default as CourseProgress,
|
|
1448
1550
|
ErrorText_default as ErrorText,
|
|
1449
1551
|
Fade_default as Fade,
|
|
1450
1552
|
FunButton_default as FunButton,
|
|
@@ -1455,7 +1557,7 @@ export {
|
|
|
1455
1557
|
NoticeBox_default as NoticeBox,
|
|
1456
1558
|
Overlay_default as Overlay,
|
|
1457
1559
|
OverlaySpinner_default as OverlaySpinner,
|
|
1458
|
-
|
|
1560
|
+
PRIMARY_COLOR3 as PRIMARY_COLOR,
|
|
1459
1561
|
Pill_default as Pill,
|
|
1460
1562
|
ProgressBar_default as ProgressBar,
|
|
1461
1563
|
ProgressBarSimple_default as ProgressBarSimple,
|