@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.
Files changed (87) hide show
  1. package/.turbo/turbo-build.log +58 -62
  2. package/.turbo/turbo-prebuild.log +1 -0
  3. package/CHANGELOG.md +18 -0
  4. package/dist/GamifiedMiniApp.d.ts +4 -14
  5. package/dist/GamifiedMiniApp.d.ts.map +1 -1
  6. package/dist/GamifiedMiniApp.js +995 -59
  7. package/dist/browser/GamifiedMiniApp.js +998 -0
  8. package/dist/browser/components/DayCalendar.js +42 -0
  9. package/dist/browser/components/FlashCard.js +102 -0
  10. package/dist/browser/components/MasteryRing.js +75 -0
  11. package/dist/browser/components/index.js +217 -0
  12. package/dist/browser/docs/index.js +22 -0
  13. package/dist/browser/docs/learning-journey-ui-gamified.docblock.js +22 -0
  14. package/dist/browser/example.js +32 -0
  15. package/dist/browser/index.js +1057 -0
  16. package/dist/browser/views/Overview.js +236 -0
  17. package/dist/browser/views/Progress.js +294 -0
  18. package/dist/browser/views/Steps.js +157 -0
  19. package/dist/browser/views/Timeline.js +235 -0
  20. package/dist/browser/views/index.js +919 -0
  21. package/dist/components/DayCalendar.d.ts +5 -13
  22. package/dist/components/DayCalendar.d.ts.map +1 -1
  23. package/dist/components/DayCalendar.js +41 -31
  24. package/dist/components/FlashCard.d.ts +7 -16
  25. package/dist/components/FlashCard.d.ts.map +1 -1
  26. package/dist/components/FlashCard.js +99 -76
  27. package/dist/components/MasteryRing.d.ts +6 -15
  28. package/dist/components/MasteryRing.d.ts.map +1 -1
  29. package/dist/components/MasteryRing.js +72 -78
  30. package/dist/components/index.d.ts +4 -4
  31. package/dist/components/index.d.ts.map +1 -0
  32. package/dist/components/index.js +217 -4
  33. package/dist/docs/index.d.ts +2 -1
  34. package/dist/docs/index.d.ts.map +1 -0
  35. package/dist/docs/index.js +23 -1
  36. package/dist/docs/learning-journey-ui-gamified.docblock.d.ts +2 -1
  37. package/dist/docs/learning-journey-ui-gamified.docblock.d.ts.map +1 -0
  38. package/dist/docs/learning-journey-ui-gamified.docblock.js +21 -18
  39. package/dist/example.d.ts +2 -6
  40. package/dist/example.d.ts.map +1 -1
  41. package/dist/example.js +31 -39
  42. package/dist/index.d.ts +6 -12
  43. package/dist/index.d.ts.map +1 -0
  44. package/dist/index.js +1058 -14
  45. package/dist/node/GamifiedMiniApp.js +998 -0
  46. package/dist/node/components/DayCalendar.js +42 -0
  47. package/dist/node/components/FlashCard.js +102 -0
  48. package/dist/node/components/MasteryRing.js +75 -0
  49. package/dist/node/components/index.js +217 -0
  50. package/dist/node/docs/index.js +22 -0
  51. package/dist/node/docs/learning-journey-ui-gamified.docblock.js +22 -0
  52. package/dist/node/example.js +32 -0
  53. package/dist/node/index.js +1057 -0
  54. package/dist/node/views/Overview.js +236 -0
  55. package/dist/node/views/Progress.js +294 -0
  56. package/dist/node/views/Steps.js +157 -0
  57. package/dist/node/views/Timeline.js +235 -0
  58. package/dist/node/views/index.js +919 -0
  59. package/dist/views/Overview.d.ts +4 -12
  60. package/dist/views/Overview.d.ts.map +1 -1
  61. package/dist/views/Overview.js +234 -158
  62. package/dist/views/Progress.d.ts +2 -10
  63. package/dist/views/Progress.d.ts.map +1 -1
  64. package/dist/views/Progress.js +292 -140
  65. package/dist/views/Steps.d.ts +2 -11
  66. package/dist/views/Steps.d.ts.map +1 -1
  67. package/dist/views/Steps.js +155 -53
  68. package/dist/views/Timeline.d.ts +2 -10
  69. package/dist/views/Timeline.d.ts.map +1 -1
  70. package/dist/views/Timeline.js +233 -130
  71. package/dist/views/index.d.ts +5 -5
  72. package/dist/views/index.d.ts.map +1 -0
  73. package/dist/views/index.js +919 -5
  74. package/package.json +154 -38
  75. package/tsdown.config.js +1 -2
  76. package/.turbo/turbo-build$colon$bundle.log +0 -59
  77. package/dist/GamifiedMiniApp.js.map +0 -1
  78. package/dist/components/DayCalendar.js.map +0 -1
  79. package/dist/components/FlashCard.js.map +0 -1
  80. package/dist/components/MasteryRing.js.map +0 -1
  81. package/dist/docs/learning-journey-ui-gamified.docblock.js.map +0 -1
  82. package/dist/example.js.map +0 -1
  83. package/dist/views/Overview.js.map +0 -1
  84. package/dist/views/Progress.js.map +0 -1
  85. package/dist/views/Steps.js.map +0 -1
  86. package/dist/views/Timeline.js.map +0 -1
  87. 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
