@viraui/react 0.0.17 → 0.0.19

package/dist/components/slider/slider.js

@@ -1,10 +1,10 @@
-import './slider.css';
 "use client";
+import './slider.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import slider_module_default from "./slider.module.js";
 import { SliderControl } from "./slider-control.js";
 import { isRangeSlider } from "./slider-utils.js";

package/dist/components/stack/stack.css

@@ -1 +1 @@
-.stack-module_Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);gap:var(--stack-row-gap) var(--stack-column-gap);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}&[data-stack-wrap=true]{flex-wrap:wrap}&[data-stack-has-padding=true]{padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}&[data-stack-fill-children=true]>*{flex-grow:var(--vira-flex-grow,1)}}
+.stack-module_Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

package/dist/components/stack/stack.js

@@ -1,5 +1,5 @@
-import './stack.css';
 "use client";
+import './stack.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;position:relative;box-sizing:border-box;background:var(--surface-background,transparent);border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}
+.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}

package/dist/components/surface/surface.js

@@ -1,5 +1,5 @@
-import './surface.css';
 "use client";
+import './surface.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
@@ -22,7 +22,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		...hasColor ? { "--surface-background": toSurfaceColor(color) } : {},
 		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
 		...border ? { "--surface-border-style": borderStyle } : {},
-		"--surface-border-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)"),
+		"--surface-border-radius": resolveThemeValue(radius, "radius", 0),
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
 		...style

package/dist/components/switch/switch.css

@@ -1 +1 @@
-.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}
+.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.js

@@ -1,9 +1,9 @@
-import './switch.css';
 "use client";
+import './switch.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import switch_module_default from "./switch.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -40,6 +40,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 			children: [/* @__PURE__ */ jsx(Switch.Root, {
 				...componentProps,
 				className: clsx(switch_module_default.SwitchRoot, className),
+				"data-shrink": "false",
 				"data-size": size,
 				disabled,
 				name,
@@ -49,7 +50,10 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 				direction: "column",
 				fillChildren: false,
 				rowGap: size === "small" ? "2x-small" : "x-small",
-				children: [label && /* @__PURE__ */ jsx(FieldLabel, { children: label }), /* @__PURE__ */ jsx(FieldHelperCopy, {
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
 					description,
 					error
 				})]

package/dist/components/text/text.js

@@ -1,5 +1,5 @@
-import './text.css';
 "use client";
+import './text.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";

package/dist/components/textarea/textarea.js

@@ -1,10 +1,10 @@
-import './textarea.css';
 "use client";
+import './textarea.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import textarea_module_default from "./textarea.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/textfield/textfield.js

@@ -1,12 +1,12 @@
-import './textfield.css';
 "use client";
+import './textfield.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { InputControlGroup } from "../basic-input/input-control-group.js";
 import textfield_module_default from "./textfield.module.js";
-import { Stack } from "../stack/stack.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

package/dist/components/title/title.d.ts

@@ -16,6 +16,8 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *
+     * Pair this with `level` for most headings so DOM semantics and visual preset stay intentionally aligned.
+     *
      * @default The title renders a `span` root.
      */
     render?: useRender.RenderProp;
@@ -26,9 +28,10 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
      */
     ref?: React.Ref<HTMLElement>;
     /**
-     * Selects a semantic heading typography size from the active theme scale.
+     * Selects a heading or display typography preset from the active theme scale.
      *
-     * This controls only the visual preset. Semantic heading choice remains owned by `render`.
+     * This controls only the visual preset. Semantic heading choice remains owned by `render`,
+     * because `Title` keeps a `span` root unless `render` replaces it.
      *
      * @default 'h1'
      */

package/dist/components/title/title.guide.json

