Component Inventory

1. Přehled

Katalog unikátních UI komponent potřebných pro aplikaci Colosseum MA. Každá komponenta je mapována na obrazovky kde se používá a na fázi projektu, ve které je poprvé potřeba.

Celkem: ~65 unikátních komponent (včetně variant a stavů)

2. Kategorie komponent

#	Komponenta	Varianty	Použití	Fáze
1	Bottom Tab Bar	4 tabs, active/inactive, badge	P1#11	MVP
2	App Bar / Top Navigation	Default, search, back, transparent (detail), modal close	P1#10 P2#1 P4#1 S1#1 S3#1 S7#1	MVP
3	Back Button	Default, close (modal), transparent variant	P2#1 P3#1 S1#1 S4#8 S5#8 S7#1	MVP
4	Stepper / Progress Indicator	3-5 steps, active/completed/upcoming	P5#1 P6#1 S2#1	MVP
5	Breadcrumb / Location Trail	Text path	P2, S11	MVP
6	Tab Switch	2-3 segment toggle	P7#4 S7#2	MVP

2.2 Buttons (8 komponent)

#	Komponenta	Varianty	Použití	Fáze
7	Primary Button	Default, loading, disabled	P2#8 P3#5 P4#8 P5#5, #7 P6#5, #8 P9#2 S1#5 S2#7 S3#9 S4#1, #6 S5#6 S8#8 S11#2 S14#7 S15#2 X1#4 X2#5 X3#5 X4#4 X7#4 X8#4 X12#4 X15#5 X19#4	MVP
8	Secondary Button	Default, disabled	S8#6 X1#5 X3#6 X14#6	MVP
9	Ghost/Text Button	Default, destructive (červená)	P5#8 P7#6 P9#2, #6, #7 S2#6 S3#10 S4#5, #7 S5#7 X3#7 X12#5 X14#5 X15#4	MVP
10	Icon Button	Share, filter, close, settings, like	P1#9, #10 P3#1 P5#4 P7#3 S3#1 S8#6 S13#6	MVP
11	FAB (Floating Action Button)	—	Vyhledávání (optional)	MVP
12	CTA Sticky Bar	Single CTA, price + CTA, countdown + CTA	P3#13 P4#8 S1#5	MVP
13	OAuth Button	Apple, Google, Facebook	S4#1 S5#1	MVP
14	Chip / Filter Button	Selected/unselected, dismissible, icon+text	P1#2, #10 P2#2, #3, #6 P3#4 P4#7 P8#2, #3 S3#3, #4 S13#3 X6#5	MVP

2.3 Inputs (10 komponent)

#	Komponenta	Varianty	Použití	Fáze
15	Text Input	Default, error, success, disabled, helper text	P5#5 P6#5 S2#2, #3, #4 S4#3 S5#3 S14#1, #2, #3, #4 S15#2 X14#4	MVP
16	Search Input	With icon, clear button, auto-suggest	P8#1, #5 S3#5, #6	MVP
17	Password Input	Show/hide toggle, strength indicator	S4#4 S5#3 S14#6	MVP
18	Select / Dropdown	Single select, multi-select	S3#5, #6	MVP
19	Checkbox	Default, with label, error	P6#6 S2#5 S5#5 S14#5 X15#2, #3	MVP
20	Radio Button	Default, with description	P6 (platební metoda)	MVP
21	Toggle / Switch	On/off, with label	S3#8 S14#5	MVP
22	Counter (+/-)	Numeric stepper	S1#3	MVP
23	Range Slider	Single value, dual range	S3#7	MVP
24	Date Range Picker	Calendar picker, range selection	S3#2	MVP

2.4 Cards (9 komponent)

#	Komponenta	Varianty	Použití	Fáze
25	Event Card (small)	Horizontal, with thumbnail, status badge	P1#4, #5, #6, #9 P3#12 P8#6, #9 P9#2 S12#5 X6#4	MVP
26	Event Card (large)	Vertical, hero image, full info	P1#3 P2#5, #6 S13#3	MVP
27	Ticket Card	Active, used, expired, shared; QR preview	P7#1, #5	MVP
28	Order Card	Status badge (paid/reserved/cancelled)	S7#3	MVP
29	Reward Card	Image, points price, available/claimed	P11	F1
30	Article Card	Featured (large), default (list)	P1#8	F2+
31	Venue Card	Mini card with map preview	P3#11 P8#8	MVP
32	Organizer Card	Logo + name + event count	P3#2 P8#7	MVP
33	Subscription Card	Grouped by organizer, discount info	P1#7 S11#2, #5 S13#4	MVP

2.5 Lists (5 komponent)

#	Komponenta	Varianty	Použití	Fáze
34	List Item	Icon + text, chevron, toggle, destructive	P3#9 P5#3 P8#4 P9#3, #4, #5, #8 S11#3 S12#3, #4, #7 S13#5 S15#1, #4, #5 X14#3	MVP
35	Accordion / Expandable	Single expand, multi expand	P3#8, #10 P6#3 S1#2 S2#4 S8#7 S12#8 S13#2 S14#3	MVP
36	Section Header	Title + "Zobrazit vše" link	P1#3, #4, #5, #6, #7, #8 P3#12 P8#6, #7, #8 S11#1, #5 S12#5	MVP
37	Divider	Full width, inset	S4#2 S5#2	MVP
38	Date Group Header	Date separator for chronological lists	S7#5	MVP

2.6 Feedback & Overlays (8 komponent)

