@nwartz/design-system 0.1.0

package/components/Slider.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useRef } from 'react';
+import { LayoutChangeEvent, PanResponder, StyleSheet, View } from 'react-native';
+
+import { spacing } from '../tokens/spacing';
+import { Text } from './Text';
+
+export interface SliderProps {
+  value: number;
+  minimumValue?: number;
+  maximumValue?: number;
+  step?: number;
+  onValueChange: (value: number) => void;
+  disabled?: boolean;
+  showValueLabel?: boolean;
+}
+
+/**
+ * Horizontal slider with draggable thumb and value label.
+ *
+ * ```tsx
+ * <Slider value={50} onValueChange={setValue} showValueLabel />
+ * ```
+ */
+export function Slider({
+  value,
+  minimumValue = 0,
+  maximumValue = 100,
+  step = 1,
+  onValueChange,
+  disabled = false,
+  showValueLabel = true,
+}: SliderProps) {
+  const trackWidthRef = useRef(0);
+
+  const range = maximumValue - minimumValue;
+  const percentage = range > 0 ? (value - minimumValue) / range : 0;
+
+  const clampToStep = useCallback(
+    (raw: number) => {
+      const stepped = Math.round((raw - minimumValue) / step) * step + minimumValue;
+
+      return Math.max(minimumValue, Math.min(maximumValue, stepped));
+    },
+    [minimumValue, maximumValue, step],
+  );
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderMove: (_, gestureState) => {
+        if (trackWidthRef.current === 0) {
+          return;
+        }
+
+        const newX = Math.max(
+          0,
+          Math.min(1, (gestureState.x0 + gestureState.dx) / trackWidthRef.current),
+        );
+        const rawValue = newX * range + minimumValue;
+
+        onValueChange(clampToStep(rawValue));
+      },
+    }),
+  ).current;
+
+  const onTrackLayout = useCallback((e: LayoutChangeEvent) => {
+    trackWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+
+  return (
+    <View style={[styles.wrapper, disabled && styles.disabled]}>
+      {showValueLabel && (
+        <Text
+          variant="body"
+          textStyle={[styles.valueLabel, { color: '#101828' }]}>
+          {String(value)}%
+        </Text>
+      )}
+
+      <View
+        onLayout={onTrackLayout}
+        {...panResponder.panHandlers}
+        style={styles.trackContainer}>
+        <View style={styles.track}>
+          <View
+            style={[
+              styles.fill,
+              { width: `${percentage * 100}%` },
+            ]}
+          />
+        </View>
+
+        <View
+          style={[
+            styles.thumb,
+            {
+              left: `${percentage * 100}%`,
+            },
+          ]}>
+          <View style={styles.thumbInner} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: spacing.sm,
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+  valueLabel: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  trackContainer: {
+    position: 'relative',
+    height: 40,
+    justifyContent: 'center',
+  },
+  track: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#e9e8e7',
+    overflow: 'hidden',
+  },
+  fill: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#cefe00',
+  },
+  thumb: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    marginLeft: -12,
+    top: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  thumbInner: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#ffffff',
+    borderWidth: 1.5,
+    borderColor: '#cefe00',
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.16,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+});

package/components/TabMenu.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Text } from './Text';
+
+export type TabMenuItem = {
+  id: string;
+  label: string;
+};
+
+export interface TabMenuProps {
+  tabs: TabMenuItem[];
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+}
+
+/**
+ * Tab menu with underline indicator.
+ *
+ * ```tsx
+ * <TabMenu
+ *   tabs={[{ id: 'overview', label: 'Overview' }, { id: 'details', label: 'Details' }]}
+ *   activeTabId="overview"
+ *   onTabChange={setTab}
+ * />
+ * ```
+ */
+export function TabMenu({ tabs, activeTabId, onTabChange }: TabMenuProps) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  return (
+    <View style={styles.container}>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        const isHovered = tab.id === hoveredId;
+
+        return (
+          <Pressable
+            key={tab.id}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isActive }}
+            onPress={() => onTabChange(tab.id)}
+            onHoverIn={() => setHoveredId(tab.id)}
+            onHoverOut={() => setHoveredId(null)}
+            style={[
+              styles.tab,
+              {
+                borderBottomColor: isActive ? '#cefe00' : '#e9e8e7',
+                borderBottomWidth: isActive ? 2 : 1,
+                backgroundColor: isHovered && !isActive ? '#e9e8e7' : 'transparent',
+              },
+            ]}>
+            <Text
+              variant="body"
+              textStyle={[
+                styles.label,
+                {
+                  color: isActive ? '#cefe00' : '#737271',
+                  fontWeight: isActive ? '700' : '400',
+                },
+              ]}>
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 4,
+    paddingBottom: 12,
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

package/components/TablePagination.tsx

