lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/CustomBadge.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CustomBadge } from "../../../components/CustomBadge";
+declare const meta: Meta<typeof CustomBadge>;
+export default meta;
+type Story = StoryObj<typeof CustomBadge>;
+/** 🎯 Exemplo básico do CustomBadge */
+export declare const Default: Story;
+/** 🎨 Exemplo com cores do tema */
+export declare const ThemeColors: Story;
+/** 🎨 Exemplo com cores padrão do Chakra */
+export declare const ChakraColors: Story;
+/** 🎨 Exemplo com diferentes variantes */
+export declare const Variants: Story;
+/** 📏 Exemplo com diferentes tamanhos */
+export declare const Sizes: Story;
+/** 🎯 Exemplo com casos de uso práticos */
+export declare const UseCases: Story;
+/** 📏 Exemplo com diferentes paddings */
+export declare const PaddingExamples: Story;
+/** 🔧 Exemplo com todas as propriedades */
+export declare const AllProps: Story;

package/dist/stories/Londrisoft/Components/CustomBadge.stories.js

@@ -0,0 +1,546 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomBadge } from "../../../components/CustomBadge";
+const meta = {
+    title: "Londrisoft/Components/Badge",
+    component: CustomBadge,
+    tags: ["autodocs"],
+    args: {
+        children: "Badge",
+        variant: "solid",
+        colorScheme: "alert.success",
+        size: "sm",
+    },
+    argTypes: {
+        children: {
+            control: "text",
+            description: "Conteúdo do badge.",
+            table: { category: "Content" },
+        },
+        variant: {
+            control: { type: "select", options: ["solid", "subtle", "outline"] },
+            description: "Variante visual do badge.",
+            table: { category: "Appearance" },
+        },
+        colorScheme: {
+            control: "text",
+            description: "Esquema de cor do badge. Aceita cores do tema (ex: 'primary.300') ou cores padrão do Chakra.",
+            table: { category: "Appearance" },
+        },
+        size: {
+            control: { type: "select", options: ["sm", "md", "lg"] },
+            description: "Tamanho do badge.",
+            table: { category: "Appearance" },
+        },
+        px: {
+            control: "number",
+            description: "Padding horizontal interno do badge.",
+            table: { category: "Spacing" },
+        },
+        py: {
+            control: "number",
+            description: "Padding vertical interno do badge.",
+            table: { category: "Spacing" },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Badge customizado que estende o Badge do Chakra UI com suporte a cores do tema personalizado. Aceita cores do tema (ex: 'primary.300', 'alert.success') e cores padrão do Chakra.",
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "#root",
+        },
+    },
+};
+export default meta;
+/** 🎯 Exemplo básico do CustomBadge */
+export const Default = {
+    args: {
+        children: "Badge Padrão",
+        colorScheme: "alert.success",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { CustomBadge } from './CustomBadge';
+
+// Badge básico
+const BasicBadge = () => {
+  return (
+    <CustomBadge colorScheme="alert.success">
+      Badge Padrão
+    </CustomBadge>
+  );
+};
+
+// Badge com cores do tema
+const ThemeBadge = () => {
+  return (
+    <CustomBadge colorScheme="primary.300">
+      Cores do Tema
+    </CustomBadge>
+  );
+};
+
+// Badge com cores padrão do Chakra
+const ChakraBadge = () => {
+  return (
+    <CustomBadge colorScheme="green">
+      Cores do Chakra
+    </CustomBadge>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 Exemplo com cores do tema */
+export const ThemeColors = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83C\uDFA8 Cores do Tema" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o de badges usando as cores definidas no tema." })] }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                    gap: "16px",
+                }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Primary" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "primary.100", children: "Primary 100" }), _jsx(CustomBadge, { colorScheme: "primary.200", children: "Primary 200" }), _jsx(CustomBadge, { colorScheme: "primary.300", children: "Primary 300" }), _jsx(CustomBadge, { colorScheme: "primary.400", children: "Primary 400" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Secondary" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "secondary.50", children: "Secondary 50" }), _jsx(CustomBadge, { colorScheme: "secondary.100", children: "Secondary 100" }), _jsx(CustomBadge, { colorScheme: "secondary.200", children: "Secondary 200" }), _jsx(CustomBadge, { colorScheme: "secondary.300", children: "Secondary 300" }), _jsx(CustomBadge, { colorScheme: "secondary.400", children: "Secondary 400" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Alert" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "alert.success", children: "Success" }), _jsx(CustomBadge, { colorScheme: "alert.error", children: "Error" }), _jsx(CustomBadge, { colorScheme: "alert.warning", children: "Warning" }), _jsx(CustomBadge, { colorScheme: "alert.info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Background" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "background.brand", children: "Brand" }), _jsx(CustomBadge, { colorScheme: "background.primary", children: "Primary" }), _jsx(CustomBadge, { colorScheme: "background.secondary", children: "Secondary" }), _jsx(CustomBadge, { colorScheme: "background.tertiary", children: "Tertiary" })] })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 🎨 Cores do Tema
+
+Este exemplo demonstra como usar as cores definidas no tema do projeto.
+
+### ✨ **Cores Disponíveis:**
+
+#### **Primary:**
+- \`primary.100\` → Azul claro
+- \`primary.200\` → Azul médio
+- \`primary.300\` → Azul principal
+- \`primary.400\` → Azul escuro
+
+#### **Secondary:**
+- \`secondary.50\` → Roxo muito claro
+- \`secondary.100\` → Roxo claro
+- \`secondary.200\` → Roxo médio
+- \`secondary.300\` → Roxo principal
+- \`secondary.400\` → Roxo escuro
+
+#### **Alert:**
+- \`alert.success\` → Verde de sucesso
+- \`alert.error\` → Vermelho de erro
+- \`alert.warning\` → Amarelo de aviso
+- \`alert.info\` → Azul de informação
+
+#### **Background:**
+- \`background.brand\` → Cor da marca
+- \`background.primary\` → Fundo primário
+- \`background.secondary\` → Fundo secundário
+- \`background.tertiary\` → Fundo terciário
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Cores primary
+<CustomBadge colorScheme="primary.300">Primary 300</CustomBadge>
+<CustomBadge colorScheme="primary.400">Primary 400</CustomBadge>
+
+// Cores de alerta
+<CustomBadge colorScheme="alert.success">Success</CustomBadge>
+<CustomBadge colorScheme="alert.error">Error</CustomBadge>
+
+// Cores de background
+<CustomBadge colorScheme="background.brand">Brand</CustomBadge>
+<CustomBadge colorScheme="background.primary">Primary</CustomBadge>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/** 🎨 Exemplo com cores padrão do Chakra */
+export const ChakraColors = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83C\uDFA8 Cores Padr\u00E3o do Chakra" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o de badges usando as cores padr\u00E3o do Chakra UI." })] }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                    gap: "16px",
+                }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Cores B\u00E1sicas" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "blue", children: "Blue" }), _jsx(CustomBadge, { colorScheme: "green", children: "Green" }), _jsx(CustomBadge, { colorScheme: "red", children: "Red" }), _jsx(CustomBadge, { colorScheme: "yellow", children: "Yellow" }), _jsx(CustomBadge, { colorScheme: "purple", children: "Purple" }), _jsx(CustomBadge, { colorScheme: "pink", children: "Pink" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Cores Neutras" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "gray", children: "Gray" }), _jsx(CustomBadge, { colorScheme: "blackAlpha", children: "Black Alpha" }), _jsx(CustomBadge, { colorScheme: "whiteAlpha", children: "White Alpha" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Status" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "teal", children: "Teal" }), _jsx(CustomBadge, { colorScheme: "cyan", children: "Cyan" }), _jsx(CustomBadge, { colorScheme: "orange", children: "Orange" }), _jsx(CustomBadge, { colorScheme: "messenger", children: "Messenger" })] })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 🎨 Cores Padrão do Chakra
+
+Este exemplo demonstra como usar as cores padrão do Chakra UI.
+
+### ✨ **Cores Disponíveis:**
+
+#### **Cores Básicas:**
+- \`blue\` → Azul
+- \`green\` → Verde
+- \`red\` → Vermelho
+- \`yellow\` → Amarelo
+- \`purple\` → Roxo
+- \`pink\` → Rosa
+
+#### **Cores Neutras:**
+- \`gray\` → Cinza
+- \`blackAlpha\` → Preto transparente
+- \`whiteAlpha\` → Branco transparente
+
+#### **Cores de Status:**
+- \`teal\` → Verde-azulado
+- \`cyan\` → Ciano
+- \`orange\` → Laranja
+- \`messenger\` → Azul mensageiro
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Cores básicas
+<CustomBadge colorScheme="blue">Blue</CustomBadge>
+<CustomBadge colorScheme="green">Green</CustomBadge>
+<CustomBadge colorScheme="red">Red</CustomBadge>
+
+// Cores neutras
+<CustomBadge colorScheme="gray">Gray</CustomBadge>
+<CustomBadge colorScheme="blackAlpha">Black Alpha</CustomBadge>
+
+// Cores de status
+<CustomBadge colorScheme="teal">Teal</CustomBadge>
+<CustomBadge colorScheme="orange">Orange</CustomBadge>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/** 🎨 Exemplo com diferentes variantes */
+export const Variants = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83C\uDFA8 Diferentes Variantes" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o das diferentes variantes visuais do badge." })] }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+                    gap: "20px",
+                }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Solid" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "solid", colorScheme: "primary.300", children: "Primary" }), _jsx(CustomBadge, { variant: "solid", colorScheme: "alert.success", children: "Success" }), _jsx(CustomBadge, { variant: "solid", colorScheme: "alert.error", children: "Error" }), _jsx(CustomBadge, { variant: "solid", colorScheme: "blue", children: "Blue" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Subtle" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "subtle", colorScheme: "primary.300", children: "Primary" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "alert.success", children: "Success" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "alert.error", children: "Error" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "blue", children: "Blue" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Outline" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "outline", colorScheme: "primary.300", children: "Primary" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "alert.success", children: "Success" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "alert.error", children: "Error" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "blue", children: "Blue" })] })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 🎨 Diferentes Variantes
+
+Este exemplo demonstra as três variantes visuais disponíveis para o badge.
+
+### ✨ **Variantes Disponíveis:**
+
+#### **Solid:**
+- Fundo colorido com texto branco
+- Mais destacado e chamativo
+- Ideal para status importantes
+
+#### **Subtle:**
+- Fundo claro com texto colorido
+- Mais sutil e elegante
+- Ideal para informações secundárias
+
+#### **Outline:**
+- Borda colorida com fundo transparente
+- Mais minimalista
+- Ideal para ações ou tags
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Variante solid
+<CustomBadge variant="solid" colorScheme="primary.300">
+  Primary
+</CustomBadge>
+
+// Variante subtle
+<CustomBadge variant="subtle" colorScheme="alert.success">
+  Success
+</CustomBadge>
+
+// Variante outline
+<CustomBadge variant="outline" colorScheme="alert.error">
+  Error
+</CustomBadge>
+\`\`\`
+
+### 🎯 **Casos de Uso:**
+
+- **Solid** → Status críticos, destaque importante
+- **Subtle** → Informações secundárias, tags
+- **Outline** → Ações, estados temporários
+        `,
+            },
+        },
+    },
+};
+/** 📏 Exemplo com diferentes tamanhos */
+export const Sizes = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83D\uDCCF Diferentes Tamanhos" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o dos diferentes tamanhos dispon\u00EDveis para o badge." })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Small (sm)" }), _jsx(CustomBadge, { size: "sm", colorScheme: "primary.300", children: "Badge Pequeno" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Medium (md)" }), _jsx(CustomBadge, { size: "md", colorScheme: "primary.300", children: "Badge M\u00E9dio" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Large (lg)" }), _jsx(CustomBadge, { size: "lg", colorScheme: "primary.300", children: "Badge Grande" })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 📏 Diferentes Tamanhos
+
+Este exemplo demonstra os três tamanhos disponíveis para o badge.
+
+### ✨ **Tamanhos Disponíveis:**
+
+- **Small (sm)** → Tamanho pequeno, ideal para tags
+- **Medium (md)** → Tamanho médio, padrão
+- **Large (lg)** → Tamanho grande, para destaque
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Tamanho pequeno
+<CustomBadge size="sm" colorScheme="primary.300">
+  Badge Pequeno
+</CustomBadge>
+
+// Tamanho médio (padrão)
+<CustomBadge size="md" colorScheme="primary.300">
+  Badge Médio
+</CustomBadge>
+
+// Tamanho grande
+<CustomBadge size="lg" colorScheme="primary.300">
+  Badge Grande
+</CustomBadge>
+\`\`\`
+
+### 🎯 **Casos de Uso:**
+
+- **Small** → Tags, categorias, status secundários
+- **Medium** → Status principais, informações gerais
+- **Large** → Destaque, alertas importantes
+        `,
+            },
+        },
+    },
+};
+/** 🎯 Exemplo com casos de uso práticos */
+export const UseCases = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83C\uDFAF Casos de Uso Pr\u00E1ticos" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o de como usar o badge em diferentes contextos." })] }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+                    gap: "20px",
+                }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Status de Pedido" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "alert.success", children: "Aprovado" }), _jsx(CustomBadge, { colorScheme: "alert.warning", children: "Pendente" }), _jsx(CustomBadge, { colorScheme: "alert.error", children: "Cancelado" }), _jsx(CustomBadge, { colorScheme: "alert.info", children: "Em Processamento" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Prioridade de Tarefa" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "alert.error", children: "Alta" }), _jsx(CustomBadge, { colorScheme: "alert.warning", children: "M\u00E9dia" }), _jsx(CustomBadge, { colorScheme: "alert.success", children: "Baixa" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Categorias" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "subtle", colorScheme: "primary.300", children: "Frontend" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "secondary.300", children: "Backend" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "blue", children: "Mobile" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "purple", children: "Design" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Tags" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "outline", colorScheme: "primary.300", children: "React" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "secondary.300", children: "TypeScript" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "blue", children: "Chakra UI" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "green", children: "Storybook" })] })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 🎯 Casos de Uso Práticos
+
+Este exemplo demonstra como usar o badge em diferentes contextos reais.
+
+### ✨ **Contextos Demonstrados:**
+
+#### **Status de Pedido:**
+- \`alert.success\` → Aprovado
+- \`alert.warning\` → Pendente
+- \`alert.error\` → Cancelado
+- \`alert.info\` → Em Processamento
+
+#### **Prioridade de Tarefa:**
+- \`alert.error\` → Alta
+- \`alert.warning\` → Média
+- \`alert.success\` → Baixa
+
+#### **Categorias:**
+- \`primary.300\` → Frontend
+- \`secondary.300\` → Backend
+- \`blue\` → Mobile
+- \`purple\` → Design
+
+#### **Tags:**
+- \`primary.300\` → React
+- \`secondary.300\` → TypeScript
+- \`blue\` → Chakra UI
+- \`green\` → Storybook
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Status de pedido
+<CustomBadge colorScheme="alert.success">Aprovado</CustomBadge>
+<CustomBadge colorScheme="alert.warning">Pendente</CustomBadge>
+
+// Prioridade de tarefa
+<CustomBadge colorScheme="alert.error">Alta</CustomBadge>
+<CustomBadge colorScheme="alert.success">Baixa</CustomBadge>
+
+// Categorias
+<CustomBadge variant="subtle" colorScheme="primary.300">
+  Frontend
+</CustomBadge>
+
+// Tags
+<CustomBadge variant="outline" colorScheme="primary.300">
+  React
+</CustomBadge>
+\`\`\`
+
+### 🎨 **Dicas de Design:**
+
+1. **Use cores consistentes** → Mantenha padrões em toda a aplicação
+2. **Combine variantes** → Solid para destaque, subtle para categorias
+3. **Considere acessibilidade** → Contraste adequado entre texto e fundo
+4. **Seja conciso** → Texto curto e direto
+        `,
+            },
+        },
+    },
+};
+/** 📏 Exemplo com diferentes paddings */
+export const PaddingExamples = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83D\uDCCF Diferentes Paddings" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o de como ajustar o padding interno do badge." })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Padding Padr\u00E3o (px=3, py=1)" }), _jsx(CustomBadge, { colorScheme: "primary.300", children: "Badge com Padding Padr\u00E3o" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Padding Pequeno (px=2, py=0.5)" }), _jsx(CustomBadge, { colorScheme: "primary.300", px: 2, py: 0.5, children: "Badge com Padding Pequeno" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Padding M\u00E9dio (px=4, py=1.5)" }), _jsx(CustomBadge, { colorScheme: "primary.300", px: 4, py: 1.5, children: "Badge com Padding M\u00E9dio" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Padding Grande (px=6, py=2)" }), _jsx(CustomBadge, { colorScheme: "primary.300", px: 6, py: 2, children: "Badge com Padding Grande" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Padding Extra Grande (px=8, py=3)" }), _jsx(CustomBadge, { colorScheme: "primary.300", px: 8, py: 3, children: "Badge com Padding Extra Grande" })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 📏 Diferentes Paddings
+
+Este exemplo demonstra como ajustar o padding interno do badge.
+
+### ✨ **Propriedades de Padding:**
+
+- **px** → Padding horizontal (esquerda e direita)
+- **py** → Padding vertical (cima e baixo)
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Padding padrão
+<CustomBadge colorScheme="primary.300">
+  Badge com Padding Padrão
+</CustomBadge>
+
+// Padding pequeno
+<CustomBadge colorScheme="primary.300" px={2} py={0.5}>
+  Badge com Padding Pequeno
+</CustomBadge>
+
+// Padding médio
+<CustomBadge colorScheme="primary.300" px={4} py={1.5}>
+  Badge com Padding Médio
+</CustomBadge>
+
+// Padding grande
+<CustomBadge colorScheme="primary.300" px={6} py={2}>
+  Badge com Padding Grande
+</CustomBadge>
+
+// Padding extra grande
+<CustomBadge colorScheme="primary.300" px={8} py={3}>
+  Badge com Padding Extra Grande
+</CustomBadge>
+\`\`\`
+
+### 🎯 **Valores Recomendados:**
+
+- **Compacto** → \`px={2}, py={0.5}\`
+- **Padrão** → \`px={3}, py={1}\` (valor padrão)
+- **Confortável** → \`px={4}, py={1.5}\`
+- **Espaçoso** → \`px={6}, py={2}\`
+- **Extra espaçoso** → \`px={8}, py={3}\`
+
+### 💡 **Dicas:**
+
+1. **Use valores proporcionais** → Mantenha px e py em proporção
+2. **Considere o conteúdo** → Texto longo pode precisar de mais px
+3. **Teste visualmente** → Ajuste conforme necessário
+4. **Mantenha consistência** → Use os mesmos valores em badges similares
+        `,
+            },
+        },
+    },
+};
+/** 🔧 Exemplo com todas as propriedades */
+export const AllProps = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { marginBottom: "10px", color: "#333" }, children: "\uD83D\uDD27 Todas as Propriedades" }), _jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: "Demonstra\u00E7\u00E3o de todas as propriedades dispon\u00EDveis no CustomBadge." })] }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+                    gap: "20px",
+                }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Cores do Tema" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "primary.300", children: "Primary 300" }), _jsx(CustomBadge, { colorScheme: "secondary.200", children: "Secondary 200" }), _jsx(CustomBadge, { colorScheme: "alert.success", children: "Alert Success" }), _jsx(CustomBadge, { colorScheme: "background.brand", children: "Background Brand" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Cores do Chakra" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { colorScheme: "blue", children: "Blue" }), _jsx(CustomBadge, { colorScheme: "green", children: "Green" }), _jsx(CustomBadge, { colorScheme: "red", children: "Red" }), _jsx(CustomBadge, { colorScheme: "purple", children: "Purple" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Variantes" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { variant: "solid", colorScheme: "primary.300", children: "Solid" }), _jsx(CustomBadge, { variant: "subtle", colorScheme: "primary.300", children: "Subtle" }), _jsx(CustomBadge, { variant: "outline", colorScheme: "primary.300", children: "Outline" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: "8px", color: "#555" }, children: "Tamanhos" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(CustomBadge, { size: "sm", colorScheme: "primary.300", children: "Small" }), _jsx(CustomBadge, { size: "md", colorScheme: "primary.300", children: "Medium" }), _jsx(CustomBadge, { size: "lg", colorScheme: "primary.300", children: "Large" })] })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## 🔧 Todas as Propriedades
+
+Este exemplo demonstra todas as propriedades disponíveis no CustomBadge.
+
+### ✨ **Propriedades Demonstradas:**
+
+#### **colorScheme:**
+- **Cores do Tema** → \`primary.300\`, \`secondary.200\`, \`alert.success\`
+- **Cores do Chakra** → \`blue\`, \`green\`, \`red\`, \`purple\`
+
+#### **variant:**
+- **solid** → Fundo colorido com texto branco
+- **subtle** → Fundo claro com texto colorido
+- **outline** → Borda colorida com fundo transparente
+
+#### **size:**
+- **sm** → Tamanho pequeno
+- **md** → Tamanho médio (padrão)
+- **lg** → Tamanho grande
+
+### 📝 **Exemplo de Código:**
+
+\`\`\`tsx
+import { CustomBadge } from './CustomBadge';
+
+// Cores do tema
+<CustomBadge colorScheme="primary.300">Primary 300</CustomBadge>
+<CustomBadge colorScheme="alert.success">Alert Success</CustomBadge>
+
+// Cores do Chakra
+<CustomBadge colorScheme="blue">Blue</CustomBadge>
+<CustomBadge colorScheme="green">Green</CustomBadge>
+
+// Variantes
+<CustomBadge variant="solid" colorScheme="primary.300">Solid</CustomBadge>
+<CustomBadge variant="subtle" colorScheme="primary.300">Subtle</CustomBadge>
+<CustomBadge variant="outline" colorScheme="primary.300">Outline</CustomBadge>
+
+// Tamanhos
+<CustomBadge size="sm" colorScheme="primary.300">Small</CustomBadge>
+<CustomBadge size="md" colorScheme="primary.300">Medium</CustomBadge>
+<CustomBadge size="lg" colorScheme="primary.300">Large</CustomBadge>
+\`\`\`
+
+### 🎯 **Compatibilidade:**
+
+O CustomBadge é 100% compatível com o Badge do Chakra UI, mantendo todas as propriedades originais e adicionando suporte a cores do tema.
+        `,
+            },
+        },
+    },
+};

package/dist/stories/Londrisoft/Components/CustomButton.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CustomButtonProps } from "../../../components/CustomButton";
+declare const meta: Meta<CustomButtonProps>;
+export default meta;
+type Story = StoryObj<CustomButtonProps>;
+/** 🎯 Exemplo básico do CustomButton */
+export declare const Default: Story;
+/** 🎯 Exemplo com diferentes variantes */
+export declare const Variants: Story;
+/** 🎯 Exemplo com ícones */
+export declare const WithIcons: Story;
+/** 🎯 Exemplo com estados especiais */
+export declare const States: Story;
+/** 🎯 Exemplo com cenários reais */
+export declare const RealWorldScenarios: Story;
+/** 🔗 Exemplo de integração com outros componentes custom */
+export declare const IntegrationWithCustomComponents: Story;