@viraui/react 2026.10.0 → 2026.11.0-next.0

package/dist/components/gauge/control.d.ts

@@ -0,0 +1,107 @@
+import { GaugeRange } from './context';
+import * as React from 'react';
+/** A literal number widened, so `value={42}` still takes any number back. */
+type Widen<V> = V extends number ? number : [number, number];
+export type GaugeControlProps<V extends number | GaugeRange = number> = {
+    /**
+     * A number for one handle, or a `[from, to]` range for two.
+     */
+    value: V;
+    /**
+     * Emits the next value (widened number or tuple).
+     */
+    onChange: (value: Widen<V>) => void;
+    /**
+     * A press on the middle of the face, or Enter, for a dial that is also a
+     * switch. Left out, the middle does nothing.
+     * @defaultValue undefined
+     */
+    onPress?: () => void;
+    /**
+     * Domain lower bound.
+     * @defaultValue 0
+     */
+    min?: number;
+    /**
+     * Domain upper bound.
+     * @defaultValue 100
+     */
+    max?: number;
+    /**
+     * Granularity a drag lands on, and the size of an arrow-key step.
+     * @defaultValue 1
+     */
+    step?: number;
+    /**
+     * Gauge degrees, matching the gauge drawn inside.
+     * @defaultValue 40
+     */
+    startAngle?: number;
+    /**
+     * Gauge degrees, matching the gauge drawn inside.
+     * @defaultValue 320
+     */
+    endAngle?: number;
+    /**
+     * The domain is a closed ring, as the gauge's own `wrap`: values carry on
+     * round past either end instead of holding there, and a range may run
+     * across the seam, its ends in either order.
+     * @defaultValue false
+     */
+    wrap?: boolean;
+    /**
+     * Read to screen readers; every slider needs one. On a range it names the
+     * pair, and each thumb gets its own from `thumbLabels`.
+     */
+    label: string;
+    /**
+     * Names for a range's two thumbs. Defaults to the label with "start" and
+     * "end" after it.
+     * @defaultValue Derived from `label`
+     */
+    thumbLabels?: readonly [string, string];
+    /**
+     * The value as it would be spoken: "21.5 °C" rather than 21.5. A range
+     * takes one for each end.
+     * @defaultValue undefined
+     */
+    valueText?: V extends number ? string : readonly [string, string];
+    /**
+     * The face turns like a knob: a drag anywhere on it moves the value by as
+     * far as the pointer goes round, rather than jumping to where it is. A
+     * range turns as a whole, keeping its width.
+     * @defaultValue false
+     */
+    knob?: boolean;
+    /**
+     * Ignores pointer and keyboard input when true.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Merged onto the control host.
+     * @defaultValue undefined
+     */
+    className?: string;
+    /**
+     * The round `Gauge` tree drawn inside the control.
+     * Linear bars belong on `Slider`, not here.
+     */
+    children: React.ReactNode;
+};
+/**
+ * Makes the square gauge inside it a round slider: drag round the ring to set
+ * it, or use the arrow keys, Page Up and Down, Home and End. A drag past either
+ * end of the sweep holds there rather than jumping to the other. A press in
+ * the middle of the face, or Enter, is left for `onPress`, which a dimmer
+ * uses to switch on and off, or, with `knob`, turns the face from where it
+ * is. The domain and angles default to `Gauge`'s own.
+ *
+ * Given a `[from, to]` range it has two thumbs: a press on the ring takes
+ * whichever is nearer, and each can be tabbed to and keyed on its own. On an
+ * open domain they hold short of passing each other.
+ *
+ * For a linear range control use `Slider`.
+ */
+export declare const GaugeControl: <V extends number | GaugeRange = number>({ value, onChange, onPress, min, max, step, startAngle, endAngle, wrap, label, thumbLabels, valueText, knob, disabled, className, children, }: GaugeControlProps<V>) => React.JSX.Element;
+export {};

package/dist/components/gauge/control.js

