+
content
+
+// After — unchanged for basic usage, but now supports render prop
+
content
+
+// New — render as a different element
+
} gap="3" align="center">content
+
} gap="3" direction="column">links
+```
+
+Type changed to `useRender.ComponentProps<'div'>` -- may cause TypeScript errors if you typed Flex props explicitly.
+
+---
+
+### Grid
+
+**`asChild` removed** from both `Grid` and `Grid.Item`. Use `render`:
+
+```tsx
+// Before
+
+
+
+ Wide content
+
+ Narrow content
+
+
+
+// After
+
} columns="3" gap="4">
+
} colSpan="2">Wide content
+
Narrow content
+
+```
+
+---
+
+### Popover
+
+1. **`asChild` removed from Trigger** -- use `render` prop or pass children directly:
+
+```tsx
+// Before
+
+
+
+
+
+ Popover content here
+ Close
+
+
+
+// After
+
+ }>Open Popover
+
+ Popover content here
+ Close
+
+
+```
+
+2. **`ariaLabel` custom prop removed** -- use standard `aria-label` instead.
+
+Positioning props (`side`, `align`, `sideOffset`, `collisionPadding`) are preserved.
+
+#### New Features
+
+- `Popover.createHandle` for imperative control
+- `initialFocus` / `finalFocus` for focus management
+
+---
+
+### Radio
+
+**Component hierarchy inverted** -- the root/item relationship is swapped:
+
+```tsx
+// Before
+import { Radio, RadioItem } from '@raystack/apsara';
+
+
setSelected(value)}
+ orientation="vertical"
+ aria-label="Choose plan"
+>
+
+
+
+
+
+// After
+import { Radio } from '@raystack/apsara';
+
+
setSelected(value)}
+ aria-label="Choose plan"
+>
+
+
+
+
+```
+
+Key changes:
+- `
` (was group root) -> ``
+- `` (was individual item) -> ``
+- `RadioItem` named export removed
+- `RadioItemProps` type export removed
+- `onValueChange` now receives 2 args
+- `orientation` prop removed
+
+---
+
+### ScrollArea
+
+```tsx
+// Before — type="auto" was the default
+
+ Scrollable content...
+
+
+// After — type="auto" removed, default is now "hover"
+
+ Scrollable content...
+
+```
+
+1. **`type="auto"` removed.** Remaining options: `'always'`, `'hover'`, `'scroll'`.
+2. **Default `type` changed** from `'auto'` to `'hover'`.
+3. **`ScrollAreaRootProps` renamed** to `ScrollAreaProps`.
+
+---
+
+### Select
+
+1. **Sub-component renames:**
+
+```tsx
+// Before
+
+
+// After
+
+```
+
+Summary of renames:
+- `Select.ScrollUpButton` -> `Select.ScrollUpArrow`
+- `Select.ScrollDownButton` -> `Select.ScrollDownArrow`
+- `Select.Viewport` -> removed (no longer needed, remove the wrapper)
+- `position="popper"` -> removed (always popper-style)
+
+2. **`SelectContent` props removed** -- `position`, `asChild`, `onEscapeKeyDown`, `onPointerDownOutside`.
+
+3. **`SelectItem` uses `render` prop** instead of `asChild`.
+
+#### New Features
+
+- `items` prop for external filtering
+- Explicit `disabled`, `required`, `name` props on Root
+
+---
+
+### Separator
+
+```tsx
+// Before — decorative was accepted, aria-label auto-generated
+
+{/* auto-generated aria-label="horizontal separator" */}
+
+// After — decorative removed, no auto aria-label
+
+{/* add aria-label manually if needed */}
+
+```
+
+1. **`decorative` prop removed.**
+2. **Default `aria-label` removed** -- no longer auto-generates `"horizontal separator"`. Add explicitly if needed.
+
+---
+
+### Sheet -> Drawer
+
+**Export renamed: `Sheet` -> `Drawer`**
+
+```tsx
+// Before
+import { Sheet } from '@raystack/apsara';
+
+
+
+
+
+
+ Settings
+ Manage your preferences
+
+
+
+
+// After
+import { Drawer } from '@raystack/apsara';
+
+
+ }>Open Panel
+
+
+ Settings
+ Manage your preferences
+
+
+
+
+
+
+
+
+
+```
+
+Key changes:
+- All `Sheet.*` -> `Drawer.*`
+- `asChild` -> `render` on Trigger
+- `side` must be on both `` root AND ``
+- `close` prop -> `showCloseButton` (default changed from `false` to `true`)
+- New structured layout: `Drawer.Header`, `Drawer.Body`, `Drawer.Footer`
+
+#### New Features
+
+- Swipe-to-dismiss
+- `Drawer.createHandle` for drag handle
+
+---
+
+### Sidebar
+
+1. **`disabled` prop replaced by `collapsible={false}`:**
+
+```tsx
+// Before — disabled prevents toggling but still shows trigger
+
+
+// After — collapsible={false} hides the resize handle entirely
+
+```
+
+2. **`asChild` removed from Root** -- always renders `