@xetwa/design-system 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/MainButton/MainButton.tsx

@@ -27,6 +27,8 @@ export interface MainButtonProps {
   bgColor?: string;
   /** Cor do texto customizada (sobrepõe a cor da variante) */
   textColor?: string;
+  /** Peso da fonte customizada (sobrepõe o padrão do botão) */
+  weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
   /** Cor da sombra customizada (sobrepõe a cor da variante) */
   shadowColor?: string;
   /** Cor de fundo no hover (opcional) */
@@ -47,6 +49,7 @@ export const MainButton = React.forwardRef<React.ElementRef<typeof Pressable>, M
       onPress,
       bgColor,
       textColor,
+      weight,
       shadowColor,
       hoverColor,
       ...props
@@ -209,7 +212,7 @@ export const MainButton = React.forwardRef<React.ElementRef<typeof Pressable>, M
           />
         )}
 
-        <Typography style={textStyles}>
+        <Typography style={textStyles} weight={weight}>
           {children}
         </Typography>
       </Pressable>

package/src/hooks/useTheme.ts

@@ -4,14 +4,14 @@ import { theme } from '../styles/theme';
 
 export function useTheme() {
   const [isDark, setIsDark] = useState(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof document !== 'undefined') {
       return document.documentElement.classList.contains('dark-theme');
     }
     return Appearance.getColorScheme() === 'dark';
   });
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof document !== 'undefined') {
       const observer = new MutationObserver(() => {
         setIsDark(document.documentElement.classList.contains('dark-theme'));
       });

package/src/styles/theme.ts

@@ -4,8 +4,8 @@ export const theme = {
     primary: '#f2974b',      // CTAs, botão primário, destaque, progresso
     primaryDark: '#cf7a30',  // Sombra do botão primário, ícone selecionado, hover
     primaryLight: '#fef6ee', // Fundo de item selecionado, chip ativo
-    
-    // Escala de castanho (neutros)
+
+    // Escala de castanho (neutros) Trigger para App
     brown: {
       900: '#15100d', // Cor máxima de contraste, textos ou superfícies em modo escuro
       800: '#51332d', // Texto principal, cabeçalhos e botões na variante invertida
@@ -17,17 +17,17 @@ export const theme = {
       100: '#efe2d6', // Bordas, separadores e sombra do botão secundário
       50: '#fdf3ea',  // Fundo de cards, chips neutros, áreas de destaque leve
     },
-    
+
     cream: '#fbf6f0',  // Fundo de ecrãs secundários
     canvas: '#e7e5df', // Fundo do arquivo de design no Figma (não usado na app)
-    
+
     // Semânticas & Base
     success: '#16915a', // Sucesso, acertos, módulos concluídos
     error: '#cf5b48',   // Erro, campo inválido
     info: '#2a6fc2',    // Informação, link
     black: '#000000',   // Preto Xetwa
     white: '#ffffff',   // Fundo principal de ecrãs, cards
-    
+
     // Light Theme
     light: {
       bgApp: '#fbf6f0',         // cream
@@ -41,7 +41,7 @@ export const theme = {
       glassBorder: 'rgba(255, 255, 255, 0.4)',
       primaryLight: '#fef6ee',   // primaryLight
     },
-    
+
     // Dark Theme
     dark: {
       bgApp: '#15100d',         // brown-900
@@ -56,7 +56,7 @@ export const theme = {
       primaryLight: 'rgba(242, 151, 75, 0.15)', // transparent primary
     }
   },
-  
+
   spacing: {
     // Relatório de espaçamento base 4px
     space1: 4,
@@ -79,7 +79,7 @@ export const theme = {
     xxl: 24,
     xxxl: 32,
   },
-  
+
   radius: {
     xs: 6,
     sm: 10,
@@ -91,7 +91,7 @@ export const theme = {
     phone: 42,
     full: 9999,
   },
-  
+
   shadows: {
     xs: {
       shadowColor: '#51332d',
@@ -154,12 +154,12 @@ export const theme = {
       elevation: 3,
     }
   },
-  
+
   fonts: {
     title: 'Fredoka', // Fredoka – títulos
     body: 'Nunito',   // Nunito – corpo e botões
   },
-  
+
   typography: {
     display1: {
       fontFamily: 'Fredoka',
@@ -244,7 +244,7 @@ export const theme = {
       letterSpacing: 0.48,
     },
   },
-  
+
   breakpoints: {
     xs: 0,
     sm: 375,
@@ -254,7 +254,7 @@ export const theme = {
     xxl: 1280,
     xxxl: 1440,
   },
-  
+
   animations: {
     easings: {
       bounce: [0.34, 1.56, 0.64, 1] as [number, number, number, number],
@@ -268,7 +268,7 @@ export const theme = {
       slow: 500,
     }
   },
-  
+
   layout: {
     mobileHeaderHeight: 52,
     mobileTabHeight: 56,