@viraui/react 2026.0.19 → 2026.0.20

package/dist/components/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
-import { FieldRoot } from '@base-ui/react/field';
 import { AutocompleteRoot, Autocomplete as PrimitiveAutocomplete } from '@base-ui/react/autocomplete';
+import { FieldRoot } from '@base-ui/react/field';
 import { BasicInputProps } from '../basic-input';
 import { AutocompleteGroup } from './autocomplete-group';
 import { AutocompleteItemPart } from './autocomplete-item';

package/dist/components/autocomplete/autocomplete.js

@@ -13,8 +13,8 @@ import { AutocompleteItemPart } from "./autocomplete-item.js";
 import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Field } from "@base-ui/react/field";
 import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Field } from "@base-ui/react/field";
 import { useId } from "react";
 //#region src/components/autocomplete/autocomplete.tsx
 var AutocompletePrimitiveRoot = Autocomplete.Root;
@@ -76,7 +76,7 @@ function AutocompleteRootComponent({ children, className, container, description
 									border: "all",
 									className: autocomplete_module_default.PopupChrome,
 									color: 1,
-									"data-vibrant": "",
+									"data-vibrant": true,
 									hPadding: "x-small",
 									overflow: "auto",
 									radius: "medium",

package/dist/components/dialog/dialog-sheet.js

@@ -31,7 +31,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						hAlign: "center"
 					}),
 					color: 1,
-					"data-vibrant": "",
+					"data-vibrant": true,
 					radius: "large",
 					vPadding: ["medium", 0]
 				}),

package/dist/components/linear-progress/linear-progress.d.ts

@@ -1,4 +1,4 @@
-import { ProgressRoot } from '@base-ui/react/progress';
+import { ProgressRoot, Progress as PrimitiveProgress } from '@base-ui/react/progress';
 import type * as React from 'react';
 /**
  * Public LinearProgress props.
@@ -22,10 +22,13 @@ export type LinearProgressProps = ProgressRoot.Props & {
      */
     description?: React.ReactNode;
     /**
-     * Renders the formatted current value via `Progress.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Progress.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveProgress.Value>['children'], null | undefined>;
 };
 export declare const LinearProgress: React.FC<LinearProgressProps>;

package/dist/components/linear-progress/linear-progress.guide.json

@@ -34,8 +34,8 @@
       "label": {
         "description": "Visible label rendered through `Progress.Label` with shared internal `FieldLabel`."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Progress.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Progress.Value` `children` to customize the printed label."
       }
     },
     "css": {

package/dist/components/linear-progress/linear-progress.js

@@ -7,46 +7,52 @@ import linear_progress_module_default from "./linear-progress.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 //#region src/components/linear-progress/linear-progress.tsx
-var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => /* @__PURE__ */ jsxs(Progress.Root, {
-	...progressRootProps,
-	ref,
-	className: clsx(linear_progress_module_default.LinearProgress, className),
-	value,
-	render: /* @__PURE__ */ jsx(Stack, {
-		direction: "column",
-		rowGap: "small",
-		columnGap: "x-small"
-	}),
-	children: [
-		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: "small",
-			vAlign: "center",
-			hAlign: "space-between",
-			children: [label && /* @__PURE__ */ jsx(Progress.Label, {
-				render: /* @__PURE__ */ jsx(FieldLabel, {}),
-				children: label
-			}), showValue && /* @__PURE__ */ jsx(Text, {
+var LinearProgress = ({ className, description, label, renderValue, value, ref, ...progressRootProps }) => {
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...progressRootProps,
+		ref,
+		className: clsx(linear_progress_module_default.LinearProgress, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			rowGap: "medium",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "center",
+					"data-shrink": "false",
+					render: /* @__PURE__ */ jsx(Progress.Value, {
+						render: /* @__PURE__ */ jsx("output", {}),
+						children: typeof renderValue === "function" ? renderValue : void 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: linear_progress_module_default.Track,
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
 				size: "small",
 				tone: "muted",
-				family: "mono",
-				whiteSpace: "nowrap",
-				selection: false,
-				align: "end",
-				"data-shrink": "false",
-				render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-			})]
-		}),
-		/* @__PURE__ */ jsx(Progress.Track, {
-			className: linear_progress_module_default.Track,
-			children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
-		}),
-		description && /* @__PURE__ */ jsx(Text, {
-			size: "small",
-			tone: "muted",
-			children: description
-		})
-	]
-});
+				children: description
+			})
+		]
+	});
+};
 //#endregion
 export { LinearProgress };

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

