SettingsDialog

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Settings Dialog

section

viewport

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Viewport	Settings Dialog
Desktop	Configurações Perfil Nome Mariana Alves E-mail mariana.alves@exemplo.com.br WhatsApp +55 11 98765-4321
Phone	Configurações Perfil Nome Mariana Alves E-mail mariana.alves@exemplo.com.br WhatsApp +55 11 98765-4321

Viewport	Settings Dialog
Desktop	Configurações Notificações Avisos de risco WhatsApp e e-mail Resumo da semana Toda segunda, 9:00
Phone	Configurações Notificações Avisos de risco WhatsApp e e-mail Resumo da semana Toda segunda, 9:00

Viewport	Settings Dialog
Desktop	Configurações Conta Sessões abertas 2 aparelhos Excluir conta Apaga tudo em 30 dias
Phone	Configurações Conta Sessões abertas 2 aparelhos Excluir conta Apaga tudo em 30 dias

Viewport	Settings Dialog
Desktop	Configurações Plano e cobrança Plano Família · 2 pessoas Próxima cobrança R$ 39,90 em 25/10 Forma de pagamento Cartão final 4242
Phone	Configurações Plano e cobrança Plano Família · 2 pessoas Próxima cobrança R$ 39,90 em 25/10 Forma de pagamento Cartão final 4242

Viewport	Settings Dialog
Desktop	Configurações Família Lia Protegendo Marlene (sogra, 76) Esperando o sim
Phone	Configurações Família Lia Protegendo Marlene (sogra, 76) Esperando o sim

Viewport	Settings Dialog
Desktop	Configurações Encerrar ou cancelar Dá pra pausar a proteção, tirar uma pessoa ou cancelar o plano. Cada opção explica o que acontece antes de confirmar.
Phone	Configurações Encerrar ou cancelar Dá pra pausar a proteção, tirar uma pessoa ou cancelar o plano. Cada opção explica o que acontece antes de confirmar.

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

SettingsDialogContentProps

Prop	Tipo	Padrão	Descrição
viewport?	SettingsViewport	"auto"	Desktop, Phone (Figma Viewport) or auto (phone below sm).
scrim?	ScrimTone	"soft"
className?	string	—

SettingsDialogPreviewProps

Prop	Tipo	Padrão	Descrição
viewport?	"desktop" \| "phone"	"desktop"
className?	string	—

SettingsDialogNavProps

Prop	Tipo	Padrão	Descrição
label	string	—	Accessible name of the section list, e.g. "Seções".
className?	string	—

SettingsDialogNavItemProps

Prop	Tipo	Padrão	Descrição
value	string	—	The section this item opens.
icon?	ReactNode	—	A lucide glyph (user-round, bell, credit-card, users, shield-alert).
className?	string	—
children	ReactNode	—

SettingsDialogPanelProps

Prop	Tipo	Padrão	Descrição
value	string	—	The section this panel belongs to.
className?	string	—