## Popup Props

| Name               | Type                                                                               | Default      | Required | Description                                                                                                     |
| ------------------ | ---------------------------------------------------------------------------------- | ------------ | -------- | --------------------------------------------------------------------------------------------------------------- |
| visible            | `boolean`                                                                          | `false`      | N        | Whether to show the popup.                                                                                      |
| size               | `number`                                                                           | `40`         | N        | Popup size. When value is 0, size is determined by inner elements.                                              |
| position           | `'center'\|'top'\|'bottom'\|'left'\|'right'`                                       | `'bottom'`   | N        | Display position.                                                                                               |
| duration           | `number`                                                                           | `450`        | N        | Enter animation transition duration in ms.                                                                      |
| outDuration        | `number`                                                                           | `240`        | N        | Exit animation transition duration in ms.                                                                       |
| easeType           | [`SvelteEasing`](https://svelte.dev/docs#run-time-svelte-easing)                   | `'cubicOut'` | N        | Enter animation type, 31 values available, see [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing). |
| easeOutType        | [`SvelteEasing`](https://svelte.dev/docs#run-time-svelte-easing)                   | `'cubicOut'` | N        | Exit animation type, 31 values available, see [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing).  |
| px                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'20'`                   | `'0'`        | N        | Horizontal padding.                                                                                             |
| py                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'` | `'0'`        | N        | Vertical padding.                                                                                               |
| mask               | [`Mask`](https://stdf.design/components?nav=mask&tab=1)                          | `{}`         | N        | Mask layer parameters.                                                                                          |
| maskClosable       | `boolean`                                                                          | `true`       | N        | Whether clicking mask layer closes popup.                                                                       |
| radiusPosition     | `'all'\|'top'\|'bottom'\|'left'\|'right'`                                          | `'top'`      | N        | Border radius position.                                                                                         |
| radius             | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                             | `'none'`     | N        | Border radius size.                                                                                             |
| transitionDistance | `number`                                                                           | `0`          | N        | Animation distance when popup size is determined by inner elements.                                             |
| transparent        | `boolean`                                                                          | `false`      | N        | Whether background is transparent.                                                                              |
| allowBodyScroll    | `boolean`                                                                          | `true`       | N        | Whether to allow body scrolling when popup is shown.                                                            |
| zIndex             | `number`                                                                           | `600`        | N        | z-index value.                                                                                                  |
| dynamicFixed       | `boolean`                                                                          | `true`       | N        | Whether to use dynamic fixed positioning.                                                                       |
| hideScrollbar      | `boolean`                                                                          | `false`      | N        | Whether to hide scrollbar in scroll area.                                                                       |

## Popup Events

| Name        | Type         | Params | Description                                                        |
| ----------- | ------------ | ------ | ------------------------------------------------------------------ |
| onclickMask | `() => void` | -      | Triggered when clicking mask layer, even if maskClosable is false. |
| onclose     | `() => void` | -      | Triggered when popup closes.                                       |

## Popup Snippets

| Name     | Type                                                                | Parameters | Description    |
| -------- | ------------------------------------------------------------------- | ---------- | -------------- |
| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Popup content. |

## SvelteEasing

```javascript
type SvelteEasing =
    | 'backIn'
    | 'backInOut'
    | 'backOut'
    | 'bounceIn'
    | 'bounceInOut'
    | 'bounceOut'
    | 'circIn'
    | 'circInOut'
    | 'circOut'
    | 'cubicIn'
    | 'cubicInOut'
    | 'cubicOut'
    | 'elasticIn'
    | 'elasticInOut'
    | 'elasticOut'
    | 'expoIn'
    | 'expoInOut'
    | 'expoOut'
    | 'linear'
    | 'quadIn'
    | 'quadInOut'
    | 'quadOut'
    | 'quartIn'
    | 'quartInOut'
    | 'quartOut'
    | 'quintIn'
    | 'quintInOut'
    | 'quintOut'
    | 'sineIn'
    | 'sineInOut'
    | 'sineOut';
```