@viraui/react 0.0.24 → 0.0.26

package/dist/components/meter/meter.js

@@ -0,0 +1,59 @@
+import './meter.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+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 }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		...componentProps,
+		...intrinsicAttributes,
+		className: clsx(meter_module_default.Meter, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				fillChildren: false,
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Meter.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "end",
+					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, {
+				className: meter_module_default.Description,
+				size: "small",
+				tone: "muted",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { Meter$1 as Meter };

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

@@ -0,0 +1,7 @@
+var meter_module_default = {
+	Meter: "viraui__meter-module__Meter_YRI7d",
+	Track: "viraui__meter-module__Track_uF9wy",
+	Indicator: "viraui__meter-module__Indicator_dNjqU"
+};
+//#endregion
+export { meter_module_default as default };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,4 @@
+export { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from './popover';
+export type { PopoverCloseProps, PopoverDescriptionProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, } from './popover';
+export { PopoverSheet } from './popover-sheet';
+export type { PopoverSheetProps } from './popover-sheet';

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

@@ -0,0 +1,65 @@
+import { PopoverPositioner } from '@base-ui/react/popover';
+import { StackProps } from '..';
+import type * as React from 'react';
+type PopoverSheetPositionerProps = Omit<PopoverPositioner.Props, 'className' | 'style' | 'render'>;
+type PopoverSheetStyledProps = PopoverSheetPositionerProps & {
+    /**
+     * Whether to skip the built-in Surface, header, and close chrome and render
+     * only the positioning/animation shell (Portal + Positioner + Popup + Viewport).
+     *
+     * @default false
+     */
+    unstyled?: false;
+    /**
+     * Accessible popover title rendered as the popup heading.
+     */
+    title: React.ReactNode;
+    /**
+     * Supporting copy announced with the title.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether to show the built-in flat IconButton close control.
+     *
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Aligns the header content.
+     *
+     * @default `start`
+     */
+    headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
+};
+type PopoverSheetUnstyledProps = PopoverSheetPositionerProps & {
+    /**
+     * Renders only the positioning/animation shell; compose `Popover.Title`,
+     * `Popover.Description`, and any chrome inside `children`.
+     */
+    unstyled: true;
+    title?: never;
+    description?: never;
+    showCloseButton?: never;
+    headerAlign?: never;
+};
+/**
+ * Public Popover.Sheet props.
+ *
+ * Encapsulates Portal + Positioner + Popup + Viewport + Title + Description +
+ * optional body `children`. Positioning props forward to the Positioner; `sideOffset`
+ * defaults to `8`. Always renders the internal Viewport so multi-trigger content
+ * animations work by default. Compose `Popover.Close` inside `children` when a
+ * close control is needed, or set `showCloseButton` for the built-in flat IconButton.
+ *
+ * With `unstyled`, the built-in Surface, header, and close chrome are skipped and
+ * `children` render directly inside the Viewport; the consumer owns the popup markup
+ * and must compose `Popover.Title` (and `Popover.Description` when needed) for
+ * accessible naming.
+ *
+ * @default `sideOffset` is `8`; no description, no close button, styled chrome.
+ */
+export type PopoverSheetProps = PopoverSheetStyledProps | PopoverSheetUnstyledProps;
+export declare const PopoverSheet: React.FC<PopoverSheetProps>;
+export {};

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

@@ -0,0 +1,79 @@
+import { Stack } from "../stack/stack.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Text } from "../text/text.js";
+import popover_module_default from "./popover.module.js";
+import { Icon } from "../icon/icon.js";
+import { Surface } from "../surface/surface.js";
+import { Title } from "../title/title.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover-sheet.tsx
+var PopoverSheet = ({ unstyled, title, description, children, showCloseButton = false, headerAlign = "start", sideOffset = 8, ...positionerProps }) => /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+	className: popover_module_default.Sheet,
+	sideOffset,
+	...positionerProps,
+	children: unstyled ? /* @__PURE__ */ jsx(Popover.Popup, {
+		className: popover_module_default.Popup,
+		children: /* @__PURE__ */ jsx(Popover.Viewport, {
+			className: popover_module_default.Viewport,
+			"data-unstyled": "",
+			children
+		})
+	}) : /* @__PURE__ */ jsx(Popover.Popup, {
+		className: popover_module_default.Popup,
+		render: /* @__PURE__ */ jsx(Surface, {
+			color: 1,
+			border: "all",
+			radius: "large",
+			vibrant: true,
+			render: /* @__PURE__ */ jsx(Stack, {
+				rowGap: "medium",
+				fillChildren: false
+			})
+		}),
+		children: /* @__PURE__ */ jsxs(Popover.Viewport, {
+			className: popover_module_default.Viewport,
+			render: /* @__PURE__ */ jsx(Stack, {
+				rowGap: "medium",
+				vPadding: "medium",
+				hPadding: "medium",
+				fillChildren: false
+			}),
+			children: [
+				/* @__PURE__ */ jsxs(Stack, {
+					hAlign: headerAlign,
+					rowGap: "small",
+					vAlign: "start",
+					vPadding: [0, children ? "medium" : 0],
+					children: [/* @__PURE__ */ jsx(Popover.Title, {
+						render: /* @__PURE__ */ jsx(Title, {
+							align: headerAlign,
+							level: "h6",
+							lineHeight: "x-small"
+						}),
+						children: title
+					}), description && /* @__PURE__ */ jsx(Popover.Description, {
+						render: /* @__PURE__ */ jsx(Text, {
+							align: headerAlign,
+							tone: "muted",
+							render: /* @__PURE__ */ jsx("p", {})
+						}),
+						children: description
+					})]
+				}),
+				showCloseButton && /* @__PURE__ */ jsx(Popover.Close, {
+					className: popover_module_default.CloseButton,
+					render: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": "Close popover",
+						icon: /* @__PURE__ */ jsx(Icon, { name: "Xmark" }),
+						size: "small",
+						variant: "flat"
+					})
+				}),
+				children
+			]
+		})
+	})
+}) });
+//#endregion
+export { PopoverSheet };

