lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/DatePicker/CustomDatePicker.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DatePickerField } from "../../../../components/DatePicker/CustomDatePicker";
+declare const meta: Meta<typeof DatePickerField>;
+export default meta;
+type Story = StoryObj<typeof DatePickerField>;
+/** 🎯 Default: Exemplo básico do DatePicker */
+export declare const Default: Story;
+/** 🎨 Variants: Demonstração de diferentes variantes */
+export declare const Variants: Story;
+/** 🎨 States: Demonstração de diferentes estados */
+export declare const States: Story;
+/** 🎨 CloseBlur: Demonstração do comportamento closeBlur */
+export declare const CloseBlur: Story;
+/** 🎨 WithInput: Demonstração com input editável */
+export declare const WithInput: Story;
+/** 🎨 AdvancedFeatures: Funcionalidades avançadas */
+export declare const AdvancedFeatures: Story;

package/dist/stories/Londrisoft/Components/DatePicker/CustomDatePicker.stories.js

@@ -0,0 +1,653 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, VStack } from "@chakra-ui/react";
+import { DatePickerField } from "../../../../components/DatePicker/CustomDatePicker";
+const meta = {
+    title: "Londrisoft/Components/DatePicker",
+    component: DatePickerField,
+    tags: ["autodocs"],
+    args: {
+        variant: "simple",
+        label: "Selecione uma data",
+        placeholder: "Selecione o período",
+        required: false,
+        error: "",
+        disabled: false,
+        showInput: false,
+        withFormControl: true,
+        status: false,
+        closeBlur: false,
+        name: "",
+        defaultValue: "",
+    },
+    argTypes: {
+        variant: {
+            control: { type: "select", options: ["simple", "advanced"] },
+            description: "Variante do DatePicker: simple (data única) ou advanced (range de datas com presets).",
+            table: { category: "Behavior" },
+        },
+        name: {
+            control: "text",
+            description: "Nome do campo (para qualquer biblioteca de formulário).",
+            table: { category: "Content" },
+        },
+        label: {
+            control: "text",
+            description: "Texto do label exibido acima do campo.",
+            table: { category: "Content" },
+        },
+        placeholder: {
+            control: "text",
+            description: "Texto exibido quando nenhuma data está selecionada.",
+            table: { category: "Content" },
+        },
+        value: {
+            control: "text",
+            description: "Valor da data (string ISO para simple ou array de strings para advanced).",
+            table: { category: "State" },
+        },
+        onChange: {
+            action: "changed",
+            description: "Função callback chamada quando a data é alterada.",
+            table: { category: "Events" },
+        },
+        minDate: {
+            control: "text",
+            description: "Data mínima permitida (formato ISO string).",
+            table: { category: "Validation" },
+        },
+        maxDate: {
+            control: "text",
+            description: "Data máxima permitida (formato ISO string).",
+            table: { category: "Validation" },
+        },
+        required: {
+            control: "boolean",
+            description: "Adiciona asterisco vermelho indicando campo obrigatório.",
+            table: { category: "Validation" },
+        },
+        error: {
+            control: "text",
+            description: "Mensagem de erro exibida abaixo do campo.",
+            table: { category: "State" },
+        },
+        disabled: {
+            control: "boolean",
+            description: "Desabilita o campo de data.",
+            table: { category: "State" },
+        },
+        defaultValue: {
+            control: "text",
+            description: "Valor padrão da data (formato ISO string).",
+            table: { category: "State" },
+        },
+        showInput: {
+            control: "boolean",
+            description: "Se true, mostra input editável ao invés de botão com calendário.",
+            table: { category: "Behavior" },
+        },
+        withFormControl: {
+            control: "boolean",
+            description: "Envolve o campo em FormControl para exibir erros.",
+            table: { category: "Behavior" },
+        },
+        closeBlur: {
+            control: "boolean",
+            description: "Se true, fecha o popover quando perde o foco (blur).",
+            table: { category: "Behavior" },
+        },
+        status: {
+            control: "boolean",
+            description: "Para indicar estado de erro visual.",
+            table: { category: "State" },
+        },
+        color: {
+            control: "color",
+            description: "Cor do texto do botão/input.",
+            table: { category: "Styling" },
+        },
+        backgroundColor: {
+            control: "color",
+            description: "Cor de fundo do botão/input.",
+            table: { category: "Styling" },
+        },
+        borderColor: {
+            control: "color",
+            description: "Cor da borda do botão/input.",
+            table: { category: "Styling" },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+**DatePickerField** é um componente de seleção de data baseado no react-datepicker, otimizado para formulários e interfaces de usuário modernas.
+
+## Características Principais
+
+- **Duas Variantes**: Simple (data única) e Advanced (range de datas com presets)
+- **Validação Integrada**: Sistema de validação com exibição de erros e estados visuais
+- **Input Editável**: Opção de mostrar input editável ou botão com calendário
+- **Presets Inteligentes**: Modo advanced com presets predefinidos (Hoje, Esta semana, Este mês, etc.)
+- **Controle de Foco**: Parâmetro \`closeBlur\` para controlar o fechamento do popover ao perder foco
+- **Valor Padrão**: Suporte a \`defaultValue\` para inicializar o campo com uma data
+- **Nome do Campo**: Suporte a \`name\` para integração com bibliotecas de formulário
+- **Acessibilidade**: Implementação completa de ARIA labels e navegação por teclado
+- **Integração com Tema**: Compatível com o sistema de design Londrisoft
+
+## Casos de Uso Comuns
+
+- **Formulários**: Seleção de datas de nascimento, eventos, prazos
+- **Filtros**: Seleção de períodos para relatórios e dashboards
+- **Agendamentos**: Seleção de datas para agendamentos e reservas
+- **Validação**: Validação de períodos com datas mínimas e máximas
+
+## Variantes Disponíveis
+
+- **simple**: Seleção de data única
+- **advanced**: Seleção de range de datas com presets predefinidos
+        `,
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "#root",
+        },
+    },
+};
+export default meta;
+/** 🎯 Default: Exemplo básico do DatePicker */
+export const Default = {
+    name: "Padrão",
+    render: () => {
+        const [value, setValue] = useState("");
+        return (_jsx(Box, { maxWidth: "400px", children: _jsx(DatePickerField, { label: "Selecione uma data", placeholder: "Selecione o per\u00EDodo", value: value, onChange: (newValue) => {
+                    setValue(newValue);
+                } }) }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Exemplo básico** do DatePickerField com configuração padrão.
+
+**Características:**
+- Variante simple (data única)
+- Label descritivo
+- Placeholder informativo
+- Valor controlado
+- Sem erros ou validações
+
+**Casos de uso:**
+- Campos de data simples
+- Formulários básicos
+- Seleção de datas não críticas
+- 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, { useState } from 'react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const BasicDatePicker = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <DatePickerField
+      label="Selecione uma data"
+      placeholder="Selecione o período"
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue as string);
+      }}
+    />
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 Variants: Demonstração de diferentes variantes */
+export const Variants = {
+    name: "Variantes",
+    render: () => {
+        const [simpleValue, setSimpleValue] = useState("");
+        const [advancedValue, setAdvancedValue] = useState([null, null]);
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Simple - Data \u00DAnica" }), _jsx(DatePickerField, { variant: "simple", label: "Data de nascimento", placeholder: "Selecione uma data", value: simpleValue, onChange: (newValue) => {
+                                setSimpleValue(newValue);
+                            } })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Advanced - Range de Datas" }), _jsx(DatePickerField, { variant: "advanced", label: "Per\u00EDodo de busca", placeholder: "Selecione o per\u00EDodo", value: advancedValue, onChange: (newValue) => {
+                                setAdvancedValue(newValue);
+                            } })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** das diferentes variantes do DatePickerField.
+
+**Variantes mostradas:**
+- **Simple**: Seleção de data única
+- **Advanced**: Seleção de range de datas com presets predefinidos
+
+**Casos de uso por variante:**
+- **Simple**: Datas de nascimento, eventos únicos, prazos
+- **Advanced**: Períodos de relatórios, filtros de dashboard, busca por intervalo
+
+**Dicas de design:**
+- Use Simple para datas individuais
+- Use Advanced quando precisar de períodos ou filtros
+- Mantenha consistência visual entre campos relacionados
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const DatePickerVariants = () => {
+  const [simpleValue, setSimpleValue] = useState('');
+  const [advancedValue, setAdvancedValue] = useState<[string | null, string | null]>([null, null]);
+
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Simple - Data Única</Text>
+        <DatePickerField
+          variant="simple"
+          label="Data de nascimento"
+          placeholder="Selecione uma data"
+          value={simpleValue}
+          onChange={(newValue) => {
+            setSimpleValue(newValue as string);
+          }}
+        />
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Advanced - Range de Datas</Text>
+        <DatePickerField
+          variant="advanced"
+          label="Período de busca"
+          placeholder="Selecione o período"
+          value={advancedValue}
+          onChange={(newValue) => {
+            setAdvancedValue(newValue as [string | null, string | null]);
+          }}
+        />
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 States: Demonstração de diferentes estados */
+export const States = {
+    name: "Estados",
+    render: () => {
+        const [value1, setValue1] = useState("");
+        const [value2, setValue2] = useState("");
+        const [value3, setValue3] = useState("");
+        const [value4, setValue4] = useState("");
+        const [value5, setValue5] = useState("2024-01-15T12:00:00.000Z");
+        return (_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(DatePickerField, { label: "Campo Normal", placeholder: "Estado normal", value: value1, onChange: (newValue) => {
+                                        setValue1(newValue);
+                                    } }), _jsx(DatePickerField, { label: "Campo com Erro", placeholder: "Campo com erro", error: "Este campo tem um erro de valida\u00E7\u00E3o", value: value2, onChange: (newValue) => {
+                                        setValue2(newValue);
+                                    } }), _jsx(DatePickerField, { label: "Campo Desabilitado", placeholder: "Campo desabilitado", disabled: true, value: value5 }), _jsx(DatePickerField, { label: "Campo Obrigat\u00F3rio", placeholder: "Campo obrigat\u00F3rio", required: true, value: value4, onChange: (newValue) => {
+                                        setValue4(newValue);
+                                    } })] })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Valida\u00E7\u00E3o com Datas M\u00EDnimas e M\u00E1ximas" }), _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(DatePickerField, { label: "Data com M\u00EDnima", placeholder: "Data m\u00EDnima: 2024-01-01", minDate: "2024-01-01", value: value3, onChange: (newValue) => {
+                                        setValue3(newValue);
+                                    } }), _jsx(DatePickerField, { label: "Data com M\u00E1xima", placeholder: "Data m\u00E1xima: 2024-12-31", maxDate: "2024-12-31", value: value3, onChange: (newValue) => {
+                                        setValue3(newValue);
+                                    } }), _jsx(DatePickerField, { label: "Data com Range", placeholder: "Entre 2024-01-01 e 2024-12-31", minDate: "2024-01-01", maxDate: "2024-12-31", value: value3, onChange: (newValue) => {
+                                        setValue3(newValue);
+                                    } })] })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** dos diferentes estados do DatePickerField.
+
+**Estados mostrados:**
+- **Validação**: Normal, erro, desabilitado, obrigatório
+- **Validação com Datas**: Mínima, máxima, range completo
+
+**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
+- **Validação**: Limites de datas para períodos específicos
+
+**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 minDate e maxDate para limitar períodos válidos
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const DatePickerStates = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Estados de Validação</Text>
+        <VStack spacing={4} align="stretch">
+          <DatePickerField
+            label="Campo Normal"
+            placeholder="Estado normal"
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+          <DatePickerField
+            label="Campo com Erro"
+            placeholder="Campo com erro"
+            error="Este campo tem um erro de validação"
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+          <DatePickerField
+            label="Campo Desabilitado"
+            placeholder="Campo desabilitado"
+            disabled={true}
+            value="2024-01-15T12:00:00.000Z"
+          />
+          <DatePickerField
+            label="Campo Obrigatório"
+            placeholder="Campo obrigatório"
+            required={true}
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+        </VStack>
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Validação com Datas Mínimas e Máximas</Text>
+        <VStack spacing={4} align="stretch">
+          <DatePickerField
+            label="Data com Mínima"
+            placeholder="Data mínima: 2024-01-01"
+            minDate="2024-01-01"
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+          <DatePickerField
+            label="Data com Máxima"
+            placeholder="Data máxima: 2024-12-31"
+            maxDate="2024-12-31"
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+          <DatePickerField
+            label="Data com Range"
+            placeholder="Entre 2024-01-01 e 2024-12-31"
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            value={value}
+            onChange={(newValue) => setValue(newValue as string)}
+          />
+        </VStack>
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 CloseBlur: Demonstração do comportamento closeBlur */
+export const CloseBlur = {
+    name: "Comportamento CloseBlur",
+    render: () => {
+        const [value1, setValue1] = useState("");
+        const [value2, setValue2] = useState("");
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsxs(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: ["closeBlur=", false, " (Padr\u00E3o)"] }), _jsx(Text, { fontSize: "sm", color: "gray.600", mb: 4, children: "O popover n\u00E3o fecha quando perde o foco. O usu\u00E1rio precisa clicar fora ou no bot\u00E3o de fechar." }), _jsx(DatePickerField, { variant: "simple", label: "Data sem closeBlur", placeholder: "Selecione uma data", closeBlur: false, value: value1, onChange: (newValue) => {
+                                setValue1(newValue);
+                            } })] }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: ["closeBlur=", true] }), _jsx(Text, { fontSize: "sm", color: "gray.600", mb: 4, children: "O popover fecha automaticamente quando perde o foco (blur). \u00DAtil para melhorar a UX em formul\u00E1rios." }), _jsx(DatePickerField, { variant: "simple", label: "Data com closeBlur", placeholder: "Selecione uma data", closeBlur: true, value: value2, onChange: (newValue) => {
+                                setValue2(newValue);
+                            } })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** do comportamento do parâmetro \`closeBlur\` no DatePickerField.
+
+**Comportamentos mostrados:**
+- **closeBlur={false}**: Popover não fecha quando perde o foco (padrão)
+- **closeBlur={true}**: Popover fecha automaticamente quando perde o foco
+
+**Casos de uso:**
+- **closeBlur={false}**: Quando o usuário precisa interagir com o calendário por mais tempo
+- **closeBlur={true}**: Para melhorar a UX em formulários, fechando automaticamente após seleção
+
+**Dicas de implementação:**
+- Use \`closeBlur={true}\` em formulários para melhorar a experiência
+- Use \`closeBlur={false}\` quando o usuário precisa navegar entre meses
+- Considere o contexto da aplicação ao escolher o comportamento
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const CloseBlurExample = () => {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>closeBlur={false} (Padrão)</Text>
+        <DatePickerField
+          variant="simple"
+          label="Data sem closeBlur"
+          placeholder="Selecione uma data"
+          closeBlur={false}
+          value={value1}
+          onChange={(newValue) => setValue1(newValue as string)}
+        />
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>closeBlur={true}</Text>
+        <DatePickerField
+          variant="simple"
+          label="Data com closeBlur"
+          placeholder="Selecione uma data"
+          closeBlur={true}
+          value={value2}
+          onChange={(newValue) => setValue2(newValue as string)}
+        />
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 WithInput: Demonstração com input editável */
+export const WithInput = {
+    name: "Com Input Editável",
+    render: () => {
+        const [value1, setValue1] = useState("");
+        const [value2, setValue2] = useState("");
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsxs(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: ["Com Input Edit\u00E1vel (showInput=", true, ")"] }), _jsx(DatePickerField, { variant: "simple", label: "Data de in\u00EDcio", placeholder: "dd/mm/aaaa", showInput: true, value: value1, onChange: (newValue) => {
+                                setValue1(newValue);
+                            } })] }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: ["Com Bot\u00E3o e Calend\u00E1rio (showInput=", false, ")"] }), _jsx(DatePickerField, { variant: "simple", label: "Data de t\u00E9rmino", placeholder: "Selecione o per\u00EDodo", showInput: false, value: value2, onChange: (newValue) => {
+                                setValue2(newValue);
+                            } })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** do DatePickerField com input editável e botão com calendário.
+
+**Modos mostrados:**
+- **showInput={true}**: Input editável onde o usuário pode digitar a data diretamente
+- **showInput={false}**: Botão com calendário popup (padrão)
+
+**Casos de uso:**
+- **Input Editável**: Quando o usuário precisa digitar datas rapidamente
+- **Botão com Calendário**: Quando a visualização do calendário é preferida
+
+**Dicas de design:**
+- Use input editável para usuários que digitam rápido
+- Use botão com calendário para melhor visualização
+- Mantenha consistência na mesma interface
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const DatePickerWithInput = () => {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+
+  return (
+    <VStack spacing={6} align="stretch">
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Com Input Editável</Text>
+        <DatePickerField
+          variant="simple"
+          label="Data de início"
+          placeholder="dd/mm/aaaa"
+          showInput={true}
+          value={value1}
+          onChange={(newValue) => setValue1(newValue as string)}
+        />
+      </Box>
+
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={3}>Com Botão e Calendário</Text>
+        <DatePickerField
+          variant="simple"
+          label="Data de término"
+          placeholder="Selecione o período"
+          showInput={false}
+          value={value2}
+          onChange={(newValue) => setValue2(newValue as string)}
+        />
+      </Box>
+    </VStack>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🎨 AdvancedFeatures: Funcionalidades avançadas */
+export const AdvancedFeatures = {
+    name: "Funcionalidades Avançadas",
+    render: () => {
+        const [value, setValue] = useState([
+            null,
+            null,
+        ]);
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Modo Advanced com Presets" }), _jsx(Text, { fontSize: "sm", color: "gray.600", mb: 4, children: "O modo advanced oferece presets predefinidos como \"Hoje\", \"Esta semana\", \"Este m\u00EAs\", etc., al\u00E9m de permitir sele\u00E7\u00E3o manual de per\u00EDodo." }), _jsx(DatePickerField, { variant: "advanced", label: "Per\u00EDodo de an\u00E1lise", placeholder: "Selecione o per\u00EDodo", value: value, onChange: (newValue) => {
+                                setValue(newValue);
+                            } })] }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Presets Dispon\u00EDveis" }), _jsxs(VStack, { spacing: 2, align: "stretch", fontSize: "sm", color: "gray.600", children: [_jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Manual" }), ": Digite as datas manualmente"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Hoje" }), ": Seleciona a data atual"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Esta semana" }), ": Segunda a domingo da semana atual"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Semana passada" }), ": Segunda a domingo da semana anterior"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Este m\u00EAs" }), ": Primeiro ao \u00FAltimo dia do m\u00EAs atual"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "M\u00EAs passado" }), ": Primeiro ao \u00FAltimo dia do m\u00EAs anterior"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Selecionar m\u00EAs" }), ": Seleciona um m\u00EAs espec\u00EDfico"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Per\u00EDodo customizado" }), ": Permite selecionar qualquer per\u00EDodo"] })] })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** das funcionalidades avançadas do DatePickerField.
+
+**Funcionalidades mostradas:**
+- **Modo Advanced**: Range de datas com presets predefinidos
+- **Presets Inteligentes**: Seleção rápida de períodos comuns
+- **Seleção Manual**: Permite digitar datas manualmente
+- **Seleção de Mês**: Visualização mensal para seleção rápida
+
+**Presets Disponíveis:**
+- **Manual**: Digite as datas manualmente
+- **Hoje**: Seleciona a data atual
+- **Esta semana**: Segunda a domingo da semana atual
+- **Semana passada**: Segunda a domingo da semana anterior
+- **Este mês**: Primeiro ao último dia do mês atual
+- **Mês passado**: Primeiro ao último dia do mês anterior
+- **Selecionar mês**: Seleciona um mês específico
+- **Período customizado**: Permite selecionar qualquer período
+
+**Casos de uso:**
+- **Dashboards**: Filtros rápidos de período
+- **Relatórios**: Seleção de períodos de análise
+- **Filtros**: Busca por intervalo de datas
+- **Analytics**: Períodos pré-definidos para métricas
+
+**Dicas de implementação:**
+- Use presets para melhorar a UX
+- Mantenha consistência com outros filtros
+- Considere validação de períodos
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { VStack, Box, Text } from '@chakra-ui/react';
+import { DatePickerField } from '../../../components/DatePicker/CustomDatePicker';
+
+const AdvancedDatePicker = () => {
+  const [value, setValue] = useState<[string | null, string | null]>([null, null]);
+
+  return (
+    <DatePickerField
+      variant="advanced"
+      label="Período de análise"
+      placeholder="Selecione o período"
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue as [string | null, string | null]);
+      }}
+    />
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};

package/dist/stories/Londrisoft/Components/Pagination/CustomPagination.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CustomPagination } from "../../../../components/Pagination/CustomPagination";
+declare const meta: Meta<typeof CustomPagination>;
+export default meta;
+type Story = StoryObj<typeof CustomPagination>;
+/** 🎯 Default: Exemplo básico do CustomPagination */
+export declare const Default: Story;
+/** 🎨 Variations: Demonstração de diferentes variações */
+export declare const Variations: Story;
+/** 📊 States: Demonstração de diferentes estados */
+export declare const States: Story;
+/** 🔍 Edge Cases: Casos extremos e edge cases */
+export declare const EdgeCases: Story;
+/** ♿ Accessibility: Demonstração de recursos de acessibilidade */
+export declare const Accessibility: Story;
+/** 📋 Integração com Tabela: Exemplo prático */
+export declare const WithTable: Story;