- totalDays: number;
6
- currentDay: number;
7
- completedDays: number[];
2
+ totalDays: number;
3
+ currentDay: number;
4
+ completedDays: number[];
8
5
  }
9
- declare function DayCalendar({
10
- totalDays,
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","names":[],"sources":["../../src/components/DayCalendar.tsx"],"mappings":";;;UAIU,gBAAA;EACR,SAAA;EACA,UAAA;EACA,aAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EACd,SAAA;EACA,UAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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
- 'use client';
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
- //#region src/components/DayCalendar.tsx
7
- function DayCalendar({ totalDays, currentDay, completedDays }) {
8
- return /* @__PURE__ */ jsx("div", {
9
- className: "grid grid-cols-7 gap-2",
10
- children: Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
11
- const isCompleted = completedDays.includes(day);
12
- const isCurrent = day === currentDay;
13
- const isLocked = day > currentDay;
14
- return /* @__PURE__ */ jsx("div", {
15
- 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"),
16
- children: isCompleted ? /* @__PURE__ */ jsx("span", {
17
- className: "text-lg",
18
- children: "✓"
19
- }) : isLocked ? /* @__PURE__ */ jsx("span", {
20
- className: "text-lg",
21
- children: "🔒"
22
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
23
- className: "text-muted-foreground text-xs",
24
- children: "Day"
25
- }), /* @__PURE__ */ jsx("span", { children: day })] })
26
- }, day);
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
- //#endregion
32
- export { DayCalendar };
33
- //# sourceMappingURL=DayCalendar.js.map
41
+ export {
42
+ DayCalendar
43
+ };
@@ -1,19 +1,10 @@
1
- import * as react_jsx_runtime0 from "react/jsx-runtime";
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
- step: LearningJourneyStepSpec;
7
- isCompleted: boolean;
8
- isCurrent: boolean;
9
- onComplete?: () => void;
3
+ step: LearningJourneyStepSpec;
4
+ isCompleted: boolean;
5
+ isCurrent: boolean;
6
+ onComplete?: () => void;
10
7
  }
11
- declare function FlashCard({
12
- step,
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","names":[],"sources":["../../src/components/FlashCard.tsx"],"mappings":";;;;UAQU,cAAA;EACR,IAAA,EAAM,uBAAA;EACN,WAAA;EACA,SAAA;EACA,UAAA;AAAA;AAAA,iBAGc,SAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,SAAA;EACA;AAAA,GACC,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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
- 'use client';
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 { jsx, jsxs } from "react/jsx-runtime";
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
- //#region src/components/FlashCard.tsx
10
- function FlashCard({ step, isCompleted, isCurrent, onComplete }) {
11
- const [isFlipped, setIsFlipped] = useState(false);
12
- return /* @__PURE__ */ jsx(Card, {
13
- className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
14
- onClick: () => !isCompleted && setIsFlipped(!isFlipped),
15
- children: /* @__PURE__ */ jsxs(CardContent, {
16
- className: "p-6",
17
- children: [/* @__PURE__ */ jsxs("div", {
18
- className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
19
- children: [
20
- /* @__PURE__ */ jsxs("div", {
21
- className: "flex items-start justify-between",
22
- children: [/* @__PURE__ */ jsxs("div", {
23
- className: "flex-1",
24
- children: [/* @__PURE__ */ jsx("h3", {
25
- className: "text-lg font-semibold",
26
- children: step.title
27
- }), step.description && /* @__PURE__ */ jsx("p", {
28
- className: "text-muted-foreground mt-1 text-sm",
29
- children: step.description
30
- })]
31
- }), step.xpReward && /* @__PURE__ */ jsxs("span", {
32
- className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
33
- children: [
34
- "+",
35
- step.xpReward,
36
- " XP"
37
- ]
38
- })]
39
- }),
40
- isCompleted && /* @__PURE__ */ jsxs("div", {
41
- className: "flex items-center gap-2 text-green-500",
42
- children: [/* @__PURE__ */ jsx("span", { children: "✓" }), /* @__PURE__ */ jsx("span", {
43
- className: "text-sm font-medium",
44
- children: "Completed"
45
- })]
46
- }),
47
- isCurrent && !isCompleted && /* @__PURE__ */ jsx("p", {
48
- className: "text-muted-foreground text-xs",
49
- children: "Tap to reveal action"
50
- })
51
- ]
52
- }), isFlipped && !isCompleted && /* @__PURE__ */ jsxs("div", {
53
- 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",
54
- children: [/* @__PURE__ */ jsx("p", {
55
- className: "text-center text-sm",
56
- children: step.instructions ?? "Complete this step to earn XP"
57
- }), /* @__PURE__ */ jsxs("div", {
58
- className: "flex gap-2",
59
- children: [/* @__PURE__ */ jsx(Button, {
60
- variant: "outline",
61
- size: "sm",
62
- onClick: () => setIsFlipped(false),
63
- children: "Back"
64
- }), /* @__PURE__ */ jsx(Button, {
65
- size: "sm",
66
- onClick: (e) => {
67
- e.stopPropagation();
68
- onComplete?.();
69
- },
70
- children: "Mark Complete"
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
- //#endregion
79
- export { FlashCard };
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
- label: string;
6
- percentage: number;
7
- size?: 'sm' | 'md' | 'lg';
8
- color?: 'green' | 'blue' | 'violet' | 'orange';
2
+ label: string;
3
+ percentage: number;
4
+ size?: 'sm' | 'md' | 'lg';
5
+ color?: 'green' | 'blue' | 'violet' | 'orange';
9
6
  }
10
- declare function MasteryRing({
11
- label,
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","names":[],"sources":["../../src/components/MasteryRing.tsx"],"mappings":";;;UAIU,gBAAA;EACR,KAAA;EACA,UAAA;EACA,IAAA;EACA,KAAA;AAAA;AAAA,iBAgBc,WAAA,CAAA;EACd,KAAA;EACA,UAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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
- 'use client';
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
- //#region src/components/MasteryRing.tsx
7
- const sizeStyles = {
8
- sm: {
9
- container: "h-16 w-16",
10
- text: "text-xs",
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
- const colorStyles = {
28
- green: "stroke-green-500",
29
- blue: "stroke-blue-500",
30
- violet: "stroke-violet-500",
31
- orange: "stroke-orange-500"
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({ label, percentage, size = "md", color = "violet" }) {
34
- const styles = sizeStyles[size];
35
- const radius = (styles.ring - styles.stroke) / 2;
36
- const circumference = 2 * Math.PI * radius;
37
- const strokeDashoffset = circumference - percentage / 100 * circumference;
38
- return /* @__PURE__ */ jsxs("div", {
39
- className: cn("relative flex flex-col items-center gap-1", styles.container),
40
- children: [
41
- /* @__PURE__ */ jsxs("svg", {
42
- className: "absolute -rotate-90",
43
- width: styles.ring,
44
- height: styles.ring,
45
- viewBox: `0 0 ${styles.ring} ${styles.ring}`,
46
- children: [/* @__PURE__ */ jsx("circle", {
47
- cx: styles.ring / 2,
48
- cy: styles.ring / 2,
49
- r: radius,
50
- fill: "none",
51
- strokeWidth: styles.stroke,
52
- className: "stroke-muted"
53
- }), /* @__PURE__ */ jsx("circle", {
54
- cx: styles.ring / 2,
55
- cy: styles.ring / 2,
56
- r: radius,
57
- fill: "none",
58
- strokeWidth: styles.stroke,
59
- strokeLinecap: "round",
60
- strokeDasharray: circumference,
61
- strokeDashoffset,
62
- className: cn("transition-all duration-500", colorStyles[color])
63
- })]
64
- }),
65
- /* @__PURE__ */ jsx("div", {
66
- className: "flex h-full flex-col items-center justify-center",
67
- children: /* @__PURE__ */ jsxs("span", {
68
- className: cn("font-bold", styles.text),
69
- children: [Math.round(percentage), "%"]
70
- })
71
- }),
72
- /* @__PURE__ */ jsx("span", {
73
- className: cn("text-muted-foreground mt-1 truncate", styles.text),
74
- children: label
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
- //#endregion
81
- export { MasteryRing };
82
- //# sourceMappingURL=MasteryRing.js.map
74
+ export {
75
+ MasteryRing
76
+ };
@@ -1,4 +1,4 @@
1
- import { DayCalendar } from "./DayCalendar.js";
2
- import { FlashCard } from "./FlashCard.js";
3
- import { MasteryRing } from "./MasteryRing.js";
4
- export { DayCalendar, FlashCard, MasteryRing };
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"}