xertica-ui 2.1.2 → 2.1.3

package/components/ui/card/card.stories.tsx

@@ -1,245 +1,245 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardAction,
-} from './card';
-import { Button } from '../button';
-import { Input } from '../input';
-import { Label } from '../label';
-import { Badge } from '../badge';
-import { Avatar, AvatarFallback } from '../avatar';
-import { Separator } from '../separator';
-import {
-  Bell, DollarSign, Download, ExternalLink,
-  MoreHorizontal, Projector, Settings as SettingsIcon, Users,
-} from 'lucide-react';
-import React from 'react';
-
-const meta: Meta<typeof Card> = {
-  title: 'UI/Card',
-  component: Card,
-  render: (args) => <Card {...args} />,
-  decorators: [
-    (Story) => (
-      <div className="bg-muted rounded-xl p-8 w-full flex items-center justify-center">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-// ─── Estrutura básica ─────────────────────────────────────────────────────────
-
-export const Default: Story = {
-  render: (args) => (
-    <Card {...args} className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Detalhes do Projeto</CardTitle>
-        <CardDescription>Gerencie as configurações do seu workspace.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">
-          Este workspace contém todos os assets e documentações do projeto Xertica UI.
-        </p>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Descartar</Button>
-        <Button>Salvar</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-// ─── Com CardAction ───────────────────────────────────────────────────────────
-
-export const WithAction: Story = {
-  render: () => (
-    <Card className="w-[380px]">
-      <CardHeader>
-        <CardTitle>Notificações</CardTitle>
-        <CardDescription>Gerencie suas preferências de alerta.</CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon">
-            <MoreHorizontal className="size-4" />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        {[
-          { label: "Deploy concluído",  desc: "Produção atualizada",  badge: "Sucesso",  v: "success"     as const },
-          { label: "Revisão pendente",  desc: "PR #42 aguarda você",  badge: "Info",     v: "info"        as const },
-          { label: "Erro detectado",    desc: "Auth service — 503",   badge: "Erro",     v: "destructive" as const },
-        ].map((item) => (
-          <div key={item.label} className="flex items-center justify-between gap-2">
-            <div>
-              <p className="text-sm font-medium">{item.label}</p>
-              <p className="text-xs text-muted-foreground">{item.desc}</p>
-            </div>
-            <Badge variant={item.v}>{item.badge}</Badge>
-          </div>
-        ))}
-      </CardContent>
-      <CardFooter>
-        <Button variant="outline" size="sm" className="w-full">
-          <Bell className="size-4" /> Ver todas
-        </Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-// ─── Stats ────────────────────────────────────────────────────────────────────
-
-export const Stats: Story = {
-  render: () => (
-    <div className="grid gap-4 md:grid-cols-3 w-full max-w-3xl">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm font-medium">Receita Total</CardTitle>
-          <CardAction><DollarSign className="size-4 text-muted-foreground" /></CardAction>
-        </CardHeader>
-        <CardContent>
-          <p className="text-2xl font-bold">R$ 45.231</p>
-          <p className="text-xs text-muted-foreground">+20.1% vs mês anterior</p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm font-medium">Assinantes</CardTitle>
-          <CardAction><Users className="size-4 text-muted-foreground" /></CardAction>
-        </CardHeader>
-        <CardContent>
-          <p className="text-2xl font-bold">+2.350</p>
-          <p className="text-xs text-muted-foreground">+180.1% vs mês anterior</p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm font-medium">Projetos Ativos</CardTitle>
-          <CardAction><Projector className="size-4 text-muted-foreground" /></CardAction>
-        </CardHeader>
-        <CardContent>
-          <p className="text-2xl font-bold">12.234</p>
-          <p className="text-xs text-muted-foreground">+19% vs mês anterior</p>
-        </CardContent>
-      </Card>
-    </div>
-  ),
-};
-
-// ─── Formulário ───────────────────────────────────────────────────────────────
-
-export const Form: Story = {
-  render: () => (
-    <Card className="w-[400px]">
-      <CardHeader>
-        <CardTitle>Acesso à Conta</CardTitle>
-        <CardDescription>Insira suas credenciais para acessar a plataforma.</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" placeholder="nome@empresa.com" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password">Senha</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Button className="w-full">Entrar</Button>
-        <Button variant="ghost" size="sm" className="w-full text-muted-foreground">
-          Esqueci minha senha
-        </Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-// ─── Perfil / Team Member ─────────────────────────────────────────────────────
-
-export const TeamMember: Story = {
-  render: () => (
-    <div className="flex gap-4 flex-wrap justify-center">
-      {[
-        { name: "Ana Souza",    role: "Frontend Engineer", initials: "AS", projects: 12, status: "Online"   as const, sv: "success"   as const },
-        { name: "Bruno Lima",   role: "Design System",      initials: "BL", projects: 8,  status: "Ausente"  as const, sv: "warning"   as const },
-        { name: "Carla Rocha",  role: "Product Designer",   initials: "CR", projects: 15, status: "Ocupada"  as const, sv: "destructive" as const },
-      ].map((member) => (
-        <Card key={member.name} className="w-52">
-          <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
-            <Avatar className="size-14">
-              <AvatarFallback className="text-base font-semibold">{member.initials}</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="font-semibold text-sm">{member.name}</p>
-              <p className="text-xs text-muted-foreground">{member.role}</p>
-            </div>
-            <Badge variant={member.sv}>{member.status}</Badge>
-            <Separator />
-            <p className="text-xs text-muted-foreground">{member.projects} projetos</p>
-            <div className="flex gap-2 w-full">
-              <Button variant="outline" size="sm" className="flex-1 text-xs">Perfil</Button>
-              <Button size="sm" className="flex-1 text-xs">Contato</Button>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  ),
-};
-
-// ─── Configurações ────────────────────────────────────────────────────────────
-
-export const SettingsCard: Story = {
-  render: () => (
-    <Card className="w-[480px]">
-      <CardHeader>
-        <CardTitle>Preferências da Conta</CardTitle>
-        <CardDescription>Ajuste as configurações do seu perfil e segurança.</CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon">
-            <SettingsIcon className="size-4" />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="space-y-0 p-0">
-        {[
-          { label: "Notificações por email", desc: "Receba alertas de deploy e reviews", active: true },
-          { label: "Autenticação 2FA",       desc: "Camada extra de segurança",          active: true },
-          { label: "Modo escuro automático", desc: "Segue o sistema operacional",        active: false },
-          { label: "API pública",            desc: "Permite acesso externo via token",   active: false },
-        ].map((item, i, arr) => (
-          <div key={item.label}>
-            <div className="flex items-center justify-between px-6 py-4">
-              <div>
-                <p className="text-sm font-medium">{item.label}</p>
-                <p className="text-xs text-muted-foreground">{item.desc}</p>
-              </div>
-              <Badge variant={item.active ? "success" : "secondary"}>
-                {item.active ? "Ativo" : "Inativo"}
-              </Badge>
-            </div>
-            {i < arr.length - 1 && <Separator />}
-          </div>
-        ))}
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="ghost" size="sm" className="gap-1.5">
-          <ExternalLink className="size-3.5" /> Documentação
-        </Button>
-        <Button size="sm" className="gap-1.5">
-          <Download className="size-3.5" /> Exportar config
-        </Button>
-      </CardFooter>
-    </Card>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardAction,
+} from './card';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Badge } from '../badge';
+import { Avatar, AvatarFallback } from '../avatar';
+import { Separator } from '../separator';
+import {
+  Bell, DollarSign, Download, ExternalLink,
+  MoreHorizontal, Projector, Settings as SettingsIcon, Users,
+} from 'lucide-react';
+import React from 'react';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Card',
+  component: Card,
+  render: (args) => <Card {...args} />,
+  decorators: [
+    (Story) => (
+      <div className="bg-muted rounded-xl p-8 w-full flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+// ─── Estrutura básica ─────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args} className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Detalhes do Projeto</CardTitle>
+        <CardDescription>Gerencie as configurações do seu workspace.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          Este workspace contém todos os assets e documentações do projeto Xertica UI.
+        </p>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Descartar</Button>
+        <Button>Salvar</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// ─── Com CardAction ───────────────────────────────────────────────────────────
+
+export const WithAction: Story = {
+  render: () => (
+    <Card className="w-[380px]">
+      <CardHeader>
+        <CardTitle>Notificações</CardTitle>
+        <CardDescription>Gerencie suas preferências de alerta.</CardDescription>
+        <CardAction>
+          <Button variant="ghost" size="icon">
+            <MoreHorizontal className="size-4" />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {[
+          { label: "Deploy concluído",  desc: "Produção atualizada",  badge: "Sucesso",  v: "success"     as const },
+          { label: "Revisão pendente",  desc: "PR #42 aguarda você",  badge: "Info",     v: "info"        as const },
+          { label: "Erro detectado",    desc: "Auth service — 503",   badge: "Erro",     v: "destructive" as const },
+        ].map((item) => (
+          <div key={item.label} className="flex items-center justify-between gap-2">
+            <div>
+              <p className="text-sm font-medium">{item.label}</p>
+              <p className="text-xs text-muted-foreground">{item.desc}</p>
+            </div>
+            <Badge variant={item.v}>{item.badge}</Badge>
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm" className="w-full">
+          <Bell className="size-4" /> Ver todas
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// ─── Stats ────────────────────────────────────────────────────────────────────
+
+export const Stats: Story = {
+  render: () => (
+    <div className="grid gap-4 md:grid-cols-3 w-full max-w-3xl">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-medium">Receita Total</CardTitle>
+          <CardAction><DollarSign className="size-4 text-muted-foreground" /></CardAction>
+        </CardHeader>
+        <CardContent>
+          <p className="text-2xl font-bold">R$ 45.231</p>
+          <p className="text-xs text-muted-foreground">+20.1% vs mês anterior</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-medium">Assinantes</CardTitle>
+          <CardAction><Users className="size-4 text-muted-foreground" /></CardAction>
+        </CardHeader>
+        <CardContent>
+          <p className="text-2xl font-bold">+2.350</p>
+          <p className="text-xs text-muted-foreground">+180.1% vs mês anterior</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-medium">Projetos Ativos</CardTitle>
+          <CardAction><Projector className="size-4 text-muted-foreground" /></CardAction>
+        </CardHeader>
+        <CardContent>
+          <p className="text-2xl font-bold">12.234</p>
+          <p className="text-xs text-muted-foreground">+19% vs mês anterior</p>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+};
+
+// ─── Formulário ───────────────────────────────────────────────────────────────
+
+export const Form: Story = {
+  render: () => (
+    <Card className="w-[400px]">
+      <CardHeader>
+        <CardTitle>Acesso à Conta</CardTitle>
+        <CardDescription>Insira suas credenciais para acessar a plataforma.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" placeholder="nome@empresa.com" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Senha</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button className="w-full">Entrar</Button>
+        <Button variant="ghost" size="sm" className="w-full text-muted-foreground">
+          Esqueci minha senha
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// ─── Perfil / Team Member ─────────────────────────────────────────────────────
+
+export const TeamMember: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap justify-center">
+      {[
+        { name: "Ana Souza",    role: "Frontend Engineer", initials: "AS", projects: 12, status: "Online"   as const, sv: "success"   as const },
+        { name: "Bruno Lima",   role: "Design System",      initials: "BL", projects: 8,  status: "Ausente"  as const, sv: "warning"   as const },
+        { name: "Carla Rocha",  role: "Product Designer",   initials: "CR", projects: 15, status: "Ocupada"  as const, sv: "destructive" as const },
+      ].map((member) => (
+        <Card key={member.name} className="w-52">
+          <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
+            <Avatar className="size-14">
+              <AvatarFallback className="text-base font-semibold">{member.initials}</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="font-semibold text-sm">{member.name}</p>
+              <p className="text-xs text-muted-foreground">{member.role}</p>
+            </div>
+            <Badge variant={member.sv}>{member.status}</Badge>
+            <Separator />
+            <p className="text-xs text-muted-foreground">{member.projects} projetos</p>
+            <div className="flex gap-2 w-full">
+              <Button variant="outline" size="sm" className="flex-1 text-xs">Perfil</Button>
+              <Button size="sm" className="flex-1 text-xs">Contato</Button>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+// ─── Configurações ────────────────────────────────────────────────────────────
+
+export const SettingsCard: Story = {
+  render: () => (
+    <Card className="w-[480px]">
+      <CardHeader>
+        <CardTitle>Preferências da Conta</CardTitle>
+        <CardDescription>Ajuste as configurações do seu perfil e segurança.</CardDescription>
+        <CardAction>
+          <Button variant="ghost" size="icon">
+            <SettingsIcon className="size-4" />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="space-y-0 p-0">
+        {[
+          { label: "Notificações por email", desc: "Receba alertas de deploy e reviews", active: true },
+          { label: "Autenticação 2FA",       desc: "Camada extra de segurança",          active: true },
+          { label: "Modo escuro automático", desc: "Segue o sistema operacional",        active: false },
+          { label: "API pública",            desc: "Permite acesso externo via token",   active: false },
+        ].map((item, i, arr) => (
+          <div key={item.label}>
+            <div className="flex items-center justify-between px-6 py-4">
+              <div>
+                <p className="text-sm font-medium">{item.label}</p>
+                <p className="text-xs text-muted-foreground">{item.desc}</p>
+              </div>
+              <Badge variant={item.active ? "success" : "secondary"}>
+                {item.active ? "Ativo" : "Inativo"}
+              </Badge>
+            </div>
+            {i < arr.length - 1 && <Separator />}
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="ghost" size="sm" className="gap-1.5">
+          <ExternalLink className="size-3.5" /> Documentação
+        </Button>
+        <Button size="sm" className="gap-1.5">
+          <Download className="size-3.5" /> Exportar config
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};

package/components/ui/carousel/carousel.mdx

@@ -10,14 +10,14 @@ import * as CarouselStories from './carousel.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/chart/chart.mdx

@@ -10,14 +10,14 @@ import * as ChartStories from './chart.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]