@inspirare/design-system 0.0.8 → 0.0.10

package/src/demo/FeedbackDemo.tsx

@@ -0,0 +1,113 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Progress } from "../components/ui/progress";
+import { Skeleton } from "../components/ui/skeleton";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+import { Button } from "../components/ui/button";
+import { useState, useEffect } from "react";
+
+const invoices = [
+  { invoice: "INV001", paymentStatus: "Pago", totalAmount: "R$ 250,00", paymentMethod: "Cartão de Crédito" },
+  { invoice: "INV002", paymentStatus: "Pendente", totalAmount: "R$ 150,00", paymentMethod: "Boleto" },
+  { invoice: "INV003", paymentStatus: "Não Pago", totalAmount: "R$ 350,00", paymentMethod: "Pix" },
+];
+
+export function FeedbackDemo() {
+  const [progress, setProgress] = useState(13);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Progresso (Progress)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Progress value={progress} className="w-[60%]" />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Esqueleto (Skeleton)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center space-x-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[250px]" />
+              <Skeleton className="h-4 w-[200px]" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Avatar</CardTitle>
+        </CardHeader>
+        <CardContent className="flex gap-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>IN</AvatarFallback>
+          </Avatar>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tooltip</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline">Passe o mouse</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Adicione à biblioteca</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tabela (Table)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableCaption>Uma lista de faturas recentes.</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">Fatura</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Método</TableHead>
+                <TableHead className="text-right">Valor</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invoices.map((invoice) => (
+                <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                  <TableCell>{invoice.paymentStatus}</TableCell>
+                  <TableCell>{invoice.paymentMethod}</TableCell>
+                  <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/demo/FormsDemo.tsx

@@ -0,0 +1,100 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Textarea } from "../components/ui/textarea";
+import { Checkbox } from "../components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "../components/ui/radio-group";
+import { Switch } from "../components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { Slider } from "../components/ui/slider";
+import { ColorPicker } from "../components/ui/color-picker";
+
+export function FormsDemo() {
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Campos de Texto e Selects</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="email">E-mail</Label>
+            <Input type="email" id="email" placeholder="nome@exemplo.com" />
+            <p className="text-sm text-muted-foreground">Insira seu e-mail.</p>
+          </div>
+
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="message">Mensagem</Label>
+            <Textarea id="message" placeholder="Escreva sua mensagem aqui." />
+          </div>
+
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="framework">Framework favorito</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Selecione um framework" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="react">React</SelectItem>
+                <SelectItem value="vue">Vue</SelectItem>
+                <SelectItem value="svelte">Svelte</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Checkboxes, Radios e Switches</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-8">
+          <div className="flex items-center space-x-2">
+            <Checkbox id="terms" />
+            <Label htmlFor="terms">Aceitar termos e condições</Label>
+          </div>
+
+          <div className="space-y-3">
+            <Label>Notificações</Label>
+            <RadioGroup defaultValue="all">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="all" id="r1" />
+                <Label htmlFor="r1">Todas as notificações</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="mentions" id="r2" />
+                <Label htmlFor="r2">Apenas menções</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="none" id="r3" />
+                <Label htmlFor="r3">Nenhuma</Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Switch id="airplane-mode" />
+            <Label htmlFor="airplane-mode">Modo Avião</Label>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Seletores Especiais</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-8">
+          <div className="grid w-full max-w-sm items-center gap-3">
+            <Label>Slider (Deslizante)</Label>
+            <Slider defaultValue={[50]} max={100} step={1} />
+          </div>
+
+          <div className="grid w-full max-w-sm items-center gap-3">
+            <Label>Color Picker (Seletor de Cor)</Label>
+            <ColorPicker value="#dc663e" onChange={() => {}} />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/demo/NavigationDemo.tsx

@@ -0,0 +1,141 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "../components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible";
+import { ScrollArea } from "../components/ui/scroll-area";
+import { Separator } from "../components/ui/separator";
+import { Button } from "../components/ui/button";
+import { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+
+export function NavigationDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Abas (Tabs)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="account" className="w-[400px]">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="account">Conta</TabsTrigger>
+              <TabsTrigger value="password">Senha</TabsTrigger>
+            </TabsList>
+            <TabsContent value="account" className="p-4 bg-muted/50 rounded-lg mt-2">
+              Faça alterações na sua conta aqui.
+            </TabsContent>
+            <TabsContent value="password" className="p-4 bg-muted/50 rounded-lg mt-2">
+              Mude sua senha aqui.
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Acordeão (Accordion)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>É acessível?</AccordionTrigger>
+              <AccordionContent>
+                Sim. Ele adere ao padrão de design WAI-ARIA.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>É estilizado?</AccordionTrigger>
+              <AccordionContent>
+                Sim. Vem com estilos padrão que combinam com as cores do Inspirare.
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Retrátil (Collapsible)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Collapsible
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            className="w-[350px] space-y-2"
+          >
+            <div className="flex items-center justify-between space-x-4 px-4">
+              <h4 className="text-sm font-semibold">
+                @peduarte favoritou 3 repositórios
+              </h4>
+              <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-9 p-0">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Alternar</span>
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+            <div className="rounded-md border px-4 py-3 font-mono text-sm">
+              @radix-ui/primitives
+            </div>
+            <CollapsibleContent className="space-y-2">
+              <div className="rounded-md border px-4 py-3 font-mono text-sm">
+                @radix-ui/colors
+              </div>
+              <div className="rounded-md border px-4 py-3 font-mono text-sm">
+                @stitches/react
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Área de Rolagem & Separador</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScrollArea className="h-48 w-full md:w-[400px] rounded-md border">
+            <div className="p-4">
+              <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+              {Array.from({ length: 20 }).map((_, i, a) => (
+                <div key={i}>
+                  <div className="text-sm">
+                    Inspirare v1.{i}.0
+                  </div>
+                  {i !== a.length - 1 && <Separator className="my-2" />}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Card Padrão</CardTitle>
+            <CardDescription>Um layout de card simples.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Este é o conteúdo dentro do card.</p>
+          </CardContent>
+          <CardFooter>
+            <Button className="w-full">Ação</Button>
+          </CardFooter>
+        </Card>
+        
+        <Card className="border-primary/50 bg-primary/5">
+          <CardHeader>
+            <CardTitle className="text-primary">Card Destacado</CardTitle>
+            <CardDescription>Um card com ênfase primária.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">Útil para informações importantes ou recursos premium.</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/demo/OverlaysDemo.tsx

@@ -0,0 +1,187 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "../components/ui/dialog";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "../components/ui/drawer";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "../components/ui/sheet";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../components/ui/hover-card";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../components/ui/alert-dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../components/ui/command";
+import { Button } from "../components/ui/button";
+
+export function OverlaysDemo() {
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Modais (Dialog, Alert Dialog, Sheet, Drawer)</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-4">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">Abrir Dialog</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Editar perfil</DialogTitle>
+                <DialogDescription>
+                  Faça alterações no seu perfil aqui. Clique em salvar quando terminar.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <p className="text-sm">Conteúdo do modal vai aqui...</p>
+              </div>
+              <DialogFooter>
+                <Button type="submit">Salvar mudanças</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive">Abrir Alert Dialog</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Você tem certeza absoluta?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta e removerá seus dados de nossos servidores.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                <AlertDialogAction>Continuar</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline">Abrir Sheet (Painel)</Button>
+            </SheetTrigger>
+            <SheetContent>
+              <SheetHeader>
+                <SheetTitle>Tem certeza que deseja continuar?</SheetTitle>
+                <SheetDescription>
+                  Esta ação abrirá um painel lateral na tela. Útil para menus e configurações em dispositivos móveis.
+                </SheetDescription>
+              </SheetHeader>
+            </SheetContent>
+          </Sheet>
+
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button variant="outline">Abrir Drawer (Gaveta)</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <div className="mx-auto w-full max-w-sm">
+                <DrawerHeader>
+                  <DrawerTitle>Definir meta</DrawerTitle>
+                  <DrawerDescription>Defina sua meta de atividade diária.</DrawerDescription>
+                </DrawerHeader>
+                <div className="p-4 pb-0">
+                  <div className="flex items-center justify-center space-x-2">
+                    <p>Conteúdo da gaveta</p>
+                  </div>
+                </div>
+                <DrawerFooter>
+                  <Button>Salvar</Button>
+                  <DrawerClose asChild>
+                    <Button variant="outline">Cancelar</Button>
+                  </DrawerClose>
+                </DrawerFooter>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Menús Flutuantes (Dropdown, Popover, HoverCard)</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-4">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Menu (Dropdown)</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Perfil</DropdownMenuItem>
+              <DropdownMenuItem>Faturamento</DropdownMenuItem>
+              <DropdownMenuItem>Equipe</DropdownMenuItem>
+              <DropdownMenuItem>Assinatura</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline">Abrir Popover</Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+              <div className="grid gap-4">
+                <div className="space-y-2">
+                  <h4 className="font-medium leading-none">Dimensões</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Defina as dimensões para a camada.
+                  </p>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Button variant="link">@nextjs</Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-80">
+              <div className="flex justify-between space-x-4">
+                <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">@nextjs</h4>
+                  <p className="text-sm">
+                    The React Framework – created and maintained by @vercel.
+                  </p>
+                  <div className="flex items-center pt-2">
+                    <span className="text-xs text-muted-foreground">
+                      Entrou em Dezembro de 2021
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Comandos (Command Palette)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Command className="rounded-lg border shadow-md md:min-w-[450px] max-w-md">
+            <CommandInput placeholder="Digite um comando ou busque..." />
+            <CommandList>
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              <CommandGroup heading="Sugestões">
+                <CommandItem>Calendário</CommandItem>
+                <CommandItem>Procurar Emojis</CommandItem>
+                <CommandItem>Calculadora</CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Configurações">
+                <CommandItem>Perfil</CommandItem>
+                <CommandItem>Faturamento</CommandItem>
+                <CommandItem>Ajustes</CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function CommandSeparator() {
+  return <div className="-mx-1 h-px bg-border" />;
+}