@designbasekorea/ui-native 0.1.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,255 @@
+/**
+ * Button 컴포넌트 (React Native)
+ * 
+ * 목적: 일관된 스타일과 접근성을 가진 버튼 컴포넌트
+ * 기능: 다양한 variant, size 지원, 아이콘 버튼, 로딩 상태
+ * 
+ * 스타일링: 모든 색상·사이즈·간격·radius는 토큰에서 자동으로 가져옴
+ *   - 색상: theme.color.semantic.button.{variant}.{속성}
+ *   - 사이즈: theme.size.semantic.button.{s|m|l}
+ *   - 간격: theme.spacing.aliases.padding.{xs|s|m}
+ *   - 라운드: theme.border.semantic.radius.button.{s|m|l|pill}
+ *   - 폰트: theme.typography.foundation.fontSize.{s|base|l}
+ * 
+ * 원본: packages/ui/src/components/Button/Button.tsx
+ */
+
+import React from 'react';
+import {
+    Pressable,
+    Text,
+    ActivityIndicator,
+    StyleSheet,
+    View,
+    type ViewStyle,
+    type TextStyle,
+    type PressableProps,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+import type { DesignbaseThemeTokens } from '../../theme/tokens';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
+export type ButtonSize = 's' | 'm' | 'l';
+export type ButtonRadius = 's' | 'm' | 'l' | 'pill';
+
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+    /** 버튼 variant */
+    variant?: ButtonVariant;
+    /** 버튼 크기 */
+    size?: ButtonSize;
+    /** 둥글기 */
+    radius?: ButtonRadius;
+    /** 전체 너비 여부 */
+    fullWidth?: boolean;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 로딩 상태 */
+    loading?: boolean;
+    /** 로딩 중 표시할 텍스트 */
+    loadingText?: string;
+    /** 아이콘 전용 버튼 여부 */
+    iconOnly?: boolean;
+    /** 시작 아이콘 */
+    startIcon?: React.ReactNode;
+    /** 끝 아이콘 */
+    endIcon?: React.ReactNode;
+    /** 버튼 내용 */
+    children?: React.ReactNode;
+    /** 클릭 핸들러 */
+    onPress?: () => void;
+    /** 추가 스타일 */
+    style?: ViewStyle;
+    /** 텍스트 스타일 오버라이드 */
+    textStyle?: TextStyle;
+}
+
+/** semantic 토큰에서 variant별 색상 가져오기 */
+function getVariantColors(variant: ButtonVariant, theme: DesignbaseThemeTokens) {
+    const btnTokens = theme.color.semantic?.button;
+    const aliases = theme.color.aliases;
+
+    switch (variant) {
+        case 'primary':
+            return {
+                bg: btnTokens?.primary?.['bg-default'] ?? aliases?.brand?.primary ?? '#006FFF',
+                bgPressed: btnTokens?.primary?.['bg-active'] ?? '#0D4B9B',
+                text: btnTokens?.primary?.['text-default'] ?? '#FFFFFF',
+                border: btnTokens?.primary?.['border-default'] ?? 'transparent',
+            };
+        case 'secondary':
+            return {
+                bg: btnTokens?.secondary?.['bg-default'] ?? aliases?.surface?.['layer-1'] ?? '#F2F8FC',
+                bgPressed: btnTokens?.secondary?.['bg-hover'] ?? '#E8EEF2',
+                text: btnTokens?.secondary?.['text-default'] ?? aliases?.text?.link ?? '#006FFF',
+                border: btnTokens?.secondary?.['border-default'] ?? aliases?.border?.base ?? '#E8EEF2',
+            };
+        case 'tertiary':
+            return {
+                bg: btnTokens?.tertiary?.['bg-default'] ?? aliases?.surface?.base ?? '#FFFFFF',
+                bgPressed: btnTokens?.tertiary?.['bg-hover'] ?? '#F2F8FC',
+                text: btnTokens?.tertiary?.['text-default'] ?? aliases?.text?.primary ?? '#17191A',
+                border: btnTokens?.tertiary?.['border-default'] ?? aliases?.border?.base ?? '#E8EEF2',
+            };
+        case 'danger':
+            return {
+                bg: aliases?.feedback?.error?.fg ?? '#DC2626',
+                bgPressed: '#B91C1C',
+                text: aliases?.text?.['inverse-primary'] ?? '#FFFFFF',
+                border: 'transparent',
+            };
+        case 'ghost':
+        default:
+            return {
+                bg: 'transparent',
+                bgPressed: aliases?.surface?.['layer-1'] ?? '#F2F8FC',
+                text: aliases?.text?.primary ?? '#17191A',
+                border: 'transparent',
+            };
+    }
+}
+
+/** semantic 토큰에서 size별 높이·패딩·폰트 가져오기 */
+function getSizeValues(size: ButtonSize, theme: DesignbaseThemeTokens) {
+    const btnSize = theme.size.semantic?.button;
+    const padding = theme.spacing.aliases?.padding ?? theme.spacing.aliases?.scale;
+    const fontSize = theme.typography.foundation?.fontSize;
+
+    switch (size) {
+        case 's':
+            return {
+                height: btnSize?.s ?? 24,
+                paddingH: padding?.xs ?? 4,
+                fontSize: fontSize?.xs ?? 12,
+                gap: padding?.xxs ?? 2,
+            };
+        case 'l':
+            return {
+                height: btnSize?.l ?? 40,
+                paddingH: padding?.m ?? 12,
+                fontSize: fontSize?.l ?? 18,
+                gap: padding?.xs ?? 4,
+            };
+        case 'm':
+        default:
+            return {
+                height: btnSize?.m ?? 32,
+                paddingH: padding?.s ?? 8,
+                fontSize: fontSize?.s ?? 14,
+                gap: padding?.xxs ?? 2,
+            };
+    }
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    variant = 'primary',
+    size = 'm',
+    radius,
+    fullWidth = false,
+    disabled = false,
+    loading = false,
+    loadingText,
+    iconOnly = false,
+    startIcon,
+    endIcon,
+    children,
+    onPress,
+    style,
+    textStyle,
+    ...props
+}) => {
+    const { theme } = useTheme();
+    const colors = getVariantColors(variant, theme);
+    const sizeValues = getSizeValues(size, theme);
+
+    // radius 토큰에서 가져오기
+    const radiusTokens = theme.border.semantic?.radius?.button;
+    const resolvedRadius = radius || (size === 's' ? 's' : size === 'l' ? 'l' : 'm');
+    const borderRadiusValue = radiusTokens?.[resolvedRadius] ?? 8;
+
+    const isDisabled = disabled || loading;
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const renderContent = (pressed: boolean) => {
+        if (loading) {
+            return (
+                <>
+                    <ActivityIndicator size="small" color={colors.text} />
+                    {loadingText ? (
+                        <Text style={[styles.text, { fontSize: sizeValues.fontSize, color: colors.text }, textStyle]}>
+                            {loadingText}
+                        </Text>
+                    ) : (!iconOnly && children && typeof children === 'string') ? (
+                        <Text style={[styles.text, { fontSize: sizeValues.fontSize, color: colors.text }, textStyle]}>
+                            {children}
+                        </Text>
+                    ) : null}
+                </>
+            );
+        }
+
+        return (
+            <>
+                {startIcon && <View style={styles.iconWrapper}>{startIcon}</View>}
+                {children && !iconOnly && (
+                    typeof children === 'string' ? (
+                        <Text style={[styles.text, { fontSize: sizeValues.fontSize, color: colors.text }, textStyle]}>
+                            {children}
+                        </Text>
+                    ) : children
+                )}
+                {iconOnly && children}
+                {endIcon && <View style={styles.iconWrapper}>{endIcon}</View>}
+            </>
+        );
+    };
+
+    return (
+        <Pressable
+            {...props}
+            onPress={onPress}
+            disabled={isDisabled}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: isDisabled, busy: loading }}
+            style={({ pressed }) => [
+                styles.base,
+                {
+                    height: sizeValues.height,
+                    paddingHorizontal: sizeValues.paddingH,
+                    gap: sizeValues.gap,
+                    borderRadius: borderRadiusValue,
+                    backgroundColor: pressed && !isDisabled ? colors.bgPressed : colors.bg,
+                    borderColor: colors.border,
+                    borderWidth: variant === 'secondary' || variant === 'tertiary' ? 1 : 0,
+                },
+                fullWidth && styles.fullWidth,
+                iconOnly && { width: sizeValues.height, paddingHorizontal: 0 },
+                isDisabled && { opacity: disabledOpacity },
+                style,
+            ]}
+        >
+            {({ pressed }) => renderContent(pressed)}
+        </Pressable>
+    );
+};
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+    base: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    fullWidth: {
+        width: '100%',
+    },
+    text: {
+        fontWeight: '500',
+    },
+    iconWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonRadius } from './Button';

