@nwartz/design-system 0.1.0

package/components/Autocomplete.tsx

@@ -0,0 +1,259 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type TextInputProps,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+
+import { useTheme } from '../theme';
+import { radius } from '../tokens/radius';
+import { spacing } from '../tokens/spacing';
+import { elevation } from '../tokens/elevation';
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { DropdownSelect, type DropdownItem } from './DropdownSelect';
+
+export type AutocompleteSize = 'sm' | 'md';
+export type AutocompleteState = 'default' | 'hover' | 'focus' | 'typing' | 'selected' | 'filled' | 'error' | 'disabled';
+
+export interface AutocompleteProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+  /** Label displayed above the input. */
+  label: string;
+  /** Current input value. */
+  value?: string;
+  /** Called when text changes. */
+  onChangeText?: (text: string) => void;
+  /** Input size. */
+  size?: AutocompleteSize;
+  /** Whether the input is disabled. */
+  disabled?: boolean;
+  /** Error message displayed below the input. */
+  errorMessage?: string;
+  /** Dropdown items. */
+  items?: DropdownItem[];
+  /** Selected item key. */
+  selectedItem?: string | null;
+  /** Called when a dropdown item is selected. */
+  onSelectItem?: (item: DropdownItem) => void;
+  /** Whether the dropdown is open. */
+  open?: boolean;
+  /** Called to toggle the dropdown. */
+  onToggle?: () => void;
+}
+
+/**
+ * Autocomplete input with dropdown, matching the Nwartz DS spec.
+ *
+ * Supports sizes (sm/md), states (default/hover/focus/typing/selected/filled/error/disabled),
+ * label, error message, and a dropdown list.
+ *
+ * ```tsx
+ * <Autocomplete
+ *   label="Country"
+ *   placeholder="Start typing..."
+ *   items={countries}
+ *   onSelectItem={handleSelect}
+ * />
+ * ```
+ */
+export function Autocomplete({
+  label,
+  value,
+  onChangeText,
+  size = 'md',
+  disabled = false,
+  errorMessage,
+  items = [],
+  selectedItem,
+  onSelectItem,
+  open = false,
+  onToggle,
+  placeholder,
+  ...rest
+}: AutocompleteProps) {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+
+  const hasValue = !!value && value.length > 0;
+  const showError = !!errorMessage;
+  const isOpen = open;
+
+  const inputHeight = size === 'sm' ? 40 : 44;
+  const paddingHorizontal = size === 'sm'
+    ? spacing.md
+    : spacing.lg;
+
+  const getBorderColor = (): string => {
+    if (showError) {
+      return theme.colors.dangerMid;
+    }
+
+    if (isFocused) {
+      return theme.colors.primaryMid;
+    }
+
+    return theme.colors.shapeTertiary;
+  };
+
+  const getBoxShadow = (): ViewStyle => {
+    if (isFocused || showError) {
+      const focusColor = showError ? theme.colors.dangerMid : '#FFF6D4';
+
+      return {
+        shadowColor: focusColor,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0,
+      };
+    }
+
+    return elevation.xs;
+  };
+
+  const inputContainerStyle: StyleProp<ViewStyle> = [
+    styles.inputContainer,
+    {
+      height: inputHeight,
+      paddingHorizontal,
+      backgroundColor: theme.colors.shapePrimary,
+      borderColor: getBorderColor(),
+      borderWidth: 1,
+      borderRadius: radius.sm,
+    },
+    getBoxShadow(),
+  ];
+
+  return (
+    <View style={[styles.wrapper, disabled && styles.disabledWrapper]}>
+      <Text
+        variant="body"
+        color="textSecondary"
+        textStyle={styles.label}>
+        {label}
+      </Text>
+
+      <View style={inputContainerStyle}>
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: theme.colors.textPrimary,
+              fontSize: 14,
+            },
+            disabled && styles.inputDisabled,
+          ]}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={theme.colors.textTertiary}
+          editable={!disabled}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          {...rest}
+        />
+
+        <View style={styles.trailingIcons}>
+          {hasValue && !disabled && (
+            <Pressable
+              onPress={() => onChangeText?.('')}
+              hitSlop={8}
+              style={styles.iconButton}>
+              <Icon name="x-circle" size={16} color={theme.colors.textSecondary} />
+            </Pressable>
+          )}
+
+          <Pressable
+            onPress={onToggle}
+            disabled={disabled}
+            hitSlop={8}
+            style={styles.iconButton}>
+            <Icon
+              name={isOpen ? 'caret-up' : 'caret-down'}
+              size={16}
+              color={theme.colors.textTertiary}
+            />
+          </Pressable>
+        </View>
+      </View>
+
+      {showError && (
+        <View style={styles.errorRow}>
+          <Icon name="warning-circle" size={16} color={theme.colors.dangerMid} />
+          <Text
+            variant="body"
+            color="textSecondary"
+            textStyle={[styles.errorText, { color: theme.colors.textSecondary }]}>
+            {errorMessage}
+          </Text>
+        </View>
+      )}
+
+      {isOpen && items.length > 0 && (
+        <DropdownSelect
+          items={items}
+          value={selectedItem}
+          onSelect={(item) => {
+            onSelectItem?.(item);
+            onToggle?.();
+          }}
+          open={isOpen}
+          style={styles.dropdown}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: spacing.xs,
+  },
+  disabledWrapper: {
+    opacity: 0.32,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: '500',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  inputDisabled: {
+    opacity: 1,
+  },
+  trailingIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  iconButton: {
+    padding: 2,
+  },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  dropdown: {
+    marginTop: spacing.xxs,
+  },
+});

