@viraui/react 2026.10.0 → 2026.11.0-next.0

package/dist/components/gauge/use-animated-value.js

@@ -0,0 +1,111 @@
+"use client";
+import { easingFunction, resolveTransition, springPhysics, stepSpring } from "./transition.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/gauge/use-animated-value.ts
+/** Folds a change into [-span/2, span/2), the short way round a circle. */
+var shortestDelta = (delta, span) => {
+	const s = Math.max(span, 1e-9);
+	return ((delta + s / 2) % s + s) % s - s / 2;
+};
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Follows `target` with the given transition and returns the value to draw
+* this frame. With no transition it returns `target` as is and renders
+* nothing extra. Honours `prefers-reduced-motion` by snapping.
+*
+* `span` is the size of the domain and sets the rest threshold. `initial` is
+* where the value starts on mount, for a sweep-in from the minimum. `wrap`
+* treats the domain as circular: every change is followed the shortest way
+* round, so a heading crossing north never swings the long way back. The
+* returned value may then sit outside the domain mid-flight; map it back
+* with a modulo.
+*/
+var useAnimatedValue = (target, transition, span, initial, wrap) => {
+	const enabled = Boolean(transition);
+	const [display, setDisplay] = useState(initial ?? target);
+	const spring = useRef({
+		value: initial ?? target,
+		velocity: 0
+	});
+	const start = initial ?? target;
+	const [series, setSeries] = useState(() => ({
+		raw: target,
+		goal: wrap ? start + shortestDelta(target - start, span) : target
+	}));
+	if (wrap && (target !== series.raw || !enabled && target !== series.goal)) setSeries(enabled ? {
+		raw: target,
+		goal: series.goal + shortestDelta(target - series.raw, span)
+	} : {
+		raw: target,
+		goal: target
+	});
+	const goal = wrap ? series.goal : target;
+	const transitionRef = useRef(transition);
+	useEffect(() => {
+		transitionRef.current = transition;
+	});
+	const configKey = JSON.stringify(transition);
+	if (!enabled && display !== target) setDisplay(target);
+	useEffect(() => {
+		if (!enabled) spring.current = {
+			value: target,
+			velocity: 0
+		};
+	}, [enabled, target]);
+	useEffect(() => {
+		const config = resolveTransition(transitionRef.current);
+		if (!config) return;
+		const precision = Math.max(span, 1e-6) * 1e-4;
+		const snap = prefersReducedMotion();
+		const restAt = target;
+		let frame = 0;
+		let last = performance.now();
+		const from = spring.current.value;
+		const startAt = last;
+		const tick = (now) => {
+			const dt = (now - last) / 1e3;
+			last = now;
+			let done;
+			if (snap) done = true;
+			else if (config.type === "spring") {
+				const physics = springPhysics(config);
+				const { state, done: springDone } = stepSpring(spring.current, goal, physics, dt, precision);
+				spring.current = state;
+				done = springDone;
+			} else {
+				const duration = Math.max(config.duration ?? .5, .001);
+				const progress = Math.min((now - startAt) / 1e3 / duration, 1);
+				const eased = easingFunction(config.ease)(progress);
+				const value = from + (goal - from) * eased;
+				spring.current = {
+					value,
+					velocity: 0
+				};
+				done = progress >= 1;
+			}
+			if (done) {
+				spring.current = {
+					value: restAt,
+					velocity: 0
+				};
+				if (wrap) setSeries((s) => s.raw === restAt && s.goal === restAt ? s : {
+					raw: restAt,
+					goal: restAt
+				});
+			}
+			setDisplay(spring.current.value);
+			if (!done) frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		goal,
+		target,
+		configKey,
+		span,
+		wrap
+	]);
+	return enabled ? display : target;
+};
+//#endregion
+export { useAnimatedValue };

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

@@ -0,0 +1,51 @@
+/**
+ * Shared vocabulary and pure helpers for the gauge primitives: stroke and
+ * font options, zones, and the formatters that turn a value into a label.
+ * Everything here is framework-free so it can be used in generated code.
+ */
+export type StrokeCap = 'round' | 'butt';
+export type FontFamily = 'sans' | 'rounded' | 'mono';
+export type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export type NeedleStyle = 'line' | 'pointer' | 'compass' | 'arrow';
+/**
+ * Which end of a range a part follows: `to`, the far end, which is the value
+ * itself on a single-value gauge, or `from`, where the range starts.
+ */
+export type GaugeEnd = 'from' | 'to';
+/** A colour for every mark alike, or one per mark worked out from its value. */
+export type ValueColor = string | ((value: number) => string);
+/** Which edge of a text sits at its position: left, centre or right. */
+export type TextAnchor = 'start' | 'middle' | 'end';
+export type Zone = {
+    /** Upper cutoff of the zone in domain units. Ignored for the last zone. */
+    to: number;
+    color: string;
+};
+/** Theme font-family CSS value for SVG `fontFamily` / `style.fontFamily`. */
+export declare const fontFamily: (family?: FontFamily) => string;
+/** Theme font-weight CSS value for SVG `fontWeight` / `style.fontWeight`. */
+export declare const fontWeight: (weight?: FontWeight) => number;
+/** Colour of the zone a value falls in, or `fallback` when there are none. */
+export declare const zoneColor: (zones: Zone[], value: number, fallback: string) => string;
+/** Cutoff values that separate neighbouring zones. */
+export declare const zoneCutoffs: (zones: Zone[]) => number[];
+/**
+ * Formats a heading in degrees as a compass point when it lands on one of the
+ * sixteen, and as degrees otherwise, so a 0–360 domain reads like a bezel:
+ * N, 30°, 60°, E, and so on.
+ */
+export declare const compassLabel: (degrees: number) => string;
+/** Formats a value in hours as a clock numeral, so 0 and 12 both read "12". */
+export declare const clockLabel: (hours: number) => string;
+/**
+ * Hours past midnight as a 24-hour clock time: 6.5 reads "06:30". Negative
+ * hours reach back into the day before, and past 24 into the day after.
+ */
+export declare const clockTime: (hours: number) => string;
+/** A duration in hours as "7h 32m". */
+export declare const durationLabel: (hours: number) => string;
+/**
+ * `color` thinned towards transparent: the one ink of a face taken down to
+ * its quieter tones, holding apart in either theme.
+ */
+export declare const fadeColor: (color: string, percent: number) => string;

package/dist/components/gauge/utils.js

@@ -0,0 +1,80 @@
+//#region src/components/gauge/utils.ts
+var FONT_FAMILY = {
+	sans: "var(--font-family-body)",
+	rounded: "var(--font-family-body)",
+	mono: "var(--font-family-mono)"
+};
+var FONT_WEIGHT = {
+	regular: 400,
+	medium: 500,
+	semibold: 600,
+	bold: 700
+};
+/** Theme font-family CSS value for SVG `fontFamily` / `style.fontFamily`. */
+var fontFamily = (family = "sans") => FONT_FAMILY[family];
+/** Theme font-weight CSS value for SVG `fontWeight` / `style.fontWeight`. */
+var fontWeight = (weight = "regular") => FONT_WEIGHT[weight];
+/** Colour of the zone a value falls in, or `fallback` when there are none. */
+var zoneColor = (zones, value, fallback) => {
+	if (zones.length === 0) return fallback;
+	for (let i = 0; i < zones.length - 1; i += 1) {
+		const zone = zones[i];
+		if (zone && value < zone.to) return zone.color;
+	}
+	return zones[zones.length - 1]?.color ?? fallback;
+};
+/** Cutoff values that separate neighbouring zones. */
+var zoneCutoffs = (zones) => zones.slice(0, -1).map((zone) => zone.to);
+var compassPoints = [
+	"N",
+	"NNE",
+	"NE",
+	"ENE",
+	"E",
+	"ESE",
+	"SE",
+	"SSE",
+	"S",
+	"SSW",
+	"SW",
+	"WSW",
+	"W",
+	"WNW",
+	"NW",
+	"NNW"
+];
+/**
+* Formats a heading in degrees as a compass point when it lands on one of the
+* sixteen, and as degrees otherwise, so a 0–360 domain reads like a bezel:
+* N, 30°, 60°, E, and so on.
+*/
+var compassLabel = (degrees) => {
+	const turn = (degrees % 360 + 360) % 360;
+	const index = Math.round(turn / 22.5) % 16;
+	const exact = Math.abs(turn - index * 22.5) < .5;
+	const point = compassPoints[index];
+	return exact && point ? point : `${Math.round(turn)}°`;
+};
+/** Formats a value in hours as a clock numeral, so 0 and 12 both read "12". */
+var clockLabel = (hours) => String((Math.round(hours) % 12 + 12) % 12 || 12);
+var pad = (n) => String(n).padStart(2, "0");
+/**
+* Hours past midnight as a 24-hour clock time: 6.5 reads "06:30". Negative
+* hours reach back into the day before, and past 24 into the day after.
+*/
+var clockTime = (hours) => {
+	const minutes = Math.round((hours % 24 + 24) % 24 * 60);
+	return `${pad(Math.floor(minutes / 60) % 24)}:${pad(minutes % 60)}`;
+};
+/** A duration in hours as "7h 32m". */
+var durationLabel = (hours) => {
+	const minutes = Math.round(hours * 60);
+	return `${Math.floor(minutes / 60)}h ${pad(minutes % 60)}m`;
+};
+/**
+* `color` thinned towards transparent: the one ink of a face taken down to
+* its quieter tones, holding apart in either theme.
+*/
+var fadeColor = (color, percent) => `oklch(from ${color} l c h / ${percent}%)`;
+//#endregion
+export { clockLabel, clockTime, compassLabel, durationLabel, fadeColor, fontFamily, fontWeight, zoneColor, zoneCutoffs };

package/dist/components/icon-meter/icon-meter.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-icon-meter-icon-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-icon-meter-empty-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__icon-meter-icon-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__icon-meter-module__IconMeter_2k97C{--vui-icon-meter-icon-color:var(--global-primary);--vui-icon-meter-empty-color:var(--global-contrast);--__icon-meter-icon-size:var(--space-l);position:relative;&[data-dimension=s]{--__icon-meter-icon-size:var(--space-m)}&[data-dimension=l]{--__icon-meter-icon-size:var(--space-xl)}}.viraui__icon-meter-module__Icon_ZIDLS{display:block;flex:none;inline-size:var(--__icon-meter-icon-size);block-size:var(--__icon-meter-icon-size)}.viraui__icon-meter-module__HalfDefs_LjhPl{position:absolute;inline-size:0;block-size:0;overflow:hidden;pointer-events:none}}

