import { OptionTable } from 'components/table'

export function ToggleBox({ title, children }) {
  return (
    <details className="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4">
      <summary>
        <strong className="text-lg">{title}</strong>
      </summary>
      <div className="nx-p-2">{children}</div>
    </details>
  )
}

# Mask props

Properties to customize Mask

### `sizes`

Type: `RectResult`

Object containing size and position informations of where to position the Mask

<ToggleBox title={<code>RectResult</code>}>
Based on [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) structure

<OptionTable
  options={[
    ['width', 'number', 'Width of the `rect`'],
    ['height', 'number', 'Height of the `rect`'],
    ['top', 'number', 'Top of the `rect`'],
    ['left', 'number', 'Left of the `rect`'],
    ['bottom?', 'number', 'Bottom of the `rect`'],
    ['right?', 'number', 'Right of the `rect`'],
  ]}
/>
</ToggleBox>

### `className?`

Type: `string`

[CSS classname](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) to apply to the _Mask_ wrapper

### `highlightedAreaClassName?`

Type: `string`

[CSS classname](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) to apply to the _Highlighted_ area `rect` element

### `padding?`

Type: `number | number[]`

Extra space to add in _Mask_ calculations. Useful when calculating space from _Element_ bounding rect and want to add more space.

### `wrapperPadding?`

Type: `number | number[]`

Extra space to add between viewport with and height.

<ToggleBox title="Sapce calculation">
  Calculation is based on [padding shorthand
  syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/padding#syntax)
  <OptionTable
    options={[
      ['value', 'number', 'Apply to all four sides`'],
      ['[x, y]', 'number[]', 'top and bottom | left and right'],
      ['[top, x, bottom]', 'number[]', 'top | left and right | bottom'],
      ['[top, right, bottom, left]', 'number[]', 'top | right | bottom | left'],
    ]}
  />
</ToggleBox>

### `onClick?`

Type: `MouseEventHandler<HTMLDivElement>`

Click handler for the _Mask_ except the highlighted area.

### `onClickHighlighted?`

Type: `MouseEventHandler<SVGRectElement>`

Click handler for the _Highlighted_ area.

### `maskId?`

Type: `string`

String to be assigned to the `<mask />` element, otherwise an automatic unique id is assigned.

### `clipId?`

Type: `string`

String to be assigned to the `<clipPath />` element, otherwise an automatic unique id is assigned.

### `styles?`

Type: `StylesObj`

Prop to customize styles for the different parts of the _Mask_ using a function that allows to extend the base styles an take advantage of some state props.

<ToggleBox title={<code>StylesObj</code>}>
Styles keys and its props available to customize

<OptionTable
  options={[
    ['maskWrapper'],
    ['maskArea', 'x, y, width, height'],
    ['maskRect', 'windowWidth, windowHeight, maskID'],
    ['clickArea', 'windowWidth, windowHeight, maskID'],
    ['highlightedArea?', 'x, y, width, height']
  ]}
/>
</ToggleBox>

<ToggleBox title="Example">
```js
const styles = {
  maskWrapper: (base) => ({
    ...base,
    color: 'red',
  }),
  highlightedArea: (base, { x, y }) => ({
    ...base,
    x: x + 10,
    y: y + 10,
  }),
}

function App() {
return <Mask styles={styles} />
}

```
</ToggleBox>
```
