lsoft-ui 0.0.1

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

@@ -0,0 +1,1094 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, VStack, HStack, Icon } from "@chakra-ui/react";
+import { Search as SearchIcon, Check as CheckIcon, Mail as MailIcon, Lock as LockIcon, Phone as PhoneIcon, User, MapPin, Calendar, Clock, Filter, Eye, Star, } from "lucide-react";
+import { CustomInput } from "../../../components/CustomInput";
+import CustomTextarea from "../../../components/CustomTextarea";
+import { CustomCheckbox } from "../../../components/CustomCheckBox";
+import CustomCard from "../../../components/CustomCard";
+import CustomSelect from "../../../components/CustomSelect";
+import { CustomAutocomplete } from "../../../components/CustomAutoComplete";
+import { CustomTable } from "../../../components/CustomTable";
+import { CustomButton } from "../../../components/CustomButton";
+const meta = {
+    title: "Londrisoft/Components/CustomInput",
+    component: CustomInput,
+    tags: ["autodocs"],
+    args: {
+        label: "Nome completo",
+        placeholder: "Digite seu nome completo",
+        type: "text",
+        error: "",
+        showError: true,
+        withFormControl: true,
+        isDisabled: false,
+        required: false,
+        tooltip: "",
+        labelColor: "",
+        labelBold: false,
+        size: "md",
+        rightIcon: _jsx(Icon, { as: SearchIcon }),
+        leftIcon: _jsx(Icon, { as: User }),
+    },
+    argTypes: {
+        label: {
+            control: "text",
+            description: "Texto do label exibido acima do input.",
+            table: { category: "Content" },
+        },
+        placeholder: {
+            control: "text",
+            description: "Texto exibido quando o campo está vazio.",
+            table: { category: "Content" },
+        },
+        type: {
+            control: {
+                type: "select",
+                options: [
+                    "text",
+                    "email",
+                    "password",
+                    "number",
+                    "search",
+                    "tel",
+                    "url",
+                ],
+            },
+            description: "Tipo do input HTML.",
+            table: { category: "Behavior" },
+        },
+        error: {
+            control: "text",
+            description: "Mensagem de erro exibida abaixo do input.",
+            table: { category: "State" },
+        },
+        showError: {
+            control: "boolean",
+            description: "Define se a mensagem de erro é exibida.",
+            table: { category: "Behavior" },
+        },
+        withFormControl: {
+            control: "boolean",
+            description: "Envolve o input em FormControl para exibir erros.",
+            table: { category: "Behavior" },
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "Desabilita o input.",
+            table: { category: "Behavior" },
+        },
+        required: {
+            control: "boolean",
+            description: "Adiciona asterisco vermelho indicando campo obrigatório.",
+            table: { category: "Behavior" },
+        },
+        tooltip: {
+            control: "text",
+            description: "Texto do tooltip exibido ao lado do label.",
+            table: { category: "Content" },
+        },
+        labelColor: {
+            control: "color",
+            description: "Cor do texto do label.",
+            table: { category: "Styling" },
+        },
+        labelBold: {
+            control: "boolean",
+            description: "Define se o label deve ser exibido em negrito.",
+            table: { category: "Styling" },
+        },
+        size: {
+            control: { type: "select", options: ["sm", "md", "lg"] },
+            description: "Tamanho do input (small, medium, large).",
+            table: { category: "Styling" },
+        },
+        leftIcon: {
+            description: "Ícone exibido à esquerda dentro do input.",
+            table: { category: "Content", disable: true },
+        },
+        rightIcon: {
+            description: "Ícone exibido à direita dentro do input.",
+            table: { category: "Content", disable: true },
+        },
+        value: {
+            table: { disable: true },
+        },
+        onChange: {
+            table: { disable: true },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+**CustomInput** é um componente de entrada de texto baseado no Input do Chakra UI, otimizado para formulários e interfaces de usuário modernas.
+
+## Características Principais
+
+- **Ícones Lucide React**: Suporte completo à biblioteca Lucide React para ícones modernos e consistentes
+- **Validação Integrada**: Sistema de validação com exibição de erros e estados visuais
+- **Acessibilidade**: Implementação completa de ARIA labels, navegação por teclado e leitores de tela
+- **Estados Responsivos**: Suporte a estados disabled, error, focus e loading
+- **Integração com Tema**: Compatível com o sistema de design Londrisoft
+- **FormControl Opcional**: Flexibilidade para usar com ou sem FormControl do Chakra UI
+
+## Casos de Uso Comuns
+
+- **Formulários de Cadastro**: Nome, e-mail, telefone, endereço
+- **Autenticação**: Login, senha, confirmação de senha
+- **Busca e Filtros**: Campos de pesquisa com ícones
+- **Configurações**: Campos de configuração com tooltips
+- **Validação em Tempo Real**: Feedback imediato para o usuário
+
+## Benefícios de UX
+
+- **Feedback Visual**: Estados claros para erro, sucesso e loading
+- **Consistência**: Padrão visual uniforme em toda aplicação
+- **Acessibilidade**: Suporte completo para usuários com necessidades especiais
+- **Flexibilidade**: Adaptável a diferentes contextos e layouts
+
+## Tipos Disponíveis
+
+- **text**: Texto simples
+- **email**: Validação de e-mail
+- **password**: Senha com toggle de visibilidade
+- **number**: Números com validação
+- **search**: Campo de busca
+- **tel**: Telefone com formatação
+- **url**: URLs com validação
+
+## Responsividade
+
+O componente se adapta automaticamente a diferentes tamanhos de tela, mantendo a usabilidade em dispositivos móveis e desktop.
+`,
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "#root",
+        },
+    },
+};
+export default meta;
+/** 🎯 Default: Exemplo básico do CustomInput */
+export const Default = {
+    name: "Padrão",
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Exemplo básico** do CustomInput com configuração padrão.
+
+**Características:**
+- Label descritivo
+- Placeholder informativo
+- Tipo de texto padrão
+- Sem erros ou validações
+- Tamanho médio
+
+**Casos de uso:**
+- Campos de texto simples
+- Formulários básicos
+- Entrada de dados não críticos
+- Prototipagem rápida
+
+**Dicas de implementação:**
+- Use labels claros e descritivos
+- Placeholders devem guiar o usuário
+- Considere validação quando necessário
+- Mantenha consistência visual
+`,
+            },
+            source: {
+                code: `
+import React from 'react';
+import { CustomInput } from '../../../components/CustomInput';
+
+const BasicInput = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <CustomInput
+      label="Nome completo"
+      placeholder="Digite seu nome completo"
+      type="text"
+      value={value}
+      onChange={handleChange}
+      error=""
+      showError={true}
+      withFormControl={true}
+      isDisabled={false}
+      required={false}
+      size="md"
+      rightIcon={<SearchIcon />}
+    />
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎯 Variants: Demonstração de diferentes tipos de input */
+export const Variants = {
+    name: "Variantes",
+    render: () => (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Tipos de Input" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Texto", placeholder: "Digite texto simples", type: "text", leftIcon: _jsx(User, {}) }), _jsx(CustomInput, { label: "E-mail", placeholder: "Digite seu e-mail", type: "email", leftIcon: _jsx(MailIcon, {}), required: true }), _jsx(CustomInput, { label: "Senha", placeholder: "Digite sua senha", type: "password", leftIcon: _jsx(LockIcon, {}), required: true }), _jsx(CustomInput, { label: "Telefone", placeholder: "(11) 99999-9999", type: "tel", leftIcon: _jsx(PhoneIcon, {}) }), _jsx(CustomInput, { label: "Busca", placeholder: "Digite para buscar...", type: "search", leftIcon: _jsx(SearchIcon, {}) }), _jsx(CustomInput, { label: "N\u00FAmero", placeholder: "Digite um n\u00FAmero", type: "number" })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Com \u00CDcones" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Nome com \u00EDcone", placeholder: "Digite seu nome", leftIcon: _jsx(User, {}) }), _jsx(CustomInput, { label: "E-mail com valida\u00E7\u00E3o", placeholder: "Digite seu e-mail", type: "email", leftIcon: _jsx(MailIcon, {}), rightIcon: _jsx(CheckIcon, {}) }), _jsx(CustomInput, { label: "Senha com toggle", placeholder: "Digite sua senha", type: "password", leftIcon: _jsx(LockIcon, {}), rightIcon: _jsx(Eye, {}) })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Estados Visuais" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Campo Normal", placeholder: "Estado normal" }), _jsx(CustomInput, { label: "Campo com Erro", placeholder: "Campo com erro", error: "Este campo tem um erro" }), _jsx(CustomInput, { label: "Campo Desabilitado", placeholder: "Campo desabilitado", isDisabled: true, value: "Valor fixo" }), _jsx(CustomInput, { label: "Campo Obrigat\u00F3rio", placeholder: "Campo obrigat\u00F3rio", required: true, tooltip: "Este campo \u00E9 obrigat\u00F3rio" })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** de diferentes variantes e tipos do CustomInput.
+
+**Variantes mostradas:**
+- **Tipos de Input**: text, email, password, tel, search, number
+- **Com Ícones**: Ícones à esquerda e direita
+- **Estados Visuais**: Normal, erro, desabilitado, obrigatório
+
+**Casos de uso por tipo:**
+- **text**: Nomes, descrições, texto livre
+- **email**: Validação automática de formato
+- **password**: Senhas com toggle de visibilidade
+- **tel**: Telefones com formatação
+- **search**: Campos de busca com ícone
+- **number**: Valores numéricos com validação
+
+**Dicas de design:**
+- Use ícones que representem o tipo de dado
+- Mantenha consistência visual entre campos relacionados
+- Considere validação em tempo real para melhor UX
+`,
+            },
+            source: {
+                code: `
+import React from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { User, Mail, Lock, Phone, Search, Check, Eye } from 'lucide-react';
+import { CustomInput } from '../../../components/CustomInput';
+
+const InputVariants = () => {
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Tipos de Input</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="Texto"
+            placeholder="Digite texto simples"
+            type="text"
+            leftIcon={<User />}
+          />
+          <CustomInput
+            label="E-mail"
+            placeholder="Digite seu e-mail"
+            type="email"
+            leftIcon={<Mail />}
+            required={true}
+          />
+          <CustomInput
+            label="Senha"
+            placeholder="Digite sua senha"
+            type="password"
+            leftIcon={<Lock />}
+            required={true}
+          />
+          <CustomInput
+            label="Telefone"
+            placeholder="(11) 99999-9999"
+            type="tel"
+            leftIcon={<Phone />}
+          />
+          <CustomInput
+            label="Busca"
+            placeholder="Digite para buscar..."
+            type="search"
+            leftIcon={<Search />}
+          />
+          <CustomInput
+            label="Número"
+            placeholder="Digite um número"
+            type="number"
+          />
+        </VStack>
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Com Ícones</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="Nome com ícone"
+            placeholder="Digite seu nome"
+            leftIcon={<User />}
+          />
+          <CustomInput
+            label="E-mail com validação"
+            placeholder="Digite seu e-mail"
+            type="email"
+            leftIcon={<Mail />}
+            rightIcon={<Check />}
+          />
+          <CustomInput
+            label="Senha com toggle"
+            placeholder="Digite sua senha"
+            type="password"
+            leftIcon={<Lock />}
+            rightIcon={<Eye />}
+          />
+        </VStack>
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Estados Visuais</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="Campo Normal"
+            placeholder="Estado normal"
+          />
+          <CustomInput
+            label="Campo com Erro"
+            placeholder="Campo com erro"
+            error="Este campo tem um erro"
+          />
+          <CustomInput
+            label="Campo Desabilitado"
+            placeholder="Campo desabilitado"
+            isDisabled={true}
+            value="Valor fixo"
+          />
+          <CustomInput
+            label="Campo Obrigatório"
+            placeholder="Campo obrigatório"
+            required={true}
+            tooltip="Este campo é obrigatório"
+          />
+        </VStack>
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎯 States: Demonstração de diferentes estados */
+export const States = {
+    name: "Estados",
+    render: () => (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Estados de Valida\u00E7\u00E3o" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Campo Normal", placeholder: "Estado normal" }), _jsx(CustomInput, { label: "Campo com Erro", placeholder: "Campo com erro", error: "Este campo tem um erro de valida\u00E7\u00E3o" }), _jsx(CustomInput, { label: "Campo Desabilitado", placeholder: "Campo desabilitado", isDisabled: true, value: "Valor fixo" }), _jsx(CustomInput, { label: "Campo Obrigat\u00F3rio", placeholder: "Campo obrigat\u00F3rio", required: true, tooltip: "Este campo \u00E9 obrigat\u00F3rio" })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Valida\u00E7\u00E3o em Tempo Real" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "E-mail", placeholder: "Digite seu e-mail", type: "email", leftIcon: _jsx(MailIcon, {}), error: "E-mail inv\u00E1lido", tooltip: "Digite um e-mail v\u00E1lido" }), _jsx(CustomInput, { label: "Senha", placeholder: "Digite sua senha", type: "password", leftIcon: _jsx(LockIcon, {}), error: "Senha deve ter pelo menos 8 caracteres", required: true }), _jsx(CustomInput, { label: "Telefone", placeholder: "(11) 99999-9999", type: "tel", leftIcon: _jsx(PhoneIcon, {}), error: "Telefone inv\u00E1lido" })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Estados de Loading" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Campo com Loading", placeholder: "Carregando...", isDisabled: true, value: "Processando..." }), _jsx(CustomInput, { label: "Valida\u00E7\u00E3o em Andamento", placeholder: "Validando...", rightIcon: _jsx(CheckIcon, {}) })] })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** dos diferentes estados do CustomInput.
+
+**Estados mostrados:**
+- **Validação**: Normal, erro, obrigatório
+- **Validação em Tempo Real**: Feedback imediato para o usuário
+- **Loading**: Estados de processamento e validação
+
+**Casos de uso:**
+- **Normal**: Campos funcionais sem validação
+- **Erro**: Feedback visual para dados inválidos
+- **Desabilitado**: Campos não editáveis
+- **Obrigatório**: Campos que devem ser preenchidos
+
+**Dicas de implementação:**
+- Use mensagens de erro claras e específicas
+- Considere validação em tempo real para melhor UX
+- Mantenha consistência visual entre estados
+- Use tooltips para orientação adicional
+`,
+            },
+            source: {
+                code: `
+import React from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { Mail, Lock, Phone, Check } from 'lucide-react';
+import { CustomInput } from '../../../components/CustomInput';
+
+const InputStates = () => {
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Estados de Validação</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="Campo Normal"
+            placeholder="Estado normal"
+          />
+          <CustomInput
+            label="Campo com Erro"
+            placeholder="Campo com erro"
+            error="Este campo tem um erro de validação"
+          />
+          <CustomInput
+            label="Campo Desabilitado"
+            placeholder="Campo desabilitado"
+            isDisabled={true}
+            value="Valor fixo"
+          />
+          <CustomInput
+            label="Campo Obrigatório"
+            placeholder="Campo obrigatório"
+            required={true}
+            tooltip="Este campo é obrigatório"
+          />
+        </VStack>
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Validação em Tempo Real</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="E-mail"
+            placeholder="Digite seu e-mail"
+            type="email"
+            leftIcon={<Mail />}
+            error="E-mail inválido"
+            tooltip="Digite um e-mail válido"
+          />
+          <CustomInput
+            label="Senha"
+            placeholder="Digite sua senha"
+            type="password"
+            leftIcon={<Lock />}
+            error="Senha deve ter pelo menos 8 caracteres"
+            required={true}
+          />
+          <CustomInput
+            label="Telefone"
+            placeholder="(11) 99999-9999"
+            type="tel"
+            leftIcon={<Phone />}
+            error="Telefone inválido"
+          />
+        </VStack>
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Estados de Loading</Text>
+        <VStack spacing={4} align="stretch">
+          <CustomInput
+            label="Campo com Loading"
+            placeholder="Carregando..."
+            isDisabled={true}
+            value="Processando..."
+          />
+          <CustomInput
+            label="Validação em Andamento"
+            placeholder="Validando..."
+            rightIcon={<Check />}
+          />
+        </VStack>
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎯 RealWorldScenarios: Cenários práticos de uso */
+export const RealWorldScenarios = {
+    name: "Cenários do Mundo Real",
+    render: () => (_jsxs(VStack, { spacing: 8, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Formul\u00E1rio de Cadastro" }), _jsx(CustomCard, { header: _jsx(Text, { fontSize: "lg", fontWeight: "bold", children: "Cadastro de Usu\u00E1rio" }), body: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "Nome", placeholder: "Digite seu nome", leftIcon: _jsx(User, {}), required: true }), _jsx(CustomInput, { label: "Sobrenome", placeholder: "Digite seu sobrenome", leftIcon: _jsx(User, {}), required: true })] }), _jsx(CustomInput, { label: "E-mail", placeholder: "Digite seu e-mail", type: "email", leftIcon: _jsx(MailIcon, {}), required: true, tooltip: "Digite um e-mail v\u00E1lido" }), _jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "Telefone", placeholder: "(11) 99999-9999", type: "tel", leftIcon: _jsx(PhoneIcon, {}) }), _jsx(CustomInput, { label: "CPF", placeholder: "000.000.000-00", leftIcon: _jsx(User, {}), required: true })] }), _jsx(CustomInput, { label: "Senha", placeholder: "Digite sua senha", type: "password", leftIcon: _jsx(LockIcon, {}), required: true, error: "Senha deve ter pelo menos 8 caracteres" }), _jsx(CustomInput, { label: "Confirmar Senha", placeholder: "Confirme sua senha", type: "password", leftIcon: _jsx(LockIcon, {}), required: true, error: "Senhas n\u00E3o coincidem" })] }), footer: _jsxs(HStack, { justify: "flex-end", spacing: 2, children: [_jsx(CustomButton, { variant: "outline", backgroundColor: "transparent", color: "#3182ce", borderColor: "#3182ce", size: "sm", children: "Cancelar" }), _jsx(CustomButton, { variant: "primary", backgroundColor: "#3182ce", color: "#ffffff", size: "sm", children: "Cadastrar" })] }) })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Formul\u00E1rio de Endere\u00E7o" }), _jsx(CustomCard, { header: _jsx(Text, { fontSize: "lg", fontWeight: "bold", children: "Endere\u00E7o de Entrega" }), body: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "CEP", placeholder: "00000-000", leftIcon: _jsx(MapPin, {}), required: true }), _jsx(CustomInput, { label: "Endere\u00E7o", placeholder: "Rua, Avenida, etc.", leftIcon: _jsx(MapPin, {}), required: true }), _jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "N\u00FAmero", placeholder: "123", type: "number", required: true }), _jsx(CustomInput, { label: "Complemento", placeholder: "Apto, Casa, etc." })] }), _jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "Bairro", placeholder: "Digite o bairro", leftIcon: _jsx(MapPin, {}), required: true }), _jsx(CustomInput, { label: "Cidade", placeholder: "Digite a cidade", leftIcon: _jsx(MapPin, {}), required: true })] }), _jsx(CustomInput, { label: "Estado", placeholder: "Digite o estado", leftIcon: _jsx(MapPin, {}), required: true })] }) })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Barra de Pesquisa Avan\u00E7ada" }), _jsxs(HStack, { spacing: 3, p: 4, bg: "gray.50", borderRadius: "md", children: [_jsx(CustomInput, { placeholder: "Buscar produtos...", type: "search", leftIcon: _jsx(SearchIcon, {}) }), _jsx(CustomInput, { placeholder: "Filtrar por pre\u00E7o", type: "number", leftIcon: _jsx(Filter, {}) }), _jsx(CustomInput, { placeholder: "Data inicial", type: "date", leftIcon: _jsx(Calendar, {}) }), _jsx(CustomInput, { placeholder: "Data final", type: "date", leftIcon: _jsx(Calendar, {}) })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Configura\u00E7\u00F5es de Perfil" }), _jsx(CustomCard, { header: _jsx(Text, { fontSize: "lg", fontWeight: "bold", children: "Configura\u00E7\u00F5es" }), body: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(CustomInput, { label: "Nome de Exibi\u00E7\u00E3o", placeholder: "Como voc\u00EA quer ser chamado", leftIcon: _jsx(User, {}), tooltip: "Este nome ser\u00E1 exibido para outros usu\u00E1rios" }), _jsx(CustomInput, { label: "E-mail de Contato", placeholder: "E-mail para notifica\u00E7\u00F5es", type: "email", leftIcon: _jsx(MailIcon, {}), required: true }), _jsx(CustomInput, { label: "Telefone de Emerg\u00EAncia", placeholder: "(11) 99999-9999", type: "tel", leftIcon: _jsx(PhoneIcon, {}), tooltip: "Usado apenas em emerg\u00EAncias" }), _jsx(CustomInput, { label: "URL do Site", placeholder: "https://meusite.com", type: "url", leftIcon: _jsx(MapPin, {}) }), _jsx(CustomInput, { label: "Fuso Hor\u00E1rio", placeholder: "UTC-3", leftIcon: _jsx(Clock, {}), tooltip: "Fuso hor\u00E1rio para agendamentos" })] }) })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Cenários práticos** de uso do CustomInput em aplicações reais.
+
+**Cenários demonstrados:**
+
+### 1. Formulário de Cadastro
+- **Campos pessoais**: Nome, sobrenome, e-mail, telefone, CPF
+- **Campos de segurança**: Senha e confirmação
+- **Validação**: Campos obrigatórios e validação de formato
+- **Layout responsivo**: Organização em grid com espaçamento adequado
+
+### 2. Formulário de Endereço
+- **Campos de localização**: CEP, endereço, número, complemento
+- **Campos geográficos**: Bairro, cidade, estado
+- **Validação**: Campos obrigatórios para entrega
+- **Ícones contextuais**: MapPin para campos de localização
+
+### 3. Barra de Pesquisa Avançada
+- **Busca principal**: Campo de pesquisa com ícone
+- **Filtros**: Preço, datas de início e fim
+- **Layout compacto**: Organização horizontal para economizar espaço
+- **Tipos específicos**: search, number, date
+
+### 4. Configurações de Perfil
+- **Campos informativos**: Nome de exibição, e-mail, telefone
+- **Campos opcionais**: URL do site, fuso horário
+- **Tooltips explicativos**: Informações adicionais sobre cada campo
+- **Validação específica**: E-mail, URL, telefone
+
+**Dicas de implementação:**
+- Use ícones que representem o tipo de dado
+- Mantenha consistência visual entre campos relacionados
+- Considere validação em tempo real para melhor UX
+- Use tooltips para orientação adicional
+- Organize campos em grupos lógicos
+`,
+            },
+            source: {
+                code: `
+import React from 'react';
+import { VStack, HStack, Box, Text } from '@chakra-ui/react';
+import { 
+  User, Mail, Phone, Lock, MapPin, Search, Filter, 
+  Calendar, Clock 
+} from 'lucide-react';
+import { CustomInput } from '../../../components/CustomInput';
+import CustomCard from '../../../components/CustomCard';
+import { CustomButton } from '../../../components/CustomButton';
+
+const RealWorldScenarios = () => {
+  return (
+    <VStack spacing={8} align="stretch">
+      {/* Formulário de Cadastro */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Formulário de Cadastro</Text>
+        <CustomCard
+          header={<Text fontSize="lg" fontWeight="bold">Cadastro de Usuário</Text>}
+          body={
+            <VStack spacing={4} align="stretch">
+              <HStack spacing={4}>
+                <CustomInput
+                  label="Nome"
+                  placeholder="Digite seu nome"
+                  leftIcon={<User />}
+                  required={true}
+                />
+                <CustomInput
+                  label="Sobrenome"
+                  placeholder="Digite seu sobrenome"
+                  leftIcon={<User />}
+                  required={true}
+                />
+              </HStack>
+              
+              <CustomInput
+                label="E-mail"
+                placeholder="Digite seu e-mail"
+                type="email"
+                leftIcon={<Mail />}
+                required={true}
+                tooltip="Digite um e-mail válido"
+              />
+              
+              <HStack spacing={4}>
+                <CustomInput
+                  label="Telefone"
+                  placeholder="(11) 99999-9999"
+                  type="tel"
+                  leftIcon={<Phone />}
+                />
+                <CustomInput
+                  label="CPF"
+                  placeholder="000.000.000-00"
+                  leftIcon={<User />}
+                  required={true}
+                />
+              </HStack>
+              
+              <CustomInput
+                label="Senha"
+                placeholder="Digite sua senha"
+                type="password"
+                leftIcon={<Lock />}
+                required={true}
+                error="Senha deve ter pelo menos 8 caracteres"
+              />
+              
+              <CustomInput
+                label="Confirmar Senha"
+                placeholder="Confirme sua senha"
+                type="password"
+                leftIcon={<Lock />}
+                required={true}
+                error="Senhas não coincidem"
+              />
+            </VStack>
+          }
+          footer={
+            <HStack justify="flex-end" spacing={2}>
+              <CustomButton
+                variant="outline"
+                backgroundColor="transparent"
+                color="#3182ce"
+                borderColor="#3182ce"
+                size="sm"
+              >
+                Cancelar
+              </CustomButton>
+              <CustomButton
+                variant="primary"
+                backgroundColor="#3182ce"
+                color="#ffffff"
+                size="sm"
+              >
+                Cadastrar
+              </CustomButton>
+            </HStack>
+          }
+        />
+      </Box>
+
+      {/* Formulário de Endereço */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Formulário de Endereço</Text>
+        <CustomCard
+          header={<Text fontSize="lg" fontWeight="bold">Endereço de Entrega</Text>}
+          body={
+            <VStack spacing={4} align="stretch">
+              <CustomInput
+                label="CEP"
+                placeholder="00000-000"
+                leftIcon={<MapPin />}
+                required={true}
+              />
+              
+              <CustomInput
+                label="Endereço"
+                placeholder="Rua, Avenida, etc."
+                leftIcon={<MapPin />}
+                required={true}
+              />
+              
+              <HStack spacing={4}>
+                <CustomInput
+                  label="Número"
+                  placeholder="123"
+                  type="number"
+                  required={true}
+                />
+                <CustomInput
+                  label="Complemento"
+                  placeholder="Apto, Casa, etc."
+                />
+              </HStack>
+              
+              <HStack spacing={4}>
+                <CustomInput
+                  label="Bairro"
+                  placeholder="Digite o bairro"
+                  leftIcon={<MapPin />}
+                  required={true}
+                />
+                <CustomInput
+                  label="Cidade"
+                  placeholder="Digite a cidade"
+                  leftIcon={<MapPin />}
+                  required={true}
+                />
+              </HStack>
+              
+              <CustomInput
+                label="Estado"
+                placeholder="Digite o estado"
+                leftIcon={<MapPin />}
+                required={true}
+              />
+            </VStack>
+          }
+        />
+      </Box>
+
+      {/* Barra de Pesquisa Avançada */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Barra de Pesquisa Avançada</Text>
+        <HStack spacing={3} p={4} bg="gray.50" borderRadius="md">
+          <CustomInput
+            placeholder="Buscar produtos..."
+            type="search"
+            leftIcon={<Search />}
+          />
+          
+          <CustomInput
+            placeholder="Filtrar por preço"
+            type="number"
+            leftIcon={<Filter />}
+          />
+          
+          <CustomInput
+            placeholder="Data inicial"
+            type="date"
+            leftIcon={<Calendar />}
+          />
+          
+          <CustomInput
+            placeholder="Data final"
+            type="date"
+            leftIcon={<Calendar />}
+          />
+        </HStack>
+      </Box>
+
+      {/* Formulário de Configurações */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Configurações de Perfil</Text>
+        <CustomCard
+          header={<Text fontSize="lg" fontWeight="bold">Configurações</Text>}
+          body={
+            <VStack spacing={4} align="stretch">
+              <CustomInput
+                label="Nome de Exibição"
+                placeholder="Como você quer ser chamado"
+                leftIcon={<User />}
+                tooltip="Este nome será exibido para outros usuários"
+              />
+              
+              <CustomInput
+                label="E-mail de Contato"
+                placeholder="E-mail para notificações"
+                type="email"
+                leftIcon={<Mail />}
+                required={true}
+              />
+              
+              <CustomInput
+                label="Telefone de Emergência"
+                placeholder="(11) 99999-9999"
+                type="tel"
+                leftIcon={<Phone />}
+                tooltip="Usado apenas em emergências"
+              />
+              
+              <CustomInput
+                label="URL do Site"
+                placeholder="https://meusite.com"
+                type="url"
+                leftIcon={<MapPin />}
+              />
+              
+              <CustomInput
+                label="Fuso Horário"
+                placeholder="UTC-3"
+                leftIcon={<Clock />}
+                tooltip="Fuso horário para agendamentos"
+              />
+            </VStack>
+          }
+        />
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎯 IntegrationWithCustomComponents: Integração com outros componentes custom */
+export const IntegrationWithCustomComponents = {
+    name: "Integração com Componentes Custom",
+    render: () => (_jsxs(VStack, { spacing: 8, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Formul\u00E1rio Completo" }), _jsx(CustomCard, { header: _jsx(Text, { fontSize: "lg", fontWeight: "bold", children: "Cadastro de Produto" }), body: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "Nome do Produto", placeholder: "Digite o nome do produto", leftIcon: _jsx(User, {}), required: true }), _jsx(CustomInput, { label: "SKU", placeholder: "C\u00F3digo do produto", leftIcon: _jsx(Star, {}), required: true })] }), _jsx(CustomInput, { label: "Pre\u00E7o", placeholder: "0,00", type: "number", leftIcon: _jsx(Star, {}), required: true }), _jsx(CustomSelect, { label: "Categoria", placeholder: "Selecione a categoria", options: [
+                                        { value: "eletronicos", label: "Eletrônicos" },
+                                        { value: "roupas", label: "Roupas" },
+                                        { value: "casa", label: "Casa e Jardim" },
+                                    ] }), _jsx(CustomAutocomplete, { label: "Tags", placeholder: "Digite as tags", options: [
+                                        { value: "novo", label: "Novo" },
+                                        { value: "promocao", label: "Promoção" },
+                                        { value: "lancamento", label: "Lançamento" },
+                                    ], allowCustomValue: true }), _jsx(CustomTextarea, { label: "Descri\u00E7\u00E3o", placeholder: "Descreva o produto...", rows: 4 }), _jsx(CustomCheckbox, { label: "Produto ativo", required: true })] }), footer: _jsxs(HStack, { justify: "flex-end", spacing: 2, children: [_jsx(CustomButton, { variant: "outline", backgroundColor: "transparent", color: "#3182ce", borderColor: "#3182ce", size: "sm", children: "Cancelar" }), _jsx(CustomButton, { variant: "primary", backgroundColor: "#3182ce", color: "#ffffff", size: "sm", children: "Salvar Produto" })] }) })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Dashboard com Filtros" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(HStack, { spacing: 3, p: 4, bg: "gray.50", borderRadius: "md", children: [_jsx(CustomInput, { placeholder: "Buscar usu\u00E1rios...", type: "search", leftIcon: _jsx(SearchIcon, {}) }), _jsx(CustomInput, { placeholder: "Filtrar por idade", type: "number", leftIcon: _jsx(Filter, {}) }), _jsx(CustomSelect, { placeholder: "Status", options: [
+                                            { value: "ativo", label: "Ativo" },
+                                            { value: "inativo", label: "Inativo" },
+                                            { value: "pendente", label: "Pendente" },
+                                        ] }), _jsx(CustomButton, { variant: "primary", backgroundColor: "#3182ce", color: "#ffffff", size: "sm", children: "Aplicar Filtros" })] }), _jsx(CustomTable, { data: [
+                                    { id: 1, name: "João Silva", email: "joao@email.com", status: "Ativo" },
+                                    { id: 2, name: "Maria Santos", email: "maria@email.com", status: "Inativo" },
+                                    { id: 3, name: "Pedro Costa", email: "pedro@email.com", status: "Ativo" },
+                                ], columns: [
+                                    { header: "Nome", accessor: "name" },
+                                    { header: "E-mail", accessor: "email" },
+                                    { header: "Status", accessor: "status" },
+                                ] })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Configura\u00E7\u00F5es Avan\u00E7adas" }), _jsx(CustomCard, { header: _jsx(Text, { fontSize: "lg", fontWeight: "bold", children: "Configura\u00E7\u00F5es do Sistema" }), body: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(HStack, { spacing: 4, children: [_jsx(CustomInput, { label: "URL da API", placeholder: "https://api.exemplo.com", type: "url", leftIcon: _jsx(MapPin, {}), required: true }), _jsx(CustomInput, { label: "Timeout (ms)", placeholder: "5000", type: "number", leftIcon: _jsx(Clock, {}) })] }), _jsx(CustomInput, { label: "Chave da API", placeholder: "Digite a chave da API", type: "password", leftIcon: _jsx(LockIcon, {}), required: true }), _jsx(CustomSelect, { label: "Ambiente", placeholder: "Selecione o ambiente", options: [
+                                        { value: "dev", label: "Desenvolvimento" },
+                                        { value: "staging", label: "Homologação" },
+                                        { value: "prod", label: "Produção" },
+                                    ] }), _jsx(CustomAutocomplete, { label: "Dom\u00EDnios Permitidos", placeholder: "Digite os dom\u00EDnios", options: [
+                                        { value: "exemplo.com", label: "exemplo.com" },
+                                        { value: "teste.com", label: "teste.com" },
+                                    ], allowCustomValue: true }), _jsx(CustomCheckbox, { label: "Habilitar logs detalhados" }), _jsx(CustomCheckbox, { label: "Modo de manuten\u00E7\u00E3o" })] }) })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Integração completa** do CustomInput com outros componentes custom do sistema Londrisoft.
+
+**Cenários demonstrados:**
+
+### 1. Formulário Completo
+- **Campos de entrada**: CustomInput para dados básicos
+- **Seleção**: CustomSelect para categorias
+- **Autocomplete**: CustomAutocomplete para tags
+- **Área de texto**: CustomTextarea para descrições
+- **Checkbox**: CustomCheckbox para opções
+- **Botões**: CustomButton para ações
+
+### 2. Dashboard com Filtros
+- **Busca**: CustomInput com tipo search
+- **Filtros numéricos**: CustomInput com tipo number
+- **Seleção**: CustomSelect para status
+- **Tabela**: CustomTable para exibição de dados
+- **Ações**: CustomButton para aplicar filtros
+
+### 3. Configurações Avançadas
+- **Campos de configuração**: URLs, timeouts, chaves
+- **Seleção de ambiente**: CustomSelect para ambientes
+- **Lista dinâmica**: CustomAutocomplete para domínios
+- **Opções booleanas**: CustomCheckbox para flags
+
+**Benefícios da integração:**
+- **Consistência visual**: Todos os componentes seguem o mesmo padrão
+- **Experiência unificada**: Navegação intuitiva entre elementos
+- **Acessibilidade**: ARIA labels e navegação por teclado
+- **Responsividade**: Adaptação automática a diferentes telas
+
+**Dicas de implementação:**
+- Use ícones que representem o tipo de dado
+- Mantenha consistência de cores por tipo de funcionalidade
+- Considere o contexto e hierarquia visual
+- Integre com o sistema de design Londrisoft
+`,
+            },
+            source: {
+                code: `
+import React from 'react';
+import { VStack, HStack, Box, Text } from '@chakra-ui/react';
+import { 
+  User, Star, Search, Filter, Lock, MapPin, Clock 
+} from 'lucide-react';
+import { CustomInput } from '../../../components/CustomInput';
+import CustomCard from '../../../components/CustomCard';
+import CustomSelect from '../../../components/CustomSelect';
+import { CustomAutocomplete } from '../../../components/CustomAutoComplete';
+import CustomTextarea from '../../../components/CustomTextarea';
+import { CustomCheckbox } from '../../../components/CustomCheckBox';
+import { CustomTable } from '../../../components/CustomTable';
+import { CustomButton } from '../../../components/CustomButton';
+
+const IntegrationExample = () => {
+  return (
+    <VStack spacing={8} align="stretch">
+      {/* Formulário Completo */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Formulário Completo</Text>
+        <CustomCard
+          header={<Text fontSize="lg" fontWeight="bold">Cadastro de Produto</Text>}
+          body={
+            <VStack spacing={4} align="stretch">
+              <HStack spacing={4}>
+                <CustomInput
+                  label="Nome do Produto"
+                  placeholder="Digite o nome do produto"
+                  leftIcon={<User />}
+                  required={true}
+                />
+                <CustomInput
+                  label="SKU"
+                  placeholder="Código do produto"
+                  leftIcon={<Star />}
+                  required={true}
+                />
+              </HStack>
+              
+              <CustomInput
+                label="Preço"
+                placeholder="0,00"
+                type="number"
+                leftIcon={<Star />}
+                required={true}
+              />
+              
+              <CustomSelect
+                label="Categoria"
+                placeholder="Selecione a categoria"
+                options={[
+                  { value: "eletronicos", label: "Eletrônicos" },
+                  { value: "roupas", label: "Roupas" },
+                  { value: "casa", label: "Casa e Jardim" },
+                ]}
+              />
+              
+              <CustomAutocomplete
+                label="Tags"
+                placeholder="Digite as tags"
+                options={[
+                  { value: "novo", label: "Novo" },
+                  { value: "promocao", label: "Promoção" },
+                  { value: "lancamento", label: "Lançamento" },
+                ]}
+                allowCustomValue={true}
+              />
+              
+              <CustomTextarea
+                label="Descrição"
+                placeholder="Descreva o produto..."
+                rows={4}
+              />
+              
+              <CustomCheckbox
+                label="Produto ativo"
+                required={true}
+              />
+            </VStack>
+          }
+          footer={
+            <HStack justify="flex-end" spacing={2}>
+              <CustomButton
+                variant="outline"
+                backgroundColor="transparent"
+                color="#3182ce"
+                borderColor="#3182ce"
+                size="sm"
+              >
+                Cancelar
+              </CustomButton>
+              <CustomButton
+                variant="primary"
+                backgroundColor="#3182ce"
+                color="#ffffff"
+                size="sm"
+              >
+                Salvar Produto
+              </CustomButton>
+            </HStack>
+          }
+        />
+      </Box>
+
+      {/* Dashboard com Filtros */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Dashboard com Filtros</Text>
+        <VStack spacing={4} align="stretch">
+          <HStack spacing={3} p={4} bg="gray.50" borderRadius="md">
+            <CustomInput
+              placeholder="Buscar usuários..."
+              type="search"
+              leftIcon={<Search />}
+            />
+            <CustomInput
+              placeholder="Filtrar por idade"
+              type="number"
+              leftIcon={<Filter />}
+            />
+            <CustomSelect
+              placeholder="Status"
+              options={[
+                { value: "ativo", label: "Ativo" },
+                { value: "inativo", label: "Inativo" },
+                { value: "pendente", label: "Pendente" },
+              ]}
+            />
+            <CustomButton
+              variant="primary"
+              backgroundColor="#3182ce"
+              color="#ffffff"
+              size="sm"
+            >
+              Aplicar Filtros
+            </CustomButton>
+          </HStack>
+          
+          <CustomTable
+            data={[
+              { id: 1, name: "João Silva", email: "joao@email.com", status: "Ativo" },
+              { id: 2, name: "Maria Santos", email: "maria@email.com", status: "Inativo" },
+              { id: 3, name: "Pedro Costa", email: "pedro@email.com", status: "Ativo" },
+            ]}
+            columns={[
+              { header: "Nome", accessor: "name" },
+              { header: "E-mail", accessor: "email" },
+              { header: "Status", accessor: "status" },
+            ]}
+          />
+        </VStack>
+      </Box>
+
+      {/* Configurações Avançadas */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Configurações Avançadas</Text>
+        <CustomCard
+          header={<Text fontSize="lg" fontWeight="bold">Configurações do Sistema</Text>}
+          body={
+            <VStack spacing={4} align="stretch">
+              <HStack spacing={4}>
+                <CustomInput
+                  label="URL da API"
+                  placeholder="https://api.exemplo.com"
+                  type="url"
+                  leftIcon={<MapPin />}
+                  required={true}
+                />
+                <CustomInput
+                  label="Timeout (ms)"
+                  placeholder="5000"
+                  type="number"
+                  leftIcon={<Clock />}
+                />
+              </HStack>
+              
+              <CustomInput
+                label="Chave da API"
+                placeholder="Digite a chave da API"
+                type="password"
+                leftIcon={<Lock />}
+                required={true}
+              />
+              
+              <CustomSelect
+                label="Ambiente"
+                placeholder="Selecione o ambiente"
+                options={[
+                  { value: "dev", label: "Desenvolvimento" },
+                  { value: "staging", label: "Homologação" },
+                  { value: "prod", label: "Produção" },
+                ]}
+              />
+              
+              <CustomAutocomplete
+                label="Domínios Permitidos"
+                placeholder="Digite os domínios"
+                options={[
+                  { value: "exemplo.com", label: "exemplo.com" },
+                  { value: "teste.com", label: "teste.com" },
+                ]}
+                allowCustomValue={true}
+              />
+              
+              <CustomCheckbox
+                label="Habilitar logs detalhados"
+              />
+              
+              <CustomCheckbox
+                label="Modo de manutenção"
+              />
+            </VStack>
+          }
+        />
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};