Podgląd design systemu

Biblioteka komponentów

Inputy

Pola formularza (shadcn + radix)

Podstawowe kontrolki formularza z `@/components/ui` — budulec formularzy przed warstwą RHF.

Label + Input

Textarea

Checkbox

Switch

Select

Radio group

Opcja 1

Opcja 2

Komponenty formularza z błędami

Warstwa salonowa: pola z jednym źródłem błędów (`errors` / `setFieldErrors`). Przycisk „Symuluj błąd” ustawia komunikaty we wszystkich polach — jak po nieudanym zapisie z API.

E-mail

Rola

Ilość

Notatki (FormInput)

Opis (FormTextarea)

Telefon (FormPhoneInput)

Data (FormDatePicker)

Zdjęcie

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 2.0 MB

Pole niestandardowe (FormField + FormError)

SearchInput

Pole wyszukiwania z ikoną, czyszczeniem (`X`) i wariantami wysokości `variant`.

variant="sm"

variant="md"

variant="lg"

variant="xl"

ImageUpload

Upload obrazu: layout `inline` (domyślny) vs `panel` + `aspectRatio` dla większego podglądu.

layout inline (domyślny)

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 5.0 MB

layout panel

Brak zdjęciaWybierz zdjęcie

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 5.0 MB

Toggle i ToggleGroup

Przełączniki stanu (np. formatowanie tekstu) i grupy wzajemnie wykluczające się opcje.

InputOTP

Pola na kod numeryczny (2FA, weryfikacja SMS).

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Komunikaty i treść

Button — warianty, rozmiary, tryby

Główny przycisk akcji. Warianty `variant` i `size`; `mode="link"` dla linkowego wyglądu; `size="action"` w stopkach modali.

Właściwość `variant`

W CVA są też foreground i inverse (na razie bez dodatkowych klas) — tu pokazujemy warianty używane w produkcie.

Właściwość `size`

Właściwość `mode`

Stany `disabled` i `loading`

Badge — warianty i wygląd

Statusy i etykiety. `variant` steruje kolorem; `appearance` dodatkowo modyfikuje styl (np. `ghost`, `light`).

`variant` (appearance domyślne)

primarysecondaryoutlinesuccesswarninginfodestructive

`appearance="light"`

primarysecondarysuccesswarninginfodestructive

`appearance="outline"`

primarysuccesswarninginfo

`appearance="ghost"`

primarysecondaryoutline

`size`

xssmmdlg

ColorPicker

Wybór koloru (kwadrat podglądu + paleta w `Popover`). Ten sam wzorzec co przy kategoriach w salonie.

Kolor

Aktualna wartość: #6366f1

Wyłączony

Card

Kontener treści z nagłówkiem, treścią i stopką. Wariant `variant="accent"` dla delikatnego tła.

Tytuł karty

Opis lub podtytuł karty.

Treść karty. Może zawierać dowolne komponenty.

Karta accent

Wariant z tłem muted.

Alert

Komunikaty inline: informacja, sukces, ostrzeżenie, błąd — przez `variant` i `appearance`.

Informacja

Treść alertu primary.

Sukces

Operacja zakończona pomyślnie.

Błąd

Coś poszło nie tak.

Uwaga

Proszę zweryfikować dane.

Skeleton

Placeholdery layoutu podczas ładowania danych.

Separator

Linia pozioma lub pionowa oddzielająca sekcje treści.

Tekst nad separatorem

Tekst pod separatorem

Lewy

Prawy

Code i Kbd

Fragmenty kodu inline i skróty klawiszowe w tekście.

Użyj npm install aby zainstalować zależności. Skrót zapisu: Ctrl + S.

defaultdestructiveoutlinesmlg

Escsmxsoutline

Carousel

Poziomy slider kart — galerie, onboarding.

Modale i panele

Dialog

Modal na desktopie — treść w `DialogBody`, akcje w `DialogFooter`.

Sheet

Panel wysuwany z boku — filtry, szczegóły, nawigacja pomocnicza.

Tabs

Przełączanie widoków bez zmiany URL — zakładki z treścią per `value`.

Treść pierwszej zakładki.

Accordion

Wiele rozwijanych sekcji z nagłówkami — FAQ, filtry zaawansowane.

AlertDialog

Modal blokujący — potwierdzenie destrukcyjnych akcji (np. usunięcie).

Collapsible

Jedna zwijana sekcja bez wielozakładkowej semantyki accordionu.

Drawer

Panel od dołu ekranu — naturalny wzorzec na mobile.

FullScreenShell.Tabbed

