@designbasekorea/ui-native 0.1.0

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ThemeProvider 컴포넌트
+ *
+ * 목적: React Context 기반 테마 제공 (웹의 CSS 변수 + data-theme 대체)
+ * 기능: Light/Dark 테마, 시스템 다크모드 자동 감지, 토큰 자동 연결
+ * 사용법: <ThemeProvider theme="auto"><App /></ThemeProvider>
+ */
+import React from 'react';
+import type { DesignbaseThemeTokens } 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 declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
+export interface ThemeProviderProps {
+    /** 초기 테마 모드 ('light' | 'dark' | 'auto') */
+    theme?: ThemeMode;
+    /** 자식 컴포넌트 */
+    children: React.ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAwD,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,qBAAqB,EAAgB,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAC9B,mDAAmD;IACnD,KAAK,EAAE,qBAAqB,CAAC;IAC7B,iCAAiC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;IAC7B,eAAe;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,eAAe;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,gBAAgB;IAChB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc;IACd,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,8CAA0D,CAAC;AAEpF,MAAM,WAAW,kBAAkB;IAC/B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ThemeProvider 컴포넌트
+ *
+ * 목적: React Context 기반 테마 제공 (웹의 CSS 변수 + data-theme 대체)
+ * 기능: Light/Dark 테마, 시스템 다크모드 자동 감지, 토큰 자동 연결
+ * 사용법: <ThemeProvider theme="auto"><App /></ThemeProvider>
+ */
+import { createContext, useMemo, useState, useCallback } from 'react';
+import { useColorScheme } from 'react-native';
+import { lightTheme, darkTheme, getTokenValue } from './tokens';
+export const ThemeContext = createContext(undefined);
+export const ThemeProvider = ({ theme: initialMode = 'auto', children, }) => {
+    const systemColorScheme = useColorScheme();
+    const [mode, setMode] = useState(initialMode);
+    const resolvedMode = 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) => getTokenValue(currentTheme.raw, path), [currentTheme]);
+    const value = useMemo(() => ({
+        theme: currentTheme,
+        token,
+        mode,
+        resolvedMode,
+        setMode,
+        toggleTheme,
+        isDark: resolvedMode === 'dark',
+    }), [currentTheme, token, mode, resolvedMode, toggleTheme]);
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+};
+ThemeProvider.displayName = 'ThemeProvider';
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAc,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAsBhE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAgC,SAAS,CAAC,CAAC;AASpF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EACxD,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,iBAAiB,GAAG,cAAc,EAAE,CAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAY,WAAW,CAAC,CAAC;IAEzD,MAAM,YAAY,GAAqB,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YAClB,OAAO,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC3D,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE9B,MAAM,YAAY,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,EACxD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACb,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBAClB,OAAO,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YAC3D,CAAC;YACD,OAAO,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC/C,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,gCAAgC;IAChC,MAAM,KAAK,GAAG,WAAW,CACrB,CAAC,IAAY,EAAE,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,EACvD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,YAAY;QACnB,KAAK;QACL,IAAI;QACJ,YAAY;QACZ,OAAO;QACP,WAAW;QACX,MAAM,EAAE,YAAY,KAAK,MAAM;KAClC,CAAC,EACF,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,CAAC,CACzD,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC9B,QAAQ,GACW,CAC3B,CAAC;AACN,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme, getTokenValue } from './tokens';
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC"}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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` 를 실행하세요.
+ */
+/** 중첩 구조의 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 declare function getTokenValue(tokens: NativeTokens, path: string): any;
+/** Light 테마 토큰 (빌드된 JSON 우선, 없으면 폴백) */
+export declare const lightTheme: DesignbaseThemeTokens;
+/** Dark 테마 토큰 (빌드된 JSON 우선, 없으면 폴백) */
+export declare const darkTheme: DesignbaseThemeTokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAQH,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/C,MAAM,WAAW,qBAAqB;IAClC,0BAA0B;IAC1B,GAAG,EAAE,YAAY,CAAC;IAClB,uBAAuB;IACvB,KAAK,EAAE;QACH,QAAQ,EAAE,YAAY,CAAC;QACvB,OAAO,EAAE,YAAY,CAAC;QACtB,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;IACF,uBAAuB;IACvB,OAAO,EAAE;QACL,QAAQ,EAAE,YAAY,CAAC;QACvB,OAAO,EAAE,YAAY,CAAC;QACtB,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;IACF,uBAAuB;IACvB,MAAM,EAAE;QACJ,QAAQ,EAAE,YAAY,CAAC;QACvB,OAAO,EAAE,YAAY,CAAC;QACtB,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;IACF,UAAU;IACV,MAAM,EAAE,YAAY,CAAC;IACrB,wBAAwB;IACxB,IAAI,EAAE;QACF,QAAQ,EAAE,YAAY,CAAC;QACvB,OAAO,EAAE,YAAY,CAAC;QACtB,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;IACF,aAAa;IACb,UAAU,EAAE,YAAY,CAAC;IACzB,UAAU;IACV,OAAO,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,CAErE;AA4JD,wCAAwC;AACxC,eAAO,MAAM,UAAU,EAAE,qBAExB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,SAAS,EAAE,qBAEvB,CAAC"}

