@viraui/react 2026.10.0 → 2026.11.0-next.0

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,8 @@
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+//#endregion
+export { __commonJSMin, __require };

package/dist/catalog.json

@@ -122,6 +122,12 @@
       "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders. Memory/CPU-heavy — use sparingly; prefer one focal instance per view.",
       "agentDocs": "./specs/components/glow/meta.xml"
     },
+    {
+      "id": "gauge",
+      "name": "Gauge",
+      "summary": "Composable round dial for determinate readings and optional polar slider control, built from SVG parts sharing one domain context. Linear bars stay on Slider.",
+      "agentDocs": "./specs/components/gauge/meta.xml"
+    },
     {
       "id": "grid",
       "name": "Grid",
@@ -134,6 +140,12 @@
       "summary": "Icon-only button that shares Button visual chrome (--vui-button-* CSS) and requires an accessible name through aria-label or aria-labelledby.",
       "agentDocs": "./specs/components/icon-button/meta.xml"
     },
+    {
+      "id": "icon-meter",
+      "name": "IconMeter",
+      "summary": "Display-only discrete icon row for scores and levels (empty / half / full), with APG Meter semantics. Distinct from track Meter, arc Gauge, and LinearProgress.",
+      "agentDocs": "./specs/components/icon-meter/meta.xml"
+    },
     {
       "id": "linear-progress",
       "name": "LinearProgress",

package/dist/components/avatar/avatar.d.ts

@@ -32,6 +32,12 @@ export type AvatarProps = React.ComponentPropsWithRef<'span'> & {
      * @defaultValue 's'
      */
     size?: 'xs' | 's' | 'm' | 'l';
+    /**
+     * Controls native image lazy-loading on the avatar `<img>`.
+     *
+     * @defaultValue 'eager'
+     */
+    loading?: React.ComponentProps<'img'>['loading'];
     /**
      * Ref forwarded to the rendered avatar root element.
      *

package/dist/components/avatar/avatar.js

@@ -11,7 +11,7 @@ var fallbackTextSizeByAvatarSize = {
 	m: "s",
 	l: "2xl"
 };
-var Avatar$1 = ({ alt = "", className, fallback, ref, size = "s", src, ...otherProps }) => {
+var Avatar$1 = ({ alt = "", className, fallback, loading = "eager", ref, size = "s", src, ...otherProps }) => {
 	const hasImage = Boolean(src);
 	return /* @__PURE__ */ jsxs(Avatar.Root, {
 		...otherProps,
@@ -23,7 +23,7 @@ var Avatar$1 = ({ alt = "", className, fallback, ref, size = "s", src, ...otherP
 		children: [hasImage ? /* @__PURE__ */ jsx(Avatar.Image, {
 			draggable: false,
 			decoding: "async",
-			loading: "eager",
+			loading,
 			alt,
 			className: avatar_module_default.Image,
 			src

package/dist/components/badge/badge.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:.5rem}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --vui-badge-position-x{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --vui-badge-position-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__badge-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}@property --__badge-motion-delay{syntax:"<time>";inherits:true;initial-value:.16s}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--__badge-gap:calc(var(--vui-badge-size) * 0.25);--__badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--__badge-gap));position:relative;display:inline-flex;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{--__corner-shape:round;content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--__badge-mask-size) * var(--__badge-hole-progress)),red calc(var(--__badge-mask-size) * var(--__badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--__badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}@media (prefers-reduced-motion:reduce){&:after{transform:none}&>*{--__badge-hole-progress:1}&[data-exit]>*{--__badge-hole-progress:0}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--__badge-hole-progress:0}to{--__badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--__badge-hole-progress:1}to{--__badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:.5rem}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --vui-badge-position-x{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --vui-badge-position-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__badge-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}@property --__badge-motion-delay{syntax:"<time>";inherits:true;initial-value:.08s}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--__badge-gap:calc(var(--vui-badge-size) * 0.25);--__badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--__badge-gap));--__badge-motion-delay:calc(var(--duration-fast) * 0.4);position:relative;display:inline-flex;inline-size:max-content;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{--__corner-shape:round;content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--__badge-mask-size) * var(--__badge-hole-progress)),red calc(var(--__badge-mask-size) * var(--__badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--__badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}@media (prefers-reduced-motion:reduce){&:not([data-exit]):after,&[data-exit]:after{transform:none;animation:none}&:not([data-exit])>*{--__badge-hole-progress:1;animation:none}&[data-exit]>*{--__badge-hole-progress:0;animation:none}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--__badge-hole-progress:0}to{--__badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--__badge-hole-progress:1}to{--__badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}

package/dist/components/button/button.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 500;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--vui-button-height) * 0.45);--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 500;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m)}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}

