xertica-ui 1.4.2 → 1.4.3

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.
Files changed (6) hide show
  1. package/components/TemplateContent.tsx +99 -0
  2. package/components/ui/dialog.tsx +3 -3
  3. package/dist/index.es.js +13574 -96817
  4. package/dist/index.umd.js +13558 -96819
  5. package/package.json +1 -1
  6. package/vite.config.ts +15 -1
package/components/TemplateContent.tsx CHANGED
@@ -21,6 +21,26 @@ import { ScrollArea } from './ui/scroll-area';
21
21
  import { ThemeToggle } from './ThemeToggle';
22
22
  import { LanguageSelector } from './LanguageSelector';
23
23
  import { MapShowcase } from './examples/MapShowcase';
24
+ import {
25
+ Dialog,
26
+ DialogTrigger,
27
+ DialogContent,
28
+ DialogHeader,
29
+ DialogTitle,
30
+ DialogDescription,
31
+ DialogFooter,
32
+ } from './ui/dialog';
33
+ import {
34
+ AlertDialog,
35
+ AlertDialogTrigger,
36
+ AlertDialogContent,
37
+ AlertDialogHeader,
38
+ AlertDialogTitle,
39
+ AlertDialogDescription,
40
+ AlertDialogFooter,
41
+ AlertDialogAction,
42
+ AlertDialogCancel,
43
+ } from './ui/alert-dialog';
24
44
 
25
45
  import { useLayout } from '../contexts/LayoutContext';
26
46
 
@@ -598,6 +618,85 @@ export function TemplateContent({ }: TemplateContentProps) {
598
618
  </CardContent>
599
619
  </Card>
600
620
  </section>
621
+
622
+ <Separator className="my-8" />
623
+
624
+ {/* Dialogs */}
625
+ <section>
626
+ <h3 className="mb-4">Dialogs</h3>
627
+ <div className="grid gap-4 md:grid-cols-2">
628
+ <Card>
629
+ <CardHeader>
630
+ <CardTitle>Dialog</CardTitle>
631
+ <CardDescription>Um modal básico interativo</CardDescription>
632
+ </CardHeader>
633
+ <CardContent className="flex justify-center py-6">
634
+ <Dialog>
635
+ <DialogTrigger asChild>
636
+ <Button variant="outline">Editar Perfil</Button>
637
+ </DialogTrigger>
638
+ <DialogContent className="sm:max-w-[425px]">
639
+ <DialogHeader>
640
+ <DialogTitle>Editar Perfil</DialogTitle>
641
+ <DialogDescription>
642
+ Faça alterações no seu perfil aqui. Clique em salvar quando terminar.
643
+ </DialogDescription>
644
+ </DialogHeader>
645
+ <div className="grid gap-4 py-4">
646
+ <div className="grid grid-cols-4 items-center gap-4">
647
+ <Label htmlFor="name" className="text-right">
648
+ Nome
649
+ </Label>
650
+ <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
651
+ </div>
652
+ <div className="grid grid-cols-4 items-center gap-4">
653
+ <Label htmlFor="username" className="text-right">
654
+ Username
655
+ </Label>
656
+ <Input id="username" defaultValue="@pedroduarte" className="col-span-3" />
657
+ </div>
658
+ </div>
659
+ <DialogFooter>
660
+ <Button type="submit">Atualizar</Button>
661
+ </DialogFooter>
662
+ </DialogContent>
663
+ </Dialog>
664
+ </CardContent>
665
+ </Card>
666
+
667
+ <Card>
668
+ <CardHeader>
669
+ <CardTitle>Alert Dialog</CardTitle>
670
+ <CardDescription>Um alerta para decisões importantes</CardDescription>
671
+ </CardHeader>
672
+ <CardContent className="flex justify-center py-6">
673
+ <AlertDialog>
674
+ <AlertDialogTrigger asChild>
675
+ <Button variant="destructive">Excluir Conta</Button>
676
+ </AlertDialogTrigger>
677
+ <AlertDialogContent className="sm:max-w-[425px]">
678
+ <AlertDialogHeader>
679
+ <AlertDialogTitle>Você tem certeza absoluta?</AlertDialogTitle>
680
+ <AlertDialogDescription>
681
+ Esta ação não pode ser desfeita. Isso excluirá permanentemente sua
682
+ conta e removerá seus dados de nossos servidores.
683
+ </AlertDialogDescription>
684
+ </AlertDialogHeader>
685
+ <AlertDialogFooter>
686
+ <AlertDialogCancel>Cancelar</AlertDialogCancel>
687
+ <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
688
+ Continuar
689
+ </AlertDialogAction>
690
+ </AlertDialogFooter>
691
+ </AlertDialogContent>
692
+ </AlertDialog>
693
+ </CardContent>
694
+ </Card>
695
+ </div>
696
+ </section>
697
+
698
+ <Separator className="my-8" />
699
+
601
700
  {/* Maps */}
602
701
  <section>
603
702
  <MapShowcase />
package/components/ui/dialog.tsx CHANGED
@@ -58,7 +58,7 @@ function DialogContent({
58
58
  <DialogPrimitive.Content
59
59
  data-slot="dialog-content"
60
60
  className={cn(
61
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-auto translate-x-[-50%] translate-y-[-50%] gap-0 border shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
61
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
62
62
  className,
63
63
  )}
64
64
  {...props}
@@ -79,7 +79,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
79
79
  return (
80
80
  <div
81
81
  data-slot="dialog-header"
82
- className={cn("flex flex-col gap-2 p-6 pb-4 text-left", className)}
82
+ className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
83
83
  {...props}
84
84
  />
85
85
  );
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
90
90
  <div
91
91
  data-slot="dialog-footer"
92
92
  className={cn(
93
- "flex flex-col-reverse gap-3 p-6 pt-4 sm:flex-row sm:justify-end",
93
+ "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
94
94
  className,
95
95
  )}
96
96
  {...props}