@xetwa/design-system 1.0.2

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

@@ -0,0 +1,133 @@
+
+import { View, StyleSheet, ScrollView, 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 dia disponível no DaySelector.
+ */
+export interface DayOption {
+  /** Identificador único do dia (ex: "2024-03-23") */
+  id: string;
+  /** Objeto Date correspondente ao dia */
+  dateObj: Date;
+  /** Etiqueta do dia da semana (ex: "SEG") */
+  label: string;
+  /** Número do dia do mês (ex: "23") */
+  number: string;
+  /** Estado de disponibilidade do dia */
+  status: 'available' | 'unavailable';
+}
+
+/**
+ * Componente DaySelector
+ * 
+ * Uma lista com scroll horizontal de dias, usada tipicamente para a marcação de aulas.
+ * O dia selecionado é destacado com as cores primárias e sombras suaves.
+ */
+export interface DaySelectorProps {
+  /** Array de dias a renderizar no seletor */
+  days: DayOption[];
+  /** ID do dia atualmente selecionado */
+  selectedId?: string;
+  /** Callback chamado quando o utilizador clica num dia disponível */
+  onSelectDay: (id: string, date: Date) => void;
+  /** Estilo para o container exterior */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const DaySelector = ({
+  days,
+  selectedId,
+  onSelectDay,
+  style,
+}: DaySelectorProps) => {
+  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}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.container, { gap: scale(8), paddingBottom: scale(6), paddingTop: scale(2) }]}
+      >
+        {days.map((day) => {
+          const isSelected = day.id === selectedId;
+          const isUnavailable = day.status === 'unavailable';
+
+          let bgColor = '#fff';
+          let borderColor = '#efe2d6';
+          let labelColor = '#9a8478';
+          let numColor = '#51332d';
+
+          if (isSelected) {
+            bgColor = theme.colors.primary; // #f2974b
+            borderColor = theme.colors.primary;
+            labelColor = '#fde9d5';
+            numColor = '#fff';
+          } else if (isUnavailable) {
+            labelColor = '#b9a392';
+            numColor = '#b9a392';
+          }
+
+          return (
+            <Pressable
+              key={day.id}
+              disabled={isUnavailable}
+              onPress={() => onSelectDay(day.id, day.dateObj)}
+              style={({ pressed }) => [
+                styles.item,
+                transitionStyle,
+                {
+                  minWidth: scale(48),
+                  paddingVertical: scale(8),
+                  borderRadius: scale(13),
+                  backgroundColor: bgColor,
+                  borderWidth: scale(1.5),
+                  borderColor,
+                },
+                isSelected && {
+                  shadowColor: '#cf7a30',
+                  shadowOffset: { width: 0, height: pressed ? 0 : 3 },
+                  shadowOpacity: 1,
+                  shadowRadius: 0,
+                  elevation: 0,
+                  transform: [{ translateY: pressed ? 3 : 0 }]
+                }
+              ]}
+            >
+              <Typography style={[styles.label, { fontSize: scaleText(11), color: labelColor }, transitionStyle]}>
+                {day.label}
+              </Typography>
+              <Typography style={[styles.number, { fontSize: scaleText(17), color: numColor }, transitionStyle]}>
+                {day.number}
+              </Typography>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  item: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+
+    textTransform: 'uppercase',
+  },
+  number: {
+
+  }
+});

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

@@ -0,0 +1,61 @@
+// 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 { Radio } from './Radio';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Forms/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Um botão de **Radio** é usado quando o utilizador tem de selecionar **apenas uma** opção de entre várias opções disponíveis.\n\n### Como usar em grupo\nComo não existe um componente `RadioGroup` isolado, o padrão correto em React Native é teres um estado que guarda o "valor selecionado" e usares vários `<Radio />` lado a lado. \n\nExemplo:\n```tsx\nconst [selected, setSelected] = useState("valor_a");\n\nreturn (\n  <View>\n    <Radio \n      label="Opção A"\n      checked={selected === "valor_a"}\n      onChange={() => setSelected("valor_a")}\n    />\n    <Radio \n      label="Opção B"\n      checked={selected === "valor_b"}\n      onChange={() => setSelected("valor_b")}\n    />\n  </View>\n)\n```\nIsto garante máxima flexibilidade para posicionares os Radios na horizontal, vertical, ou misturados com outro layout.',
+      }
+    }
+  },
+  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 InteractiveRadioGroup = () => {
+  const [selected, setSelected] = useState('diariamente');
+  return (
+    <View style={{ gap: 12 }}>
+      <Radio
+        checked={selected === 'diariamente'}
+        onChange={() => setSelected('diariamente')}
+        label="Diariamente"
+      />
+      <Radio
+        checked={selected === '3x_semana'}
+        onChange={() => setSelected('3x_semana')}
+        label="3x por semana"
+      />
+    </View>
+  );
+};
+
+export const Default: Story = {
+  render: () => <InteractiveRadioGroup />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Radio label="Marcado inativo" checked={true} onChange={() => { }} disabled={true} />
+      <Radio label="Desmarcado inativo" checked={false} onChange={() => { }} disabled={true} />
+    </View>
+  ),
+};

