# TabContentNode

Container cho danh sách tab panels. Chỉ chấp nhận `TabPanelNode` children.

## Resolved name

`TabContent`

## Configurable props

Không có props riêng ngoài `sx`. Chỉnh trong inspector của `TabsNode` → group **Tab content**.

### `sx` props

```ts
sx?: {
  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: 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

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

## Usage

```tsx
import { TabContentNode, TabPanelNode } from '@janbox/storefront-builder';

<TabContentNode>
  <TabPanelNode>Panel 1 content</TabPanelNode>
  <TabPanelNode>Panel 2 content</TabPanelNode>
  <TabPanelNode>Panel 3 content</TabPanelNode>
</TabContentNode>
```

## Hook

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

// gọi trong context của TabsNode — tự resolve TabContent node con
const { nodeProps, setNodeProps } = useTabContentNodeProps();
```

Chỉ dùng được khi node hiện tại là `TabsNode`; nếu không tìm thấy `TabContent` con sẽ throw `Missing tab content node`.

## Rules

- **Canvas**: yes — chứa `TabPanelNode` children.
- **Selectable**: no.
- **canMoveIn**: chỉ chấp nhận `TabPanelNode`.
- **Parent**: phải là `TabsNode`.

## Related nodes

- [`TabsNode`](../tabs/README.md) — root container
- [`TabPanelNode`](../tab-panel/README.md) — mỗi panel content