@viraui/react 2026.6.5 → 2026.7.0-next.1

package/dist/specs/components/prose/props.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<props surface="prose">
+  <when_to_use>
+    <item>Long-form copy whose direct children are headings and blocks that need heading-aware vertical rhythm</item>
+    <item>Article, docs, or changelog regions where Stack `rowGap` would make heading→body and body→body the same</item>
+    <item>Optional `gap` density (`s` / `m` / `l`) and region `align` (Title/Text that omit `align` inherit it)</item>
+  </when_to_use>
+  <when_not_to_use>
+    <item>UI chrome spacing (cards, toolbars, form rows) — use Stack `rowGap` / `columnGap`</item>
+    <item>Restyling type, lists, links, or tables — stay on Title / Text / consumer CSS</item>
+    <item>Markdown parse or sanitize — Prose only spaces matching direct children</item>
+  </when_not_to_use>
+  <prop name="align" kind="react">
+    <description>Aligns the region using logical alignment values. Omit so `text-align` inherits from the parent. Title/Text children that omit `align` inherit this value.</description>
+  </prop>
+  <prop name="gap" kind="react">
+    <description>Em density for heading-aware vertical rhythm (`s` &lt; `m` &lt; `l`).</description>
+  </prop>
+  <prop name="ref" kind="react">
+    <description>Ref forwarded to the rendered prose root element.</description>
+  </prop>
+  <prop name="render" kind="react">
+    <description>Replaces the default `div` root using Base UI render semantics.</description>
+  </prop>
+  <prop name="align" kind="css">
+    <description>Region `text-align` (`--vui-prose-align`) when the `align` prop is set; omitted inherits parent `text-align`.</description>
+  </prop>
+  <prop name="gap-blocks" kind="css">
+    <description>Block sibling gap (`--vui-prose-gap-blocks`). Default `2em` (`l`); `s`/`m` assign smaller triples on the root.</description>
+  </prop>
+  <prop name="gap-heading-end" kind="css">
+    <description>Heading block-end gap (`--vui-prose-gap-heading-end`). Default `0.8em` (`l`).</description>
+  </prop>
+  <prop name="gap-heading-start" kind="css">
+    <description>Gap after a heading onto the next sibling (`--vui-prose-gap-heading-start`). Default `1.3em` (`l`).</description>
+  </prop>
+</props>

package/dist/specs/components/prose/usage.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<usage surface="prose">
+  <do>Put headings and blocks as **direct** children — Title/Text with `render={&lt;h* /&gt;}` / `render={&lt;p /&gt;}`, plus native `ul`/`ol`/`blockquote` when needed</do>
+  <do>Pick `gap` `s` / `m` / `l` (default `l`) for density; `align` on Prose to set one `text-align` for the region (omit Title/Text `align` so they inherit)</do>
+  <do>Use `render={&lt;article /&gt;}` (or another landmark) when the region is the document landmark; name it if the landmark needs a name</do>
+  <do>Leave type on Title/Text; Title inside Prose uses `lineHeight=&quot;s&quot;`; override `--vui-prose-gap-*` on the Prose root only when the em triple must change</do>
+  <dont>Using Stack `rowGap` as article rhythm — one gap cannot split heading→body vs body→body</dont>
+  <dont>Expecting default Title/Text `span` hosts to join rhythm — they are not heading/block tags</dont>
+  <dont>Setting `as` — replace the root with `render` only</dont>
+  <dont>Setting `align` on every Title/Text inside Prose when one Prose `align` covers the region</dont>
+  <dont>Setting a widget `role` on Prose, or painting font/color/list/link chrome in Prose CSS</dont>
+</usage>

package/dist/specs/components/separator/props.xml

@@ -30,6 +30,9 @@
   <prop name="vPadding" kind="react">
     <description>Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.</description>
   </prop>
+  <prop name="maxWidth" kind="react">
+    <description>Caps the Stack wrapper inline size. Use for a short dash in a horizontal row.</description>
+  </prop>
   <prop name="border-style" kind="css">
     <description>Separator line border style.</description>
   </prop>

package/dist/specs/components/separator/usage.xml

@@ -5,6 +5,7 @@
   <do>Bookend action strips — Separator above/below a Button row inside Surface (editor footers)</do>
   <do>Vertical gutters or toolbar splits — `orientation=&quot;vertical&quot;` in a row Stack beside content or Button groups</do>
   <do>Token thickness (`size`) and `variant` (e.g. dashed); space with Separator `hPadding`/`vPadding` or parent Stack gap — no custom border CSS</do>
+  <do>Short dash in a row — `maxWidth` token (Stack cap), not extra width CSS</do>
   <dont>Using Select.Separator for general layout dividers — that part is for Select option lists only</dont>
   <dont>Replacing Surface borders or card outlines with Separator — use Surface `border` props for container chrome</dont>
   <dont>Inventing divider margin/gap CSS when parent Stack `rowGap` / `columnGap` and Separator padding props cover spacing</dont>