package/dist/components/icon-meter/icon-meter.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+type IconMeterIconProps = {
+    'aria-hidden'?: boolean | 'true';
+    className?: string;
+    fill?: string;
+    size?: number | string;
+};
+/**
+ * Public IconMeter props.
+ *
+ * Display-only discrete icon row (APG Meter). Not a track Meter, Gauge, progress, or interactive rating.
+ */
+export type IconMeterProps = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
+    /**
+     * Current reading. Clamped to `[0, iconCount]` after `iconCount` is clamped. `0` paints all empty icons.
+     */
+    value: number;
+    /**
+     * Number of icon slots. Clamped to at least `3`.
+     *
+     * @defaultValue 5
+     */
+    iconCount?: number;
+    /**
+     * Recolorable icon component instantiated once per slot with `fill` / `size` / `className`.
+     *
+     * @defaultValue ChromeStar
+     */
+    icon?: React.ComponentType<IconMeterIconProps>;
+    /**
+     * Compact size step. Maps to `data-dimension` for icon size, gap, and label text size.
+     *
+     * @defaultValue 'm'
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * CSS color string for full / half icons (`--vui-icon-meter-icon-color`). Pass any valid color or theme var.
+     *
+     * @defaultValue 'var(--global-primary)'
+     */
+    highlightColor?: string;
+    /**
+     * Custom visible label. When omitted and not hidden, the clamped value string is shown.
+     *
+     * @defaultValue Clamped value as text.
+     */
+    label?: React.ReactNode;
+    /**
+     * Hides the visible label. Provide `aria-label` or `aria-labelledby` for the accessible name.
+     *
+     * @defaultValue false
+     */
+    hideLabel?: boolean;
+    /**
+     * Overrides the default AT value text (`"{value} of {iconCount}"`).
+     *
+     * @defaultValue Derived `"{clampedValue} of {clampedIconCount}"`.
+     */
+    valueText?: string;
+};
+export declare const IconMeter: React.FC<IconMeterProps>;
+export {};

