@nwartz/design-system 0.1.0

package/components/InputField.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type TextInputProps,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+
+import { useTheme } from '../theme';
+import { spacing } from '../tokens/spacing';
+import { elevation } from '../tokens/elevation';
+import { Icon, type IconName } from './Icon';
+import { Text } from './Text';
+
+export type InputFieldSize = 'sm' | 'md';
+
+export interface InputFieldProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+  label?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  size?: InputFieldSize;
+  disabled?: boolean;
+  errorMessage?: string;
+  leadingIcon?: IconName;
+  trailingIcon?: IconName;
+  onTrailingIconPress?: () => void;
+  secureTextEntry?: boolean;
+}
+
+/**
+ * Text input field with label, helper text, icons, and error state.
+ *
+ * ```tsx
+ * <InputField label="Email" placeholder="you@example.com" />
+ * <InputField label="Password" secureTextEntry errorMessage="Required" />
+ * ```
+ */
+export function InputField({
+  label,
+  value,
+  onChangeText,
+  size = 'md',
+  disabled = false,
+  errorMessage,
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconPress,
+  placeholder,
+  secureTextEntry,
+  ...rest
+}: InputFieldProps) {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const hasValue = !!value && value.length > 0;
+  const showError = !!errorMessage;
+  const inputHeight = size === 'sm' ? 40 : 44;
+  const paddingHorizontal = size === 'sm' ? 12 : 14;
+
+  const getBorderColor = (): string => {
+    if (showError) {
+      return theme.colors.dangerMid;
+    }
+
+    if (isFocused) {
+      return '#cefe00';
+    }
+
+    return '#d9d8d7';
+  };
+
+  const getBoxShadow = (): ViewStyle => {
+    if (isFocused) {
+      return {
+        shadowColor: '#fff6d4',
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0,
+      };
+    }
+
+    return elevation.xs;
+  };
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.container,
+    {
+      height: inputHeight,
+      paddingHorizontal,
+      backgroundColor: isHovered && !isFocused && !showError ? '#e9e8e7' : '#faf9f7',
+      borderColor: getBorderColor(),
+      borderWidth: 1,
+      borderRadius: 12,
+    },
+    getBoxShadow(),
+  ];
+
+  return (
+    <View style={[styles.wrapper, disabled && styles.disabledWrapper]}>
+      {label && (
+        <Text variant="body" textStyle={[styles.label, { color: '#737271' }]}>
+          {label}
+        </Text>
+      )}
+
+      <Pressable
+        disabled={disabled}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={containerStyle}>
+        {leadingIcon && (
+          <Icon name={leadingIcon} size={20} color="#667085" />
+        )}
+
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: hasValue ? '#141414' : '#8e8d8b',
+              fontSize: size === 'sm' ? 13 : 14,
+            },
+            disabled && styles.inputDisabled,
+          ]}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor="#8e8d8b"
+          editable={!disabled}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          secureTextEntry={secureTextEntry}
+          {...rest}
+        />
+
+        {trailingIcon && (
+          <Pressable
+            onPress={onTrailingIconPress}
+            disabled={!onTrailingIconPress}
+            hitSlop={8}
+            style={styles.iconButton}>
+            <Icon name={trailingIcon} size={20} color="#737271" />
+          </Pressable>
+        )}
+      </Pressable>
+
+      {showError && (
+        <View style={styles.errorRow}>
+          <Icon name="warning-circle" size={16} color={theme.colors.dangerMid} />
+          <Text variant="body" textStyle={[styles.errorText, { color: '#737271' }]}>
+            {errorMessage}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 4,
+  },
+  disabledWrapper: {
+    opacity: 0.32,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: '500',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  inputDisabled: {
+    opacity: 1,
+  },
+  iconButton: {
+    padding: 2,
+  },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21,
+  },
+});

package/components/LinkButton.tsx

@@ -0,0 +1,69 @@
+import { Pressable, StyleSheet, type PressableProps } from 'react-native';
+
+import { spacing } from '../tokens/spacing';
+import { Icon, type IconName } from './Icon';
+import { Text } from './Text';
+
+export interface LinkButtonProps extends Omit<PressableProps, 'style'> {
+  label: string;
+  icon?: IconName;
+  color?: 'primary' | 'secondary';
+}
+
+/**
+ * Text-styled button that looks like a hyperlink, with optional icon.
+ *
+ * ```tsx
+ * <LinkButton label="Forgot password?" />
+ * <LinkButton label="View all" icon="caret-right" />
+ * ```
+ */
+export function LinkButton({
+  label,
+  icon,
+  color = 'primary',
+  disabled,
+  ...rest
+}: LinkButtonProps) {
+  const textColor = color === 'primary' ? '#cefe00' : '#737271';
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.container,
+        pressed && styles.pressed,
+        disabled && styles.disabled,
+      ]}
+      {...rest}>
+      {icon && <Icon name={icon} size={16} color={textColor} />}
+      <Text
+        variant="body"
+        textStyle={[styles.label, { color: textColor }]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    alignSelf: 'flex-start',
+    paddingVertical: spacing.xs,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: '500',
+  },
+});