@@ -0,0 +1,223 @@
+"use client";
+import { clsx } from "../../core/clsx.js";
+import { angleToValue, clamp, foldValue, fractionDigits, valueToAngle } from "./math.js";
+import gauge_module_default from "./gauge.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/gauge/control.tsx
+/** How far out from the centre a press starts counting as the ring, as a
+share of the half width. Inside it is the face, left for `onPress`. */
+var FACE = .55;
+/** Too near the centre for the angle under the pointer to mean anything. */
+var HUB = .08;
+/** The gauge angle under a point, measured round the element's centre. */
+var angleAt = (el, x, y) => {
+	const box = el.getBoundingClientRect();
+	const dx = x - (box.left + box.width / 2);
+	const dy = y - (box.top + box.height / 2);
+	return {
+		angle: ((Math.atan2(dy, dx) * 180 / Math.PI - 90) % 360 + 360) % 360,
+		/** How far out from the centre, as a share of the half width. */
+		reach: Math.hypot(dx, dy) / (box.width / 2)
+	};
+};
+/** Degrees between two angles the short way round. */
+var turnBetween = (a, b) => Math.abs(((a - b) % 360 + 540) % 360 - 180);
+/**
+* Makes the square gauge inside it a round slider: drag round the ring to set
+* it, or use the arrow keys, Page Up and Down, Home and End. A drag past either
+* end of the sweep holds there rather than jumping to the other. A press in
+* the middle of the face, or Enter, is left for `onPress`, which a dimmer
+* uses to switch on and off, or, with `knob`, turns the face from where it
+* is. The domain and angles default to `Gauge`'s own.
+*
+* Given a `[from, to]` range it has two thumbs: a press on the ring takes
+* whichever is nearer, and each can be tabbed to and keyed on its own. On an
+* open domain they hold short of passing each other.
+*
+* For a linear range control use `Slider`.
+*/
+var GaugeControl = ({ value, onChange, onPress, min = 0, max = 100, step = 1, startAngle = 40, endAngle = 320, wrap = false, label, thumbLabels, valueText, knob = false, disabled = false, className, children }) => {
+	const range = typeof value !== "number";
+	const ends = range ? [...value] : [value];
+	const emit = (next) => {
+		if (range) {
+			const from = next[0];
+			const to = next[1];
+			if (from === void 0 || to === void 0) return;
+			onChange([from, to]);
+			return;
+		}
+		const single = next[0];
+		if (single === void 0) return;
+		onChange(single);
+	};
+	const pressed = React.useRef(false);
+	const active = React.useRef(0);
+	const turn = React.useRef(null);
+	const thumbs = React.useRef([]);
+	const lo = Math.min(min, max);
+	const hi = Math.max(min, max);
+	const digits = Math.max(fractionDigits(step), fractionDigits(lo), fractionDigits(hi));
+	const snap = (v) => Math.round(v / step) * step;
+	const settle = (v) => {
+		const n = Number(v.toFixed(digits));
+		return wrap ? foldValue(n, lo, hi) : clamp(n, lo, hi);
+	};
+	const setEnd = (i, next) => {
+		let v = settle(next);
+		if (range && !wrap) {
+			const other = ends[i === 0 ? 1 : 0];
+			if (other === void 0) return;
+			v = i === 0 ? Math.min(v, other) : Math.max(v, other);
+		}
+		emit(ends.map((e, j) => j === i ? v : e));
+	};
+	const sweep = endAngle - startAngle;
+	const positionOf = (v) => valueToAngle(v, min, max, startAngle, endAngle);
+	const locate = (el, x, y) => {
+		const { angle, reach } = angleAt(el, x, y);
+		return {
+			at: angle,
+			reach
+		};
+	};
+	const valueAt = (at) => snap(angleToValue(at, min, max, startAngle, endAngle));
+	const nearest = (at, under) => {
+		if (!range) return 0;
+		const distances = ends.map((e) => turnBetween(at, positionOf(e)));
+		const a = distances[0] ?? Infinity;
+		const b = distances[1] ?? Infinity;
+		if (a !== b) return a < b ? 0 : 1;
+		return under > (ends[1] ?? under) ? 1 : 0;
+	};
+	const onPointerDown = (e) => {
+		if (disabled) return;
+		const el = e.currentTarget;
+		const { at, reach } = locate(el, e.clientX, e.clientY);
+		const face = reach < FACE;
+		if (knob) {
+			el.setPointerCapture(e.pointerId);
+			turn.current = {
+				at,
+				base: ends,
+				by: 0
+			};
+			return;
+		}
+		if (face) {
+			el.setPointerCapture(e.pointerId);
+			pressed.current = true;
+			return;
+		}
+		el.setPointerCapture(e.pointerId);
+		const under = valueAt(at);
+		active.current = nearest(at, under);
+		if (range) {
+			e.preventDefault();
+			const thumb = thumbs.current[active.current];
+			if (thumb) {
+				thumb.dataset.pointer = "";
+				thumb.focus({ preventScroll: true });
+			}
+		}
+		setEnd(active.current, under);
+	};
+	const onPointerMove = (e) => {
+		if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+		if (pressed.current) return;
+		const t = turn.current;
+		if (t) {
+			const { at, reach } = locate(e.currentTarget, e.clientX, e.clientY);
+			if (reach < HUB) return;
+			const delta = (at - t.at + 540) % 360 - 180;
+			let by = t.by + delta / sweep * (max - min);
+			if (!wrap) by = clamp(by, lo - Math.min(...t.base), hi - Math.max(...t.base));
+			turn.current = {
+				...t,
+				at,
+				by
+			};
+			emit(t.base.map((v) => settle(v + snap(by))));
+			return;
+		}
+		const { at } = locate(e.currentTarget, e.clientX, e.clientY);
+		setEnd(active.current, valueAt(at));
+	};
+	const onPointerUp = () => {
+		if (pressed.current) onPress?.();
+		pressed.current = false;
+		turn.current = null;
+	};
+	const onPointerCancel = () => {
+		pressed.current = false;
+		turn.current = null;
+	};
+	const keyDown = (i) => (e) => {
+		delete e.currentTarget.dataset.pointer;
+		if (disabled) return;
+		const v = ends[i];
+		if (v === void 0) return;
+		const big = (max - min) / 10;
+		const moves = {
+			ArrowUp: v + step,
+			ArrowRight: v + step,
+			ArrowDown: v - step,
+			ArrowLeft: v - step,
+			PageUp: v + big,
+			PageDown: v - big,
+			Home: min,
+			End: max
+		};
+		if (e.key in moves) {
+			e.preventDefault();
+			const next = moves[e.key];
+			if (next === void 0) return;
+			setEnd(i, next);
+		} else if ((e.key === "Enter" || e.key === " ") && onPress) {
+			e.preventDefault();
+			onPress();
+		}
+	};
+	const setThumbRef = (i) => (el) => {
+		thumbs.current[i] = el;
+	};
+	const handleThumbBlur = (e) => {
+		delete e.currentTarget.dataset.pointer;
+	};
+	const slider = (i) => {
+		const texts = valueText;
+		return {
+			role: "slider",
+			tabIndex: disabled ? -1 : 0,
+			"aria-label": range ? thumbLabels?.[i] ?? `${label} ${i === 0 ? "start" : "end"}` : label,
+			"aria-valuemin": range && !wrap && i === 1 ? ends[0] : min,
+			"aria-valuemax": range && !wrap && i === 0 ? ends[1] : max,
+			"aria-valuenow": ends[i],
+			"aria-valuetext": typeof texts === "string" ? texts : texts?.[i],
+			"aria-disabled": disabled ? "true" : "false",
+			onKeyDown: keyDown(i)
+		};
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...range ? {
+			role: "group",
+			"aria-label": label
+		} : slider(0),
+		"data-slot": "gauge-control",
+		"data-disabled": disabled ? "true" : "false",
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		className: clsx(gauge_module_default.Control, className),
+		children: [children, range && ends.map((_, i) => /* @__PURE__ */ jsx("div", {
+			ref: setThumbRef(i),
+			...slider(i),
+			onBlur: handleThumbBlur,
+			className: gauge_module_default.VisuallyHidden
+		}, i === 0 ? "start" : "end"))]
+	});
+};
+//#endregion
+export { GaugeControl };