@@ -3,16 +3,19 @@
   "summary": "Theme-aware heading and display typography primitive.",
   "whenToUse": [
     "Headings and display text with title presets",
-    "Semantic heading tags chosen through render",
+    "Semantic heading tags chosen explicitly through render",
+    "Level and render paired together for most heading use cases",
     "Fluid clamp sizing across title levels"
   ],
   "whenNotToUse": ["Body copy — use Text", "Body or mono family typography"],
   "accessibility": [
-    "Choose render to match the correct heading level for the page outline",
+    "Title renders a span by default, so choose render to match the correct heading level for the page outline",
     "Visual level presets do not replace picking the right h1–h6 element",
+    "Use level for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
     "Keep heading hierarchy sequential; do not skip levels for styling alone"
   ],
   "antiPatterns": [
+    "Assuming level changes the HTML tag automatically",
     "Letting level force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],

package/dist/components/title/title.js

@@ -1,5 +1,5 @@
-import './title.css';
 "use client";
+import './title.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";

package/dist/core/props/intrinsic-vira-props.d.ts

@@ -11,10 +11,17 @@ export type IntrinsicViraProps = {
      * @default The component root does not render a shrink attribute.
      */
     shrink?: boolean | undefined;
+    /**
+     * Adds `data-vibrant` to the component root when true so preflight vibrancy styles can opt the surface into backdrop filtering.
+     *
+     * @default The component root does not render a vibrant attribute.
+     */
+    vibrant?: boolean | undefined;
 };
 type IntrinsicViraAttributes = {
     'data-grow'?: 'false';
     'data-shrink'?: 'false';
+    'data-vibrant'?: '';
 };
 export declare const extractIntrinsicViraProps: <Props extends IntrinsicViraProps>(props: Props) => {
     componentProps: Omit<Props, keyof IntrinsicViraProps>;

package/dist/core/props/intrinsic-vira-props.js

@@ -1,11 +1,12 @@
 //#region src/core/props/intrinsic-vira-props.ts
 var extractIntrinsicViraProps = (props) => {
-	const { grow, shrink, ...componentProps } = props;
+	const { grow, shrink, vibrant, ...componentProps } = props;
 	return {
 		componentProps,
 		intrinsicAttributes: {
 			...grow === false ? { "data-grow": "false" } : {},
-			...shrink === false ? { "data-shrink": "false" } : {}
+			...shrink === false ? { "data-shrink": "false" } : {},
+			...vibrant === true ? { "data-vibrant": "" } : {}
 		}
 	};
 };

package/dist/core/theme/resolve-theme-value.d.ts

@@ -1,5 +1,4 @@
-import { default as theme } from '@viraui/foundation/vira/nested';
-type ThemeTree = typeof theme;
-type ThemeKey = keyof ThemeTree;
-export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends keyof ThemeTree[TKey], TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeTree[TKey][TValue] | TFallback;
+type ThemeKey = 'radius' | 'space';
+type ThemeValue = string;
+export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends string, TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeValue | TFallback;
 export {};

package/dist/core/theme/resolve-theme-value.js

@@ -1,8 +1,7 @@
-import theme from "@viraui/foundation/vira/nested";
 //#region src/core/theme/resolve-theme-value.ts
 var resolveThemeValue = (key, themeKey, fallbackValue) => {
 	if (!key) return fallbackValue;
-	return theme[themeKey][key];
+	return `var(--${themeKey}-${String(key)})`;
 };
 //#endregion
 export { resolveThemeValue };

package/dist/index.js

@@ -1,4 +1,7 @@
 import { Avatar } from "./components/avatar/avatar.js";
+import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Stack } from "./components/stack/stack.js";
+import { Chip } from "./components/chip/chip.js";
 import { ClampText } from "./components/clamp-text/clamp-text.js";
 import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
 import { getElevationProps } from "./core/elevation/get-elevation-props.js";
@@ -7,15 +10,18 @@ import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { Text } from "./components/text/text.js";
+import { LinearProgress } from "./components/linear-progress/linear-progress.js";
+import { Masonry } from "./components/masonry/masonry.js";
 import { Textfield } from "./components/textfield/textfield.js";
-import { Stack } from "./components/stack/stack.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Slider } from "./components/slider/slider.js";
 import { Switch } from "./components/switch/switch.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
-import { Icon } from "./components/icon/icon.js";
+import { Radio } from "./components/radio/radio.js";
+import { RadioGroup } from "./components/radio/radio-group.js";
 import { Select } from "./components/select/select.js";
+import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, Button, Checkbox, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };