@viraui/react 2026.7.0-next.0 → 2026.7.0

package/dist/specs/components/number-field/props.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<props surface="number-field">
+  <when_to_use>
+    <item>Numeric values with optional increment/decrement and label scrub</item>
+    <item>Form fields that submit a number via `name` (min/max/step/format on the same NumberField)</item>
+    <item>Textfield-aligned label / description / error with Field validation</item>
+  </when_to_use>
+  <when_not_to_use>
+    <item>Exposing Group / Decrement / Increment / ScrubArea as public parts — they stay internal</item>
+    <item>Textfield start/end addon API or custom stepper children in v1</item>
+    <item>Exposing a NumberField size or variant prop — steppers stay fixed IconButton `size=&quot;s&quot;` / `variant=&quot;secondary&quot;`</item>
+    <item>Composing a public `NumberField.Input` — chrome and steppers live on NumberField</item>
+  </when_not_to_use>
+  <prop name="description" kind="react">
+    <description>Helper copy rendered with `Field.Description` and `Text` while the field is valid. When a string, also sets `aria-roledescription` on the numeric input.</description>
+  </prop>
+  <prop name="error" kind="react">
+    <description>Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while invalid and dirty.</description>
+  </prop>
+  <prop name="fitContent" kind="react">
+    <description>When `true`, sets `field-sizing: content` on the numeric input only. Steppers stay intrinsic.</description>
+  </prop>
+  <prop name="fullWidth" kind="react">
+    <description>When `true`, field and control row fill the column; only the numeric input flex-grows. Steppers stay intrinsic. Prefer over CSS `width: 100%` on the field.</description>
+  </prop>
+  <prop name="label" kind="react">
+    <description>Visible label rendered with shared internal `FieldLabel`. Hosts scrub when `labelScrub` is true.</description>
+  </prop>
+  <prop name="labelScrub" kind="react">
+    <description>When `true` (default) and `label` is set, wrap the label in Base UI scrub. When `false` or no label, plain field label.</description>
+  </prop>
+  <prop name="stepperPlacement" kind="react">
+    <description>Where steppers sit relative to the input: `split` (default, button|input|button) or `grouped` (both at inline-end; physical right in LTR, left in RTL via document direction).</description>
+  </prop>
+</props>

package/dist/specs/components/number-field/usage.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<usage surface="number-field">
+  <do>Use a single `NumberField` for value/min/max/step/name plus label/helper/steppers</do>
+  <do>Put Field validation props (`invalid`, `dirty`, `touched`, `validate`, …) on NumberField</do>
+  <do>Steppers are fixed IconButton `size=&quot;s&quot;` / `variant=&quot;secondary&quot;` with uniform addon padding — do not expose variant/size</do>
+  <do>Use `fullWidth` when the numeric input should grow; steppers stay compact</do>
+  <do>Turn off label scrub with `labelScrub={false}` when drag-on-label is unwanted</do>
+  <dont>Export or compose public Group / Decrement / Increment / ScrubArea / ScrubAreaCursor</dont>
+  <dont>Compose a public `NumberField.Input` — there is no Input part</dont>
+  <dont>Add Textfield start/end addon API or custom stepper children in v1</dont>
+  <dont>Invent CSS width hacks when `fullWidth` / `fitContent` cover sizing</dont>
+</usage>

package/dist/specs/components/otp-field/meta.xml

@@ -1,11 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <meta id="otp-field" title="OTPField" category="form" shared_contract="otp-field">
-  <summary>Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on Root.</summary>
+  <summary>Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on OTPField.</summary>
   <exports>
     <export name="OTPField" />
-    <export name="OTPField.Root" />
-    <export name="OTPField.Input" />
-    <export name="OTPField.Separator" />
   </exports>
   <related>
     <ref id="textfield" />

package/dist/specs/components/otp-field/patterns.xml

@@ -2,7 +2,7 @@
 <patterns surface="otp-field">
   <example title="Labeled six-slot code">
     <tsx><![CDATA[
-<OTPField.Root
+<OTPField
   length={6}
   label="Verification code"
   description="Enter the 6-character code we sent to your device."
@@ -10,7 +10,7 @@
   {Array.from({ length: 6 }, (_, slotIndex) => (
     <OTPField.Input key={`character-${slotIndex + 1}`} />
   ))}
-</OTPField.Root>
+</OTPField>
 ]]></tsx>
     <notes>Explicit Inputs. First slot uses the field label; later slots get generated names.</notes>
   </example>