Pełnoekranowy flow z bocznym menu zakładek, osobną treścią i stopką per tab, lazy loading (`loadData`, `loadBehavior`). Wielozakładowe formularze: `useFullScreenShellTabRhfFieldErrors` zwraca `tabRhfErrorById` (błędy RHF pogrupowane po `tabId`); w `FullScreenShellTabDefinition.badge` umieść `FullScreenShellTabErrorBadge` z czytelnym `label` (dla SR). Po błędzie z API: `applyApiFormErrors` zwraca `appliedFieldPaths` — użyj `getFirstFullScreenTabIdForRhfFieldPaths` wraz z mapą pól→zakładka i `activeTabId` + `onActiveTabChange` na `Tabbed`, by przejść do pierwszej pasującej zakładki. Patrz: modale dodawania / edycji klienta.

FullScreenShellTabErrorBadge — kropka w nawigacji bocznej; atrybut label trafia w title i aria-label.

useFullScreenShellTabRhfFieldErrors — grupuje błędy RHF per tabId (zob. pierwsza zakładka demo gdy poniżej ustawisz błąd).

Po błędzie z errors w API: applyApiFormErrors zwraca appliedFieldPaths; do przełączenia zakładki użyj getFirstFullScreenTabIdForRhfFieldPaths wraz z activeTabId / onActiveTabChange.

Symulacja błędów (Profil):

Odznaka (poza nawigacją):

Aktywny tab: profile

Daty i zakresy

Calendar (react-day-picker)

Pojedyncza data lub zakres — tryb `single` w demo, locale `pl`.

kwiecień 2026

pon	wto	śro	czw	pią	sob	nie

MonthPicker, YearPicker, widoki dual

Wybór miesiąca/roku i warianty „dwa zakresy” obok siebie z jednym paskiem nawigacji — jak w raportach okresowych.

MonthPicker

2026

{ year: 2026, month: 3 } (np. kwiecień = 3)

YearPicker

2016–2027

value = 2026

DualMonthPickerView

Lewy rok Y i prawy Y+1; strzałki przesuwają oba o jeden rok. Osobne wartości „od” / „do”.

20262027

from { year: 2026, month: 0 } · to { year: 2026, month: 3 }

DualYearPickerView

Dwa bloki po 12 lat; strzałki przesuwają oba o 12 lat (jak przewijanie pary miesięcy).

2020–20312032–2043

fromYear=2026 · toYear=2028

DateRangePeriodDropdown

Filtr okresu: presety + niestandardowy zakres. Parametry `granularity`, `customRangeLayout` (`popover-split` vs `stacked`) — wszystkie kombinacje obok siebie.

granularity="day"

Presety: tydzień / miesiąc / rok. Niestandardowy: kalendarz zakresu (2 miesiące). Lewa kolumna: panel obok listy; prawa: niestandardowy pod przyciskiem.

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-04-01 · dateTo=2026-04-30

granularity="month"

Jak lista płac: bez tygodni. W wąskim kontenerze (np. sheet) panel i tak nie przekroczy szerokości rodzica — maks. 488px jak w split.

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-04-01 · dateTo=2026-04-30

granularity="year"

Tylko bieżący / poprzedni rok. Niestandardowy: rok od / rok do (stacked obsługuje ten sam widok co month/day).

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-01-01 · dateTo=2026-12-31

Listy i nawigacja

Table

Semantyczna tabela HTML ze stylami — listy encji, podsumowania.

Imię	Status	Wartość
Anna Kowalska	Aktywna	120 zł
Jan Nowak	Oczekuje	80 zł

Avatar

Zdjęcie profilowe lub inicjały — `AvatarFallback` gdy brak obrazu.

AKJNDU

ScrollArea

Przewijany obszar ze spójnym paskiem przewijania (radix ScrollArea).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Command

Lista z wyszukiwaniem — command palette w `Popover` lub modalu.

Pagination

Nawigacja stron list — z przyciskami `Button` jako linki/strony.

Stepper

Kroki procesu wieloetapowego (kreator, checkout).

Układ i media

Progress i Slider

Pasek postępu i suwak wartości — feedback ładowania i ustawień.

Progress (60%)

Slider: 50

AspectRatio

Utrzymanie proporcji kontenera (np. 16:9 dla obrazów i video).

ResizablePanelGroup

Dzielenie layoutu na panele z uchwytem zmiany szerokości/wysokości.

Panel 1

Panel 2

Powiadomienia

Toast (sonner)

Powiadomienia globalne: sukces, błąd, akcja „Cofnij”.

Podgląd design systemu

Biblioteka komponentów

Inputy

Pola formularza (shadcn + radix)

Podstawowe kontrolki formularza z `@/components/ui` — budulec formularzy przed warstwą RHF.

Label + Input

Textarea

Checkbox

Switch

Select

Radio group

Opcja 1

Opcja 2

