karsten-design-system 2.0.24 → 2.0.26

package/README.md

@@ -1,230 +1,230 @@
-# Karsten Design System
-
-Biblioteca de componentes React estilizados para projetos da Karsten, construída sobre PrimeReact, Tailwind e Vite.
-
-## Instalação
-
-Com npm:
-
-```bash
-npm install karsten-design-system
-```
-
-## Configuração do PrimeReact
-
-No main.tsx adicione:
-
-```js
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
-
-import { PrimeReactProvider } from 'primereact/api'; // Adicione o PrimeReactProvider
-import Tailwind from 'primereact/passthrough/tailwind'; // Importe o Tailwind
-import './index.css';
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <PrimeReactProvider value={{ pt: Tailwind }}> {/* Envolva o app no Provider do PrimeReact */}
-      <App />
-    </PrimeReactProvider>
-  </StrictMode>
-);
-```
-
-## Pré-requisitos
-
-Dependências peer necessárias no projeto consumidor:
-
-- React 19 ou superior
-- React DOM 19 ou superior
-- React Router DOM 7 ou superior
-
-Dependências internas importantes (já empacotadas na lib):
-
-- PrimeReact 10+
-- PrimeIcons 7+
-- Tailwind 3+
-- Chart.js 4+
-- clsx 2+
-- PostCSS 8+ e Autoprefixer 10+
-
-## Como usar
-
-1. Importe o componente desejado da biblioteca:
-
-```jsx
-import { Button } from 'karsten-design-system'
-```
-
-2. Use o componente em seu projeto:
-
-```jsx
-function App() {
-  return <Button label="Clique aqui" />
-}
-```
-
-## Componentes Disponíveis
-
-- `Accordion` - Seções expansíveis/colapsáveis de conteúdo.
-- `BasicHeader` - Cabeçalho simples para páginas ou seções.
-- `Breadcrumb` - Navegação hierárquica por páginas.
-- `Button` - Botão com variantes de estilo.
-- `CalendarInput` - Campo de data com calendário.
-- `Card` - Contêiner estilizado para conteúdo.
-- `CardButton` - Cartão clicável com ação.
-- `CardIconsButton` - Cartão com ações por ícones.
-- `Charts` - Gráficos usando Chart.js.
-- `Checkbox` - Caixa de seleção.
-- `CountryDropdown` - Seletor de país.
-- `Divider` - Divisor visual de conteúdo.
-- `EmptyContent` - Estado vazio para listas ou telas.
-- `ExpandablePanel` - Painel expansível com conteúdo.
-- `FileUpload` - Upload de arquivos.
-- `Header` - Cabeçalho completo com ações.
-- `IconButton` - Botão com ícone.
-- `InfoCard` - Cartão informativo para destaque.
-- `Input` - Campo de texto.
-- `InputSwitch` - Toggle liga/desliga.
-- `InputTextArea` - Área de texto multilinha.
-- `InternalMenu` - Menu interno de navegação.
-- `LanguageDropdown` - Seletor de idioma.
-- `Link` - Link estilizado.
-- `MegaMenu` - Menu expandido com múltiplas opções.
-- `Modal` - Modal de conteúdo.
-- `ModalForm` - Modal com formulário.
-- `Multiselect` - Seleção múltipla de opções.
-- `NotificationsSidebar` - Sidebar de notificações.
-- `Paginator` - Paginação de listas.
-- `RadioButton` - Seleção única entre opções.
-- `RightSidebar` - Sidebar posicionada à direita.
-- `Select` - Seletor de opções.
-- `SelectButton` - Seleção por botões.
-- `Sidebar` - Sidebar para navegação ou conteúdo.
-- `Skeleton` - Placeholder de carregamento.
-- `Spinner` - Indicador de carregamento.
-- `Table` - Tabela de dados.
-- `Tabs` - Navegação por abas.
-- `TagStatus` - Tag de status.
-- `TextColor` - Texto com variação de cor.
-- `Toast` - Mensagens temporárias.
-- `Tooltip` - Dica contextual.
-- `TransferList` - Lista de transferência entre colunas.
-
-## Desenvolvimento
-
-Para contribuir com o projeto:
-
-1. Clone o repositório:
-
-```bash
-git clone https://github.com/KarstenSA/karsten-design-system.git
-```
-
-2. Instale as dependências:
-
-Com npm:
-
-```bash
-npm install
-```
-
-3. Execute o Storybook para desenvolvimento:
-
-Com npm:
-
-```bash
-npm run storybook
-```
-
-## Comandos
-
-- `npm run dev` - Inicia o Vite em modo desenvolvimento
-- `npm run storybook` - Inicia o Storybook
-- `npm run build-storybook` - Gera o build do Storybook
-- `npm run build` - Gera o build da biblioteca (types + rollup)
-- `npm run lint` - Lint do projeto
-- `npm run format` - Formata o código
-- `npm run preview` - Preview do build do Vite
-
-Os scripts estão definidos em [package.json](package.json).
-
-## Estrutura do projeto
-
-- [src/index.ts](src/index.ts): ponto de exportação da biblioteca
-- [src/stories/components](src/stories/components): componentes e stories do Storybook
-- [src/types](src/types): tipos compartilhados
-- [src/utils](src/utils): utilitários
-- [src/assets](src/assets): ícones, flags e assets gerais
-- [src/mock](src/mock): mocks para exemplos
-
-## Como criar um componente
-
-1. Crie o componente em [src/stories/components](src/stories/components) seguindo o padrão existente:
-
-- Arquivo do componente (ex.: [src/stories/components/button.tsx](src/stories/components/button.tsx))
-- Story do componente (ex.: [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts))
-
-2. Exporte o componente no índice da lib em [src/index.ts](src/index.ts):
-
-- `export * from './stories/components/meuComponente'`
-
-3. Se necessário, crie tipos em [src/types](src/types) e utilitários em [src/utils](src/utils).
-
-4. Execute o Storybook para validar o componente:
-
-- `npm run storybook`
-
-### Padrão de implementação
-
-- Baseie-se em componentes PrimeReact e aplique classes Tailwind.
-- Use `clsx` para composição de classes.
-- Exporte componentes e tipos de forma nomeada.
-- Adicione `argTypes` e `tags: ['autodocs']` no story para gerar docs automáticas.
-
-Exemplos de referência:
-
-- [src/stories/components/button.tsx](src/stories/components/button.tsx)
-- [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts)
-
-## Publicando uma Nova Versão no NPM
-
-1. Atualize a versão no [package.json](package.json)
-
-Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
-
-2. Faça o build
-
-Com npm:
-
-```bash
-npm run build
-```
-
-3. Login no NPM
-
-Se ainda não estiver autenticado, faça login:
-
-```bash
-npm login
-```
-
-4. Publique
-
-```bash
-npm publish --access public
-```
-
-## Resolução de Problemas
-
-Se aparecer "peer dependencies missing", instale as dependências peer no projeto consumidor:
-
-- React 19+
-- React DOM 19+
-- React Router DOM 7+
-
-## Licença
-
-Este projeto está licenciado sob a licença MIT.
+# Karsten Design System
+
+Biblioteca de componentes React estilizados para projetos da Karsten, construída sobre PrimeReact, Tailwind e Vite.
+
+## Instalação
+
+Com npm:
+
+```bash
+npm install karsten-design-system
+```
+
+## Configuração do PrimeReact
+
+No main.tsx adicione:
+
+```js
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+import { PrimeReactProvider } from 'primereact/api'; // Adicione o PrimeReactProvider
+import Tailwind from 'primereact/passthrough/tailwind'; // Importe o Tailwind
+import './index.css';
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <PrimeReactProvider value={{ pt: Tailwind }}> {/* Envolva o app no Provider do PrimeReact */}
+      <App />
+    </PrimeReactProvider>
+  </StrictMode>
+);
+```
+
+## Pré-requisitos
+
+Dependências peer necessárias no projeto consumidor:
+
+- React 19 ou superior
+- React DOM 19 ou superior
+- React Router DOM 7 ou superior
+
+Dependências internas importantes (já empacotadas na lib):
+
+- PrimeReact 10+
+- PrimeIcons 7+
+- Tailwind 3+
+- Chart.js 4+
+- clsx 2+
+- PostCSS 8+ e Autoprefixer 10+
+
+## Como usar
+
+1. Importe o componente desejado da biblioteca:
+
+```jsx
+import { Button } from 'karsten-design-system'
+```
+
+2. Use o componente em seu projeto:
+
+```jsx
+function App() {
+  return <Button label="Clique aqui" />
+}
+```
+
+## Componentes Disponíveis
+
+- `Accordion` - Seções expansíveis/colapsáveis de conteúdo.
+- `BasicHeader` - Cabeçalho simples para páginas ou seções.
+- `Breadcrumb` - Navegação hierárquica por páginas.
+- `Button` - Botão com variantes de estilo.
+- `CalendarInput` - Campo de data com calendário.
+- `Card` - Contêiner estilizado para conteúdo.
+- `CardButton` - Cartão clicável com ação.
+- `CardIconsButton` - Cartão com ações por ícones.
+- `Charts` - Gráficos usando Chart.js.
+- `Checkbox` - Caixa de seleção.
+- `CountryDropdown` - Seletor de país.
+- `Divider` - Divisor visual de conteúdo.
+- `EmptyContent` - Estado vazio para listas ou telas.
+- `ExpandablePanel` - Painel expansível com conteúdo.
+- `FileUpload` - Upload de arquivos.
+- `Header` - Cabeçalho completo com ações.
+- `IconButton` - Botão com ícone.
+- `InfoCard` - Cartão informativo para destaque.
+- `Input` - Campo de texto.
+- `InputSwitch` - Toggle liga/desliga.
+- `InputTextArea` - Área de texto multilinha.
+- `InternalMenu` - Menu interno de navegação.
+- `LanguageDropdown` - Seletor de idioma.
+- `Link` - Link estilizado.
+- `MegaMenu` - Menu expandido com múltiplas opções.
+- `Modal` - Modal de conteúdo.
+- `ModalForm` - Modal com formulário.
+- `Multiselect` - Seleção múltipla de opções.
+- `NotificationsSidebar` - Sidebar de notificações.
+- `Paginator` - Paginação de listas.
+- `RadioButton` - Seleção única entre opções.
+- `RightSidebar` - Sidebar posicionada à direita.
+- `Select` - Seletor de opções.
+- `SelectButton` - Seleção por botões.
+- `Sidebar` - Sidebar para navegação ou conteúdo.
+- `Skeleton` - Placeholder de carregamento.
+- `Spinner` - Indicador de carregamento.
+- `Table` - Tabela de dados.
+- `Tabs` - Navegação por abas.
+- `TagStatus` - Tag de status.
+- `TextColor` - Texto com variação de cor.
+- `Toast` - Mensagens temporárias.
+- `Tooltip` - Dica contextual.
+- `TransferList` - Lista de transferência entre colunas.
+
+## Desenvolvimento
+
+Para contribuir com o projeto:
+
+1. Clone o repositório:
+
+```bash
+git clone https://github.com/KarstenSA/karsten-design-system.git
+```
+
+2. Instale as dependências:
+
+Com npm:
+
+```bash
+npm install
+```
+
+3. Execute o Storybook para desenvolvimento:
+
+Com npm:
+
+```bash
+npm run storybook
+```
+
+## Comandos
+
+- `npm run dev` - Inicia o Vite em modo desenvolvimento
+- `npm run storybook` - Inicia o Storybook
+- `npm run build-storybook` - Gera o build do Storybook
+- `npm run build` - Gera o build da biblioteca (types + rollup)
+- `npm run lint` - Lint do projeto
+- `npm run format` - Formata o código
+- `npm run preview` - Preview do build do Vite
+
+Os scripts estão definidos em [package.json](package.json).
+
+## Estrutura do projeto
+
+- [src/index.ts](src/index.ts): ponto de exportação da biblioteca
+- [src/stories/components](src/stories/components): componentes e stories do Storybook
+- [src/types](src/types): tipos compartilhados
+- [src/utils](src/utils): utilitários
+- [src/assets](src/assets): ícones, flags e assets gerais
+- [src/mock](src/mock): mocks para exemplos
+
+## Como criar um componente
+
+1. Crie o componente em [src/stories/components](src/stories/components) seguindo o padrão existente:
+
+- Arquivo do componente (ex.: [src/stories/components/button.tsx](src/stories/components/button.tsx))
+- Story do componente (ex.: [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts))
+
+2. Exporte o componente no índice da lib em [src/index.ts](src/index.ts):
+
+- `export * from './stories/components/meuComponente'`
+
+3. Se necessário, crie tipos em [src/types](src/types) e utilitários em [src/utils](src/utils).
+
+4. Execute o Storybook para validar o componente:
+
+- `npm run storybook`
+
+### Padrão de implementação
+
+- Baseie-se em componentes PrimeReact e aplique classes Tailwind.
+- Use `clsx` para composição de classes.
+- Exporte componentes e tipos de forma nomeada.
+- Adicione `argTypes` e `tags: ['autodocs']` no story para gerar docs automáticas.
+
+Exemplos de referência:
+
+- [src/stories/components/button.tsx](src/stories/components/button.tsx)
+- [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts)
+
+## Publicando uma Nova Versão no NPM
+
+1. Atualize a versão no [package.json](package.json)
+
+Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
+
+2. Faça o build
+
+Com npm:
+
+```bash
+npm run build
+```
+
+3. Login no NPM
+
+Se ainda não estiver autenticado, faça login:
+
+```bash
+npm login
+```
+
+4. Publique
+
+```bash
+npm publish --access public
+```
+
+## Resolução de Problemas
+
+Se aparecer "peer dependencies missing", instale as dependências peer no projeto consumidor:
+
+- React 19+
+- React DOM 19+
+- React Router DOM 7+
+
+## Licença
+
+Este projeto está licenciado sob a licença MIT.

package/dist/components/field-clear-button.d.ts

@@ -0,0 +1,9 @@
+export type FieldClearButtonProps = {
+    visible: boolean;
+    onClear: () => void;
+    disabled?: boolean;
+    hasError?: boolean;
+    systemLanguage?: 'pt' | 'en' | 'es';
+    className?: string;
+};
+export declare function FieldClearButton({ visible, onClear, disabled, hasError, systemLanguage, className, }: FieldClearButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import './tokens/themes.css';
 import '../.storybook/index.css';
+export * from './tokens/theme';
 export * from './stories/components/accordion';
 export * from './stories/components/basicHeader';
 export * from './stories/components/breadcrumb';