@@ -0,0 +1,176 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { elevation } from '../tokens/elevation';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export interface TablePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  totalItems?: number;
+  pageSize?: number;
+}
+
+function getVisiblePages(current: number, total: number): (number | 'ellipsis')[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | 'ellipsis')[] = [1];
+
+  if (current > 3) {
+    pages.push('ellipsis');
+  }
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (current < total - 2) {
+    pages.push('ellipsis');
+  }
+
+  if (total > 1) {
+    pages.push(total);
+  }
+
+  return pages;
+}
+
+/**
+ * Pagination control for tables with page numbers and navigation buttons.
+ *
+ * ```tsx
+ * <TablePagination currentPage={2} totalPages={10} onPageChange={setPage} />
+ * ```
+ */
+export function TablePagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: TablePaginationProps) {
+  const pages = getVisiblePages(currentPage, totalPages);
+  const canGoBack = currentPage > 0;
+  const canGoForward = currentPage < totalPages - 1;
+
+  return (
+    <View style={[styles.container, { borderTopColor: '#e9e8e7' }]}>
+      <Pressable
+        disabled={!canGoBack}
+        onPress={() => canGoBack && onPageChange(currentPage - 1)}
+        style={({ pressed }) => [
+          styles.navButton,
+          {
+            opacity: !canGoBack ? 0.32 : 1,
+            backgroundColor: '#faf9f7',
+            borderColor: '#d9d8d7',
+          },
+          pressed && { opacity: 0.6 },
+        ]}>
+        <View style={{ transform: [{ rotate: '180deg' }] }}>
+          <Icon name="caret-right" size={20} color="#101828" />
+        </View>
+        <Text variant="body" textStyle={{ color: '#101828', fontSize: 14, fontWeight: '600' }}>
+          Anterior
+        </Text>
+      </Pressable>
+
+      <View style={styles.pageNumbers}>
+        {pages.map((page, index) => {
+          if (page === 'ellipsis') {
+            return (
+              <View key={`ellipsis-${index}`} style={styles.pageCell}>
+                <Text variant="body" textStyle={{ color: '#737271', fontSize: 14, fontWeight: '500' }}>
+                  ...
+                </Text>
+              </View>
+            );
+          }
+
+          const isActive = page - 1 === currentPage;
+
+          return (
+            <Pressable
+              key={page}
+              onPress={() => onPageChange(page - 1)}
+              style={[
+                styles.pageCell,
+                {
+                  backgroundColor: isActive ? '#e9e8e7' : 'transparent',
+                  borderRadius: 8,
+                },
+                isActive && {
+                  borderColor: '#cefe00',
+                  borderWidth: 1,
+                  ...elevation.xs,
+                },
+              ]}>
+              <Text
+                variant="body"
+                textStyle={{
+                  color: isActive ? '#141414' : '#737271',
+                  fontSize: 14,
+                  fontWeight: '500',
+                }}>
+                {page}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      <Pressable
+        disabled={!canGoForward}
+        onPress={() => canGoForward && onPageChange(currentPage + 1)}
+        style={({ pressed }) => [
+          styles.navButton,
+          {
+            opacity: !canGoForward ? 0.32 : 1,
+            backgroundColor: '#faf9f7',
+            borderColor: '#d9d8d7',
+          },
+          pressed && { opacity: 0.6 },
+        ]}>
+        <Text variant="body" textStyle={{ color: '#101828', fontSize: 14, fontWeight: '600' }}>
+          Próximo
+        </Text>
+        <Icon name="caret-right" size={20} color="#101828" />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderTopWidth: 1,
+  },
+  navButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    height: 36,
+    paddingHorizontal: 14,
+    borderRadius: 16,
+    borderWidth: 1,
+  },
+  pageNumbers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  pageCell: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/components/Tag.tsx

@@ -0,0 +1,128 @@
+import { Pressable, StyleSheet, View, type ViewProps } from 'react-native';
+
+import { Icon, type IconName } from './Icon';
+import { Text } from './Text';
+
+export type TagSize = 'sm' | 'md' | 'lg';
+
+export interface TagProps extends ViewProps {
+  label: string;
+  size?: TagSize;
+  icon?: IconName;
+  trailingIcon?: IconName;
+  count?: number;
+  onPress?: () => void;
+  onTrailingPress?: () => void;
+}
+
+const sizeStyles = {
+  sm: { height: 24, paddingHorizontal: 8, fontSize: 12, lineHeight: 18, iconSize: 14, closeSize: 14, countFontSize: 12 },
+  md: { height: 24, paddingHorizontal: 9, fontSize: 14, lineHeight: 21, iconSize: 16, closeSize: 16, countFontSize: 12 },
+  lg: { height: 28, paddingHorizontal: 10, fontSize: 14, lineHeight: 21, iconSize: 16, closeSize: 20, countFontSize: 14 },
+} as const;
+
+/**
+ * Inline tag for filters, categories, and removable labels.
+ *
+ * ```tsx
+ * <Tag label="Sport" icon="star" />
+ * <Tag label="Filter" trailingIcon="x" onTrailingPress={clear} count={3} />
+ * ```
+ */
+export function Tag({
+  label,
+  size = 'md',
+  icon,
+  trailingIcon,
+  count,
+  onPress,
+  onTrailingPress,
+  style,
+  ...rest
+}: TagProps) {
+  const s = sizeStyles[size];
+
+  const content = (
+    <View style={[styles.row, { gap: 3 }]}>
+      {icon && <Icon name={icon} size={s.iconSize} color="#737271" />}
+
+      <Text
+        variant="caption"
+        textStyle={[styles.label, { color: '#737271', fontSize: s.fontSize, lineHeight: s.lineHeight }]}>
+        {label}
+      </Text>
+
+      {count !== undefined && (
+        <View style={[styles.countBadge, { backgroundColor: '#e9e8e7' }]}>
+          <Text
+            variant="caption"
+            textStyle={[styles.countText, { fontSize: s.countFontSize, color: '#737271' }]}>
+            {count}
+          </Text>
+        </View>
+      )}
+
+      {trailingIcon && (
+        <Pressable
+          onPress={onTrailingPress}
+          hitSlop={4}
+          style={styles.trailingButton}>
+          <Icon name={trailingIcon} size={s.closeSize} color="#737271" />
+        </Pressable>
+      )}
+    </View>
+  );
+
+  const containerStyle = [
+    styles.tag,
+    {
+      height: s.height,
+      paddingHorizontal: s.paddingHorizontal,
+      backgroundColor: '#faf9f7',
+      borderColor: '#d9d8d7',
+      borderWidth: 1,
+      borderRadius: 6,
+    },
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable accessibilityRole="button" onPress={onPress} style={containerStyle} {...rest}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={containerStyle} {...rest}>
+      {content}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tag: {
+    alignSelf: 'flex-start',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  trailingButton: {
+    padding: 2,
+  },
+  countBadge: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+    paddingVertical: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  countText: {
+    fontWeight: '500',
+  },
+});

package/components/Text.tsx

@@ -0,0 +1,32 @@
+import { Text as RNText, type TextProps as RNTextProps, type TextStyle, type StyleProp } from 'react-native';
+
+import { useTheme } from '../theme';
+import { typography, type TypographyToken } from '../tokens/typography';
+
+export interface TextProps extends RNTextProps {
+  /** Preset typography token. Defaults to `body`. */
+  variant?: TypographyToken;
+  /** Override the text color from the resolved theme. */
+  color?: 'textPrimary' | 'textSecondary';
+  /** Additional style overrides. */
+  textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * Theme-aware text component.
+ *
+ * ```tsx
+ * <Text variant="heading" color="textPrimary">Title</Text>
+ * ```
+ */
+export function Text({ variant = 'body', color = 'textPrimary', textStyle, style, children, ...rest }: TextProps) {
+  const theme = useTheme();
+
+  return (
+    <RNText
+      style={[typography[variant], { color: theme.colors[color] }, textStyle, style]}
+      {...rest}>
+      {children}
+    </RNText>
+  );
+}

package/components/Toggle.tsx

@@ -0,0 +1,112 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Text } from './Text';
+
+export type ToggleSize = 'sm' | 'md';
+
+export interface ToggleProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: ToggleSize;
+}
+
+const sizeConfig = {
+  md: { trackWidth: 44, trackHeight: 24, thumbSize: 20, thumbOnX: 22, thumbOffX: 2, gap: 12 },
+  sm: { trackWidth: 36, trackHeight: 20, thumbSize: 16, thumbOnX: 18, thumbOffX: 2, gap: 8 },
+} as const;
+
+/**
+ * Toggle switch for boolean on/off state.
+ *
+ * ```tsx
+ * <Toggle value={enabled} onValueChange={setEnabled} label="Notifications" />
+ * <Toggle value={v} onValueChange={setV} size="sm" />
+ * ```
+ */
+export function Toggle({ value, onValueChange, label, disabled = false, size = 'md' }: ToggleProps) {
+  const s = sizeConfig[size];
+
+  const trackColor = value ? '#cefe00' : '#e9e8e7';
+  const hoverTrackColor = value ? '#87ad00' : '#d9d8d7';
+
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      style={({ pressed }) => [
+        styles.container,
+        { gap: s.gap },
+        pressed && styles.pressed,
+        disabled && styles.disabled,
+      ]}>
+      {({ pressed }) => (
+        <>
+          <View
+            style={[
+              styles.track,
+              {
+                width: s.trackWidth,
+                height: s.trackHeight,
+                borderRadius: 12,
+                backgroundColor: pressed ? hoverTrackColor : trackColor,
+                justifyContent: value ? 'flex-end' : 'flex-start',
+                paddingHorizontal: 2,
+              },
+            ]}>
+            <View
+              style={[
+                styles.thumb,
+                {
+                  width: s.thumbSize,
+                  height: s.thumbSize,
+                  borderRadius: s.thumbSize / 2,
+                  backgroundColor: '#ffffff',
+                  shadowColor: '#101828',
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.16,
+                  shadowRadius: 6,
+                  elevation: 3,
+                },
+              ]}
+            />
+          </View>
+
+          {label && (
+            <Text
+              variant="body"
+              textStyle={[styles.label, { color: '#141414' }]}>
+              {label}
+            </Text>
+          )}
+        </>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+  track: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  thumb: {},
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '500',
+  },
+});