Komponenty formularza z błędami

Warstwa salonowa: pola z jednym źródłem błędów (`errors` / `setFieldErrors`). Przycisk „Symuluj błąd” ustawia komunikaty we wszystkich polach — jak po nieudanym zapisie z API.

E-mail

Rola

Ilość

Notatki (FormInput)

Opis (FormTextarea)

Telefon (FormPhoneInput)

Data (FormDatePicker)

Zdjęcie

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 2.0 MB

Pole niestandardowe (FormField + FormError)

SearchInput

Pole wyszukiwania z ikoną, czyszczeniem (`X`) i wariantami wysokości `variant`.

variant="sm"

variant="md"

variant="lg"

variant="xl"

ImageUpload

Upload obrazu: layout `inline` (domyślny) vs `panel` + `aspectRatio` dla większego podglądu.

layout inline (domyślny)

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 5.0 MB

layout panel

Brak zdjęciaWybierz zdjęcie

Obsługiwane formaty: JPG, PNG, WebPMaks. rozmiar: 5.0 MB

Toggle i ToggleGroup

Przełączniki stanu (np. formatowanie tekstu) i grupy wzajemnie wykluczające się opcje.

InputOTP

Pola na kod numeryczny (2FA, weryfikacja SMS).

Komunikaty i treść

Button — warianty, rozmiary, tryby

Główny przycisk akcji. Warianty `variant` i `size`; `mode="link"` dla linkowego wyglądu; `size="action"` w stopkach modali.

Właściwość `variant`

W CVA są też foreground i inverse (na razie bez dodatkowych klas) — tu pokazujemy warianty używane w produkcie.

Właściwość `size`

Właściwość `mode`

Stany `disabled` i `loading`

Badge — warianty i wygląd

Statusy i etykiety. `variant` steruje kolorem; `appearance` dodatkowo modyfikuje styl (np. `ghost`, `light`).

`variant` (appearance domyślne)

primarysecondaryoutlinesuccesswarninginfodestructive

`appearance="light"`

primarysecondarysuccesswarninginfodestructive

`appearance="outline"`

primarysuccesswarninginfo

`appearance="ghost"`

primarysecondaryoutline

`size`

xssmmdlg

ColorPicker

Wybór koloru (kwadrat podglądu + paleta w `Popover`). Ten sam wzorzec co przy kategoriach w salonie.

Kolor

Aktualna wartość: #6366f1

Wyłączony

Card

Kontener treści z nagłówkiem, treścią i stopką. Wariant `variant="accent"` dla delikatnego tła.

Tytuł karty

Opis lub podtytuł karty.

Treść karty. Może zawierać dowolne komponenty.

Karta accent

Wariant z tłem muted.

Alert

Komunikaty inline: informacja, sukces, ostrzeżenie, błąd — przez `variant` i `appearance`.

Informacja

Treść alertu primary.

Sukces

Operacja zakończona pomyślnie.

Błąd

Coś poszło nie tak.

Uwaga

Proszę zweryfikować dane.

Skeleton

Placeholdery layoutu podczas ładowania danych.

Separator

Linia pozioma lub pionowa oddzielająca sekcje treści.

Tekst nad separatorem

Tekst pod separatorem

Lewy

Prawy

Code i Kbd

Fragmenty kodu inline i skróty klawiszowe w tekście.

Użyj npm install aby zainstalować zależności. Skrót zapisu: Ctrl + S.

defaultdestructiveoutlinesmlg

Escsmxsoutline

Carousel

Poziomy slider kart — galerie, onboarding.

Modale i panele

Dialog

Modal na desktopie — treść w `DialogBody`, akcje w `DialogFooter`.

Sheet

Panel wysuwany z boku — filtry, szczegóły, nawigacja pomocnicza.

Tabs

Przełączanie widoków bez zmiany URL — zakładki z treścią per `value`.

Treść pierwszej zakładki.

Accordion

Wiele rozwijanych sekcji z nagłówkami — FAQ, filtry zaawansowane.

AlertDialog

Modal blokujący — potwierdzenie destrukcyjnych akcji (np. usunięcie).

Collapsible

Jedna zwijana sekcja bez wielozakładkowej semantyki accordionu.

Drawer

Panel od dołu ekranu — naturalny wzorzec na mobile.

FullScreenShell.Tabbed

FullScreenShellTabErrorBadge — kropka w nawigacji bocznej; atrybut label trafia w title i aria-label.

useFullScreenShellTabRhfFieldErrors — grupuje błędy RHF per tabId (zob. pierwsza zakładka demo gdy poniżej ustawisz błąd).

