@jcsoftdev/ui 0.1.2 → 0.1.3

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.
@@ -164,7 +164,7 @@ function GaugePlot({
164
164
  );
165
165
  const capAngle = roundedCaps ? band / 2 / mid : 0;
166
166
  const fraction = toFraction(shown);
167
- const active = bands.find((item) => shown >= item.from && shown <= item.to);
167
+ const active = bands.find((item) => value >= item.from && value <= item.to);
168
168
  const valueColor = active ? rangeColor(active) : "var(--accent-word)";
169
169
  const progressEnd = a0 + capAngle + (span - 2 * capAngle) * fraction;
170
170
  const bandPaths = useMemo(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jcsoftdev/ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Token-driven React component library: React 19, Radix, Tailwind v4.",
5
5
  "author": "jcsoftdev",
6
6
  "license": "MIT",
@@ -264,7 +264,9 @@ function GaugePlot({
264
264
  const capAngle = roundedCaps ? band / 2 / mid : 0;
265
265
 
266
266
  const fraction = toFraction(shown);
267
- const active = bands.find((item) => shown >= item.from && shown <= item.to);
267
+ // Colour and label follow the target value, so they do not flip band by band
268
+ // while the arc or needle sweeps towards it.
269
+ const active = bands.find((item) => value >= item.from && value <= item.to);
268
270
  const valueColor = active ? rangeColor(active) : "var(--accent-word)";
269
271
  const progressEnd = a0 + capAngle + (span - 2 * capAngle) * fraction;
270
272