package/dist/components/icon-meter/icon-meter.js

@@ -0,0 +1,105 @@
+import './icon-meter.css';
+import { clsx } from "../../core/clsx.js";
+import { ChromeStar } from "../../internal/chrome-icons/chrome-icons.js";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import icon_meter_module_default from "./icon-meter.module.js";
+import { clampIconCount, clampValue, getSlotFill, roundMeterValue } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Meter } from "@base-ui/react";
+//#region src/components/icon-meter/icon-meter.tsx
+var LABEL_TEXT_SIZE = {
+	s: "s",
+	m: "m",
+	l: "l"
+};
+var ICON_COLUMN_GAP = {
+	s: "2xs",
+	m: "xs",
+	l: "s"
+};
+var EMPTY_FILL = "var(--vui-icon-meter-empty-color)";
+var FULL_FILL = "var(--vui-icon-meter-icon-color)";
+var IconMeter = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, hideLabel = false, highlightColor = "var(--global-primary)", icon: Icon = ChromeStar, iconCount = 5, label, ref, size = "m", style, value, valueText, ...otherProps }) => {
+	const halfGradientId = `IconMeter-half-${React.useId().replaceAll(":", "")}`;
+	const clampedIconCount = clampIconCount(iconCount);
+	const clampedValue = clampValue(value, clampedIconCount);
+	const roundedValue = roundMeterValue(clampedValue);
+	const resolvedValueText = valueText ?? `${clampedValue} of ${clampedIconCount}`;
+	const visibleLabel = label ?? String(clampedValue);
+	const dynamicStyle = {
+		"--vui-icon-meter-icon-color": highlightColor,
+		...style
+	};
+	const icons = Array.from({ length: clampedIconCount }, (_, slotIndex) => {
+		const fillKind = getSlotFill(slotIndex, roundedValue);
+		let fill = EMPTY_FILL;
+		if (fillKind === "full") fill = FULL_FILL;
+		else if (fillKind === "half") fill = `url(#${halfGradientId})`;
+		return /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: icon_meter_module_default.Icon,
+			fill,
+			size: "100%"
+		}, slotIndex);
+	});
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		...otherProps,
+		ref,
+		...ariaLabel != null && { "aria-label": ariaLabel },
+		...ariaLabelledby != null && { "aria-labelledby": ariaLabelledby },
+		className: clsx(icon_meter_module_default.IconMeter, className),
+		"data-dimension": size,
+		getAriaValueText: () => resolvedValueText,
+		max: clampedIconCount,
+		min: 0,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			vAlign: "center",
+			columnGap: "s"
+		}),
+		style: dynamicStyle,
+		value: clampedValue,
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				className: icon_meter_module_default.HalfDefs,
+				focusable: "false",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id: halfGradientId,
+					x1: "0",
+					x2: "1",
+					y1: "0",
+					y2: "0",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: FULL_FILL
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: EMPTY_FILL
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx(Stack, {
+				columnGap: ICON_COLUMN_GAP[size],
+				"data-testid": "icon-meter-icons",
+				direction: "row",
+				vAlign: "center",
+				children: icons
+			}),
+			!hideLabel && /* @__PURE__ */ jsx(Meter.Label, {
+				render: /* @__PURE__ */ jsx(Text, {
+					size: LABEL_TEXT_SIZE[size],
+					tone: "muted",
+					weight: "semibold",
+					whiteSpace: "nowrap",
+					selection: false
+				}),
+				children: visibleLabel
+			})
+		]
+	});
+};
+//#endregion
+export { IconMeter };