package/components/Badge.tsx

@@ -0,0 +1,103 @@
+import { StyleSheet, View, type ViewProps } from 'react-native';
+
+import { spacing } from '../tokens/spacing';
+import { Icon, type IconName } from './Icon';
+import { Text } from './Text';
+
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeColor = 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'error' | 'gray';
+export type BadgeMode = 'solid' | 'outline';
+
+export interface BadgeProps extends ViewProps {
+  label: string;
+  size?: BadgeSize;
+  color?: BadgeColor;
+  mode?: BadgeMode;
+  icon?: IconName;
+  trailingIcon?: IconName;
+}
+
+const colorPalette: Record<BadgeColor, { stroke: string; solidBg: string; solidText: string; outlineText: string }> = {
+  primary: { stroke: '#cefe00', solidBg: '#f8ffc5', solidText: '#536e00', outlineText: '#cefe00' },
+  secondary: { stroke: '#4fa971', solidBg: '#ddfad9', solidText: '#25584d', outlineText: '#25584d' },
+  info: { stroke: '#1048d6', solidBg: '#ebf4ff', solidText: '#1048d6', outlineText: '#1048d6' },
+  warning: { stroke: '#e3993a', solidBg: '#fef9ec', solidText: '#642000', outlineText: '#e3993a' },
+  success: { stroke: '#138135', solidBg: '#f1feeb', solidText: '#05482c', outlineText: '#138135' },
+  error: { stroke: '#bb4355', solidBg: '#fdefed', solidText: '#bb4355', outlineText: '#bb4355' },
+  gray: { stroke: '#d9d8d7', solidBg: '#e9e8e7', solidText: '#737271', outlineText: '#737271' },
+};
+
+const sizeStyles = {
+  sm: { height: 22, paddingHorizontal: 8, fontSize: 12, lineHeight: 18, iconSize: 12 },
+  md: { height: 24, paddingHorizontal: 8, fontSize: 14, lineHeight: 21, iconSize: 14 },
+  lg: { height: 28, paddingHorizontal: 12, fontSize: 14, lineHeight: 21, iconSize: 14 },
+} as const;
+
+/**
+ * Inline badge for status indicators, counts, and labels.
+ *
+ * ```tsx
+ * <Badge label="Active" color="success" />
+ * <Badge label="3" color="error" size="sm" />
+ * <Badge label="Info" color="info" mode="outline" />
+ * ```
+ */
+export function Badge({
+  label,
+  size = 'md',
+  color = 'gray',
+  mode = 'solid',
+  icon,
+  trailingIcon,
+  style,
+  ...rest
+}: BadgeProps) {
+  const palette = colorPalette[color];
+  const s = sizeStyles[size];
+
+  const bgColor = mode === 'solid' ? palette.solidBg : 'transparent';
+  const textColor = mode === 'solid' ? palette.solidText : palette.outlineText;
+  const borderColor = mode === 'outline' ? palette.stroke : 'transparent';
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          height: s.height,
+          paddingHorizontal: s.paddingHorizontal,
+          backgroundColor: bgColor,
+          borderColor,
+          borderWidth: 1,
+          borderRadius: 16,
+        },
+        style,
+      ]}
+      {...rest}>
+      {icon && <Icon name={icon} size={s.iconSize} color={textColor} />}
+
+      <Text
+        variant="caption"
+        textStyle={[
+          styles.label,
+          { color: textColor, fontSize: s.fontSize, lineHeight: s.lineHeight },
+        ]}>
+        {label}
+      </Text>
+
+      {trailingIcon && <Icon name={trailingIcon} size={s.iconSize} color={textColor} />}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  label: {
+    fontWeight: '500',
+  },
+});

package/components/BottomNavBar.tsx