package/dist/components/dialog/dialog-sheet.d.ts

@@ -38,7 +38,7 @@ export type DialogSheetProps = {
      *
      * @defaultValue `start`
      */
-    headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
+    headerAlign?: 'start' | 'center' | 'end';
     /**
      * Whether to show the close button.
      *

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

@@ -0,0 +1,134 @@
+import { StrokeCap, Zone } from './utils';
+import * as React from 'react';
+type ArcStyleProps = {
+    /**
+     * Stroke width in SVG units.
+     * @defaultValue 24
+     */
+    width?: number;
+    /**
+     * Stroke colour. Track defaults to contrast; fill arcs to primary.
+     * @defaultValue `var(--global-contrast)` on `GaugeTrack`; `var(--global-primary)` on fill arcs
+     */
+    color?: string;
+    /**
+     * Stroke opacity.
+     * @defaultValue 1
+     */
+    opacity?: number;
+    /**
+     * Stroke line cap.
+     * @defaultValue `'round'` on track/arc; `'butt'` on stack/zones
+     */
+    cap?: StrokeCap;
+    /**
+     * Offset from the scale's reference line: radial on a dial, across a
+     * bar. Positive moves outward, away from the centre or up from a bar.
+     * @defaultValue 0
+     */
+    offset?: number;
+};
+/** The whole scale as a background: a dial's full sweep, a bar's length. */
+export declare const GaugeTrack: React.FC<ArcStyleProps>;
+export type GaugeArcProps = ArcStyleProps & {
+    /**
+     * Domain value the arc is anchored at. Defaults to `min`, or to the start
+     * of the gauge's range.
+     * @defaultValue gauge `from` (min on a single value)
+     */
+    from?: number;
+    /**
+     * Domain value the arc ends at. Defaults to the current value.
+     * @defaultValue current gauge `value`
+     */
+    to?: number;
+    /**
+     * Grow the arc back from the end of the sweep instead of forward from its
+     * start. The length is the same; only the end it is anchored to changes,
+     * which is what a dial filling towards its start needs.
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    /**
+     * Carry the arc on round a closed ring instead of clamping it at the
+     * domain: a span from eleven at night to two in the morning crosses the
+     * seam in one piece. The arc runs forward from `from` however far past
+     * `max` the `to` reaches.
+     * @defaultValue false
+     */
+    wrap?: boolean;
+};
+/**
+ * The filled arc, from `min` (or `from`) up to the current value (or `to`).
+ * The ends may arrive either way round: an arc anchored above the value
+ * grows back towards it, which is what a dial centred on zero needs. On a
+ * gauge showing a range it fills between the two ends, and on a wrapped one
+ * runs forward from the start across the seam where the range does.
+ */
+export declare const GaugeArc: React.FC<GaugeArcProps>;
+export type GaugeStackPart = {
+    /**
+     * Share of the fill. Weighted parts split the value between them.
+     * @defaultValue 0 when omitted (fixed `to` parts use cutoff instead)
+     */
+    weight?: number;
+    /**
+     * Fixed upper cutoff in domain units, for parts that stand still while
+     * the value sweeps across them. Runs from the end of the part before.
+     * @defaultValue derived from weight share of fill
+     */
+    to?: number;
+    /**
+     * Stroke colour for this part.
+     */
+    color: string;
+    /**
+     * Per-part stroke opacity.
+     * @defaultValue inherits path paint (undefined)
+     */
+    opacity?: number;
+};
+export type GaugeStackProps = Omit<ArcStyleProps, 'color'> & {
+    /**
+     * Ordered stack segments (weights and/or fixed cutoffs).
+     */
+    parts: GaugeStackPart[];
+    /**
+     * Domain value the stack starts at. Defaults to `min`, or to the start of
+     * the gauge's range.
+     * @defaultValue gauge `from`
+     */
+    from?: number;
+};
+/**
+ * The value arc split into parts that sweep as one. A part with a `weight`
+ * takes that share of the fill, so a memory ring keeps wired, app and cache
+ * in proportion frame by frame; a part with a fixed `to` runs from the end
+ * of the one before and is clipped to the value, so a night of sleep stages
+ * draws on in order as the dial sweeps in. Use one kind or the other in a
+ * single stack.
+ */
+export declare const GaugeStack: React.FC<GaugeStackProps>;
+export type GaugeZonesProps = Omit<ArcStyleProps, 'color'> & {
+    /**
+     * Ordered cutoffs. Each zone runs from the previous zone's `to` (or `min`)
+     * up to its own `to`; the last zone always extends to `max`.
+     */
+    zones: Zone[];
+    /**
+     * Gap between neighbouring zones, in the scale's units: degrees round a
+     * dial, SVG units along a bar.
+     * @defaultValue 0
+     */
+    gap?: number;
+    /**
+     * Cap on the two outer ends of the whole band (the start of the first zone
+     * and the end of the last). `cap` covers the joints between zones. Defaults
+     * to `cap`, so a single value still rounds or squares every end.
+     * @defaultValue same as `cap`
+     */
+    endCap?: StrokeCap;
+};
+/** Coloured bands marking the cutoffs of the domain. */
+export declare const GaugeZones: React.FC<GaugeZonesProps>;
+export {};