@@ -1,4 +1,4 @@
-import { MeterRoot } from '@base-ui/react';
+import { Meter as PrimitiveMeter, MeterRoot } from '@base-ui/react';
 import type * as React from 'react';
 /**
  * Public Meter props.
@@ -22,10 +22,13 @@ export type MeterProps = MeterRoot.Props & {
      */
     description?: React.ReactNode;
     /**
-     * Renders the formatted current value via `Meter.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Meter.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveMeter.Value>['children'], null | undefined>;
 };
 export declare const Meter: React.FC<MeterProps>;

package/dist/components/meter/meter.guide.json

@@ -6,7 +6,7 @@
   "whenToUse": [
     "Use for storage usage, battery level, capacity, or score within a known range.",
     "Use with a label when the metric needs a visible name.",
-    "Use with `showValue` when the formatted value should appear beside the label."
+    "Use with `renderValue` when the formatted value should appear beside the label."
   ],
   "whenNotToUse": [
     "Use LinearProgress for in-progress tasks or indeterminate work.",
@@ -33,8 +33,8 @@
       "label": {
         "description": "Visible label rendered through `Meter.Label` with shared internal `FieldLabel`."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Meter.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Meter.Value` `children` to customize the printed label."
       }
     },
     "css": {

package/dist/components/meter/meter.js

@@ -7,45 +7,51 @@ import meter_module_default from "./meter.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react";
 //#region src/components/meter/meter.tsx
-var Meter$1 = ({ className, description, label, showValue = false, value, ...otherProps }) => /* @__PURE__ */ jsxs(Meter.Root, {
-	...otherProps,
-	className: clsx(meter_module_default.Meter, className),
-	value,
-	render: /* @__PURE__ */ jsx(Stack, {
-		direction: "column",
-		rowGap: "small",
-		columnGap: "x-small"
-	}),
-	children: [
-		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: "small",
-			vAlign: "center",
-			hAlign: "space-between",
-			children: [label && /* @__PURE__ */ jsx(Meter.Label, {
-				render: /* @__PURE__ */ jsx(FieldLabel, {}),
-				children: label
-			}), showValue && /* @__PURE__ */ jsx(Text, {
+var Meter$1 = ({ className, description, label, renderValue, value, ...otherProps }) => {
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		...otherProps,
+		className: clsx(meter_module_default.Meter, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			rowGap: "medium",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Meter.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "center",
+					"data-shrink": "false",
+					render: /* @__PURE__ */ jsx(Meter.Value, {
+						render: /* @__PURE__ */ jsx("output", {}),
+						children: typeof renderValue === "function" ? renderValue : void 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Meter.Track, {
+				className: meter_module_default.Track,
+				children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
 				size: "small",
 				tone: "muted",
-				family: "mono",
-				whiteSpace: "nowrap",
-				selection: false,
-				align: "end",
-				"data-shrink": "false",
-				render: /* @__PURE__ */ jsx(Meter.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-			})]
-		}),
-		/* @__PURE__ */ jsx(Meter.Track, {
-			className: meter_module_default.Track,
-			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
-		}),
-		description && /* @__PURE__ */ jsx(Text, {
-			size: "small",
-			tone: "muted",
-			children: description
-		})
-	]
-});
+				children: description
+			})
+		]
+	});
+};
 //#endregion
 export { Meter$1 as Meter };

package/dist/components/popover/popover-sheet.js