package/dist/theme/tokens.js

@@ -0,0 +1,172 @@
+/**
+ * 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에서 특정 경로의 값을 안전하게 가져오기
+ */
+export function getTokenValue(tokens, path) {
+    return path.split('.').reduce((obj, key) => obj?.[key], tokens);
+}
+/**
+ * 빌드된 JSON 트리를 DesignbaseThemeTokens로 파싱
+ */
+function parseTokenTree(raw) {
+    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 = {
+    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 = null;
+let builtDarkTokens = 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 = parseTokenTree(builtLightTokens ?? FALLBACK_LIGHT);
+/** Dark 테마 토큰 (빌드된 JSON 우선, 없으면 폴백) */
+export const darkTheme = parseTokenTree(builtDarkTokens ?? FALLBACK_LIGHT // dark 폴백도 light 사용 (빌드 후 정상)
+);
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * useTheme 훅
+ *
+ * 목적: ThemeProvider에서 제공하는 테마 토큰에 쉽게 접근
+ * 사용법: const { theme, token, isDark, toggleTheme } = useTheme();
+ *
+ * @example
+ * ```tsx
+ * const { theme, token, isDark, toggleTheme } = useTheme();
+ *
+ * // 구조적 접근
+ * <View style={{ backgroundColor: theme.color.aliases.surface.base }}>
+ *   <Text style={{ color: theme.color.aliases.text.primary }}>
+ *     {isDark ? '다크 모드' : '라이트 모드'}
+ *   </Text>
+ * </View>
+ *
+ * // 점(.) 경로 접근
+ * const bg = token('color.aliases.surface.base');
+ * const brandColor = token('color.aliases.brand.primary');
+ * ```
+ */
+import type { ThemeContextValue } from './ThemeProvider';
+export declare function useTheme(): ThemeContextValue;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/theme/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,QAAQ,IAAI,iBAAiB,CAS5C"}

package/dist/theme/useTheme.js

@@ -0,0 +1,33 @@
+/**
+ * useTheme 훅
+ *
+ * 목적: ThemeProvider에서 제공하는 테마 토큰에 쉽게 접근
+ * 사용법: const { theme, token, isDark, toggleTheme } = useTheme();
+ *
+ * @example
+ * ```tsx
+ * const { theme, token, isDark, toggleTheme } = useTheme();
+ *
+ * // 구조적 접근
+ * <View style={{ backgroundColor: theme.color.aliases.surface.base }}>
+ *   <Text style={{ color: theme.color.aliases.text.primary }}>
+ *     {isDark ? '다크 모드' : '라이트 모드'}
+ *   </Text>
+ * </View>
+ *
+ * // 점(.) 경로 접근
+ * const bg = token('color.aliases.surface.base');
+ * const brandColor = token('color.aliases.brand.primary');
+ * ```
+ */
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeProvider';
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a <ThemeProvider>. ' +
+            'Wrap your app with <ThemeProvider> first.');
+    }
+    return context;
+}
+//# sourceMappingURL=useTheme.js.map

