tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import * as React from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { Slot } from 'radix-ui';
|
|
import { Loader2Icon } from 'lucide-react';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const buttonVariants = cva(
|
|
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
|
secondary:
|
|
'bg-secondary text-secondary-foreground border-border hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
|
|
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
|
ghost:
|
|
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
outline:
|
|
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
},
|
|
// `sm` fica abaixo de 44px de propósito: reservado para ações densas
|
|
// (ex: linha de tabela), nunca a única forma de disparar uma ação —
|
|
// ver Etapas/V2/20-controle-de-progresso-frontend.md, Etapa 12.
|
|
size: {
|
|
sm: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
md: 'h-11 min-w-11 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5',
|
|
lg: 'h-12 min-w-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',
|
|
icon: 'size-11',
|
|
'icon-sm': 'size-8',
|
|
'icon-lg': 'size-12',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'primary',
|
|
size: 'md',
|
|
},
|
|
},
|
|
);
|
|
|
|
type ButtonProps = React.ComponentProps<'button'> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
asChild?: boolean;
|
|
loading?: boolean;
|
|
};
|
|
|
|
function Button({
|
|
className,
|
|
variant,
|
|
size,
|
|
asChild = false,
|
|
loading = false,
|
|
disabled,
|
|
children,
|
|
...props
|
|
}: ButtonProps) {
|
|
// `Slot.Root` (Radix) exige exatamente um filho React — o wrapper de
|
|
// loading/span abaixo (usado no `<button>` nativo) sempre passaria 2
|
|
// filhos (o `{loading && ...}` condicional + o `<span>`), quebrando o
|
|
// `asChild`. Sem estado de loading fazer sentido quando quem renderiza de
|
|
// verdade é o filho (ex: um `Link`), `asChild` passa `children` direto.
|
|
if (asChild) {
|
|
return (
|
|
<Slot.Root
|
|
data-slot="button"
|
|
data-variant={variant}
|
|
data-size={size}
|
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Slot.Root>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
data-slot="button"
|
|
data-variant={variant}
|
|
data-size={size}
|
|
aria-busy={loading || undefined}
|
|
className={cn(buttonVariants({ variant, size, className }), loading && 'relative')}
|
|
disabled={disabled || loading}
|
|
{...props}
|
|
>
|
|
{loading && <Loader2Icon className="absolute size-4 animate-spin" aria-hidden />}
|
|
<span className={cn('inline-flex items-center gap-2', loading && 'invisible')}>
|
|
{children}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export { Button, buttonVariants };
|