@nwartz/design-system 0.1.0

package/components/Button.tsx

@@ -0,0 +1,158 @@
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme';
+import { radius } from '../tokens/radius';
+import { spacing } from '../tokens/spacing';
+import { Text } from './Text';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost';
+
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+  label: string;
+  variant?: ButtonVariant;
+  loading?: boolean;
+  size?: 'md' | 'sm';
+  style?: StyleProp<ViewStyle>;
+}
+
+function palette(
+  variant: ButtonVariant,
+  colors: { textPrimary: string; textSecondary: string; shapeSecondary: string; backgroundScreen: string },
+  pressed: boolean,
+  brandPrimary?: string,
+  brandOnPrimary?: string,
+) {
+  const primary = brandPrimary ?? '#3D8BFF';
+  const onPrimary = brandOnPrimary ?? '#FFFFFF';
+
+  switch (variant) {
+    case 'primary':
+      return {
+        background: pressed ? primary + 'CC' : primary,
+        border: 'transparent',
+        label: onPrimary,
+      };
+    case 'secondary':
+      return {
+        background: pressed ? colors.shapeSecondary + 'CC' : colors.shapeSecondary,
+        border: 'transparent',
+        label: colors.textPrimary,
+      };
+    case 'outline':
+      return {
+        background: pressed ? colors.shapeSecondary + '33' : 'transparent',
+        border: colors.shapeSecondary,
+        label: colors.textPrimary,
+      };
+    case 'danger':
+      return {
+        background: pressed ? '#FF4545' + '1A' : 'transparent',
+        border: '#FF4545' + '66',
+        label: '#FF4545',
+      };
+    case 'ghost':
+      return {
+        background: pressed ? colors.shapeSecondary + '33' : 'transparent',
+        border: 'transparent',
+        label: colors.textSecondary,
+      };
+  }
+}
+
+/**
+ * Design-system button with variants and loading state.
+ *
+ * ```tsx
+ * <Button label="Save" variant="primary" />
+ * <Button label="Cancel" variant="ghost" />
+ * ```
+ */
+export function Button({
+  label,
+  variant = 'primary',
+  loading = false,
+  size = 'md',
+  style,
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const theme = useTheme();
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={isDisabled}
+      style={({ pressed }) => {
+        const colors = palette(variant, theme.colors, pressed);
+
+        return [
+          styles.base,
+          size === 'sm' && styles.small,
+          {
+            backgroundColor: colors.background,
+            borderColor: colors.border,
+            opacity: isDisabled ? 0.5 : 1,
+          },
+          style,
+        ] as StyleProp<ViewStyle>;
+      }}
+      {...rest}>
+      {({ pressed }) => {
+        const colors = palette(variant, theme.colors, pressed);
+
+        return (
+          <View style={styles.row}>
+            {loading ? (
+              <ActivityIndicator size="small" color={colors.label} />
+            ) : null}
+            <Text
+              variant="body"
+              color="textPrimary"
+              textStyle={[styles.label, size === 'sm' && styles.labelSmall, { color: colors.label }]}>
+              {label}
+            </Text>
+          </View>
+        );
+      }}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing['2xl'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  small: {
+    paddingVertical: spacing.sm + spacing.xxs,
+    paddingHorizontal: spacing.lg,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  labelSmall: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});

package/components/Card.tsx

@@ -0,0 +1,60 @@
+import { StyleSheet, View, type ViewProps } from 'react-native';
+
+import { useTheme } from '../theme';
+import { radius, type RadiusToken } from '../tokens/radius';
+import { elevation } from '../tokens/elevation';
+import { spacing } from '../tokens/spacing';
+
+export interface CardProps extends ViewProps {
+  /** Elevation level. Defaults to `sm`. */
+  level?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Remove default padding. */
+  noPadding?: boolean;
+  /** Show a border around the card. */
+  bordered?: boolean;
+  /** Override the default border radius. */
+  radius?: RadiusToken;
+}
+
+/**
+ * Surface card component with design-system shadow and radius.
+ *
+ * ```tsx
+ * <Card level="md">
+ *   <Text>Content</Text>
+ * </Card>
+ * ```
+ */
+export function Card({
+  level = 'sm',
+  noPadding = false,
+  bordered = false,
+  radius: radiusToken,
+  style,
+  children,
+  ...rest
+}: CardProps) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.card,
+        elevation[level],
+        { backgroundColor: theme.colors.shapePrimary },
+        radiusToken !== undefined && { borderRadius: radius[radiusToken] },
+        bordered && { borderWidth: 1, borderColor: theme.colors.shapeTertiary },
+        !noPadding && { padding: spacing.lg },
+        style,
+      ]}
+      {...rest}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: radius.lg,
+  },
+});

