# ActiveZone

A focusable, clickable zone with hover and focus states. Used for making non-button elements interactive.

## When to Use

- Clickable cards or list items
- Custom interactive regions
- Wrapping content that should respond to click/hover/focus

## Properties

- **`label`** `string` — Accessible label for screen readers
- **`onClick`** `MouseEventHandler` — Click handler
- **`isDisabled`** `boolean` — Disables interaction, reduces opacity
- **`autoFocus`** `boolean` — Whether the element should receive focus on mount
- **`excludeFromTabOrder`** `boolean` — Whether the element should be excluded from the tab order
- **`onFocus`** `(e: FocusEvent) => void` — Handler called when the element receives focus
- **`onBlur`** `(e: FocusEvent) => void` — Handler called when the element loses focus
- **`onKeyDown`** `(e: KeyboardEvent) => void` — Handler called when a key is pressed
- **`onKeyUp`** `(e: KeyboardEvent) => void` — Handler called when a key is released

### Style Defaults

- `display` — `inline-grid`
- `position` — `relative`
- `opacity` — `1` (switches to `0.4` when disabled)
- `transition` — `theme`

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<ActiveZone label="Open details" onClick={() => openDetails()}>
  <Card>
    <Title level={4}>Clickable Card</Title>
    <Paragraph>This whole card is clickable</Paragraph>
  </Card>
</ActiveZone>
```