@@ -18,14 +18,14 @@
   <example title="Form name + autoSubmit">
     <tsx><![CDATA[
 <Form>
-  <OTPField.Root length={6} name="verificationCode" label="Verification code" autoSubmit>
+  <OTPField length={6} name="verificationCode" label="Verification code" autoSubmit>
     <OTPField.Input />
     <OTPField.Input />
     <OTPField.Input />
     <OTPField.Input />
     <OTPField.Input />
     <OTPField.Input />
-  </OTPField.Root>
+  </OTPField>
 </Form>
 ]]></tsx>
     <notes>One concatenated form value. `autoSubmit` submits when complete. `Form` is `@base-ui/react/form`.</notes>
@@ -33,7 +33,7 @@
 
   <example title="Grouped slots with Separator">
     <tsx><![CDATA[
-<OTPField.Root length={6} label="Verification code">
+<OTPField length={6} label="Verification code">
   <Stack columnGap="s" direction="row">
     <OTPField.Input />
     <OTPField.Input />
@@ -45,21 +45,21 @@
     <OTPField.Input />
     <OTPField.Input />
   </Stack>
-</OTPField.Root>
+</OTPField>
 ]]></tsx>
     <notes>Separator is not an input and is not counted in `length`. Stack owns group gaps.</notes>
   </example>
 
   <example title="Equal-grow in a form column">
     <tsx><![CDATA[
-<OTPField.Root length={6} label="Verification code" fullWidth>
+<OTPField length={6} label="Verification code" fullWidth>
   <OTPField.Input />
   <OTPField.Input />
   <OTPField.Input />
   <OTPField.Input />
   <OTPField.Input />
   <OTPField.Input />
-</OTPField.Root>
+</OTPField>
 ]]></tsx>
     <notes>Default hugs. `fullWidth` fills the column and grows slots equally.</notes>
   </example>

package/dist/specs/components/otp-field/props.xml

@@ -7,9 +7,9 @@
   </when_to_use>
   <when_not_to_use>
     <item>Auto-generating Inputs from `length` — always list one `OTPField.Input` per slot</item>
-    <item>Per-slot label, description, or error — Field chrome is on Root only</item>
+    <item>Per-slot label, description, or error — Field chrome is on OTPField only</item>
     <item>Swapping the slot host via `render` — host is always a native `input`; chrome is Textfield `controlOnly`</item>
-    <item>Inventing CSS `width: 100%` on slots when Root `fullWidth` covers equal-grow</item>
+    <item>Inventing CSS `width: 100%` on slots when OTPField `fullWidth` covers equal-grow</item>
   </when_not_to_use>
   <prop name="description" kind="react">
     <description>Helper copy rendered with `Field.Description` and `Text` while the field is valid.</description>

package/dist/specs/components/otp-field/usage.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="otp-field">
   <do>List exactly `length` `OTPField.Input` children (Array.from or explicit)</do>
-  <do>Put `label` / `description` / `error` on `OTPField.Root` (or `OTPField`)</do>
+  <do>Put `label` / `description` / `error` on `OTPField`</do>
   <do>Let the first slot take the field label; later slots get generated `Character N of {length}` unless you pass `aria-label`</do>
   <do>Group slots with Stack + `OTPField.Separator` when the code is shown as chunks</do>
-  <do>Span the form column with Root `fullWidth` so slots grow equally</do>
-  <do>Keep error copy on Root — invalid wiggle is extra chrome, not the only signal</do>
+  <do>Span the form column with `OTPField` `fullWidth` so slots grow equally</do>
+  <do>Keep error copy on `OTPField` — invalid wiggle is extra chrome, not the only signal</do>
   <dont>Pass `render` on Input — slot is always a native `input`; chrome is Textfield `controlOnly`</dont>
   <dont>Put label/description/error on each slot</dont>
-  <dont>Expect Root to auto-generate Inputs from `length`</dont>
+  <dont>Expect `OTPField` to auto-generate Inputs from `length`</dont>
   <dont>Invent a `groups` prop or width CSS on slots when Stack / `fullWidth` cover layout</dont>
 </usage>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.7.0-next.0" generated="2026-10-06T15:23:28.840Z">
+<index package="@viraui/react" version="2026.7.0" generated="2026-10-08T07:14:12.516Z">
   <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,8 +261,18 @@
       <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 Root.</summary>
+    <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" />

package/package.json

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