package/src/components/Forms/Radio/Radio.tsx

@@ -0,0 +1,141 @@
+import { View, StyleSheet, Pressable } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Componente individual de Radio.
+ * Deve ser usado para opções mutuamente exclusivas (onde apenas uma pode ser selecionada).
+ */
+export interface RadioProps {
+  /** O texto a ser exibido ao lado do botão de rádio. A linha inteira será clicável. */
+  label?: string;
+  /** 
+   * Estado atual do rádio. 
+   * Num grupo, apenas um componente deve ter `checked={true}` de cada vez. 
+   */
+  checked: boolean;
+  /** 
+   * Função chamada quando o botão é pressionado. 
+   * Geralmente usada para atualizar o estado que guarda o valor selecionado no grupo.
+   */
+  onChange: (checked: boolean) => void;
+  /** Desativa a interação e diminui a opacidade do rádio. */
+  disabled?: boolean;
+  /** Estilos customizados opcionais aplicados ao container exterior. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Radio = ({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  style,
+}: RadioProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const handlePress = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+
+  // Cores dinâmicas com base no estado
+  let borderColor = theme.colors.brown[100]; // #efe2d6
+  let dotColor = theme.colors.primary; // #f2974b
+  let borderWidth = scale(2);
+
+  if (disabled) {
+    borderColor = theme.colors.brown[100]; // #efe2d6
+    if (checked) {
+      dotColor = theme.colors.brown[400]; // #b9a392 (cor muted para disabled)
+    }
+  } else {
+    if (checked) {
+      borderColor = theme.colors.primary; // #f2974b
+      borderWidth = scale(2.5);
+    } else {
+      borderColor = theme.colors.brown[100];
+      borderWidth = scale(2);
+    }
+  }
+
+  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="radio"
+      accessibilityState={{ checked, disabled }}
+    >
+      <View
+        style={[
+          styles.circle,
+          {
+            width: scale(22),
+            height: scale(22),
+            borderRadius: scale(11),
+            borderWidth,
+            borderColor,
+            backgroundColor: theme.colors.white,
+          }
+        ]}
+      >
+        {checked && (
+          <View
+            style={[
+              styles.dot,
+              {
+                width: scale(10),
+                height: scale(10),
+                borderRadius: scale(5),
+                backgroundColor: dotColor,
+              }
+            ]}
+          />
+        )}
+      </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',
+  },
+  circle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dot: {
+    // Definido dinamicamente no componente
+  },
+  label: {
+
+  },
+});

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

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

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

@@ -0,0 +1,67 @@
+// 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 { SegmentedToggle } from './SegmentedToggle';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Forms/SegmentedToggle',
+  component: SegmentedToggle,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **SegmentedToggle** é uma alternativa muito elegante ao tradicional Dropdown (Select) ou ao grupo de Radios.\n\n### Exemplo de Uso\n```tsx\nconst [plan, setPlan] = useState("monthly");\n\nconst options = [\n  { label: "Mensal", value: "monthly" },\n  { label: "Anual (-20%)", value: "annual" }\n];\n\nreturn (\n  <SegmentedToggle \n    options={options}\n    selectedValue={plan}\n    onValueChange={setPlan}\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 InteractiveToggle = ({ options, initialValue }: { options: any[], initialValue: string }) => {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <SegmentedToggle
+      options={options}
+      selectedValue={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+export const TwoOptions: Story = {
+  render: () => (
+    <InteractiveToggle
+      options={[
+        { label: 'Mensal', value: 'mensal' },
+        { label: 'Anual', value: 'anual', highlightText: '-20%' },
+      ]}
+      initialValue="mensal"
+    />
+  ),
+};
+
+export const ThreeOptions: Story = {
+  render: () => (
+    <InteractiveToggle
+      options={[
+        { label: 'Fácil', value: 'facil' },
+        { label: 'Médio', value: 'medio' },
+        { label: 'Difícil', value: 'dificil' },
+      ]}
+      initialValue="medio"
+    />
+  ),
+};

package/src/components/Forms/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Pressable, Animated, Easing } from 'react-native';
+import type { ViewStyle, LayoutChangeEvent } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export interface SegmentedToggleOption {
+  label: string;
+  value: string;
+  highlightText?: string;
+  highlightColor?: string;
+}
+
+/**
+ * Componente SegmentedToggle para alternar entre 2 ou 3 opções curtas (ex: Mensal vs Anual).
+ * Apresenta uma barra deslumbante que desliza debaixo da opção selecionada.
+ */
+export interface SegmentedToggleProps {
+  /** Array de opções a mostrar na barra. Recomenda-se entre 2 a 3 opções curtas. */
+  options: SegmentedToggleOption[];
+  /** O valor da opção atualmente selecionada. */
+  selectedValue: string;
+  /** Callback executado sempre que o utilizador escolhe uma opção diferente. */
+  onValueChange: (value: string) => void;
+  /** Estilos adicionais para a barra (ex: `maxWidth`). */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const SegmentedToggle = ({
+  options,
+  selectedValue,
+  onValueChange,
+  style,
+}: SegmentedToggleProps) => {
+  const { scaleText, scale } = useResponsive();
+  const [containerWidth, setContainerWidth] = useState(0);
+  
+  const padding = scale(3);
+  const gap = scale(3);
+  
+  // Encontrar índice atual
+  const selectedIndex = options.findIndex((opt) => opt.value === selectedValue) ?? 0;
+  
+  const animValue = useRef(new Animated.Value(selectedIndex)).current;
+
+  useEffect(() => {
+    Animated.timing(animValue, {
+      toValue: selectedIndex,
+      duration: 200,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1), // ease-smooth
+      useNativeDriver: false,
+    }).start();
+  }, [selectedIndex, animValue]);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
+  // Se o containerWidth for 0 (ainda não medido), não mostramos o fundo deslizante
+  const availableWidth = containerWidth - (padding * 2);
+  const totalGap = (options.length - 1) * gap;
+  const itemWidth = (availableWidth - totalGap) / options.length;
+
+  const translateX = animValue.interpolate({
+    inputRange: options.map((_, i) => i),
+    outputRange: options.map((_, i) => i * (itemWidth + gap)),
+  });
+
+  return (
+    <View 
+      style={[styles.container, { padding, gap, borderRadius: scale(12), maxWidth: 400, width: '100%' }, style]}
+      onLayout={handleLayout}
+      accessibilityRole="radiogroup"
+    >
+      {containerWidth > 0 && (
+        <Animated.View
+          style={[
+            styles.activeBackground,
+            {
+              width: itemWidth,
+              borderRadius: scale(10),
+              transform: [{ translateX }],
+              top: padding,
+              left: padding,
+              bottom: padding,
+            }
+          ]}
+        />
+      )}
+
+      {options.map((option, index) => {
+        const isActive = selectedIndex === index;
+        return (
+          <Pressable
+            key={option.value}
+            style={[styles.option]}
+            onPress={() => onValueChange(option.value)}
+            accessibilityRole="radio"
+            accessibilityState={{ checked: isActive }}
+          >
+            <Typography 
+              style={[
+                styles.label,
+                { 
+                  fontSize: scaleText(13),
+                  color: isActive ? '#51332d' : '#9a8478',
+                }
+              ]}
+            >
+              {option.label}
+              {option.highlightText && (
+                <Typography style={{ color: option.highlightColor || theme.colors.success, fontWeight: '900' }}>
+                  {' '}{option.highlightText}
+                </Typography>
+              )}
+            </Typography>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.brown[100], // #efe2d6
+    position: 'relative',
+  },
+  activeBackground: {
+    position: 'absolute',
+    backgroundColor: theme.colors.white,
+    shadowColor: 'rgba(81, 51, 45, 1)',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  option: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    zIndex: 1, // Para garantir que o texto fica por cima do activeBackground
+  },
+  label: {
+
+  },
+});

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

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

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

@@ -0,0 +1,59 @@
+// 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 { Select } from './Select';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Forms/Select',
+  component: Select,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Um **Select** (Dropdown) permite que os utilizadores escolham um valor de uma lista através de um Bottom Sheet nativo.\n\n### Exemplo de Uso\n```tsx\nconst [language, setLanguage] = useState("");\n\nconst languages = [\n  { label: "Português", value: "pt" },\n  { label: "Inglês", value: "en" }\n];\n\nreturn (\n  <Select \n    options={languages}\n    value={language}\n    onChange={setLanguage}\n    placeholder="Escolha um idioma..."\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 LANGUAGES = [
+  { label: 'Português', value: 'pt' },
+  { label: 'Inglês', value: 'en' },
+  { label: 'Francês', value: 'fr' },
+  { label: 'Espanhol', value: 'es' },
+  { label: 'Alemão', value: 'de' },
+];
+
+const InteractiveSelect = ({ disabled = false }: { disabled?: boolean }) => {
+  const [value, setValue] = useState('');
+  return (
+    <Select
+      options={LANGUAGES}
+      value={value}
+      onChange={setValue}
+      disabled={disabled}
+      placeholder="Escolhe um idioma"
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <InteractiveSelect />,
+};
+
+export const Disabled: Story = {
+  render: () => <InteractiveSelect disabled={true} />,
+};