# POS Terminal — Settings Card

**1:1 from `settings-card-spec.md`** — composed from atoms. Font **Inter** · radii: card **10** · btn **8** · chip **5** · toggle pill.
2 variants: **V1 Expanded** (device + action row + tag chips) · **V2 Compact** (device + icon buttons + toggle).

## Container
white · `1px solid --grey-300` · r10 · pad **16×20**. V1 `flex column gap12`; V2 `flex row · space-between · gap16`.

## Device info block (shared)
`flex · gap12`. **ScDeviceIcon** 32×32 stroke `--primary-500` sw1.75 (rect + stand). Text col gap3:
- name row gap8 — name 500/20 `--text-500` "Kassa printeri" + **status pill** (dot 6 + 13px label): online `--success-400`/`--success` "Online" · offline `#C0C0C5`/`--text-placeholder` "Offline".
- address 400/13 `--text-placeholder` "10.10.10.125.9876".

## DS-component reuse (atoms)
Built atoms-first; existing design-system components are **reused** rather than rebuilt:
- **ScToggle → Switch** (`.sw-track`/`.sw-thumb`, off `--grey-400` / on `--primary-500`) at 42×24.
- **ScActionBtn → Button** (`.btn .btn-md40 .btn-outlined`) — 1:1.
- **ScIconBtn square → Button** (`.btn .btn-md40 .btn-icon-only` + neutral outline).
- **ScTagChip → Badge** (`.badge .badge-sm .badge-filled-primary`).
- **status dot → Badge** `.b-dot` atom.
Settings-specific (no DS equivalent): **ScDeviceIcon · ScStatusDot · ScSelectInput · ScIconBtn round**.

## Atoms
- **ScToggle** — 42×24 r12 · knob 18 (top3/left4 → on left20) · off `--grey-400` / on `--primary-500`.
- **ScActionBtn** "Test et" — h40 · pad 0 16 · 1.5px `--primary-500` outline · `--primary-500` text · 500/14.
- **ScIconBtn square** (V1 chevron) — 40×40 r8 · 1.5px `--grey-400` · icon 16 stroke `--text-secondary` `M9 6l6 6-6 6`.
- **ScSelectInput** — h40 · min-w 140 · pad 0 10 0 14 · 1.5px `--grey-400` r8 · val 400/14 `--text-500` "Heç biri" + clear × 16 stroke `--text-placeholder`.
- **ScTagChip** — h22 · pad 0 7 · r5 · `--primary-50` / `--primary-500` · 1px `--grey-200` · 500/11. Chips: Pul yeşiyi · Sürətli çap · Kontrol printer · Codepage.
- **ScIconBtn round** (V2 up/down) — 32×32 circle · 1.5px `--grey-400` · icons 16 stroke `--text-500` (`M12 8v8`/`M8 12l4-4 4 4` up · `M12 16V8`/`M8 12l4 4 4-4` down).

## V1 action row (right)
`flex gap8`: Toggle · Test et ×2 · chevron icon-btn · select input. Tag-chips row below (`flex wrap gap6`).

## V2 (single row)
device info `flex:1` · right group `gap8`: upload round · download round · toggle. Status shown = **offline**.

## Tokens
icon/outline/chip-text `--primary-500` · name `--text-500` · address/placeholder/offline `--text-placeholder` · online `--success-400`/`--success` · btn-border `--grey-400` · chip bg `--primary-50` border `--grey-200` · card border `--grey-300`. Offline dot `#C0C0C5` (literal). Icons verbatim.