@xetwa/design-system 1.0.2

package/src/components/DataDisplay/Tag/Tag.tsx

@@ -0,0 +1,148 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import type { ReactNode } from 'react';
+import { Typography } from '../../Typography/Typography';
+
+export type TagVariant = 'neutro' | 'primary' | 'success' | 'error' | 'dark';
+export type TagSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Etiqueta compacta usada em cima de cartões ou imagens para classificar conteúdos (ex: 'NOVO').
+ */
+export interface TagProps {
+  /** Texto da etiqueta. */
+  label: string;
+  /** Variante de cor. */
+  variant?: TagVariant;
+  /** Tamanho. */
+  size?: TagSize;
+  icon?: ReactNode;
+  /** Estilos adicionais para o container da etiqueta. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Tag = ({
+  label,
+  variant = 'neutro',
+  size = 'sm',
+  icon,
+  style,
+}: TagProps) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'primary':
+        return {
+          backgroundColor: theme.colors.primaryLight,
+          borderColor: theme.colors.primary,
+          color: theme.colors.primaryDark,
+          borderWidth: 1,
+        };
+      case 'success':
+        return {
+          backgroundColor: '#eafaf2',
+          borderColor: theme.colors.success,
+          color: theme.colors.success,
+          borderWidth: 1,
+        };
+      case 'error':
+        return {
+          backgroundColor: '#fdf0ee',
+          borderColor: theme.colors.error,
+          color: theme.colors.error,
+          borderWidth: 1,
+        };
+      case 'dark':
+        return {
+          backgroundColor: theme.colors.brown[800],
+          borderColor: 'transparent',
+          color: theme.colors.white,
+          borderWidth: 0,
+        };
+      case 'neutro':
+      default:
+        return {
+          backgroundColor: theme.colors.brown[50],
+          borderColor: theme.colors.brown[100],
+          color: theme.colors.brown[800],
+          borderWidth: 1,
+        };
+    }
+  };
+
+  const vStyles = getVariantStyles();
+
+  return (
+    <View style={[
+      styles.container,
+      size === 'xs' ? styles.sizeXs : size === 'sm' ? styles.sizeSm : size === 'md' ? styles.sizeMd : styles.sizeLg,
+      { backgroundColor: vStyles.backgroundColor, borderColor: vStyles.borderColor, borderWidth: vStyles.borderWidth },
+      style
+    ]}>
+      {icon && <View style={styles.iconContainer}>{icon}</View>}
+      <Typography style={[
+        styles.text,
+        size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : styles.textLg,
+        { color: vStyles.color }
+      ]}>
+        {label}
+      </Typography>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    justifyContent: 'center',
+  },
+  sizeXs: {
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 6,
+  },
+  sizeSm: {
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+  },
+  sizeMd: {
+    paddingVertical: 5,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+  },
+  sizeLg: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 12,
+  },
+  text: {
+
+    textTransform: 'uppercase',
+  },
+  textXs: {
+    fontSize: 9,
+    lineHeight: 11,
+    letterSpacing: 0.54,
+  },
+  textSm: {
+    fontSize: 10,
+    lineHeight: 12,
+    letterSpacing: 0.6, // 10 * 0.06em
+  },
+  textMd: {
+    fontSize: 11,
+    lineHeight: 13,
+    letterSpacing: 0.66, // 11 * 0.06em
+  },
+  textLg: {
+    fontSize: 12,
+    lineHeight: 14,
+    letterSpacing: 0.72,
+  },
+  iconContainer: {
+    marginRight: 4,
+  }
+});

package/src/components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { FeedbackBottomSheet } from './FeedbackBottomSheet';
+
+const meta = {
+  title: 'Components/Feedback/FeedbackBottomSheet',
+  component: FeedbackBottomSheet,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+O **FeedbackBottomSheet** é utilizado no final de um exercício para mostrar ao utilizador se a resposta está correta ou errada.
+Ele renderiza automaticamente o estado visual adequado (cores, sombras, e a mascote Yaya em modo Avatar).
+
+### Casos de Uso
+
+**1. Resposta Correta**
+\`\`\`tsx
+<FeedbackBottomSheet 
+  status="correct"
+  title="Excellent !"
+  subtitle="+10 XP · resposta certa"
+  isVisible={true}
+  onContinue={() => console.log('Avançar')}
+/>
+\`\`\`
+
+**2. Resposta Errada**
+\`\`\`tsx
+<FeedbackBottomSheet 
+  status="wrong"
+  title="Presque !"
+  subtitle="Quase lá — vê a resposta certa"
+  correctAnswer="Je bois de l'eau"
+  isVisible={true}
+  onContinue={() => console.log('Avançar')}
+/>
+\`\`\`
+`,
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ width: '100%', maxWidth: 400, margin: 'auto', backgroundColor: '#f0f0f0', height: 400, justifyContent: 'flex-end', overflow: 'hidden' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const CorrectFeedback: Story = {
+  args: {
+    status: 'correct',
+    title: 'Excellent !',
+    subtitle: '+10 XP · resposta certa',
+    isVisible: true,
+  },
+};
+
+export const WrongFeedback: Story = {
+  args: {
+    status: 'wrong',
+    title: 'Presque !',
+    subtitle: 'Quase lá — vê a resposta certa',
+    correctAnswer: "Je bois de l'eau",
+    isVisible: true,
+  },
+};

package/src/components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Platform } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Yaya } from '../../Mascots/Yaya/Yaya';
+import { MainButton } from '../../Buttons/MainButton/MainButton';
+import { Typography } from '../../Typography/Typography';
+
+export interface FeedbackBottomSheetProps {
+  /** Define se a resposta foi correta ou errada */
+  status: 'correct' | 'wrong';
+  /** O estado/variante da mascote (ex: "acertou", "errou", "feliz") */
+  mascotVariant?: any;
+  /** Título principal (ex: "Correto!" ou "Atenção!") */
+  title: string;
+  /** Subtítulo ou texto complementar (ex: "+10 XP" ou "Resposta certa: ...") */
+  subtitle: string | React.ReactNode;
+  /** Campo da resposta certa, exibido na caixa branca quando status="wrong" */
+  correctAnswer?: string;
+  /** Texto do botão (ex: "CONTINUAR") */
+  buttonText?: string;
+  /** Callback ao clicar no botão */
+  onContinue?: () => void;
+  /** Se o sheet está visível ou não (para a animação) */
+  isVisible?: boolean;
+}
+
+/**
+ * Componente FeedbackBottomSheet
+ * Painel inferior que surge após o utilizador submeter uma resposta,
+ * apresentando a mascote (Avatar) em estado feliz ou triste.
+ */
+export const FeedbackBottomSheet: React.FC<FeedbackBottomSheetProps> = ({
+  status,
+  mascotVariant,
+  title,
+  subtitle,
+  correctAnswer,
+  buttonText = 'CONTINUAR',
+  onContinue,
+  isVisible = true,
+}) => {
+  const isCorrect = status === 'correct';
+  // Use Yaya as default since the images feature Yaya, and we just added avatarOnly to it.
+  const finalMascotVariant = mascotVariant || (isCorrect ? 'acertou' : 'errou');
+
+  const translateY = useRef(new Animated.Value(1000)).current;
+
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+        // Simple ease-out approximation
+        easing: (value) => 1 - Math.pow(1 - value, 3)
+      }).start();
+    } else {
+      Animated.timing(translateY, {
+        toValue: 1000,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, translateY]);
+
+  const bgSheet = isCorrect ? '#eafaf2' : '#fdf0ee';
+  const borderColor = isCorrect ? theme.colors.success : theme.colors.error;
+
+  return (
+    <Animated.View
+      style={[
+        styles.sheet,
+        { backgroundColor: bgSheet, borderTopColor: borderColor },
+        { transform: [{ translateY }] }
+      ]}
+    >
+      <View style={styles.header}>
+        <View style={styles.avatarContainer}>
+          {/* O componente sabe internamente que deve usar a mascote em modo Avatar */}
+          <Yaya variant={finalMascotVariant} avatarOnly size={64} />
+        </View>
+        <View style={styles.textContainer}>
+          <Typography style={[styles.title, { color: borderColor }]}>{title}</Typography>
+          <Typography style={[styles.subtitle, { color: borderColor }]}>{subtitle}</Typography>
+        </View>
+      </View>
+
+      {!isCorrect && correctAnswer && (
+        <View style={styles.correctAnswerBox}>
+          <Typography style={styles.correctAnswerLabel}>RESPOSTA CERTA</Typography>
+          <Typography style={styles.correctAnswerText}>{correctAnswer}</Typography>
+        </View>
+      )}
+
+      <MainButton
+        onPress={onContinue}
+        fullWidth
+        size="lg"
+        bgColor={borderColor}
+        textColor={theme.colors.white}
+        shadowColor={isCorrect ? '#0a633c' : '#a83c2d'}
+      >
+        {buttonText}
+      </MainButton>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sheet: {
+    paddingTop: theme.spacing.space4,
+    paddingBottom: theme.spacing.space6,
+    paddingHorizontal: 18,
+    borderTopLeftRadius: theme.radius.xxl,
+    borderTopRightRadius: theme.radius.xxl,
+    width: '100%',
+    minHeight: 120,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: theme.spacing.space4,
+  },
+  avatarContainer: {
+    marginRight: theme.spacing.space3,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    ...theme.typography.h1,
+    marginBottom: 2,
+  },
+  subtitle: {
+
+    fontSize: 15,
+
+    marginTop: 2,
+  },
+  button: {
+    width: '100%',
+    paddingVertical: 14,
+    borderRadius: theme.radius.lg,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  correctAnswerBox: {
+    backgroundColor: '#fff',
+    borderRadius: theme.radius.md,
+    padding: theme.spacing.space4,
+    marginBottom: theme.spacing.space4,
+    borderWidth: 1.5,
+    borderColor: 'rgba(207, 91, 72, 0.15)', // light red tint border
+  },
+  correctAnswerLabel: {
+
+    fontSize: 11,
+
+    color: '#cf5b48',
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  correctAnswerText: {
+    ...theme.typography.h1,
+    color: theme.colors.brown[700],
+  },
+  buttonShadowCorrect: {
+    ...Platform.select({
+      web: {
+        boxShadow: `0px 4px 0px #0a633c`, // solid darker green shadow
+      },
+      default: {
+        shadowColor: '#0a633c',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 2,
+      }
+    })
+  },
+  buttonShadowWrong: {
+    ...Platform.select({
+      web: {
+        boxShadow: `0px 4px 0px rgba(181, 74, 58, 1)`, // solid dark red shadow
+      },
+      default: {
+        shadowColor: '#a83c2d', // darker red
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 2,
+      }
+    })
+  },
+  buttonText: {
+    ...theme.typography.btnLg,
+    color: theme.colors.white,
+  }
+});

package/src/components/Forms/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,60 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Checkbox } from './Checkbox';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Forms/Checkbox',
+  component: Checkbox,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Um **Checkbox** permite que o utilizador selecione uma ou mais opções de um conjunto. \n\n### Diferença para o Radio\nUsa o `Checkbox` quando queres permitir seleções independentes. Usa o `Radio` para escolhas mutuamente exclusivas.\n\n### Exemplo de Uso\n```tsx\nconst [acceptedTerms, setAcceptedTerms] = useState(false);\n\nreturn (\n  <Checkbox \n    label="Aceito os termos e condições"\n    checked={acceptedTerms}\n    onChange={setAcceptedTerms}\n  />\n)\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 40, backgroundColor: theme.colors.cream }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const InteractiveCheckbox = ({ initialChecked = false, label, disabled = false }: any) => {
+  const [checked, setChecked] = useState(initialChecked);
+  return (
+    <Checkbox 
+      checked={checked} 
+      onChange={setChecked} 
+      label={label} 
+      disabled={disabled} 
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <InteractiveCheckbox label="Viajar para França" initialChecked={true} />
+      <InteractiveCheckbox label="Trabalho e carreira" initialChecked={false} />
+    </View>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <InteractiveCheckbox label="Marcado inativo" initialChecked={true} disabled={true} />
+      <InteractiveCheckbox label="Desmarcado inativo" initialChecked={false} disabled={true} />
+    </View>
+  ),
+};

