# CountUpNode

Hiển thị con số chạy tăng dần (animate từ `from` đến `to`) — render ra component `CountUp` của `@janbox/storefront-ui`. Dùng cho số liệu thống kê, thành tựu, KPI... Không phải canvas node — không chứa node con.

## Resolved name

`CountUp` (displayName: `Count up`)

## Cấu trúc

```text
count-up/
├── count-up.node/       # CraftJS node bọc quanh <CountUp />
│   ├── count-up.node.tsx
│   ├── types.ts         # CountUpNodeProps
│   └── helpers.ts       # useCountUpNodeProps (transform = getCountUpProps)
└── count-up.inspector/  # Panel chỉnh sửa trong editor
```

`CountUpNode` lo phần CraftJS (connectors, data attributes) rồi delegate xuống `CountUp`. Trong editor (`enabled`) thì `startOnView` bị tắt để số luôn hiển thị giá trị cuối; ở trang thật thì animate khi cuộn tới.

## Configurable props

### Top-level props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `to` | `number` | — | Giá trị kết thúc. **Bắt buộc** |
| `from` | `number` | `0` | Giá trị bắt đầu |
| `duration` | `number` | `2` | Thời lượng animate (giây) |
| `prefix` | `ReactNode` | — | Nội dung hiển thị trước số (VD `+`, `$`) |
| `suffix` | `ReactNode` | — | Nội dung hiển thị sau số (VD `%`, `k`) |
| `startOnView` | `boolean` | `true` | Chỉ animate khi element cuộn vào viewport (tự tắt trong editor) |
| `formatNumberOptions` | `FormatNumberOptions` | — | Tùy chọn format số (phân tách hàng nghìn, số thập phân...) |
| `sizeVariant` | `TypographySizeVariant` | — | Cỡ chữ theo hệ typography. Hỗ trợ responsive qua `sm`, `md`, `lg` |

Ngoài ra kế thừa toàn bộ props của `motion.span` (`HTMLMotionProps<'span'>`) — có thể truyền `className`, `onClick`, animation props của Motion...

`sizeVariant` responsive: `sizeVariant="xl"` trên mobile, `md={{ sizeVariant: '2xl' }}` phóng to trên desktop.

### `sx` props

```ts
sx?: {
  // typography
  color?: string
  fontWeight?: number | string
  fontStyle?: string
  textDecorationLine?: string
  textAlign?: 'left' | 'center' | 'right'
  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'

  // 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 { CountUpNode } from '@janbox/storefront-builder';

// Cơ bản — chạy từ 0 đến 100
<CountUpNode from={0} to={100} />

// Có prefix/suffix
<CountUpNode from={0} to={1000} prefix="+" suffix="k" />

// Tùy chỉnh thời lượng + cỡ chữ responsive
<CountUpNode
  from={0}
  to={98}
  suffix="%"
  duration={3}
  sizeVariant="xl"
  md={{ sizeVariant: '3xl' }}
/>

// Style qua sx
<CountUpNode
  from={0}
  to={500}
  sx={{
    color: '#f59e0b',
    fontWeight: 700,
    textAlign: 'center',
  }}
/>
```

## Editor (Inspector)

### Tab Settings

- **Config**: From, To, Duration (s), Prefix, Suffix
- **Text style**: Size variant, Color, Style (weight/italic/underline), Text align, Text transform, Font weight

### Tab Advanced

- **Shape**: Border, Border radius
- **Background**: Background

## Rules

- **Canvas**: no — không chứa node con.
- Các prop đều có default qua `getCountUpProps` của `@janbox/storefront-ui`.