@@ -0,0 +1,118 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Icon, type IconName } from './Icon';
+
+export type BottomNavBarItem = {
+  id: string;
+  icon: IconName;
+  badge?: number;
+};
+
+export interface BottomNavBarProps {
+  items: BottomNavBarItem[];
+  activeItemId: string;
+  onItemPress: (itemId: string) => void;
+}
+
+/**
+ * Bottom navigation bar with lime circle active item indicator.
+ *
+ * ```tsx
+ * <BottomNavBar
+ *   items={[
+ *     { id: 'home', icon: 'house' },
+ *     { id: 'stats', icon: 'chart-bar' },
+ *     { id: 'profile', icon: 'user' },
+ *   ]}
+ *   activeItemId="home"
+ *   onItemPress={navigate}
+ * />
+ * ```
+ */
+export function BottomNavBar({ items, activeItemId, onItemPress }: BottomNavBarProps) {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: '#201f1f' + 'CC',
+          borderColor: '#ffffff1A',
+        },
+      ]}>
+      {items.map((item) => {
+        const isActive = item.id === activeItemId;
+
+        return (
+          <Pressable
+            key={item.id}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isActive }}
+            onPress={() => onItemPress(item.id)}
+            style={({ pressed }) => [
+              styles.item,
+              pressed && styles.pressed,
+            ]}>
+            {isActive ? (
+              <View style={styles.activeItem}>
+                <Icon
+                  name={item.icon}
+                  size={25}
+                  color="#141414"
+                  weight="regular"
+                />
+              </View>
+            ) : (
+              <View style={styles.inactiveItem}>
+                <Icon
+                  name={item.icon}
+                  size={25}
+                  color="#8e8d8b"
+                  weight="regular"
+                />
+              </View>
+            )}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 12,
+    borderRadius: 9999,
+    borderWidth: 1,
+  },
+  item: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  activeItem: {
+    width: 55,
+    height: 55,
+    borderRadius: 9999,
+    backgroundColor: '#cefe00',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#caf300',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 8,
+  },
+  inactiveItem: {
+    width: 60,
+    height: 60,
+    borderRadius: 9999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+  },
+});

package/components/Box.tsx

@@ -0,0 +1,99 @@
+import { View, type ViewProps } from 'react-native';
+
+import { useTheme } from '../theme';
+import { spacing, type SpacingToken } from '../tokens/spacing';
+import { radius, type RadiusToken } from '../tokens/radius';
+import { elevation, type ElevationToken } from '../tokens/elevation';
+
+export interface BoxProps extends ViewProps {
+  /** Background color token key from the resolved theme. */
+  bg?: 'backgroundScreen' | 'shapePrimary' | 'shapeSecondary';
+  /** Apply a named spacing token as padding. */
+  p?: SpacingToken;
+  /** Apply a named spacing token as horizontal padding. */
+  px?: SpacingToken;
+  /** Apply a named spacing token as vertical padding. */
+  py?: SpacingToken;
+  /** Apply a named spacing token as margin. */
+  m?: SpacingToken;
+  /** Apply a named spacing token as horizontal margin. */
+  mx?: SpacingToken;
+  /** Apply a named spacing token as vertical margin. */
+  my?: SpacingToken;
+  /** Apply a named radius token as border radius. */
+  rounded?: RadiusToken;
+  /** Apply a named elevation token as shadow. */
+  elevation?: ElevationToken;
+  /** Flex direction shortcut. */
+  direction?: 'row' | 'column';
+  /** Align items shortcut. */
+  align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+  /** Justify content shortcut. */
+  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+  /** Gap between children. Raw pixel value. */
+  gap?: number;
+  /** Full width. */
+  fullWidth?: boolean;
+  /** Full height. */
+  fullHeight?: boolean;
+}
+
+/**
+ * Primitive layout component that maps design tokens to React Native styles.
+ *
+ * ```tsx
+ * <Box bg="shapePrimary" p="lg" rounded="xl" elevation="md">
+ *   <Text>Hello</Text>
+ * </Box>
+ * ```
+ */
+export function Box({
+  bg,
+  p,
+  px,
+  py,
+  m,
+  mx,
+  my,
+  rounded,
+  elevation: elev,
+  direction,
+  align,
+  justify,
+  gap,
+  fullWidth,
+  fullHeight,
+  style,
+  children,
+  ...rest
+}: BoxProps) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        bg && { backgroundColor: theme.colors[bg] },
+        p !== undefined && { padding: spacing[p] },
+        px !== undefined && { paddingHorizontal: spacing[px] },
+        py !== undefined && { paddingVertical: spacing[py] },
+        m !== undefined && { margin: spacing[m] },
+        mx !== undefined && { marginHorizontal: spacing[mx] },
+        my !== undefined && { marginVertical: spacing[my] },
+        rounded !== undefined && { borderRadius: radius[rounded] },
+        elev !== undefined && elevation[elev],
+        direction !== undefined && { flexDirection: direction },
+        align !== undefined && { alignItems: align },
+        justify !== undefined && { justifyContent: justify },
+        gap !== undefined && { gap },
+        fullWidth && { width: '100%' as never },
+        fullHeight && { height: '100%' as never },
+        style,
+      ]}
+      {...rest}>
+      {children}
+    </View>
+  );
+}
+
+// Re-export ViewProps so consumers don't need to import react-native separately.
+export type { ViewProps } from 'react-native';