package/dist/components/gauge/arcs.js

@@ -0,0 +1,145 @@
+"use client";
+import { foldValue } from "./math.js";
+import { useGauge } from "./context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/gauge/arcs.tsx
+var CONTRAST = "var(--global-contrast)";
+var PRIMARY = "var(--global-primary)";
+/** The whole scale as a background: a dial's full sweep, a bar's length. */
+var GaugeTrack = ({ width = 24, color = CONTRAST, opacity = 1, cap = "round", offset = 0 }) => {
+	const { scale } = useGauge();
+	return /* @__PURE__ */ jsx("path", {
+		d: scale.path(scale.start, scale.end, offset),
+		fill: "none",
+		stroke: color,
+		strokeOpacity: opacity,
+		strokeWidth: width,
+		strokeLinecap: cap
+	});
+};
+/**
+* The filled arc, from `min` (or `from`) up to the current value (or `to`).
+* The ends may arrive either way round: an arc anchored above the value
+* grows back towards it, which is what a dial centred on zero needs. On a
+* gauge showing a range it fills between the two ends, and on a wrapped one
+* runs forward from the start across the seam where the range does.
+*/
+var GaugeArc = ({ width = 24, color = PRIMARY, opacity = 1, cap = "round", offset = 0, from, to, reverse = false, wrap = false }) => {
+	const gauge = useGauge();
+	const { min, max, value, scale, positionOf } = gauge;
+	const tail = from ?? gauge.from;
+	let head = to ?? value;
+	const forward = gauge.range && gauge.wrap && from === void 0 && to === void 0;
+	if (forward) head = tail + foldValue(head - tail, 0, Math.abs(max - min));
+	const lo = Math.min(tail, head);
+	const hi = Math.max(tail, head);
+	let a0;
+	let a1;
+	if (wrap || forward) {
+		const span = max - min;
+		if (span <= 0) return null;
+		const sweep = scale.end - scale.start;
+		const perUnit = sweep / span;
+		a0 = scale.start + ((lo - min) % span + span) % span * perUnit;
+		a1 = a0 + Math.min((hi - lo) * perUnit, sweep);
+	} else [a0, a1] = reverse ? [positionOf(max - (hi - lo)), positionOf(max)] : [positionOf(lo), positionOf(hi)];
+	if (a1 <= a0) return null;
+	return /* @__PURE__ */ jsx("path", {
+		d: scale.path(a0, a1, offset),
+		fill: "none",
+		stroke: color,
+		strokeOpacity: opacity,
+		strokeWidth: width,
+		strokeLinecap: cap
+	});
+};
+/**
+* The value arc split into parts that sweep as one. A part with a `weight`
+* takes that share of the fill, so a memory ring keeps wired, app and cache
+* in proportion frame by frame; a part with a fixed `to` runs from the end
+* of the one before and is clipped to the value, so a night of sleep stages
+* draws on in order as the dial sweeps in. Use one kind or the other in a
+* single stack.
+*/
+var GaugeStack = ({ parts, width = 24, opacity = 1, cap = "butt", offset = 0, from }) => {
+	const gauge = useGauge();
+	const { value, scale, positionOf } = gauge;
+	if (parts.length === 0) return null;
+	const total = parts.reduce((sum, p) => sum + (p.weight ?? 0), 0);
+	const start = from ?? gauge.from;
+	const fill = value - start;
+	const ends = parts.reduce((acc, p) => [...acc, p.to ?? (acc.at(-1) ?? start) + (total > 0 ? fill * (p.weight ?? 0) / total : 0)], []);
+	return /* @__PURE__ */ jsx("g", {
+		opacity,
+		children: parts.map((p, i) => {
+			const end = ends[i];
+			if (end === void 0) return null;
+			const prev = i === 0 ? start : ends[i - 1];
+			if (prev === void 0) return null;
+			const a0 = positionOf(prev);
+			const a1 = positionOf(Math.min(end, value));
+			if (a1 <= a0) return null;
+			return /* @__PURE__ */ jsx("path", {
+				d: scale.path(a0, a1, offset),
+				fill: "none",
+				stroke: p.color,
+				strokeOpacity: p.opacity,
+				strokeWidth: width,
+				strokeLinecap: cap
+			}, end);
+		})
+	});
+};
+/** Coloured bands marking the cutoffs of the domain. */
+var GaugeZones = ({ zones, width = 8, opacity = 1, cap = "butt", endCap = cap, offset = 0, gap = 0 }) => {
+	const { min, max, scale, positionOf } = useGauge();
+	if (zones.length === 0) return null;
+	const dot = (position, color, key) => {
+		const { x, y } = scale.point(position, offset);
+		return /* @__PURE__ */ jsx("circle", {
+			cx: x,
+			cy: y,
+			r: width / 2,
+			fill: color
+		}, key);
+	};
+	const segments = zones.reduce((acc, zone, i) => {
+		const prev = acc[i - 1];
+		const from = i === 0 || !prev ? min : prev.to;
+		const to = i === zones.length - 1 ? max : Math.min(Math.max(zone.to, from), max);
+		acc.push({
+			from,
+			to
+		});
+		return acc;
+	}, []);
+	return /* @__PURE__ */ jsx("g", {
+		opacity,
+		children: zones.map((zone, i) => {
+			const isFirst = i === 0;
+			const isLast = i === zones.length - 1;
+			const segment = segments[i];
+			if (!segment) return null;
+			const { from, to } = segment;
+			const a0 = positionOf(from) + (isFirst ? 0 : gap / 2);
+			const a1 = positionOf(to) - (isLast ? 0 : gap / 2);
+			if (a1 <= a0) return null;
+			const startCap = isFirst ? endCap : cap;
+			const finishCap = isLast ? endCap : cap;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("path", {
+					d: scale.path(a0, a1, offset),
+					fill: "none",
+					stroke: zone.color,
+					strokeWidth: width,
+					strokeLinecap: "butt"
+				}),
+				startCap === "round" && dot(a0, zone.color, "start"),
+				finishCap === "round" && dot(a1, zone.color, "end")
+			] }, to);
+		})
+	});
+};
+//#endregion
+export { GaugeArc, GaugeStack, GaugeTrack, GaugeZones };

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