package/components/ProgressBar.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import { Text } from './Text';
+
+export interface ProgressBarProps {
+  value: number;
+  showLabel?: boolean;
+  animated?: boolean;
+}
+
+/**
+ * Progress bar with percentage label.
+ *
+ * ```tsx
+ * <ProgressBar value={0.7} showLabel />
+ * <ProgressBar value={0.3} />
+ * ```
+ */
+export function ProgressBar({ value, showLabel = true, animated = true }: ProgressBarProps) {
+  const clampedValue = Math.max(0, Math.min(1, value));
+  const animValue = useRef(new Animated.Value(animated ? 0 : clampedValue)).current;
+
+  useEffect(() => {
+    if (animated) {
+      Animated.timing(animValue, {
+        toValue: clampedValue,
+        duration: 400,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false,
+      }).start();
+    } else {
+      animValue.setValue(clampedValue);
+    }
+  }, [clampedValue, animated, animValue]);
+
+  const fillWidth = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  const percentage = Math.round(clampedValue * 100);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.barRow}>
+        <View style={styles.track}>
+          <Animated.View
+            style={[
+              styles.fill,
+              { width: fillWidth },
+            ]}
+          />
+        </View>
+
+        {showLabel && (
+          <Text
+            variant="body"
+            textStyle={styles.label}>
+            {percentage}%
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  barRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  track: {
+    flex: 1,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#e9e8e7',
+    overflow: 'hidden',
+  },
+  fill: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#63ca7e',
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: '500',
+    color: '#737271',
+    minWidth: 34,
+  },
+});

package/components/SearchBar.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type TextInputProps,
+} from 'react-native';
+
+import { elevation } from '../tokens/elevation';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export interface SearchBarProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+  label?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  onClear?: () => void;
+}
+
+/**
+ * Search input with magnifying glass icon, label, and clear button.
+ *
+ * ```tsx
+ * <SearchBar label="Search" value={query} onChangeText={setQuery} />
+ * ```
+ */
+export function SearchBar({
+  label,
+  value,
+  onChangeText,
+  placeholder = 'Search',
+  disabled = false,
+  onClear,
+  ...rest
+}: SearchBarProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const hasValue = !!value && value.length > 0;
+
+  const getBorderColor = (): string => {
+    if (isFocused) {
+      return '#cefe00';
+    }
+
+    return '#d9d8d7';
+  };
+
+  const getBoxShadow = (): object => {
+    if (isFocused) {
+      return {
+        shadowColor: '#fff6d4',
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0,
+      };
+    }
+
+    return elevation.xs;
+  };
+
+  return (
+    <View style={[styles.wrapper, disabled && styles.disabledWrapper]}>
+      {label && (
+        <Text variant="body" textStyle={[styles.label, { color: '#737271' }]}>
+          {label}
+        </Text>
+      )}
+
+      <Pressable
+        disabled={disabled}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={[
+          styles.container,
+          {
+            backgroundColor: isHovered && !isFocused ? '#e9e8e7' : '#faf9f7',
+            borderColor: getBorderColor(),
+            borderWidth: 1,
+            borderRadius: 8,
+          },
+          getBoxShadow(),
+        ]}>
+        <Icon name="magnifying-glass" size={20} color="#667085" />
+
+        <TextInput
+          style={[styles.input, { color: hasValue ? '#141414' : '#8e8d8b' }]}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor="#8e8d8b"
+          editable={!disabled}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          {...rest}
+        />
+
+        {hasValue && !disabled && (
+          <Pressable
+            onPress={() => {
+              onChangeText?.('');
+              onClear?.();
+            }}
+            hitSlop={8}
+            style={styles.clearButton}>
+            <Icon name="x-circle" size={16} color="#737271" />
+          </Pressable>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 4,
+  },
+  disabledWrapper: {
+    opacity: 0.32,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: '500',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 44,
+    paddingHorizontal: 14,
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  clearButton: {
+    padding: 2,
+  },
+});

package/components/SegmentedTabs.tsx

@@ -0,0 +1,88 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme';
+import { spacing } from '../tokens/spacing';
+import { Text } from './Text';
+
+export type SegmentedTabItem = {
+  id: string;
+  label: string;
+};
+
+export interface SegmentedTabsProps {
+  tabs: SegmentedTabItem[];
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+}
+
+/**
+ * Horizontal segmented tab bar for switching between views.
+ *
+ * ```tsx
+ * <SegmentedTabs
+ *   tabs={[{ id: 'feed', label: 'Feed' }, { id: 'radio', label: 'Radio PX' }]}
+ *   activeTabId={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+export function SegmentedTabs({ tabs, activeTabId, onTabChange }: SegmentedTabsProps) {
+  const { colors } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+
+        return (
+          <Pressable
+            key={tab.id}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isActive }}
+            onPress={() => onTabChange(tab.id)}
+            style={({ pressed }) => [
+              styles.tab,
+              pressed && styles.pressed,
+              { borderBottomColor: isActive ? colors.primaryPure : colors.shapeTertiary },
+            ]}>
+            <Text
+              variant="body"
+              color="textPrimary"
+              textStyle={[
+                styles.label,
+                {
+                  color: isActive ? colors.primaryPure : colors.textSecondary,
+                  fontWeight: isActive ? '700' : '400',
+                },
+              ]}>
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingHorizontal: spacing.xs,
+    paddingBottom: spacing.xxs,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.xs,
+    paddingBottom: spacing.sm,
+    borderBottomWidth: 2,
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+});