package/dist/specs/components/text/props.xml

@@ -12,7 +12,7 @@
     <item>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / parent Stack `fullWidth` cover the need</item>
   </when_not_to_use>
   <prop name="align" kind="react">
-    <description>Aligns text using logical alignment values.</description>
+    <description>Aligns text using logical alignment values. Omit so `text-align` inherits from the parent.</description>
   </prop>
   <prop name="balanced" kind="react">
     <description>Enables balanced wrapping for block-like copy.</description>
@@ -78,7 +78,7 @@
     <description>Controls white-space preservation and wrapping behavior.</description>
   </prop>
   <prop name="align" kind="css">
-    <description>Text alignment on the root.</description>
+    <description>Text alignment on the root when the `align` prop is set; omitted inherits parent `text-align`.</description>
   </prop>
   <prop name="font-family" kind="css">
     <description>Font family; family prop presets via data attributes.</description>

package/dist/specs/components/text/usage.xml

@@ -8,6 +8,7 @@
   <do>Hero / status motion: nest Typewriter inside Text when body tone/size should drive the typed line</do>
   <do>Ellipsis: ClampText `render={&lt;Text … /&gt;}` — FitText when copy must scale to fill width instead of truncate</do>
   <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
+  <do>Omit `align` so copy inherits parent `text-align`; pass `align` only to override</do>
   <do>Inline prose link: `Text render={&lt;a href=… /&gt;}` — keeps preflight link chrome (no `data-no-link-style`)</do>
   <dont>Using Text for headings — use Title (`render` for h1–h6)</dont>
   <dont>Putting `data-no-link-style` on Text-as-a when the default underline hover is wanted</dont>

package/dist/specs/components/textfield/meta.xml

@@ -8,6 +8,7 @@
     <ref id="autocomplete" />
     <ref id="fieldset" />
     <ref id="textarea" />
+    <ref id="otp-field" />
     <ref id="select" />
     <ref id="text" />
   </related>

package/dist/specs/components/textfield/props.xml

@@ -5,14 +5,19 @@
     <item>Start or end addon slots inside the shared control group</item>
     <item>Label, description, and error copy with validation states</item>
     <item>Several related Textfields grouped under one section legend as Fieldset children (e.g. billing details)</item>
+    <item>Control chrome inside another Field (`controlOnly`) — native `size` / `fitContent` still apply</item>
   </when_to_use>
   <when_not_to_use>
     <item>Multi-line entry — use Textarea</item>
-    <item>Custom size or variant props — fixed medium treatment</item>
+    <item>Custom visual size or variant props — fixed medium treatment (native HTML `size` is allowed)</item>
     <item>Wrapping a lone Textfield in Fieldset when its own label is sufficient — Fieldset is for multi-field sections or shared legends</item>
     <item>Using Fieldset instead of the Textfield label for a single control</item>
     <item>Inventing CSS `width: 100%` / `w-full` when the `fullWidth` prop covers it</item>
+    <item>`controlOnly` as a standalone labeled field — omit it when you need Field chrome</item>
   </when_not_to_use>
+  <prop name="controlOnly" kind="react">
+    <description>When `true`, skip Field.Root / label / helper. Control group + input only. Use inside another Field (OTP slots). Native `size` and `fitContent` still apply. `label`, `description`, and `error` are ignored.</description>
+  </prop>
   <prop name="description" kind="react">
     <description>Helper copy rendered with `Field.Description` and `Text` while the field is valid.</description>
   </prop>

package/dist/specs/components/textfield/usage.xml

@@ -7,9 +7,10 @@
   <do>Span the form column with Textfield `fullWidth` — open props before inventing width CSS</do>
   <do>`startAddon` / `endAddon` for prefix text, icons, or actions inside the control group — IconButton/Button addons use `size=&quot;s&quot;` and `type=&quot;button&quot;`</do>
   <do>Label, description, and error copy with validation states</do>
+  <do>Compose the control inside another Field with `controlOnly` — native `size` / `fitContent` still apply; skip a second Field.Root</do>
   <dont>Multi-line entry — use Textarea</dont>
   <dont>Inventing `width: 100%` / `w-full` CSS on the Textfield root when `fullWidth` covers it</dont>
-  <dont>Passing unsupported size or variant props — fixed medium treatment</dont>
+  <dont>Passing visual size or variant props — chrome is fixed medium. Native HTML `size` on the input is allowed</dont>
   <dont>Expecting a focus ring when focus is only on addon controls</dont>
   <dont>Wrapping a lone Textfield in Fieldset when its own label is enough</dont>
 </usage>

package/dist/specs/components/title/props.xml

@@ -13,7 +13,7 @@
     <item>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / parent Stack `fullWidth` cover the need</item>
   </when_not_to_use>
   <prop name="align" kind="react">
