@xetwa/design-system 1.0.2

package/src/components/Forms/Select/Select.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Pressable, Modal, ScrollView, Platform, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { ChevronDown, ChevronUp, Check } from 'lucide-react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+/**
+ * Componente Select (Dropdown)
+ * No telemóvel renderiza um Bottom Sheet para escolha amigável de ecrã tátil.
+ */
+export interface SelectProps {
+  /** Valor atualmente selecionado (deve corresponder ao `value` de uma das opções). */
+  value?: string;
+  /** Array de opções a mostrar na lista. */
+  options: SelectOption[];
+  /** Texto provisório mostrado quando não há nada selecionado. */
+  placeholder?: string;
+  /** Função chamada com o novo valor quando o utilizador escolhe uma opção. */
+  onChange: (value: string) => void;
+  /** Desativa a abertura do select. */
+  disabled?: boolean;
+  /** Estilos adicionais para o botão que abre o select. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Select = ({
+  value,
+  options,
+  placeholder = 'Selecione uma opção...',
+  onChange,
+  disabled = false,
+  style,
+}: SelectProps) => {
+  const { scale, scaleText } = useResponsive();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayLabel = selectedOption ? selectedOption.label : placeholder;
+
+  const slideAnim = React.useRef(new Animated.Value(0)).current;
+
+  const handlePress = () => {
+    if (!disabled) {
+      setIsOpen(true);
+      Animated.timing(slideAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false, // backgroundColor needs false, or we just animate opacity
+      }).start();
+    }
+  };
+
+  const closeMenu = (callback?: () => void) => {
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: false,
+    }).start(() => {
+      setIsOpen(false);
+      if (callback) callback();
+    });
+  };
+
+  const handleSelect = (val: string) => {
+    closeMenu(() => onChange(val));
+  };
+
+  // Cores Dinâmicas
+  let borderColor = theme.colors.brown[100]; // #efe2d6
+  let backgroundColor = theme.colors.white;
+  let textColor = value ? theme.colors.brown[800] : theme.colors.brown[400];
+  let chevronColor = theme.colors.brown[400]; // #9a8478
+
+  if (disabled) {
+    backgroundColor = '#fdf3ea';
+    textColor = theme.colors.brown[400];
+    chevronColor = '#c3b1a4';
+  } else if (isOpen) {
+    borderColor = theme.colors.primary; // #f2974b
+    chevronColor = theme.colors.primary;
+  }
+
+  const ChevronIcon = isOpen ? ChevronUp : ChevronDown;
+
+  return (
+    <>
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        style={[
+          styles.trigger,
+          {
+            height: scale(50),
+            paddingHorizontal: scale(16),
+            borderRadius: scale(14),
+            borderWidth: scale(2),
+            borderColor,
+            backgroundColor,
+            maxWidth: 400,
+            width: '100%',
+          },
+          // Aplicação simples de sombra quando aberto (em web seria outline)
+          isOpen && Platform.OS === 'web' && { outlineStyle: 'solid', outlineColor: 'rgba(242,151,75,0.2)', outlineWidth: 3 },
+          style
+        ]}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen, disabled }}
+      >
+        <Typography
+          style={[
+            styles.triggerText,
+            {
+              fontSize: scaleText(15),
+              color: textColor,
+            }
+          ]}
+          numberOfLines={1}
+        >
+          {displayLabel}
+        </Typography>
+        <ChevronIcon stroke={chevronColor} size={scale(20)} strokeWidth={2} />
+      </Pressable>
+
+      <Modal
+        visible={isOpen}
+        transparent={true}
+        animationType="none"
+        onRequestClose={() => closeMenu()}
+      >
+        <View style={styles.modalContainer}>
+          <Animated.View
+            style={[
+              styles.modalOverlay,
+              {
+                opacity: slideAnim,
+              }
+            ]}
+          >
+            <Pressable style={styles.modalDismiss} onPress={() => closeMenu()} />
+          </Animated.View>
+
+          <Animated.View
+            style={[
+              styles.bottomSheet,
+              {
+                borderTopLeftRadius: scale(24),
+                borderTopRightRadius: scale(24),
+                paddingBottom: scale(32), // Safe area placeholder
+                maxHeight: '70%',
+                transform: [
+                  {
+                    translateY: slideAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [600, 0], // slide in from bottom
+                    })
+                  }
+                ]
+              }
+            ]}
+          >
+            <View style={[styles.handleContainer, { paddingVertical: scale(12) }]}>
+              <View style={[styles.handle, { width: scale(40), height: scale(4), borderRadius: scale(2) }]} />
+            </View>
+
+            <ScrollView style={styles.list}>
+              {options.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <Pressable
+                    key={option.value}
+                    style={({ pressed }) => [
+                      styles.item,
+                      {
+                        paddingVertical: scale(12),
+                        paddingHorizontal: scale(16),
+                        backgroundColor: isSelected || pressed ? '#fef6ee' : theme.colors.white,
+                      }
+                    ]}
+                    onPress={() => handleSelect(option.value)}
+                  >
+                    <Typography
+                      style={[
+                        styles.itemText,
+                        {
+                          fontSize: scaleText(15),
+                          color: isSelected ? theme.colors.primary : theme.colors.brown[800],
+                        }
+                      ]}
+                    >
+                      {option.label}
+                    </Typography>
+                    {isSelected && (
+                      <Check stroke={theme.colors.primary} size={scale(16)} strokeWidth={3} />
+                    )}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </Animated.View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  triggerText: {
+
+    flex: 1,
+    marginRight: 8,
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  modalOverlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  modalDismiss: {
+    flex: 1,
+  },
+  bottomSheet: {
+    backgroundColor: theme.colors.white,
+  },
+  handleContainer: {
+    alignItems: 'center',
+  },
+  handle: {
+    backgroundColor: theme.colors.brown[100],
+  },
+  list: {
+    // ScrollView flex by default
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  itemText: {
+
+  },
+});

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

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

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

@@ -0,0 +1,57 @@
+// 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 { Switch } from './Switch';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/Forms/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Um **Switch** (Pill switch) funciona como um interruptor para alternar entre ligado (ON) e desligado (OFF). \n\nUsa este componente para opções onde o estado entra em vigor imediatamente após a interação.\n\n### Exemplo de Uso\n```tsx\nconst [notificationsEnabled, setNotificationsEnabled] = useState(true);\n\nreturn (\n  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>\n    <Typography>Notificações</Typography>\n    <Switch \n      value={notificationsEnabled}\n      onValueChange={setNotificationsEnabled}\n    />\n  </View>\n)\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 40, backgroundColor: theme.colors.cream, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const InteractiveSwitch = ({ initialValue = false, disabled = false }) => {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+      <Switch value={value} onValueChange={setValue} disabled={disabled} />
+      <Typography style={{ fontFamily: theme.fonts.title, fontWeight: '700', color: theme.colors.brown[800], fontSize: 14 }}>
+        {value ? 'ON · Ativo' : 'OFF · Inativo'}
+      </Typography>
+    </View>
+  );
+};
+
+export const Default: Story = {
+  render: () => <InteractiveSwitch />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <InteractiveSwitch initialValue={false} disabled={true} />
+      <InteractiveSwitch initialValue={true} disabled={true} />
+    </View>
+  ),
+};

package/src/components/Forms/Switch/Switch.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef } from 'react';
+import { StyleSheet, Pressable, Animated, Easing } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+/**
+ * Componente Switch (Pílula) para opções binárias do tipo ON/OFF.
+ * Ideal para definições rápidas como "Ativar notificações".
+ */
+export interface SwitchProps {
+  /** Valor booleano indicando se está ativo (ON) ou não (OFF). */
+  value: boolean;
+  /** Função chamada com o novo estado ao clicar. */
+  onValueChange: (value: boolean) => void;
+  /** Impede a interação e aplica um efeito visual de inatividade. */
+  disabled?: boolean;
+  /** Estilos opcionais do container exterior. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Switch = ({
+  value,
+  onValueChange,
+  disabled = false,
+  style,
+}: SwitchProps) => {
+  const { scale } = useResponsive();
+  
+  const animatedValue = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: value ? 1 : 0,
+      duration: 200,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1), // ease-smooth
+      useNativeDriver: false, // backgroundColor cannot be animated with native driver
+    }).start();
+  }, [value, animatedValue]);
+
+  // Dimensions
+  const trackWidth = scale(50);
+  const trackHeight = scale(28);
+  const thumbSize = scale(22);
+  const padding = scale(3);
+
+  // Travel distance: full width - thumb size - (padding * 2)
+  const travelDistance = trackWidth - thumbSize - (padding * 2);
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [padding, padding + travelDistance],
+  });
+
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.colors.brown[100], theme.colors.primary], // #efe2d6 to #f2974b
+  });
+
+  const handlePress = () => {
+    if (!disabled) {
+      onValueChange(!value);
+    }
+  };
+
+  return (
+    <Pressable 
+      onPress={handlePress}
+      disabled={disabled}
+      style={[
+        { 
+          opacity: disabled ? 0.5 : 1,
+        },
+        style
+      ]}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+    >
+      <Animated.View
+        style={[
+          styles.track,
+          {
+            width: trackWidth,
+            height: trackHeight,
+            borderRadius: trackHeight / 2,
+            backgroundColor,
+          }
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: thumbSize / 2,
+              transform: [{ translateX }],
+            }
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  track: {
+    justifyContent: 'center',
+  },
+  thumb: {
+    backgroundColor: theme.colors.white,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.18,
+    shadowRadius: 4,
+    elevation: 2,
+    position: 'absolute',
+    left: 0,
+  },
+});

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

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

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { TimeSlot } from './TimeSlot';
+import type { TimeOption } from './TimeSlot';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/Forms/TimeSlot',
+  component: TimeSlot,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `O **TimeSlot** é uma grelha de horários disponíveis para marcação de aulas. Apresenta um layout em flex-wrap com slots de tempo selecionáveis.
+
+### Exemplo de Uso
+\`\`\`tsx
+<TimeSlot 
+  slots={[
+    { id: "1", time: "10:00", status: "available" }
+  ]}
+  selectedId="1"
+  onSelectTime={(id, time) => console.log(time)}
+/>
+\`\`\``,
+      }
+    }
+  },
+  tags: ['autodocs'],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const mockSlots: TimeOption[] = [
+  { id: '1', time: '10:00', status: 'unavailable' },
+  { id: '2', time: '17:30', status: 'available' },
+  { id: '3', time: '18:00', status: 'available' },
+  { id: '4', time: '19:00', status: 'available' },
+];
+
+const TimeSlotDemo = () => {
+  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 }}>
+        Horário
+      </Typography>
+      <TimeSlot
+        slots={mockSlots}
+        selectedId={selected}
+        onSelectTime={(id) => setSelected(id)}
+      />
+    </View>
+  );
+};
+
+export const Default: Story = {
+  render: () => <TimeSlotDemo />,
+};

package/src/components/Forms/TimeSlot/TimeSlot.tsx

@@ -0,0 +1,116 @@
+import { View, StyleSheet, Pressable, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Interface para os dados de um horário disponível no TimeSlot.
+ */
+export interface TimeOption {
+  /** Identificador único do slot (ex: "1") */
+  id: string;
+  /** Texto do horário a apresentar (ex: "10:00") */
+  time: string;
+  /** Estado de disponibilidade do horário */
+  status: 'available' | 'unavailable';
+}
+
+/**
+ * Componente TimeSlot
+ * 
+ * Uma grelha de horários disponíveis para marcação (ex: aulas).
+ * Renderiza opções de tempo em formato de pílula retangular (flex-wrap).
+ */
+export interface TimeSlotProps {
+  /** Array de horários a renderizar no seletor */
+  slots: TimeOption[];
+  /** ID do horário atualmente selecionado */
+  selectedId?: string;
+  /** Callback chamado quando o utilizador clica num horário disponível */
+  onSelectTime: (id: string, time: string) => void;
+  /** Estilo para o container exterior */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const TimeSlot = ({
+  slots,
+  selectedId,
+  onSelectTime,
+  style,
+}: TimeSlotProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  // Transição suave para o Web
+  const transitionStyle = Platform.OS === 'web' ? { transition: 'all 0.15s ease-in-out' } as any : {};
+
+  return (
+    <View style={style}>
+      <View style={[styles.container, { gap: scale(8), paddingBottom: scale(6), paddingTop: scale(2) }]}>
+        {slots.map((slot) => {
+          const isSelected = slot.id === selectedId;
+          const isUnavailable = slot.status === 'unavailable';
+
+          let bgColor = '#fff';
+          let borderColor = '#efe2d6';
+          let textColor = '#51332d';
+          let borderWidth = scale(1.5);
+
+          if (isSelected) {
+            borderColor = theme.colors.primary; // #f2974b
+            borderWidth = scale(2);
+          } else if (isUnavailable) {
+            textColor = '#c3b1a4';
+          }
+
+          return (
+            <Pressable
+              key={slot.id}
+              disabled={isUnavailable}
+              onPress={() => onSelectTime(slot.id, slot.time)}
+              style={({ pressed }) => [
+                styles.item,
+                transitionStyle,
+                {
+                  paddingVertical: scale(9),
+                  paddingHorizontal: scale(14),
+                  borderRadius: scale(11),
+                  backgroundColor: bgColor,
+                  borderWidth: borderWidth,
+                  borderColor,
+                  minHeight: scale(44),
+                },
+                isSelected && {
+                  shadowColor: 'rgba(242,151,75,0.25)',
+                  shadowOffset: { width: 0, height: pressed ? 0 : 3 },
+                  shadowOpacity: 1,
+                  shadowRadius: 0,
+                  elevation: 0,
+                  transform: [{ translateY: pressed ? 3 : 0 }]
+                }
+              ]}
+            >
+              <Typography style={[styles.text, { fontSize: scaleText(14), color: textColor }, transitionStyle]}>
+                {slot.time}
+              </Typography>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  item: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+
+  }
+});