From 502260dcbe457927224afd1af07f15590e7dba34 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 19 Oct 2026 00:28:58 +0530
Subject: [PATCH 1/3] refactor: use one size name per control height

---
 .agents/skills/add-new-component/SKILL.md     |  2 +-
 apps/www/src/components/dataview-demo.tsx     |  6 +--
 apps/www/src/components/docs/footer.tsx       |  4 +-
 apps/www/src/components/tag/tag.module.css    |  2 +-
 apps/www/src/components/tag/tag.tsx           |  4 +-
 .../src/content/docs/(overview)/upgrading.mdx | 38 +++++++++++++++++++
 .../docs/ai-elements/prompt-input/demo.ts     |  4 +-
 .../src/content/docs/components/badge/demo.ts |  6 +--
 .../content/docs/components/badge/index.mdx   |  2 +-
 .../content/docs/components/badge/props.ts    |  2 +-
 .../content/docs/components/button/demo.ts    |  6 +--
 .../content/docs/components/button/index.mdx  |  2 +-
 .../content/docs/components/button/props.ts   |  4 +-
 .../content/docs/components/checkbox/demo.ts  |  8 ++--
 .../docs/components/checkbox/index.mdx        |  2 +-
 .../content/docs/components/checkbox/props.ts |  4 +-
 .../content/docs/components/combobox/demo.ts  |  4 +-
 .../content/docs/components/combobox/props.ts |  4 +-
 .../content/docs/components/command/props.ts  |  4 +-
 .../docs/components/floating-actions/props.ts |  4 +-
 .../src/content/docs/components/input/demo.ts |  4 +-
 .../content/docs/components/input/index.mdx   |  2 +-
 .../content/docs/components/input/props.ts    |  4 +-
 .../src/content/docs/components/radio/demo.ts | 16 ++++----
 .../content/docs/components/radio/index.mdx   |  2 +-
 .../content/docs/components/radio/props.ts    |  8 ++--
 .../content/docs/components/search/demo.ts    |  6 +--
 .../content/docs/components/search/index.mdx  |  2 +-
 .../content/docs/components/search/props.ts   |  4 +-
 .../content/docs/components/separator/demo.ts | 22 ++++++-----
 .../docs/components/separator/index.mdx       | 10 ++---
 .../docs/components/separator/props.ts        |  4 +-
 .../content/docs/components/switch/demo.ts    |  8 ++--
 .../content/docs/components/switch/index.mdx  |  2 +-
 .../content/docs/components/switch/props.ts   |  4 +-
 .../content/docs/components/textarea/demo.ts  |  6 +--
 .../docs/components/textarea/index.mdx        |  2 +-
 .../content/docs/components/textarea/props.ts |  4 +-
 .../components/badge/__tests__/badge.test.tsx |  2 +-
 .../react/components/badge/badge.module.css   |  8 ++--
 packages/react/components/badge/badge.tsx     |  4 +-
 .../button/__tests__/button.test.tsx          |  6 +--
 .../react/components/button/button.module.css |  4 +-
 packages/react/components/button/button.tsx   | 10 ++---
 .../checkbox/__tests__/checkbox.test.tsx      |  6 +--
 .../components/checkbox/checkbox.module.css   |  2 +-
 .../react/components/checkbox/checkbox.tsx    |  4 +-
 .../components/command/command-input.tsx      |  2 +-
 .../data-view/components/timeline.tsx         |  4 +-
 .../components/input/__tests__/input.test.tsx |  4 +-
 .../react/components/input/input.module.css   | 10 ++---
 packages/react/components/input/input.tsx     |  4 +-
 .../components/radio/__tests__/radio.test.tsx | 10 ++---
 .../react/components/radio/radio.module.css   |  6 +--
 packages/react/components/radio/radio.tsx     |  6 +--
 .../separator/__tests__/separator.test.tsx    | 14 +++----
 .../components/separator/separator.module.css | 28 +++++---------
 .../react/components/separator/separator.tsx  | 13 +++----
 .../switch/__tests__/switch.test.tsx          | 10 ++---
 .../react/components/switch/switch.module.css |  2 +-
 packages/react/components/switch/switch.tsx   |  4 +-
 .../text-area/__tests__/text-area.test.tsx    |  4 +-
 .../components/text-area/text-area.module.css |  2 +-
 .../react/components/text-area/text-area.tsx  |  4 +-
 packages/react/figma/badge.figma.ts           |  4 +-
 packages/react/figma/button.figma.ts          |  2 +-
 packages/react/figma/search.figma.ts          |  2 +-
 packages/react/figma/separator.figma.ts       |  4 +-
 packages/react/figma/toolbar.figma.ts         |  2 +-
 69 files changed, 221 insertions(+), 188 deletions(-)