package/dist/components/gauge/demos/_shared.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode } from 'react';
+/** Story/demo dial frame — keep demos square-ish in Storybook. */
+export declare const dialWrap: CSSProperties;
+export declare function DialFrame({ children }: {
+    children: ReactNode;
+}): import('react').JSX.Element;
+export declare const RADIUS = 200;
+/**
+ * Upstream template pads use **y-up** fractions of radius (studio
+ * `lib/gauge-panels.ts`: `x * RADIUS`, `y: -y * RADIUS`). SVG is y-down.
+ * Pass template `{x,y}` verbatim — never negate yourself.
+ */
+export declare const pos: (x: number, y: number, radius?: number) => {
+    x: number;
+    y: number;
+};
+/** Radial length only (ticks offset, etc.) — no axis flip. */
+export declare const px: (fraction: number, radius?: number) => number;
+/** Map upstream `token("muted")` → contrast (never `--global-muted`). */
+export declare const TOKEN: {
+    readonly foreground: "var(--global-foreground)";
+    readonly primary: "var(--global-primary)";
+    readonly contrast: "var(--global-contrast)";
+    readonly muted: "var(--global-muted)";
+    readonly background: "var(--global-background)";
+    readonly red: "var(--highlight-red)";
+    readonly green: "var(--highlight-green)";
+};

