fix: textarea overflow, default rows, and size/variant API

apps/www/src/content/docs/components/textarea/demo.ts

@@ -13,6 +13,16 @@ export const playground = {
       type: 'checkbox',
       defaultValue: false
     },
+    size: {
+      type: 'select',
+      options: ['large', 'small'],
+      defaultValue: 'large'
+    },
+    variant: {
+      type: 'select',
+      options: ['default', 'borderless'],
+      defaultValue: 'default'
+    },
     width: {
       type: 'text',
       defaultValue: '400px'
@@ -55,6 +65,30 @@ export const controlledDemo = {
 }`
 };
 
+export const sizeDemo = {
+  type: 'code',
+  code: `<Flex direction="column" gap="medium" style={{ width: 400 }}>
+  <TextArea placeholder="Large size (default)" />
+  <TextArea placeholder="Small size" size="small" />
+</Flex>`
+};
+
+export const variantDemo = {
+  type: 'code',
+  code: `<Flex direction="column" gap="medium" style={{ width: 400 }}>
+  <TextArea placeholder="Default variant" />
+  <TextArea placeholder="Borderless variant" variant="borderless" />
+</Flex>`
+};
+
+export const rowsDemo = {
+  type: 'code',
+  code: `<Flex direction="column" gap="medium" style={{ width: 400 }}>
+  <TextArea placeholder="Default (3 rows)" />
+  <TextArea placeholder="6 rows" rows={6} />
+</Flex>`
+};
+
 export const widthDemo = {
   type: 'code',
   code: `<TextArea

apps/www/src/content/docs/components/textarea/index.mdx

@@ -1,13 +1,16 @@
 ---
 title: TextArea
-description: A multi-line text input field.
+description: A multi-line text input field with size and variant options.
 source: packages/raystack/components/text-area
 ---
 
 import {
   playground,
   basicDemo,
   controlledDemo,
+  sizeDemo,
+  variantDemo,
+  rowsDemo,
   widthDemo,
   withFieldDemo,
 } from "./demo.ts";
@@ -60,6 +63,24 @@ Example of TextArea in controlled mode.
 
 <Demo data={controlledDemo} />
 
+### Size Variants
+
+TextArea comes in two sizes: `large` (default) and `small`.
+
+<Demo data={sizeDemo} />
+
+### Visual Variants
+
+TextArea supports `default` and `borderless` visual variants.
+
+<Demo data={variantDemo} />
+
+### Custom Rows
+
+TextArea defaults to 3 visible rows. Use the `rows` prop to adjust.
+
+<Demo data={rowsDemo} />
+
 ### Custom Width
 
 TextArea with custom width specification.
@@ -71,3 +92,4 @@ TextArea with custom width specification.
 - Use with [Field](/docs/components/field) for automatic label association and error linking
 - Required state is communicated via `aria-required`
 - Invalid state is communicated via `aria-invalid`
+- Content is scrollable when text exceeds the visible rows

apps/www/src/content/docs/components/textarea/props.ts

@@ -1,4 +1,16 @@
 export interface TextAreaProps {
+  /**
+   * Size variant of the textarea.
+   * @defaultValue "large"
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Visual variant of the textarea.
+   * @defaultValue "default"
+   */
+  variant?: 'default' | 'borderless';
+
   /** Whether the textarea is disabled. */
   disabled?: boolean;
 
@@ -11,6 +23,12 @@ export interface TextAreaProps {
    */
   width?: string | number;
 
+  /**
+   * Number of visible text rows.
+   * @defaultValue 3
+   */
+  rows?: number;
+
   /** Controlled value for the textarea. */
   value?: string;
 

docs/V1-migration.md

@@ -50,10 +50,11 @@ This guide covers all breaking changes when upgrading from the last stable Radix
     - [Tabs](#tabs)
       - [New Features](#new-features-8)
     - [TextArea](#textarea)
-    - [Toast](#toast)
       - [New Features](#new-features-9)
-    - [Tooltip](#tooltip)
+    - [Toast](#toast)
       - [New Features](#new-features-10)
+    - [Tooltip](#tooltip)
+      - [New Features](#new-features-11)
   - [New Components](#new-components)
   - [Removed Exports](#removed-exports)
   - [| `RadioItem` | `Radio` | See Radio |](#-radioitem--radio--see-radio-)
@@ -1337,6 +1338,28 @@ Key changes:
 
 5. **`infoTooltip` prop removed** — no direct replacement. Compose manually if needed.
 
+6. **`overflow` changed from `hidden` to `auto`.** Text that exceeds the visible area now scrolls instead of being clipped. If you relied on the old hidden-overflow behavior (e.g., pairing with JavaScript auto-resize), test that your layout still works:
+
+```css
+/* Before — content beyond the visible area was clipped */
+.textarea { overflow: hidden; }
+
+/* After — content scrolls when it exceeds visible rows */
+.textarea { overflow: auto; }
+```
+
+7. **`min-height` removed; height is now row-based.** The textarea no longer has a CSS `min-height` (`var(--rs-space-13)`). Instead, the visible height is determined by the `rows` attribute (default `3`). If you depended on the old fixed minimum height, set `rows` or apply a custom `min-height` via `style` or `className`:
+
+```tsx
+// Before — min-height enforced by CSS token
+<TextArea placeholder="Write something..." />
+
+// After — height determined by rows (default 3); override if needed
+<TextArea placeholder="Write something..." rows={5} />
+// or restore a min-height via style
+<TextArea placeholder="Write something..." style={{ minHeight: 'var(--rs-space-13)' }} />
+```
+
 **Full before/after example:**
 
 ```tsx
@@ -1357,7 +1380,27 @@ Key changes:
 </Field>
 ```
 
-Unchanged props: `disabled`, `placeholder`, `width`, `value`, `onChange`, and all native `<textarea>` attributes.
+Unchanged props: `disabled`, `placeholder`, `width`, `value`, `onChange`, `rows`, and all native `<textarea>` attributes.
+
+#### New Features
+
+- `size` prop — `'large'` (default) or `'small'`. Controls padding and font size:
+
+```tsx
+<TextArea size="small" placeholder="Compact textarea" />
+```
+
+- `variant` prop — `'default'` (default) or `'borderless'`. Controls border visibility:
+
+```tsx
+<TextArea variant="borderless" placeholder="No border" />
+```
+
+- `rows` prop — sets the number of visible text rows (default `3`). Replaces the old CSS `min-height` for controlling textarea height:
+
+```tsx
+<TextArea rows={6} placeholder="Taller textarea" />
+```
 
 ---
 
@@ -1610,6 +1653,7 @@ These are purely additive -- no migration needed.
 - [ ] Wrap InputField usages with `<Field>` — move `label`, `helperText`, `error`, `optional` to Field props (see [InputField](#inputfield))
 - [ ] Wrap TextArea usages with `<Field>` — move `label`, `helperText`, `error`, `required` to Field props (see [TextArea](#textarea))
 - [ ] Remove `infoTooltip` from InputField and TextArea (no longer supported)
+- [ ] Review TextArea usages for overflow behavior change (`hidden` -> `auto`) and removed `min-height` (see [TextArea](#textarea))
 - [ ] Update custom CSS targeting `data-state` attributes (see [Data Attributes](#data-attributes))
 - [ ] Update custom CSS referencing `--radix-*` variables (see [CSS Variables](#css-variables))
 - [ ] Test all components end-to-end

packages/raystack/components/text-area/__tests__/text-area.test.tsx

@@ -108,6 +108,48 @@ describe('TextArea', () => {
     });
   });
 
+  describe('Rows', () => {
+    it('defaults to 3 rows', () => {
+      render(<TextArea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('rows', '3');
+    });
+
+    it('allows overriding rows', () => {
+      render(<TextArea rows={6} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('rows', '6');
+    });
+  });
+
+  describe('Sizes', () => {
+    it('renders large size by default', () => {
+      render(<TextArea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass(styles['size-large']);
+    });
+
+    it('renders small size when specified', () => {
+      render(<TextArea size='small' />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass(styles['size-small']);
+    });
+  });
+
+  describe('Variants', () => {
+    it('renders default variant by default', () => {
+      render(<TextArea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass(styles['variant-default']);
+    });
+
+    it('renders borderless variant when specified', () => {
+      render(<TextArea variant='borderless' />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass(styles['variant-borderless']);
+    });
+  });
+
   describe('Accessibility', () => {
     it('supports aria-label', () => {
       render(<TextArea aria-label='Message input' />);

packages/raystack/components/text-area/text-area.module.css

@@ -5,15 +5,14 @@
   outline: none;
   height: auto;
   width: 100%;
-  min-height: var(--rs-space-13);
   background-color: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   border-radius: var(--rs-radius-2);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   color: var(--rs-color-foreground-base-primary);
   padding: var(--rs-space-3);
-  overflow: hidden;
+  overflow: auto;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -61,3 +60,34 @@
 .textarea[data-invalid]:focus {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
+
+/* Size variants */
+.size-large {
+  padding: var(--rs-space-3);
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+}
+
+.size-small {
+  padding: var(--rs-space-2);
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+}
+
+/* Variant styles */
+.variant-default {
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
+}
+
+.variant-borderless {
+  border-color: transparent;
+}
+
+.variant-borderless:hover {
+  border-color: transparent;
+}
+
+.variant-borderless:focus:not(:disabled) {
+  border-color: transparent;
+  outline: none;
+}

packages/raystack/components/text-area/text-area.tsx

@@ -1,11 +1,30 @@
 import { Field as FieldPrimitive } from '@base-ui/react/field';
-import { cx } from 'class-variance-authority';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ChangeEvent, type ComponentProps } from 'react';
 import { useFieldContext } from '../field';
 
 import styles from './text-area.module.css';
 
-export interface TextAreaProps extends ComponentProps<'textarea'> {
+const textAreaVariants = cva(styles.textarea, {
+  variants: {
+    size: {
+      small: styles['size-small'],
+      large: styles['size-large']
+    },
+    variant: {
+      default: styles['variant-default'],
+      borderless: styles['variant-borderless']
+    }
+  },
+  defaultVariants: {
+    size: 'large',
+    variant: 'default'
+  }
+});
+
+export interface TextAreaProps
+  extends Omit<ComponentProps<'textarea'>, 'size'>,
+    VariantProps<typeof textAreaVariants> {
   disabled?: boolean;
   placeholder?: string;
   width?: string | number;
@@ -22,14 +41,21 @@ export function TextArea({
   onChange,
   placeholder,
   required,
+  size,
+  variant,
   ...props
 }: TextAreaProps) {
   const fieldContext = useFieldContext();
   const resolvedRequired = required ?? fieldContext?.required;
 
   const textarea = (
     <textarea
-      className={cx(styles.textarea, disabled && styles.disabled, className)}
+      rows={3}
+      className={cx(
+        textAreaVariants({ size, variant }),
+        disabled && styles.disabled,
+        className
+      )}
       value={value}
       onChange={onChange}
       disabled={disabled}