@assembleo/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -0
- package/dist/index.d.ts +676 -0
- package/dist/index.js +1594 -0
- package/dist/theme.css +538 -0
- package/package.json +89 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,676 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, TextareaHTMLAttributes, MouseEventHandler } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { VariantProps, cx } from 'class-variance-authority';
|
|
5
|
+
import { Avatar as Avatar$1, Checkbox as Checkbox$1, Dialog as Dialog$1, Popover as Popover$1, RadioGroup as RadioGroup$1, Select as Select$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1 } from 'radix-ui';
|
|
6
|
+
|
|
7
|
+
declare const avatar: (props?: ({
|
|
8
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
9
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
|
+
type AvatarVariants = VariantProps<typeof avatar>;
|
|
11
|
+
interface AvatarProps extends Omit<ComponentProps<typeof Avatar$1.Root>, 'className' | 'children'> {
|
|
12
|
+
/** Nome da pessoa — é o nome acessível e a origem das iniciais e da cor. */
|
|
13
|
+
name: string;
|
|
14
|
+
src?: string;
|
|
15
|
+
size?: AvatarVariants['size'];
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare function Avatar({ name, src, size, className, ...props }: AvatarProps): react.JSX.Element;
|
|
19
|
+
interface AvatarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
20
|
+
/** Quantos avatares aparecem antes do excedente virar "+N". */
|
|
21
|
+
max?: number;
|
|
22
|
+
/** O mesmo `size` dos Avatars filhos — mantém o círculo "+N" no mesmo compasso. */
|
|
23
|
+
size?: AvatarVariants['size'];
|
|
24
|
+
className?: string;
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
}
|
|
27
|
+
declare function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps): react.JSX.Element;
|
|
28
|
+
|
|
29
|
+
declare const badge: (props?: ({
|
|
30
|
+
tone?: "accent" | "neutral" | "success" | "warning" | "danger" | "terracota" | "jardim" | "ambar" | "lavanda" | "ceu" | null | undefined;
|
|
31
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
32
|
+
type BadgeVariants = VariantProps<typeof badge>;
|
|
33
|
+
interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
|
|
34
|
+
tone?: BadgeVariants['tone'];
|
|
35
|
+
/** Bolinha na cor forte do tom — reforço visual do status, invisível ao leitor de tela. */
|
|
36
|
+
dot?: boolean;
|
|
37
|
+
className?: string;
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
}
|
|
40
|
+
declare function Badge({ tone, dot, className, children, ...props }: BadgeProps): react.JSX.Element;
|
|
41
|
+
|
|
42
|
+
declare const banner: (props?: ({
|
|
43
|
+
tone?: "success" | "warning" | "danger" | "info" | null | undefined;
|
|
44
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
45
|
+
type BannerVariants = VariantProps<typeof banner>;
|
|
46
|
+
interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
|
|
47
|
+
tone?: BannerVariants['tone'];
|
|
48
|
+
/** Primeira linha, em negrito; o corpo vem em `children`. */
|
|
49
|
+
title?: string;
|
|
50
|
+
/** Presente = banner dispensável; o X chama este callback. */
|
|
51
|
+
onDismiss?: () => void;
|
|
52
|
+
className?: string;
|
|
53
|
+
children: ReactNode;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Aviso inline — o callout do iOS traduzido para o condomínio: fica no fluxo
|
|
57
|
+
* da página, perto do que explica, e não some sozinho como um toast.
|
|
58
|
+
*
|
|
59
|
+
* `danger` vira `role="alert"` porque é o único tom que justifica interromper
|
|
60
|
+
* o leitor de tela; o resto anuncia com calma via `status`.
|
|
61
|
+
*/
|
|
62
|
+
declare function Banner({ tone, title, onDismiss, className, children, ...props }: BannerProps): react.JSX.Element;
|
|
63
|
+
|
|
64
|
+
declare const button: (props?: ({
|
|
65
|
+
variant?: "danger" | "primary" | "tonal" | "secondary" | "ghost" | "danger-tonal" | null | undefined;
|
|
66
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
67
|
+
width?: "auto" | "full" | null | undefined;
|
|
68
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
69
|
+
type ButtonVariants = VariantProps<typeof button>;
|
|
70
|
+
interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
|
|
71
|
+
variant?: ButtonVariants['variant'];
|
|
72
|
+
size?: ButtonVariants['size'];
|
|
73
|
+
width?: ButtonVariants['width'];
|
|
74
|
+
/**
|
|
75
|
+
* Em curso: desabilita e mostra o spinner sem trocar a largura — o rótulo
|
|
76
|
+
* fica invisível mas continua ocupando espaço, então nada salta.
|
|
77
|
+
*/
|
|
78
|
+
loading?: boolean;
|
|
79
|
+
className?: string;
|
|
80
|
+
children: ReactNode;
|
|
81
|
+
}
|
|
82
|
+
declare function Button({ variant, size, width, loading, className, type, disabled, children, ...props }: ButtonProps): react.JSX.Element;
|
|
83
|
+
|
|
84
|
+
declare const card: (props?: ({
|
|
85
|
+
variant?: "flat" | "raised" | "floating" | null | undefined;
|
|
86
|
+
padding?: "md" | "lg" | "none" | null | undefined;
|
|
87
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
88
|
+
type CardVariants = VariantProps<typeof card>;
|
|
89
|
+
interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
|
|
90
|
+
variant?: CardVariants['variant'];
|
|
91
|
+
padding?: CardVariants['padding'];
|
|
92
|
+
/**
|
|
93
|
+
* Cartão de navegação: vira um <button> de verdade — foco, teclado e leitor
|
|
94
|
+
* de tela de graça — em vez de um div com onClick que só o mouse alcança.
|
|
95
|
+
*/
|
|
96
|
+
interactive?: boolean;
|
|
97
|
+
className?: string;
|
|
98
|
+
children: ReactNode;
|
|
99
|
+
}
|
|
100
|
+
declare function Card({ variant, padding, interactive, className, children, ...props }: CardProps): react.JSX.Element;
|
|
101
|
+
|
|
102
|
+
interface CheckboxProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, 'className' | 'children'> {
|
|
103
|
+
/**
|
|
104
|
+
* Texto ao lado da caixa; a linha inteira vira alvo de toque de 44px.
|
|
105
|
+
* Sem `label`, o checkbox fica mudo para leitores de tela — nesse caso
|
|
106
|
+
* `aria-label` é obrigatório.
|
|
107
|
+
*/
|
|
108
|
+
label?: string;
|
|
109
|
+
className?: string;
|
|
110
|
+
}
|
|
111
|
+
declare function Checkbox({ label, className, id, ...props }: CheckboxProps): react.JSX.Element;
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* O modal de confirmação: uma pergunta, uma decisão. Radix cuida do portal,
|
|
115
|
+
* do foco preso e do Escape; aqui entram só a pele e a composição.
|
|
116
|
+
*/
|
|
117
|
+
declare const Dialog: react.FC<Dialog$1.DialogProps>;
|
|
118
|
+
interface DialogTriggerProps extends ComponentPropsWithoutRef<typeof Dialog$1.Trigger> {
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* `asChild` por padrão: o gatilho quase sempre é um <Button> do sistema, e
|
|
122
|
+
* embrulhá-lo em outro <button> seria HTML inválido.
|
|
123
|
+
*/
|
|
124
|
+
declare function DialogTrigger({ asChild, ...props }: DialogTriggerProps): react.JSX.Element;
|
|
125
|
+
interface DialogContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Content>, 'className'> {
|
|
126
|
+
className?: string;
|
|
127
|
+
children: ReactNode;
|
|
128
|
+
}
|
|
129
|
+
declare function DialogContent({ className, children, ...props }: DialogContentProps): react.JSX.Element;
|
|
130
|
+
interface DialogSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
131
|
+
className?: string;
|
|
132
|
+
children: ReactNode;
|
|
133
|
+
}
|
|
134
|
+
declare function DialogHeader({ className, children, ...props }: DialogSectionProps): react.JSX.Element;
|
|
135
|
+
interface DialogTitleProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Title>, 'className'> {
|
|
136
|
+
className?: string;
|
|
137
|
+
}
|
|
138
|
+
declare function DialogTitle({ className, ...props }: DialogTitleProps): react.JSX.Element;
|
|
139
|
+
interface DialogDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Description>, 'className'> {
|
|
140
|
+
className?: string;
|
|
141
|
+
}
|
|
142
|
+
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react.JSX.Element;
|
|
143
|
+
declare function DialogFooter({ className, children, ...props }: DialogSectionProps): react.JSX.Element;
|
|
144
|
+
interface DialogCloseProps extends ComponentPropsWithoutRef<typeof Dialog$1.Close> {
|
|
145
|
+
}
|
|
146
|
+
/** Mesmo raciocínio do trigger: o "Cancelar" do rodapé é um <Button> nosso. */
|
|
147
|
+
declare function DialogClose({ asChild, ...props }: DialogCloseProps): react.JSX.Element;
|
|
148
|
+
|
|
149
|
+
interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
|
|
150
|
+
/**
|
|
151
|
+
* Slot livre para uma ilustração da camada expressiva (um prédio, um
|
|
152
|
+
* livreto). Quando presente, vence o `icon` — os dois juntos brigariam.
|
|
153
|
+
*/
|
|
154
|
+
illustration?: ReactNode;
|
|
155
|
+
/** Ícone simples; ganha a moldura squircle suave do sistema. */
|
|
156
|
+
icon?: ReactNode;
|
|
157
|
+
title: string;
|
|
158
|
+
description?: string;
|
|
159
|
+
/** Slot para a ação que tira a tela do vazio — em geral um Button. */
|
|
160
|
+
action?: ReactNode;
|
|
161
|
+
className?: string;
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* O vazio como convite: em vez de uma lista em branco, uma tela que explica o
|
|
165
|
+
* que este lugar vai ser e oferece o primeiro passo. O texto faz o trabalho —
|
|
166
|
+
* título nomeia o vazio, descrição diz o que fazer, a ação faz.
|
|
167
|
+
*/
|
|
168
|
+
declare function EmptyState({ illustration, icon, title, description, action, className, ...props }: EmptyStateProps): react.JSX.Element;
|
|
169
|
+
|
|
170
|
+
interface FieldContextValue {
|
|
171
|
+
controlId: string;
|
|
172
|
+
hintId: string | undefined;
|
|
173
|
+
errorId: string | undefined;
|
|
174
|
+
invalid: boolean;
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* O controle (Input, Textarea, Select…) lê daqui os ids de label, dica e erro.
|
|
178
|
+
* Fora de um Field, devolve null e o controle segue autônomo.
|
|
179
|
+
*/
|
|
180
|
+
declare function useFieldContext(): FieldContextValue | null;
|
|
181
|
+
interface FieldProps {
|
|
182
|
+
label: string;
|
|
183
|
+
/** Ajuda curta, permanente, abaixo do controle. */
|
|
184
|
+
hint?: string;
|
|
185
|
+
/** Mensagem de erro; presente = campo inválido. */
|
|
186
|
+
error?: string;
|
|
187
|
+
/** Marca visual e semântica de obrigatório. */
|
|
188
|
+
required?: boolean;
|
|
189
|
+
className?: string;
|
|
190
|
+
children: ReactNode;
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* A moldura de todo campo de formulário: label, controle, dica e erro, com a
|
|
194
|
+
* fiação de acessibilidade feita uma vez só — `htmlFor`, `aria-describedby` e
|
|
195
|
+
* `aria-invalid` nascem daqui, e nenhuma tela precisa lembrar deles.
|
|
196
|
+
*/
|
|
197
|
+
declare function Field({ label, hint, error, required, className, children }: FieldProps): react.JSX.Element;
|
|
198
|
+
|
|
199
|
+
declare const iconButton: (props?: ({
|
|
200
|
+
variant?: "primary" | "tonal" | "secondary" | "ghost" | "danger-tonal" | null | undefined;
|
|
201
|
+
size?: "sm" | "md" | null | undefined;
|
|
202
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
203
|
+
type IconButtonVariants = VariantProps<typeof iconButton>;
|
|
204
|
+
interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'aria-label'> {
|
|
205
|
+
/**
|
|
206
|
+
* Obrigatório porque um ícone sozinho não diz nada ao leitor de tela —
|
|
207
|
+
* vira o `aria-label` e é a única fonte do nome acessível.
|
|
208
|
+
*/
|
|
209
|
+
label: string;
|
|
210
|
+
variant?: IconButtonVariants['variant'];
|
|
211
|
+
size?: IconButtonVariants['size'];
|
|
212
|
+
className?: string;
|
|
213
|
+
/** O ícone (lucide), e só ele — texto visível pede o Button. */
|
|
214
|
+
children: ReactNode;
|
|
215
|
+
}
|
|
216
|
+
declare function IconButton({ label, variant, size, className, type, children, ...props }: IconButtonProps): react.JSX.Element;
|
|
217
|
+
|
|
218
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
|
|
219
|
+
className?: string;
|
|
220
|
+
}
|
|
221
|
+
declare function Input({ className, id, type, ...props }: InputProps): react.JSX.Element;
|
|
222
|
+
|
|
223
|
+
interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
|
|
224
|
+
className?: string;
|
|
225
|
+
}
|
|
226
|
+
declare function Textarea({ className, id, rows, ...props }: TextareaProps): react.JSX.Element;
|
|
227
|
+
|
|
228
|
+
interface ListProps {
|
|
229
|
+
/** Título da seção, fora da superfície — como nos Ajustes do iOS. */
|
|
230
|
+
header?: string;
|
|
231
|
+
/** Nota de rodapé explicando a seção, também fora da superfície. */
|
|
232
|
+
footer?: string;
|
|
233
|
+
className?: string;
|
|
234
|
+
children: ReactNode;
|
|
235
|
+
}
|
|
236
|
+
/**
|
|
237
|
+
* A lista agrupada do iOS: itens sobre uma superfície única, separados por
|
|
238
|
+
* fios, com título e nota do lado de fora. É a espinha dorsal das telas de
|
|
239
|
+
* síndico e morador — ajustes do condomínio, pautas, associados.
|
|
240
|
+
*/
|
|
241
|
+
declare function List({ header, footer, className, children }: ListProps): react.JSX.Element;
|
|
242
|
+
declare const iconBadge: (props?: ({
|
|
243
|
+
tone?: "accent" | "terracota" | "jardim" | "ambar" | "lavanda" | "ceu" | null | undefined;
|
|
244
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
245
|
+
type IconBadgeVariants = VariantProps<typeof iconBadge>;
|
|
246
|
+
interface ListItemProps {
|
|
247
|
+
/** Ícone decorativo no quadradinho colorido; o sentido vem do título. */
|
|
248
|
+
icon?: ReactNode;
|
|
249
|
+
iconTone?: IconBadgeVariants['tone'];
|
|
250
|
+
title: string;
|
|
251
|
+
subtitle?: string;
|
|
252
|
+
/** Valor atual à direita, como "12 unidades" nos Ajustes. */
|
|
253
|
+
value?: string;
|
|
254
|
+
/** Com onClick o item inteiro vira um <button> e ganha o chevron de navegação. */
|
|
255
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
256
|
+
className?: string;
|
|
257
|
+
}
|
|
258
|
+
declare function ListItem({ icon, iconTone, title, subtitle, value, onClick, className, }: ListItemProps): react.JSX.Element;
|
|
259
|
+
|
|
260
|
+
/**
|
|
261
|
+
* O cartão flutuante ancorado num gatilho — detalhe de quórum, filtro rápido.
|
|
262
|
+
* O Radix cuida do portal, do posicionamento, do Escape e do clique fora.
|
|
263
|
+
*/
|
|
264
|
+
declare const Popover: react.FC<Popover$1.PopoverProps>;
|
|
265
|
+
interface PopoverTriggerProps extends ComponentPropsWithoutRef<typeof Popover$1.Trigger> {
|
|
266
|
+
}
|
|
267
|
+
/**
|
|
268
|
+
* `asChild` por padrão: o gatilho quase sempre é um Button/IconButton do
|
|
269
|
+
* sistema, e embrulhá-lo em outro <button> seria HTML inválido.
|
|
270
|
+
*/
|
|
271
|
+
declare function PopoverTrigger({ asChild, ...props }: PopoverTriggerProps): react.JSX.Element;
|
|
272
|
+
interface PopoverContentProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Content>, 'className'> {
|
|
273
|
+
className?: string;
|
|
274
|
+
children: ReactNode;
|
|
275
|
+
}
|
|
276
|
+
declare function PopoverContent({ className, sideOffset, collisionPadding, children, ...props }: PopoverContentProps): react.JSX.Element;
|
|
277
|
+
|
|
278
|
+
interface ProgressProps {
|
|
279
|
+
/**
|
|
280
|
+
* Progresso de 0 a 100. Ausente = indeterminado: a barra vira um trilho
|
|
281
|
+
* pulsante, para "apurando…" sem número não fingir precisão.
|
|
282
|
+
*/
|
|
283
|
+
value?: number;
|
|
284
|
+
/**
|
|
285
|
+
* Nome acessível obrigatório: uma barra sozinha não diz o que está medindo,
|
|
286
|
+
* e "62%" sem contexto é ruído para quem ouve a tela.
|
|
287
|
+
*/
|
|
288
|
+
label: string;
|
|
289
|
+
className?: string;
|
|
290
|
+
}
|
|
291
|
+
/**
|
|
292
|
+
* Barra de progresso determinada ou indeterminada — quórum subindo, votos
|
|
293
|
+
* sendo apurados. O Radix cuida do papel `progressbar` e dos `aria-value*`.
|
|
294
|
+
*/
|
|
295
|
+
declare function Progress({ value, label, className }: ProgressProps): react.JSX.Element;
|
|
296
|
+
|
|
297
|
+
interface RadioGroupProps extends Omit<ComponentProps<typeof RadioGroup$1.Root>, 'className'> {
|
|
298
|
+
className?: string;
|
|
299
|
+
}
|
|
300
|
+
/**
|
|
301
|
+
* O grupo carrega a fiação de formulário; cada opção é um RadioGroupItem.
|
|
302
|
+
* Fora de um Field, dê nome ao grupo com `aria-label`.
|
|
303
|
+
*/
|
|
304
|
+
declare function RadioGroup({ className, id, ...props }: RadioGroupProps): react.JSX.Element;
|
|
305
|
+
interface RadioGroupItemProps extends Omit<ComponentProps<typeof RadioGroup$1.Item>, 'className' | 'children'> {
|
|
306
|
+
/** Rádio sem texto não existe: a opção precisa se apresentar. */
|
|
307
|
+
label: string;
|
|
308
|
+
className?: string;
|
|
309
|
+
}
|
|
310
|
+
declare function RadioGroupItem({ label, className, id, ...props }: RadioGroupItemProps): react.JSX.Element;
|
|
311
|
+
|
|
312
|
+
interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
|
|
313
|
+
/**
|
|
314
|
+
* Chamado ao apertar o X. No modo não controlado o campo já se limpa sozinho
|
|
315
|
+
* (via ref) antes de avisar; no controlado é aqui que o consumidor zera o
|
|
316
|
+
* `value` — o componente não tenta adivinhar o estado de quem o usa.
|
|
317
|
+
*/
|
|
318
|
+
onClear?: () => void;
|
|
319
|
+
className?: string;
|
|
320
|
+
}
|
|
321
|
+
/**
|
|
322
|
+
* A busca com cara de iOS: pílula rebaixada, lupa à esquerda e um X próprio à
|
|
323
|
+
* direita — o do WebKit é escondido porque só existe em um motor e não fala
|
|
324
|
+
* com leitor de tela.
|
|
325
|
+
*/
|
|
326
|
+
declare function SearchField({ onClear, className, onChange, 'aria-label': ariaLabel, ...props }: SearchFieldProps): react.JSX.Element;
|
|
327
|
+
|
|
328
|
+
declare const container: (props?: ({
|
|
329
|
+
width?: "auto" | "full" | null | undefined;
|
|
330
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
331
|
+
type ContainerVariants = VariantProps<typeof container>;
|
|
332
|
+
interface SegmentedControlOption {
|
|
333
|
+
value: string;
|
|
334
|
+
label: string;
|
|
335
|
+
}
|
|
336
|
+
interface SegmentedControlProps {
|
|
337
|
+
options: SegmentedControlOption[];
|
|
338
|
+
value?: string;
|
|
339
|
+
/** Sem `value` nem `defaultValue`, a primeira opção nasce selecionada. */
|
|
340
|
+
defaultValue?: string;
|
|
341
|
+
/** Só dispara com valor de verdade — desmarcar não existe aqui. */
|
|
342
|
+
onValueChange?: (value: string) => void;
|
|
343
|
+
/** O grupo precisa se apresentar: "Filtro de pautas", "Período"… */
|
|
344
|
+
'aria-label': string;
|
|
345
|
+
width?: ContainerVariants['width'];
|
|
346
|
+
disabled?: boolean;
|
|
347
|
+
className?: string;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* O controle segmentado da Apple: um trilho rebaixado onde exatamente um
|
|
351
|
+
* segmento está sempre ativo — é filtro/aba, não checkbox. Por isso o valor é
|
|
352
|
+
* controlado por dentro e o '' que o ToggleGroup emite ao reclicar o segmento
|
|
353
|
+
* ativo é ignorado: nunca existe estado "nada selecionado".
|
|
354
|
+
*/
|
|
355
|
+
declare function SegmentedControl({ options, value, defaultValue, onValueChange, 'aria-label': ariaLabel, width, disabled, className, }: SegmentedControlProps): react.JSX.Element;
|
|
356
|
+
|
|
357
|
+
interface SelectProps extends Omit<ComponentProps<typeof Select$1.Root>, 'children'> {
|
|
358
|
+
/** Convite exibido enquanto nada foi escolhido. */
|
|
359
|
+
placeholder?: string;
|
|
360
|
+
/** Sem Field por perto, dê nome ao campo com `aria-label`. */
|
|
361
|
+
'aria-label'?: string;
|
|
362
|
+
id?: string;
|
|
363
|
+
/** Aplica no trigger — é ele o "campo" que a tela enxerga. */
|
|
364
|
+
className?: string;
|
|
365
|
+
/** Os SelectItem's (e nada além deles). */
|
|
366
|
+
children: ReactNode;
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* O Select já vem montado — trigger com cara de campo e lista pronta — porque
|
|
370
|
+
* a composição livre do Radix é liberdade que nenhuma tela nossa usa: todo
|
|
371
|
+
* select do produto é "campo que abre lista de opções".
|
|
372
|
+
*/
|
|
373
|
+
declare function Select({ placeholder, 'aria-label': ariaLabel, id, className, children, ...props }: SelectProps): react.JSX.Element;
|
|
374
|
+
interface SelectItemProps extends Omit<ComponentProps<typeof Select$1.Item>, 'className'> {
|
|
375
|
+
className?: string;
|
|
376
|
+
}
|
|
377
|
+
declare function SelectItem({ className, children, ...props }: SelectItemProps): react.JSX.Element;
|
|
378
|
+
|
|
379
|
+
interface SeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Separator$1.Root>, 'className'> {
|
|
380
|
+
className?: string;
|
|
381
|
+
}
|
|
382
|
+
/**
|
|
383
|
+
* O fio que divide seções quando a sombra não alcança. Decorativo por padrão:
|
|
384
|
+
* a divisão visual raramente é uma divisão semântica — quando for (grupos de
|
|
385
|
+
* um menu, por exemplo), passe `decorative={false}` e o papel de separador
|
|
386
|
+
* volta para o leitor de tela.
|
|
387
|
+
*/
|
|
388
|
+
declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): react.JSX.Element;
|
|
389
|
+
|
|
390
|
+
/**
|
|
391
|
+
* O bottom sheet: o modal com sotaque de celular. Sobre o mesmo Radix Dialog
|
|
392
|
+
* do modal centrado — portal, foco preso e Escape idênticos — muda só a pele:
|
|
393
|
+
* sobe do rodapé, cola nas bordas e respeita a barra de gestos do iPhone.
|
|
394
|
+
*/
|
|
395
|
+
declare const Sheet: react.FC<Dialog$1.DialogProps>;
|
|
396
|
+
interface SheetTriggerProps extends ComponentPropsWithoutRef<typeof Dialog$1.Trigger> {
|
|
397
|
+
}
|
|
398
|
+
/** `asChild` por padrão, como no Dialog: o gatilho é um controle do sistema. */
|
|
399
|
+
declare function SheetTrigger({ asChild, ...props }: SheetTriggerProps): react.JSX.Element;
|
|
400
|
+
interface SheetContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Content>, 'className'> {
|
|
401
|
+
className?: string;
|
|
402
|
+
children: ReactNode;
|
|
403
|
+
}
|
|
404
|
+
declare function SheetContent({ className, children, ...props }: SheetContentProps): react.JSX.Element;
|
|
405
|
+
interface SheetSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
406
|
+
className?: string;
|
|
407
|
+
children: ReactNode;
|
|
408
|
+
}
|
|
409
|
+
declare function SheetHeader({ className, children, ...props }: SheetSectionProps): react.JSX.Element;
|
|
410
|
+
interface SheetTitleProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Title>, 'className'> {
|
|
411
|
+
className?: string;
|
|
412
|
+
}
|
|
413
|
+
declare function SheetTitle({ className, ...props }: SheetTitleProps): react.JSX.Element;
|
|
414
|
+
interface SheetDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Description>, 'className'> {
|
|
415
|
+
className?: string;
|
|
416
|
+
}
|
|
417
|
+
declare function SheetDescription({ className, ...props }: SheetDescriptionProps): react.JSX.Element;
|
|
418
|
+
|
|
419
|
+
declare const skeleton: (props?: ({
|
|
420
|
+
shape?: "text" | "title" | "circle" | "block" | null | undefined;
|
|
421
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
422
|
+
type SkeletonVariants = VariantProps<typeof skeleton>;
|
|
423
|
+
interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
|
|
424
|
+
shape?: SkeletonVariants['shape'];
|
|
425
|
+
className?: string;
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Placeholder de carregamento: ocupa o lugar do conteúdo que ainda não chegou
|
|
429
|
+
* para a tela não saltar quando ele chega.
|
|
430
|
+
*
|
|
431
|
+
* É sempre `aria-hidden`: o esqueleto é puro teatro visual — quem anuncia o
|
|
432
|
+
* carregamento para o leitor de tela é o contêiner (`aria-busy`) ou um status
|
|
433
|
+
* de verdade, nunca uma fileira de retângulos cinzas.
|
|
434
|
+
*/
|
|
435
|
+
declare function Skeleton({ shape, className, ...props }: SkeletonProps): react.JSX.Element;
|
|
436
|
+
|
|
437
|
+
declare const spinner: (props?: ({
|
|
438
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
439
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
440
|
+
type SpinnerVariants = VariantProps<typeof spinner>;
|
|
441
|
+
interface SpinnerProps {
|
|
442
|
+
size?: SpinnerVariants['size'];
|
|
443
|
+
/**
|
|
444
|
+
* O que o leitor de tela anuncia. Quando o spinner acompanha um texto visível
|
|
445
|
+
* (ex.: botão em loading), passe `label=""` para não anunciar duas vezes.
|
|
446
|
+
*/
|
|
447
|
+
label?: string;
|
|
448
|
+
className?: string;
|
|
449
|
+
}
|
|
450
|
+
declare function Spinner({ size, label, className }: SpinnerProps): react.JSX.Element;
|
|
451
|
+
|
|
452
|
+
interface SwitchProps extends Omit<ComponentProps<typeof Switch$1.Root>, 'className' | 'children'> {
|
|
453
|
+
/**
|
|
454
|
+
* Texto à esquerda, switch à direita — a linha de ajustes do iOS, clicável
|
|
455
|
+
* inteira. Sem `label`, o switch fica mudo para leitores de tela — nesse
|
|
456
|
+
* caso `aria-label` é obrigatório.
|
|
457
|
+
*/
|
|
458
|
+
label?: string;
|
|
459
|
+
className?: string;
|
|
460
|
+
}
|
|
461
|
+
declare function Switch({ label, className, id, ...props }: SwitchProps): react.JSX.Element;
|
|
462
|
+
|
|
463
|
+
/**
|
|
464
|
+
* Navegação por abas no estilo sublinha — a do topo de tela do iOS. O Radix
|
|
465
|
+
* cuida dos papéis (tablist/tab/tabpanel), do foco e das setas; aqui entra só
|
|
466
|
+
* a pele.
|
|
467
|
+
*/
|
|
468
|
+
declare const Tabs: react.ForwardRefExoticComponent<Tabs$1.TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
469
|
+
interface TabsListProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.List>, 'className'> {
|
|
470
|
+
className?: string;
|
|
471
|
+
children: ReactNode;
|
|
472
|
+
}
|
|
473
|
+
declare function TabsList({ className, children, ...props }: TabsListProps): react.JSX.Element;
|
|
474
|
+
interface TabsTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.Trigger>, 'className'> {
|
|
475
|
+
className?: string;
|
|
476
|
+
children: ReactNode;
|
|
477
|
+
}
|
|
478
|
+
declare function TabsTrigger({ className, children, ...props }: TabsTriggerProps): react.JSX.Element;
|
|
479
|
+
interface TabsContentProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.Content>, 'className'> {
|
|
480
|
+
className?: string;
|
|
481
|
+
children: ReactNode;
|
|
482
|
+
}
|
|
483
|
+
declare function TabsContent({ className, children, ...props }: TabsContentProps): react.JSX.Element;
|
|
484
|
+
|
|
485
|
+
type ToastVariant = 'default' | 'success' | 'danger';
|
|
486
|
+
interface ToastOptions {
|
|
487
|
+
title: string;
|
|
488
|
+
description?: string;
|
|
489
|
+
variant?: ToastVariant;
|
|
490
|
+
}
|
|
491
|
+
interface ToastContextValue {
|
|
492
|
+
/** Dispara um aviso transitório; some sozinho depois de 5 segundos. */
|
|
493
|
+
toast: (options: ToastOptions) => void;
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Devolve `{ toast }` para qualquer tela disparar avisos. A API é imperativa
|
|
497
|
+
* de propósito: quem confirma um voto quer uma linha de código, não um estado
|
|
498
|
+
* local de "aviso aberto" em cada página.
|
|
499
|
+
*/
|
|
500
|
+
declare function useToast(): ToastContextValue;
|
|
501
|
+
interface ToastProviderProps {
|
|
502
|
+
children: ReactNode;
|
|
503
|
+
}
|
|
504
|
+
/**
|
|
505
|
+
* Envolve a app uma única vez e passa a ser o dono dos avisos: guarda a fila,
|
|
506
|
+
* expõe `toast()` via contexto e renderiza os cards sobre o conteúdo. No
|
|
507
|
+
* celular ocupa a largura toda rente ao polegar; no desktop recolhe para o
|
|
508
|
+
* canto inferior direito.
|
|
509
|
+
*/
|
|
510
|
+
declare function ToastProvider({ children }: ToastProviderProps): react.JSX.Element;
|
|
511
|
+
|
|
512
|
+
interface TooltipProps {
|
|
513
|
+
/** O que a dica mostra — texto curto na maioria dos casos. */
|
|
514
|
+
content: ReactNode;
|
|
515
|
+
/** De que lado do gatilho a dica aparece. */
|
|
516
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
517
|
+
className?: string;
|
|
518
|
+
/**
|
|
519
|
+
* O gatilho. Renderizado via `asChild`: o filho vira o próprio trigger e por
|
|
520
|
+
* isso precisa aceitar `ref` e repassar props — um elemento nativo ou um
|
|
521
|
+
* componente que espalhe as duas coisas (o Button do sistema serve).
|
|
522
|
+
*/
|
|
523
|
+
children: ReactNode;
|
|
524
|
+
}
|
|
525
|
+
/**
|
|
526
|
+
* Dica flutuante para rótulos que não cabem na tela — o nome de um ícone, o
|
|
527
|
+
* detalhe de um número. O Provider vive aqui dentro para o uso ser de uma
|
|
528
|
+
* linha; o preço (sem delay compartilhado entre tooltips vizinhos) é aceitável
|
|
529
|
+
* num produto onde tooltip é exceção, não tapete.
|
|
530
|
+
*
|
|
531
|
+
* Sem seta, de propósito: a proximidade e a sombra já dizem de onde a dica
|
|
532
|
+
* veio, e a forma limpa é mais fiel à linguagem do sistema.
|
|
533
|
+
*/
|
|
534
|
+
declare function Tooltip({ content, side, className, children }: TooltipProps): react.JSX.Element;
|
|
535
|
+
|
|
536
|
+
/**
|
|
537
|
+
* O crachá — como um associado aparece na listagem.
|
|
538
|
+
*
|
|
539
|
+
* A metáfora é a do crachá de evento pendurado no cordão: furo no topo, faixa
|
|
540
|
+
* de cor, foto grande e o nome em destaque. A listagem de associados vira um
|
|
541
|
+
* quadro de gente, não uma tabela de cadastros.
|
|
542
|
+
*/
|
|
543
|
+
declare const TONES$2: readonly ["terracota", "jardim", "ambar", "lavanda", "ceu"];
|
|
544
|
+
type Tone$2 = (typeof TONES$2)[number];
|
|
545
|
+
declare const cracha: (props?: ({
|
|
546
|
+
size?: "md" | "lg" | null | undefined;
|
|
547
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
548
|
+
type CrachaVariants = VariantProps<typeof cracha>;
|
|
549
|
+
interface CrachaProps {
|
|
550
|
+
name: string;
|
|
551
|
+
/** "Apto 42 · Bloco B" — a unidade é o sobrenome de quem mora em condomínio. */
|
|
552
|
+
unit?: string;
|
|
553
|
+
src?: string;
|
|
554
|
+
/** Papel na comunidade: "Síndica", "Conselho"… vira a etiqueta do crachá. */
|
|
555
|
+
memberRole?: string;
|
|
556
|
+
tone?: Tone$2;
|
|
557
|
+
size?: CrachaVariants['size'];
|
|
558
|
+
className?: string;
|
|
559
|
+
}
|
|
560
|
+
declare function Cracha({ name, unit, src, memberRole, tone, size, className, }: CrachaProps): react.JSX.Element;
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* O livreto — a capa de uma pauta.
|
|
564
|
+
*
|
|
565
|
+
* Pauta de assembleia é documento que se folheia, discute e arquiva; a estante
|
|
566
|
+
* de livretos conta isso de longe. A lombada colorida à esquerda e o bloco de
|
|
567
|
+
* páginas à direita fazem o objeto; o resto é tipografia.
|
|
568
|
+
*/
|
|
569
|
+
declare const TONES$1: readonly ["terracota", "jardim", "ambar", "lavanda", "ceu"];
|
|
570
|
+
type Tone$1 = (typeof TONES$1)[number];
|
|
571
|
+
declare const livreto: (props?: ({
|
|
572
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
573
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
574
|
+
type LivretoVariants = VariantProps<typeof livreto>;
|
|
575
|
+
interface LivretoProps {
|
|
576
|
+
title: string;
|
|
577
|
+
/** A sobrelinha da capa: "Pauta", "Ata", "Edital"… */
|
|
578
|
+
kind?: string;
|
|
579
|
+
tone?: Tone$1;
|
|
580
|
+
size?: LivretoVariants['size'];
|
|
581
|
+
/** Rodapé da capa — o lugar do Badge de status. */
|
|
582
|
+
footer?: ReactNode;
|
|
583
|
+
className?: string;
|
|
584
|
+
}
|
|
585
|
+
declare function Livreto({ title, kind, tone, size, footer, className, }: LivretoProps): react.JSX.Element;
|
|
586
|
+
|
|
587
|
+
/**
|
|
588
|
+
* O prediozinho do Assembleo — a cara de um condomínio na tela de seleção, no
|
|
589
|
+
* mapinha, no cabeçalho.
|
|
590
|
+
*
|
|
591
|
+
* Ele é determinístico: o mesmo nome desenha sempre o mesmo prédio (andares,
|
|
592
|
+
* cor do telhado, quais janelas estão acesas). O condomínio da pessoa vira um
|
|
593
|
+
* lugar reconhecível, não um ícone genérico — e sem guardar estado nenhum.
|
|
594
|
+
*/
|
|
595
|
+
declare const TONES: readonly ["terracota", "jardim", "ambar", "lavanda", "ceu"];
|
|
596
|
+
type Tone = (typeof TONES)[number];
|
|
597
|
+
declare const predio: (props?: ({
|
|
598
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
599
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
600
|
+
type PredioVariants = VariantProps<typeof predio>;
|
|
601
|
+
interface PredioProps {
|
|
602
|
+
/** Semente do desenho e nome anunciado ao leitor de tela. */
|
|
603
|
+
name: string;
|
|
604
|
+
/** Sobrescreve o sorteio quando o produto quiser fixar a cor. */
|
|
605
|
+
tone?: Tone;
|
|
606
|
+
/** Sobrescreve o sorteio de andares (3 a 6). */
|
|
607
|
+
floors?: number;
|
|
608
|
+
size?: PredioVariants['size'];
|
|
609
|
+
/**
|
|
610
|
+
* Decorativo quando o nome já está escrito ao lado — o leitor de tela não
|
|
611
|
+
* precisa ouvir "prédio de X" duas vezes.
|
|
612
|
+
*/
|
|
613
|
+
decorative?: boolean;
|
|
614
|
+
className?: string;
|
|
615
|
+
}
|
|
616
|
+
declare function Predio({ name, tone, floors, size, decorative, className }: PredioProps): react.JSX.Element;
|
|
617
|
+
|
|
618
|
+
/**
|
|
619
|
+
* Junta classes resolvendo conflito pelo que vem por último.
|
|
620
|
+
*
|
|
621
|
+
* Sem o merge, `cn('p-2', 'p-4')` emitiria as duas e o vencedor sairia da
|
|
622
|
+
* ordem no CSS gerado, não da ordem da chamada — o que torna sobrescrever o
|
|
623
|
+
* estilo de um componente base uma questão de sorte.
|
|
624
|
+
*/
|
|
625
|
+
declare function cn(...classes: Parameters<typeof cx>): string;
|
|
626
|
+
|
|
627
|
+
interface VisuallyHiddenProps {
|
|
628
|
+
children: ReactNode;
|
|
629
|
+
}
|
|
630
|
+
/**
|
|
631
|
+
* Presente para o leitor de tela, invisível para todo o resto.
|
|
632
|
+
*
|
|
633
|
+
* É a técnica clássica de clip — `display: none` e `aria-hidden` removeriam o
|
|
634
|
+
* conteúdo da árvore de acessibilidade, que é exatamente o que não se quer.
|
|
635
|
+
*/
|
|
636
|
+
declare function VisuallyHidden({ children }: VisuallyHiddenProps): react.JSX.Element;
|
|
637
|
+
|
|
638
|
+
/**
|
|
639
|
+
* O gerenciador de tema do Assembleo.
|
|
640
|
+
*
|
|
641
|
+
* Os tokens já seguem o aparelho sozinhos (`prefers-color-scheme`); este módulo
|
|
642
|
+
* existe para a escolha explícita do usuário: claro, escuro ou "sistema". A
|
|
643
|
+
* escolha vira `data-theme` no <html> — o mesmo mecanismo que o theme.css
|
|
644
|
+
* escuta — e persiste em localStorage para sobreviver ao próximo acesso.
|
|
645
|
+
*/
|
|
646
|
+
type Theme = 'light' | 'dark' | 'system';
|
|
647
|
+
/**
|
|
648
|
+
* Aplica o tema guardado antes do React montar — chame no topo do main.tsx.
|
|
649
|
+
* Em SPA isso elimina qualquer flash: quando o app pinta, o tema já é o certo.
|
|
650
|
+
*/
|
|
651
|
+
declare function initTheme(): void;
|
|
652
|
+
interface ThemeContextValue {
|
|
653
|
+
/** A escolha do usuário — 'system' significa "sigo o aparelho". */
|
|
654
|
+
theme: Theme;
|
|
655
|
+
/** O que está de fato na tela agora: 'light' ou 'dark'. */
|
|
656
|
+
resolvedTheme: 'light' | 'dark';
|
|
657
|
+
setTheme: (theme: Theme) => void;
|
|
658
|
+
}
|
|
659
|
+
interface ThemeProviderProps {
|
|
660
|
+
children: ReactNode;
|
|
661
|
+
}
|
|
662
|
+
declare function ThemeProvider({ children }: ThemeProviderProps): react.JSX.Element;
|
|
663
|
+
declare function useTheme(): ThemeContextValue;
|
|
664
|
+
|
|
665
|
+
interface ThemeToggleProps {
|
|
666
|
+
width?: 'full' | 'auto';
|
|
667
|
+
className?: string;
|
|
668
|
+
}
|
|
669
|
+
/**
|
|
670
|
+
* O seletor de tema pronto para a tela de ajustes: o controle segmentado da
|
|
671
|
+
* casa, já ligado ao useTheme. "Sistema" fica por último porque é o padrão de
|
|
672
|
+
* quem nunca mexeu — as escolhas ativas vêm primeiro.
|
|
673
|
+
*/
|
|
674
|
+
declare function ThemeToggle({ width, className }: ThemeToggleProps): react.JSX.Element;
|
|
675
|
+
|
|
676
|
+
export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, type SegmentedControlOption, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, ThemeProvider, ThemeToggle, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, VisuallyHidden, cn, initTheme, useFieldContext, useTheme, useToast };
|