# motion/size (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/motion/size.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx).

## Components

### `HeldWidth`

Component.

Renders a trailing slot whose width grows to fit its content and never shrinks while
`holdKey` stays the same, so a label that changes often does not make its neighbours move.
When `holdKey` changes, it eases to the new content's width once the old content has faded.

```ts
function HeldWidth(props: HeldWidthProps): Element
```

**Parameters**

- `props` (`HeldWidthProps`): Component props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The slot's content. It sits against the right edge.
- `className?` (`string`): Extra classes on the outer element.
- `holdKey` (`string`): Identifies the mode of the slot. The held width is released when it changes.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/motion/size.tsx:137](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L137)

### `SmoothHeight`

Component.

A block whose height eases when its content is swapped, instead of jumping: the old height is held in the
frame the new content lands, then eases to the new one (`settle`), then lets go. Nothing collapses to be
measured (the content keeps its own height inside), so a transcript following its bottom follows the ease
frame by frame. At once with motion off or reduced.

```ts
function SmoothHeight(props: SmoothHeightProps): Element
```

**Parameters**

- `props` (`SmoothHeightProps`): Component props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The content.
- `className?` (`string`): Extra classes on the outer element.
- `swapKey` (`string`): What the content is: when it changes (live lines giving way to a result), the height eases from the old
  content's to the new one's. Between changes the height follows the content at once (it animates itself).

Source: [ui/src/motion/size.tsx:218](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L218)

### `SmoothWidth`

Component.

Animates its own width to its content's, so a chip that gains a segment
or a digit grows smoothly instead of jumping. The content is measured
with a ResizeObserver; the first size applies without a transition.

```ts
function SmoothWidth(props: SmoothWidthProps): Element
```

**Parameters**

- `props` (`SmoothWidthProps`): Component props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The content to size to.
- `className?` (`string`): Extra classes on the outer element.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/motion/size.tsx:28](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L28)

## Interfaces

### `HeldWidthProps`

Interface.

Props for [`HeldWidth`](https://zidane.si/docs/reference/ui-motion-size.md#HeldWidth).

```ts
interface HeldWidthProps
```

**Properties**

- `children` (`ReactNode`): The slot's content. It sits against the right edge.
- `className?` (`string`): Extra classes on the outer element.
- `holdKey` (`string`): Identifies the mode of the slot. The held width is released when it changes.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/motion/size.tsx:119](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L119)

### `SmoothHeightProps`

Interface.

Props for [`SmoothHeight`](https://zidane.si/docs/reference/ui-motion-size.md#SmoothHeight).

```ts
interface SmoothHeightProps
```

**Properties**

- `children` (`ReactNode`): The content.
- `className?` (`string`): Extra classes on the outer element.
- `swapKey` (`string`): What the content is: when it changes (live lines giving way to a result), the height eases from the old
  content's to the new one's. Between changes the height follows the content at once (it animates itself).

Source: [ui/src/motion/size.tsx:198](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L198)

### `SmoothWidthProps`

Interface.

Props for [`SmoothWidth`](https://zidane.si/docs/reference/ui-motion-size.md#SmoothWidth).

```ts
interface SmoothWidthProps
```

**Properties**

- `children` (`ReactNode`): The content to size to.
- `className?` (`string`): Extra classes on the outer element.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/motion/size.tsx:12](https://github.com/Tahul/zidane/blob/main/ui/src/motion/size.tsx#L12)