# TabsNode

Root container cho tabs component. Quản lý active state và chứa `TabListNode` (headers) + `TabContentNode` (panels).

## Resolved name

`Tabs`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `defaultActiveIndex` | `number` | Index của tab active mặc định (0-based) |

### `sx` props

```ts
sx?: {
  // size
  width?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { TabsNode } from '@janbox/storefront-builder';

<TabsNode
  defaultActiveIndex={0}
  sx={{
    width: '100%',
    paddingTop: 16,
    paddingBottom: 16,
  }}
>
  {/* TabListNode và TabContentNode tự động được thêm bởi editor */}
</TabsNode>
```

## Hook

```tsx
import { useTabsNodeProps } from '@janbox/storefront-builder';

const { nodeProps, setNodeProps } = useTabsNodeProps();
```

Hook không nhận `nodeId` — luôn đọc/ghi node hiện tại.

## Inspector

Inspector của `TabsNode` điều khiển toàn bộ nhóm tabs (các node con đều `selectable: false`).

### Tab Settings

| Group | Nội dung |
| --- | --- |
| Items management | Add / delete / reorder (drag-drop) tabs — sync `TabNode` với `TabPanelNode`; đổi tên tab; bật `Default active`; nút **Tab style** |
| Size | `width` của `TabsNode` |
| Tab list | `Align`, `Wrap` (`overflowBehavior`), `Items spacing` (`columnGap` / `rowGap`), padding, border, border-radius, và `Indicator` (bật/tắt + size + color) |
| Tab content | padding, border, border-radius của `TabContentNode` |

### Tab Advanced

Spacing / shape / background của chính `TabsNode`.

### Tab style

Popover mở từ Items management, chỉnh `tabConfig` trên `TabListNode`:

- _Shared (all states)_: min-width, height, padding, border width, border radius
- _By state_ (Normal / Active): color, background, border color, hover background

Chi tiết cấu trúc `tabConfig` xem [`TabListNode`](../tab-list/README.md).

## Rules

- **Canvas**: no.
- **Children**: phải có `TabListNode` và `TabContentNode`.

## Related nodes

- [`TabListNode`](../tab-list/README.md) — container cho tab headers
- [`TabNode`](../tab/README.md) — mỗi tab header button
- [`TabContentNode`](../tab-content/README.md) — container cho tab panels
- [`TabPanelNode`](../tab-panel/README.md) — nội dung của mỗi tab