package/dist/components/icon-meter/icon-meter.module.js

@@ -0,0 +1,11 @@
+//#region src/components/icon-meter/icon-meter.module.css
+var IconMeter = "viraui__icon-meter-module__IconMeter_2k97C";
+var Icon = "viraui__icon-meter-module__Icon_ZIDLS";
+var HalfDefs = "viraui__icon-meter-module__HalfDefs_LjhPl";
+var icon_meter_module_default = {
+	IconMeter,
+	Icon,
+	HalfDefs
+};
+//#endregion
+export { HalfDefs, Icon, IconMeter, icon_meter_module_default as default };

package/dist/components/icon-meter/index.d.ts

@@ -0,0 +1,2 @@
+export { IconMeter } from './icon-meter';
+export type { IconMeterProps } from './icon-meter';

package/dist/components/icon-meter/utils.d.ts

@@ -0,0 +1,22 @@
+/** Slot paint after fraction rounding. */
+export type IconMeterSlotFill = 'empty' | 'half' | 'full';
+/**
+ * Clamp icon slot count to at least 3. Non-finite values become 3.
+ */
+export declare const clampIconCount: (iconCount: number) => number;
+/**
+ * Clamp the meter value into `[0, max]`. Non-finite values become 0.
+ */
+export declare const clampValue: (value: number, max: number) => number;
+/**
+ * Round a raw value into empty / half / full bands per unit fraction.
+ *
+ * - fraction `< 0.25` → floor (empty remainder)
+ * - fraction `≥ 0.75` → ceil (full)
+ * - else → `integer + 0.5` (half)
+ */
+export declare const roundMeterValue: (rawValue: number) => number;
+/**
+ * Resolve empty / half / full for zero-based slot index against a rounded value.
+ */
+export declare const getSlotFill: (slotIndex: number, roundedValue: number) => IconMeterSlotFill;