diff --git a/.agents/skills/add-new-component/SKILL.md b/.agents/skills/add-new-component/SKILL.md
index 49dd093e0..0239c4ca4 100644
--- a/.agents/skills/add-new-component/SKILL.md
+++ b/.agents/skills/add-new-component/SKILL.md
@@ -472,7 +472,7 @@ export const playground = {
   type: 'playground',
   controls: {
     variant: { type: 'select', options: ['solid', 'outline'], defaultValue: 'solid' },
-    size: { type: 'select', options: ['small', 'normal'], defaultValue: 'normal' },
+    size: { type: 'select', options: ['small', 'medium'], defaultValue: 'medium' },
     disabled: { type: 'checkbox', defaultValue: false },
     children: { type: 'text', initialValue: 'Click me' }
   },
diff --git a/apps/www/src/components/dataview-demo.tsx b/apps/www/src/components/dataview-demo.tsx
index 473258d9b..db67a1c7b 100644
--- a/apps/www/src/components/dataview-demo.tsx
+++ b/apps/www/src/components/dataview-demo.tsx
@@ -896,16 +896,16 @@ function TaskCard({
         {task.title}
       </Text>
       <Flex align='center' gap={2}>
-        <Badge size='micro' variant={TASK_STATUS_BADGE[task.status]}>
+        <Badge size='xsmall' variant={TASK_STATUS_BADGE[task.status]}>
           {task.status}
         </Badge>
         <DataView.DisplayAccess accessorKey='team'>
-          <Badge size='micro' variant='neutral'>
+          <Badge size='xsmall' variant='neutral'>
             {task.team}
           </Badge>
         </DataView.DisplayAccess>
         <DataView.DisplayAccess accessorKey='priority'>
-          <Badge size='micro' variant='neutral'>
+          <Badge size='xsmall' variant='neutral'>
             {task.priority}
           </Badge>
         </DataView.DisplayAccess>
diff --git a/apps/www/src/components/docs/footer.tsx b/apps/www/src/components/docs/footer.tsx
index ff3689d83..da95451a2 100644
--- a/apps/www/src/components/docs/footer.tsx
+++ b/apps/www/src/components/docs/footer.tsx
@@ -16,7 +16,7 @@ export default function DocsFooter({ url }: DocsFooterProps) {
           <Button
             variant='outline'
             color='neutral'
-            size='normal'
+            size='medium'
             leadingIcon={<ArrowLeft size={16} strokeWidth={1.5} />}
           >
             {neighbours.previous.name}
@@ -30,7 +30,7 @@ export default function DocsFooter({ url }: DocsFooterProps) {
           <Button
             variant='outline'
             color='neutral'
-            size='normal'
+            size='medium'
             trailingIcon={<ArrowRight size={16} strokeWidth={1.5} />}
           >
             {neighbours.next.name}
diff --git a/apps/www/src/components/tag/tag.module.css b/apps/www/src/components/tag/tag.module.css
index 67dcca937..82d680447 100644
--- a/apps/www/src/components/tag/tag.module.css
+++ b/apps/www/src/components/tag/tag.module.css
@@ -3,7 +3,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-.tag.regular {
+.tag.medium {
   border-radius: 28px;
   padding-left: 12px;
   padding-right: 12px;
diff --git a/apps/www/src/components/tag/tag.tsx b/apps/www/src/components/tag/tag.tsx
index 35cc1742a..9f6d207a1 100644
--- a/apps/www/src/components/tag/tag.tsx
+++ b/apps/www/src/components/tag/tag.tsx
@@ -7,7 +7,7 @@ import styles from './tag.module.css';
 
 interface TagProps {
   value: TagType;
-  size?: 'small' | 'regular';
+  size?: 'small' | 'medium';
 }
 
 export default function Tag({ value, size = 'small' }: TagProps) {
@@ -15,7 +15,7 @@ export default function Tag({ value, size = 'small' }: TagProps) {
   return (
     <Badge
       screenReaderText={value}
-      size={size === 'regular' ? 'regular' : 'micro'}
+      size={size === 'medium' ? 'medium' : 'xsmall'}
       variant={value === 'beta' ? 'neutral' : 'gradient'}
       className={cx(styles.tag, styles[size])}
     >
diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
index 82f756aad..b46e7df20 100644
--- a/apps/www/src/content/docs/(overview)/upgrading.mdx
+++ b/apps/www/src/content/docs/(overview)/upgrading.mdx
@@ -116,6 +116,44 @@ These filters used to match by mistake, and now match differently:
   `'2026/1/1T10:30'`, used to be read. It now matches only `neq`, and the
   timeline does not draw it. Store such dates as ISO 8601 (`2026-01-01T10:30`).
 
+## Unreleased: one size name per control height
+
+Controls share one set of size names. The 32px input and button size is
+`medium` everywhere. The pixel sizes do not change, and each component keeps
+its default size, so only code that passes an old value needs a change.
+TypeScript reports each old value.
+
+| Component | Before | After |
+|---|---|---|
+| `Button` | `size="normal"` (default) | `size="medium"` (default) |
+| `Input`, `TextArea`, `Search`, `Combobox.Input`, `Command.Input` | `size="large"` (default) | `size="medium"` (default) |
+| `Checkbox`, `Radio`, `Radio.Group`, `Switch` | `size="large"` (default) | `size="medium"` (default) |
+| `Badge` | `size="micro"` | `size="xsmall"` |
+| `Badge` | `size="regular"` | `size="medium"` |
+
+`small` keeps its name on every component, and `small` is still the `Badge`
+default.
+
+### Separator `size` becomes `variant`
+
+| Before | After |
+|---|---|
+| `size="full"` (default) | `variant="full"` (default) |
+| `size="half"` | `variant="middle"` |
+| `size="small"` | `variant="middle"`, or set the length with a class |
+
+`middle` insets both ends of the line from the container edges: 16px on a
+horizontal line and 8px on a vertical line. The line is centered. It is longer
+than the old `half` (50%) and `small` (20px) lines.
+
+```tsx
+// Before
+<Separator size="half" />
+
+// After
+<Separator variant="middle" />
+```
+
 ## 2.0: `Theme` is rewritten
 
 `Theme` used to put its tokens on `<html>` from an effect, so it could not
diff --git a/apps/www/src/content/docs/ai-elements/prompt-input/demo.ts b/apps/www/src/content/docs/ai-elements/prompt-input/demo.ts
index fbdbbc0d1..40be78e73 100644
--- a/apps/www/src/content/docs/ai-elements/prompt-input/demo.ts
+++ b/apps/www/src/content/docs/ai-elements/prompt-input/demo.ts
@@ -178,7 +178,7 @@ export const editorCapabilitiesDemo = {
       type: 'user',
       group: 'Users',
       icon: <Avatar size={1} fallback="A" />,
-      trailing: <Badge size="micro" variant="neutral">Agent</Badge>
+      trailing: <Badge size="xsmall" variant="neutral">Agent</Badge>
     },
     {
       id: 'u3',
@@ -309,7 +309,7 @@ export const mentionsDemo = {
       label: 'Apsara Assistant',
       type: 'user',
       group: 'Users',
-      trailing: <Badge size="micro" variant="neutral">Agent</Badge>
+      trailing: <Badge size="xsmall" variant="neutral">Agent</Badge>
     },
     { id: 'u3', label: 'Dana Whitfield', type: 'user', group: 'Users' }
   ];
diff --git a/apps/www/src/content/docs/components/badge/demo.ts b/apps/www/src/content/docs/components/badge/demo.ts
index 85e695c1b..6288579e9 100644
--- a/apps/www/src/content/docs/components/badge/demo.ts
+++ b/apps/www/src/content/docs/components/badge/demo.ts
@@ -24,7 +24,7 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['micro', 'small', 'regular'],
+      options: ['xsmall', 'small', 'medium'],
       defaultValue: 'small'
     },
     icon: {
@@ -59,9 +59,9 @@ export const sizesDemo = {
   type: 'code',
   code: `
   <Flex gap={5} align="center">
-    <Badge size="micro">Micro</Badge>
+    <Badge size="xsmall">Extra small</Badge>
     <Badge size="small">Small</Badge>
-    <Badge size="regular">Regular</Badge>
+    <Badge size="medium">Medium</Badge>
   </Flex>`
 };
 
diff --git a/apps/www/src/content/docs/components/badge/index.mdx b/apps/www/src/content/docs/components/badge/index.mdx
index cdf3e1feb..da1b97757 100644
--- a/apps/www/src/content/docs/components/badge/index.mdx
+++ b/apps/www/src/content/docs/components/badge/index.mdx
@@ -36,7 +36,7 @@ Choose between different variants to convey different meanings or importance lev
 
 ### Size
 
-Three sizes. `small` is the default. `regular` matches body text and suits badges that stand alone, for example beside a heading. `micro` fits inside table rows and beside dense labels.
+Three sizes. `small` is the default. `medium` matches body text and suits badges that stand alone, for example beside a heading. `xsmall` fits inside table rows and beside dense labels.
 
 <Demo data={sizesDemo} />
 
diff --git a/apps/www/src/content/docs/components/badge/props.ts b/apps/www/src/content/docs/components/badge/props.ts
index cf77604b1..b812254f6 100644
--- a/apps/www/src/content/docs/components/badge/props.ts
+++ b/apps/www/src/content/docs/components/badge/props.ts
@@ -15,7 +15,7 @@ export interface BadgeProps {
    * Size of the badge
    * @defaultValue "small"
    */
-  size?: 'micro' | 'small' | 'regular';
+  size?: 'xsmall' | 'small' | 'medium';
 
   /** Optional ReactNode to display an icon before the text */
   icon?: React.ReactNode;
diff --git a/apps/www/src/content/docs/components/button/demo.ts b/apps/www/src/content/docs/components/button/demo.ts
index df24c31f0..12964db8b 100644
--- a/apps/www/src/content/docs/components/button/demo.ts
+++ b/apps/www/src/content/docs/components/button/demo.ts
@@ -23,8 +23,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['small', 'normal'],
-      defaultValue: 'normal'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     },
     leadingIcon: { type: 'icon' },
     trailingIcon: { type: 'icon' },
@@ -96,7 +96,7 @@ export const sizesDemo = {
   type: 'code',
   code: `<Flex gap={9} align="center">
     <Button size="small">Small</Button>
-    <Button size="normal">Normal</Button>
+    <Button size="medium">Medium</Button>
   </Flex>`
 };
 export const disabledDemo = {
diff --git a/apps/www/src/content/docs/components/button/index.mdx b/apps/www/src/content/docs/components/button/index.mdx
index 9728d7560..f783c7523 100644
--- a/apps/www/src/content/docs/components/button/index.mdx
+++ b/apps/www/src/content/docs/components/button/index.mdx
@@ -45,7 +45,7 @@ Color carries meaning, not decoration. `danger` for destructive actions, `succes
 
 ### Size
 
-Two sizes. `normal` is the default and fits most layouts. Use `small` inside toolbars, table rows, and other dense surfaces.
+Two sizes. `medium` is the default and fits most layouts. Use `small` inside toolbars, table rows, and other dense surfaces.
 
 <Demo data={sizesDemo} />
 
diff --git a/apps/www/src/content/docs/components/button/props.ts b/apps/www/src/content/docs/components/button/props.ts
index f08e8cdf1..8f8d0cfee 100644
--- a/apps/www/src/content/docs/components/button/props.ts
+++ b/apps/www/src/content/docs/components/button/props.ts
@@ -15,9 +15,9 @@ export type ButtonProps = {
 
   /**
    * Size of the button
-   * @defaultValue "normal"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'normal';
+  size?: 'small' | 'medium';
 
   /**
    * Whether the button is disabled
diff --git a/apps/www/src/content/docs/components/checkbox/demo.ts b/apps/www/src/content/docs/components/checkbox/demo.ts
index 6d51fb0e1..95eff9215 100644
--- a/apps/www/src/content/docs/components/checkbox/demo.ts
+++ b/apps/www/src/content/docs/components/checkbox/demo.ts
@@ -29,8 +29,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     }
   },
   getCode
@@ -62,8 +62,8 @@ export const sizeExamples = {
   type: 'code',
   tabs: [
     {
-      name: 'Large (default)',
-      code: `<Checkbox size="large" />`
+      name: 'Medium (default)',
+      code: `<Checkbox size="medium" />`
     },
     {
       name: 'Small',
diff --git a/apps/www/src/content/docs/components/checkbox/index.mdx b/apps/www/src/content/docs/components/checkbox/index.mdx
index b59ebc89d..cfa52c0ed 100644
--- a/apps/www/src/content/docs/components/checkbox/index.mdx
+++ b/apps/www/src/content/docs/components/checkbox/index.mdx
@@ -36,7 +36,7 @@ A checkbox on its own, then in a group, where a parent can both reflect and driv
 
 ### Size variants
 
-Two sizes. `large` is the default; `small` fits table rows and dense lists.
+Two sizes. `medium` is the default; `small` fits table rows and dense lists.
 
 <Demo data={sizeExamples} />
 
diff --git a/apps/www/src/content/docs/components/checkbox/props.ts b/apps/www/src/content/docs/components/checkbox/props.ts
index 1d40d3887..7c226b34b 100644
--- a/apps/www/src/content/docs/components/checkbox/props.ts
+++ b/apps/www/src/content/docs/components/checkbox/props.ts
@@ -51,9 +51,9 @@ export interface CheckboxProps {
 
   /**
    * The size of the checkbox.
-   * @defaultValue 'large'
+   * @defaultValue 'medium'
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /**
    * Custom render function for the indicator. Receives `(props, state)` where state includes `checked` and `indeterminate`.
diff --git a/apps/www/src/content/docs/components/combobox/demo.ts b/apps/www/src/content/docs/components/combobox/demo.ts
index 71fb48d4b..ca53e99aa 100644
--- a/apps/www/src/content/docs/components/combobox/demo.ts
+++ b/apps/www/src/content/docs/components/combobox/demo.ts
@@ -24,8 +24,8 @@ export const playground = {
     label: { type: 'text', initialValue: 'Fruits' },
     size: {
       type: 'select',
-      options: ['small', 'large'],
-      defaultValue: 'large'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     },
     multiple: {
       type: 'checkbox',
diff --git a/apps/www/src/content/docs/components/combobox/props.ts b/apps/www/src/content/docs/components/combobox/props.ts
index 6908fd723..ac4effc40 100644
--- a/apps/www/src/content/docs/components/combobox/props.ts
+++ b/apps/www/src/content/docs/components/combobox/props.ts
@@ -65,9 +65,9 @@ export interface ComboboxRootProps {
 export interface ComboboxInputProps {
   /**
    * Size variant of the input field.
-   * @default "large"
+   * @default "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Whether the input is disabled. */
   disabled?: boolean;
diff --git a/apps/www/src/content/docs/components/command/props.ts b/apps/www/src/content/docs/components/command/props.ts
index d98976187..a7fa440ad 100644
--- a/apps/www/src/content/docs/components/command/props.ts
+++ b/apps/www/src/content/docs/components/command/props.ts
@@ -69,9 +69,9 @@ export interface CommandInputProps {
 
   /**
    * Size variant of the input field.
-   * @defaultValue "large"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Additional CSS class names. */
   className?: string;
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
index 630583412..b7dcf8ca1 100644
--- a/apps/www/src/content/docs/components/floating-actions/props.ts
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -42,10 +42,10 @@ export interface FloatingActionsSeparatorProps {
   color?: 'primary' | 'secondary' | 'tertiary';
 
   /**
-   * Size variant inherited from the underlying `Separator`.
+   * Variant inherited from the underlying `Separator`.
    * @defaultValue "full"
    */
-  size?: 'small' | 'half' | 'full';
+  variant?: 'full' | 'middle';
 
   /** Additional CSS class names. */
   className?: string;
diff --git a/apps/www/src/content/docs/components/input/demo.ts b/apps/www/src/content/docs/components/input/demo.ts
index 5becc9c14..6a0235c30 100644
--- a/apps/www/src/content/docs/components/input/demo.ts
+++ b/apps/www/src/content/docs/components/input/demo.ts
@@ -17,8 +17,8 @@ export const playground = {
     suffix: { type: 'text', initialValue: '' },
     size: {
       type: 'select',
-      options: ['small', 'large'],
-      initialValue: 'large'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     }
   },
   getCode
diff --git a/apps/www/src/content/docs/components/input/index.mdx b/apps/www/src/content/docs/components/input/index.mdx
index 2b971dae4..6a0d7412e 100644
--- a/apps/www/src/content/docs/components/input/index.mdx
+++ b/apps/www/src/content/docs/components/input/index.mdx
@@ -52,7 +52,7 @@ A single-line text input. `placeholder` hints at the expected value; it is not a
 
 ### Size
 
-Input comes in two sizes: small (24px) and large (32px).
+Input comes in two sizes: `small` (24px) and `medium` (32px).
 
 <Demo data={sizeDemo} />
 
diff --git a/apps/www/src/content/docs/components/input/props.ts b/apps/www/src/content/docs/components/input/props.ts
index cd5a5dba4..fb193a46c 100644
--- a/apps/www/src/content/docs/components/input/props.ts
+++ b/apps/www/src/content/docs/components/input/props.ts
@@ -1,9 +1,9 @@
 export interface InputProps {
   /**
    * Size variant of the input.
-   * @defaultValue "large"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Whether the input is disabled. When true, chips are also disabled and their dismiss buttons are hidden. */
   disabled?: boolean;
diff --git a/apps/www/src/content/docs/components/radio/demo.ts b/apps/www/src/content/docs/components/radio/demo.ts
index 0a13d3276..221e1d8d6 100644
--- a/apps/www/src/content/docs/components/radio/demo.ts
+++ b/apps/www/src/content/docs/components/radio/demo.ts
@@ -31,8 +31,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     },
     disabled: {
       type: 'checkbox',
@@ -72,16 +72,16 @@ export const sizeDemo = {
   type: 'code',
   tabs: [
     {
-      name: 'Large (default)',
+      name: 'Medium (default)',
       code: `
-<Radio.Group defaultValue="1" size="large">
+<Radio.Group defaultValue="1" size="medium">
   <Flex gap={3} align="center">
     <Radio value="1" id="sl1" />
-    <label htmlFor="sl1">Large Option One</label>
+    <label htmlFor="sl1">Medium Option One</label>
   </Flex>
   <Flex gap={3} align="center">
     <Radio value="2" id="sl2" />
-    <label htmlFor="sl2">Large Option Two</label>
+    <label htmlFor="sl2">Medium Option Two</label>
   </Flex>
 </Radio.Group>`
     },
@@ -108,8 +108,8 @@ export const sizeDemo = {
     <label htmlFor="so1">Small (from group)</label>
   </Flex>
   <Flex gap={3} align="center">
-    <Radio value="2" size="large" id="so2" />
-    <label htmlFor="so2">Large (overrides group)</label>
+    <Radio value="2" size="medium" id="so2" />
+    <label htmlFor="so2">Medium (overrides group)</label>
   </Flex>
 </Radio.Group>`
     }
diff --git a/apps/www/src/content/docs/components/radio/index.mdx b/apps/www/src/content/docs/components/radio/index.mdx
index e4c733d4d..9b0bbe1bb 100644
--- a/apps/www/src/content/docs/components/radio/index.mdx
+++ b/apps/www/src/content/docs/components/radio/index.mdx
@@ -29,7 +29,7 @@ Radios always live in a group. The group owns the value; the radios are the opti
 
 ### Size
 
-Two sizes. `large` is the default; `small` fits dense lists. Set `size` on `Radio.Root` and every item follows.
+Two sizes. `medium` is the default; `small` fits dense lists. Set `size` on `Radio.Group` and every item follows.
 
 <Demo data={sizeDemo} />
 
diff --git a/apps/www/src/content/docs/components/radio/props.ts b/apps/www/src/content/docs/components/radio/props.ts
index 46ef4fbc3..41ac60933 100644
--- a/apps/www/src/content/docs/components/radio/props.ts
+++ b/apps/www/src/content/docs/components/radio/props.ts
@@ -19,9 +19,9 @@ export interface RadioGroupProps<Value = string> {
 
   /**
    * The default size applied to all radio items in the group. Can be overridden per item.
-   * @default "large"
+   * @default "medium"
    */
-  size?: 'large' | 'small';
+  size?: 'medium' | 'small';
 
   /** The name of the radio group when submitted as a form field. */
   name?: string;
@@ -49,9 +49,9 @@ export interface RadioProps {
 
   /**
    * The size of the radio button. Overrides the `size` set on `Radio.Group`.
-   * If neither is set, defaults to `"large"` via the group.
+   * If neither is set, defaults to `"medium"` via the group.
    */
-  size?: 'large' | 'small';
+  size?: 'medium' | 'small';
 
   /** The unique identifier for the radio item. */
   id?: string;
diff --git a/apps/www/src/content/docs/components/search/demo.ts b/apps/www/src/content/docs/components/search/demo.ts
index b986557a6..fd1874841 100644
--- a/apps/www/src/content/docs/components/search/demo.ts
+++ b/apps/www/src/content/docs/components/search/demo.ts
@@ -12,8 +12,8 @@ export const playground = {
   controls: {
     size: {
       type: 'select',
-      options: ['small', 'large'],
-      defaultValue: 'large'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     },
     placeholder: { type: 'text', initialValue: 'Search...' },
     disabled: { type: 'checkbox', defaultValue: false },
@@ -26,7 +26,7 @@ export const sizeDemo = {
   type: 'code',
   code: `
   <Flex direction="column" gap={5} align="center">
-    <Search placeholder="Large size search..." />
+    <Search placeholder="Medium size search..." />
     <Search size="small" placeholder="Small size search..." />
   </Flex>`
 };
diff --git a/apps/www/src/content/docs/components/search/index.mdx b/apps/www/src/content/docs/components/search/index.mdx
index febe8ef1e..890d7e7aa 100644
--- a/apps/www/src/content/docs/components/search/index.mdx
+++ b/apps/www/src/content/docs/components/search/index.mdx
@@ -24,7 +24,7 @@ A text input with the search icon already in place. Set its size, whether it can
 
 ### Size
 
-Two sizes. `large` is the default; `small` fits a toolbar or a table header.
+Two sizes. `medium` is the default; `small` fits a toolbar or a table header.
 
 <Demo data={sizeDemo} />
 
diff --git a/apps/www/src/content/docs/components/search/props.ts b/apps/www/src/content/docs/components/search/props.ts
index 91fff7996..b98946f63 100644
--- a/apps/www/src/content/docs/components/search/props.ts
+++ b/apps/www/src/content/docs/components/search/props.ts
@@ -1,9 +1,9 @@
 export interface SearchProps {
   /**
    * Size variant of the search input.
-   * @default large
+   * @default medium
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Placeholder text for the input. */
   placeholder?: string;
diff --git a/apps/www/src/content/docs/components/separator/demo.ts b/apps/www/src/content/docs/components/separator/demo.ts
index b946ba95a..664859ad2 100644
--- a/apps/www/src/content/docs/components/separator/demo.ts
+++ b/apps/www/src/content/docs/components/separator/demo.ts
@@ -10,9 +10,9 @@ export const getCode = (props: ComponentPropsType) => {
 export const playground = {
   type: 'playground',
   controls: {
-    size: {
+    variant: {
       type: 'select',
-      options: ['small', 'half', 'full'],
+      options: ['full', 'middle'],
       defaultValue: 'full'
     },
     color: {
@@ -28,13 +28,12 @@ export const playground = {
   },
   getCode
 };
-export const sizeDemo = {
+export const variantDemo = {
   type: 'code',
   code: `
   <Flex direction="column" gap={9} align="center" style={{width:"400px"}}>
-    <Separator size="small" />
-    <Separator size="half" />
-    <Separator size="full" />
+    <Separator variant="full" />
+    <Separator variant="middle" />
   </Flex>`
 };
 
@@ -50,8 +49,13 @@ export const colorDemo = {
 export const orientationDemo = {
   type: 'code',
   code: `
-  <Flex gap={11} align="center" justify="center" style={{width:"400px",height:"150px"}}>
-    <Separator size="half" />
-    <Separator orientation="vertical" />
+  <Flex direction="column" gap={5} style={{width:"400px"}}>
+    <Text>Above</Text>
+    <Separator />
+    <Flex gap={5} align="center" style={{height:"24px"}}>
+      <Text>Left</Text>
+      <Separator orientation="vertical" />
+      <Text>Right</Text>
+    </Flex>
   </Flex>`
 };
diff --git a/apps/www/src/content/docs/components/separator/index.mdx b/apps/www/src/content/docs/components/separator/index.mdx
index 2c9dc002c..152a984cd 100644
--- a/apps/www/src/content/docs/components/separator/index.mdx
+++ b/apps/www/src/content/docs/components/separator/index.mdx
@@ -4,7 +4,7 @@ description: A visual divider that separates content with support for vertical a
 source: packages/react/components/separator
 ---
 
-import { playground, sizeDemo, colorDemo, orientationDemo } from "./demo.ts";
+import { playground, variantDemo, colorDemo, orientationDemo } from "./demo.ts";
 
 <Demo data={playground} />
 
@@ -20,7 +20,7 @@ import { Separator } from '@raystack/apsara'
 
 ## Usage
 
-Which way the line runs, how thick it is, and what color it takes.
+Which way the line runs, where its ends sit, and what color it takes.
 
 ### Orientation
 
@@ -28,11 +28,11 @@ Which way the line runs, how thick it is, and what color it takes.
 
 <Demo data={orientationDemo} />
 
-### Size
+### Variant
 
-`size` sets how far the rule runs across its container: `small` a short accent, `half` halfway, `full` (the default) edge to edge.
+`full` (the default) runs the rule edge to edge. `middle` insets both ends from the container edges.
 
-<Demo data={sizeDemo} />
+<Demo data={variantDemo} />
 
 ### Color
 
diff --git a/apps/www/src/content/docs/components/separator/props.ts b/apps/www/src/content/docs/components/separator/props.ts
index 9377a8577..f61e8c724 100644
--- a/apps/www/src/content/docs/components/separator/props.ts
+++ b/apps/www/src/content/docs/components/separator/props.ts
@@ -1,8 +1,8 @@
 export interface SeparatorProps {
-  /** Defines the length of the separator.
+  /** Runs the line edge to edge (`full`) or insets both ends (`middle`).
    * @default "full"
    */
-  size?: 'small' | 'half' | 'full';
+  variant?: 'full' | 'middle';
 
   /** Sets the color of the separator.
    * @default "primary"
diff --git a/apps/www/src/content/docs/components/switch/demo.ts b/apps/www/src/content/docs/components/switch/demo.ts
index 23db5deaa..d3f7d0947 100644
--- a/apps/www/src/content/docs/components/switch/demo.ts
+++ b/apps/www/src/content/docs/components/switch/demo.ts
@@ -20,8 +20,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     }
   },
   getCode
@@ -43,8 +43,8 @@ export const sizeDemo = {
   type: 'code',
   code: `
   <Flex gap={9} align="center">
-    <Switch size="large" />
-    <Switch size="large" defaultChecked />
+    <Switch size="medium" />
+    <Switch size="medium" defaultChecked />
     <Switch size="small" />
     <Switch size="small" defaultChecked />
   </Flex>`
diff --git a/apps/www/src/content/docs/components/switch/index.mdx b/apps/www/src/content/docs/components/switch/index.mdx
index f367276f1..ee9eaccbb 100644
--- a/apps/www/src/content/docs/components/switch/index.mdx
+++ b/apps/www/src/content/docs/components/switch/index.mdx
@@ -24,7 +24,7 @@ A switch is on or off. Set its size and starting position, or own the value your
 
 ### Size
 
-Two sizes. `large` is the default; use `small` inside table rows, toolbars, and settings lists where the control sits beside dense text.
+Two sizes. `medium` is the default; use `small` inside table rows, toolbars, and settings lists where the control sits beside dense text.
 
 <Demo data={sizeDemo} />
 
diff --git a/apps/www/src/content/docs/components/switch/props.ts b/apps/www/src/content/docs/components/switch/props.ts
index baa6000c5..7e8a36ebb 100644
--- a/apps/www/src/content/docs/components/switch/props.ts
+++ b/apps/www/src/content/docs/components/switch/props.ts
@@ -16,9 +16,9 @@ export interface SwitchProps {
 
   /**
    * The size of the switch.
-   * @default "large"
+   * @default "medium"
    */
-  size?: 'large' | 'small';
+  size?: 'medium' | 'small';
 
   /** A unique identifier for the switch. */
   id?: string;
diff --git a/apps/www/src/content/docs/components/textarea/demo.ts b/apps/www/src/content/docs/components/textarea/demo.ts
index c0db36fab..3997f28b1 100644
--- a/apps/www/src/content/docs/components/textarea/demo.ts
+++ b/apps/www/src/content/docs/components/textarea/demo.ts
@@ -16,8 +16,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     },
     variant: {
       type: 'select',
@@ -87,7 +87,7 @@ export const onValueChangeDemo = {
 export const sizeDemo = {
   type: 'code',
   code: `<Flex direction="column" gap={5} style={{ width: 400 }}>
-  <TextArea placeholder="Large size (default)" />
+  <TextArea placeholder="Medium size (default)" />
   <TextArea placeholder="Small size" size="small" />
 </Flex>`
 };
diff --git a/apps/www/src/content/docs/components/textarea/index.mdx b/apps/www/src/content/docs/components/textarea/index.mdx
index 4f013617e..46237c640 100644
--- a/apps/www/src/content/docs/components/textarea/index.mdx
+++ b/apps/www/src/content/docs/components/textarea/index.mdx
@@ -49,7 +49,7 @@ A multi-line text input. It grows with `rows` rather than with content, so set a
 
 ### Size
 
-TextArea comes in two sizes: `large` (default) and `small`.
+TextArea comes in two sizes: `medium` (default) and `small`.
 
 <Demo data={sizeDemo} />
 
diff --git a/apps/www/src/content/docs/components/textarea/props.ts b/apps/www/src/content/docs/components/textarea/props.ts
index 90b2bcb32..c0262afd4 100644
--- a/apps/www/src/content/docs/components/textarea/props.ts
+++ b/apps/www/src/content/docs/components/textarea/props.ts
@@ -1,9 +1,9 @@
 export interface TextAreaProps {
   /**
    * Size variant of the textarea.
-   * @defaultValue "large"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /**
    * Visual variant of the textarea.
diff --git a/packages/react/components/badge/__tests__/badge.test.tsx b/packages/react/components/badge/__tests__/badge.test.tsx
index 1300c6dde..cd57f5b4e 100644
--- a/packages/react/components/badge/__tests__/badge.test.tsx
+++ b/packages/react/components/badge/__tests__/badge.test.tsx
@@ -54,7 +54,7 @@ describe('Badge', () => {
   });
 
   describe('Sizes', () => {
-    const sizes = ['micro', 'small', 'regular'] as const;
+    const sizes = ['xsmall', 'small', 'medium'] as const;
 
     it.each(sizes)('renders %s size correctly', size => {
       const { container } = render(<Badge size={size}>Badge</Badge>);
diff --git a/packages/react/components/badge/badge.module.css b/packages/react/components/badge/badge.module.css
index 57cfbb358..c3d0ea99e 100644
--- a/packages/react/components/badge/badge.module.css
+++ b/packages/react/components/badge/badge.module.css
@@ -12,7 +12,7 @@
 }
 
 /* Sizes */
-.badge-micro {
+.badge-xsmall {
   font-size: var(--rs-font-size-micro);
   line-height: var(--rs-line-height-micro);
   letter-spacing: var(--rs-letter-spacing-micro);
@@ -28,7 +28,7 @@
   height: calc(22px * var(--rs-scaling, 1));
 }
 
-.badge-regular {
+.badge-medium {
   font-size: var(--rs-font-size-regular);
   line-height: var(--rs-line-height-regular);
   letter-spacing: var(--rs-letter-spacing-regular);
@@ -78,7 +78,7 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-.badge-micro .icon {
+.badge-xsmall .icon {
   /* Todo: var does not exist for 10px */
   width: calc(10px * var(--rs-scaling, 1));
   height: calc(10px * var(--rs-scaling, 1));
@@ -89,7 +89,7 @@
   height: var(--rs-space-4);
 }
 
-.badge-regular .icon {
+.badge-medium .icon {
   /* Todo: var does not exist for 14px */
   width: calc(14px * var(--rs-scaling, 1));
   height: calc(14px * var(--rs-scaling, 1));
diff --git a/packages/react/components/badge/badge.tsx b/packages/react/components/badge/badge.tsx
index f3d338e49..151e21e31 100644
--- a/packages/react/components/badge/badge.tsx
+++ b/packages/react/components/badge/badge.tsx
@@ -16,9 +16,9 @@ const badge = cva(styles['badge'], {
       gradient: styles['badge-gradient']
     },
     size: {
-      micro: styles['badge-micro'],
+      xsmall: styles['badge-xsmall'],
       small: styles['badge-small'],
-      regular: styles['badge-regular']
+      medium: styles['badge-medium']
     }
   },
   defaultVariants: {
diff --git a/packages/react/components/button/__tests__/button.test.tsx b/packages/react/components/button/__tests__/button.test.tsx
index dbafbd9ad..37b5ff2e7 100644
--- a/packages/react/components/button/__tests__/button.test.tsx
+++ b/packages/react/components/button/__tests__/button.test.tsx
@@ -76,7 +76,7 @@ describe('Button', () => {
   });
 
   describe('Sizes', () => {
-    const sizes = ['small', 'normal'] as const;
+    const sizes = ['small', 'medium'] as const;
 
     it.each(sizes)('renders %s size correctly', size => {
       render(<Button size={size}>Button</Button>);
@@ -84,10 +84,10 @@ describe('Button', () => {
       expect(button).toHaveClass(styles[`button-${size}`]);
     });
 
-    it('defaults to normal size', () => {
+    it('defaults to medium size', () => {
       render(<Button>Button</Button>);
       const button = screen.getByRole('button');
-      expect(button).toHaveClass(styles['button-normal']);
+      expect(button).toHaveClass(styles['button-medium']);
     });
   });
 
diff --git a/packages/react/components/button/button.module.css b/packages/react/components/button/button.module.css
index e0a8e595e..7606af7ce 100644
--- a/packages/react/components/button/button.module.css
+++ b/packages/react/components/button/button.module.css
@@ -64,7 +64,7 @@
   letter-spacing: var(--rs-letter-spacing-mini);
 }
 
-.button-normal {
+.button-medium {
   padding: var(--rs-space-3) var(--rs-space-4);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
@@ -232,7 +232,7 @@
   padding: var(--rs-space-2) var(--rs-space-6);
 }
 
-.loader-only-button-normal {
+.loader-only-button-medium {
   padding: var(--rs-space-3) var(--rs-space-8);
 }
 
diff --git a/packages/react/components/button/button.tsx b/packages/react/components/button/button.tsx
index bfdb654e1..4d9c928eb 100644
--- a/packages/react/components/button/button.tsx
+++ b/packages/react/components/button/button.tsx
@@ -16,7 +16,7 @@ const button = cva(styles['button'], {
     },
     size: {
       small: styles['button-small'],
-      normal: styles['button-normal']
+      medium: styles['button-medium']
     },
     disabled: {
       true: styles['button-disabled']
@@ -115,15 +115,15 @@ const button = cva(styles['button'], {
   ],
   defaultVariants: {
     variant: 'solid',
-    size: 'normal',
+    size: 'medium',
     color: 'accent'
   }
 });
 
-const getLoaderOnlyClass = (size: 'small' | 'normal' | null) =>
+const getLoaderOnlyClass = (size: 'small' | 'medium' | null) =>
   size === 'small'
     ? styles['loader-only-button-small']
-    : styles['loader-only-button-normal'];
+    : styles['loader-only-button-medium'];
 
 export type ButtonProps = VariantProps<typeof button> &
   ButtonPrimitive.Props & {
@@ -138,7 +138,7 @@ export const Button = ({
   className,
   variant = 'solid',
   color = 'accent',
-  size = 'normal',
+  size = 'medium',
   radius,
   disabled,
   loading,
diff --git a/packages/react/components/checkbox/__tests__/checkbox.test.tsx b/packages/react/components/checkbox/__tests__/checkbox.test.tsx
index cb4fb60f9..b082da537 100644
--- a/packages/react/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/react/components/checkbox/__tests__/checkbox.test.tsx
@@ -32,7 +32,7 @@ describe('Checkbox', () => {
   });
 
   describe('Sizes', () => {
-    const sizes = ['small', 'large'] as const;
+    const sizes = ['small', 'medium'] as const;
     sizes.forEach(size => {
       it(`renders ${size} size`, () => {
         render(<Checkbox size={size} />);
@@ -41,10 +41,10 @@ describe('Checkbox', () => {
       });
     });
 
-    it('renders large size by default', () => {
+    it('renders medium size by default', () => {
       render(<Checkbox />);
       const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveClass(styles.large);
+      expect(checkbox).toHaveClass(styles.medium);
     });
   });
 
diff --git a/packages/react/components/checkbox/checkbox.module.css b/packages/react/components/checkbox/checkbox.module.css
index 66a7e3bb5..208550a6b 100644
--- a/packages/react/components/checkbox/checkbox.module.css
+++ b/packages/react/components/checkbox/checkbox.module.css
@@ -26,7 +26,7 @@
 }
 
 /* Size variants */
-.large {
+.medium {
   width: var(--rs-space-5);
   height: var(--rs-space-5);
   min-width: var(--rs-space-5);
diff --git a/packages/react/components/checkbox/checkbox.tsx b/packages/react/components/checkbox/checkbox.tsx
index ec0616613..7848d1684 100644
--- a/packages/react/components/checkbox/checkbox.tsx
+++ b/packages/react/components/checkbox/checkbox.tsx
@@ -50,11 +50,11 @@ const checkboxVariants = cva(styles.checkbox, {
   variants: {
     size: {
       small: styles.small,
-      large: styles.large
+      medium: styles.medium
     }
   },
   defaultVariants: {
-    size: 'large'
+    size: 'medium'
   }
 });
 
diff --git a/packages/react/components/command/command-input.tsx b/packages/react/components/command/command-input.tsx
index 4543e18b7..5faba6751 100644
--- a/packages/react/components/command/command-input.tsx
+++ b/packages/react/components/command/command-input.tsx
@@ -19,7 +19,7 @@ export const CommandInput = ({
   ref,
   leadingIcon,
   autoFocus = true,
-  size = 'large',
+  size = 'medium',
   placeholder = 'Search...',
   ...props
 }: CommandInputProps) => {
diff --git a/packages/react/components/data-view/components/timeline.tsx b/packages/react/components/data-view/components/timeline.tsx
index 209adaeb7..5bb1f50d2 100644
--- a/packages/react/components/data-view/components/timeline.tsx
+++ b/packages/react/components/data-view/components/timeline.tsx
@@ -1634,7 +1634,7 @@ export function DataViewTimeline<TData>({
             style={{ left: marker.x }}
             data-slot='data-view-timeline-axis-marker'
           >
-            <Badge size='micro' variant={MARKER_BADGE_VARIANT[marker.variant]}>
+            <Badge size='xsmall' variant={MARKER_BADGE_VARIANT[marker.variant]}>
               {marker.label}
             </Badge>
           </div>
@@ -1646,7 +1646,7 @@ export function DataViewTimeline<TData>({
             style={{ left: timeScale.x(cursorTime) }}
             data-slot='data-view-timeline-axis-cursor'
           >
-            <Badge size='micro' variant='neutral'>
+            <Badge size='xsmall' variant='neutral'>
               {cursorLabel(cursorTime, scale)}
             </Badge>
           </div>
diff --git a/packages/react/components/input/__tests__/input.test.tsx b/packages/react/components/input/__tests__/input.test.tsx
index 5b6d46d41..5c17adc6b 100644
--- a/packages/react/components/input/__tests__/input.test.tsx
+++ b/packages/react/components/input/__tests__/input.test.tsx
@@ -38,10 +38,10 @@ describe('Input', () => {
   });
 
   describe('Sizes', () => {
-    it('renders large size by default', () => {
+    it('renders medium size by default', () => {
       const { container } = render(<Input />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveClass(styles['size-large']);
+      expect(wrapper).toHaveClass(styles['size-medium']);
     });
 
     it('renders small size when specified', () => {
diff --git a/packages/react/components/input/input.module.css b/packages/react/components/input/input.module.css
index 36424cf37..87c5ad75c 100644
--- a/packages/react/components/input/input.module.css
+++ b/packages/react/components/input/input.module.css
@@ -147,11 +147,11 @@
 }
 
 /* Size variants */
-.size-large {
+.size-medium {
   min-height: var(--rs-space-9);
 }
 
-.size-large .input-field {
+.size-medium .input-field {
   height: var(--rs-space-9);
 }
 
@@ -170,7 +170,7 @@
   padding-bottom: 0;
 }
 
-.size-large .chip-input-container {
+.size-medium .chip-input-container {
   min-height: var(--rs-space-9);
 }
 
@@ -198,8 +198,8 @@
   height: auto;
 }
 
-.size-large .prefix,
-.size-large .suffix {
+.size-medium .prefix,
+.size-medium .suffix {
   height: 22px;
 }
 
diff --git a/packages/react/components/input/input.tsx b/packages/react/components/input/input.tsx
index 2199c9597..e8b9c4dd3 100644
--- a/packages/react/components/input/input.tsx
+++ b/packages/react/components/input/input.tsx
@@ -11,7 +11,7 @@ const inputWrapper = cva(styles['input-wrapper'], {
     ...radiusVariants,
     size: {
       small: styles['size-small'],
-      large: styles['size-large']
+      medium: styles['size-medium']
     },
     variant: {
       default: styles['variant-default'],
@@ -19,7 +19,7 @@ const inputWrapper = cva(styles['input-wrapper'], {
     }
   },
   defaultVariants: {
-    size: 'large',
+    size: 'medium',
     variant: 'default'
   }
 });
diff --git a/packages/react/components/radio/__tests__/radio.test.tsx b/packages/react/components/radio/__tests__/radio.test.tsx
index 452413bcf..78efc134d 100644
--- a/packages/react/components/radio/__tests__/radio.test.tsx
+++ b/packages/react/components/radio/__tests__/radio.test.tsx
@@ -261,7 +261,7 @@ describe('Radio', () => {
   });
 
   describe('Sizes', () => {
-    const sizes = ['small', 'large'] as const;
+    const sizes = ['small', 'medium'] as const;
     sizes.forEach(size => {
       it(`renders ${size} size`, () => {
         render(
@@ -274,14 +274,14 @@ describe('Radio', () => {
       });
     });
 
-    it('renders large size by default on the group', () => {
+    it('renders medium size by default on the group', () => {
       render(
         <Radio.Group>
           <Radio value='option1' />
         </Radio.Group>
       );
       const group = screen.getByRole('radiogroup');
-      expect(group).toHaveClass(styles['group-large']);
+      expect(group).toHaveClass(styles['group-medium']);
     });
 
     it('applies radioitem base class with size variant', () => {
@@ -308,11 +308,11 @@ describe('Radio', () => {
     it('item size overrides group size', () => {
       render(
         <Radio.Group size='small'>
-          <Radio value='option1' size='large' />
+          <Radio value='option1' size='medium' />
         </Radio.Group>
       );
       const radio = screen.getByRole('radio');
-      expect(radio).toHaveClass(styles.large);
+      expect(radio).toHaveClass(styles.medium);
     });
   });
 
diff --git a/packages/react/components/radio/radio.module.css b/packages/react/components/radio/radio.module.css
index d03dbe35e..185fdd285 100644
--- a/packages/react/components/radio/radio.module.css
+++ b/packages/react/components/radio/radio.module.css
@@ -24,8 +24,8 @@
 }
 
 /* Low specificity via :where(), so an item-level size wins. */
-:where(.group-large) .radioitem,
-.radioitem.large {
+:where(.group-medium) .radioitem,
+.radioitem.medium {
   width: var(--rs-space-5);
   height: var(--rs-space-5);
   min-width: var(--rs-space-5);
@@ -130,7 +130,7 @@
   height: var(--rs-radius-2);
 }
 
-.radioitem.large .indicator::after {
+.radioitem.medium .indicator::after {
   width: var(--rs-radius-3);
   height: var(--rs-radius-3);
 }
diff --git a/packages/react/components/radio/radio.tsx b/packages/react/components/radio/radio.tsx
index a12d5f458..523cf7090 100644
--- a/packages/react/components/radio/radio.tsx
+++ b/packages/react/components/radio/radio.tsx
@@ -13,12 +13,12 @@ const radioGroupVariants = cva(styles.group, {
     },
     size: {
       small: styles['group-small'],
-      large: styles['group-large']
+      medium: styles['group-medium']
     }
   },
   defaultVariants: {
     orientation: 'vertical',
-    size: 'large'
+    size: 'medium'
   }
 });
 
@@ -26,7 +26,7 @@ const radioVariants = cva(styles.radioitem, {
   variants: {
     size: {
       small: styles.small,
-      large: styles.large
+      medium: styles.medium
     }
   }
 });
diff --git a/packages/react/components/separator/__tests__/separator.test.tsx b/packages/react/components/separator/__tests__/separator.test.tsx
index 9fbc6c7e1..f233be61a 100644
--- a/packages/react/components/separator/__tests__/separator.test.tsx
+++ b/packages/react/components/separator/__tests__/separator.test.tsx
@@ -41,19 +41,19 @@ describe('Separator', () => {
     });
   });
 
-  describe('Sizes', () => {
-    const sizes = ['small', 'half', 'full'] as const;
+  describe('Variants', () => {
+    const variants = ['full', 'middle'] as const;
 
-    it.each(sizes)('renders %s size correctly', size => {
-      render(<Separator size={size} />);
+    it.each(variants)('renders %s variant correctly', variant => {
+      render(<Separator variant={variant} />);
       const separator = screen.getByRole('separator');
-      expect(separator).toHaveClass(styles[`separator-${size}`]);
+      expect(separator).toHaveClass(styles[`variant-${variant}`]);
     });
 
-    it('defaults to full size', () => {
+    it('defaults to full variant', () => {
       render(<Separator />);
       const separator = screen.getByRole('separator');
-      expect(separator).toHaveClass(styles['separator-full']);
+      expect(separator).toHaveClass(styles['variant-full']);
     });
   });
 
diff --git a/packages/react/components/separator/separator.module.css b/packages/react/components/separator/separator.module.css
index b3f47bc53..a1fd9879d 100644
--- a/packages/react/components/separator/separator.module.css
+++ b/packages/react/components/separator/separator.module.css
@@ -17,32 +17,24 @@
   background-color: var(--rs-color-border-base-tertiary);
 }
 
-.separator-small[data-orientation="horizontal"] {
+.variant-full[data-orientation="horizontal"] {
   height: 1px;
-  width: var(--rs-space-6);
-}
-
-.separator-small[data-orientation="vertical"] {
-  width: 1px;
-  height: var(--rs-space-6);
-}
-
-.separator-half[data-orientation="horizontal"] {
-  height: 1px;
-  width: 50%;
+  width: 100%;
 }
 
-.separator-half[data-orientation="vertical"] {
+.variant-full[data-orientation="vertical"] {
   width: 1px;
-  height: 50%;
+  height: 100%;
 }
 
-.separator-full[data-orientation="horizontal"] {
+.variant-middle[data-orientation="horizontal"] {
   height: 1px;
-  width: 100%;
+  width: calc(100% - 2 * var(--rs-space-5));
+  margin-inline: auto;
 }
 
-.separator-full[data-orientation="vertical"] {
+.variant-middle[data-orientation="vertical"] {
   width: 1px;
-  height: 100%;
+  height: calc(100% - 2 * var(--rs-space-3));
+  margin-block: auto;
 }
diff --git a/packages/react/components/separator/separator.tsx b/packages/react/components/separator/separator.tsx
index dfcd38627..f24afd631 100644
--- a/packages/react/components/separator/separator.tsx
+++ b/packages/react/components/separator/separator.tsx
@@ -5,10 +5,9 @@ import styles from './separator.module.css';
 
 const separator = cva(styles.separator, {
   variants: {
-    size: {
-      small: styles['separator-small'],
-      half: styles['separator-half'],
-      full: styles['separator-full']
+    variant: {
+      full: styles['variant-full'],
+      middle: styles['variant-middle']
     },
     color: {
       primary: styles['separator-primary'],
@@ -17,7 +16,7 @@ const separator = cva(styles.separator, {
     }
   },
   defaultVariants: {
-    size: 'full',
+    variant: 'full',
     color: 'primary'
   }
 });
@@ -36,7 +35,7 @@ export type SeparatorProps = SeparatorPrimitive.Props &
 export function Separator({
   className,
   orientation = 'horizontal',
-  size,
+  variant,
   color,
   decorative,
   ...props
@@ -52,7 +51,7 @@ export function Separator({
     <SeparatorPrimitive
       data-slot='separator'
       orientation={orientation}
-      className={separator({ size, color, className })}
+      className={separator({ variant, color, className })}
       {...decorativeProps}
       {...props}
     />
diff --git a/packages/react/components/switch/__tests__/switch.test.tsx b/packages/react/components/switch/__tests__/switch.test.tsx
index 73265f919..e423b3701 100644
--- a/packages/react/components/switch/__tests__/switch.test.tsx
+++ b/packages/react/components/switch/__tests__/switch.test.tsx
@@ -41,7 +41,7 @@ describe('Switch', () => {
   });
 
   describe('Sizes', () => {
-    const sizes = ['small', 'large'] as const;
+    const sizes = ['small', 'medium'] as const;
     sizes.forEach(size => {
       it(`renders ${size} size`, () => {
         render(<Switch size={size} />);
@@ -49,10 +49,10 @@ describe('Switch', () => {
         expect(switchElement).toHaveClass(styles[size]);
       });
     });
-    it('renders large size by default', () => {
+    it('renders medium size by default', () => {
       render(<Switch />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass(styles.large);
+      expect(switchElement).toHaveClass(styles.medium);
     });
   });
 
@@ -120,10 +120,10 @@ describe('Switch', () => {
       expect(switchElement).toHaveAttribute('data-disabled');
       expect(switchElement).toHaveClass(styles.small);
 
-      rerender(<Switch disabled size='large' />);
+      rerender(<Switch disabled size='medium' />);
       switchElement = screen.getByRole('switch');
       expect(switchElement).toHaveAttribute('data-disabled');
-      expect(switchElement).toHaveClass(styles.large);
+      expect(switchElement).toHaveClass(styles.medium);
     });
   });
 
diff --git a/packages/react/components/switch/switch.module.css b/packages/react/components/switch/switch.module.css
index ddbc03ba5..6bc601b12 100644
--- a/packages/react/components/switch/switch.module.css
+++ b/packages/react/components/switch/switch.module.css
@@ -21,7 +21,7 @@
 
 /* Thumb travel + thumb + inset, from the thumb's own tokens, so the thumb
    stays inside the track at every scaling. */
-.switch.large {
+.switch.medium {
   width: calc(var(--rs-space-5) * 2 + var(--rs-space-1));
   height: var(--rs-space-6);
 }
diff --git a/packages/react/components/switch/switch.tsx b/packages/react/components/switch/switch.tsx
index 2ccc25b5e..e22398401 100644
--- a/packages/react/components/switch/switch.tsx
+++ b/packages/react/components/switch/switch.tsx
@@ -7,12 +7,12 @@ import styles from './switch.module.css';
 const switchVariants = cva(styles.switch, {
   variants: {
     size: {
-      large: styles.large,
+      medium: styles.medium,
       small: styles.small
     }
   },
   defaultVariants: {
-    size: 'large'
+    size: 'medium'
   }
 });
 
diff --git a/packages/react/components/text-area/__tests__/text-area.test.tsx b/packages/react/components/text-area/__tests__/text-area.test.tsx
index a8d6e274e..03a803e4e 100644
--- a/packages/react/components/text-area/__tests__/text-area.test.tsx
+++ b/packages/react/components/text-area/__tests__/text-area.test.tsx
@@ -135,10 +135,10 @@ describe('TextArea', () => {
   });
 
   describe('Sizes', () => {
-    it('renders large size by default', () => {
+    it('renders medium size by default', () => {
       render(<TextArea />);
       const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveClass(styles['size-large']);
+      expect(textarea).toHaveClass(styles['size-medium']);
     });
 
     it('renders small size when specified', () => {
diff --git a/packages/react/components/text-area/text-area.module.css b/packages/react/components/text-area/text-area.module.css
index ff414b7d0..e9d96da7b 100644
--- a/packages/react/components/text-area/text-area.module.css
+++ b/packages/react/components/text-area/text-area.module.css
@@ -53,7 +53,7 @@
 }
 
 /* Size variants */
-.size-large {
+.size-medium {
   padding: var(--rs-space-3);
 }
 
diff --git a/packages/react/components/text-area/text-area.tsx b/packages/react/components/text-area/text-area.tsx
index 33c2ad180..0919aa27e 100644
--- a/packages/react/components/text-area/text-area.tsx
+++ b/packages/react/components/text-area/text-area.tsx
@@ -11,7 +11,7 @@ const textAreaVariants = cva(styles.textarea, {
     ...radiusVariants,
     size: {
       small: styles['size-small'],
-      large: styles['size-large']
+      medium: styles['size-medium']
     },
     variant: {
       default: styles['variant-default'],
@@ -19,7 +19,7 @@ const textAreaVariants = cva(styles.textarea, {
     }
   },
   defaultVariants: {
-    size: 'large',
+    size: 'medium',
     variant: 'default'
   }
 });
diff --git a/packages/react/figma/badge.figma.ts b/packages/react/figma/badge.figma.ts
index 7fb6f28b0..c8eff45db 100644
--- a/packages/react/figma/badge.figma.ts
+++ b/packages/react/figma/badge.figma.ts
@@ -12,8 +12,8 @@ const variant = figma.selectedInstance.getEnum('Variant', {
   Gradient: 'gradient'
 });
 const size = figma.selectedInstance.getEnum('Size', {
-  Micro: 'micro',
-  Regular: 'regular'
+  Micro: 'xsmall',
+  Regular: 'medium'
 });
 // "Icon" BOOLEAN toggles the leading icon; resolve the child instance named "Icon"
 // when enabled (guarded, since findInstance returns an ErrorHandle when absent).
diff --git a/packages/react/figma/button.figma.ts b/packages/react/figma/button.figma.ts
index 00e2660b5..d2048414e 100644
--- a/packages/react/figma/button.figma.ts
+++ b/packages/react/figma/button.figma.ts
@@ -4,7 +4,7 @@
 
 import figma from 'figma';
 
-// Component defaults (variant 'solid', color 'accent', size 'normal') are left
+// Component defaults (variant 'solid', color 'accent', size 'medium') are left
 // unmapped so getEnum returns undefined and renderProp omits the redundant prop.
 const variant = figma.selectedInstance.getEnum('Variant', {
   Outline: 'outline',
diff --git a/packages/react/figma/search.figma.ts b/packages/react/figma/search.figma.ts
index baabc83ab..4852cf953 100644
--- a/packages/react/figma/search.figma.ts
+++ b/packages/react/figma/search.figma.ts
@@ -23,7 +23,7 @@ const value = figma.selectedInstance.getEnum('State', {
 // boolean has no public prop, so it is intentionally not mapped.
 const size = figma.selectedInstance.getEnum('Size', {
   Small: 'small',
-  Large: 'large'
+  Large: 'medium'
 });
 const variant = figma.selectedInstance.getEnum('Outline', {
   False: 'borderless'
diff --git a/packages/react/figma/separator.figma.ts b/packages/react/figma/separator.figma.ts
index c5b31b825..650c8597d 100644
--- a/packages/react/figma/separator.figma.ts
+++ b/packages/react/figma/separator.figma.ts
@@ -6,8 +6,8 @@ import figma from 'figma';
 
 // Figma "Divider" exposes only the `Outerspace` VARIANT (Small/None), which
 // controls the surrounding margin/spacing, and there is no corresponding public
-// prop on the code Separator (its `size` controls line length, not spacing),
-// so no prop is emitted.
+// prop on the code Separator (its `variant` insets the line ends, not the
+// spacing around it), so no prop is emitted.
 
 export default {
   id: 'Separator',
diff --git a/packages/react/figma/toolbar.figma.ts b/packages/react/figma/toolbar.figma.ts
index 7fa970b90..07c74b120 100644
--- a/packages/react/figma/toolbar.figma.ts
+++ b/packages/react/figma/toolbar.figma.ts
@@ -45,7 +45,7 @@ const items = instance.children.flatMap(child => {
       Danger: 'danger',
       Success: 'success'
     });
-    const size = child.getEnum('Size', { Small: 'small', Normal: 'normal' });
+    const size = child.getEnum('Size', { Small: 'small', Normal: 'medium' });
     // "Plain" = the default Toolbar.Button render (text/neutral/small) with a
     // label and no icons, disabled or loading state, meaning nothing extra.
     const isPlain =

From c12c8cc85861413eb4a7e4b74720acbe101cb29c Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 20 Oct 2026 14:01:42 +0530
Subject: [PATCH 2/3] fix: [separator] use fixed insets on the middle variant

Auto margins stopped a stretched vertical middle line from growing, so it rendered 0px tall. The upgrading note no longer says middle is always longer than half and small.
---
 apps/www/src/content/docs/(overview)/upgrading.mdx       | 4 ++--
 packages/react/components/separator/separator.module.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
index b46e7df20..5effa5eba 100644
--- a/apps/www/src/content/docs/(overview)/upgrading.mdx
+++ b/apps/www/src/content/docs/(overview)/upgrading.mdx
@@ -143,8 +143,8 @@ default.
 | `size="small"` | `variant="middle"`, or set the length with a class |
 
 `middle` insets both ends of the line from the container edges: 16px on a
-horizontal line and 8px on a vertical line. The line is centered. It is longer
-than the old `half` (50%) and `small` (20px) lines.
+horizontal line and 8px on a vertical line. The line is centered. `half` was
+50% of the container and `small` was 20px, so check the lines that used them.
 
 ```tsx
 // Before
diff --git a/packages/react/components/separator/separator.module.css b/packages/react/components/separator/separator.module.css
index a1fd9879d..21e1ac0bc 100644
--- a/packages/react/components/separator/separator.module.css
+++ b/packages/react/components/separator/separator.module.css
@@ -30,11 +30,11 @@
 .variant-middle[data-orientation="horizontal"] {
   height: 1px;
   width: calc(100% - 2 * var(--rs-space-5));
-  margin-inline: auto;
+  margin-inline: var(--rs-space-5);
 }
 
 .variant-middle[data-orientation="vertical"] {
   width: 1px;
   height: calc(100% - 2 * var(--rs-space-3));
-  margin-block: auto;
+  margin-block: var(--rs-space-3);
 }

From db4a3f5826d92dd4cbde2cd0fe6e999be5b6b196 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 20 Oct 2026 14:01:46 +0530
Subject: [PATCH 3/3] refactor: [command, search] use the input default size

---
 packages/react/components/command/command-input.tsx | 2 --
 packages/react/figma/search.figma.ts                | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react/components/command/command-input.tsx b/packages/react/components/command/command-input.tsx
index 5faba6751..473b87b8e 100644
--- a/packages/react/components/command/command-input.tsx
+++ b/packages/react/components/command/command-input.tsx
@@ -19,7 +19,6 @@ export const CommandInput = ({
   ref,
   leadingIcon,
   autoFocus = true,
-  size = 'medium',
   placeholder = 'Search...',
   ...props
 }: CommandInputProps) => {
@@ -35,7 +34,6 @@ export const CommandInput = ({
             classNames={{ container: styles.commandInputContainer }}
             leadingIcon={leadingIcon}
             variant='borderless'
-            size={size}
             autoFocus={autoFocus}
             placeholder={placeholder}
             {...props}
diff --git a/packages/react/figma/search.figma.ts b/packages/react/figma/search.figma.ts
index 4852cf953..b404c710c 100644
--- a/packages/react/figma/search.figma.ts
+++ b/packages/react/figma/search.figma.ts
@@ -22,8 +22,7 @@ const value = figma.selectedInstance.getEnum('State', {
 // Search renders its own leading magnifying-glass icon, so the Leading Icon
 // boolean has no public prop, so it is intentionally not mapped.
 const size = figma.selectedInstance.getEnum('Size', {
-  Small: 'small',
-  Large: 'medium'
+  Small: 'small'
 });
 const variant = figma.selectedInstance.getEnum('Outline', {
   False: 'borderless'