//
A draggable, resizable floating window overlay with viewport bounds constraints and minimize/maximize controls.
bun add xiod-ui1import {2 Draggable,3 DraggableBody,4 DraggableControls,5 DraggableFooter,6 DraggableHeader,7 DraggableResizeHandle,8 DraggableTitle9} from "xiod-ui/draggable";1<Draggable>2 <DraggableHeader />3 <DraggableTitle />4 <DraggableFooter />5 <DraggableBody />6 <DraggableControls />7 <DraggableResizeHandle />8</Draggable>| Prop | Type | Default | Description |
|---|---|---|---|
defaultX | number| undefined | 40 | |
defaultY | number| undefined | 40 | |
defaultWidth | number| undefined | 360 | |
defaultHeight | number| undefined | 300 | |
minWidth | number| undefined | 240 | |
minHeight | number| undefined | 160 | |
maxWidth | number| undefined | 800 | |
maxHeight | number| undefined | 600 | |
bounds | DraggableBounds| undefined | viewport | |
isDraggable | boolean| undefined | true | |
isResizable | boolean| undefined | true | |
open | boolean| undefined | - | |
defaultOpen | boolean| undefined | true | |
onOpenChange | ((open: boolean) => void)| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "expressive"| "flat"| null| undefined | default | |
isDragging | boolean| null| undefined | false | |
isResizing | boolean| null| undefined | false | |
isMinimized | boolean| null| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |