@codefast/ui 0.3.9 → 0.3.11-canary.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/CHANGELOG.md +30 -0
- package/README.md +277 -167
- package/dist/components/accordion.cjs +97 -1
- package/dist/components/accordion.js +51 -1
- package/dist/components/alert-dialog.cjs +155 -1
- package/dist/components/alert-dialog.d.ts +2 -2
- package/dist/components/alert-dialog.js +94 -1
- package/dist/components/alert.cjs +84 -1
- package/dist/components/alert.d.ts +1 -1
- package/dist/components/alert.js +41 -1
- package/dist/components/aspect-ratio.cjs +43 -1
- package/dist/components/aspect-ratio.js +9 -1
- package/dist/components/avatar.cjs +65 -1
- package/dist/components/avatar.js +25 -1
- package/dist/components/badge.cjs +66 -1
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/badge.js +29 -1
- package/dist/components/breadcrumb.cjs +124 -1
- package/dist/components/breadcrumb.js +72 -1
- package/dist/components/button-group.cjs +86 -1
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/button-group.js +43 -1
- package/dist/components/button.cjs +92 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.js +55 -1
- package/dist/components/calendar.cjs +150 -1
- package/dist/components/calendar.d.ts +11 -18
- package/dist/components/calendar.js +113 -1
- package/dist/components/card.cjs +105 -1
- package/dist/components/card.js +53 -1
- package/dist/components/carousel.cjs +210 -1
- package/dist/components/carousel.d.ts +1 -1
- package/dist/components/carousel.js +151 -1
- package/dist/components/chart.cjs +250 -3
- package/dist/components/chart.d.ts +5 -4
- package/dist/components/chart.js +198 -3
- package/dist/components/checkbox-cards.cjs +69 -1
- package/dist/components/checkbox-cards.js +32 -1
- package/dist/components/checkbox-group.cjs +63 -1
- package/dist/components/checkbox-group.js +26 -1
- package/dist/components/checkbox.cjs +53 -1
- package/dist/components/checkbox.js +19 -1
- package/dist/components/collapsible.cjs +61 -1
- package/dist/components/collapsible.js +21 -1
- package/dist/components/command.cjs +167 -1
- package/dist/components/command.js +106 -1
- package/dist/components/context-menu.cjs +218 -1
- package/dist/components/context-menu.js +142 -1
- package/dist/components/dialog.cjs +164 -1
- package/dist/components/dialog.d.ts +2 -2
- package/dist/components/dialog.js +106 -1
- package/dist/components/drawer.cjs +143 -1
- package/dist/components/drawer.d.ts +1 -1
- package/dist/components/drawer.js +85 -1
- package/dist/components/dropdown-menu.cjs +221 -1
- package/dist/components/dropdown-menu.js +145 -1
- package/dist/components/empty.cjs +113 -1
- package/dist/components/empty.d.ts +1 -1
- package/dist/components/empty.js +61 -1
- package/dist/components/field.cjs +193 -1
- package/dist/components/field.d.ts +1 -1
- package/dist/components/field.js +129 -1
- package/dist/components/form.cjs +151 -1
- package/dist/components/form.d.ts +3 -3
- package/dist/components/form.js +96 -1
- package/dist/components/hover-card.cjs +77 -1
- package/dist/components/hover-card.js +34 -1
- package/dist/components/input-group.cjs +155 -1
- package/dist/components/input-group.d.ts +1 -1
- package/dist/components/input-group.js +97 -1
- package/dist/components/input-number.cjs +98 -1
- package/dist/components/input-number.js +64 -1
- package/dist/components/input-otp.cjs +101 -1
- package/dist/components/input-otp.js +49 -1
- package/dist/components/input-password.cjs +71 -1
- package/dist/components/input-password.js +37 -1
- package/dist/components/input-search.cjs +80 -1
- package/dist/components/input-search.js +46 -1
- package/dist/components/input.cjs +45 -1
- package/dist/components/input.js +11 -1
- package/dist/components/item.cjs +186 -1
- package/dist/components/item.d.ts +1 -1
- package/dist/components/item.js +119 -1
- package/dist/components/kbd.cjs +54 -1
- package/dist/components/kbd.js +17 -1
- package/dist/components/label.cjs +45 -1
- package/dist/components/label.js +11 -1
- package/dist/components/menubar.cjs +232 -1
- package/dist/components/menubar.js +153 -1
- package/dist/components/native-select.cjs +75 -1
- package/dist/components/native-select.js +35 -1
- package/dist/components/navigation-menu.cjs +146 -2
- package/dist/components/navigation-menu.js +94 -2
- package/dist/components/pagination.cjs +138 -1
- package/dist/components/pagination.d.ts +1 -1
- package/dist/components/pagination.js +86 -1
- package/dist/components/popover.cjs +86 -1
- package/dist/components/popover.js +40 -1
- package/dist/components/progress-circle.cjs +184 -1
- package/dist/components/progress-circle.d.ts +1 -1
- package/dist/components/progress-circle.js +147 -1
- package/dist/components/progress.cjs +52 -1
- package/dist/components/progress.js +18 -1
- package/dist/components/radio-cards.cjs +66 -1
- package/dist/components/radio-cards.js +29 -1
- package/dist/components/radio-group.cjs +59 -1
- package/dist/components/radio-group.js +22 -1
- package/dist/components/radio.cjs +47 -1
- package/dist/components/radio.js +13 -1
- package/dist/components/resizable.cjs +71 -1
- package/dist/components/resizable.d.ts +6 -6
- package/dist/components/resizable.js +31 -1
- package/dist/components/scroll-area.cjs +140 -1
- package/dist/components/scroll-area.d.ts +1 -1
- package/dist/components/scroll-area.js +100 -1
- package/dist/components/select.cjs +180 -1
- package/dist/components/select.d.ts +2 -2
- package/dist/components/select.js +119 -1
- package/dist/components/separator.cjs +82 -1
- package/dist/components/separator.d.ts +1 -1
- package/dist/components/separator.js +42 -1
- package/dist/components/sheet.cjs +184 -1
- package/dist/components/sheet.d.ts +2 -2
- package/dist/components/sheet.js +123 -1
- package/dist/components/sidebar.cjs +506 -1
- package/dist/components/sidebar.d.ts +1 -1
- package/dist/components/sidebar.js +400 -1
- package/dist/components/skeleton.cjs +44 -1
- package/dist/components/skeleton.js +10 -1
- package/dist/components/slider.cjs +79 -1
- package/dist/components/slider.js +45 -1
- package/dist/components/sonner.cjs +57 -1
- package/dist/components/sonner.js +17 -1
- package/dist/components/spinner.cjs +75 -1
- package/dist/components/spinner.js +41 -1
- package/dist/components/switch.cjs +49 -1
- package/dist/components/switch.js +15 -1
- package/dist/components/table.cjs +118 -1
- package/dist/components/table.js +63 -1
- package/dist/components/tabs.cjs +75 -1
- package/dist/components/tabs.d.ts +1 -1
- package/dist/components/tabs.js +32 -1
- package/dist/components/textarea.cjs +44 -1
- package/dist/components/textarea.js +10 -1
- package/dist/components/toggle-group.cjs +90 -1
- package/dist/components/toggle-group.d.ts +8 -10
- package/dist/components/toggle-group.js +53 -1
- package/dist/components/toggle.cjs +71 -1
- package/dist/components/toggle.d.ts +8 -10
- package/dist/components/toggle.js +34 -1
- package/dist/components/tooltip.cjs +90 -1
- package/dist/components/tooltip.js +44 -1
- package/dist/css/amber.css +95 -1
- package/dist/css/blue.css +95 -1
- package/dist/css/cyan.css +95 -1
- package/dist/css/emerald.css +95 -1
- package/dist/css/fuchsia.css +95 -1
- package/dist/css/gray.css +95 -1
- package/dist/css/green.css +95 -1
- package/dist/css/indigo.css +95 -1
- package/dist/css/lime.css +95 -1
- package/dist/css/neutral.css +95 -1
- package/dist/css/orange.css +95 -1
- package/dist/css/pink.css +95 -1
- package/dist/css/preset.css +118 -1
- package/dist/css/purple.css +95 -1
- package/dist/css/red.css +95 -1
- package/dist/css/rose.css +95 -1
- package/dist/css/sky.css +95 -1
- package/dist/css/slate.css +95 -1
- package/dist/css/stone.css +95 -1
- package/dist/css/style.css +3 -1
- package/dist/css/teal.css +95 -1
- package/dist/css/violet.css +95 -1
- package/dist/css/yellow.css +95 -1
- package/dist/css/zinc.css +95 -1
- package/dist/hooks/use-animated-value.cjs +74 -1
- package/dist/hooks/use-animated-value.d.ts +9 -10
- package/dist/hooks/use-animated-value.js +40 -1
- package/dist/hooks/use-copy-to-clipboard.cjs +57 -1
- package/dist/hooks/use-copy-to-clipboard.d.ts +17 -0
- package/dist/hooks/use-copy-to-clipboard.js +23 -1
- package/dist/hooks/use-is-mobile.cjs +39 -1
- package/dist/hooks/use-is-mobile.d.ts +15 -6
- package/dist/hooks/use-is-mobile.js +5 -1
- package/dist/hooks/use-media-query.cjs +56 -1
- package/dist/hooks/use-media-query.d.ts +11 -3
- package/dist/hooks/use-media-query.js +22 -1
- package/dist/hooks/use-mutation-observer.cjs +56 -1
- package/dist/hooks/use-mutation-observer.d.ts +7 -11
- package/dist/hooks/use-mutation-observer.js +22 -1
- package/dist/hooks/use-pagination.cjs +92 -1
- package/dist/hooks/use-pagination.d.ts +12 -10
- package/dist/hooks/use-pagination.js +55 -1
- package/dist/index.cjs +1081 -1
- package/dist/index.d.ts +4 -5
- package/dist/index.js +69 -1
- package/dist/primitives/checkbox-group.cjs +151 -1
- package/dist/primitives/checkbox-group.d.ts +1 -1
- package/dist/primitives/checkbox-group.js +99 -1
- package/dist/primitives/input-number.cjs +439 -1
- package/dist/primitives/input-number.d.ts +1 -1
- package/dist/primitives/input-number.js +381 -1
- package/dist/primitives/input.cjs +99 -1
- package/dist/primitives/input.d.ts +1 -1
- package/dist/primitives/input.js +53 -1
- package/dist/primitives/progress-circle.cjs +198 -1
- package/dist/primitives/progress-circle.d.ts +1 -1
- package/dist/primitives/progress-circle.js +128 -1
- package/package.json +405 -62
|
@@ -1,2 +1,199 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
"use client";
|
|
2
|
-
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
createProgressCircleScope: ()=>createProgressCircleScope,
|
|
29
|
+
ProgressCircleValue: ()=>ProgressCircleValue,
|
|
30
|
+
ProgressCircle: ()=>ProgressCircle,
|
|
31
|
+
Indicator: ()=>ProgressCircleIndicator,
|
|
32
|
+
ProgressCircleIndicator: ()=>ProgressCircleIndicator,
|
|
33
|
+
ProgressCircleProvider: ()=>ProgressCircleProvider,
|
|
34
|
+
Provider: ()=>ProgressCircleProvider,
|
|
35
|
+
ProgressCircleSVG: ()=>ProgressCircleSVG,
|
|
36
|
+
Root: ()=>ProgressCircle,
|
|
37
|
+
ProgressCircleTrack: ()=>ProgressCircleTrack,
|
|
38
|
+
SVG: ()=>ProgressCircleSVG,
|
|
39
|
+
Value: ()=>ProgressCircleValue,
|
|
40
|
+
Track: ()=>ProgressCircleTrack
|
|
41
|
+
});
|
|
42
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
43
|
+
const react_context_namespaceObject = require("@radix-ui/react-context");
|
|
44
|
+
const external_react_namespaceObject = require("react");
|
|
45
|
+
const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
|
|
46
|
+
const [createProgressCircleContext, createProgressCircleScope] = (0, react_context_namespaceObject.createContextScope)(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
47
|
+
const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
48
|
+
function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max = 100, min = 0, size = 48, startAngle = -90, strokeWidth = 4, thresholds, value }) {
|
|
49
|
+
const uniqueId = (0, external_react_namespaceObject.useId)();
|
|
50
|
+
const id = propertyId ?? uniqueId;
|
|
51
|
+
const validSize = Math.max(0, size);
|
|
52
|
+
const validStrokeWidth = Math.max(0, strokeWidth);
|
|
53
|
+
const validStartAngle = startAngle % 360;
|
|
54
|
+
let validMin = min;
|
|
55
|
+
let validMax = max;
|
|
56
|
+
if (validMin > validMax) [validMin, validMax] = [
|
|
57
|
+
validMax,
|
|
58
|
+
validMin
|
|
59
|
+
];
|
|
60
|
+
const isIndeterminate = null == value;
|
|
61
|
+
const clampedValue = isIndeterminate ? void 0 : clamp(validMin, validMax, value);
|
|
62
|
+
const range = validMax - validMin;
|
|
63
|
+
const percentage = void 0 !== clampedValue && range > 0 ? (clampedValue - validMin) / range * 100 : 0;
|
|
64
|
+
const valueText = void 0 !== clampedValue && formatValue ? formatValue(clampedValue) : `${Math.round(percentage).toString()}%`;
|
|
65
|
+
const sortedThresholds = (0, external_react_namespaceObject.useMemo)(()=>thresholds && thresholds.length > 0 ? [
|
|
66
|
+
...thresholds
|
|
67
|
+
].toSorted((a, b)=>a.value - b.value) : [], [
|
|
68
|
+
thresholds
|
|
69
|
+
]);
|
|
70
|
+
const threshold = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
71
|
+
if (void 0 === clampedValue) return;
|
|
72
|
+
for (const sortedThreshold of sortedThresholds)if (clampedValue <= sortedThreshold.value) return sortedThreshold;
|
|
73
|
+
return sortedThresholds.at(-1);
|
|
74
|
+
}, [
|
|
75
|
+
sortedThresholds,
|
|
76
|
+
clampedValue
|
|
77
|
+
]);
|
|
78
|
+
const center = validSize / 2;
|
|
79
|
+
const radius = Math.max(0, center - validStrokeWidth / 2);
|
|
80
|
+
const circumference = 2 * Math.PI * radius;
|
|
81
|
+
const strokeDashoffset = circumference - percentage / 100 * circumference;
|
|
82
|
+
const rotationTransform = `rotate(${validStartAngle.toString()}, 0, 0)`;
|
|
83
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProgressCircleContextProvider, {
|
|
84
|
+
center: center,
|
|
85
|
+
circumference: circumference,
|
|
86
|
+
clampedValue: clampedValue,
|
|
87
|
+
id: id,
|
|
88
|
+
max: validMax,
|
|
89
|
+
min: validMin,
|
|
90
|
+
radius: radius,
|
|
91
|
+
rotationTransform: rotationTransform,
|
|
92
|
+
scope: __scopeProgressCircle,
|
|
93
|
+
size: validSize,
|
|
94
|
+
strokeDashoffset: strokeDashoffset,
|
|
95
|
+
strokeWidth: validStrokeWidth,
|
|
96
|
+
threshold: threshold,
|
|
97
|
+
value: value ?? 0,
|
|
98
|
+
valueText: valueText,
|
|
99
|
+
children: children
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
function ProgressCircle({ __scopeProgressCircle, ...props }) {
|
|
103
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
104
|
+
...props
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
|
|
108
|
+
function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
|
|
109
|
+
const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
|
|
110
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
|
|
111
|
+
"aria-label": "Progress",
|
|
112
|
+
"aria-valuemax": max,
|
|
113
|
+
"aria-valuemin": min,
|
|
114
|
+
"aria-valuenow": clampedValue,
|
|
115
|
+
"aria-valuetext": void 0 === clampedValue ? void 0 : valueText,
|
|
116
|
+
height: size,
|
|
117
|
+
id: id,
|
|
118
|
+
role: "progressbar",
|
|
119
|
+
viewBox: `0 0 ${size.toString()} ${size.toString()}`,
|
|
120
|
+
width: size,
|
|
121
|
+
...props
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
|
|
125
|
+
function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
|
|
126
|
+
const { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
|
|
127
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
|
|
128
|
+
cx: center,
|
|
129
|
+
cy: center,
|
|
130
|
+
fill: "transparent",
|
|
131
|
+
r: radius,
|
|
132
|
+
stroke: threshold?.background ?? "currentColor",
|
|
133
|
+
strokeWidth: strokeWidth,
|
|
134
|
+
...props
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
|
|
138
|
+
function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
|
|
139
|
+
const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
|
|
140
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
|
|
141
|
+
cx: center,
|
|
142
|
+
cy: center,
|
|
143
|
+
fill: "transparent",
|
|
144
|
+
r: radius,
|
|
145
|
+
stroke: threshold?.color ?? "currentColor",
|
|
146
|
+
strokeDasharray: circumference,
|
|
147
|
+
strokeDashoffset: strokeDashoffset,
|
|
148
|
+
strokeLinecap: "round",
|
|
149
|
+
strokeWidth: strokeWidth,
|
|
150
|
+
transform: rotationTransform,
|
|
151
|
+
...props
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
|
|
155
|
+
function ProgressCircleValue({ __scopeProgressCircle, children, ...props }) {
|
|
156
|
+
const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
|
|
157
|
+
if ("function" == typeof children) return children({
|
|
158
|
+
value: clampedValue,
|
|
159
|
+
valueText
|
|
160
|
+
});
|
|
161
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
162
|
+
...props,
|
|
163
|
+
children: children ?? valueText
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
function clamp(min, max, value) {
|
|
167
|
+
return Math.min(max, Math.max(min, value));
|
|
168
|
+
}
|
|
169
|
+
exports.Indicator = __webpack_exports__.Indicator;
|
|
170
|
+
exports.ProgressCircle = __webpack_exports__.ProgressCircle;
|
|
171
|
+
exports.ProgressCircleIndicator = __webpack_exports__.ProgressCircleIndicator;
|
|
172
|
+
exports.ProgressCircleProvider = __webpack_exports__.ProgressCircleProvider;
|
|
173
|
+
exports.ProgressCircleSVG = __webpack_exports__.ProgressCircleSVG;
|
|
174
|
+
exports.ProgressCircleTrack = __webpack_exports__.ProgressCircleTrack;
|
|
175
|
+
exports.ProgressCircleValue = __webpack_exports__.ProgressCircleValue;
|
|
176
|
+
exports.Provider = __webpack_exports__.Provider;
|
|
177
|
+
exports.Root = __webpack_exports__.Root;
|
|
178
|
+
exports.SVG = __webpack_exports__.SVG;
|
|
179
|
+
exports.Track = __webpack_exports__.Track;
|
|
180
|
+
exports.Value = __webpack_exports__.Value;
|
|
181
|
+
exports.createProgressCircleScope = __webpack_exports__.createProgressCircleScope;
|
|
182
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
183
|
+
"Indicator",
|
|
184
|
+
"ProgressCircle",
|
|
185
|
+
"ProgressCircleIndicator",
|
|
186
|
+
"ProgressCircleProvider",
|
|
187
|
+
"ProgressCircleSVG",
|
|
188
|
+
"ProgressCircleTrack",
|
|
189
|
+
"ProgressCircleValue",
|
|
190
|
+
"Provider",
|
|
191
|
+
"Root",
|
|
192
|
+
"SVG",
|
|
193
|
+
"Track",
|
|
194
|
+
"Value",
|
|
195
|
+
"createProgressCircleScope"
|
|
196
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
197
|
+
Object.defineProperty(exports, '__esModule', {
|
|
198
|
+
value: true
|
|
199
|
+
});
|
|
@@ -1,2 +1,129 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
4
|
+
import { useId, useMemo } from "react";
|
|
5
|
+
const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
|
|
6
|
+
const [createProgressCircleContext, createProgressCircleScope] = createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
7
|
+
const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
8
|
+
function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max = 100, min = 0, size = 48, startAngle = -90, strokeWidth = 4, thresholds, value }) {
|
|
9
|
+
const uniqueId = useId();
|
|
10
|
+
const id = propertyId ?? uniqueId;
|
|
11
|
+
const validSize = Math.max(0, size);
|
|
12
|
+
const validStrokeWidth = Math.max(0, strokeWidth);
|
|
13
|
+
const validStartAngle = startAngle % 360;
|
|
14
|
+
let validMin = min;
|
|
15
|
+
let validMax = max;
|
|
16
|
+
if (validMin > validMax) [validMin, validMax] = [
|
|
17
|
+
validMax,
|
|
18
|
+
validMin
|
|
19
|
+
];
|
|
20
|
+
const isIndeterminate = null == value;
|
|
21
|
+
const clampedValue = isIndeterminate ? void 0 : clamp(validMin, validMax, value);
|
|
22
|
+
const range = validMax - validMin;
|
|
23
|
+
const percentage = void 0 !== clampedValue && range > 0 ? (clampedValue - validMin) / range * 100 : 0;
|
|
24
|
+
const valueText = void 0 !== clampedValue && formatValue ? formatValue(clampedValue) : `${Math.round(percentage).toString()}%`;
|
|
25
|
+
const sortedThresholds = useMemo(()=>thresholds && thresholds.length > 0 ? [
|
|
26
|
+
...thresholds
|
|
27
|
+
].toSorted((a, b)=>a.value - b.value) : [], [
|
|
28
|
+
thresholds
|
|
29
|
+
]);
|
|
30
|
+
const threshold = useMemo(()=>{
|
|
31
|
+
if (void 0 === clampedValue) return;
|
|
32
|
+
for (const sortedThreshold of sortedThresholds)if (clampedValue <= sortedThreshold.value) return sortedThreshold;
|
|
33
|
+
return sortedThresholds.at(-1);
|
|
34
|
+
}, [
|
|
35
|
+
sortedThresholds,
|
|
36
|
+
clampedValue
|
|
37
|
+
]);
|
|
38
|
+
const center = validSize / 2;
|
|
39
|
+
const radius = Math.max(0, center - validStrokeWidth / 2);
|
|
40
|
+
const circumference = 2 * Math.PI * radius;
|
|
41
|
+
const strokeDashoffset = circumference - percentage / 100 * circumference;
|
|
42
|
+
const rotationTransform = `rotate(${validStartAngle.toString()}, 0, 0)`;
|
|
43
|
+
return /*#__PURE__*/ jsx(ProgressCircleContextProvider, {
|
|
44
|
+
center: center,
|
|
45
|
+
circumference: circumference,
|
|
46
|
+
clampedValue: clampedValue,
|
|
47
|
+
id: id,
|
|
48
|
+
max: validMax,
|
|
49
|
+
min: validMin,
|
|
50
|
+
radius: radius,
|
|
51
|
+
rotationTransform: rotationTransform,
|
|
52
|
+
scope: __scopeProgressCircle,
|
|
53
|
+
size: validSize,
|
|
54
|
+
strokeDashoffset: strokeDashoffset,
|
|
55
|
+
strokeWidth: validStrokeWidth,
|
|
56
|
+
threshold: threshold,
|
|
57
|
+
value: value ?? 0,
|
|
58
|
+
valueText: valueText,
|
|
59
|
+
children: children
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function ProgressCircle({ __scopeProgressCircle, ...props }) {
|
|
63
|
+
return /*#__PURE__*/ jsx("div", {
|
|
64
|
+
...props
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
|
|
68
|
+
function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
|
|
69
|
+
const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
|
|
70
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
71
|
+
"aria-label": "Progress",
|
|
72
|
+
"aria-valuemax": max,
|
|
73
|
+
"aria-valuemin": min,
|
|
74
|
+
"aria-valuenow": clampedValue,
|
|
75
|
+
"aria-valuetext": void 0 === clampedValue ? void 0 : valueText,
|
|
76
|
+
height: size,
|
|
77
|
+
id: id,
|
|
78
|
+
role: "progressbar",
|
|
79
|
+
viewBox: `0 0 ${size.toString()} ${size.toString()}`,
|
|
80
|
+
width: size,
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
|
|
85
|
+
function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
|
|
86
|
+
const { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
|
|
87
|
+
return /*#__PURE__*/ jsx("circle", {
|
|
88
|
+
cx: center,
|
|
89
|
+
cy: center,
|
|
90
|
+
fill: "transparent",
|
|
91
|
+
r: radius,
|
|
92
|
+
stroke: threshold?.background ?? "currentColor",
|
|
93
|
+
strokeWidth: strokeWidth,
|
|
94
|
+
...props
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
|
|
98
|
+
function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
|
|
99
|
+
const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
|
|
100
|
+
return /*#__PURE__*/ jsx("circle", {
|
|
101
|
+
cx: center,
|
|
102
|
+
cy: center,
|
|
103
|
+
fill: "transparent",
|
|
104
|
+
r: radius,
|
|
105
|
+
stroke: threshold?.color ?? "currentColor",
|
|
106
|
+
strokeDasharray: circumference,
|
|
107
|
+
strokeDashoffset: strokeDashoffset,
|
|
108
|
+
strokeLinecap: "round",
|
|
109
|
+
strokeWidth: strokeWidth,
|
|
110
|
+
transform: rotationTransform,
|
|
111
|
+
...props
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
|
|
115
|
+
function ProgressCircleValue({ __scopeProgressCircle, children, ...props }) {
|
|
116
|
+
const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
|
|
117
|
+
if ("function" == typeof children) return children({
|
|
118
|
+
value: clampedValue,
|
|
119
|
+
valueText
|
|
120
|
+
});
|
|
121
|
+
return /*#__PURE__*/ jsx("div", {
|
|
122
|
+
...props,
|
|
123
|
+
children: children ?? valueText
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function clamp(min, max, value) {
|
|
127
|
+
return Math.min(max, Math.max(min, value));
|
|
128
|
+
}
|
|
129
|
+
export { ProgressCircleIndicator as Indicator, ProgressCircle, ProgressCircleIndicator, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue, ProgressCircleProvider as Provider, ProgressCircle as Root, ProgressCircleSVG as SVG, ProgressCircleTrack as Track, ProgressCircleValue as Value, createProgressCircleScope };
|