package/dist/components/icon-meter/utils.js

@@ -0,0 +1,40 @@
+//#region src/components/icon-meter/utils.ts
+/**
+* Clamp icon slot count to at least 3. Non-finite values become 3.
+*/
+var clampIconCount = (iconCount) => {
+	if (!Number.isFinite(iconCount)) return 3;
+	return Math.max(3, Math.trunc(iconCount));
+};
+/**
+* Clamp the meter value into `[0, max]`. Non-finite values become 0.
+*/
+var clampValue = (value, max) => {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(Math.max(value, 0), max);
+};
+/**
+* Round a raw value into empty / half / full bands per unit fraction.
+*
+* - fraction `< 0.25` → floor (empty remainder)
+* - fraction `≥ 0.75` → ceil (full)
+* - else → `integer + 0.5` (half)
+*/
+var roundMeterValue = (rawValue) => {
+	const integer = Math.trunc(rawValue);
+	const fraction = rawValue - integer;
+	if (fraction >= .75) return Math.ceil(rawValue);
+	if (fraction < .25) return Math.floor(rawValue);
+	return integer + .5;
+};
+/**
+* Resolve empty / half / full for zero-based slot index against a rounded value.
+*/
+var getSlotFill = (slotIndex, roundedValue) => {
+	const iconIndex = slotIndex + 1;
+	if (roundedValue >= iconIndex) return "full";
+	if (roundedValue > iconIndex - 1) return "half";
+	return "empty";
+};
+//#endregion
+export { clampIconCount, clampValue, getSlotFill, roundMeterValue };

package/dist/components/index.d.ts

@@ -18,8 +18,10 @@ export * from './elevator';
 export * from './fieldset';
 export * from './fit-text';
 export * from './glow';
+export * from './gauge';
 export * from './grid';
 export * from './icon-button';
+export * from './icon-meter';
 export * from './linear-progress';
 export * from './masonry';
 export * from './menu';

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

@@ -1,5 +1,4 @@
 import { Popover as PrimitivePopover, PopoverPositioner } from '@base-ui/react/popover';