#	Komponenta	Varianty	Použití	Fáze
39	Toast / Snackbar	Success, error, info, with action	X5#2 X16#1 X17#1	MVP
40	Alert Dialog	Confirm/cancel, single action, destructive	X14#1	MVP
41	Bottom Sheet	Scrollable, fixed, with header/handle	P1#2	MVP
42	Loading / Skeleton	Card skeleton, list skeleton, screen skeleton	P2#7 S7#8 X10#3	MVP
43	Empty State	Illustration + text + CTA	S7#7 X6#1 X7#1 X8#1	MVP
44	Error State	Illustration + retry CTA	X3#1 X4#1	MVP
45	Offline Banner	Persistent top banner	X11#1	MVP
46	Permission Dialog	Custom pre-prompt (notifikace, poloha)	X12#1	MVP

2.7 Specialized (8 komponent)

#	Komponenta	Varianty	Použití	Fáze
47	Seat Map Viewport	Zoom/pan container, SVG renderer	P4#3, #5	MVP
48	Seat Chip	Free, selected, sold, my-seat	P4	MVP
49	Countdown Timer	Progress bar, text, warning state	P4#2 P5#2 P6#2 S1#6 S2#8 X5#1	MVP
50	Price Summary	Line items, subtotal, discount, total	P5#6 P6#3, #7 S1#4	MVP
51	QR Code Viewer	Large display, brightness boost	S8#1	MVP
52	Payment Method Card	Apple Pay, Google Pay, Card, Cash	P6#4	MVP
53	Notification Item	Read/unread, icon, timestamp, deep link	S19	F1
54	Watchdog Item	Event info, status, delete CTA	S10	F1

2.8 Media (6 komponent)

#	Komponenta	Varianty	Použití	Fáze
55	Image Gallery	Horizontal scroll, fullscreen viewer	P3#6 S11#4 S12#6	MVP
56	Video Player	Inline, fullscreen	P3#7	MVP
57	Avatar	Initials, image, small/medium/large	P9#1 S11#1 S13#1	MVP
58	Badge / Tag	Status (dostupné/málo/vyprodáno), genre, phase	P1#4, #6, #9 P2#6 P3#5 P7#1, #2 P9#8 S7#4 S8#4	MVP
59	Hero Banner	Dark overlay, carousel, indicator dots	P1#1 P3#1 S12#1	MVP
60	Map View	Inline map with pin, tap-to-navigate	P3#11 S8#8 S12#2 S15#3	MVP

2.9 Layout (5 komponent)

#	Komponenta	Varianty	Použití	Fáze
61	Carousel / Horizontal Scroll	Cards, banners, dot indicator	P1#3, #4, #5, #6, #7, #8 P3#6, #12 X6#4	MVP
62	Pull-to-Refresh	Standard, custom animation	S7#6	MVP
63	Welcome Slide	Image + title + description, dots, skip	X20#1, #2, #3, #4	MVP
64	Onboarding Step	Multi-select chips, progress, skip	S6	F1
65	Category Seat Legend	Color swatch + label + price	P4#4, #6	MVP

3. Souhrn per fáze

Fáze	Počet komponent	Nové	Rozšíření existujících
MVP	57	57	—
F1	4	4 (Reward Card, Notification Item, Watchdog Item, Onboarding Step)	5 rozšíření (Tab Bar badge, List Item variants, Bottom Sheet variants, Event Card personalized, Price Summary + loyalty)
F2+	1	1 (Article Card)	3 rozšíření (Search + geo, Map View + navigation, Bottom Sheet variants)
TBD	3	3 (Ticket Swap Card, Ticket Swap Detail, Swap Confirmation)	—
Celkem	~65

4. Stavovost komponent

Každá komponenta by měla mít definované:

Default state
Hover/pressed state (pro všechny interaktivní)
Disabled state (pokud relevantní)
Loading state (pokud má async data)
Error state (pokud relevantní)
Empty state (pokud zobrazuje kolekci)

5. Token dependencies

Komponenty vyžadují tyto DS tokeny:

Barvy: primary, secondary, surface, error, success, warning, text (primary/secondary/disabled), border
Typografie: heading (H1-H4), body (default/small), caption, label, CTA
Spacing: 4px grid (4, 8, 12, 16, 20, 24, 32, 40, 48)
Border radius: small (4), medium (8), large (12), pill (9999)
Shadows: elevation-1 (cards), elevation-2 (modals), elevation-3 (FAB)
Breakpoints: phone portrait (default), phone landscape (seat map), tablet (TBD)

6. Doporučení pro DS tým

Atomické komponenty nejdřív — Buttons, Inputs, Typography, Icons, Colors
Karty jako druhý krok — Event Card (nejvíc variantní), Ticket Card
Specialized jako třetí — Seat Map, QR Viewer, Payment Method
Feedback/overlay na konec — Bottom Sheet, Toast, Dialog (potřebují kontext)
Dodávat s dokumentací — název, varianty, props, usage guidelines

1. Přehled​

2. Kategorie komponent​

2.1 Navigation (6 komponent)​

2.2 Buttons (8 komponent)​

2.3 Inputs (10 komponent)​

2.4 Cards (9 komponent)​

2.5 Lists (5 komponent)​

2.6 Feedback & Overlays (8 komponent)​

2.7 Specialized (8 komponent)​

2.8 Media (6 komponent)​

2.9 Layout (5 komponent)​

3. Souhrn per fáze​

4. Stavovost komponent​

5. Token dependencies​

6. Doporučení pro DS tým​