-    <description>Aligns text using logical alignment values.</description>
+    <description>Aligns text using logical alignment values. Omit so `text-align` inherits from the parent.</description>
   </prop>
   <prop name="balanced" kind="react">
     <description>Enables balanced wrapping for block-like titles.</description>
@@ -73,7 +73,7 @@
     <description>Controls white-space preservation and wrapping behavior.</description>
   </prop>
   <prop name="align" kind="css">
-    <description>Title alignment on the root.</description>
+    <description>Title alignment on the root when the `align` prop is set; omitted inherits parent `text-align`.</description>
   </prop>
   <prop name="font-family" kind="css">
     <description>Heading font family on the root.</description>

package/dist/specs/components/title/usage.xml

@@ -7,6 +7,7 @@
   <do>Truncation: ClampText `render={&lt;Title size=… render={&lt;h* /&gt;} /&gt;}` — FitText wraps Title when short headlines must fill a constrained width</do>
   <do>Fluid clamp across presets (`fluid` / theme `--effect-fluid-typography`); pass `fluid={false}` inside chrome or dense UI</do>
   <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
+  <do>Omit `align` so the heading inherits parent `text-align`; pass `align` only to override</do>
   <do>Title-as-prose-link (`render={&lt;a /&gt;}`) keeps preflight link chrome — omit `data-no-link-style`</do>
   <dont>Assuming `size` changes the HTML tag — choose `render` explicitly</dont>
   <dont>Using Title for long body paragraphs — use Text</dont>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.6.5" generated="2026-10-05T13:29:05.981Z">
+<index package="@viraui/react" version="2026.7.0-next.1" generated="2026-10-07T14:24:21.368Z">
   <categories>
     <category id="layout" />
     <category id="action" />
@@ -151,6 +151,16 @@
       <unit kind="patterns" href="components/dialog/patterns.xml" />
     </units>
   </entry>
+  <entry id="disclosure" category="layout" title="Disclosure">
+    <summary>Single-section expand/collapse wrapping Base UI Collapsible. Default Trigger is Surface with render → Collapsible Trigger; Panel is a height motion shell with no default content padding. Use Accordio…</summary>
+    <units>
+      <unit kind="meta" href="components/disclosure/meta.xml" />
+      <unit kind="a11y" href="components/disclosure/a11y.xml" />
+      <unit kind="props" href="components/disclosure/props.xml" />
+      <unit kind="usage" href="components/disclosure/usage.xml" />
+      <unit kind="patterns" href="components/disclosure/patterns.xml" />
+    </units>
+  </entry>
   <entry id="elevator" category="effect" title="Elevator">
     <summary>No-DOM elevation utility that merges shadow hooks onto valid element children.</summary>
     <units>
@@ -251,6 +261,26 @@
       <unit kind="patterns" href="components/meter/patterns.xml" />
     </units>
   </entry>
+  <entry id="number-field" category="form" title="NumberField">
+    <summary>Single public NumberField with Field chrome, internal IconButton steppers, and optional label scrub. Group / Decrement / Increment / ScrubArea stay internal.</summary>
+    <units>
+      <unit kind="meta" href="components/number-field/meta.xml" />
+      <unit kind="a11y" href="components/number-field/a11y.xml" />
+      <unit kind="props" href="components/number-field/props.xml" />
+      <unit kind="usage" href="components/number-field/usage.xml" />
+      <unit kind="patterns" href="components/number-field/patterns.xml" />
+    </units>
+  </entry>
+  <entry id="otp-field" category="form" title="OTPField">
+    <summary>Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on OTPField.</summary>
+    <units>
+      <unit kind="meta" href="components/otp-field/meta.xml" />
+      <unit kind="a11y" href="components/otp-field/a11y.xml" />
+      <unit kind="props" href="components/otp-field/props.xml" />
+      <unit kind="usage" href="components/otp-field/usage.xml" />
+      <unit kind="patterns" href="components/otp-field/patterns.xml" />
+    </units>
+  </entry>
   <entry id="popover" category="overlay" title="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 trigge…</summary>
     <units>
@@ -271,6 +301,16 @@
       <unit kind="patterns" href="components/progressive-blur/patterns.xml" />
     </units>
   </entry>
+  <entry id="prose" category="typography" title="Prose">
+    <summary>Grouping region that applies heading-aware em rhythm to direct document blocks.</summary>
+    <units>
+      <unit kind="meta" href="components/prose/meta.xml" />
+      <unit kind="a11y" href="components/prose/a11y.xml" />
+      <unit kind="props" href="components/prose/props.xml" />
+      <unit kind="usage" href="components/prose/usage.xml" />
+      <unit kind="patterns" href="components/prose/patterns.xml" />
+    </units>
+  </entry>
   <entry id="radio" category="form" title="Radio">
     <summary>Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.</summary>
     <units>

package/package.json

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