@viraui/react 2026.6.0 → 2026.6.1

package/dist/specs/patterns/settings-row.xml

@@ -1,19 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <pattern id="settings-row" title="Settings row">
   <uses>
-    <ref id="stack" units="meta,usage" />
+    <ref id="stack" units="meta,usage,props" />
     <ref id="text" units="meta" />
     <ref id="switch" units="meta,props" />
   </uses>
-  <do>Use Stack for the row flex layout and token gap; put the control at the trailing edge.</do>
-  <dont>Do not reimplement row flex in app CSS when Stack covers alignment and gap.</dont>
+  <do>Use Stack for the row flex layout and token `columnGap`; put label copy in a nested column Stack with `expandChildren`; put the control at the trailing edge.</do>
+  <dont>Do not reimplement row flex, gap, or stretch in app CSS when Stack covers alignment and spacing.</dont>
   <tsx><![CDATA[
-<Stack direction="row" vAlign="center" gap="3" fullWidth>
-  <Stack gap="1" expandChildren>
+<Stack direction="row" vAlign="center" columnGap="m" fullWidth>
+  <Stack rowGap="2xs" expandChildren>
     <Text weight="m">Notifications</Text>
-    <Text size="sm" color="muted">Email digests for account activity</Text>
+    <Text size="sm" color="muted">
+      Email digests for account activity
+    </Text>
   </Stack>
   <Switch aria-label="Notifications" />
 </Stack>
 ]]></tsx>
-</pattern>
+</pattern>

package/dist/specs/patterns/stack-as-surface.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<pattern id="stack-as-surface" title="Stack as Surface (avoid extra DOM)">
+  <uses>
+    <ref id="stack" units="meta,usage,props" />
+    <ref id="surface" units="meta,usage,props" />
+    <ref id="text" units="meta" />
+    <ref id="chip" units="meta" />
+  </uses>
+  <do>When a flex cluster also needs Surface chrome (border, color, radius, padding), prefer `Stack render={&lt;Surface … /&gt;}` so layout + chrome share one root. Put gap/align/`fullWidth`/`expandChildren` on Stack; put `border` / `color` / `radius` / padding on the Surface in `render`.</do>
+  <dont>Do not add a CSS class for border/background/radius on a Stack when Surface owns that chrome. Do not wrap Stack in an extra Surface solely for those props when `render` merge is enough. Nest Surface→Stack only when you need separate roots (e.g. Elevator around Surface, concentric nested Surfaces, or chrome that must not sit on the flex host).</dont>
+  <tsx><![CDATA[
+{/* Preferred: single node */}
+<Stack
+  direction="row"
+  columnGap="s"
+  vAlign="center"
+  fullWidth
+  render={<Surface border="all" color={1} radius="m" hPadding="m" vPadding="s" />}
+>
+  <Text size="sm" color="muted">
+    Status
+  </Text>
+  <Chip>Active</Chip>
+</Stack>
+
+{/* OK when a separate Surface root is required (Elevator, nested radius="auto", …) */}
+{/*
+<Elevator elevation={1}>
+  <Surface border="all" color={1} radius="m" hPadding="m" vPadding="s">
+    <Stack direction="row" columnGap="s" vAlign="center" fullWidth>
+      …
+    </Stack>
+  </Surface>
+</Elevator>
+*/}
+]]></tsx>
+</pattern>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.6.0",
+  "version": "2026.6.1",
   "private": false,
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.7.0",
-    "@viraui/foundation": "2026.6.0",
+    "@viraui/foundation": "2026.6.1",
     "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",