package/dist/components/popover/popover.css

@@ -0,0 +1 @@
+.viraui__popover-module__Sheet_4x-7H{width:var(--positioner-width);height:var(--positioner-height);max-width:var(--available-width);transition:top var(--duration-fast) var(--easing-standard),right var(--duration-fast) var(--easing-standard),bottom var(--duration-fast) var(--easing-standard),left var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-instant=click],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__popover-module__Popup_pJyIh{position:relative;box-sizing:border-box;width:var(--popup-width,auto);height:var(--popup-height,auto);transform-origin:var(--transform-origin);transition:width var(--duration-fast) var(--easing-standard),height var(--duration-fast) var(--easing-standard),opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.96)}&[data-instant=click],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;transform:none}}}.viraui__popover-module__Viewport_KrjBC{--vui-popover-content-fade-duration:var(--duration-fast);position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:clip;width:100%;height:100%;&>[data-current],&>[data-previous]{grid-area:1/1;inline-size:calc(var(--popup-width) - 2px - var(--vui-stack-padding-inline-start) - var(--vui-stack-padding-inline-end))}&[data-unstyled]>:is([data-current],[data-previous]){inline-size:var(--popup-width,100%)}&[data-unstyled]>[data-previous]{block-size:var(--popup-height,100%)}&>[data-previous]{position:absolute;block-size:calc(var(--popup-height) - 2px - var(--vui-stack-padding-block-start) - var(--vui-stack-padding-block-end));overflow:clip;pointer-events:none;opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-standard)}&>[data-previous][data-ending-style]{opacity:0}&>[data-current]{opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-entrance)}&>[data-current][data-starting-style]{opacity:0}&[data-instant=click]>[data-current],&[data-instant=click]>[data-previous],&[data-instant=dismiss]>[data-current],&[data-instant=dismiss]>[data-previous]{transition:none}@media (prefers-reduced-motion:reduce){&>[data-current],&>[data-previous]{transition:none}&>[data-current][data-starting-style],&>[data-previous][data-ending-style]{opacity:1}}}.viraui__popover-module__CloseButton_YOe2L.viraui__popover-module__CloseButton_YOe2L{position:absolute;inset-block-start:var(--space-small);inset-inline-end:var(--space-small)}

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

@@ -0,0 +1,74 @@
+import { Popover as PrimitivePopover, PopoverClose as PopoverCloseNamespace, PopoverDescription as PopoverDescriptionNamespace, PopoverRoot, PopoverTitle as PopoverTitleNamespace, PopoverTrigger as PopoverTriggerNamespace } from '@base-ui/react/popover';
+import { PopoverSheetProps } from './popover-sheet';
+import type * as React from 'react';
+/**
+ * Public Popover root props.
+ *
+ * Pass-through to Base UI `Popover.Root`. Supports `open`/`defaultOpen`/`onOpenChange`,
+ * `modal` (focus trap and outside interaction), `triggerId` for controlled activation,
+ * and `handle` for detached/multiple triggers. `children` may be a node or a
+ * `({ payload }) => ReactNode` render function for per-trigger content.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverProps = PopoverRoot.Props;
+/**
+ * Public Popover.Trigger props.
+ *
+ * Pass-through to Base UI `Popover.Trigger`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`. Pass `handle` for detached triggers,
+ * `payload` for per-trigger content, `openOnHover`/`delay`/`closeDelay` for hover
+ * open behavior, and `id` for controlled activation via the Root `triggerId` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverTriggerProps = PopoverTriggerNamespace.Props;
+/**
+ * Public Popover.Close props.
+ *
+ * Pass-through to Base UI `Popover.Close`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`.
+ *
+ * Compose inside `Popover.Sheet` so the control closes the open popover.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverCloseProps = PopoverCloseNamespace.Props;
+/**
+ * Public Popover.Title props.
+ *
+ * Pass-through to Base UI `Popover.Title`. Use `render` for the visible heading
+ * (for example the Vira `Title` primitive). Compose inside an `unstyled`
+ * `Popover.Sheet` so the popup keeps an accessible name; the styled sheet
+ * renders it internally from its `title` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverTitleProps = PopoverTitleNamespace.Props;
+/**
+ * Public Popover.Description props.
+ *
+ * Pass-through to Base UI `Popover.Description`. Use `render` for the visible
+ * copy (for example the Vira `Text` primitive). Compose inside an `unstyled`
+ * `Popover.Sheet`; the styled sheet renders it internally from its
+ * `description` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverDescriptionProps = PopoverDescriptionNamespace.Props;
+export declare const PopoverTrigger: PrimitivePopover.Trigger;
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type PopoverComponent = React.FC<PopoverProps> & {
+    Trigger: React.FC<PopoverTriggerProps>;
+    Sheet: React.FC<PopoverSheetProps>;
+    Close: React.FC<PopoverCloseProps>;
+    Title: React.FC<PopoverTitleProps>;
+    Description: React.FC<PopoverDescriptionProps>;
+    createHandle: typeof PrimitivePopover.createHandle;
+};
+export declare const Popover: PopoverComponent;
+export {};

package/dist/components/popover/popover.guide.json

@@ -0,0 +1,28 @@
+{
+  "name": "Popover",
+  "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
+  "whenToUse": [
+    "Anchored quick actions or contextual hints next to a triggering control",
+    "Lightweight forms or confirmations that float beside the trigger without blocking the page",
+    "Multi-trigger panels that swap content with direction-aware animations using `Popover.createHandle` and trigger `payload`",
+    "Hover-revealed hints via `openOnHover` with `delay` and `closeDelay`",
+    "Fully custom popup chrome via `Sheet` `unstyled` composed with `Popover.Title` and `Popover.Description`"
+  ],
+  "whenNotToUse": [
+    "Modal tasks that must block the page and demand focused attention (use Dialog)",
+    "Nested drill-down sheet flows (use Dialog)",
+    "System-wide transient alerts and confirmations (use Toast)"
+  ],
+  "accessibility": [
+    "Always pass `title`; add `description` when the heading alone is not enough context",
+    "With `unstyled`, render `Popover.Title` inside `children` (and `Popover.Description` when needed) so the popup keeps an accessible name",
+    "Compose `Popover.Close` with an accessible name when a visible close control is needed, or set `showCloseButton` for the built-in one",
+    "Use `modal` to control focus trap and outside interaction; render a `Popover.Close` inside the popup when `modal` is `true` or `'trap-focus'` so touch screen readers can escape"
+  ],
+  "antiPatterns": [
+    "Opening a popover without `title` copy for assistive technologies",
+    "Rendering heavy or scroll-bound content that belongs in a Dialog",
+    "Expecting `Popover.Arrow` (it is intentionally not exported or rendered)"
+  ],
+  "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"]
+}

package/dist/components/popover/popover.js

@@ -0,0 +1,23 @@
+import './popover.css';
+import { PopoverSheet } from "./popover-sheet.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+var PopoverTrigger = Popover.Trigger;
+var PopoverClose = Popover.Close;
+var PopoverTitle = Popover.Title;
+var PopoverDescription = Popover.Description;
+var PopoverRootComponent = ({ children, ...otherProps }) => /* @__PURE__ */ jsx(Popover.Root, {
+	...otherProps,
+	children
+});
+var Popover$1 = Object.assign(PopoverRootComponent, {
+	Trigger: Popover.Trigger,
+	Sheet: PopoverSheet,
+	Close: Popover.Close,
+	Title: Popover.Title,
+	Description: Popover.Description,
+	createHandle: Popover.createHandle
+});
+//#endregion
+export { Popover$1 as Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/popover/popover.module.js

@@ -0,0 +1,8 @@
+var popover_module_default = {
+	Sheet: "viraui__popover-module__Sheet_4x-7H",
+	Popup: "viraui__popover-module__Popup_pJyIh",
+	Viewport: "viraui__popover-module__Viewport_KrjBC",
+	CloseButton: "viraui__popover-module__CloseButton_YOe2L"
+};
+//#endregion
+export { popover_module_default as default };

package/dist/components/progressive-blur/progressive-blur.css

@@ -1 +1 @@
-.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--progressive-blur:16px;pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--progressive-blur) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}
+.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--vui-progressive-blur-amount:16px;pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -21,5 +21,19 @@
     "Driving layout size or scroll behavior from inside the overlay component",
     "Embedding layout positioning rules inside the component stylesheet"
   ],