package/src/components/Card/Card.tsx

@@ -0,0 +1,147 @@
+/**
+ * Card 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.surface.{base|layer-1|layer-2}, border.{base}
+ *   - radius: theme.border.semantic.radius.card.{s|m|l}
+ *   - 패딩: theme.spacing.aliases.padding.{s|m|l}
+ *   - 그림자: theme.shadow.foundation.{s|m|l}
+ *   - 폰트: theme.typography.foundation.fontSize.{s|base|l|xl}
+ * 
+ * 원본: packages/ui/src/components/Card/Card.tsx
+ */
+
+import React from 'react';
+import {
+    View,
+    Text,
+    Image,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type ImageSourcePropType,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
+export type CardSize = 's' | 'm' | 'l';
+
+export interface CardProps {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    children?: React.ReactNode;
+    image?: ImageSourcePropType;
+    imageHeight?: number;
+    variant?: CardVariant;
+    size?: CardSize;
+    fullWidth?: boolean;
+    clickable?: boolean;
+    disabled?: boolean;
+    headerRight?: React.ReactNode;
+    footer?: React.ReactNode;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+
+export const Card: React.FC<CardProps> = ({
+    title, subtitle, description, children, image, imageHeight = 180,
+    variant = 'default', size = 'm', fullWidth = false, clickable = false,
+    disabled = false, headerRight, footer, onPress, style,
+}) => {
+    const { theme } = useTheme();
+
+    // ─── 토큰에서 가져오기 ───
+    const surface = theme.color.aliases?.surface ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const text = theme.color.aliases?.text ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const shadow = theme.shadow.foundation ?? {};
+    const cardRadius = theme.border.semantic?.radius?.card ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const paddingValue = { s: padding.s ?? 8, m: padding.m ?? 12, l: padding.l ?? 20 }[size];
+    const titleSize = { s: fontSize.s ?? 14, m: fontSize.l ?? 18, l: fontSize.xl ?? 20 }[size];
+    const borderRadius = cardRadius[size] ?? 8;
+
+    // RN shadow 객체 변환
+    const toShadowStyle = (s: any) => s ? {
+        shadowColor: s.shadowColor ?? '#000',
+        shadowOffset: { width: s.shadowOffsetX ?? 0, height: s.shadowOffsetY ?? 0 },
+        shadowOpacity: s.shadowOpacity ?? 0.1,
+        shadowRadius: s.shadowRadius ?? 4,
+        elevation: s.elevation ?? 3,
+    } : {};
+
+    const variantStyles: ViewStyle = (() => {
+        switch (variant) {
+            case 'elevated':
+                return { backgroundColor: surface.base ?? '#FFFFFF', ...toShadowStyle(shadow.m) };
+            case 'outlined':
+                return { backgroundColor: surface.base ?? '#FFFFFF', borderWidth: 1, borderColor: borders.base ?? '#E8EEF2' };
+            case 'filled':
+                return { backgroundColor: surface['layer-1'] ?? '#F2F8FC' };
+            default:
+                return { backgroundColor: surface.base ?? '#FFFFFF', ...toShadowStyle(shadow.s) };
+        }
+    })();
+
+    const content = (
+        <View style={[
+            styles.container, variantStyles, { borderRadius },
+            fullWidth && styles.fullWidth,
+            disabled && { opacity: disabledOpacity },
+            style,
+        ]}>
+            {image && (
+                <Image source={image} style={[styles.image, { height: imageHeight, borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius }]} resizeMode="cover" />
+            )}
+
+            <View style={[styles.content, { padding: paddingValue }]}>
+                {(title || subtitle || headerRight) && (
+                    <View style={styles.header}>
+                        <View style={styles.headerText}>
+                            {title && <Text style={[styles.title, { fontSize: titleSize, color: text.primary ?? '#17191A' }]}>{title}</Text>}
+                            {subtitle && <Text style={{ fontSize: fontSize.xs ?? 12, color: text.secondary ?? '#464A4D' }}>{subtitle}</Text>}
+                        </View>
+                        {headerRight}
+                    </View>
+                )}
+                {description && <Text style={{ fontSize: fontSize.s ?? 14, color: text.secondary ?? '#464A4D', lineHeight: 20 }}>{description}</Text>}
+                {children}
+            </View>
+
+            {footer && (
+                <View style={[styles.footer, { padding: paddingValue, borderTopColor: borders.base ?? '#E8EEF2' }]}>
+                    {footer}
+                </View>
+            )}
+        </View>
+    );
+
+    if (clickable && onPress) {
+        return (
+            <Pressable onPress={onPress} disabled={disabled} accessibilityRole="button"
+                style={({ pressed }) => pressed ? { opacity: 0.8 } : undefined}>
+                {content}
+            </Pressable>
+        );
+    }
+    return content;
+};
+
+Card.displayName = 'Card';
+
+const styles = StyleSheet.create({
+    container: { overflow: 'hidden' },
+    fullWidth: { width: '100%' },
+    image: { width: '100%' },
+    content: { gap: 8 },
+    header: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' },
+    headerText: { flex: 1, gap: 2 },
+    title: { fontWeight: '600' },
+    footer: { borderTopWidth: 1 },
+});
+
+export default Card;

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardSize } from './Card';

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,95 @@
+/**
+ * Checkbox 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 사이즈: theme.size.semantic.checkbox.{s|m|l}
+ *   - 색상: theme.color.aliases.{brand.primary|border.base|surface.base}
+ *   - 라운드: theme.border.semantic.radius.checkbox.{s|m|l}
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ */
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type CheckboxSize = 's' | 'm' | 'l';
+
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    description?: string;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    style?: ViewStyle;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+    checked: controlledChecked, defaultChecked = false, onChange,
+    label, description, size = 'm', disabled = false, indeterminate = false, style,
+}) => {
+    const { theme } = useTheme();
+    const [internalChecked, setInternalChecked] = React.useState(controlledChecked ?? defaultChecked);
+    const isChecked = controlledChecked ?? internalChecked;
+
+    const brand = theme.color.aliases?.brand ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const surface = theme.color.aliases?.surface ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const checkboxSize = theme.size.semantic?.checkbox ?? {};
+    const checkboxRadius = theme.border.semantic?.radius?.checkbox ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+    const gap = theme.spacing.aliases?.gap ?? {};
+
+    const boxSize = checkboxSize[size] ?? { s: 16, m: 20, l: 24 }[size];
+    const borderRadius = checkboxRadius[size] ?? { s: 3, m: 4, l: 6 }[size];
+    const labelFontSize = { s: fontSize.xs ?? 12, m: fontSize.s ?? 14, l: fontSize.base ?? 16 }[size];
+    const checkMarkSize = { s: 10, m: 12, l: 16 }[size];
+
+    const handlePress = () => {
+        if (disabled) return;
+        const newValue = !isChecked;
+        setInternalChecked(newValue);
+        onChange?.(newValue);
+    };
+
+    return (
+        <Pressable onPress={handlePress} disabled={disabled}
+            accessibilityRole="checkbox" accessibilityState={{ checked: isChecked, disabled }}
+            style={[styles.container, { gap: gap.s ?? 8 }, disabled && { opacity: disabledOpacity }, style]}>
+            <View style={[
+                styles.box,
+                {
+                    width: boxSize, height: boxSize, borderRadius,
+                    backgroundColor: isChecked || indeterminate ? (brand.primary ?? '#006FFF') : (surface.base ?? '#FFFFFF'),
+                    borderColor: isChecked || indeterminate ? (brand.primary ?? '#006FFF') : (borders.base ?? '#E8EEF2'),
+                    borderWidth: isChecked || indeterminate ? 0 : 2,
+                },
+            ]}>
+                {isChecked && <Text style={[styles.checkMark, { fontSize: checkMarkSize, color: '#FFFFFF' }]}>✓</Text>}
+                {indeterminate && !isChecked && <View style={[styles.indeterminate, { width: boxSize * 0.5, backgroundColor: '#FFFFFF' }]} />}
+            </View>
+            {(label || description) && (
+                <View style={styles.labelContainer}>
+                    {label && <Text style={{ fontSize: labelFontSize, color: textColors.primary ?? '#17191A' }}>{label}</Text>}
+                    {description && <Text style={{ fontSize: fontSize.xs ?? 12, color: textColors.tertiary ?? '#757B80' }}>{description}</Text>}
+                </View>
+            )}
+        </Pressable>
+    );
+};
+
+Checkbox.displayName = 'Checkbox';
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'flex-start' },
+    box: { alignItems: 'center', justifyContent: 'center' },
+    checkMark: { fontWeight: '700' },
+    indeterminate: { height: 2, borderRadius: 1 },
+    labelContainer: { flex: 1, gap: 2, paddingTop: 1 },
+});
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox';

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,108 @@
+/**
+ * Chip 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand|surface|text|feedback}.*
+ *   - 폰트: theme.typography.foundation.fontSize.{xs|s|base}
+ *   - 간격: theme.spacing.aliases.padding.{xs|s|m}
+ * 
+ * 원본: packages/ui/src/components/Chip/Chip.tsx
+ */
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type ChipSize = 's' | 'm' | 'l';
+export type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'outlined';
+
+export interface ChipProps {
+    label: string;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    deletable?: boolean;
+    onDelete?: () => void;
+    onPress?: () => void;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    style?: ViewStyle;
+}
+
+export const Chip: React.FC<ChipProps> = ({
+    label, size = 'm', variant = 'default', deletable = false,
+    onDelete, onPress, startIcon, disabled = false, selected = false, style,
+}) => {
+    const { theme } = useTheme();
+
+    const aliases = theme.color.aliases ?? {};
+    const feedback = aliases.feedback ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const sizeConfig = {
+        s: { height: 24, fontSize: fontSize.xs ?? 12 - 1, paddingH: padding.s ?? 8, gap: padding.xxs ?? 2 },
+        m: { height: 32, fontSize: fontSize.xs ?? 12, paddingH: padding.m ?? 12, gap: padding.xs ?? 4 },
+        l: { height: 40, fontSize: fontSize.s ?? 14, paddingH: padding.l ?? 20, gap: padding.s ?? 8 },
+    }[size];
+
+    const variantStyles = (() => {
+        const colors: Record<string, { bg: string; text: string; border: string }> = {
+            default: { bg: aliases.surface?.['layer-2'] ?? '#E8EEF2', text: aliases.text?.primary ?? '#17191A', border: 'transparent' },
+            primary: { bg: (aliases.brand?.primary ?? '#006FFF') + '15', text: aliases.brand?.primary ?? '#006FFF', border: 'transparent' },
+            success: { bg: feedback.success?.bg ?? '#F0FDF5', text: feedback.success?.fg ?? '#16A34A', border: 'transparent' },
+            warning: { bg: feedback.warning?.bg ?? '#FFFFE7', text: feedback.warning?.fg ?? '#D1B400', border: 'transparent' },
+            danger: { bg: feedback.error?.bg ?? '#FEF2F2', text: feedback.error?.fg ?? '#DC2626', border: 'transparent' },
+            info: { bg: feedback.info?.bg ?? '#EDF9FF', text: feedback.info?.fg ?? '#0683FF', border: 'transparent' },
+            outlined: { bg: 'transparent', text: aliases.text?.primary ?? '#17191A', border: aliases.border?.base ?? '#E8EEF2' },
+        };
+        return colors[variant] || colors.default;
+    })();
+
+    const chipContent = (
+        <View style={[
+            styles.container,
+            {
+                height: sizeConfig.height, paddingHorizontal: sizeConfig.paddingH, gap: sizeConfig.gap,
+                borderRadius: sizeConfig.height / 2,
+                backgroundColor: selected ? (aliases.brand?.primary ?? '#006FFF') + '20' : variantStyles.bg,
+                borderWidth: 1,
+                borderColor: selected ? (aliases.brand?.primary ?? '#006FFF') : variantStyles.border,
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ]}>
+            {startIcon && <View>{startIcon}</View>}
+            <Text style={[styles.label, {
+                fontSize: sizeConfig.fontSize,
+                color: selected ? (aliases.brand?.primary ?? '#006FFF') : variantStyles.text,
+            }]}>{label}</Text>
+            {deletable && (
+                <Pressable onPress={() => !disabled && onDelete?.()} hitSlop={8}
+                    accessibilityRole="button" accessibilityLabel={`${label} 삭제`}>
+                    <Text style={[styles.deleteButton, { fontSize: sizeConfig.fontSize, color: variantStyles.text }]}>✕</Text>
+                </Pressable>
+            )}
+        </View>
+    );
+
+    if (onPress) {
+        return (
+            <Pressable onPress={onPress} disabled={disabled} accessibilityRole="button"
+                style={({ pressed }) => pressed ? { opacity: 0.7 } : undefined}>
+                {chipContent}
+            </Pressable>
+        );
+    }
+    return chipContent;
+};
+
+Chip.displayName = 'Chip';
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start' },
+    label: { fontWeight: '500' },
+    deleteButton: { fontWeight: '600', opacity: 0.6 },
+});
+
+export default Chip;

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipSize, ChipVariant } from './Chip';

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,41 @@
+/**
+ * Divider 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.border.{base|muted}
+ *   - 간격: theme.spacing.aliases.margin.*
+ * 
+ * 원본: packages/ui/src/components/Divider/Divider.tsx
+ */
+
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    thickness?: number;
+    color?: string;
+    length?: number;
+    margin?: number;
+    style?: ViewStyle;
+}
+
+export const Divider: React.FC<DividerProps> = ({
+    orientation = 'horizontal', thickness, color, length, margin, style,
+}) => {
+    const { theme } = useTheme();
+
+    const borderWidth = theme.border.foundation?.width ?? {};
+    const dividerColor = color ?? theme.color.aliases?.border?.base ?? '#E8EEF2';
+    const dividerThickness = thickness ?? borderWidth[2] ?? 1;
+
+    const dividerStyle: ViewStyle = orientation === 'horizontal'
+        ? { height: dividerThickness, backgroundColor: dividerColor, width: '100%', marginVertical: margin }
+        : { width: dividerThickness, backgroundColor: dividerColor, height: length || '100%', marginHorizontal: margin };
+
+    return <View style={[dividerStyle, style]} accessibilityRole="none" />;
+};
+
+Divider.displayName = 'Divider';
+export default Divider;

package/src/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';