Po błędzie z errors w API: applyApiFormErrors zwraca appliedFieldPaths; do przełączenia zakładki użyj getFirstFullScreenTabIdForRhfFieldPaths wraz z activeTabId / onActiveTabChange.

Symulacja błędów (Profil):

Odznaka (poza nawigacją):

Aktywny tab: profile

Daty i zakresy

Calendar (react-day-picker)

Pojedyncza data lub zakres — tryb `single` w demo, locale `pl`.

kwiecień 2026

pon	wto	śro	czw	pią	sob	nie

MonthPicker, YearPicker, widoki dual

Wybór miesiąca/roku i warianty „dwa zakresy” obok siebie z jednym paskiem nawigacji — jak w raportach okresowych.

MonthPicker

2026

{ year: 2026, month: 3 } (np. kwiecień = 3)

YearPicker

2016–2027

value = 2026

DualMonthPickerView

Lewy rok Y i prawy Y+1; strzałki przesuwają oba o jeden rok. Osobne wartości „od” / „do”.

20262027

from { year: 2026, month: 0 } · to { year: 2026, month: 3 }

DualYearPickerView

Dwa bloki po 12 lat; strzałki przesuwają oba o 12 lat (jak przewijanie pary miesięcy).

2020–20312032–2043

fromYear=2026 · toYear=2028

DateRangePeriodDropdown

Filtr okresu: presety + niestandardowy zakres. Parametry `granularity`, `customRangeLayout` (`popover-split` vs `stacked`) — wszystkie kombinacje obok siebie.

granularity="day"

Presety: tydzień / miesiąc / rok. Niestandardowy: kalendarz zakresu (2 miesiące). Lewa kolumna: panel obok listy; prawa: niestandardowy pod przyciskiem.

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-04-01 · dateTo=2026-04-30

granularity="month"

Jak lista płac: bez tygodni. W wąskim kontenerze (np. sheet) panel i tak nie przekroczy szerokości rodzica — maks. 488px jak w split.

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-04-01 · dateTo=2026-04-30

granularity="year"

Tylko bieżący / poprzedni rok. Niestandardowy: rok od / rok do (stacked obsługuje ten sam widok co month/day).

Domyślnie: popover-split

customRangeLayout="stacked"

dateFrom=2026-01-01 · dateTo=2026-12-31

Listy i nawigacja

Table

Semantyczna tabela HTML ze stylami — listy encji, podsumowania.

Imię	Status	Wartość
Anna Kowalska	Aktywna	120 zł
Jan Nowak	Oczekuje	80 zł

Avatar

Zdjęcie profilowe lub inicjały — `AvatarFallback` gdy brak obrazu.

AKJNDU

ScrollArea

Przewijany obszar ze spójnym paskiem przewijania (radix ScrollArea).

Command

Lista z wyszukiwaniem — command palette w `Popover` lub modalu.

Pagination

Nawigacja stron list — z przyciskami `Button` jako linki/strony.

Stepper

Kroki procesu wieloetapowego (kreator, checkout).

Układ i media

Progress i Slider

Pasek postępu i suwak wartości — feedback ładowania i ustawień.

Progress (60%)

Slider: 50

AspectRatio

Utrzymanie proporcji kontenera (np. 16:9 dla obrazów i video).

ResizablePanelGroup

Dzielenie layoutu na panele z uchwytem zmiany szerokości/wysokości.

Panel 1

Panel 2

Powiadomienia

Toast (sonner)

Powiadomienia globalne: sukces, błąd, akcja „Cofnij”.

Inputy

Komunikaty i treść

Właściwość `variant`

Właściwość `size`

Właściwość `mode`

Stany `disabled` i `loading`

`variant` (appearance domyślne)

`appearance="light"`

`appearance="outline"`

`appearance="ghost"`

`size`

Tytuł karty

Karta accent

Modale i panele

Sekcja 1

Sekcja 2

Sekcja 3

Daty i zakresy

MonthPicker

YearPicker

DualMonthPickerView

DualYearPickerView

granularity="day"

granularity="month"

granularity="year"

Listy i nawigacja

Dane

Weryfikacja

Zakończenie

Układ i media

Powiadomienia

Inputy

Komunikaty i treść

Właściwość `variant`

Właściwość `size`

Właściwość `mode`

Stany `disabled` i `loading`

`variant` (appearance domyślne)

`appearance="light"`

`appearance="outline"`

`appearance="ghost"`

`size`

Tytuł karty

Karta accent

Modale i panele

Sekcja 1

Sekcja 2

Sekcja 3

Daty i zakresy

MonthPicker

YearPicker

DualMonthPickerView

DualYearPickerView

granularity="day"

granularity="month"

granularity="year"

Listy i nawigacja

Dane

Weryfikacja

Zakończenie

Układ i media

Powiadomienia