karsten-design-system 1.2.28 → 1.2.31

package/README.md

@@ -61,14 +61,14 @@ Esta biblioteca requer as seguintes dependências:
 1. Importe o componente desejado da biblioteca:
 
 ```jsx
-import { Button } from 'karsten-design-system';
+import { Button } from 'karsten-design-system'
 ```
 
 2. Use o componente em seu projeto:
 
 ```jsx
 function App() {
-  return <Button label="Clique aqui" />;
+  return <Button label="Clique aqui" />
 }
 ```
 
@@ -83,7 +83,6 @@ function App() {
 - `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.
-- `FilterButton` - Botão para aplicar ou remover filtros em listas ou tabelas.
 - `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.

package/dist/index.js

@@ -157,6 +157,10 @@ function CalendarInput({ error, placeholder = 'Selecione uma data', label, disab
     const calendarRef = useRef(null);
     const hasError = (error && !disabled) || (!!error && !disabled);
     const [isDarkMode, setIsDarkMode] = useState(false);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
     const dateTemplate = (data) => {
         const date = new Date(`${data.year}/${data.month + 1}/${data.day}`);
         const dayComponent = (className) => {
@@ -188,6 +192,8 @@ function CalendarInput({ error, placeholder = 'Selecione uma data', label, disab
         }
     };
     useEffect(() => {
+        if (!isClient || typeof document === 'undefined')
+            return;
         const htmlClassList = document.documentElement.classList;
         setIsDarkMode(htmlClassList.contains('dark'));
         const observer = new MutationObserver(() => {
@@ -198,7 +204,7 @@ function CalendarInput({ error, placeholder = 'Selecione uma data', label, disab
             attributeFilter: ['class'],
         });
         return () => observer.disconnect();
-    }, []);
+    }, [isClient]);
     return (jsx("div", { className: "relative flex flex-col w-full min-w-full", children: jsxs("div", { onClick: handleInputClick, children: [jsx(FloatingLabel, { value: props?.value ? props.value.toString() : '', label: label, disabled: disabled, error: error }), jsxs("div", { className: "relative w-full min-w-full", children: [jsx(Calendar, { ...props, disabled: disabled, placeholder: placeholder, ref: calendarRef, panelStyle: { width: '420px', height: '410px' }, className: clsx('w-full min-w-full focus:shadow-none border-none z-0 font-roboto border rounded-md', hasError
                                 ? 'border-redError placeholder:!text-redError p-invalid'
                                 : 'border-light-700 focus:border-primary', disabled && 'border-light-100 text-disabled', error && 'border-redError text-redError p-invalid', !error && 'border-light-700 p-custom'), dateFormat: "dd/mm/yy", inputStyle: {
@@ -232,6 +238,10 @@ function CardIconsButton({ label, leftIcon, onClick, }) {
 
 function Charts({ type, labels, datasets, title, stacked = false, horizontal = false, legendPosition = 'top', }) {
     const [isDarkMode, setIsDarkMode] = useState(false);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
     const chartData = {
         labels,
         datasets: datasets.map((ds) => ({
@@ -281,6 +291,8 @@ function Charts({ type, labels, datasets, title, stacked = false, horizontal = f
         },
     };
     useEffect(() => {
+        if (!isClient || typeof document === 'undefined')
+            return;
         const htmlClassList = document.documentElement.classList;
         setIsDarkMode(htmlClassList.contains('dark'));
         const observer = new MutationObserver(() => {
@@ -291,7 +303,7 @@ function Charts({ type, labels, datasets, title, stacked = false, horizontal = f
             attributeFilter: ['class'],
         });
         return () => observer.disconnect();
-    }, []);
+    }, [isClient]);
     return (jsx(Chart, { type: chartType, data: chartData, options: chartOptions, className: "w-full h-full", "aria-label": "chart" }));
 }