package/components/Checkbox.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export type CheckboxType = 'checkbox' | 'radio';
+export type CheckboxSize = 'sm' | 'md';
+
+export interface CheckboxProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  type?: CheckboxType;
+  indeterminate?: boolean;
+}
+
+const sizeConfig = {
+  sm: { boxSize: 16, iconSize: 12, gap: 8, fontSize: 14, lineHeight: 20, borderRadius: 4, radioRadius: 8 },
+  md: { boxSize: 20, iconSize: 12, gap: 12, fontSize: 16, lineHeight: 24, borderRadius: 6, radioRadius: 10 },
+} as const;
+
+/**
+ * Checkbox or radio button for selection with label.
+ *
+ * ```tsx
+ * <Checkbox value={selected} onValueChange={setSelected} label="I agree" />
+ * <Checkbox value={v} onValueChange={setV} type="radio" label="Option A" />
+ * <Checkbox value={partial} onValueChange={setPartial} indeterminate />
+ * ```
+ */
+export function Checkbox({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  size = 'md',
+  type = 'checkbox',
+  indeterminate = false,
+}: CheckboxProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const s = sizeConfig[size];
+
+  const isChecked = value || indeterminate;
+  const isRadio = type === 'radio';
+
+  const getBoxStyles = () => {
+    if (isRadio) {
+      const br = isChecked ? 500 : s.radioRadius;
+      const borderColor = isChecked || isHovered ? '#cefe00' : '#d9d8d7';
+
+      return {
+        borderRadius: br,
+        backgroundColor: isChecked ? '#cefe00' : '#faf9f7',
+        borderColor,
+      };
+    }
+
+    let bgColor = '#faf9f7';
+
+    if (isChecked) {
+      bgColor = isHovered ? '#87ad00' : '#cefe00';
+    }
+
+    let borderColor = '#d9d8d7';
+
+    if (isChecked) {
+      borderColor = isHovered ? '#87ad00' : '#cefe00';
+    } else if (isHovered) {
+      borderColor = '#cefe00';
+    }
+
+    return {
+      borderRadius: s.borderRadius,
+      backgroundColor: bgColor,
+      borderColor,
+    };
+  };
+
+  const boxStyles = getBoxStyles();
+
+  return (
+    <Pressable
+      accessibilityRole={isRadio ? 'radio' : 'checkbox'}
+      accessibilityState={{ checked: value, disabled }}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      style={({ pressed }) => [
+        styles.container,
+        { gap: s.gap },
+        pressed && styles.pressed,
+        disabled && styles.disabled,
+      ]}>
+      <View
+        style={[
+          styles.box,
+          {
+            width: s.boxSize,
+            height: s.boxSize,
+            borderWidth: isChecked ? 0 : 1.5,
+            ...boxStyles,
+          },
+        ]}>
+        {indeterminate ? (
+          <View style={[styles.indeterminateBar, { backgroundColor: '#ffffff' }]} />
+        ) : (
+          isChecked && (
+            <Icon name="check" size={s.iconSize} color="#ffffff" weight="bold" />
+          )
+        )}
+      </View>
+
+      {label && (
+        <Text
+          variant="body"
+          textStyle={[styles.label, { color: '#141414', fontSize: s.fontSize, lineHeight: s.lineHeight }]}>
+          {label}
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+  box: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indeterminateBar: {
+    width: 10,
+    height: 2,
+    borderRadius: 1,
+  },
+  label: {
+    fontWeight: '500',
+  },
+});