package/src/components/Forms/Checkbox/Checkbox.tsx

@@ -0,0 +1,127 @@
+import { View, StyleSheet, Pressable } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Check } from 'lucide-react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Componente Checkbox para seleção múltipla.
+ * A área clicável inclui a caixa e o texto (label).
+ */
+export interface CheckboxProps {
+  /** Texto a exibir ao lado do checkbox. */
+  label?: string;
+  /** Estado de marcação do checkbox. */
+  checked: boolean;
+  /** Callback disparado quando o estado deve mudar. */
+  onChange: (checked: boolean) => void;
+  /** Desativa o checkbox, aplicando opacidade. */
+  disabled?: boolean;
+  /** Estilos customizados para o container. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Checkbox = ({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  style,
+}: CheckboxProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const handlePress = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+
+  // Cores dinâmicas com base no estado
+  let backgroundColor = theme.colors.white;
+  let borderColor = theme.colors.brown[100]; // #efe2d6
+  let checkColor = theme.colors.white;
+
+  if (disabled) {
+    if (checked) {
+      backgroundColor = theme.colors.brown[100]; // #efe2d6
+      borderColor = theme.colors.brown[100];
+      checkColor = theme.colors.brown[400]; // #b9a392
+    } else {
+      backgroundColor = 'transparent';
+      borderColor = theme.colors.brown[100];
+    }
+  } else {
+    if (checked) {
+      backgroundColor = theme.colors.primary; // #f2974b
+      borderColor = theme.colors.primary; // esconder a borda ao pintar da mesma cor
+    } else {
+      backgroundColor = theme.colors.white;
+      borderColor = theme.colors.brown[100];
+    }
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={() => [
+        styles.container,
+        {
+          paddingVertical: scale(4),
+          gap: scale(12),
+          opacity: disabled && !checked ? 0.5 : 1, // Opacity .5 para unchecked disabled
+        },
+        style
+      ]}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            width: scale(22),
+            height: scale(22),
+            borderRadius: scale(7),
+            borderWidth: scale(2),
+            backgroundColor,
+            borderColor,
+          }
+        ]}
+      >
+        {checked && (
+          <Check stroke={checkColor} strokeWidth={3} size={scale(13)} />
+        )}
+      </View>
+
+      {label && (
+        <Typography
+          style={[
+            styles.label,
+            {
+              fontSize: scaleText(15),
+              color: theme.colors.brown[800], // #51332d
+            }
+          ]}
+        >
+          {label}
+        </Typography>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  label: {
+
+  },
+});

package/src/components/Forms/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/src/components/Forms/DaySelector/DaySelector.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { DaySelector } from './DaySelector';
+import type { DayOption } from './DaySelector';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/Forms/DaySelector',
+  component: DaySelector,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `O **DaySelector** é utilizado na marcação de aula. Consiste numa linha horizontal de dias com scroll horizontal se necessário (mobile). O dia selecionado fica destacado com a cor primária.
+
+### Exemplo de Uso
+\`\`\`tsx
+<DaySelector 
+  days={[
+    { id: "1", dateObj: new Date(), label: "SEG", number: "23", status: "available" }
+  ]}
+  selectedId="1"
+  onSelectDay={(id, date) => console.log(id)}
+/>
+\`\`\``,
+      }
+    }
+  },
+  tags: ['autodocs'],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const mockDays: DayOption[] = [
+  { id: '1', dateObj: new Date(2024, 2, 23), label: 'SEG', number: '23', status: 'available' },
+  { id: '2', dateObj: new Date(2024, 2, 24), label: 'TER', number: '24', status: 'available' },
+  { id: '3', dateObj: new Date(2024, 2, 25), label: 'QUA', number: '25', status: 'unavailable' },
+  { id: '4', dateObj: new Date(2024, 2, 26), label: 'QUI', number: '26', status: 'available' },
+];
+
+const DaySelectorDemo = () => {
+  const [selected, setSelected] = useState<string>('2');
+
+  return (
+    <View style={{ width: '100%', maxWidth: 400, backgroundColor: '#fdf6f0', padding: 24, borderRadius: 16 }}>
+      <Typography style={{ fontFamily: 'Nunito-Bold', marginBottom: 12, color: '#9a8478', textTransform: 'uppercase', letterSpacing: 1 }}>
+        Escolhe o Dia
+      </Typography>
+      <DaySelector 
+        days={mockDays}
+        selectedId={selected}
+        onSelectDay={(id) => setSelected(id)}
+      />
+    </View>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DaySelectorDemo />,
+};