-import { StackProps } from '..';
 import type * as React from 'react';
 type PopoverSheetPositionerProps = Omit<PopoverPositioner.Props, 'className' | 'style' | 'render'>;
 type PopoverSheetContainerProps = {
@@ -41,7 +40,7 @@ type PopoverSheetStyledProps = PopoverSheetPositionerProps & PopoverSheetContain
      *
      * @defaultValue `start`
      */
-    headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
+    headerAlign?: 'start' | 'center' | 'end';
 };
 type PopoverSheetUnstyledProps = PopoverSheetPositionerProps & PopoverSheetContainerProps & {
     /**

package/dist/components/stack/stack.d.ts

@@ -1,7 +1,8 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
-type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
+/** Flex alignment on a physical axis; maps to `justify-content` or `align-items` by `direction`. */
+type StackAlignment = NonNullable<React.CSSProperties['justifyContent'] | React.CSSProperties['alignItems']>;
 type StackSpace = ThemeTypes['space'];
 type StackAxisPadding = StackSpace | [StackSpace | 0, StackSpace | 0];
 /**
@@ -59,7 +60,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      *
      * Prefer this (with cross-axis stretch) so content-sized children like Button span a panel —
      * do not add `width: 100%` CSS on those children.
-     * Use with `maxWidth` under a parent `hAlign="center"` for a fluid, capped, centered shell.
+     * Use with `maxWidth` under a parent `hAlign="safe center"` for a fluid, capped, centered shell.
      * Orthogonal to `expandChildren` (self size vs children grow). Pair with `fullHeight` when the
      * root must fill both parent axes.
      *
@@ -91,12 +92,18 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Aligns content on the horizontal axis from the consumer point of view.
      *
+     * Accepts CSS `justify-content` / `align-items` values (which property is used
+     * depends on `direction`), including overflow keywords such as `safe center`.
+     *
      * @defaultValue 'initial'
      */
     hAlign?: StackAlignment;
     /**
      * Aligns content on the vertical axis from the consumer point of view.
      *
+     * Accepts CSS `justify-content` / `align-items` values (which property is used
+     * depends on `direction`), including overflow keywords such as `safe center`.
+     *
      * @defaultValue 'initial'
      */
     vAlign?: StackAlignment;

package/dist/components/tabs/tabs.d.ts

@@ -1,5 +1,4 @@
 import { TabsRoot } from '@base-ui/react/tabs';
-import { StackProps } from '..';
 import { ButtonProps } from '../button/button';
 import { TabsListProps } from './tabs-list';
 import { TabsPanelProps } from './tabs-panel';
@@ -20,7 +19,7 @@ export type TabsProps = TabsRoot.Props & {
      *
      * @defaultValue 'start'
      */
-    listAlignment?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end' | 'stretch'>;
+    listAlignment?: 'start' | 'center' | 'end' | 'stretch';
     /**
      * Shared visual size for tab items (`Button`) and the active indicator footprint.
      *

package/dist/index.js

@@ -32,9 +32,25 @@ import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
 import { FitText } from "./components/fit-text/fit-text.js";
 import { Glow } from "./components/glow/glow.js";
+import { angleToValue, arcBox, arcPath, clamp, cutValues, degreesToRadians, foldValue, polar, stepValues, valueToAngle, valueToTurnedAngle } from "./components/gauge/math.js";
+import { arcScale } from "./components/gauge/scale.js";
+import { DEFAULT_TRANSITION, cubicBezier, easingFunction, resolveTransition, springPhysics, stepSpring } from "./components/gauge/transition.js";
+import { useAnimatedValue } from "./components/gauge/use-animated-value.js";
+import { useGauge, useRoundGauge } from "./components/gauge/context.js";
+import { Gauge } from "./components/gauge/gauge.js";
+import { GaugeInset } from "./components/gauge/inset.js";
+import { GaugeArc, GaugeStack, GaugeTrack, GaugeZones } from "./components/gauge/arcs.js";
+import { GaugeControl } from "./components/gauge/control.js";
+import { clockLabel, clockTime, compassLabel, durationLabel, fadeColor, fontFamily, fontWeight, zoneColor, zoneCutoffs } from "./components/gauge/utils.js";
+import { GaugeMarks, GaugeTickFill, GaugeTickLabels, GaugeTicks } from "./components/gauge/ticks.js";
+import { GaugeText, GaugeValue } from "./components/gauge/text.js";
+import { GaugeDot } from "./components/gauge/dot.js";
+import { GaugeTooltip } from "./components/gauge/tooltip.js";
+import { GaugeHub, GaugeNeedle } from "./components/gauge/needle.js";
 import { Grid } from "./components/grid/grid.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
+import { IconMeter } from "./components/icon-meter/icon-meter.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
 import { Masonry } from "./components/masonry/masonry.js";
 import { MenuCheckboxItem } from "./components/menu/menu-checkbox-item.js";
@@ -74,4 +90,4 @@ import { ToggleTextButton } from "./components/toggle-text-button/toggle-text-bu
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, DirectionProvider, Disclosure, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, NumberField, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, ToggleTextButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints, useDirection };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, DEFAULT_TRANSITION, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, DirectionProvider, Disclosure, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Gauge, GaugeArc, GaugeControl, GaugeDot, GaugeHub, GaugeInset, GaugeMarks, GaugeNeedle, GaugeStack, GaugeText, GaugeTickFill, GaugeTickLabels, GaugeTicks, GaugeTooltip, GaugeTrack, GaugeValue, GaugeZones, Glow, Grid, IconButton, IconButtonLink, IconMeter, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, NumberField, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, ToggleTextButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, angleToValue, arcBox, arcPath, arcScale, clamp, clockLabel, clockTime, compassLabel, cubicBezier, cutValues, degreesToRadians, durationLabel, easingFunction, fadeColor, foldValue, fontFamily, fontWeight, getElevationProps, polar, resolveTransition, springPhysics, stepSpring, stepValues, useAnimatedValue, useBreakpoints, useDirection, useGauge, useRoundGauge, valueToAngle, valueToTurnedAngle, zoneColor, zoneCutoffs };

package/dist/internal/chrome-icons/chrome-icons.d.ts

@@ -7,6 +7,8 @@ import type * as React from 'react';
  */
 export type ChromeIconProps = {
     className?: string;
+    /** Paint for the glyph; defaults to `currentColor`. */
+    fill?: string;
     size?: number | string;
 };
 export declare const ChromePlus: React.FC<ChromeIconProps>;
@@ -18,3 +20,5 @@ export declare const ChromeChevronDown: React.FC<ChromeIconProps>;
 /** End-edge chevron (submenu). Mirror in RTL via CSS `:dir(rtl)`, not JS. */
 export declare const ChromeChevronEnd: React.FC<ChromeIconProps>;
 export declare const ChromeXmark: React.FC<ChromeIconProps>;
+/** Default IconMeter glyph — solid star; honors `fill` for empty / half / full paint. */
+export declare const ChromeStar: React.FC<ChromeIconProps>;

package/dist/internal/chrome-icons/chrome-icons.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/internal/chrome-icons/chrome-icons.tsx
-var ChromeSvg = ({ children, className, size = 24 }) => /* @__PURE__ */ jsx("svg", {
+var ChromeSvg = ({ children, className, fill = "currentColor", size = 24 }) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	className,
-	fill: "currentColor",
+	fill,
 	height: size,
 	viewBox: "0 0 18 18",
 	width: size,
@@ -46,10 +46,18 @@ var ChromeChevronEnd = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
 	size,
 	children: /* @__PURE__ */ jsx("path", { d: "M13.28 8.47 7.03 2.22a.75.75 0 1 0-1.061 1.061l5.72 5.72-5.72 5.72a.75.75 0 0 0 1.06 1.061l6.25-6.25a.75.75 0 0 0 0-1.061z" })
 });
-var ChromeXmark = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
+var ChromeXmark = ({ className, fill, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
 	className,
+	fill,
 	size,
 	children: /* @__PURE__ */ jsx("path", { d: "M13.664 3.23a.783.783 0 1 1 1.107 1.106L10.107 9l4.664 4.664a.783.783 0 0 1-1.107 1.107L9 10.107 4.336 14.77a.783.783 0 1 1-1.107-1.107L7.893 9 3.23 4.336a.782.782 0 1 1 1.107-1.107L9 7.893z" })
 });
+/** Default IconMeter glyph — solid star; honors `fill` for empty / half / full paint. */
+var ChromeStar = ({ className, fill, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
+	className,
+	fill,
+	size,
+	children: /* @__PURE__ */ jsx("path", { d: "M16.713 7.017A.75.75 0 0 0 16 6.5h-4.803L9.713 1.953a.75.75 0 0 0-1.426 0L6.803 6.5H2a.75.75 0 0 0-.443 1.356l3.888 2.843-1.485 4.57a.751.751 0 0 0 1.155.838L9 13.284l3.885 2.823a.75.75 0 0 0 1.155-.839l-1.485-4.57 3.888-2.843a.75.75 0 0 0 .27-.838" })
+});
 //#endregion
-export { ChromeCheck, ChromeChevronDown, ChromeChevronEnd, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeXmark };
+export { ChromeCheck, ChromeChevronDown, ChromeChevronEnd, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeStar, ChromeXmark };