@@ -27,7 +27,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 				color: 1,
 				border: "all",
 				radius: "large",
-				"data-vibrant": "",
+				"data-vibrant": true,
 				render: /* @__PURE__ */ jsx(Stack, { rowGap: "medium" })
 			}),
 			children: /* @__PURE__ */ jsxs(Popover.Viewport, {

package/dist/components/select/select.js

@@ -91,7 +91,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 							children: [
 								/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
-									"data-vibrant": "",
+									"data-vibrant": true,
 									render: /* @__PURE__ */ jsx(Stack, {
 										hAlign: "center",
 										vAlign: "center"
@@ -117,14 +117,14 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 											overflow: "auto",
 											radius: "medium",
 											vPadding: "x-small",
-											"data-vibrant": ""
+											"data-vibrant": true
 										}),
 										children
 									})
 								}),
 								/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
-									"data-vibrant": "",
+									"data-vibrant": true,
 									render: /* @__PURE__ */ jsx(Stack, {
 										hAlign: "center",
 										vAlign: "center"

package/dist/components/slider/slider.d.ts

@@ -1,5 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
-import { SliderRoot } from '@base-ui/react/slider';
+import { SliderRoot, Slider as PrimitiveSlider } from '@base-ui/react/slider';
 import type * as React from 'react';
 /**
  * Public Slider props.
@@ -35,11 +35,14 @@ export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
      */
     required?: boolean;
     /**
-     * Renders the formatted current value via `Slider.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Slider.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveSlider.Value>['children'], null | undefined>;
     /**
      * Accessible name for the thumb when `label` is omitted.
      *

package/dist/components/slider/slider.guide.json

@@ -36,8 +36,8 @@
       "required": {
         "description": "Marks the slider as required and shows a required indicator on the label."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Slider.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Slider.Value` `children` to customize the printed label."
       },
       "thumbAriaLabel": {
         "description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."

package/dist/components/slider/slider.js

@@ -11,9 +11,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Slider } from "@base-ui/react/slider";
 //#region src/components/slider/slider.tsx
-var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", showValue = false, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
+var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
 	const isRange = isRangeSlider(value, defaultValue);
 	const isVertical = orientation === "vertical";
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		className: slider_module_default.Slider,
 		dirty,
@@ -44,17 +45,17 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"
 			}),
-			children: [(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+			children: [(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
 				fillChildren: true,
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
 				columnGap: "small",
-				vAlign: "end",
+				vAlign: "center",
 				hAlign: isVertical ? "center" : "space-between",
 				children: [label && /* @__PURE__ */ jsx(Field.Label, {
 					className: slider_module_default.Label,
 					children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
-				}), showValue && /* @__PURE__ */ jsx(Text, {
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
 					className: slider_module_default.Value,
 					size: "small",
 					tone: "muted",
@@ -62,7 +63,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 					whiteSpace: "nowrap",
 					selection: false,
 					align: isVertical ? "center" : "end",
-					render: /* @__PURE__ */ jsx(Slider.Value, {})
+					render: /* @__PURE__ */ jsx(Slider.Value, { children: typeof renderValue === "function" ? renderValue : void 0 })
 				})]
 			}), /* @__PURE__ */ jsx(SliderControl, {
 				isRange,

package/dist/components/tooltip/tooltip-content.js

@@ -17,7 +17,7 @@ var TooltipContent = ({ children, sideOffset = 8, container, ...positionerProps
 				color: 1,
 				border: "all",
 				radius: "medium",
-				"data-vibrant": ""
+				"data-vibrant": true
 			}),
 			children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
 				className: tooltip_module_default.Viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.19",
+  "version": "2026.0.20",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.19",
-    "@viraui/icons": "2026.0.0",
+    "@viraui/foundation": "2026.0.20",
     "@viraui/postcss-config": "2026.0.0",
-    "@viraui/tsconfig": "2026.0.0"
+    "@viraui/tsconfig": "2026.0.0",
+    "@viraui/icons": "2026.0.0"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",