package/dist/components/gauge/demos/activity-ring.d.ts

@@ -0,0 +1,9 @@
+type ActivityRingDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream rings/activity-ring — full-circle move kcal ring. */
+export declare function ActivityRingDemo({ value, min, max, label }: ActivityRingDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/air-quality.d.ts

@@ -0,0 +1,9 @@
+type AirQualityDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/air-quality — AQI half-dial with cutoff band + marks. */
+export declare function AirQualityDemo({ value, min, max, label }: AirQualityDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/analog-dial.d.ts

@@ -0,0 +1,9 @@
+type AnalogDialDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/analog-dial — major/minor ticks, line needle; no track/arc. */
+export declare function AnalogDialDemo({ value, min, max, label }: AnalogDialDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/battery.d.ts

@@ -0,0 +1,9 @@
+type BatteryDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream rings/battery — EV charge ring; limit notch via invisible zones. */
+export declare function BatteryDemo({ value, min, max, label }: BatteryDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/chronograph.d.ts

@@ -0,0 +1,9 @@
+type ChronographDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream composed/chronograph — 60s sweep + 30m register inset above six. */
+export declare function ChronographDemo({ value, min, max, label }: ChronographDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/clock.d.ts

@@ -0,0 +1,9 @@
+type ClockDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/clock — 12h dial, hour + minute hands; no track/arc. */
+export declare function ClockDemo({ value, min, max, label }: ClockDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/compass.d.ts

@@ -0,0 +1,9 @@
+type CompassDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/compass — full bezel, compass needle, N/E/S/W labels. */
+export declare function CompassDemo({ value, min, max, label }: CompassDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/data-usage.d.ts

@@ -0,0 +1,9 @@
+type DataUsageDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/data-usage — monthly data dial with value tooltip. */
+export declare function DataUsageDemo({ value, min, max, label }: DataUsageDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/dimmer.d.ts

@@ -0,0 +1,9 @@
+type DimmerDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/dimmer — broad brightness sweep with grip dot. */
+export declare function DimmerDemo({ value, min, max, label }: DimmerDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/fuel.d.ts

@@ -0,0 +1,9 @@
+type FuelDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/fuel — E/F dial, low-fuel zone, pointer needle; no track/arc. */
+export declare function FuelDemo({ value, min, max, label }: FuelDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/heart-rate.d.ts

@@ -0,0 +1,9 @@
+type HeartRateDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/heart-rate — zone-coloured arc + cutoff band. */
+export declare function HeartRateDemo({ value, min, max, label }: HeartRateDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/internet-speed.d.ts

@@ -0,0 +1,9 @@
+type InternetSpeedDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/internet-speed — thick primary arc, minor ticks, download readout. */
+export declare function InternetSpeedDemo({ value, min, max, label }: InternetSpeedDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/nested-rings.d.ts

@@ -0,0 +1,11 @@
+type NestedRingsDemoProps = {
+    value?: number;
+    exercise?: number;
+    stand?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream composed/nested-rings — three concentric full-circle rings. */
+export declare function NestedRingsDemo({ value, exercise, stand, min, max, label, }: NestedRingsDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/orrery.d.ts

@@ -0,0 +1,12 @@
+type OrreryDemoProps = {
+    value?: number;
+    earth?: number;
+    venus?: number;
+    mercury?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream composed/orrery — four orbits + sun hub; stub needle hidden under hub. */
+export declare function OrreryDemo({ value, earth, venus, mercury, min, max, label, }: OrreryDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/power-meter.d.ts

@@ -0,0 +1,9 @@
+type PowerMeterDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/power-meter — half dial about zero; out left, in right. */
+export declare function PowerMeterDemo({ value, min, max, label }: PowerMeterDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/progress-ring.d.ts

@@ -0,0 +1,9 @@
+type ProgressRingDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream rings/progress-ring — full circle primary fill with %. */
+export declare function ProgressRingDemo({ value, min, max, label }: ProgressRingDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/range.d.ts

@@ -0,0 +1,10 @@
+import { GaugeRange } from '..';
+type RangeDemoProps = {
+    value?: GaugeRange;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/range — comfort band with dots at both ends. */
+export declare function RangeDemo({ value, min, max, label }: RangeDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/saas-metric.d.ts

@@ -0,0 +1,9 @@
+type SaasMetricDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/saas-metric — half-ring conversion rate with % unit. */
+export declare function SaasMetricDemo({ value, min, max, label }: SaasMetricDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/segments.d.ts

@@ -0,0 +1,9 @@
+type SegmentsDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/segments — tick-fill ring, no track/arc. */
+export declare function SegmentsDemo({ value, min, max, label }: SegmentsDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/simple.d.ts

@@ -0,0 +1,9 @@
+type SimpleDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/simple — track + arc + large centered value. */
+export declare function SimpleDemo({ value, min, max, label }: SimpleDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/speed-fuel.d.ts

@@ -0,0 +1,10 @@
+type SpeedFuelDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    fuel?: number;
+    label?: string;
+};
+/** Upstream composed/speed-fuel — speed dial + fuel inset in the bottom gap. */
+export declare function SpeedFuelDemo({ value, min, max, fuel, label, }: SpeedFuelDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/speedometer.d.ts

@@ -0,0 +1,9 @@
+type SpeedometerDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/speedometer — zones, ticks, pointer needle; no track/arc. */
+export declare function SpeedometerDemo({ value, min, max, label }: SpeedometerDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/sprint.d.ts

@@ -0,0 +1,9 @@
+type SprintDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream composed/sprint — empty host places four inset progress rings. */
+export declare function SprintDemo({ value, min, max, label }: SprintDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/sun-path.d.ts

@@ -0,0 +1,9 @@
+type SunPathDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/sun-path — daylight half-arc with sun dot on the head. */
+export declare function SunPathDemo({ value, min, max, label }: SunPathDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/system.d.ts

@@ -0,0 +1,11 @@
+type SystemDemoProps = {
+    value?: number;
+    mem?: number;
+    disk?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream composed/system — CPU half dial + MEM/DISK insets in lower half. */
+export declare function SystemDemo({ value, mem, disk, min, max, label }: SystemDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/tachometer.d.ts

@@ -0,0 +1,9 @@
+type TachometerDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream needles/tachometer — redline zones, ticks, pointer needle; no track/arc. */
+export declare function TachometerDemo({ value, min, max, label }: TachometerDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/temperature.d.ts

@@ -0,0 +1,9 @@
+type TemperatureDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/temperature — zone-coloured arc, cutoff band, inward ticks + dot. */
+export declare function TemperatureDemo({ value, min, max, label }: TemperatureDemoProps): import('react').JSX.Element;
+export {};

package/dist/components/gauge/demos/thermostat.d.ts

@@ -0,0 +1,9 @@
+type ThermostatDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Upstream arcs/thermostat — segmented heating band with handle dot. */
+export declare function ThermostatDemo({ value, min, max, label }: ThermostatDemoProps): import('react').JSX.Element;
+export {};