-  "related": ["Surface", "StaticNoise"]
+  "related": ["Surface", "StaticNoise"],
+  "properties": {
+    "react": {
+      "blur": {
+        "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
+        "refCss": "amount"
+      }
+    },
+    "css": {
+      "amount": {
+        "description": "Maximum blur amount for progressive blur layers.",
+        "refReact": "blur"
+      }
+    }
+  }
 }

package/dist/components/progressive-blur/progressive-blur.js

@@ -9,7 +9,7 @@ var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const resolvedSteps = resolveProgressiveBlurSteps(steps, easing);
 	const dynamicStyle = {
-		"--progressive-blur": blur,
+		"--vui-progressive-blur-amount": blur,
 		...style
 	};
 	const layers = Array.from({ length: resolvedSteps }, (_, layerIndex) => {

package/dist/components/radio/radio-group.d.ts

@@ -8,4 +8,4 @@ import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>;
-export declare const RadioGroup: <Value>({ children, className, ...props }: RadioGroupProps<Value>) => import("react").JSX.Element;
+export declare const RadioGroup: <Value>({ children, className, ...otherProps }: RadioGroupProps<Value>) => import("react").JSX.Element;

package/dist/components/radio/radio-group.js

@@ -2,8 +2,8 @@ import { Stack } from "../stack/stack.js";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup } from "@base-ui/react";
 //#region src/components/radio/radio-group.tsx
-var RadioGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(RadioGroup, {
-	...props,
+var RadioGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx(RadioGroup, {
+	...otherProps,
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		"data-radiogroup": true,

package/dist/components/radio/radio.css

@@ -1 +1 @@
-.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}
+.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-border-color:#0000;--vui-radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--vui-radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--vui-radio-size);block-size:var(--vui-radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}

package/dist/components/select/select-option.js

@@ -18,7 +18,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, disab
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 		value,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			columnGap: "small",
+			columnGap: "medium",
 			direction: "row",
 			hPadding: "small",
 			vPadding: "small",

package/dist/components/select/select.css

@@ -1 +1 @@
-.viraui__select-module__Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:var(--select-trigger-padding-inline-start) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{scale:.96;translate:var(--select-list-appear-offest) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{scale:.96;translate:calc(var(--select-list-appear-offest) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__select-module__Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/12%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__select-module__Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__select-module__Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
+.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:var(--space-small);--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{scale:.96;translate:var(--select-list-appear-offest) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{scale:.96;translate:calc(var(--select-list-appear-offest) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__select-module__Option_KgYqz{border-radius:calc((var(--vui-select-list-border-radius) + 0px) - var(--vui-select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:oklab(from var(--global-contrast) l a b/8%)}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__select-module__Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__select-module__Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}

package/dist/components/select/select.guide.json

@@ -23,5 +23,30 @@
     "Leaving the trigger without label or aria-label",
     "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
   ],
-  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"]
+  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"],
+  "properties": {
+    "css": {
+      "input-height": {
+        "description": "Select trigger block size."
+      },
+      "control-group-background": {
+        "description": "Trigger background fill."
+      },
+      "control-group-color": {
+        "description": "Trigger text and icon color."
+      },
+      "control-group-border-color": {
+        "description": "Trigger border color; invalid state overrides."
+      },
+      "control-group-border-radius": {
+        "description": "Trigger corner radius."
+      },
+      "trigger-padding-inline-start": {
+        "description": "Trigger inline-start padding."
+      },
+      "trigger-padding-inline-end": {
+        "description": "Trigger inline-end padding."
+      }
+    }
+  }
 }

package/dist/components/select/select.js

@@ -118,6 +118,7 @@ function SelectRootComponent({ alignListWithTrigger = false, children, className
 										border: "all",
 										color: 1,
 										hPadding: "x-small",
+										overflow: "auto",
 										radius: "medium",
 										vPadding: "x-small",
 										vibrant: true

package/dist/components/separator/separator.css

@@ -1 +1 @@
-.viraui__separator-module__Line_xXOe9{--separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--separator-size);block-size:100%}}
+.viraui__separator-module__Line_xXOe9{--vui-separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--vui-separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--vui-separator-size);block-size:100%}}

package/dist/components/separator/separator.js

@@ -14,7 +14,7 @@ var separatorSizeValues = {
 var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--separator-size": `${separatorSizeValues[size]}px`,
+		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		...style
 	};
 	const line = useRender({

package/dist/components/shimmer/index.d.ts

@@ -0,0 +1,2 @@
+export { Shimmer } from './shimmer';
+export type { ShimmerProps } from './shimmer';

package/dist/components/shimmer/shimmer.css

@@ -0,0 +1 @@
+.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-angle:0deg;--shimmer-base:currentcolor;--vui-shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}

package/dist/components/shimmer/shimmer.d.ts

@@ -0,0 +1,43 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Shimmer props.
+ *
+ * Includes standard `span` attributes such as `children`, `id`, `title`, and event handlers,
+ * plus Vira-owned shimmer tuning controls.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Sets the shimmer sweep duration using any valid CSS time string.
+     *
+     * @default The CSS duration is `var(--duration-slowest)`.
+     */
+    duration?: string;
+    /**
+     * Sets the shimmer highlight spread using any valid CSS length string.
+     *
+     * @default The CSS spread is `calc(3ch + var(--space-2x-large))`.
+     */
+    spread?: string;
+    /**
+     * Sets the shimmer gradient angle offset using any valid CSS angle string.
+     *
+     * @default The CSS angle offset is `0deg`.
+     */
+    angle?: string;
+    /**
+     * Overrides the shimmer highlight color when relative base lightness tuning is not used.
+     *
+     * @default The highlight increases base `currentColor` lightness.
+     */
+    highlightColor?: string;
+    /**
+     * Ref forwarded to the rendered shimmer root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export declare const Shimmer: React.FC<ShimmerProps>;