analytica-frontend-lib 1.0.35 → 1.0.36
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/ProgressBar/index.d.mts +60 -0
- package/dist/ProgressBar/index.d.ts +60 -0
- package/dist/ProgressBar/index.js +220 -0
- package/dist/ProgressBar/index.js.map +1 -0
- package/dist/ProgressBar/index.mjs +198 -0
- package/dist/ProgressBar/index.mjs.map +1 -0
- package/dist/Radio/index.d.mts +85 -0
- package/dist/Radio/index.d.ts +85 -0
- package/dist/Radio/index.js +299 -0
- package/dist/Radio/index.js.map +1 -0
- package/dist/Radio/index.mjs +283 -0
- package/dist/Radio/index.mjs.map +1 -0
- package/dist/index.css +68 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +5 -59
- package/dist/index.d.ts +5 -59
- package/dist/index.js +175 -31
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +174 -31
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +68 -0
- package/dist/styles.css.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Progress bar size variants
|
|
6
|
+
*/
|
|
7
|
+
type ProgressBarSize = 'small' | 'medium';
|
|
8
|
+
/**
|
|
9
|
+
* Progress bar color variants
|
|
10
|
+
*/
|
|
11
|
+
type ProgressBarVariant = 'blue' | 'green';
|
|
12
|
+
/**
|
|
13
|
+
* ProgressBar component props interface
|
|
14
|
+
*/
|
|
15
|
+
type ProgressBarProps = {
|
|
16
|
+
/** Progress value between 0 and 100 */
|
|
17
|
+
value: number;
|
|
18
|
+
/** Maximum value (defaults to 100) */
|
|
19
|
+
max?: number;
|
|
20
|
+
/** Size variant of the progress bar */
|
|
21
|
+
size?: ProgressBarSize;
|
|
22
|
+
/** Color variant of the progress bar */
|
|
23
|
+
variant?: ProgressBarVariant;
|
|
24
|
+
/** Optional label to display */
|
|
25
|
+
label?: ReactNode;
|
|
26
|
+
/** Show percentage text */
|
|
27
|
+
showPercentage?: boolean;
|
|
28
|
+
/** Additional CSS classes */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Label CSS classes */
|
|
31
|
+
labelClassName?: string;
|
|
32
|
+
/** Percentage text CSS classes */
|
|
33
|
+
percentageClassName?: string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* ProgressBar component for Analytica Ensino platforms
|
|
37
|
+
*
|
|
38
|
+
* A progress bar component with size and color variants designed for tracking
|
|
39
|
+
* activity progress (blue) and performance metrics (green).
|
|
40
|
+
* Uses the Analytica Ensino Design System colors from styles.css with automatic
|
|
41
|
+
* light/dark mode support. Includes Text component integration for consistent typography.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Basic progress bar
|
|
46
|
+
* <ProgressBar value={65} />
|
|
47
|
+
*
|
|
48
|
+
* // Activity progress (blue)
|
|
49
|
+
* <ProgressBar variant="blue" value={45} label="Progress" showPercentage />
|
|
50
|
+
*
|
|
51
|
+
* // Performance metrics (green)
|
|
52
|
+
* <ProgressBar variant="green" size="medium" value={85} label="Performance" />
|
|
53
|
+
*
|
|
54
|
+
* // Small size with custom max value
|
|
55
|
+
* <ProgressBar size="small" value={3} max={5} showPercentage />
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare const ProgressBar: ({ value, max, size, variant, label, showPercentage, className, labelClassName, percentageClassName, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
export { type ProgressBarProps, ProgressBar as default };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Progress bar size variants
|
|
6
|
+
*/
|
|
7
|
+
type ProgressBarSize = 'small' | 'medium';
|
|
8
|
+
/**
|
|
9
|
+
* Progress bar color variants
|
|
10
|
+
*/
|
|
11
|
+
type ProgressBarVariant = 'blue' | 'green';
|
|
12
|
+
/**
|
|
13
|
+
* ProgressBar component props interface
|
|
14
|
+
*/
|
|
15
|
+
type ProgressBarProps = {
|
|
16
|
+
/** Progress value between 0 and 100 */
|
|
17
|
+
value: number;
|
|
18
|
+
/** Maximum value (defaults to 100) */
|
|
19
|
+
max?: number;
|
|
20
|
+
/** Size variant of the progress bar */
|
|
21
|
+
size?: ProgressBarSize;
|
|
22
|
+
/** Color variant of the progress bar */
|
|
23
|
+
variant?: ProgressBarVariant;
|
|
24
|
+
/** Optional label to display */
|
|
25
|
+
label?: ReactNode;
|
|
26
|
+
/** Show percentage text */
|
|
27
|
+
showPercentage?: boolean;
|
|
28
|
+
/** Additional CSS classes */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Label CSS classes */
|
|
31
|
+
labelClassName?: string;
|
|
32
|
+
/** Percentage text CSS classes */
|
|
33
|
+
percentageClassName?: string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* ProgressBar component for Analytica Ensino platforms
|
|
37
|
+
*
|
|
38
|
+
* A progress bar component with size and color variants designed for tracking
|
|
39
|
+
* activity progress (blue) and performance metrics (green).
|
|
40
|
+
* Uses the Analytica Ensino Design System colors from styles.css with automatic
|
|
41
|
+
* light/dark mode support. Includes Text component integration for consistent typography.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Basic progress bar
|
|
46
|
+
* <ProgressBar value={65} />
|
|
47
|
+
*
|
|
48
|
+
* // Activity progress (blue)
|
|
49
|
+
* <ProgressBar variant="blue" value={45} label="Progress" showPercentage />
|
|
50
|
+
*
|
|
51
|
+
* // Performance metrics (green)
|
|
52
|
+
* <ProgressBar variant="green" size="medium" value={85} label="Performance" />
|
|
53
|
+
*
|
|
54
|
+
* // Small size with custom max value
|
|
55
|
+
* <ProgressBar size="small" value={3} max={5} showPercentage />
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare const ProgressBar: ({ value, max, size, variant, label, showPercentage, className, labelClassName, percentageClassName, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
export { type ProgressBarProps, ProgressBar as default };
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/components/ProgressBar/ProgressBar.tsx
|
|
22
|
+
var ProgressBar_exports = {};
|
|
23
|
+
__export(ProgressBar_exports, {
|
|
24
|
+
default: () => ProgressBar_default
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(ProgressBar_exports);
|
|
27
|
+
|
|
28
|
+
// src/components/Text/Text.tsx
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var Text = ({
|
|
31
|
+
children,
|
|
32
|
+
size = "md",
|
|
33
|
+
weight = "normal",
|
|
34
|
+
color = "text-text-950",
|
|
35
|
+
as,
|
|
36
|
+
className = "",
|
|
37
|
+
...props
|
|
38
|
+
}) => {
|
|
39
|
+
let sizeClasses = "";
|
|
40
|
+
let weightClasses = "";
|
|
41
|
+
const sizeClassMap = {
|
|
42
|
+
"2xs": "text-2xs",
|
|
43
|
+
xs: "text-xs",
|
|
44
|
+
sm: "text-sm",
|
|
45
|
+
md: "text-md",
|
|
46
|
+
lg: "text-lg",
|
|
47
|
+
xl: "text-xl",
|
|
48
|
+
"2xl": "text-2xl",
|
|
49
|
+
"3xl": "text-3xl",
|
|
50
|
+
"4xl": "text-4xl",
|
|
51
|
+
"5xl": "text-5xl",
|
|
52
|
+
"6xl": "text-6xl"
|
|
53
|
+
};
|
|
54
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
55
|
+
const weightClassMap = {
|
|
56
|
+
hairline: "font-hairline",
|
|
57
|
+
light: "font-light",
|
|
58
|
+
normal: "font-normal",
|
|
59
|
+
medium: "font-medium",
|
|
60
|
+
semibold: "font-semibold",
|
|
61
|
+
bold: "font-bold",
|
|
62
|
+
extrabold: "font-extrabold",
|
|
63
|
+
black: "font-black"
|
|
64
|
+
};
|
|
65
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
66
|
+
const baseClasses = "font-primary";
|
|
67
|
+
const Component = as ?? "p";
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
Component,
|
|
70
|
+
{
|
|
71
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
72
|
+
...props,
|
|
73
|
+
children
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
var Text_default = Text;
|
|
78
|
+
|
|
79
|
+
// src/components/ProgressBar/ProgressBar.tsx
|
|
80
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
81
|
+
var SIZE_CLASSES = {
|
|
82
|
+
small: {
|
|
83
|
+
container: "h-1",
|
|
84
|
+
// 4px height (h-1 = 4px in Tailwind)
|
|
85
|
+
bar: "h-1",
|
|
86
|
+
// 4px height for the fill bar
|
|
87
|
+
labelSize: "xs",
|
|
88
|
+
spacing: "gap-2",
|
|
89
|
+
// 8px gap between label and progress bar
|
|
90
|
+
layout: "flex-col",
|
|
91
|
+
// vertical layout for small
|
|
92
|
+
borderRadius: "rounded-full"
|
|
93
|
+
// 9999px border radius
|
|
94
|
+
},
|
|
95
|
+
medium: {
|
|
96
|
+
container: "h-2",
|
|
97
|
+
// 8px height (h-2 = 8px in Tailwind)
|
|
98
|
+
bar: "h-2",
|
|
99
|
+
// 8px height for the fill bar
|
|
100
|
+
labelSize: "xs",
|
|
101
|
+
// 12px font size (xs in Tailwind)
|
|
102
|
+
spacing: "gap-2",
|
|
103
|
+
// 8px gap between progress bar and label
|
|
104
|
+
layout: "flex-row items-center",
|
|
105
|
+
// horizontal layout for medium
|
|
106
|
+
borderRadius: "rounded-lg"
|
|
107
|
+
// 8px border radius
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
var VARIANT_CLASSES = {
|
|
111
|
+
blue: {
|
|
112
|
+
background: "bg-background-300",
|
|
113
|
+
// Background track color (#D5D4D4)
|
|
114
|
+
fill: "bg-primary-700"
|
|
115
|
+
// Blue for activity progress (#2271C4)
|
|
116
|
+
},
|
|
117
|
+
green: {
|
|
118
|
+
background: "bg-background-300",
|
|
119
|
+
// Background track color (#D5D4D4)
|
|
120
|
+
fill: "bg-success-200"
|
|
121
|
+
// Green for performance (#84D3A2)
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
var ProgressBar = ({
|
|
125
|
+
value,
|
|
126
|
+
max = 100,
|
|
127
|
+
size = "medium",
|
|
128
|
+
variant = "blue",
|
|
129
|
+
label,
|
|
130
|
+
showPercentage = false,
|
|
131
|
+
className = "",
|
|
132
|
+
labelClassName = "",
|
|
133
|
+
percentageClassName = ""
|
|
134
|
+
}) => {
|
|
135
|
+
const safeValue = isNaN(value) ? 0 : value;
|
|
136
|
+
const clampedValue = Math.max(0, Math.min(safeValue, max));
|
|
137
|
+
const percentage = max === 0 ? 0 : clampedValue / max * 100;
|
|
138
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
139
|
+
const variantClasses = VARIANT_CLASSES[variant];
|
|
140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
141
|
+
"div",
|
|
142
|
+
{
|
|
143
|
+
className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
|
|
144
|
+
children: [
|
|
145
|
+
size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
|
|
146
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
147
|
+
Text_default,
|
|
148
|
+
{
|
|
149
|
+
as: "div",
|
|
150
|
+
size: sizeClasses.labelSize,
|
|
151
|
+
weight: "medium",
|
|
152
|
+
className: `text-text-950 ${labelClassName}`,
|
|
153
|
+
children: label
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
157
|
+
Text_default,
|
|
158
|
+
{
|
|
159
|
+
size: sizeClasses.labelSize,
|
|
160
|
+
weight: "medium",
|
|
161
|
+
className: `text-text-700 text-center ${percentageClassName}`,
|
|
162
|
+
children: [
|
|
163
|
+
Math.round(percentage),
|
|
164
|
+
"%"
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
] }),
|
|
169
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
|
|
173
|
+
children: [
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
175
|
+
"progress",
|
|
176
|
+
{
|
|
177
|
+
value: clampedValue,
|
|
178
|
+
max,
|
|
179
|
+
"aria-label": typeof label === "string" ? label : "Progress",
|
|
180
|
+
className: "absolute inset-0 w-full h-full opacity-0"
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
184
|
+
"div",
|
|
185
|
+
{
|
|
186
|
+
className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
|
|
187
|
+
style: { width: `${percentage}%` }
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
),
|
|
193
|
+
size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
194
|
+
Text_default,
|
|
195
|
+
{
|
|
196
|
+
size: sizeClasses.labelSize,
|
|
197
|
+
weight: "medium",
|
|
198
|
+
className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
|
|
199
|
+
children: [
|
|
200
|
+
Math.round(percentage),
|
|
201
|
+
"%"
|
|
202
|
+
]
|
|
203
|
+
}
|
|
204
|
+
),
|
|
205
|
+
size === "medium" && label && !showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
206
|
+
Text_default,
|
|
207
|
+
{
|
|
208
|
+
as: "div",
|
|
209
|
+
size: sizeClasses.labelSize,
|
|
210
|
+
weight: "medium",
|
|
211
|
+
className: `text-text-950 flex-none ${labelClassName}`,
|
|
212
|
+
children: label
|
|
213
|
+
}
|
|
214
|
+
)
|
|
215
|
+
]
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
};
|
|
219
|
+
var ProgressBar_default = ProgressBar;
|
|
220
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ProgressBar/ProgressBar.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n bar: 'h-1', // 4px height for the fill bar\n labelSize: 'xs' as const,\n spacing: 'gap-2', // 8px gap between label and progress bar\n layout: 'flex-col', // vertical layout for small\n borderRadius: 'rounded-full', // 9999px border radius\n },\n medium: {\n container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n bar: 'h-2', // 8px height for the fill bar\n labelSize: 'xs' as const, // 12px font size (xs in Tailwind)\n spacing: 'gap-2', // 8px gap between progress bar and label\n layout: 'flex-row items-center', // horizontal layout for medium\n borderRadius: 'rounded-lg', // 8px border radius\n },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n blue: {\n background: 'bg-background-300', // Background track color (#D5D4D4)\n fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n },\n green: {\n background: 'bg-background-300', // Background track color (#D5D4D4)\n fill: 'bg-success-200', // Green for performance (#84D3A2)\n },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n /** Progress value between 0 and 100 */\n value: number;\n /** Maximum value (defaults to 100) */\n max?: number;\n /** Size variant of the progress bar */\n size?: ProgressBarSize;\n /** Color variant of the progress bar */\n variant?: ProgressBarVariant;\n /** Optional label to display */\n label?: ReactNode;\n /** Show percentage text */\n showPercentage?: boolean;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n /** Percentage text CSS classes */\n percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n value,\n max = 100,\n size = 'medium',\n variant = 'blue',\n label,\n showPercentage = false,\n className = '',\n labelClassName = '',\n percentageClassName = '',\n}: ProgressBarProps) => {\n // Ensure value is within bounds and handle NaN/Infinity\n const safeValue = isNaN(value) ? 0 : value;\n const clampedValue = Math.max(0, Math.min(safeValue, max));\n const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n // Get size and variant classes\n const sizeClasses = SIZE_CLASSES[size];\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n className={`flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`}\n >\n {/* For small size: vertical layout with label/percentage on top */}\n {size === 'small' && (label || showPercentage) && (\n <div className=\"flex flex-row items-center justify-between w-full\">\n {/* Label */}\n {label && (\n <Text\n as=\"div\"\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n\n {/* Percentage */}\n {showPercentage && (\n <Text\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-700 text-center ${percentageClassName}`}\n >\n {Math.round(percentage)}%\n </Text>\n )}\n </div>\n )}\n\n {/* Progress bar container */}\n <div\n className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n >\n {/* Native progress element for accessibility */}\n <progress\n value={clampedValue}\n max={max}\n aria-label={typeof label === 'string' ? label : 'Progress'}\n className=\"absolute inset-0 w-full h-full opacity-0\"\n />\n\n {/* Progress bar fill */}\n <div\n className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n style={{ width: `${percentage}%` }}\n />\n </div>\n\n {/* For medium size: horizontal layout with percentage on the right */}\n {size === 'medium' && showPercentage && (\n <Text\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 text-center flex-none w-[70px] ${percentageClassName}`}\n >\n {Math.round(percentage)}%\n </Text>\n )}\n\n {/* For medium size: label below if provided */}\n {size === 'medium' && label && !showPercentage && (\n <Text\n as=\"div\"\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 flex-none ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n </div>\n );\n};\n\nexport default ProgressBar;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/Text/Text.tsx
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var Text = ({
|
|
6
|
+
children,
|
|
7
|
+
size = "md",
|
|
8
|
+
weight = "normal",
|
|
9
|
+
color = "text-text-950",
|
|
10
|
+
as,
|
|
11
|
+
className = "",
|
|
12
|
+
...props
|
|
13
|
+
}) => {
|
|
14
|
+
let sizeClasses = "";
|
|
15
|
+
let weightClasses = "";
|
|
16
|
+
const sizeClassMap = {
|
|
17
|
+
"2xs": "text-2xs",
|
|
18
|
+
xs: "text-xs",
|
|
19
|
+
sm: "text-sm",
|
|
20
|
+
md: "text-md",
|
|
21
|
+
lg: "text-lg",
|
|
22
|
+
xl: "text-xl",
|
|
23
|
+
"2xl": "text-2xl",
|
|
24
|
+
"3xl": "text-3xl",
|
|
25
|
+
"4xl": "text-4xl",
|
|
26
|
+
"5xl": "text-5xl",
|
|
27
|
+
"6xl": "text-6xl"
|
|
28
|
+
};
|
|
29
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
30
|
+
const weightClassMap = {
|
|
31
|
+
hairline: "font-hairline",
|
|
32
|
+
light: "font-light",
|
|
33
|
+
normal: "font-normal",
|
|
34
|
+
medium: "font-medium",
|
|
35
|
+
semibold: "font-semibold",
|
|
36
|
+
bold: "font-bold",
|
|
37
|
+
extrabold: "font-extrabold",
|
|
38
|
+
black: "font-black"
|
|
39
|
+
};
|
|
40
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
41
|
+
const baseClasses = "font-primary";
|
|
42
|
+
const Component = as ?? "p";
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
Component,
|
|
45
|
+
{
|
|
46
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
47
|
+
...props,
|
|
48
|
+
children
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
var Text_default = Text;
|
|
53
|
+
|
|
54
|
+
// src/components/ProgressBar/ProgressBar.tsx
|
|
55
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
56
|
+
var SIZE_CLASSES = {
|
|
57
|
+
small: {
|
|
58
|
+
container: "h-1",
|
|
59
|
+
// 4px height (h-1 = 4px in Tailwind)
|
|
60
|
+
bar: "h-1",
|
|
61
|
+
// 4px height for the fill bar
|
|
62
|
+
labelSize: "xs",
|
|
63
|
+
spacing: "gap-2",
|
|
64
|
+
// 8px gap between label and progress bar
|
|
65
|
+
layout: "flex-col",
|
|
66
|
+
// vertical layout for small
|
|
67
|
+
borderRadius: "rounded-full"
|
|
68
|
+
// 9999px border radius
|
|
69
|
+
},
|
|
70
|
+
medium: {
|
|
71
|
+
container: "h-2",
|
|
72
|
+
// 8px height (h-2 = 8px in Tailwind)
|
|
73
|
+
bar: "h-2",
|
|
74
|
+
// 8px height for the fill bar
|
|
75
|
+
labelSize: "xs",
|
|
76
|
+
// 12px font size (xs in Tailwind)
|
|
77
|
+
spacing: "gap-2",
|
|
78
|
+
// 8px gap between progress bar and label
|
|
79
|
+
layout: "flex-row items-center",
|
|
80
|
+
// horizontal layout for medium
|
|
81
|
+
borderRadius: "rounded-lg"
|
|
82
|
+
// 8px border radius
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var VARIANT_CLASSES = {
|
|
86
|
+
blue: {
|
|
87
|
+
background: "bg-background-300",
|
|
88
|
+
// Background track color (#D5D4D4)
|
|
89
|
+
fill: "bg-primary-700"
|
|
90
|
+
// Blue for activity progress (#2271C4)
|
|
91
|
+
},
|
|
92
|
+
green: {
|
|
93
|
+
background: "bg-background-300",
|
|
94
|
+
// Background track color (#D5D4D4)
|
|
95
|
+
fill: "bg-success-200"
|
|
96
|
+
// Green for performance (#84D3A2)
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
var ProgressBar = ({
|
|
100
|
+
value,
|
|
101
|
+
max = 100,
|
|
102
|
+
size = "medium",
|
|
103
|
+
variant = "blue",
|
|
104
|
+
label,
|
|
105
|
+
showPercentage = false,
|
|
106
|
+
className = "",
|
|
107
|
+
labelClassName = "",
|
|
108
|
+
percentageClassName = ""
|
|
109
|
+
}) => {
|
|
110
|
+
const safeValue = isNaN(value) ? 0 : value;
|
|
111
|
+
const clampedValue = Math.max(0, Math.min(safeValue, max));
|
|
112
|
+
const percentage = max === 0 ? 0 : clampedValue / max * 100;
|
|
113
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
114
|
+
const variantClasses = VARIANT_CLASSES[variant];
|
|
115
|
+
return /* @__PURE__ */ jsxs(
|
|
116
|
+
"div",
|
|
117
|
+
{
|
|
118
|
+
className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
|
|
119
|
+
children: [
|
|
120
|
+
size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between w-full", children: [
|
|
121
|
+
label && /* @__PURE__ */ jsx2(
|
|
122
|
+
Text_default,
|
|
123
|
+
{
|
|
124
|
+
as: "div",
|
|
125
|
+
size: sizeClasses.labelSize,
|
|
126
|
+
weight: "medium",
|
|
127
|
+
className: `text-text-950 ${labelClassName}`,
|
|
128
|
+
children: label
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
showPercentage && /* @__PURE__ */ jsxs(
|
|
132
|
+
Text_default,
|
|
133
|
+
{
|
|
134
|
+
size: sizeClasses.labelSize,
|
|
135
|
+
weight: "medium",
|
|
136
|
+
className: `text-text-700 text-center ${percentageClassName}`,
|
|
137
|
+
children: [
|
|
138
|
+
Math.round(percentage),
|
|
139
|
+
"%"
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
] }),
|
|
144
|
+
/* @__PURE__ */ jsxs(
|
|
145
|
+
"div",
|
|
146
|
+
{
|
|
147
|
+
className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
|
|
148
|
+
children: [
|
|
149
|
+
/* @__PURE__ */ jsx2(
|
|
150
|
+
"progress",
|
|
151
|
+
{
|
|
152
|
+
value: clampedValue,
|
|
153
|
+
max,
|
|
154
|
+
"aria-label": typeof label === "string" ? label : "Progress",
|
|
155
|
+
className: "absolute inset-0 w-full h-full opacity-0"
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ jsx2(
|
|
159
|
+
"div",
|
|
160
|
+
{
|
|
161
|
+
className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
|
|
162
|
+
style: { width: `${percentage}%` }
|
|
163
|
+
}
|
|
164
|
+
)
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
size === "medium" && showPercentage && /* @__PURE__ */ jsxs(
|
|
169
|
+
Text_default,
|
|
170
|
+
{
|
|
171
|
+
size: sizeClasses.labelSize,
|
|
172
|
+
weight: "medium",
|
|
173
|
+
className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
|
|
174
|
+
children: [
|
|
175
|
+
Math.round(percentage),
|
|
176
|
+
"%"
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
size === "medium" && label && !showPercentage && /* @__PURE__ */ jsx2(
|
|
181
|
+
Text_default,
|
|
182
|
+
{
|
|
183
|
+
as: "div",
|
|
184
|
+
size: sizeClasses.labelSize,
|
|
185
|
+
weight: "medium",
|
|
186
|
+
className: `text-text-950 flex-none ${labelClassName}`,
|
|
187
|
+
children: label
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
};
|
|
194
|
+
var ProgressBar_default = ProgressBar;
|
|
195
|
+
export {
|
|
196
|
+
ProgressBar_default as default
|
|
197
|
+
};
|
|
198
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text/Text.tsx","../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n","'use client';\n\nimport { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n bar: 'h-1', // 4px height for the fill bar\n labelSize: 'xs' as const,\n spacing: 'gap-2', // 8px gap between label and progress bar\n layout: 'flex-col', // vertical layout for small\n borderRadius: 'rounded-full', // 9999px border radius\n },\n medium: {\n container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n bar: 'h-2', // 8px height for the fill bar\n labelSize: 'xs' as const, // 12px font size (xs in Tailwind)\n spacing: 'gap-2', // 8px gap between progress bar and label\n layout: 'flex-row items-center', // horizontal layout for medium\n borderRadius: 'rounded-lg', // 8px border radius\n },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n blue: {\n background: 'bg-background-300', // Background track color (#D5D4D4)\n fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n },\n green: {\n background: 'bg-background-300', // Background track color (#D5D4D4)\n fill: 'bg-success-200', // Green for performance (#84D3A2)\n },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n /** Progress value between 0 and 100 */\n value: number;\n /** Maximum value (defaults to 100) */\n max?: number;\n /** Size variant of the progress bar */\n size?: ProgressBarSize;\n /** Color variant of the progress bar */\n variant?: ProgressBarVariant;\n /** Optional label to display */\n label?: ReactNode;\n /** Show percentage text */\n showPercentage?: boolean;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n /** Percentage text CSS classes */\n percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n value,\n max = 100,\n size = 'medium',\n variant = 'blue',\n label,\n showPercentage = false,\n className = '',\n labelClassName = '',\n percentageClassName = '',\n}: ProgressBarProps) => {\n // Ensure value is within bounds and handle NaN/Infinity\n const safeValue = isNaN(value) ? 0 : value;\n const clampedValue = Math.max(0, Math.min(safeValue, max));\n const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n // Get size and variant classes\n const sizeClasses = SIZE_CLASSES[size];\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n className={`flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`}\n >\n {/* For small size: vertical layout with label/percentage on top */}\n {size === 'small' && (label || showPercentage) && (\n <div className=\"flex flex-row items-center justify-between w-full\">\n {/* Label */}\n {label && (\n <Text\n as=\"div\"\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n\n {/* Percentage */}\n {showPercentage && (\n <Text\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-700 text-center ${percentageClassName}`}\n >\n {Math.round(percentage)}%\n </Text>\n )}\n </div>\n )}\n\n {/* Progress bar container */}\n <div\n className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n >\n {/* Native progress element for accessibility */}\n <progress\n value={clampedValue}\n max={max}\n aria-label={typeof label === 'string' ? label : 'Progress'}\n className=\"absolute inset-0 w-full h-full opacity-0\"\n />\n\n {/* Progress bar fill */}\n <div\n className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n style={{ width: `${percentage}%` }}\n />\n </div>\n\n {/* For medium size: horizontal layout with percentage on the right */}\n {size === 'medium' && showPercentage && (\n <Text\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 text-center flex-none w-[70px] ${percentageClassName}`}\n >\n {Math.round(percentage)}%\n </Text>\n )}\n\n {/* For medium size: label below if provided */}\n {size === 'medium' && label && !showPercentage && (\n <Text\n as=\"div\"\n size={sizeClasses.labelSize}\n weight=\"medium\"\n className={`text-text-950 flex-none ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n </div>\n );\n};\n\nexport default ProgressBar;\n"],"mappings":"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","names":["jsx"]}
|