@startsidan/ui

dok · ui
id: ui
namn: @startsidan/ui
sammanfattning: Primitiverna modulerna bygger av: V3:s form och mått ovanpå shadcn/ui, så att Radix bär tillgängligheten.
uppdaterad: 2026-08-28

ansvar:
- Erbjuda ett litet, stabilt API som modulerna kan klara sig på.
- Hålla V3:s mått – shadcns default skrivs medvetet över av tailwind-merge i cn.
- Bära tillgängligheten: Card är en section med aria-labelledby, Progress har korrekta aria-värden.
- Skilja identitet från status i sina varianter: Avatar har ingen färgprop, och ska inte få en.

filer:
- packages/ui/src/Card.tsx — Kortet. Rubrik, antal, åtgärdslänk, ai-ton.
- packages/ui/src/Chip.tsx — Chip med statustoner, och AiChip för AI-märkning.
- packages/ui/src/Btn.tsx — Btn och BtnLink: primary, ghost, ai i två storlekar.
- packages/ui/src/StatusRow.tsx — Rad med färgad vänsterkant för "Att agera på".
- packages/ui/src/ListRow.tsx — Rad i en lista, plus Progress.
- packages/ui/src/Avatar.tsx — Identitetsikon med initialer. Alltid blå.
- packages/ui/src/MoreLink.tsx — "Visa alla →" i korthuvudet.
- packages/ui/src/cn.ts — clsx plus tailwind-merge, utökad med våra egna skalsteg.
- packages/ui/src/components/ui/ — shadcn-komponenterna. Våra filer, med avvikelser kommenterade.

api:
- Card: { title?, count?, action?, headingId?, tone?, bodyClassName?, className?, children }
  Grundformen för innehåll på arbetsytan.
- Chip / AiChip: { tone?: ChipTone, children }
  ok | warn | info | muted | avv. AiChip märker AI-genererat.
- Btn / BtnLink: { variant?: BtnVariant, size?: BtnSize }
  primary | ghost | ai, i md eller sm.
- StatusRow: { status?: RowStatus, title, meta?, end? }
  krit | warn | info | ok | neutral. Renderas som li.
- ListRow / Progress: { lead?, title, meta?, end?, children } / { value, done? }
  Listrad med valfritt förlopp.
- cn: (...inputs: ClassValue[]) => string
  Slår ihop klasser och låter senare utilities vinna. Känner till text-h2, text-kpi, text-eyebrow, shadow-card och shadow-pop.

beroenden: tokens
beslut: ADR-002, ADR-008

kvarstår:
- Ingen Storybook och inga komponenttester. /dev/ui:s levande exempel är den enda visuella kontrollen.
- Ingen primitiv för formulärfält – felanmalans formulärspegel bygger sina egna.