@viraui/react 2026.8.0 → 2026.9.1

package/package.json

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

package/dist/specs/patterns/equal-width-actions.xml

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<pattern id="equal-width-actions" title="Equal-width action row">
-  <uses>
-    <ref id="stack" units="meta,usage,props" />
-    <ref id="button" units="meta,props" />
-  </uses>
-  <do>Span or share space with Stack `fullWidth` and/or `expandChildren` (and control `fullWidth` when the surface owns it). Orthogonal: `fullWidth` sizes the Stack; `expandChildren` grows direct children on the main axis.</do>
-  <dont>Do not invent `width: 100%` / `w-full` / per-child `flex: 1` CSS on Button (or other content-sized controls) when Stack can own the fill.</dont>
-  <tsx><![CDATA[
-{/* Full-bleed column CTAs */}
-<Stack fullWidth rowGap="s">
-  <Button>Continue</Button>
-  <Button variant="secondary">Cancel</Button>
-</Stack>
-
-{/* Equal-width row actions — children grow on the main axis. Add fullWidth when the Stack itself should fill its parent width */}
-<Stack expandChildren direction="row" columnGap="s">
-  <Button>Continue</Button>
-  <Button variant="secondary">Cancel</Button>
-</Stack>
-]]></tsx>
-</pattern>

package/dist/specs/patterns/page-chrome.xml

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<pattern id="page-chrome" title="Page chrome with Stack render">
-  <uses>
-    <ref id="stack" units="meta,usage,props" />
-    <ref id="title" units="meta" />
-    <ref id="button" units="meta" />
-  </uses>
-  <do>Own page/section flex with Stack. Pick semantic tags (`header`, `main`, `nav`, `section`, …) via `render={&lt;tag /&gt;}` — keep Stack as the layout engine. CSS modules may set min-block-size / scroll; never `display:flex`.</do>
-  <dont>Do not use raw `header`/`main`/`nav` + `display:flex` / CSS gap for jobs Stack owns. Tag choice ≠ layout engine. Do not pass `render={&lt;div /&gt;}` — Stack already defaults to `div`; omit `render` unless the host changes.</dont>
-  <tsx><![CDATA[
-<Stack rowGap="m" expandChildren>
-  <Stack
-    direction="row"
-    hAlign="space-between"
-    vAlign="center"
-    columnGap="m"
-    hPadding="m"
-    vPadding="m"
-    render={<header />}
-  >
-    <Title render={<h1 />}>Settings</Title>
-    <Button>Save</Button>
-  </Stack>
-  <Stack direction="row" columnGap="m" expandChildren render={<main />}>
-    <Stack rowGap="xs" hPadding="s" vPadding="s" render={<nav aria-label="Settings" />}>
-      {/* nav links */}
-    </Stack>
-    <Stack rowGap="l" expandChildren>
-      {/* content */}
-    </Stack>
-  </Stack>
-</Stack>
-]]></tsx>
-</pattern>

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

@@ -1,37 +0,0 @@
-<?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>