@@ -0,0 +1,134 @@
+import { GaugeScale } from './scale';
+import { GaugeTransition } from './transition';
+import * as React from 'react';
+/**
+ * A span of the domain rather than a single reading: a forecast's low and
+ * high, a target band, a sleep window. Pass it as a gauge's `value` and the
+ * arc fills between the two ends.
+ */
+export type GaugeRange = readonly [from: number, to: number];
+/** The reading and domain, the same on every gauge whatever its shape. */
+export type GaugeReading = {
+    /**
+     * Value being drawn this frame, clamped to the domain. Animated when the
+     * gauge has a transition. For a range, its far end.
+     */
+    value: number;
+    /** Value the gauge is heading for; equals `value` once settled. */
+    target: number;
+    /**
+     * Where a range starts, animated alongside `value`. On a single value it
+     * is `min`, so the stretch from here to `value` is the fill either way.
+     */
+    from: number;
+    /** Where `from` is heading for. */
+    targetFrom: number;
+    /** Whether the gauge shows a range rather than a single value. */
+    range: boolean;
+    /**
+     * Whether the domain is a closed ring, as the root's `wrap` sets. A range
+     * on one runs forward from `from` to `value`, across the seam if need be.
+     */
+    wrap: boolean;
+    min: number;
+    max: number;
+};
+/** What a round `Gauge` adds: the angles and radius its scale is bent to. */
+export type GaugeRoundShape = {
+    shape: 'round';
+    startAngle: number;
+    endAngle: number;
+    /** Radius of the gauge's reference circle in SVG units. */
+    radius: number;
+    /** Maps a domain value onto a gauge angle. The same as `positionOf`. */
+    angleOf: (value: number) => number;
+};
+export type GaugeContextValue = GaugeReading & GaugeRoundShape & {
+    /**
+     * The arc the domain is laid out along, which every part that draws
+     * along it asks for its geometry.
+     */
+    scale: GaugeScale;
+    /** Maps a domain value onto a position on the scale. */
+    positionOf: (value: number) => number;
+};
+export declare const GaugeContext: React.Context<GaugeContextValue | null>;
+export declare const useGauge: () => GaugeContextValue;
+/**
+ * Alias of `useGauge` for parts that historically required a round root
+ * (needle). All public gauges are round; linear bars stay on `Slider`.
+ */
+export declare const useRoundGauge: (part: string) => GaugeContextValue;
+/** The reading, domain and animation every gauge root takes. */
+export type GaugeReadingProps = {
+    /**
+     * The reading, or a `[from, to]` range to fill between. On an open domain
+     * the two ends are put in order; on a wrapped one the range runs forward
+     * from `from`, so `[22, 6]` on a 24-hour ring is the night, not the day.
+     * @defaultValue Required — no default.
+     */
+    value: number | GaugeRange;
+    /**
+     * Lower bound of the domain.
+     * @defaultValue 0
+     */
+    min?: number;
+    /**
+     * Upper bound of the domain.
+     * @defaultValue 100
+     */
+    max?: number;
+    /**
+     * Animate towards new values. `true` uses a gentle spring; pass a
+     * `GaugeTransition` to tune it or switch to a timed tween. Omit for
+     * instant updates.
+     * @defaultValue undefined — instant updates
+     */
+    transition?: GaugeTransition | boolean;
+    /**
+     * Where the value starts on mount when animating, for a sweep-in effect.
+     * A single number starts both ends of a range there, so it opens out.
+     * @defaultValue undefined — starts at the target value
+     */
+    initialValue?: number | GaugeRange;
+    /**
+     * Treat the domain as circular, as a compass rose or clock face is: the
+     * value is mapped into the domain modulo its span and animates the
+     * shortest way round, so a heading crossing north never swings the long
+     * way back. Meant for closed rings, where `min` and `max` read the same.
+     * @defaultValue false
+     */
+    wrap?: boolean;
+};
+/** The domain, geometry and animation a round gauge takes. */
+export type GaugeDomainProps = GaugeReadingProps & {
+    /**
+     * Gauge degrees, clockwise from six o'clock — sweep start.
+     * @defaultValue 40
+     */
+    startAngle?: number;
+    /**
+     * Gauge degrees, clockwise from six o'clock — sweep end.
+     * @defaultValue 320
+     */
+    endAngle?: number;
+    /**
+     * Reference radius in SVG units. Every child positions itself against this.
+     * @defaultValue 200
+     */
+    radius?: number;
+    /**
+     * Turn the whole scale this many degrees clockwise, the way a compass card
+     * turns under a fixed lubber line. Animated by `transition`, always the
+     * shortest way round.
+     * @defaultValue 0
+     */
+    rotate?: number;
+};
+/**
+ * The context a round gauge root publishes to its children. Shared by
+ * `Gauge` and `GaugeInset` so a gauge nested inside another animates and
+ * maps values exactly like a top-level one, and so the defaults live in one
+ * place.
+ */
+export declare const useGaugeContextValue: ({ startAngle, endAngle, radius, rotate, ...domain }: GaugeDomainProps) => GaugeContextValue & GaugeRoundShape;

package/dist/components/gauge/context.js

@@ -0,0 +1,83 @@
+"use client";
+import { clamp, foldValue, valueToAngle } from "./math.js";
+import { arcScale } from "./scale.js";
+import { useAnimatedValue } from "./use-animated-value.js";
+import * as React from "react";
+//#region src/components/gauge/context.tsx
+var GaugeContext = React.createContext(null);
+var useGauge = () => {
+	const ctx = React.useContext(GaugeContext);
+	if (!ctx) throw new Error("Gauge primitives must be rendered inside <Gauge>.");
+	return ctx;
+};
+/**
+* Alias of `useGauge` for parts that historically required a round root
+* (needle). All public gauges are round; linear bars stay on `Slider`.
+*/
+var useRoundGauge = (part) => {
+	return useGauge();
+};
+/**
+* Resolves the domain and follows the value: the half of a gauge's context
+* that is the same whatever its shape.
+*/
+var useGaugeReading = ({ value, min = 0, max = 100, transition, initialValue, wrap = false }) => {
+	const lo = Math.min(min, max);
+	const hi = Math.max(min, max);
+	const span = hi - lo;
+	const fold = (v) => foldValue(v, lo, hi);
+	const settle = wrap ? fold : (v) => clamp(v, lo, hi);
+	const range = typeof value !== "number";
+	const ends = (pair) => wrap ? [settle(pair[0]), settle(pair[1])] : [settle(Math.min(pair[0], pair[1])), settle(Math.max(pair[0], pair[1]))];
+	const [targetFrom, target] = range ? ends(value) : [min, settle(value)];
+	let initialFrom;
+	let initialTo;
+	if (initialValue === void 0) {
+		initialFrom = void 0;
+		initialTo = void 0;
+	} else if (typeof initialValue === "number") {
+		initialFrom = settle(initialValue);
+		initialTo = settle(initialValue);
+	} else if (range) [initialFrom, initialTo] = ends(initialValue);
+	else {
+		initialFrom = void 0;
+		initialTo = settle(initialValue[1]);
+	}
+	const shown = useAnimatedValue(target, transition, span, initialTo, wrap);
+	const shownFrom = useAnimatedValue(targetFrom, transition, span, range ? initialFrom : void 0, wrap);
+	return {
+		value: wrap ? fold(shown) : shown,
+		target,
+		from: range && wrap ? fold(shownFrom) : shownFrom,
+		targetFrom,
+		range,
+		wrap,
+		min,
+		max
+	};
+};
+/**
+* The context a round gauge root publishes to its children. Shared by
+* `Gauge` and `GaugeInset` so a gauge nested inside another animates and
+* maps values exactly like a top-level one, and so the defaults live in one
+* place.
+*/
+var useGaugeContextValue = ({ startAngle = 40, endAngle = 320, radius = 200, rotate = 0, ...domain }) => {
+	const reading = useGaugeReading(domain);
+	const turned = useAnimatedValue(rotate, domain.transition, 360, void 0, true);
+	const a0 = startAngle + turned;
+	const a1 = endAngle + turned;
+	const angleOf = (v) => valueToAngle(v, reading.min, reading.max, a0, a1);
+	return {
+		...reading,
+		shape: "round",
+		scale: arcScale(radius, a0, a1),
+		positionOf: angleOf,
+		startAngle: a0,
+		endAngle: a1,
+		radius,
+		angleOf
+	};
+};
+//#endregion
+export { GaugeContext, useGauge, useGaugeContextValue, useRoundGauge };