karsten-design-system 1.2.56 → 1.2.58

package/README.md

@@ -1,207 +1,207 @@
-# Karsten Design System
-
-Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
-
-## Instalação
-
-Com npm:
-
-```bash
-npm install karsten-design-system
-```
-
-Com yarn:
-
-```bash
-yarn add 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
-
-Esta biblioteca requer as seguintes dependências:
-
-- React 18 ou superior
-- React DOM 18 ou superior
-- React Router DOM 7 ou superior
-- Tailwind 3.4.0 ou superior
-- @types/date-fns 2 ou superior
-- Chart.js 4 ou superior
-- clsx 2 ou superior
-- date-fns 1 ou superior
-- Primeicons 7 ou superior
-- Primereact 10 ou superior
-- Postcss 8 ou superior
-- Autoprefixer 10 ou superior
-
-## 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` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
-- `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
-- `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
-- `Button` - Botão estilizado com variantes primária e secundária.
-- `Card` - Contêiner estilizado para exibir informações agrupadas.
-- `Chart` - Gráficos para visualização de dados em diferentes formatos.
-- `DateInput` - Campo de entrada para seleção de datas.
-- `Dialog` - Modal para exibição de mensagens ou ações secundárias.
-- `Divider` - Linha divisória para separação visual de conteúdo.
-- `Header` - Cabeçalho estilizado para títulos ou menus.
-- `IconButton` - Botão com ícone, ideal para ações rápidas.
-- `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
-- `Input` - Campo de entrada para texto.
-- `InternalMenu` - Menu de navegação interna, útil para dashboards.
-- `Link` - Link estilizado para navegação.
-- `MegaMenu` - Menu expandido com múltiplas opções organizadas.
-- `Notification` - Notificação para exibir alertas e mensagens.
-- `Paginator` - Paginação para navegação em listas ou tabelas.
-- `RadioButton` - Botões de seleção única dentro de um grupo.
-- `Select` - Componente para seleção de opções em um menu suspenso.
-- `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
-- `Skeleton` - Elementos de carregamento em estilo esqueleto.
-- `Spinner` - Indicador de carregamento animado.
-- `Table` - Tabela para exibição de dados estruturados.
-- `Toast` - Mensagens temporárias exibidas no canto da tela.
-
-## 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
-```
-
-Com yarn:
-
-```bash
-yarn
-```
-
-3. Execute o Storybook para desenvolvimento:
-
-Com npm:
-
-```bash
-npm run storybook
-```
-
-Com yarn:
-
-```bash
-yarn storybook
-```
-
-## Scripts Disponíveis
-
-Com npm:
-
-- `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
-- `npm run build-storybook` - Gera o build da biblioteca para hospedagem
-- `npm run build` - Gera o build da biblioteca para publicação no npm
-
-Com yarn:
-
-- `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
-- `yarn build-storybook` - Gera o build do Storybook para hospedagem
-- `yarn build` - Gera o build da biblioteca para publicação no npm
-
-## Publicando uma Nova Versão no NPM
-
-1. Atualizar a Versão
-
-Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
-
-2. Fazer o Build
-
-Com npm:
-
-```bash
-npm run build
-```
-
-Com yarn:
-
-```bash
-yarn build
-```
-
-3. Login no NPM
-
-Se ainda não estiver autenticado, faça login:
-
-```bash
-npm login
-```
-
-4. Publicar
-
-```bash
-npm publish --access public
-```
-
-## Resolução de Problemas
-
-Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
-
-Com npm:
-
-```bash
-npm install react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
-```
-
-Com yarn:
-
-```bash
-yarn add react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
-```
-
-## Licença
-
-Este projeto está licenciado sob a licença MIT.
+# Karsten Design System
+
+Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
+
+## Instalação
+
+Com npm:
+
+```bash
+npm install karsten-design-system
+```
+
+Com yarn:
+
+```bash
+yarn add 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
+
+Esta biblioteca requer as seguintes dependências:
+
+- React 18 ou superior
+- React DOM 18 ou superior
+- React Router DOM 7 ou superior
+- Tailwind 3.4.0 ou superior
+- @types/date-fns 2 ou superior
+- Chart.js 4 ou superior
+- clsx 2 ou superior
+- date-fns 1 ou superior
+- Primeicons 7 ou superior
+- Primereact 10 ou superior
+- Postcss 8 ou superior
+- Autoprefixer 10 ou superior
+
+## 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` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
+- `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
+- `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
+- `Button` - Botão estilizado com variantes primária e secundária.
+- `Card` - Contêiner estilizado para exibir informações agrupadas.
+- `Chart` - Gráficos para visualização de dados em diferentes formatos.
+- `DateInput` - Campo de entrada para seleção de datas.
+- `Dialog` - Modal para exibição de mensagens ou ações secundárias.
+- `Divider` - Linha divisória para separação visual de conteúdo.
+- `Header` - Cabeçalho estilizado para títulos ou menus.
+- `IconButton` - Botão com ícone, ideal para ações rápidas.
+- `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
+- `Input` - Campo de entrada para texto.
+- `InternalMenu` - Menu de navegação interna, útil para dashboards.
+- `Link` - Link estilizado para navegação.
+- `MegaMenu` - Menu expandido com múltiplas opções organizadas.
+- `Notification` - Notificação para exibir alertas e mensagens.
+- `Paginator` - Paginação para navegação em listas ou tabelas.
+- `RadioButton` - Botões de seleção única dentro de um grupo.
+- `Select` - Componente para seleção de opções em um menu suspenso.
+- `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
+- `Skeleton` - Elementos de carregamento em estilo esqueleto.
+- `Spinner` - Indicador de carregamento animado.
+- `Table` - Tabela para exibição de dados estruturados.
+- `Toast` - Mensagens temporárias exibidas no canto da tela.
+
+## 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
+```
+
+Com yarn:
+
+```bash
+yarn
+```
+
+3. Execute o Storybook para desenvolvimento:
+
+Com npm:
+
+```bash
+npm run storybook
+```
+
+Com yarn:
+
+```bash
+yarn storybook
+```
+
+## Scripts Disponíveis
+
+Com npm:
+
+- `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
+- `npm run build-storybook` - Gera o build da biblioteca para hospedagem
+- `npm run build` - Gera o build da biblioteca para publicação no npm
+
+Com yarn:
+
+- `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
+- `yarn build-storybook` - Gera o build do Storybook para hospedagem
+- `yarn build` - Gera o build da biblioteca para publicação no npm
+
+## Publicando uma Nova Versão no NPM
+
+1. Atualizar a Versão
+
+Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
+
+2. Fazer o Build
+
+Com npm:
+
+```bash
+npm run build
+```
+
+Com yarn:
+
+```bash
+yarn build
+```
+
+3. Login no NPM
+
+Se ainda não estiver autenticado, faça login:
+
+```bash
+npm login
+```
+
+4. Publicar
+
+```bash
+npm publish --access public
+```
+
+## Resolução de Problemas
+
+Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
+
+Com npm:
+
+```bash
+npm install react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
+```
+
+Com yarn:
+
+```bash
+yarn add react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
+```
+
+## Licença
+
+Este projeto está licenciado sob a licença MIT.

package/dist/index.js

@@ -205,14 +205,14 @@ function Card({ children, className, ariaLabel = 'Card de informação', }) {
 }
 
 function CardButton({ label, description, onClick }) {
-    return (jsxs("div", { className: "cursor-pointer rounded-2xl p-4 h-[160px] w-full bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border from-[#f3f4f6] to-light-500 border-[#f3f4f6]\n        dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
+    return (jsxs("div", { className: "cursor-pointer rounded-2xl p-4 h-[160px] w-full bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border from-[#f3f4f6] to-light-500 border-[#f3f4f6]\r\n        dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
             if (onClick)
                 onClick();
         }, children: [jsx("h3", { className: "text-lg font-bold text-primary dark:text-light-500", children: label }), description && (jsx("p", { className: "text-sm mt-2 line-clamp-3 text-primary dark:text-light-500", children: description }))] }));
 }
 
 function CardIconsButton({ label, leftIcon, onClick, }) {
-    return (jsxs("div", { className: "cursor-pointer rounded-xl p-4 w-full min-h-[60px] bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border flex items-center justify-between gap-4 from-[#f3f4f6] to-light-500 border-[#f3f4f6]\n        dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
+    return (jsxs("div", { className: "cursor-pointer rounded-xl p-4 w-full min-h-[60px] bg-gradient-to-br hover:shadow-md transition-shadow duration-200 border flex items-center justify-between gap-4 from-[#f3f4f6] to-light-500 border-[#f3f4f6]\r\n        dark:from-dark-400 dark:to-dark-100 dark:border-dark-400 dark:bg-dark-100 dark:shadow-dark-400", onClick: () => {
             if (onClick)
                 onClick();
         }, "aria-label": `Botão de navegação para ${label}`, children: [jsxs("div", { className: "flex items-center gap-3 flex-grow overflow-hidden", children: [leftIcon && (jsx("div", { className: "text-xl flex-shrink-0 flex items-center dark:text-light-500 text-primary", children: leftIcon })), jsx("h3", { className: "text-base font-semibold break-words dark:text-light-500 text-primary", children: label })] }), jsx("div", { className: "flex items-center justify-center h-full", children: jsx("i", { className: "pi pi-angle-right text-xl flex-shrink-0 dark:text-light-500 text-primary" }) })] }));
@@ -503,7 +503,7 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [openUserConfig]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 bg-light-500 shadow-md border border-light-400 z-20 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 rounded hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
                                                         if (onClick)
                                                             onClick();
                                                         setOpenUserConfig(false);
@@ -742,7 +742,7 @@ function LanguageDropdown({ selected = 'pt', onChange, }) {
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
-    return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsxs("button", { type: "button", className: clsx('p-1 rounded-md cursor-pointer hover:bg-light-300 dark:hover:bg-dark-400'), onClick: () => setOpen(!open), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": "Selecionar idioma", children: [languageOptions.find((lang) => lang.code === selected)?.icon || null, jsx("span", { className: "sr-only", children: selected })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md border border-light-700 bg-light-500 p-2 dark:bg-dark-100 shadow-md z-40'), role: "listbox", children: jsx("ul", { children: languageOptions.map((option) => (jsxs("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1', option.code === selected &&
+    return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsxs("button", { type: "button", className: clsx('p-1 rounded-md cursor-pointer hover:bg-light-300 dark:hover:bg-dark-400'), onClick: () => setOpen(!open), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": "Selecionar idioma", children: [languageOptions.find((lang) => lang.code === selected)?.icon || null, jsx("span", { className: "sr-only", children: selected })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md p-2 z-40 shadow-container bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400'), role: "listbox", children: jsx("ul", { children: languageOptions.map((option) => (jsxs("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1', option.code === selected &&
                             'font-bold bg-light-300 dark:bg-dark-400'), role: "option", "aria-selected": option.code === selected, tabIndex: 0, onClick: () => {
                             onChange(option);
                             setOpen(false);
@@ -4427,7 +4427,7 @@ function Select(props) {
                                     const inputValue = e.target.value;
                                     setSearchText(inputValue);
                                     setHighlightedIndex(0);
-                                    if (hasOnInputChange) {
+                                    if (hasOnInputChange && isOpen) {
                                         props.onInputChange?.(inputValue);
                                     }
                                     if (!isOpen) {