@viraui/react 2026.7.0-next.0 → 2026.7.0-next.1

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

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<meta id="disclosure" title="Disclosure" category="layout" shared_contract="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 Accordion for multi-item lists.</summary>
+  <exports>
+    <export name="Disclosure" />
+  </exports>
+  <related>
+    <ref id="accordion" />
+    <ref id="surface" />
+    <ref id="toggle-button" />
+    <ref id="stack" />
+  </related>
+  <units>
+    <unit kind="a11y" href="a11y.xml" />
+    <unit kind="props" href="props.xml" />
+    <unit kind="usage" href="usage.xml" />
+    <unit kind="patterns" href="patterns.xml" />
+  </units>
+  <base_ui href="https://base-ui.com/react/components/collapsible#api-reference" />
+</meta>

package/dist/specs/components/disclosure/patterns.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<patterns surface="disclosure">
+  <example title="Default Surface Trigger + Panel">
+    <tsx><![CDATA[
+<Disclosure>
+  <Disclosure.Trigger hPadding="m" radius="m" vPadding="m">
+    Shipping details
+  </Disclosure.Trigger>
+  <Disclosure.Panel>
+    <Stack hPadding="m" vPadding="m">
+      <Text tone="muted">Orders ship within 2 business days.</Text>
+    </Stack>
+  </Disclosure.Panel>
+</Disclosure>
+]]></tsx>
+    <notes>Default Trigger = Surface with render → Collapsible.Trigger; hoverColor defaults to 2. Panel is motion-only — pad children in the story/app.</notes>
+  </example>
+
+  <example title="Custom icons with interpolate">
+    <tsx><![CDATA[
+<Disclosure>
+  <Disclosure.Trigger
+    hPadding="m"
+    interpolateIcons
+    openIcon={<Xmark size="1rem" />}
+    radius="m"
+    restingIcon={<Plus size="1rem" />}
+    vPadding="m"
+  >
+    Advanced
+  </Disclosure.Trigger>
+  <Disclosure.Panel>
+    <Stack hPadding="m" vPadding="m">
+      {/* advanced controls */}
+    </Stack>
+  </Disclosure.Panel>
+</Disclosure>
+]]></tsx>
+    <notes>ToggleButton-style resting/open icons; interpolate opt-in. For multi-item lists use Accordion instead.</notes>
+  </example>
+
+  <example title="Custom Trigger render">
+    <tsx><![CDATA[
+<Disclosure>
+  <Disclosure.Trigger render={<Button variant="secondary" />}>
+    Show more
+  </Disclosure.Trigger>
+  <Disclosure.Panel>
+    <Text>Extra details</Text>
+  </Disclosure.Panel>
+</Disclosure>
+]]></tsx>
+    <notes>Consumer render replaces the whole Surface + primitive compose; Surface defaults do not apply.</notes>
+  </example>
+</patterns>

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

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<props surface="disclosure">
+  <when_to_use>
+    <item>Single-section progressive disclosure (show more, optional details, FAQ item alone)</item>
+    <item>Expand/collapse one block with Surface chrome Trigger and optional icon pair</item>
+  </when_to_use>
+  <when_not_to_use>
+    <item>Multi-item collapsible lists — use Accordion</item>
+    <item>Expecting default Panel content padding — Panel is a motion shell only</item>
+    <item>Primary navigation that should use links, Tabs, or routes</item>
+  </when_not_to_use>
+  <prop name="Trigger.restingIcon" kind="react">
+    <description>Decorative icon while the panel is closed. Defaults to ChromeChevronEnd when both icon slots are omitted.</description>
+  </prop>
+  <prop name="Trigger.openIcon" kind="react">
+    <description>Decorative icon while the panel is open. Defaults to ChromeChevronDown when both icon slots are omitted. When only restingIcon is set, that icon shows in both states.</description>
+  </prop>
+  <prop name="Trigger.interpolateIcons" kind="react">
+    <description>When dual icons are present, crossfade and light-rotate between them (`data-interpolate=&quot;true&quot;`). When false, swap instantly with no transition.</description>
+  </prop>
+  <prop name="Trigger.iconPosition" kind="react">
+    <description>Logical side of the label where the icon slot sits (`start` | `end`). Default `end`.</description>
+  </prop>
+  <prop name="Trigger.color" kind="react">
+    <description>Surface resting background on the default Trigger host. Omitted on consumer Trigger render.</description>
+  </prop>
+  <prop name="Trigger.hoverColor" kind="react">
+    <description>Surface hover background on the default Trigger host. Defaults to level 2 when omitted. Skipped when consumer supplies Trigger render.</description>
+  </prop>
+  <prop name="Trigger.border" kind="react">
+    <description>Surface contrast border on the default Trigger host.</description>
+  </prop>
+  <prop name="Trigger.borderStyle" kind="react">
+    <description>Surface border style when border is set on the default Trigger host.</description>
+  </prop>
+  <prop name="Trigger.radius" kind="react">
+    <description>Surface corner radius on the default Trigger host.</description>
+  </prop>
+  <prop name="Trigger.hPadding" kind="react">
+    <description>Surface inline padding on the default Trigger host. Defaults to `m` when omitted. Skipped when consumer supplies Trigger render.</description>
+  </prop>
+  <prop name="Trigger.vPadding" kind="react">
+    <description>Surface block padding on the default Trigger host. Defaults to `s` when omitted. Skipped when consumer supplies Trigger render.</description>
+  </prop>
+  <prop name="Trigger.render" kind="react">
+    <description>Replaces the whole default Surface + Collapsible Trigger compose with a custom host.</description>
+  </prop>
+  <prop name="Panel.hiddenUntilFound" kind="react">
+    <description>Allows browser find-in-page to expand the panel; Base UI Collapsible Panel pass-through.</description>
+  </prop>
+  <prop name="Panel.keepMounted" kind="react">
+    <description>Keeps the panel in the DOM while closed; Base UI Collapsible Panel pass-through.</description>
+  </prop>
+</props>

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<usage surface="disclosure">
+  <do>Compose `Disclosure` + `Disclosure.Trigger` + `Disclosure.Panel` for a single expandable section</do>
+  <do>Spread Surface chrome on Trigger (`color`, `hoverColor`, `border`, `radius`, padding) when using the default host</do>
+  <do>Supply Panel children layout (Stack/padding) yourself — Panel has no default content padding</do>
+  <do>Use `restingIcon` / `openIcon` / `interpolateIcons` for ToggleButton-style icon pairs; omit both for chrome chevron End/Down</do>
+  <do>Pass Trigger `render` when replacing the Surface compose entirely</do>
+  <dont>Using Accordion for a single section — Accordion is multi-item</dont>
+  <dont>Expecting Accordion-like default Panel padding from Disclosure.Panel</dont>
+  <dont>Relying on icon animation alone for open/closed meaning under reduced motion</dont>
+</usage>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<a11y surface="number-field">
+  <rule>Visible `label` on `NumberField` names the numeric input via Field.Label / htmlFor.</rule>
+  <rule>Description uses Field description / `aria-describedby` while valid.</rule>
+  <rule>Error copy shares the helper slot and replaces description while invalid and dirty (same as Textfield).</rule>
+  <rule>Internal steppers are icon-only IconButtons named `Decrement` and `Increment`.</rule>
+  <rule>Label scrub is optional chrome (`labelScrub`, default true when label present). Disable with `labelScrub={false}` or omit label.</rule>
+  <rule>Focus order follows `stepperPlacement`: split → decrement, input, increment; grouped → input then both. Grouped visual side follows document direction (inline-end).</rule>
+  <rule>When `description` is a string, NumberField sets `aria-roledescription` on the numeric input to that string; otherwise Base UI default remains.</rule>
+</a11y>

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

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<meta id="number-field" title="NumberField" category="form" shared_contract="number-field">
+  <summary>Single public NumberField with Field chrome, internal IconButton steppers, and optional label scrub. Group / Decrement / Increment / ScrubArea stay internal.</summary>
+  <exports>
+    <export name="NumberField" />
+  </exports>
+  <related>
+    <ref id="textfield" />
+    <ref id="icon-button" />
+    <ref id="fieldset" />
+    <ref id="text" />
+    <ref id="stack" />
+  </related>
+  <units>
+    <unit kind="a11y" href="a11y.xml" />
+    <unit kind="props" href="props.xml" />
+    <unit kind="usage" href="usage.xml" />
+    <unit kind="patterns" href="patterns.xml" />
+  </units>
+  <base_ui href="https://base-ui.com/react/components/number-field#api-reference" />
+</meta>

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

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<patterns surface="number-field">
+  <example title="Labeled amount">
+    <tsx><![CDATA[
+<NumberField
+  defaultValue={100}
+  label="Amount"
+  description="Enter the amount in your local currency."
+/>
+]]></tsx>
+    <notes>Default split steppers. Label scrub on when label is present.</notes>
+  </example>
+
+  <example title="Form name + bounds">
+    <tsx><![CDATA[
+<Form>
+  <NumberField name="quantity" defaultValue={1} min={0} max={99} step={1} label="Quantity" />
+</Form>
+]]></tsx>
+    <notes>`name` / min / max / step / label on NumberField. `Form` is `@base-ui/react/form`.</notes>
+  </example>
+
+  <example title="Stepper placement grouped">
+    <tsx><![CDATA[
+<NumberField defaultValue={5} label="Count" stepperPlacement="grouped" />
+]]></tsx>
+    <notes>Both steppers at inline-end (LTR right / RTL left). Steppers are fixed secondary IconButtons.</notes>
+  </example>
+
+  <example title="Full width input grow">
+    <tsx><![CDATA[
+<NumberField defaultValue={25} label="Amount" fullWidth />
+]]></tsx>
+    <notes>Row fills the column; only the numeric input flex-grows.</notes>
+  </example>
+
+  <example title="Plain label without scrub">
+    <tsx><![CDATA[
+<NumberField defaultValue={10} label="Amount" labelScrub={false} />
+]]></tsx>
+    <notes>Field label without ScrubArea.</notes>
+  </example>
+</patterns>

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-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,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-next.1",
   "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-next.1",
     "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",