@designbasekorea/ui-native 0.1.0

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,128 @@
+/**
+ * Toast 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.inverse
+ *   - 텍스트: theme.color.aliases.text.inverse-primary
+ *   - 아이콘: theme.color.aliases.feedback.{success|warning|error|info}.fg
+ *   - 라운드: theme.border.semantic.radius.l
+ *   - 패딩: theme.spacing.aliases.padding.{s|m}
+ *   - 그림자: theme.shadow.foundation.l
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Pressable, Animated, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+export interface ToastProps {
+    visible: boolean;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+    onDismiss?: () => void;
+    action?: { label: string; onPress: () => void };
+    position?: 'top' | 'bottom';
+    style?: ViewStyle;
+}
+
+const VARIANT_ICONS: Record<ToastVariant, string> = {
+    default: '', success: '✓', warning: '⚠', error: '✕', info: 'ℹ',
+};
+
+export const Toast: React.FC<ToastProps> = ({
+    visible, message, variant = 'default', duration = 3000,
+    onDismiss, action, position = 'bottom', style,
+}) => {
+    const { theme } = useTheme();
+    const opacity = useRef(new Animated.Value(0)).current;
+    const translateY = useRef(new Animated.Value(position === 'top' ? -20 : 20)).current;
+
+    const surface = theme.color.aliases?.surface ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const feedback = theme.color.aliases?.feedback ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const borderRadius = theme.border.semantic?.radius?.l ?? 12;
+    const shadow = theme.shadow.foundation ?? {};
+    const gap = theme.spacing.aliases?.gap ?? {};
+
+    const variantColors: Record<ToastVariant, string> = {
+        default: '', success: feedback.success?.fg ?? '#16A34A',
+        warning: feedback.warning?.fg ?? '#D1B400', error: feedback.error?.fg ?? '#DC2626',
+        info: feedback.info?.fg ?? '#0683FF',
+    };
+
+    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 ?? 15,
+        elevation: s.elevation ?? 8,
+    } : {};
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
+                Animated.spring(translateY, { toValue: 0, useNativeDriver: true, friction: 8 }),
+            ]).start();
+            if (duration > 0) {
+                const timer = setTimeout(() => onDismiss?.(), duration);
+                return () => clearTimeout(timer);
+            }
+        } else {
+            Animated.parallel([
+                Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }),
+                Animated.timing(translateY, { toValue: position === 'top' ? -20 : 20, duration: 150, useNativeDriver: true }),
+            ]).start();
+        }
+    }, [visible, duration, onDismiss, opacity, translateY, position]);
+
+    if (!visible) return null;
+
+    return (
+        <Animated.View style={[
+            styles.container,
+            position === 'top' ? styles.top : styles.bottom,
+            {
+                opacity, transform: [{ translateY }],
+                backgroundColor: surface.inverse ?? '#17191A',
+                borderRadius, paddingHorizontal: padding.m ?? 12, paddingVertical: padding.s ?? 8,
+                ...toShadowStyle(shadow.l),
+            },
+            style,
+        ]} accessibilityRole="alert">
+            <View style={[styles.content, { gap: gap.s ?? 8 }]}>
+                {variant !== 'default' && (
+                    <Text style={{ color: variantColors[variant], fontSize: fontSize.base ?? 16, fontWeight: '700' }}>
+                        {VARIANT_ICONS[variant]}
+                    </Text>
+                )}
+                <Text style={[styles.message, { color: textColors['inverse-primary'] ?? '#FFFFFF', fontSize: fontSize.s ?? 14 }]} numberOfLines={2}>
+                    {message}
+                </Text>
+                {action && (
+                    <Pressable onPress={action.onPress}>
+                        <Text style={{ color: theme.color.aliases?.brand?.primary ?? '#006FFF', fontSize: fontSize.s ?? 14, fontWeight: '600' }}>
+                            {action.label}
+                        </Text>
+                    </Pressable>
+                )}
+            </View>
+        </Animated.View>
+    );
+};
+
+Toast.displayName = 'Toast';
+
+const styles = StyleSheet.create({
+    container: { position: 'absolute', left: 16, right: 16, zIndex: 9999 },
+    top: { top: 60 },
+    bottom: { bottom: 40 },
+    content: { flexDirection: 'row', alignItems: 'center' },
+    message: { flex: 1 },
+});
+
+export default Toast;

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export type { ToastProps, ToastVariant } from './Toast';

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,109 @@
+/**
+ * Toggle 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand.primary|border.base}
+ *   - 그림자: theme.shadow.foundation.s
+ *   - 폰트: theme.typography.foundation.fontSize.base
+ *   - 투명도: theme.opacity.foundation.40
+ * 
+ * 원본: packages/ui/src/components/Toggle/Toggle.tsx
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, Pressable, Animated, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type ToggleSize = 's' | 'm' | 'l';
+
+export interface ToggleProps {
+    isSelected?: boolean;
+    defaultSelected?: boolean;
+    isDisabled?: boolean;
+    size?: ToggleSize;
+    children?: React.ReactNode;
+    onChange?: (isSelected: boolean) => void;
+    style?: ViewStyle;
+}
+
+export const Toggle: React.FC<ToggleProps> = ({
+    isSelected: controlledSelected, defaultSelected = false, isDisabled = false,
+    size = 'm', children, onChange, style,
+}) => {
+    const { theme } = useTheme();
+    const [selected, setSelected] = useState(controlledSelected ?? defaultSelected);
+    const animatedValue = useRef(new Animated.Value(selected ? 1 : 0)).current;
+
+    // ─── 토큰에서 가져오기 ───
+    const brandPrimary = theme.color.aliases?.brand?.primary ?? '#006FFF';
+    const borderBase = theme.color.aliases?.border?.base ?? '#E8EEF2';
+    const textPrimary = theme.color.aliases?.text?.primary ?? '#17191A';
+    const baseFontSize = theme.typography.foundation?.fontSize?.base ?? 16;
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+    const shadowS = theme.shadow.foundation?.s;
+    const thumbShadow = shadowS ? {
+        shadowColor: shadowS.shadowColor ?? '#000',
+        shadowOffset: { width: shadowS.shadowOffsetX ?? 0, height: shadowS.shadowOffsetY ?? 1 },
+        shadowOpacity: shadowS.shadowOpacity ?? 0.05,
+        shadowRadius: shadowS.shadowRadius ?? 2,
+        elevation: shadowS.elevation ?? 1,
+    } : {};
+
+    const gap = theme.spacing.aliases?.gap?.s ?? 8;
+
+    useEffect(() => {
+        if (controlledSelected !== undefined) setSelected(controlledSelected);
+    }, [controlledSelected]);
+
+    useEffect(() => {
+        Animated.spring(animatedValue, { toValue: selected ? 1 : 0, useNativeDriver: false, friction: 8, tension: 60 }).start();
+    }, [selected, animatedValue]);
+
+    const handleToggle = () => {
+        if (isDisabled) return;
+        const newValue = !selected;
+        setSelected(newValue);
+        onChange?.(newValue);
+    };
+
+    const sizeConfig = {
+        s: { trackW: 36, trackH: 20, thumbSize: 16, thumbOffset: 2 },
+        m: { trackW: 44, trackH: 24, thumbSize: 20, thumbOffset: 2 },
+        l: { trackW: 52, trackH: 28, thumbSize: 24, thumbOffset: 2 },
+    }[size];
+
+    const trackColor = animatedValue.interpolate({ inputRange: [0, 1], outputRange: [borderBase, brandPrimary] });
+    const thumbTranslateX = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [sizeConfig.thumbOffset, sizeConfig.trackW - sizeConfig.thumbSize - sizeConfig.thumbOffset],
+    });
+
+    return (
+        <Pressable onPress={handleToggle} disabled={isDisabled}
+            accessibilityRole="switch" accessibilityState={{ checked: selected, disabled: isDisabled }}
+            style={[styles.container, { gap }, isDisabled && { opacity: disabledOpacity }, style]}>
+            <Animated.View style={[styles.track, { width: sizeConfig.trackW, height: sizeConfig.trackH, borderRadius: sizeConfig.trackH / 2, backgroundColor: trackColor }]}>
+                <Animated.View style={[styles.thumb, {
+                    width: sizeConfig.thumbSize, height: sizeConfig.thumbSize,
+                    borderRadius: sizeConfig.thumbSize / 2,
+                    transform: [{ translateX: thumbTranslateX }],
+                    ...thumbShadow,
+                }]} />
+            </Animated.View>
+            {children && (typeof children === 'string'
+                ? <Text style={{ color: textPrimary, fontSize: baseFontSize }}>{children}</Text>
+                : children
+            )}
+        </Pressable>
+    );
+};
+
+Toggle.displayName = 'Toggle';
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center' },
+    track: { justifyContent: 'center' },
+    thumb: { backgroundColor: '#FFFFFF' },
+});
+
+export default Toggle;

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps, ToggleSize } from './Toggle';

package/src/index.ts

@@ -0,0 +1,87 @@
+/**
+ * @designbasekorea/ui-native
+ * 
+ * Designbase React Native UI 컴포넌트 라이브러리
+ * 앱 개발에 최적화된 네이티브 컴포넌트 (총 20개)
+ * 
+ * 토큰 파이프라인:
+ *   packages/tokens/tokens/*.json
+ *     → Style Dictionary (build:native)
+ *     → packages/tokens/dist/native/*.json
+ *     → ui-native/src/theme/tokens.ts (import)
+ *     → useTheme() 훅 → 컴포넌트 스타일링
+ */
+
+// ─── 테마 시스템 ───
+export { ThemeProvider } from './theme/ThemeProvider';
+export type { ThemeProviderProps, ThemeMode, ThemeContextValue } from './theme/ThemeProvider';
+export { useTheme } from './theme/useTheme';
+export { lightTheme, darkTheme, getTokenValue } from './theme/tokens';
+export type { DesignbaseThemeTokens, NativeTokens } from './theme/tokens';
+
+// ─── 기본 컴포넌트 ───
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonRadius } from './components/Button';
+
+export { Input } from './components/Input';
+export type { InputProps, InputSize } from './components/Input';
+
+export { Card } from './components/Card';
+export type { CardProps, CardVariant, CardSize } from './components/Card';
+
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant, BadgeType } from './components/Badge';
+
+export { Avatar } from './components/Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus } from './components/Avatar';
+
+export { Chip } from './components/Chip';
+export type { ChipProps, ChipSize, ChipVariant } from './components/Chip';
+
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps, SpinnerSize } from './components/Spinner';
+
+export { Toggle } from './components/Toggle';
+export type { ToggleProps, ToggleSize } from './components/Toggle';
+
+export { Alert } from './components/Alert';
+export type { AlertProps, AlertVariant } from './components/Alert';
+
+// ─── 레이아웃 & 네비게이션 ───
+export { Modal } from './components/Modal';
+export type { ModalProps, ModalSize } from './components/Modal';
+
+export { BottomSheet } from './components/BottomSheet';
+export type { BottomSheetProps } from './components/BottomSheet';
+
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabItem } from './components/Tabs';
+
+export { BottomNavigation } from './components/BottomNavigation';
+export type { BottomNavigationProps, BottomNavItem } from './components/BottomNavigation';
+
+export { Navbar } from './components/Navbar';
+export type { NavbarProps, NavbarAction } from './components/Navbar';
+
+// ─── 폼 컨트롤 ───
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps, CheckboxSize } from './components/Checkbox';
+
+export { Radio } from './components/Radio';
+export type { RadioProps, RadioOption, RadioSize } from './components/Radio';
+
+export { SearchBar } from './components/SearchBar';
+export type { SearchBarProps, SearchBarSize } from './components/SearchBar';
+
+// ─── 피드백 & 상태 ───
+export { Toast } from './components/Toast';
+export type { ToastProps, ToastVariant } from './components/Toast';
+
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './components/Skeleton';
+
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps, ProgressBarVariant, ProgressBarSize } from './components/ProgressBar';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,96 @@
+/**
+ * ThemeProvider 컴포넌트
+ * 
+ * 목적: React Context 기반 테마 제공 (웹의 CSS 변수 + data-theme 대체)
+ * 기능: Light/Dark 테마, 시스템 다크모드 자동 감지, 토큰 자동 연결
+ * 사용법: <ThemeProvider theme="auto"><App /></ThemeProvider>
+ */
+
+import React, { createContext, useMemo, useState, useCallback } from 'react';
+import { useColorScheme } from 'react-native';
+import { lightTheme, darkTheme, getTokenValue } from './tokens';
+import type { DesignbaseThemeTokens, NativeTokens } from './tokens';
+
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+export interface ThemeContextValue {
+    /** 파싱된 테마 토큰 (semantic, aliases, foundation 구조) */
+    theme: DesignbaseThemeTokens;
+    /** 원본 토큰 트리에서 점(.) 경로로 값 가져오기 */
+    token: (path: string) => any;
+    /** 현재 테마 모드 */
+    mode: ThemeMode;
+    /** 실제 적용된 테마 (auto 해석 후) */
+    resolvedMode: 'light' | 'dark';
+    /** 테마 모드 변경 */
+    setMode: (mode: ThemeMode) => void;
+    /** 라이트/다크 토글 */
+    toggleTheme: () => void;
+    /** 다크모드 여부 */
+    isDark: boolean;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export interface ThemeProviderProps {
+    /** 초기 테마 모드 ('light' | 'dark' | 'auto') */
+    theme?: ThemeMode;
+    /** 자식 컴포넌트 */
+    children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+    theme: initialMode = 'auto',
+    children,
+}) => {
+    const systemColorScheme = useColorScheme();
+    const [mode, setMode] = useState<ThemeMode>(initialMode);
+
+    const resolvedMode: 'light' | 'dark' = useMemo(() => {
+        if (mode === 'auto') {
+            return systemColorScheme === 'dark' ? 'dark' : 'light';
+        }
+        return mode;
+    }, [mode, systemColorScheme]);
+
+    const currentTheme = useMemo(
+        () => (resolvedMode === 'dark' ? darkTheme : lightTheme),
+        [resolvedMode],
+    );
+
+    const toggleTheme = useCallback(() => {
+        setMode((prev) => {
+            if (prev === 'auto') {
+                return systemColorScheme === 'dark' ? 'light' : 'dark';
+            }
+            return prev === 'light' ? 'dark' : 'light';
+        });
+    }, [systemColorScheme]);
+
+    /** 점(.) 경로로 원본 토큰 값을 가져오는 헬퍼 */
+    const token = useCallback(
+        (path: string) => getTokenValue(currentTheme.raw, path),
+        [currentTheme],
+    );
+
+    const value = useMemo<ThemeContextValue>(
+        () => ({
+            theme: currentTheme,
+            token,
+            mode,
+            resolvedMode,
+            setMode,
+            toggleTheme,
+            isDark: resolvedMode === 'dark',
+        }),
+        [currentTheme, token, mode, resolvedMode, toggleTheme],
+    );
+
+    return (
+        <ThemeContext.Provider value={value}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+ThemeProvider.displayName = 'ThemeProvider';

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps, ThemeMode, ThemeContextValue } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme, getTokenValue } from './tokens';
+export type { DesignbaseThemeTokens, NativeTokens } from './tokens';

