@contractspec/example.learning-journey-ui-gamified 1.57.0 → 1.58.0
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/.turbo/turbo-build.log +58 -62
- package/.turbo/turbo-prebuild.log +1 -0
- package/CHANGELOG.md +18 -0
- package/dist/GamifiedMiniApp.d.ts +4 -14
- package/dist/GamifiedMiniApp.d.ts.map +1 -1
- package/dist/GamifiedMiniApp.js +995 -59
- package/dist/browser/GamifiedMiniApp.js +998 -0
- package/dist/browser/components/DayCalendar.js +42 -0
- package/dist/browser/components/FlashCard.js +102 -0
- package/dist/browser/components/MasteryRing.js +75 -0
- package/dist/browser/components/index.js +217 -0
- package/dist/browser/docs/index.js +22 -0
- package/dist/browser/docs/learning-journey-ui-gamified.docblock.js +22 -0
- package/dist/browser/example.js +32 -0
- package/dist/browser/index.js +1057 -0
- package/dist/browser/views/Overview.js +236 -0
- package/dist/browser/views/Progress.js +294 -0
- package/dist/browser/views/Steps.js +157 -0
- package/dist/browser/views/Timeline.js +235 -0
- package/dist/browser/views/index.js +919 -0
- package/dist/components/DayCalendar.d.ts +5 -13
- package/dist/components/DayCalendar.d.ts.map +1 -1
- package/dist/components/DayCalendar.js +41 -31
- package/dist/components/FlashCard.d.ts +7 -16
- package/dist/components/FlashCard.d.ts.map +1 -1
- package/dist/components/FlashCard.js +99 -76
- package/dist/components/MasteryRing.d.ts +6 -15
- package/dist/components/MasteryRing.d.ts.map +1 -1
- package/dist/components/MasteryRing.js +72 -78
- package/dist/components/index.d.ts +4 -4
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +217 -4
- package/dist/docs/index.d.ts +2 -1
- package/dist/docs/index.d.ts.map +1 -0
- package/dist/docs/index.js +23 -1
- package/dist/docs/learning-journey-ui-gamified.docblock.d.ts +2 -1
- package/dist/docs/learning-journey-ui-gamified.docblock.d.ts.map +1 -0
- package/dist/docs/learning-journey-ui-gamified.docblock.js +21 -18
- package/dist/example.d.ts +2 -6
- package/dist/example.d.ts.map +1 -1
- package/dist/example.js +31 -39
- package/dist/index.d.ts +6 -12
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1058 -14
- package/dist/node/GamifiedMiniApp.js +998 -0
- package/dist/node/components/DayCalendar.js +42 -0
- package/dist/node/components/FlashCard.js +102 -0
- package/dist/node/components/MasteryRing.js +75 -0
- package/dist/node/components/index.js +217 -0
- package/dist/node/docs/index.js +22 -0
- package/dist/node/docs/learning-journey-ui-gamified.docblock.js +22 -0
- package/dist/node/example.js +32 -0
- package/dist/node/index.js +1057 -0
- package/dist/node/views/Overview.js +236 -0
- package/dist/node/views/Progress.js +294 -0
- package/dist/node/views/Steps.js +157 -0
- package/dist/node/views/Timeline.js +235 -0
- package/dist/node/views/index.js +919 -0
- package/dist/views/Overview.d.ts +4 -12
- package/dist/views/Overview.d.ts.map +1 -1
- package/dist/views/Overview.js +234 -158
- package/dist/views/Progress.d.ts +2 -10
- package/dist/views/Progress.d.ts.map +1 -1
- package/dist/views/Progress.js +292 -140
- package/dist/views/Steps.d.ts +2 -11
- package/dist/views/Steps.d.ts.map +1 -1
- package/dist/views/Steps.js +155 -53
- package/dist/views/Timeline.d.ts +2 -10
- package/dist/views/Timeline.d.ts.map +1 -1
- package/dist/views/Timeline.js +233 -130
- package/dist/views/index.d.ts +5 -5
- package/dist/views/index.d.ts.map +1 -0
- package/dist/views/index.js +919 -5
- package/package.json +154 -38
- package/tsdown.config.js +1 -2
- package/.turbo/turbo-build$colon$bundle.log +0 -59
- package/dist/GamifiedMiniApp.js.map +0 -1
- package/dist/components/DayCalendar.js.map +0 -1
- package/dist/components/FlashCard.js.map +0 -1
- package/dist/components/MasteryRing.js.map +0 -1
- package/dist/docs/learning-journey-ui-gamified.docblock.js.map +0 -1
- package/dist/example.js.map +0 -1
- package/dist/views/Overview.js.map +0 -1
- package/dist/views/Progress.js.map +0 -1
- package/dist/views/Steps.js.map +0 -1
- package/dist/views/Timeline.js.map +0 -1
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -1,16 +1,8 @@
|
|
|
1
|
-
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/components/DayCalendar.d.ts
|
|
4
1
|
interface DayCalendarProps {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
totalDays: number;
|
|
3
|
+
currentDay: number;
|
|
4
|
+
completedDays: number[];
|
|
8
5
|
}
|
|
9
|
-
declare function DayCalendar({
|
|
10
|
-
|
|
11
|
-
currentDay,
|
|
12
|
-
completedDays
|
|
13
|
-
}: DayCalendarProps): react_jsx_runtime0.JSX.Element;
|
|
14
|
-
//#endregion
|
|
15
|
-
export { DayCalendar };
|
|
6
|
+
export declare function DayCalendar({ totalDays, currentDay, completedDays, }: DayCalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
16
8
|
//# sourceMappingURL=DayCalendar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayCalendar.d.ts","
|
|
1
|
+
{"version":3,"file":"DayCalendar.d.ts","sourceRoot":"","sources":["../../src/components/DayCalendar.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,gBAAgB,2CAsClB"}
|
|
@@ -1,33 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
// @bun
|
|
2
|
+
// src/components/DayCalendar.tsx
|
|
4
3
|
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function DayCalendar({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
4
|
+
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
|
|
5
|
+
"use client";
|
|
6
|
+
function DayCalendar({
|
|
7
|
+
totalDays,
|
|
8
|
+
currentDay,
|
|
9
|
+
completedDays
|
|
10
|
+
}) {
|
|
11
|
+
const days = Array.from({ length: totalDays }, (_, i) => i + 1);
|
|
12
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
13
|
+
className: "grid grid-cols-7 gap-2",
|
|
14
|
+
children: days.map((day) => {
|
|
15
|
+
const isCompleted = completedDays.includes(day);
|
|
16
|
+
const isCurrent = day === currentDay;
|
|
17
|
+
const isLocked = day > currentDay;
|
|
18
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
19
|
+
className: cn("flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
|
|
20
|
+
children: isCompleted ? /* @__PURE__ */ jsxDEV("span", {
|
|
21
|
+
className: "text-lg",
|
|
22
|
+
children: "\u2713"
|
|
23
|
+
}, undefined, false, undefined, this) : isLocked ? /* @__PURE__ */ jsxDEV("span", {
|
|
24
|
+
className: "text-lg",
|
|
25
|
+
children: "\uD83D\uDD12"
|
|
26
|
+
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
29
|
+
className: "text-muted-foreground text-xs",
|
|
30
|
+
children: "Day"
|
|
31
|
+
}, undefined, false, undefined, this),
|
|
32
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
33
|
+
children: day
|
|
34
|
+
}, undefined, false, undefined, this)
|
|
35
|
+
]
|
|
36
|
+
}, undefined, true, undefined, this)
|
|
37
|
+
}, day, false, undefined, this);
|
|
38
|
+
})
|
|
39
|
+
}, undefined, false, undefined, this);
|
|
29
40
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
//# sourceMappingURL=DayCalendar.js.map
|
|
41
|
+
export {
|
|
42
|
+
DayCalendar
|
|
43
|
+
};
|
|
@@ -1,19 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { LearningJourneyStepSpec } from "@contractspec/module.learning-journey/track-spec";
|
|
3
|
-
|
|
4
|
-
//#region src/components/FlashCard.d.ts
|
|
1
|
+
import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
|
|
5
2
|
interface FlashCardProps {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
step: LearningJourneyStepSpec;
|
|
4
|
+
isCompleted: boolean;
|
|
5
|
+
isCurrent: boolean;
|
|
6
|
+
onComplete?: () => void;
|
|
10
7
|
}
|
|
11
|
-
declare function FlashCard({
|
|
12
|
-
|
|
13
|
-
isCompleted,
|
|
14
|
-
isCurrent,
|
|
15
|
-
onComplete
|
|
16
|
-
}: FlashCardProps): react_jsx_runtime0.JSX.Element;
|
|
17
|
-
//#endregion
|
|
18
|
-
export { FlashCard };
|
|
8
|
+
export declare function FlashCard({ step, isCompleted, isCurrent, onComplete, }: FlashCardProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
19
10
|
//# sourceMappingURL=FlashCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlashCard.d.ts","
|
|
1
|
+
{"version":3,"file":"FlashCard.d.ts","sourceRoot":"","sources":["../../src/components/FlashCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAEhG,UAAU,cAAc;IACtB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,cAAc,2CA+EhB"}
|
|
@@ -1,80 +1,103 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
// @bun
|
|
2
|
+
// src/components/FlashCard.tsx
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
import { Card, CardContent } from "@contractspec/lib.ui-kit-web/ui/card";
|
|
5
4
|
import { Button } from "@contractspec/lib.design-system";
|
|
6
|
-
import {
|
|
5
|
+
import { Card, CardContent } from "@contractspec/lib.ui-kit-web/ui/card";
|
|
7
6
|
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function FlashCard({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
7
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
8
|
+
"use client";
|
|
9
|
+
function FlashCard({
|
|
10
|
+
step,
|
|
11
|
+
isCompleted,
|
|
12
|
+
isCurrent,
|
|
13
|
+
onComplete
|
|
14
|
+
}) {
|
|
15
|
+
const [isFlipped, setIsFlipped] = useState(false);
|
|
16
|
+
return /* @__PURE__ */ jsxDEV(Card, {
|
|
17
|
+
className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
|
|
18
|
+
onClick: () => !isCompleted && setIsFlipped(!isFlipped),
|
|
19
|
+
children: /* @__PURE__ */ jsxDEV(CardContent, {
|
|
20
|
+
className: "p-6",
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
23
|
+
className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
26
|
+
className: "flex items-start justify-between",
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
29
|
+
className: "flex-1",
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ jsxDEV("h3", {
|
|
32
|
+
className: "text-lg font-semibold",
|
|
33
|
+
children: step.title
|
|
34
|
+
}, undefined, false, undefined, this),
|
|
35
|
+
step.description && /* @__PURE__ */ jsxDEV("p", {
|
|
36
|
+
className: "text-muted-foreground mt-1 text-sm",
|
|
37
|
+
children: step.description
|
|
38
|
+
}, undefined, false, undefined, this)
|
|
39
|
+
]
|
|
40
|
+
}, undefined, true, undefined, this),
|
|
41
|
+
step.xpReward && /* @__PURE__ */ jsxDEV("span", {
|
|
42
|
+
className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
|
|
43
|
+
children: [
|
|
44
|
+
"+",
|
|
45
|
+
step.xpReward,
|
|
46
|
+
" XP"
|
|
47
|
+
]
|
|
48
|
+
}, undefined, true, undefined, this)
|
|
49
|
+
]
|
|
50
|
+
}, undefined, true, undefined, this),
|
|
51
|
+
isCompleted && /* @__PURE__ */ jsxDEV("div", {
|
|
52
|
+
className: "flex items-center gap-2 text-green-500",
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
55
|
+
children: "\u2713"
|
|
56
|
+
}, undefined, false, undefined, this),
|
|
57
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
58
|
+
className: "text-sm font-medium",
|
|
59
|
+
children: "Completed"
|
|
60
|
+
}, undefined, false, undefined, this)
|
|
61
|
+
]
|
|
62
|
+
}, undefined, true, undefined, this),
|
|
63
|
+
isCurrent && !isCompleted && /* @__PURE__ */ jsxDEV("p", {
|
|
64
|
+
className: "text-muted-foreground text-xs",
|
|
65
|
+
children: "Tap to reveal action"
|
|
66
|
+
}, undefined, false, undefined, this)
|
|
67
|
+
]
|
|
68
|
+
}, undefined, true, undefined, this),
|
|
69
|
+
isFlipped && !isCompleted && /* @__PURE__ */ jsxDEV("div", {
|
|
70
|
+
className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsxDEV("p", {
|
|
73
|
+
className: "text-center text-sm",
|
|
74
|
+
children: step.instructions ?? "Complete this step to earn XP"
|
|
75
|
+
}, undefined, false, undefined, this),
|
|
76
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
77
|
+
className: "flex gap-2",
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
80
|
+
variant: "outline",
|
|
81
|
+
size: "sm",
|
|
82
|
+
onClick: () => setIsFlipped(false),
|
|
83
|
+
children: "Back"
|
|
84
|
+
}, undefined, false, undefined, this),
|
|
85
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
86
|
+
size: "sm",
|
|
87
|
+
onClick: (e) => {
|
|
88
|
+
e.stopPropagation();
|
|
89
|
+
onComplete?.();
|
|
90
|
+
},
|
|
91
|
+
children: "Mark Complete"
|
|
92
|
+
}, undefined, false, undefined, this)
|
|
93
|
+
]
|
|
94
|
+
}, undefined, true, undefined, this)
|
|
95
|
+
]
|
|
96
|
+
}, undefined, true, undefined, this)
|
|
97
|
+
]
|
|
98
|
+
}, undefined, true, undefined, this)
|
|
99
|
+
}, undefined, false, undefined, this);
|
|
76
100
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
//# sourceMappingURL=FlashCard.js.map
|
|
101
|
+
export {
|
|
102
|
+
FlashCard
|
|
103
|
+
};
|
|
@@ -1,18 +1,9 @@
|
|
|
1
|
-
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/components/MasteryRing.d.ts
|
|
4
1
|
interface MasteryRingProps {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
label: string;
|
|
3
|
+
percentage: number;
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
color?: 'green' | 'blue' | 'violet' | 'orange';
|
|
9
6
|
}
|
|
10
|
-
declare function MasteryRing({
|
|
11
|
-
|
|
12
|
-
percentage,
|
|
13
|
-
size,
|
|
14
|
-
color
|
|
15
|
-
}: MasteryRingProps): react_jsx_runtime0.JSX.Element;
|
|
16
|
-
//#endregion
|
|
17
|
-
export { MasteryRing };
|
|
7
|
+
export declare function MasteryRing({ label, percentage, size, color, }: MasteryRingProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
18
9
|
//# sourceMappingURL=MasteryRing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MasteryRing.d.ts","
|
|
1
|
+
{"version":3,"file":"MasteryRing.d.ts","sourceRoot":"","sources":["../../src/components/MasteryRing.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAChD;AAeD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,IAAW,EACX,KAAgB,GACjB,EAAE,gBAAgB,2CAmDlB"}
|
|
@@ -1,82 +1,76 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
// @bun
|
|
2
|
+
// src/components/MasteryRing.tsx
|
|
4
3
|
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
ring: 48,
|
|
12
|
-
stroke: 4
|
|
13
|
-
},
|
|
14
|
-
md: {
|
|
15
|
-
container: "h-24 w-24",
|
|
16
|
-
text: "text-sm",
|
|
17
|
-
ring: 72,
|
|
18
|
-
stroke: 6
|
|
19
|
-
},
|
|
20
|
-
lg: {
|
|
21
|
-
container: "h-32 w-32",
|
|
22
|
-
text: "text-base",
|
|
23
|
-
ring: 96,
|
|
24
|
-
stroke: 8
|
|
25
|
-
}
|
|
4
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
5
|
+
"use client";
|
|
6
|
+
var sizeStyles = {
|
|
7
|
+
sm: { container: "h-16 w-16", text: "text-xs", ring: 48, stroke: 4 },
|
|
8
|
+
md: { container: "h-24 w-24", text: "text-sm", ring: 72, stroke: 6 },
|
|
9
|
+
lg: { container: "h-32 w-32", text: "text-base", ring: 96, stroke: 8 }
|
|
26
10
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
11
|
+
var colorStyles = {
|
|
12
|
+
green: "stroke-green-500",
|
|
13
|
+
blue: "stroke-blue-500",
|
|
14
|
+
violet: "stroke-violet-500",
|
|
15
|
+
orange: "stroke-orange-500"
|
|
32
16
|
};
|
|
33
|
-
function MasteryRing({
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
17
|
+
function MasteryRing({
|
|
18
|
+
label,
|
|
19
|
+
percentage,
|
|
20
|
+
size = "md",
|
|
21
|
+
color = "violet"
|
|
22
|
+
}) {
|
|
23
|
+
const styles = sizeStyles[size];
|
|
24
|
+
const radius = (styles.ring - styles.stroke) / 2;
|
|
25
|
+
const circumference = 2 * Math.PI * radius;
|
|
26
|
+
const strokeDashoffset = circumference - percentage / 100 * circumference;
|
|
27
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
28
|
+
className: cn("relative flex flex-col items-center gap-1", styles.container),
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsxDEV("svg", {
|
|
31
|
+
className: "absolute -rotate-90",
|
|
32
|
+
width: styles.ring,
|
|
33
|
+
height: styles.ring,
|
|
34
|
+
viewBox: `0 0 ${styles.ring} ${styles.ring}`,
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ jsxDEV("circle", {
|
|
37
|
+
cx: styles.ring / 2,
|
|
38
|
+
cy: styles.ring / 2,
|
|
39
|
+
r: radius,
|
|
40
|
+
fill: "none",
|
|
41
|
+
strokeWidth: styles.stroke,
|
|
42
|
+
className: "stroke-muted"
|
|
43
|
+
}, undefined, false, undefined, this),
|
|
44
|
+
/* @__PURE__ */ jsxDEV("circle", {
|
|
45
|
+
cx: styles.ring / 2,
|
|
46
|
+
cy: styles.ring / 2,
|
|
47
|
+
r: radius,
|
|
48
|
+
fill: "none",
|
|
49
|
+
strokeWidth: styles.stroke,
|
|
50
|
+
strokeLinecap: "round",
|
|
51
|
+
strokeDasharray: circumference,
|
|
52
|
+
strokeDashoffset,
|
|
53
|
+
className: cn("transition-all duration-500", colorStyles[color])
|
|
54
|
+
}, undefined, false, undefined, this)
|
|
55
|
+
]
|
|
56
|
+
}, undefined, true, undefined, this),
|
|
57
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
58
|
+
className: "flex h-full flex-col items-center justify-center",
|
|
59
|
+
children: /* @__PURE__ */ jsxDEV("span", {
|
|
60
|
+
className: cn("font-bold", styles.text),
|
|
61
|
+
children: [
|
|
62
|
+
Math.round(percentage),
|
|
63
|
+
"%"
|
|
64
|
+
]
|
|
65
|
+
}, undefined, true, undefined, this)
|
|
66
|
+
}, undefined, false, undefined, this),
|
|
67
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
68
|
+
className: cn("text-muted-foreground mt-1 truncate", styles.text),
|
|
69
|
+
children: label
|
|
70
|
+
}, undefined, false, undefined, this)
|
|
71
|
+
]
|
|
72
|
+
}, undefined, true, undefined, this);
|
|
78
73
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
//# sourceMappingURL=MasteryRing.js.map
|
|
74
|
+
export {
|
|
75
|
+
MasteryRing
|
|
76
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
export { FlashCard } from './FlashCard';
|
|
2
|
+
export { MasteryRing } from './MasteryRing';
|
|
3
|
+
export { DayCalendar } from './DayCalendar';
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|