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}
-
+
{task.status}
-
+
{task.team}
-
+
{task.priority}
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) {
}
>
{neighbours.previous.name}
@@ -30,7 +30,7 @@ export default function DocsFooter({ url }: DocsFooterProps) {
}
>
{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 (
diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
index 82f756aad..5effa5eba 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. `half` was
+50% of the container and `small` was 20px, so check the lines that used them.
+
+```tsx
+// Before
+
+
+// After
+
+```
+
## 2.0: `Theme` is rewritten
`Theme` used to put its tokens on `` 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: ,
- trailing: Agent
+ trailing: Agent
},
{
id: 'u3',
@@ -309,7 +309,7 @@ export const mentionsDemo = {
label: 'Apsara Assistant',
type: 'user',
group: 'Users',
- trailing: Agent
+ trailing: Agent
},
{ 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: `
- Micro
+ Extra small
Small
- Regular
+ Medium
`
};
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.
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: `
-
+
`
};
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.
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: ``
+ name: 'Medium (default)',
+ code: ``
},
{
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.
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).
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: `
-
+
-
+
-
+
`
},
@@ -108,8 +108,8 @@ export const sizeDemo = {
-
-
+
+
`
}
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.
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 {
/**
* 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: `
-
+
`
};
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.
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: `
-
-
-
+
+
`
};
@@ -50,8 +49,13 @@ export const colorDemo = {
export const orientationDemo = {
type: 'code',
code: `
-
-
-
+
+ Above
+
+
+ Left
+
+ Right
+
`
};
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";
@@ -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.
-### 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.
-
+
### 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: `
-
-
+
+
`
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.
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: `
-
+
`
};
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`.
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);
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();
@@ -84,10 +84,10 @@ describe('Button', () => {
expect(button).toHaveClass(styles[`button-${size}`]);
});
- it('defaults to normal size', () => {
+ it('defaults to medium size', () => {
render();
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 &
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();
@@ -41,10 +41,10 @@ describe('Checkbox', () => {
});
});
- it('renders large size by default', () => {
+ it('renders medium size by default', () => {
render();
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..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 = 'large',
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/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({
style={{ left: marker.x }}
data-slot='data-view-timeline-axis-marker'
>
-
+
{marker.label}
@@ -1646,7 +1646,7 @@ export function DataViewTimeline({
style={{ left: timeScale.x(cursorTime) }}
data-slot='data-view-timeline-axis-cursor'
>
-
+
{cursorLabel(cursorTime, scale)}
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();
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(
);
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(
-
+
);
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();
+ it.each(variants)('renders %s variant correctly', variant => {
+ render();
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();
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..21e1ac0bc 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: var(--rs-space-5);
}
-.separator-full[data-orientation="vertical"] {
+.variant-middle[data-orientation="vertical"] {
width: 1px;
- height: 100%;
+ height: calc(100% - 2 * var(--rs-space-3));
+ margin-block: var(--rs-space-3);
}
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({
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();
@@ -49,10 +49,10 @@ describe('Switch', () => {
expect(switchElement).toHaveClass(styles[size]);
});
});
- it('renders large size by default', () => {
+ it('renders medium size by default', () => {
render();
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();
+ rerender();
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();
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..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: 'large'
+ Small: 'small'
});
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 =