Web uniquement — React, depuis @krizaka/ui/account-settings. Bêta : son API peut encore changer à une version mineure.

• Mobile · ✗ à construire. The Expo apps get the same blocks on @krizaka/ui/native. issue #503

Pourquoi il est là. Used by Yomizaka, Akinaza.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { AccountProfileCard, AvatarPicker, ChoiceCards, LanguagePicker, AppearanceSettings } from "@krizaka/ui/account-settings";

Exemples

Props

Accessibilité

• Each group is a named radiogroup; the chosen item says aria-checked, shows a ring and a check (not colour alone).
• A card's description is its aria-describedby; a picture is named by its label, not its image.
• The save result is a polite live region that stays mounted; a failure is role="alert".

Clavier

Bonnes pratiques

• One save per section (SettingsSection save): enabled while the section is dirty, « Saved » and Undo after it, the failure as an alert. Never a save above the fields.
• AvatarPicker is one radiogroup — never a row of circles with loose radios; keep the upload inside its grid, after the pictures.
• Name every language in its own language and label the control: « Langue », never an unlabelled switch.
• Pass every word translated; the member-since date is formatted by the app in the viewer's language.
• Appearance: pass the themes the product offers (system, light, dark, then Blueprint and Carbone if wanted — never a paper theme inside a signed-in product) from appearance of @krizaka/tokens, and only the accents that read on all of them (appearance.passes). The change applies at once (useAppearance() of @krizaka/ui/theme, restored before paint by ThemeScript); save it in the account too so it follows the person. Sound is opt-in, off by default, never under reduced motion; density is html[data-density].
• Section patterns (security, subscription, storage, my data) are flat sections of SettingsRows: the billing portal is one link, the export one button, the delete a ConfirmButton.

Composants liés

• Settings layoutSettings: the sections on the side, alone or in titled groups (a row of chips on a phone, one menu past five), an optional identity header and the current section's forms, as titled cards with their own save or, flat, as hairline-divided rows (SettingsRow).
• Radio groupOne choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.
• AvatarA person or an account: their picture, or initials while it loads, when it fails or when there is none.
• Choice gridA line-up of choices as tiles — a visual, a name, a line: a radio group with roving focus when selectable, a named showcase otherwise; sober by default, a select screen in the arcade flavour.
• Confirm buttonA destructive action in two presses: the first arms it and says what will happen, the second runs it.
• MeterA measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub