24 lines
1.1 KiB
TypeScript
24 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { colors, radius, spacing } from './tokens';
|
|
|
|
type CardTone = 'surface' | 'sky' | 'skySoft' | 'cobaltSoft' | 'coralSoft';
|
|
type Props = { children: ReactNode; tone?: CardTone; style?: StyleProp<ViewStyle>; padding?: number; testID?: string };
|
|
|
|
const toneStyle = {
|
|
surface: { backgroundColor: colors.neutral.surface, borderWidth: 1, borderColor: colors.neutral.border },
|
|
sky: { backgroundColor: colors.brand.sky },
|
|
skySoft: { backgroundColor: colors.brand.skySoft },
|
|
cobaltSoft: { backgroundColor: colors.brand.cobaltSoft },
|
|
coralSoft: { backgroundColor: colors.brand.coralSoft },
|
|
} as const;
|
|
|
|
/** Flat grouped surface. Floating elevation is intentionally reserved for overlays. */
|
|
export function Card({ children, tone = 'surface', padding = spacing[5], style, testID }: Props) {
|
|
return <View testID={testID} style={[styles.base, toneStyle[tone], { padding }, style]}>{children}</View>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
base: { borderRadius: radius.card },
|
|
});
|