@brgs/vue

Componentes Vue 3 para o design system Unisty. Tailwind CSS v4 first.

npm install @brgs/vue @brgs/tokens tailwindcss@^4

Setup

/* app.css */
@import "tailwindcss";
@import "@brgs/tokens/theme.css";
@import "@brgs/tokens/base.css";

Componentes

Todos os componentes aceitam class e expõem atributos data-slot, data-variant e data-size.

Button

<script setup lang="ts">
import { Button } from '@brgs/vue'
</script>

<template>
  <Button variant="destructive" size="sm">Deletar</Button>
  <Button variant="outline">Cancelar</Button>
  <Button variant="ghost" size="icon">
    <SettingsIcon />
  </Button>
  <Button as="a" href="/login">Link como Botão</Button>
</template>

| Prop | Valores | |------|---------| | variant | default, destructive, outline, secondary, ghost, link | | size | xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg | | as | Tag ou componente para polimorfismo |

Card

<script setup lang="ts">
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@brgs/vue'
</script>

<template>
  <Card size="sm">
    <CardHeader>
      <CardTitle>Título</CardTitle>
      <CardDescription>Descrição</CardDescription>
      <CardAction><Button size="sm">Ação</Button></CardAction>
    </CardHeader>
    <CardContent>Conteúdo</CardContent>
    <CardFooter><Button>Salvar</Button></CardFooter>
  </Card>
</template>

Dialog

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogTrigger, DialogPortal, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@brgs/vue'
const open = ref(false)
</script>

<template>
  <Dialog v-model:open="open">
    <DialogTrigger>Abrir</DialogTrigger>
    <DialogPortal>
      <DialogContent show-close-button>
        <DialogHeader>
          <DialogTitle>Confirmação</DialogTitle>
          <DialogDescription>Tem certeza?</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" @click="open = false">Cancelar</Button>
          <Button @click="confirmar">Confirmar</Button>
        </DialogFooter>
      </DialogContent>
    </DialogPortal>
  </Dialog>
</template>

Tabs

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@brgs/vue'
</script>

<template>
  <Tabs default-value="aba1" variant="line" orientation="vertical">
    <TabsList>
      <TabsTrigger value="aba1">Aba 1</TabsTrigger>
    </TabsList>
    <TabsContent value="aba1">Conteúdo</TabsContent>
  </Tabs>
</template>

Accordion

<script setup lang="ts">
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@brgs/vue'
</script>

<template>
  <Accordion type="single" collapsible>
    <AccordionItem>
      <AccordionTrigger value="item-1">Seção 1</AccordionTrigger>
      <AccordionContent value="item-1">Conteúdo</AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

Badge

<script setup lang="ts">
import { Badge } from '@brgs/vue'
</script>

<template>
  <Badge variant="destructive">Erro</Badge>
  <Badge variant="outline">Rascunho</Badge>
  <Badge is="a" href="/tags">Link</Badge>
</template>

Avatar

<script setup lang="ts">
import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from '@brgs/vue'
</script>

<template>
  <Avatar size="lg">
    <AvatarImage src="/photo.jpg" alt="Nome" />
    <AvatarFallback>FB</AvatarFallback>
    <AvatarBadge />
  </Avatar>
</template>

Checkbox

<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@brgs/vue'
const checked = ref(false)
</script>

<template>
  <Checkbox v-model:checked="checked" />
</template>

Outros componentes

Input, Label, Select, Separator, Switch, Textarea, Skeleton — todos com API nativa estendida e data-slot.

Utilitário

import { cn } from '@brgs/vue'
cn('base', condition && 'extra', className)

Licença

MIT