package/src/theme/tokens.ts

@@ -0,0 +1,225 @@
+/**
+ * Designbase Native 디자인 토큰
+ * 
+ * 목적: @designbasekorea/tokens 패키지에서 빌드된 JSON을 RN에 맞게 구조화
+ * 파이프라인: tokens/JSON → Style Dictionary → dist/native/*.json → 이 파일에서 import
+ * 
+ * ⚠️ 이 파일은 자동생성된 JSON 기반입니다.
+ *    토큰 값을 변경하려면 packages/tokens/tokens/ 의 JSON을 수정한 뒤
+ *    `cd packages/tokens && npm run build:native` 를 실행하세요.
+ */
+
+// ─── 자동 빌드된 토큰 JSON import ───
+// build:native 실행 전에는 이 파일이 없을 수 있으므로
+// 하드코딩 폴백 + 빌드된 JSON 머지 방식을 사용합니다
+
+// ─── 타입 정의 ───
+
+/** 중첩 구조의 RN 토큰 (Style Dictionary nested JSON 출력과 동일) */
+export type NativeTokens = Record<string, any>;
+
+export interface DesignbaseThemeTokens {
+    /** 원본 토큰 트리 (자동빌드된 전체) */
+    raw: NativeTokens;
+    /** 색상 (semantic 레벨) */
+    color: {
+        semantic: NativeTokens;
+        aliases: NativeTokens;
+        foundation: NativeTokens;
+    };
+    /** 간격 (semantic 레벨) */
+    spacing: {
+        semantic: NativeTokens;
+        aliases: NativeTokens;
+        foundation: NativeTokens;
+    };
+    /** 보더 (semantic 레벨) */
+    border: {
+        semantic: NativeTokens;
+        aliases: NativeTokens;
+        foundation: NativeTokens;
+    };
+    /** 그림자 */
+    shadow: NativeTokens;
+    /** 사이즈 (semantic 레벨) */
+    size: {
+        semantic: NativeTokens;
+        aliases: NativeTokens;
+        foundation: NativeTokens;
+    };
+    /** 타이포그래피 */
+    typography: NativeTokens;
+    /** 투명도 */
+    opacity: NativeTokens;
+}
+
+/**
+ * 빌드된 JSON에서 특정 경로의 값을 안전하게 가져오기
+ */
+export function getTokenValue(tokens: NativeTokens, path: string): any {
+    return path.split('.').reduce((obj, key) => obj?.[key], tokens);
+}
+
+/**
+ * 빌드된 JSON 트리를 DesignbaseThemeTokens로 파싱
+ */
+function parseTokenTree(raw: NativeTokens): DesignbaseThemeTokens {
+    return {
+        raw,
+        color: {
+            semantic: raw?.color?.semantic ?? {},
+            aliases: raw?.color?.aliases ?? {},
+            foundation: raw?.color?.foundation ?? {},
+        },
+        spacing: {
+            semantic: raw?.spacing?.semantic ?? {},
+            aliases: raw?.spacing?.aliases ?? {},
+            foundation: raw?.spacing?.foundation ?? {},
+        },
+        border: {
+            semantic: raw?.border?.semantic ?? {},
+            aliases: raw?.border?.aliases ?? {},
+            foundation: raw?.border?.foundation ?? {},
+        },
+        shadow: raw?.shadow ?? {},
+        size: {
+            semantic: raw?.size?.semantic ?? {},
+            aliases: raw?.size?.aliases ?? {},
+            foundation: raw?.size?.foundation ?? {},
+        },
+        typography: raw?.typography ?? {},
+        opacity: raw?.opacity ?? {},
+    };
+}
+
+// ─── 폴백용 하드코딩 (빌드 전 개발용) ───
+const FALLBACK_LIGHT: NativeTokens = {
+    color: {
+        foundation: {
+            blue: { 600: '#0683FF', 700: '#006FFF', 800: '#0855C5', 900: '#0D4B9B' },
+            neutral: {
+                0: '#FFFFFF', white: '#FFFFFF', 50: '#F8FAFC', 100: '#F2F8FC',
+                200: '#E8EEF2', 300: '#BBC5CC', 400: '#A4ADB2', 500: '#8C9499',
+                600: '#757B80', 700: '#5E6366', 800: '#464A4D', 900: '#2F3133',
+                1000: '#17191A', 1100: '#000000',
+            },
+            red: { 50: '#FEF2F2', 100: '#FEE2E2', 500: '#EF4444', 600: '#DC2626' },
+            green: { 50: '#F0FDF5', 600: '#16A34A' },
+            yellow: { 50: '#FFFFE7', 600: '#D1B400' },
+        },
+        aliases: {
+            brand: { primary: '#006FFF' },
+            text: {
+                primary: '#17191A', secondary: '#464A4D', tertiary: '#757B80',
+                disabled: '#A4ADB2', link: '#006FFF', 'inverse-primary': '#FFFFFF',
+            },
+            surface: {
+                base: '#FFFFFF', 'layer-1': '#F2F8FC', 'layer-2': '#E8EEF2',
+                'layer-3': '#BBC5CC', muted: '#E8EEF2',
+            },
+            border: { base: '#E8EEF2', 'layer-1': '#BBC5CC', muted: '#F2F8FC' },
+            feedback: {
+                success: { fg: '#16A34A', bg: '#F0FDF5' },
+                warning: { fg: '#D1B400', bg: '#FFFFE7' },
+                error: { fg: '#DC2626', bg: '#FEF2F2' },
+                info: { fg: '#0683FF', bg: '#EDF9FF' },
+            },
+        },
+        semantic: {
+            button: {
+                primary: {
+                    'bg-default': '#006FFF', 'bg-hover': '#0855C5', 'bg-active': '#0D4B9B',
+                    'text-default': '#FFFFFF', 'border-default': '#006FFF',
+                },
+                secondary: {
+                    'bg-default': '#F2F8FC', 'bg-hover': '#E8EEF2',
+                    'text-default': '#006FFF', 'border-default': '#E8EEF2',
+                },
+                tertiary: {
+                    'bg-default': '#FFFFFF', 'bg-hover': '#F2F8FC',
+                    'text-default': '#17191A', 'border-default': '#E8EEF2',
+                },
+            },
+            field: {
+                input: {
+                    'bg-default': '#FFFFFF', 'bg-disabled': '#E8EEF2',
+                    'border-default': '#E8EEF2', 'border-focus': '#006FFF',
+                    'border-error': '#DC2626', 'text-default': '#17191A',
+                    'text-disabled': '#A4ADB2', placeholder: '#757B80',
+                },
+            },
+        },
+    },
+    spacing: {
+        foundation: { 0: 0, '05': 2, 1: 4, 2: 8, 3: 12, 4: 16, 5: 20, 6: 24, 8: 32, 10: 40, 12: 48 },
+        aliases: {
+            scale: { xxs: 2, xs: 4, s: 8, m: 12, l: 20, xl: 32, '2xl': 40 },
+            padding: { xxs: 2, xs: 4, s: 8, m: 12, l: 20, xl: 32, '2xl': 40 },
+            gap: { xxs: 2, xs: 4, s: 8, m: 12, l: 20, xl: 32, '2xl': 40 },
+        },
+    },
+    border: {
+        foundation: {
+            radius: { 0: 0, 1: 2, 2: 4, 3: 6, 4: 8, 5: 12, 6: 16, 7: 24, full: 9999 },
+            width: { 0: 0, 1: 0.5, 2: 1, 3: 2, 4: 4 },
+        },
+        semantic: {
+            radius: {
+                s: 4, m: 8, l: 12, xl: 16, '2xl': 24, full: 9999,
+                button: { s: 4, m: 8, l: 12, pill: 9999 },
+                input: { s: 4, m: 8, l: 12 },
+                card: { s: 4, m: 8, l: 12 },
+            },
+        },
+    },
+    shadow: {
+        foundation: {
+            s: { shadowColor: 'rgba(0, 0, 0, 0.05)', shadowOffsetX: 0, shadowOffsetY: 1, shadowOpacity: 1, shadowRadius: 2, elevation: 1 },
+            m: { shadowColor: 'rgba(0, 0, 0, 0.1)', shadowOffsetX: 0, shadowOffsetY: 4, shadowOpacity: 1, shadowRadius: 6, elevation: 3 },
+            l: { shadowColor: 'rgba(0, 0, 0, 0.1)', shadowOffsetX: 0, shadowOffsetY: 10, shadowOpacity: 1, shadowRadius: 15, elevation: 8 },
+        },
+    },
+    size: {
+        semantic: {
+            button: { s: 24, m: 32, l: 40 },
+            input: { s: 24, m: 32, l: 40 },
+            icon: { xs: 12, s: 16, m: 20, l: 24, xl: 32 },
+            avatar: { xs: 16, s: 20, m: 24, l: 32, xl: 40, '2xl': 48 },
+        },
+    },
+    typography: {
+        foundation: {
+            fontSize: { xs: 12, s: 14, base: 16, l: 18, xl: 20, '2xl': 24, '3xl': 30, '4xl': 36 },
+            fontWeight: { light: '300', normal: '400', medium: '500', semibold: '600', bold: '700' },
+            lineHeight: { tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625 },
+        },
+    },
+    opacity: {
+        foundation: { 0: 0, 5: 0.05, 10: 0.1, 25: 0.25, 40: 0.4, 50: 0.5, 75: 0.75, 100: 1 },
+    },
+};
+
+// ─── 토큰 로드 (빌드된 JSON > 폴백) ───
+
+let builtLightTokens: NativeTokens | null = null;
+let builtDarkTokens: NativeTokens | null = null;
+
+try {
+    // @ts-ignore — JSON 파일, 빌드 전에는 없을 수 있음
+    builtLightTokens = require('@designbasekorea/tokens/native/light');
+} catch { /* 폴백 사용 */ }
+
+try {
+    // @ts-ignore
+    builtDarkTokens = require('@designbasekorea/tokens/native/dark');
+} catch { /* 폴백 사용 */ }
+
+/** Light 테마 토큰 (빌드된 JSON 우선, 없으면 폴백) */
+export const lightTheme: DesignbaseThemeTokens = parseTokenTree(
+    builtLightTokens ?? FALLBACK_LIGHT
+);
+
+/** Dark 테마 토큰 (빌드된 JSON 우선, 없으면 폴백) */
+export const darkTheme: DesignbaseThemeTokens = parseTokenTree(
+    builtDarkTokens ?? FALLBACK_LIGHT // dark 폴백도 light 사용 (빌드 후 정상)
+);