package/dist/theme/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,UAAU,QAAQ;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CACX,kDAAkD;YAClD,2CAA2C,CAC9C,CAAC;IACN,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@designbasekorea/ui-native",
+    "version": "0.1.0",
+    "description": "Designbase React Native UI 컴포넌트 라이브러리 - 앱 개발에 최적화된 네이티브 컴포넌트",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "react-native": "src/index.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "react-native": "./src/index.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "rimraf dist && tsc",
+        "prepublishOnly": "npm run build",
+        "typecheck": "tsc --noEmit",
+        "lint": "eslint src --ext .ts,.tsx",
+        "clean": "rimraf dist"
+    },
+    "dependencies": {
+        "@designbasekorea/icons": "^0.3.0"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-native": ">=0.72.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-native": "^0.73.0",
+        "typescript": "^5.2.2",
+        "rimraf": "^5.0.1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/designbasekorea/Designbase-Library.git",
+        "directory": "packages/ui-native"
+    },
+    "keywords": [
+        "react-native",
+        "ui",
+        "components",
+        "designbase",
+        "mobile"
+    ]
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,105 @@
+/**
+ * Alert 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.feedback.{success|warning|error|info}.{fg|bg}
+ *   - 텍스트: theme.color.aliases.text.{primary|tertiary}
+ *   - 라운드: theme.border.semantic.radius.m
+ *   - 패딩: theme.spacing.aliases.padding.m
+ *   - 폰트: theme.typography.foundation.fontSize.{xs|s}
+ * 
+ * 원본: packages/ui/src/components/Alert/Alert.tsx
+ */
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
+
+export interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    message: string;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    actionLabel?: string;
+    onAction?: () => void;
+    style?: ViewStyle;
+}
+
+const VARIANT_ICONS: Record<AlertVariant, string> = {
+    success: '✓', warning: '⚠', error: '✕', info: 'ℹ',
+};
+
+export const Alert: React.FC<AlertProps> = ({
+    variant = 'info', title, message, icon, closable = false,
+    onClose, actionLabel, onAction, style,
+}) => {
+    const { theme } = useTheme();
+
+    // ─── 토큰에서 가져오기 ───
+    const feedback = theme.color.aliases?.feedback ?? {};
+    const text = theme.color.aliases?.text ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const borderRadius = theme.border.semantic?.radius?.m ?? 8;
+    const gap = theme.spacing.aliases?.gap ?? {};
+
+    const variantMap: Record<AlertVariant, 'success' | 'warning' | 'error' | 'info'> = {
+        success: 'success', warning: 'warning', error: 'error', info: 'info',
+    };
+    const feedbackKey = variantMap[variant];
+    const bgColor = feedback[feedbackKey]?.bg ?? '#EDF9FF';
+    const fgColor = feedback[feedbackKey]?.fg ?? '#0683FF';
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                backgroundColor: bgColor, borderRadius,
+                borderLeftWidth: 4, borderLeftColor: fgColor,
+                padding: padding.m ?? 12,
+            },
+            style,
+        ]} accessibilityRole="alert">
+            <View style={[styles.content, { gap: gap.m ?? 12 }]}>
+                <View style={styles.iconContainer}>
+                    {icon || <Text style={[styles.defaultIcon, { color: fgColor }]}>{VARIANT_ICONS[variant]}</Text>}
+                </View>
+
+                <View style={[styles.textContainer, { gap: gap.xxs ?? 2 }]}>
+                    {title && <Text style={[styles.title, { color: fgColor, fontSize: fontSize.s ?? 14 }]}>{title}</Text>}
+                    <Text style={[styles.message, { color: text.primary ?? '#17191A', fontSize: fontSize.s ?? 14 }]}>{message}</Text>
+                    {actionLabel && onAction && (
+                        <Pressable onPress={onAction} style={{ marginTop: padding.xxs ?? 2 }}>
+                            <Text style={{ color: fgColor, fontSize: fontSize.xs ?? 12, fontWeight: '600' }}>{actionLabel}</Text>
+                        </Pressable>
+                    )}
+                </View>
+
+                {closable && (
+                    <Pressable onPress={onClose} hitSlop={8} accessibilityRole="button" accessibilityLabel="닫기" style={styles.closeButton}>
+                        <Text style={{ fontSize: fontSize.s ?? 14, color: text.tertiary ?? '#757B80' }}>✕</Text>
+                    </Pressable>
+                )}
+            </View>
+        </View>
+    );
+};
+
+Alert.displayName = 'Alert';
+
+const styles = StyleSheet.create({
+    container: { width: '100%' },
+    content: { flexDirection: 'row', alignItems: 'flex-start' },
+    iconContainer: { marginTop: 2 },
+    defaultIcon: { fontSize: 16, fontWeight: '700' },
+    textContainer: { flex: 1 },
+    title: { fontWeight: '600' },
+    message: { lineHeight: 20 },
+    closeButton: { padding: 2 },
+});
+
+export default Alert;

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';