@particle-academy/react-fancy 5.23.1 → 5.24.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/dist/{chunk-VW6WUXFR.cjs → chunk-6QVJY3RM.cjs} +18 -7
- package/dist/chunk-6QVJY3RM.cjs.map +1 -0
- package/dist/{chunk-FFWAY7F5.js → chunk-YM6F2JIT.js} +18 -7
- package/dist/chunk-YM6F2JIT.js.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/dist/progress.cjs +2 -2
- package/dist/progress.d.cts +23 -1
- package/dist/progress.d.ts +23 -1
- package/dist/progress.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-FFWAY7F5.js.map +0 -1
- package/dist/chunk-VW6WUXFR.cjs.map +0 -1
|
@@ -103,7 +103,10 @@ var Progress = react.forwardRef(
|
|
|
103
103
|
color = "blue",
|
|
104
104
|
indeterminate = false,
|
|
105
105
|
showValue = false,
|
|
106
|
-
className
|
|
106
|
+
className,
|
|
107
|
+
trackClassName,
|
|
108
|
+
fillClassName,
|
|
109
|
+
...rest
|
|
107
110
|
}, ref) => {
|
|
108
111
|
const named = typeof size === "number" ? "md" : size;
|
|
109
112
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
@@ -118,6 +121,7 @@ var Progress = react.forwardRef(
|
|
|
118
121
|
"div",
|
|
119
122
|
{
|
|
120
123
|
ref,
|
|
124
|
+
...rest,
|
|
121
125
|
role: "progressbar",
|
|
122
126
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
123
127
|
"aria-valuemin": 0,
|
|
@@ -146,7 +150,7 @@ var Progress = react.forwardRef(
|
|
|
146
150
|
r: radius,
|
|
147
151
|
fill: "none",
|
|
148
152
|
strokeWidth,
|
|
149
|
-
className: "stroke-zinc-200 dark:stroke-zinc-700"
|
|
153
|
+
className: chunkZU5Q77OT_cjs.cn("stroke-zinc-200 dark:stroke-zinc-700", trackClassName)
|
|
150
154
|
}
|
|
151
155
|
),
|
|
152
156
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -160,7 +164,11 @@ var Progress = react.forwardRef(
|
|
|
160
164
|
strokeLinecap: "round",
|
|
161
165
|
strokeDasharray: circumference,
|
|
162
166
|
strokeDashoffset: offset,
|
|
163
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
167
|
+
className: chunkZU5Q77OT_cjs.cn(
|
|
168
|
+
progressStroke[color],
|
|
169
|
+
"transition-[stroke-dashoffset] duration-300",
|
|
170
|
+
fillClassName
|
|
171
|
+
),
|
|
164
172
|
style: { transform: "rotate(-90deg)", transformOrigin: "center" }
|
|
165
173
|
}
|
|
166
174
|
)
|
|
@@ -189,6 +197,7 @@ var Progress = react.forwardRef(
|
|
|
189
197
|
"div",
|
|
190
198
|
{
|
|
191
199
|
ref,
|
|
200
|
+
...rest,
|
|
192
201
|
role: "progressbar",
|
|
193
202
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
194
203
|
"aria-valuemin": 0,
|
|
@@ -201,7 +210,8 @@ var Progress = react.forwardRef(
|
|
|
201
210
|
{
|
|
202
211
|
className: chunkZU5Q77OT_cjs.cn(
|
|
203
212
|
"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700",
|
|
204
|
-
barHeightClasses[named]
|
|
213
|
+
barHeightClasses[named],
|
|
214
|
+
trackClassName
|
|
205
215
|
),
|
|
206
216
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
207
217
|
"div",
|
|
@@ -209,7 +219,8 @@ var Progress = react.forwardRef(
|
|
|
209
219
|
className: chunkZU5Q77OT_cjs.cn(
|
|
210
220
|
"h-full rounded-full transition-[width] duration-300",
|
|
211
221
|
progressFill[color],
|
|
212
|
-
indeterminate && "animate-pulse w-full"
|
|
222
|
+
indeterminate && "animate-pulse w-full",
|
|
223
|
+
fillClassName
|
|
213
224
|
),
|
|
214
225
|
style: indeterminate ? void 0 : { width: `${percentage}%` }
|
|
215
226
|
}
|
|
@@ -237,5 +248,5 @@ var Progress = react.forwardRef(
|
|
|
237
248
|
Progress.displayName = "Progress";
|
|
238
249
|
|
|
239
250
|
exports.Progress = Progress;
|
|
240
|
-
//# sourceMappingURL=chunk-
|
|
241
|
-
//# sourceMappingURL=chunk-
|
|
251
|
+
//# sourceMappingURL=chunk-6QVJY3RM.cjs.map
|
|
252
|
+
//# sourceMappingURL=chunk-6QVJY3RM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Progress/Progress.colors.ts","../src/components/Progress/Progress.tsx"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":"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","file":"chunk-6QVJY3RM.cjs","sourcesContent":["// AUTO-GENERATED by scripts/gen-progress-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const progressFill: Record<Color, string> = {\n slate: \"bg-slate-500 dark:bg-slate-400\",\n gray: \"bg-gray-500 dark:bg-gray-400\",\n zinc: \"bg-zinc-500 dark:bg-zinc-400\",\n neutral: \"bg-neutral-500 dark:bg-neutral-400\",\n stone: \"bg-stone-500 dark:bg-stone-400\",\n red: \"bg-red-500 dark:bg-red-400\",\n orange: \"bg-orange-500 dark:bg-orange-400\",\n amber: \"bg-amber-500 dark:bg-amber-400\",\n yellow: \"bg-yellow-500 dark:bg-yellow-400\",\n lime: \"bg-lime-500 dark:bg-lime-400\",\n green: \"bg-green-500 dark:bg-green-400\",\n emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n teal: \"bg-teal-500 dark:bg-teal-400\",\n cyan: \"bg-cyan-500 dark:bg-cyan-400\",\n sky: \"bg-sky-500 dark:bg-sky-400\",\n blue: \"bg-blue-500 dark:bg-blue-400\",\n indigo: \"bg-indigo-500 dark:bg-indigo-400\",\n violet: \"bg-violet-500 dark:bg-violet-400\",\n purple: \"bg-purple-500 dark:bg-purple-400\",\n fuchsia: \"bg-fuchsia-500 dark:bg-fuchsia-400\",\n pink: \"bg-pink-500 dark:bg-pink-400\",\n rose: \"bg-rose-500 dark:bg-rose-400\",\n};\n\nexport const progressStroke: Record<Color, string> = {\n slate: \"stroke-slate-500 dark:stroke-slate-400\",\n gray: \"stroke-gray-500 dark:stroke-gray-400\",\n zinc: \"stroke-zinc-500 dark:stroke-zinc-400\",\n neutral: \"stroke-neutral-500 dark:stroke-neutral-400\",\n stone: \"stroke-stone-500 dark:stroke-stone-400\",\n red: \"stroke-red-500 dark:stroke-red-400\",\n orange: \"stroke-orange-500 dark:stroke-orange-400\",\n amber: \"stroke-amber-500 dark:stroke-amber-400\",\n yellow: \"stroke-yellow-500 dark:stroke-yellow-400\",\n lime: \"stroke-lime-500 dark:stroke-lime-400\",\n green: \"stroke-green-500 dark:stroke-green-400\",\n emerald: \"stroke-emerald-500 dark:stroke-emerald-400\",\n teal: \"stroke-teal-500 dark:stroke-teal-400\",\n cyan: \"stroke-cyan-500 dark:stroke-cyan-400\",\n sky: \"stroke-sky-500 dark:stroke-sky-400\",\n blue: \"stroke-blue-500 dark:stroke-blue-400\",\n indigo: \"stroke-indigo-500 dark:stroke-indigo-400\",\n violet: \"stroke-violet-500 dark:stroke-violet-400\",\n purple: \"stroke-purple-500 dark:stroke-purple-400\",\n fuchsia: \"stroke-fuchsia-500 dark:stroke-fuchsia-400\",\n pink: \"stroke-pink-500 dark:stroke-pink-400\",\n rose: \"stroke-rose-500 dark:stroke-rose-400\",\n};\n\nexport const progressText: Record<Color, string> = {\n slate: \"text-slate-600 dark:text-slate-400\",\n gray: \"text-gray-600 dark:text-gray-400\",\n zinc: \"text-zinc-600 dark:text-zinc-400\",\n neutral: \"text-neutral-600 dark:text-neutral-400\",\n stone: \"text-stone-600 dark:text-stone-400\",\n red: \"text-red-600 dark:text-red-400\",\n orange: \"text-orange-600 dark:text-orange-400\",\n amber: \"text-amber-600 dark:text-amber-400\",\n yellow: \"text-yellow-600 dark:text-yellow-400\",\n lime: \"text-lime-600 dark:text-lime-400\",\n green: \"text-green-600 dark:text-green-400\",\n emerald: \"text-emerald-600 dark:text-emerald-400\",\n teal: \"text-teal-600 dark:text-teal-400\",\n cyan: \"text-cyan-600 dark:text-cyan-400\",\n sky: \"text-sky-600 dark:text-sky-400\",\n blue: \"text-blue-600 dark:text-blue-400\",\n indigo: \"text-indigo-600 dark:text-indigo-400\",\n violet: \"text-violet-600 dark:text-violet-400\",\n purple: \"text-purple-600 dark:text-purple-400\",\n fuchsia: \"text-fuchsia-600 dark:text-fuchsia-400\",\n pink: \"text-pink-600 dark:text-pink-400\",\n rose: \"text-rose-600 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ProgressProps } from \"./Progress.types\";\nimport { progressFill, progressStroke, progressText } from \"./Progress.colors\";\n\ntype NamedSize = \"sm\" | \"md\" | \"lg\";\n\nconst barHeightClasses: Record<NamedSize, string> = {\n sm: \"h-1.5\",\n md: \"h-2.5\",\n lg: \"h-4\",\n};\n\nconst circularSizeMap: Record<NamedSize, number> = {\n sm: 32,\n md: 48,\n lg: 64,\n};\n\nconst namedStrokeWidth: Record<NamedSize, number> = { sm: 3, md: 4, lg: 5 };\n\nconst textSizeClasses: Record<NamedSize, string> = {\n sm: \"text-[8px]\",\n md: \"text-[10px]\",\n lg: \"text-xs\",\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n value = 0,\n max = 100,\n variant = \"bar\",\n size = \"md\",\n strokeWidth: strokeWidthProp,\n color = \"blue\",\n indeterminate = false,\n showValue = false,\n className,\n trackClassName,\n fillClassName,\n ...rest\n },\n ref,\n ) => {\n // Class lookups need a named key; a pixel size sizes the ring itself and\n // leaves the type/bar scales on their default.\n const named: NamedSize = typeof size === \"number\" ? \"md\" : size;\n\n const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n\n if (variant === \"circular\") {\n const pixelSize = typeof size === \"number\" ? size : null;\n const diameter = pixelSize ?? circularSizeMap[named];\n // Scale with the circle when not told otherwise: a 5px stroke on a 152px\n // ring reads as a hairline, so a fixed default makes large sizes look\n // broken out of the box. The named scale keeps its exact old values.\n const strokeWidth =\n strokeWidthProp ??\n (pixelSize === null ? namedStrokeWidth[named] : Math.max(3, Math.round(diameter * 0.075)));\n const radius = (diameter - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = indeterminate ? circumference * 0.75 : circumference - (percentage / 100) * circumference;\n\n return (\n <div\n ref={ref}\n {...rest}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n // The named diameters live in styles.css keyed off this, so they work\n // without the consumer's Tailwind generating anything — and, being\n // layered, a className utility still beats them.\n data-size={pixelSize === null ? named : undefined}\n className={cn(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={pixelSize === null ? undefined : { width: pixelSize, height: pixelSize }}\n >\n <svg\n // viewBox + 100% so the geometry follows the box instead of being\n // baked in: the ring now scales with whatever sizes the wrapper,\n // including a `className` override of the named scale.\n viewBox={`0 0 ${diameter} ${diameter}`}\n width=\"100%\"\n height=\"100%\"\n className={cn(indeterminate && \"animate-spin\")}\n >\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n className={cn(\"stroke-zinc-200 dark:stroke-zinc-700\", trackClassName)}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n className={cn(\n progressStroke[color],\n \"transition-[stroke-dashoffset] duration-300\",\n fillClassName,\n )}\n style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n />\n </svg>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"absolute font-medium\",\n progressText[color],\n textSizeClasses[named],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n {...rest}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n className={cn(\"relative w-full\", className)}\n >\n <div\n className={cn(\n \"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700\",\n barHeightClasses[named],\n trackClassName,\n )}\n >\n <div\n className={cn(\n \"h-full rounded-full transition-[width] duration-300\",\n progressFill[color],\n indeterminate && \"animate-pulse w-full\",\n fillClassName,\n )}\n style={indeterminate ? undefined : { width: `${percentage}%` }}\n />\n </div>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"mt-1 block text-right text-xs font-medium\",\n progressText[color],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n },\n);\n\nProgress.displayName = \"Progress\";\n"]}
|
|
@@ -101,7 +101,10 @@ var Progress = forwardRef(
|
|
|
101
101
|
color = "blue",
|
|
102
102
|
indeterminate = false,
|
|
103
103
|
showValue = false,
|
|
104
|
-
className
|
|
104
|
+
className,
|
|
105
|
+
trackClassName,
|
|
106
|
+
fillClassName,
|
|
107
|
+
...rest
|
|
105
108
|
}, ref) => {
|
|
106
109
|
const named = typeof size === "number" ? "md" : size;
|
|
107
110
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
@@ -116,6 +119,7 @@ var Progress = forwardRef(
|
|
|
116
119
|
"div",
|
|
117
120
|
{
|
|
118
121
|
ref,
|
|
122
|
+
...rest,
|
|
119
123
|
role: "progressbar",
|
|
120
124
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
121
125
|
"aria-valuemin": 0,
|
|
@@ -144,7 +148,7 @@ var Progress = forwardRef(
|
|
|
144
148
|
r: radius,
|
|
145
149
|
fill: "none",
|
|
146
150
|
strokeWidth,
|
|
147
|
-
className: "stroke-zinc-200 dark:stroke-zinc-700"
|
|
151
|
+
className: cn("stroke-zinc-200 dark:stroke-zinc-700", trackClassName)
|
|
148
152
|
}
|
|
149
153
|
),
|
|
150
154
|
/* @__PURE__ */ jsx(
|
|
@@ -158,7 +162,11 @@ var Progress = forwardRef(
|
|
|
158
162
|
strokeLinecap: "round",
|
|
159
163
|
strokeDasharray: circumference,
|
|
160
164
|
strokeDashoffset: offset,
|
|
161
|
-
className: cn(
|
|
165
|
+
className: cn(
|
|
166
|
+
progressStroke[color],
|
|
167
|
+
"transition-[stroke-dashoffset] duration-300",
|
|
168
|
+
fillClassName
|
|
169
|
+
),
|
|
162
170
|
style: { transform: "rotate(-90deg)", transformOrigin: "center" }
|
|
163
171
|
}
|
|
164
172
|
)
|
|
@@ -187,6 +195,7 @@ var Progress = forwardRef(
|
|
|
187
195
|
"div",
|
|
188
196
|
{
|
|
189
197
|
ref,
|
|
198
|
+
...rest,
|
|
190
199
|
role: "progressbar",
|
|
191
200
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
192
201
|
"aria-valuemin": 0,
|
|
@@ -199,7 +208,8 @@ var Progress = forwardRef(
|
|
|
199
208
|
{
|
|
200
209
|
className: cn(
|
|
201
210
|
"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700",
|
|
202
|
-
barHeightClasses[named]
|
|
211
|
+
barHeightClasses[named],
|
|
212
|
+
trackClassName
|
|
203
213
|
),
|
|
204
214
|
children: /* @__PURE__ */ jsx(
|
|
205
215
|
"div",
|
|
@@ -207,7 +217,8 @@ var Progress = forwardRef(
|
|
|
207
217
|
className: cn(
|
|
208
218
|
"h-full rounded-full transition-[width] duration-300",
|
|
209
219
|
progressFill[color],
|
|
210
|
-
indeterminate && "animate-pulse w-full"
|
|
220
|
+
indeterminate && "animate-pulse w-full",
|
|
221
|
+
fillClassName
|
|
211
222
|
),
|
|
212
223
|
style: indeterminate ? void 0 : { width: `${percentage}%` }
|
|
213
224
|
}
|
|
@@ -235,5 +246,5 @@ var Progress = forwardRef(
|
|
|
235
246
|
Progress.displayName = "Progress";
|
|
236
247
|
|
|
237
248
|
export { Progress };
|
|
238
|
-
//# sourceMappingURL=chunk-
|
|
239
|
-
//# sourceMappingURL=chunk-
|
|
249
|
+
//# sourceMappingURL=chunk-YM6F2JIT.js.map
|
|
250
|
+
//# sourceMappingURL=chunk-YM6F2JIT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Progress/Progress.colors.ts","../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","file":"chunk-YM6F2JIT.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-progress-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const progressFill: Record<Color, string> = {\n slate: \"bg-slate-500 dark:bg-slate-400\",\n gray: \"bg-gray-500 dark:bg-gray-400\",\n zinc: \"bg-zinc-500 dark:bg-zinc-400\",\n neutral: \"bg-neutral-500 dark:bg-neutral-400\",\n stone: \"bg-stone-500 dark:bg-stone-400\",\n red: \"bg-red-500 dark:bg-red-400\",\n orange: \"bg-orange-500 dark:bg-orange-400\",\n amber: \"bg-amber-500 dark:bg-amber-400\",\n yellow: \"bg-yellow-500 dark:bg-yellow-400\",\n lime: \"bg-lime-500 dark:bg-lime-400\",\n green: \"bg-green-500 dark:bg-green-400\",\n emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n teal: \"bg-teal-500 dark:bg-teal-400\",\n cyan: \"bg-cyan-500 dark:bg-cyan-400\",\n sky: \"bg-sky-500 dark:bg-sky-400\",\n blue: \"bg-blue-500 dark:bg-blue-400\",\n indigo: \"bg-indigo-500 dark:bg-indigo-400\",\n violet: \"bg-violet-500 dark:bg-violet-400\",\n purple: \"bg-purple-500 dark:bg-purple-400\",\n fuchsia: \"bg-fuchsia-500 dark:bg-fuchsia-400\",\n pink: \"bg-pink-500 dark:bg-pink-400\",\n rose: \"bg-rose-500 dark:bg-rose-400\",\n};\n\nexport const progressStroke: Record<Color, string> = {\n slate: \"stroke-slate-500 dark:stroke-slate-400\",\n gray: \"stroke-gray-500 dark:stroke-gray-400\",\n zinc: \"stroke-zinc-500 dark:stroke-zinc-400\",\n neutral: \"stroke-neutral-500 dark:stroke-neutral-400\",\n stone: \"stroke-stone-500 dark:stroke-stone-400\",\n red: \"stroke-red-500 dark:stroke-red-400\",\n orange: \"stroke-orange-500 dark:stroke-orange-400\",\n amber: \"stroke-amber-500 dark:stroke-amber-400\",\n yellow: \"stroke-yellow-500 dark:stroke-yellow-400\",\n lime: \"stroke-lime-500 dark:stroke-lime-400\",\n green: \"stroke-green-500 dark:stroke-green-400\",\n emerald: \"stroke-emerald-500 dark:stroke-emerald-400\",\n teal: \"stroke-teal-500 dark:stroke-teal-400\",\n cyan: \"stroke-cyan-500 dark:stroke-cyan-400\",\n sky: \"stroke-sky-500 dark:stroke-sky-400\",\n blue: \"stroke-blue-500 dark:stroke-blue-400\",\n indigo: \"stroke-indigo-500 dark:stroke-indigo-400\",\n violet: \"stroke-violet-500 dark:stroke-violet-400\",\n purple: \"stroke-purple-500 dark:stroke-purple-400\",\n fuchsia: \"stroke-fuchsia-500 dark:stroke-fuchsia-400\",\n pink: \"stroke-pink-500 dark:stroke-pink-400\",\n rose: \"stroke-rose-500 dark:stroke-rose-400\",\n};\n\nexport const progressText: Record<Color, string> = {\n slate: \"text-slate-600 dark:text-slate-400\",\n gray: \"text-gray-600 dark:text-gray-400\",\n zinc: \"text-zinc-600 dark:text-zinc-400\",\n neutral: \"text-neutral-600 dark:text-neutral-400\",\n stone: \"text-stone-600 dark:text-stone-400\",\n red: \"text-red-600 dark:text-red-400\",\n orange: \"text-orange-600 dark:text-orange-400\",\n amber: \"text-amber-600 dark:text-amber-400\",\n yellow: \"text-yellow-600 dark:text-yellow-400\",\n lime: \"text-lime-600 dark:text-lime-400\",\n green: \"text-green-600 dark:text-green-400\",\n emerald: \"text-emerald-600 dark:text-emerald-400\",\n teal: \"text-teal-600 dark:text-teal-400\",\n cyan: \"text-cyan-600 dark:text-cyan-400\",\n sky: \"text-sky-600 dark:text-sky-400\",\n blue: \"text-blue-600 dark:text-blue-400\",\n indigo: \"text-indigo-600 dark:text-indigo-400\",\n violet: \"text-violet-600 dark:text-violet-400\",\n purple: \"text-purple-600 dark:text-purple-400\",\n fuchsia: \"text-fuchsia-600 dark:text-fuchsia-400\",\n pink: \"text-pink-600 dark:text-pink-400\",\n rose: \"text-rose-600 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ProgressProps } from \"./Progress.types\";\nimport { progressFill, progressStroke, progressText } from \"./Progress.colors\";\n\ntype NamedSize = \"sm\" | \"md\" | \"lg\";\n\nconst barHeightClasses: Record<NamedSize, string> = {\n sm: \"h-1.5\",\n md: \"h-2.5\",\n lg: \"h-4\",\n};\n\nconst circularSizeMap: Record<NamedSize, number> = {\n sm: 32,\n md: 48,\n lg: 64,\n};\n\nconst namedStrokeWidth: Record<NamedSize, number> = { sm: 3, md: 4, lg: 5 };\n\nconst textSizeClasses: Record<NamedSize, string> = {\n sm: \"text-[8px]\",\n md: \"text-[10px]\",\n lg: \"text-xs\",\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n value = 0,\n max = 100,\n variant = \"bar\",\n size = \"md\",\n strokeWidth: strokeWidthProp,\n color = \"blue\",\n indeterminate = false,\n showValue = false,\n className,\n trackClassName,\n fillClassName,\n ...rest\n },\n ref,\n ) => {\n // Class lookups need a named key; a pixel size sizes the ring itself and\n // leaves the type/bar scales on their default.\n const named: NamedSize = typeof size === \"number\" ? \"md\" : size;\n\n const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n\n if (variant === \"circular\") {\n const pixelSize = typeof size === \"number\" ? size : null;\n const diameter = pixelSize ?? circularSizeMap[named];\n // Scale with the circle when not told otherwise: a 5px stroke on a 152px\n // ring reads as a hairline, so a fixed default makes large sizes look\n // broken out of the box. The named scale keeps its exact old values.\n const strokeWidth =\n strokeWidthProp ??\n (pixelSize === null ? namedStrokeWidth[named] : Math.max(3, Math.round(diameter * 0.075)));\n const radius = (diameter - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = indeterminate ? circumference * 0.75 : circumference - (percentage / 100) * circumference;\n\n return (\n <div\n ref={ref}\n {...rest}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n // The named diameters live in styles.css keyed off this, so they work\n // without the consumer's Tailwind generating anything — and, being\n // layered, a className utility still beats them.\n data-size={pixelSize === null ? named : undefined}\n className={cn(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={pixelSize === null ? undefined : { width: pixelSize, height: pixelSize }}\n >\n <svg\n // viewBox + 100% so the geometry follows the box instead of being\n // baked in: the ring now scales with whatever sizes the wrapper,\n // including a `className` override of the named scale.\n viewBox={`0 0 ${diameter} ${diameter}`}\n width=\"100%\"\n height=\"100%\"\n className={cn(indeterminate && \"animate-spin\")}\n >\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n className={cn(\"stroke-zinc-200 dark:stroke-zinc-700\", trackClassName)}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n className={cn(\n progressStroke[color],\n \"transition-[stroke-dashoffset] duration-300\",\n fillClassName,\n )}\n style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n />\n </svg>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"absolute font-medium\",\n progressText[color],\n textSizeClasses[named],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n {...rest}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n className={cn(\"relative w-full\", className)}\n >\n <div\n className={cn(\n \"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700\",\n barHeightClasses[named],\n trackClassName,\n )}\n >\n <div\n className={cn(\n \"h-full rounded-full transition-[width] duration-300\",\n progressFill[color],\n indeterminate && \"animate-pulse w-full\",\n fillClassName,\n )}\n style={indeterminate ? undefined : { width: `${percentage}%` }}\n />\n </div>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"mt-1 block text-right text-xs font-medium\",\n progressText[color],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n },\n);\n\nProgress.displayName = \"Progress\";\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -26,7 +26,7 @@ var chunkPWLBHNOA_cjs = require('./chunk-PWLBHNOA.cjs');
|
|
|
26
26
|
var chunk3EIB7RPD_cjs = require('./chunk-3EIB7RPD.cjs');
|
|
27
27
|
require('./chunk-XURQVDCN.cjs');
|
|
28
28
|
var chunkPFEFKLUV_cjs = require('./chunk-PFEFKLUV.cjs');
|
|
29
|
-
var
|
|
29
|
+
var chunk6QVJY3RM_cjs = require('./chunk-6QVJY3RM.cjs');
|
|
30
30
|
var chunkSO4NNG26_cjs = require('./chunk-SO4NNG26.cjs');
|
|
31
31
|
var chunkISPCXIJZ_cjs = require('./chunk-ISPCXIJZ.cjs');
|
|
32
32
|
var chunkWKAEAGMT_cjs = require('./chunk-WKAEAGMT.cjs');
|
|
@@ -222,7 +222,7 @@ Object.defineProperty(exports, "Profile", {
|
|
|
222
222
|
});
|
|
223
223
|
Object.defineProperty(exports, "Progress", {
|
|
224
224
|
enumerable: true,
|
|
225
|
-
get: function () { return
|
|
225
|
+
get: function () { return chunk6QVJY3RM_cjs.Progress; }
|
|
226
226
|
});
|
|
227
227
|
Object.defineProperty(exports, "PromptInput", {
|
|
228
228
|
enumerable: true,
|
package/dist/index.js
CHANGED
|
@@ -24,7 +24,7 @@ export { Table } from './chunk-XXBW4EUO.js';
|
|
|
24
24
|
export { Tabs, useTabs } from './chunk-VME5743O.js';
|
|
25
25
|
import './chunk-TMR56BBE.js';
|
|
26
26
|
export { Profile } from './chunk-KQQA7JBC.js';
|
|
27
|
-
export { Progress } from './chunk-
|
|
27
|
+
export { Progress } from './chunk-YM6F2JIT.js';
|
|
28
28
|
export { PromptInput } from './chunk-3LM47BME.js';
|
|
29
29
|
export { Tooltip } from './chunk-35EN5AYE.js';
|
|
30
30
|
export { PullQuote } from './chunk-NDUEPDNS.js';
|
package/dist/progress.cjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk6QVJY3RM_cjs = require('./chunk-6QVJY3RM.cjs');
|
|
4
4
|
require('./chunk-ZU5Q77OT.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "Progress", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunk6QVJY3RM_cjs.Progress; }
|
|
11
11
|
});
|
|
12
12
|
//# sourceMappingURL=progress.cjs.map
|
|
13
13
|
//# sourceMappingURL=progress.cjs.map
|
package/dist/progress.d.cts
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
2
3
|
import { C as Color } from './types-8Sv0rCjw.cjs';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
/**
|
|
6
|
+
* `Progress` renders three nested elements and used to be a CLOSED interface
|
|
7
|
+
* over all of them: no rest spread, and `className` reaching only the outer
|
|
8
|
+
* wrapper. So the bar could not be named (it announced as "progress bar, 42%",
|
|
9
|
+
* with 42% OF WHAT unrecoverable) and the track and fill could not be styled.
|
|
10
|
+
*
|
|
11
|
+
* `color` is omitted from the DOM attributes because this component's `color` is
|
|
12
|
+
* a palette name, not the legacy HTML `color` attribute.
|
|
13
|
+
*/
|
|
14
|
+
interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
|
|
5
15
|
value?: number;
|
|
6
16
|
max?: number;
|
|
7
17
|
variant?: "bar" | "circular";
|
|
@@ -18,6 +28,18 @@ interface ProgressProps {
|
|
|
18
28
|
indeterminate?: boolean;
|
|
19
29
|
showValue?: boolean;
|
|
20
30
|
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* The unfilled groove — the bar's track, or the ring's background circle.
|
|
33
|
+
*
|
|
34
|
+
* Named for the ROLE rather than the element so one vocabulary covers both
|
|
35
|
+
* variants. The alternative a caller reaches for otherwise is an
|
|
36
|
+
* arbitrary-variant selector like `[&>div>div]:…`, which hard-codes this
|
|
37
|
+
* component's DOM shape into their app and breaks silently — still
|
|
38
|
+
* rendering, just unstyled — the first time it gains a wrapper.
|
|
39
|
+
*/
|
|
40
|
+
trackClassName?: string;
|
|
41
|
+
/** The filled portion — the bar's fill, or the ring's value circle. */
|
|
42
|
+
fillClassName?: string;
|
|
21
43
|
}
|
|
22
44
|
|
|
23
45
|
declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
|
package/dist/progress.d.ts
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
2
3
|
import { C as Color } from './types-8Sv0rCjw.js';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
/**
|
|
6
|
+
* `Progress` renders three nested elements and used to be a CLOSED interface
|
|
7
|
+
* over all of them: no rest spread, and `className` reaching only the outer
|
|
8
|
+
* wrapper. So the bar could not be named (it announced as "progress bar, 42%",
|
|
9
|
+
* with 42% OF WHAT unrecoverable) and the track and fill could not be styled.
|
|
10
|
+
*
|
|
11
|
+
* `color` is omitted from the DOM attributes because this component's `color` is
|
|
12
|
+
* a palette name, not the legacy HTML `color` attribute.
|
|
13
|
+
*/
|
|
14
|
+
interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
|
|
5
15
|
value?: number;
|
|
6
16
|
max?: number;
|
|
7
17
|
variant?: "bar" | "circular";
|
|
@@ -18,6 +28,18 @@ interface ProgressProps {
|
|
|
18
28
|
indeterminate?: boolean;
|
|
19
29
|
showValue?: boolean;
|
|
20
30
|
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* The unfilled groove — the bar's track, or the ring's background circle.
|
|
33
|
+
*
|
|
34
|
+
* Named for the ROLE rather than the element so one vocabulary covers both
|
|
35
|
+
* variants. The alternative a caller reaches for otherwise is an
|
|
36
|
+
* arbitrary-variant selector like `[&>div>div]:…`, which hard-codes this
|
|
37
|
+
* component's DOM shape into their app and breaks silently — still
|
|
38
|
+
* rendering, just unstyled — the first time it gains a wrapper.
|
|
39
|
+
*/
|
|
40
|
+
trackClassName?: string;
|
|
41
|
+
/** The filled portion — the bar's fill, or the ring's value circle. */
|
|
42
|
+
fillClassName?: string;
|
|
21
43
|
}
|
|
22
44
|
|
|
23
45
|
declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
|
package/dist/progress.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Progress/Progress.colors.ts","../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","file":"chunk-FFWAY7F5.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-progress-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const progressFill: Record<Color, string> = {\n slate: \"bg-slate-500 dark:bg-slate-400\",\n gray: \"bg-gray-500 dark:bg-gray-400\",\n zinc: \"bg-zinc-500 dark:bg-zinc-400\",\n neutral: \"bg-neutral-500 dark:bg-neutral-400\",\n stone: \"bg-stone-500 dark:bg-stone-400\",\n red: \"bg-red-500 dark:bg-red-400\",\n orange: \"bg-orange-500 dark:bg-orange-400\",\n amber: \"bg-amber-500 dark:bg-amber-400\",\n yellow: \"bg-yellow-500 dark:bg-yellow-400\",\n lime: \"bg-lime-500 dark:bg-lime-400\",\n green: \"bg-green-500 dark:bg-green-400\",\n emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n teal: \"bg-teal-500 dark:bg-teal-400\",\n cyan: \"bg-cyan-500 dark:bg-cyan-400\",\n sky: \"bg-sky-500 dark:bg-sky-400\",\n blue: \"bg-blue-500 dark:bg-blue-400\",\n indigo: \"bg-indigo-500 dark:bg-indigo-400\",\n violet: \"bg-violet-500 dark:bg-violet-400\",\n purple: \"bg-purple-500 dark:bg-purple-400\",\n fuchsia: \"bg-fuchsia-500 dark:bg-fuchsia-400\",\n pink: \"bg-pink-500 dark:bg-pink-400\",\n rose: \"bg-rose-500 dark:bg-rose-400\",\n};\n\nexport const progressStroke: Record<Color, string> = {\n slate: \"stroke-slate-500 dark:stroke-slate-400\",\n gray: \"stroke-gray-500 dark:stroke-gray-400\",\n zinc: \"stroke-zinc-500 dark:stroke-zinc-400\",\n neutral: \"stroke-neutral-500 dark:stroke-neutral-400\",\n stone: \"stroke-stone-500 dark:stroke-stone-400\",\n red: \"stroke-red-500 dark:stroke-red-400\",\n orange: \"stroke-orange-500 dark:stroke-orange-400\",\n amber: \"stroke-amber-500 dark:stroke-amber-400\",\n yellow: \"stroke-yellow-500 dark:stroke-yellow-400\",\n lime: \"stroke-lime-500 dark:stroke-lime-400\",\n green: \"stroke-green-500 dark:stroke-green-400\",\n emerald: \"stroke-emerald-500 dark:stroke-emerald-400\",\n teal: \"stroke-teal-500 dark:stroke-teal-400\",\n cyan: \"stroke-cyan-500 dark:stroke-cyan-400\",\n sky: \"stroke-sky-500 dark:stroke-sky-400\",\n blue: \"stroke-blue-500 dark:stroke-blue-400\",\n indigo: \"stroke-indigo-500 dark:stroke-indigo-400\",\n violet: \"stroke-violet-500 dark:stroke-violet-400\",\n purple: \"stroke-purple-500 dark:stroke-purple-400\",\n fuchsia: \"stroke-fuchsia-500 dark:stroke-fuchsia-400\",\n pink: \"stroke-pink-500 dark:stroke-pink-400\",\n rose: \"stroke-rose-500 dark:stroke-rose-400\",\n};\n\nexport const progressText: Record<Color, string> = {\n slate: \"text-slate-600 dark:text-slate-400\",\n gray: \"text-gray-600 dark:text-gray-400\",\n zinc: \"text-zinc-600 dark:text-zinc-400\",\n neutral: \"text-neutral-600 dark:text-neutral-400\",\n stone: \"text-stone-600 dark:text-stone-400\",\n red: \"text-red-600 dark:text-red-400\",\n orange: \"text-orange-600 dark:text-orange-400\",\n amber: \"text-amber-600 dark:text-amber-400\",\n yellow: \"text-yellow-600 dark:text-yellow-400\",\n lime: \"text-lime-600 dark:text-lime-400\",\n green: \"text-green-600 dark:text-green-400\",\n emerald: \"text-emerald-600 dark:text-emerald-400\",\n teal: \"text-teal-600 dark:text-teal-400\",\n cyan: \"text-cyan-600 dark:text-cyan-400\",\n sky: \"text-sky-600 dark:text-sky-400\",\n blue: \"text-blue-600 dark:text-blue-400\",\n indigo: \"text-indigo-600 dark:text-indigo-400\",\n violet: \"text-violet-600 dark:text-violet-400\",\n purple: \"text-purple-600 dark:text-purple-400\",\n fuchsia: \"text-fuchsia-600 dark:text-fuchsia-400\",\n pink: \"text-pink-600 dark:text-pink-400\",\n rose: \"text-rose-600 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ProgressProps } from \"./Progress.types\";\nimport { progressFill, progressStroke, progressText } from \"./Progress.colors\";\n\ntype NamedSize = \"sm\" | \"md\" | \"lg\";\n\nconst barHeightClasses: Record<NamedSize, string> = {\n sm: \"h-1.5\",\n md: \"h-2.5\",\n lg: \"h-4\",\n};\n\nconst circularSizeMap: Record<NamedSize, number> = {\n sm: 32,\n md: 48,\n lg: 64,\n};\n\nconst namedStrokeWidth: Record<NamedSize, number> = { sm: 3, md: 4, lg: 5 };\n\nconst textSizeClasses: Record<NamedSize, string> = {\n sm: \"text-[8px]\",\n md: \"text-[10px]\",\n lg: \"text-xs\",\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n value = 0,\n max = 100,\n variant = \"bar\",\n size = \"md\",\n strokeWidth: strokeWidthProp,\n color = \"blue\",\n indeterminate = false,\n showValue = false,\n className,\n },\n ref,\n ) => {\n // Class lookups need a named key; a pixel size sizes the ring itself and\n // leaves the type/bar scales on their default.\n const named: NamedSize = typeof size === \"number\" ? \"md\" : size;\n\n const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n\n if (variant === \"circular\") {\n const pixelSize = typeof size === \"number\" ? size : null;\n const diameter = pixelSize ?? circularSizeMap[named];\n // Scale with the circle when not told otherwise: a 5px stroke on a 152px\n // ring reads as a hairline, so a fixed default makes large sizes look\n // broken out of the box. The named scale keeps its exact old values.\n const strokeWidth =\n strokeWidthProp ??\n (pixelSize === null ? namedStrokeWidth[named] : Math.max(3, Math.round(diameter * 0.075)));\n const radius = (diameter - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = indeterminate ? circumference * 0.75 : circumference - (percentage / 100) * circumference;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n // The named diameters live in styles.css keyed off this, so they work\n // without the consumer's Tailwind generating anything — and, being\n // layered, a className utility still beats them.\n data-size={pixelSize === null ? named : undefined}\n className={cn(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={pixelSize === null ? undefined : { width: pixelSize, height: pixelSize }}\n >\n <svg\n // viewBox + 100% so the geometry follows the box instead of being\n // baked in: the ring now scales with whatever sizes the wrapper,\n // including a `className` override of the named scale.\n viewBox={`0 0 ${diameter} ${diameter}`}\n width=\"100%\"\n height=\"100%\"\n className={cn(indeterminate && \"animate-spin\")}\n >\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n className=\"stroke-zinc-200 dark:stroke-zinc-700\"\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n className={cn(progressStroke[color], \"transition-[stroke-dashoffset] duration-300\")}\n style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n />\n </svg>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"absolute font-medium\",\n progressText[color],\n textSizeClasses[named],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n className={cn(\"relative w-full\", className)}\n >\n <div\n className={cn(\n \"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700\",\n barHeightClasses[named],\n )}\n >\n <div\n className={cn(\n \"h-full rounded-full transition-[width] duration-300\",\n progressFill[color],\n indeterminate && \"animate-pulse w-full\",\n )}\n style={indeterminate ? undefined : { width: `${percentage}%` }}\n />\n </div>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"mt-1 block text-right text-xs font-medium\",\n progressText[color],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n },\n);\n\nProgress.displayName = \"Progress\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Progress/Progress.colors.ts","../src/components/Progress/Progress.tsx"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":"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","file":"chunk-VW6WUXFR.cjs","sourcesContent":["// AUTO-GENERATED by scripts/gen-progress-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const progressFill: Record<Color, string> = {\n slate: \"bg-slate-500 dark:bg-slate-400\",\n gray: \"bg-gray-500 dark:bg-gray-400\",\n zinc: \"bg-zinc-500 dark:bg-zinc-400\",\n neutral: \"bg-neutral-500 dark:bg-neutral-400\",\n stone: \"bg-stone-500 dark:bg-stone-400\",\n red: \"bg-red-500 dark:bg-red-400\",\n orange: \"bg-orange-500 dark:bg-orange-400\",\n amber: \"bg-amber-500 dark:bg-amber-400\",\n yellow: \"bg-yellow-500 dark:bg-yellow-400\",\n lime: \"bg-lime-500 dark:bg-lime-400\",\n green: \"bg-green-500 dark:bg-green-400\",\n emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n teal: \"bg-teal-500 dark:bg-teal-400\",\n cyan: \"bg-cyan-500 dark:bg-cyan-400\",\n sky: \"bg-sky-500 dark:bg-sky-400\",\n blue: \"bg-blue-500 dark:bg-blue-400\",\n indigo: \"bg-indigo-500 dark:bg-indigo-400\",\n violet: \"bg-violet-500 dark:bg-violet-400\",\n purple: \"bg-purple-500 dark:bg-purple-400\",\n fuchsia: \"bg-fuchsia-500 dark:bg-fuchsia-400\",\n pink: \"bg-pink-500 dark:bg-pink-400\",\n rose: \"bg-rose-500 dark:bg-rose-400\",\n};\n\nexport const progressStroke: Record<Color, string> = {\n slate: \"stroke-slate-500 dark:stroke-slate-400\",\n gray: \"stroke-gray-500 dark:stroke-gray-400\",\n zinc: \"stroke-zinc-500 dark:stroke-zinc-400\",\n neutral: \"stroke-neutral-500 dark:stroke-neutral-400\",\n stone: \"stroke-stone-500 dark:stroke-stone-400\",\n red: \"stroke-red-500 dark:stroke-red-400\",\n orange: \"stroke-orange-500 dark:stroke-orange-400\",\n amber: \"stroke-amber-500 dark:stroke-amber-400\",\n yellow: \"stroke-yellow-500 dark:stroke-yellow-400\",\n lime: \"stroke-lime-500 dark:stroke-lime-400\",\n green: \"stroke-green-500 dark:stroke-green-400\",\n emerald: \"stroke-emerald-500 dark:stroke-emerald-400\",\n teal: \"stroke-teal-500 dark:stroke-teal-400\",\n cyan: \"stroke-cyan-500 dark:stroke-cyan-400\",\n sky: \"stroke-sky-500 dark:stroke-sky-400\",\n blue: \"stroke-blue-500 dark:stroke-blue-400\",\n indigo: \"stroke-indigo-500 dark:stroke-indigo-400\",\n violet: \"stroke-violet-500 dark:stroke-violet-400\",\n purple: \"stroke-purple-500 dark:stroke-purple-400\",\n fuchsia: \"stroke-fuchsia-500 dark:stroke-fuchsia-400\",\n pink: \"stroke-pink-500 dark:stroke-pink-400\",\n rose: \"stroke-rose-500 dark:stroke-rose-400\",\n};\n\nexport const progressText: Record<Color, string> = {\n slate: \"text-slate-600 dark:text-slate-400\",\n gray: \"text-gray-600 dark:text-gray-400\",\n zinc: \"text-zinc-600 dark:text-zinc-400\",\n neutral: \"text-neutral-600 dark:text-neutral-400\",\n stone: \"text-stone-600 dark:text-stone-400\",\n red: \"text-red-600 dark:text-red-400\",\n orange: \"text-orange-600 dark:text-orange-400\",\n amber: \"text-amber-600 dark:text-amber-400\",\n yellow: \"text-yellow-600 dark:text-yellow-400\",\n lime: \"text-lime-600 dark:text-lime-400\",\n green: \"text-green-600 dark:text-green-400\",\n emerald: \"text-emerald-600 dark:text-emerald-400\",\n teal: \"text-teal-600 dark:text-teal-400\",\n cyan: \"text-cyan-600 dark:text-cyan-400\",\n sky: \"text-sky-600 dark:text-sky-400\",\n blue: \"text-blue-600 dark:text-blue-400\",\n indigo: \"text-indigo-600 dark:text-indigo-400\",\n violet: \"text-violet-600 dark:text-violet-400\",\n purple: \"text-purple-600 dark:text-purple-400\",\n fuchsia: \"text-fuchsia-600 dark:text-fuchsia-400\",\n pink: \"text-pink-600 dark:text-pink-400\",\n rose: \"text-rose-600 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ProgressProps } from \"./Progress.types\";\nimport { progressFill, progressStroke, progressText } from \"./Progress.colors\";\n\ntype NamedSize = \"sm\" | \"md\" | \"lg\";\n\nconst barHeightClasses: Record<NamedSize, string> = {\n sm: \"h-1.5\",\n md: \"h-2.5\",\n lg: \"h-4\",\n};\n\nconst circularSizeMap: Record<NamedSize, number> = {\n sm: 32,\n md: 48,\n lg: 64,\n};\n\nconst namedStrokeWidth: Record<NamedSize, number> = { sm: 3, md: 4, lg: 5 };\n\nconst textSizeClasses: Record<NamedSize, string> = {\n sm: \"text-[8px]\",\n md: \"text-[10px]\",\n lg: \"text-xs\",\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n value = 0,\n max = 100,\n variant = \"bar\",\n size = \"md\",\n strokeWidth: strokeWidthProp,\n color = \"blue\",\n indeterminate = false,\n showValue = false,\n className,\n },\n ref,\n ) => {\n // Class lookups need a named key; a pixel size sizes the ring itself and\n // leaves the type/bar scales on their default.\n const named: NamedSize = typeof size === \"number\" ? \"md\" : size;\n\n const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n\n if (variant === \"circular\") {\n const pixelSize = typeof size === \"number\" ? size : null;\n const diameter = pixelSize ?? circularSizeMap[named];\n // Scale with the circle when not told otherwise: a 5px stroke on a 152px\n // ring reads as a hairline, so a fixed default makes large sizes look\n // broken out of the box. The named scale keeps its exact old values.\n const strokeWidth =\n strokeWidthProp ??\n (pixelSize === null ? namedStrokeWidth[named] : Math.max(3, Math.round(diameter * 0.075)));\n const radius = (diameter - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = indeterminate ? circumference * 0.75 : circumference - (percentage / 100) * circumference;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n // The named diameters live in styles.css keyed off this, so they work\n // without the consumer's Tailwind generating anything — and, being\n // layered, a className utility still beats them.\n data-size={pixelSize === null ? named : undefined}\n className={cn(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={pixelSize === null ? undefined : { width: pixelSize, height: pixelSize }}\n >\n <svg\n // viewBox + 100% so the geometry follows the box instead of being\n // baked in: the ring now scales with whatever sizes the wrapper,\n // including a `className` override of the named scale.\n viewBox={`0 0 ${diameter} ${diameter}`}\n width=\"100%\"\n height=\"100%\"\n className={cn(indeterminate && \"animate-spin\")}\n >\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n className=\"stroke-zinc-200 dark:stroke-zinc-700\"\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n className={cn(progressStroke[color], \"transition-[stroke-dashoffset] duration-300\")}\n style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n />\n </svg>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"absolute font-medium\",\n progressText[color],\n textSizeClasses[named],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={indeterminate ? undefined : value}\n aria-valuemin={0}\n aria-valuemax={max}\n data-react-fancy-progress=\"\"\n className={cn(\"relative w-full\", className)}\n >\n <div\n className={cn(\n \"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700\",\n barHeightClasses[named],\n )}\n >\n <div\n className={cn(\n \"h-full rounded-full transition-[width] duration-300\",\n progressFill[color],\n indeterminate && \"animate-pulse w-full\",\n )}\n style={indeterminate ? undefined : { width: `${percentage}%` }}\n />\n </div>\n {showValue && !indeterminate && (\n <span\n className={cn(\n \"mt-1 block text-right text-xs font-medium\",\n progressText[color],\n )}\n >\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n );\n },\n);\n\nProgress.displayName = \"Progress\";\n"]}
|