catastyle 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Phillip
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,211 @@
+# Catastyle
+
+Design System reutilizável baseado em **React** e **styled-components**, com temas claro/escuro, componentes acessíveis e suporte a customização via arquivos de configuração no projeto consumidor.
+
+## Instalação
+
+```bash
+npm install catastyle react react-dom styled-components react-router-dom
+```
+
+**Peer dependencies:** `react` (^18 ou ^19), `react-dom`, `styled-components`, `react-router-dom` (^6 ou ^7). O projeto consumidor deve instalá-las; o Catastyle não as inclui em `dependencies` para evitar duplicação.
+
+### Projetos com Vite
+
+Em projetos que usam **Vite**, configure `resolve.dedupe` para garantir uma única instância de React e styled-components (evita erros de contexto e duplicação de tema):
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom', 'styled-components'],
+  },
+})
+```
+
+## Uso básico
+
+Envolva sua aplicação com `ThemeProvider` e `GlobalStyle`:
+
+```tsx
+import {
+  ThemeProvider,
+  DarkTheme,
+  LightTheme,
+  GlobalStyle,
+  MainContainer,
+  Button,
+  Title,
+  Text,
+} from 'catastyle'
+
+function App() {
+  const [theme, setTheme] = useState(DarkTheme)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <MainContainer>
+        <Title>Olá, Catastyle</Title>
+        <Text>Design system pronto para uso.</Text>
+        <Button>Clique aqui</Button>
+      </MainContainer>
+    </ThemeProvider>
+  )
+}
+```
+
+## Componentes
+
+| Componente     | Descrição                                                                 |
+|----------------|----------------------------------------------------------------------------|
+| `Button`       | Botão com variantes de estilo                                             |
+| `Checkbox`     | Caixa de seleção                                                          |
+| `Footer`       | Rodapé de página; aceita `children` para conteúdo customizável            |
+| `Input`        | Campo de texto (inclui toggle de visibilidade para tipo password)         |
+| `Label`        | Rótulo para formulários                                                   |
+| `Link`         | Link externo ou interno (integra com react-router-dom via `$isInternal`)   |
+| `Logo`         | Logo com suporte a tema claro/escuro                                      |
+| `Main`         | Container principal com ThemeProvider, GlobalStyle e ThemeButton          |
+| `Text`         | Parágrafo ou texto inline (`as="p"` ou `as="span"`)                      |
+| `ThemeButton`  | Botão para alternar tema claro/escuro                                     |
+| `Title`        | Título                                                                     |
+
+### Exemplo: Footer customizável
+
+O `Footer` recebe `children`; o conteúdo fica a cargo do projeto consumidor:
+
+```tsx
+import { Footer, Text } from 'catastyle'
+
+<Footer>
+  <Text as="p">© {new Date().getFullYear()} Minha Empresa - Todos os direitos reservados</Text>
+</Footer>
+```
+
+## Temas
+
+- **`DarkTheme`** e **`LightTheme`** — temas padrão do design system.
+- Use `ThemeProvider` do `styled-components` (re-exportado) para aplicar o tema.
+- Troca de tema: altere o objeto passado para `theme` no `ThemeProvider` (ex.: entre `DarkTheme` e `LightTheme`).
+
+## Customização (projeto consumidor)
+
+Após instalar o pacote, o script **postinstall** cria em seu projeto a pasta de configuração:
+
+```
+src/catastyle/config/
+├── theme.config.ts
+└── logo.config.ts
+```
+
+### Temas customizados
+
+Edite `src/catastyle/config/theme.config.ts` e defina `darkTheme` e/ou `lightTheme`. Se forem `null`, os temas padrão do Catastyle são usados.
+
+Exemplo de tema customizado:
+
+```ts
+import type { DefaultTheme } from 'styled-components'
+
+export const darkTheme: DefaultTheme | null = {
+  primaryColor: '#EBFFEB',
+  secondaryColor: '#538A53',
+  tertiaryColor: '#669966',
+  bgColor: '#011F1F',
+  linkColor: '#33CC66',
+}
+
+export const lightTheme: DefaultTheme | null = {
+  primaryColor: '#011F1F',
+  secondaryColor: '#33CC66',
+  tertiaryColor: '#538A53',
+  bgColor: '#EBFFEB',
+  linkColor: '#006633',
+}
+```
+
+### Logos customizados
+
+Os **logos padrão** do Catastyle vêm embutidos no pacote (data URL) e funcionam em qualquer bundler (Vite, Webpack, etc.) sem configuração extra.
+
+Para usar seus próprios SVGs, edite `src/catastyle/config/logo.config.ts` e defina os caminhos. Use `'default'` para manter os logos do Catastyle. Os caminhos devem ser os que o seu projeto consegue resolver (ex.: caminho público ou URL).
+
+```ts
+export const logoLight: string = '/src/assets/logo-light.svg'
+export const logoDark: string = '/src/assets/logo-dark.svg'
+```
+
+## Exports adicionais
+
+- **Estilos globais:** `GlobalStyle`, `MainContainer`
+- **Tipos:** `WidthType`, `FontSizeType`, `FontSize`, `BreakpointType`
+- **Utilitários:** `fontSizeToRem`, `mdScreen`, `smScreen`
+
+## Testes
+
+O projeto usa **Vitest** e **React Testing Library** para testes unitários dos componentes e utilitários.
+
+```bash
+# Rodar todos os testes (modo watch)
+npm test
+
+# Rodar testes unitários uma vez
+npm run test:unit
+
+# Rodar com cobertura
+npm run test:coverage
+```
+
+## Desenvolvimento
+
+```bash
+# Instalar dependências
+npm install
+
+# Build da biblioteca
+npm run build
+
+# Modo watch (rebuild ao editar)
+npm run dev
+
+# Lint (verificar / corrigir)
+npm run lint:check
+npm run lint
+
+# Testes
+npm run test:unit
+
+# Storybook (documentação e exemplos dos componentes)
+npm run storybook
+```
+
+## CI/CD
+
+O repositório usa **GitHub Actions** para garantir qualidade em todo push e pull request:
+
+- **Lint** — `npm run lint:check`
+- **Testes unitários** — `npm run test:unit`
+- **Build** — `npm run build`
+
+O workflow está em `.github/workflows/ci.yml` e roda em qualquer branch.
+
+## Estrutura do pacote
+
+- **`main`:** `./dist/index.js` (CommonJS)
+- **`module`:** `./dist/index.mjs` (ESM)
+- **`types`:** `./dist/index.d.ts`
+
+## Sobre o projeto
+
+Projeto **autoral**, desenvolvido com intuito de **estudo** e de criar uma biblioteca reutilizável que possa ser **integrada a outros projetos**. O Catastyle é mantido de forma independente e está disponível para uso e contribuição.
+
+- Repositório: [github.com/Phillipml/catastyle](https://github.com/Phillipml/catastyle)
+
+## Licença
+
+ISC

package/dist/index.d.mts

@@ -0,0 +1,120 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { HTMLAttributes } from 'react';
+import { DefaultTheme } from 'styled-components/';
+import * as styled_components from 'styled-components';
+export { ThemeProvider } from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type WidthType = {
+    $lgWidth?: number | undefined;
+    $mdWidth?: number | undefined;
+    $smWidth?: number | undefined;
+};
+
+type FontSize = 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40;
+type FontSizeType = {
+    $lgFontSize?: FontSize;
+    $mdFontSize?: FontSize;
+    $smFontSize?: FontSize;
+};
+declare const fontSizeToRem: (size: FontSize) => string;
+
+declare const mdScreen: string;
+declare const smScreen: string;
+type BreakpointType = {
+    mdScreen?: boolean;
+    smScreen?: boolean;
+};
+
+type ButtonType = {
+    children: React.ReactNode;
+    id?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    as?: React.ElementType;
+    type?: 'button' | 'submit' | 'reset';
+} & WidthType & FontSizeType;
+declare const Button: ({ children, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
+
+type CheckboxType = {
+    id: string;
+    name: string;
+    checked?: boolean;
+    $disabled?: boolean;
+    children: string;
+    display?: string;
+    onClick?: () => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+} & WidthType & FontSizeType;
+declare const Checkbox: ({ id, name, checked, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
+
+declare const Footer: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type InputType = {
+    type: string;
+    id: string;
+    name: string;
+    placeholder?: string;
+    value?: string;
+    display?: string;
+    $disabled?: boolean;
+    $required?: boolean;
+    onClick?: () => void;
+    onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
+} & WidthType & FontSizeType;
+declare const Input: ({ type, id, name, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
+
+type LabelType = {
+    htmlFor: string;
+    children: react__default.ReactNode;
+    color?: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Label: ({ htmlFor, children, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
+
+type LinkType = {
+    href?: string;
+    to?: string;
+    children: React.ReactNode;
+    $target?: '_blank' | '_self';
+    $isInternal?: boolean;
+} & FontSizeType;
+declare const Link: ({ href, to, children, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
+
+type LogoProps = WidthType & HTMLAttributes<HTMLDivElement>;
+declare const Logo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+
+type MainType = {
+    children: React.ReactNode;
+};
+declare const Main: ({ children }: MainType) => react_jsx_runtime.JSX.Element;
+
+type TextType = {
+    as: 'p' | 'span';
+    children: React.ReactNode;
+    color?: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Text: ({ as, children, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
+
+type ThemeButtonType = {
+    onClick?: () => void;
+};
+declare const ThemeButton: ({ onClick }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
+
+type TitleType = {
+    children: string;
+    color: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Title: ({ children, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
+
+declare const DarkTheme: DefaultTheme;
+
+declare const LightTheme: DefaultTheme;
+
+declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare const MainContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+
+export { type BreakpointType, Button, Checkbox, DarkTheme, type FontSize, type FontSizeType, Footer, GlobalStyle, Input, Label, LightTheme, Link, Logo, Main, MainContainer, Text, ThemeButton, Title, type WidthType, fontSizeToRem, mdScreen, smScreen };

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { HTMLAttributes } from 'react';
+import { DefaultTheme } from 'styled-components/';
+import * as styled_components from 'styled-components';
+export { ThemeProvider } from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type WidthType = {
+    $lgWidth?: number | undefined;
+    $mdWidth?: number | undefined;
+    $smWidth?: number | undefined;
+};
+
+type FontSize = 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40;
+type FontSizeType = {
+    $lgFontSize?: FontSize;
+    $mdFontSize?: FontSize;
+    $smFontSize?: FontSize;
+};
+declare const fontSizeToRem: (size: FontSize) => string;
+
+declare const mdScreen: string;
+declare const smScreen: string;
+type BreakpointType = {
+    mdScreen?: boolean;
+    smScreen?: boolean;
+};
+
+type ButtonType = {
+    children: React.ReactNode;
+    id?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    as?: React.ElementType;
+    type?: 'button' | 'submit' | 'reset';
+} & WidthType & FontSizeType;
+declare const Button: ({ children, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
+
+type CheckboxType = {
+    id: string;
+    name: string;
+    checked?: boolean;
+    $disabled?: boolean;
+    children: string;
+    display?: string;
+    onClick?: () => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+} & WidthType & FontSizeType;
+declare const Checkbox: ({ id, name, checked, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
+
+declare const Footer: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type InputType = {
+    type: string;
+    id: string;
+    name: string;
+    placeholder?: string;
+    value?: string;
+    display?: string;
+    $disabled?: boolean;
+    $required?: boolean;
+    onClick?: () => void;
+    onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
+} & WidthType & FontSizeType;
+declare const Input: ({ type, id, name, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
+
+type LabelType = {
+    htmlFor: string;
+    children: react__default.ReactNode;
+    color?: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Label: ({ htmlFor, children, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
+
+type LinkType = {
+    href?: string;
+    to?: string;
+    children: React.ReactNode;
+    $target?: '_blank' | '_self';
+    $isInternal?: boolean;
+} & FontSizeType;
+declare const Link: ({ href, to, children, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
+
+type LogoProps = WidthType & HTMLAttributes<HTMLDivElement>;
+declare const Logo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+
+type MainType = {
+    children: React.ReactNode;
+};
+declare const Main: ({ children }: MainType) => react_jsx_runtime.JSX.Element;
+
+type TextType = {
+    as: 'p' | 'span';
+    children: React.ReactNode;
+    color?: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Text: ({ as, children, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
+
+type ThemeButtonType = {
+    onClick?: () => void;
+};
+declare const ThemeButton: ({ onClick }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
+
+type TitleType = {
+    children: string;
+    color: 'primary' | 'secondary';
+} & FontSizeType;
+declare const Title: ({ children, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
+
+declare const DarkTheme: DefaultTheme;
+
+declare const LightTheme: DefaultTheme;
+
+declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare const MainContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+
+export { type BreakpointType, Button, Checkbox, DarkTheme, type FontSize, type FontSizeType, Footer, GlobalStyle, Input, Label, LightTheme, Link, Logo, Main, MainContainer, Text, ThemeButton, Title, type WidthType, fontSizeToRem, mdScreen, smScreen };