@designbasekorea/ui-native 0.1.0

package/README.md

@@ -0,0 +1,152 @@
+# @designbasekorea/ui-native
+
+Designbase React Native UI 컴포넌트 라이브러리 — 앱 개발에 최적화된 네이티브 컴포넌트
+
+## 📦 설치
+
+```bash
+npm install @designbasekorea/ui-native
+```
+
+### Peer Dependencies
+```bash
+npm install react react-native
+```
+
+## 🚀 시작하기
+
+앱 루트에 `ThemeProvider`를 감싸주세요:
+
+```tsx
+import { ThemeProvider } from '@designbasekorea/ui-native';
+
+export default function App() {
+    return (
+        <ThemeProvider theme="auto">
+            <MyApp />
+        </ThemeProvider>
+    );
+}
+```
+
+## 📋 사용 가능한 컴포넌트
+
+### 🎨 테마 시스템
+| Export | 설명 |
+|--------|------|
+| `ThemeProvider` | Context 기반 테마 (light/dark/auto) |
+| `useTheme()` | 현재 테마 토큰 접근 훅 |
+| `lightTheme` / `darkTheme` | 기본 테마 토큰 |
+
+### 🧩 컴포넌트 (10개)
+| 컴포넌트 | 설명 | 주요 Props |
+|----------|------|-----------|
+| **Button** | 버튼 | variant, size, loading, icon |
+| **Input** | 텍스트 입력 | label, error, helperText, icon |
+| **Card** | 카드 | variant, image, title, footer |
+| **Badge** | 배지 | variant, type(dot/number/text) |
+| **Avatar** | 아바타 | src, initials, status |
+| **Chip** | 칩/태그 | deletable, selected, variant |
+| **Divider** | 구분선 | orientation, thickness |
+| **Spinner** | 로딩 | size, color, label |
+| **Toggle** | 스위치 | isSelected, size |
+| **Alert** | 알림 | variant, closable, action |
+
+## 💡 사용 예시
+
+```tsx
+import {
+    Button,
+    Input,
+    Card,
+    Badge,
+    Avatar,
+    Toggle,
+    Alert,
+    useTheme,
+} from '@designbasekorea/ui-native';
+import { CheckIcon } from '@designbasekorea/icons';
+
+function ProfileScreen() {
+    const { theme, isDark, toggleTheme } = useTheme();
+
+    return (
+        <View style={{ flex: 1, padding: theme.spacing.m, backgroundColor: theme.colors.bg.primary }}>
+            <Avatar src="https://..." size="xl" status="online" />
+
+            <Input
+                label="이름"
+                placeholder="이름을 입력하세요"
+                size="m"
+            />
+
+            <Card
+                title="프로필 설정"
+                subtitle="개인 정보를 관리하세요"
+                variant="outlined"
+            >
+                <Toggle size="m" onChange={toggleTheme}>
+                    다크모드
+                </Toggle>
+            </Card>
+
+            <Button
+                variant="primary"
+                size="m"
+                startIcon={<CheckIcon size={16} color="#fff" />}
+                onPress={() => {}}
+            >
+                저장
+            </Button>
+
+            <Alert
+                variant="success"
+                message="프로필이 저장되었습니다."
+                closable
+            />
+        </View>
+    );
+}
+```
+
+## 🎨 테마 커스텀
+
+```tsx
+<ThemeProvider
+    theme="light"
+    lightThemeOverride={{
+        colors: {
+            brand: {
+                primary: '#FF6B6B',  // 커스텀 브랜드 컬러
+            },
+        },
+    }}
+>
+    <App />
+</ThemeProvider>
+```
+
+## 📁 구조
+
+```
+packages/ui-native/
+├── src/
+│   ├── theme/
+│   │   ├── tokens.ts         ← 디자인 토큰 (Light/Dark)
+│   │   ├── ThemeProvider.tsx  ← Context 기반 테마
+│   │   └── useTheme.ts       ← 테마 접근 훅
+│   ├── components/
+│   │   ├── Button/
+│   │   ├── Input/
+│   │   ├── Card/
+│   │   ├── Badge/
+│   │   ├── Avatar/
+│   │   ├── Chip/
+│   │   ├── Divider/
+│   │   ├── Spinner/
+│   │   ├── Toggle/
+│   │   └── Alert/
+│   └── index.ts              ← 메인 엔트리 포인트
+├── package.json
+└── tsconfig.json
+```

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 { type ViewStyle } from 'react-native';
+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;
+}
+export declare const Alert: React.FC<AlertProps>;
+export default Alert;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,UAAU;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAMD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsDtC,CAAC;AAeF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+const VARIANT_ICONS = {
+    success: '✓', warning: '⚠', error: '✕', info: 'ℹ',
+};
+export const Alert = ({ 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 = {
+        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 (_jsx(View, { style: [
+            styles.container,
+            {
+                backgroundColor: bgColor, borderRadius,
+                borderLeftWidth: 4, borderLeftColor: fgColor,
+                padding: padding.m ?? 12,
+            },
+            style,
+        ], accessibilityRole: "alert", children: _jsxs(View, { style: [styles.content, { gap: gap.m ?? 12 }], children: [_jsx(View, { style: styles.iconContainer, children: icon || _jsx(Text, { style: [styles.defaultIcon, { color: fgColor }], children: VARIANT_ICONS[variant] }) }), _jsxs(View, { style: [styles.textContainer, { gap: gap.xxs ?? 2 }], children: [title && _jsx(Text, { style: [styles.title, { color: fgColor, fontSize: fontSize.s ?? 14 }], children: title }), _jsx(Text, { style: [styles.message, { color: text.primary ?? '#17191A', fontSize: fontSize.s ?? 14 }], children: message }), actionLabel && onAction && (_jsx(Pressable, { onPress: onAction, style: { marginTop: padding.xxs ?? 2 }, children: _jsx(Text, { style: { color: fgColor, fontSize: fontSize.xs ?? 12, fontWeight: '600' }, children: actionLabel }) }))] }), closable && (_jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "\uB2EB\uAE30", style: styles.closeButton, children: _jsx(Text, { style: { fontSize: fontSize.s ?? 14, color: text.tertiary ?? '#757B80' }, children: "\u2715" }) }))] }) }));
+};
+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;
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

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

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Alert/index.js

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+//# sourceMappingURL=index.js.map

package/dist/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Avatar 컴포넌트 (React Native)
+ *
+ * 스타일링 토큰 경로:
+ *   - 사이즈: theme.size.semantic.avatar.{xs|s|m|l|xl|2xl}
+ *   - 색상: theme.color.aliases.{surface|text|feedback}.*
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ *
+ * 원본: packages/ui/src/components/Avatar/Avatar.tsx
+ */
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    icon?: React.ReactNode;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EACuC,KAAK,SAAS,EAC3D,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAC/D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,WAAW;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAgBD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiExC,CAAC;AAUF,eAAe,MAAM,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Avatar 컴포넌트 (React Native)
+ *
+ * 스타일링 토큰 경로:
+ *   - 사이즈: theme.size.semantic.avatar.{xs|s|m|l|xl|2xl}
+ *   - 색상: theme.color.aliases.{surface|text|feedback}.*
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ *
+ * 원본: packages/ui/src/components/Avatar/Avatar.tsx
+ */
+import { useState } from 'react';
+import { View, Image, Text, Pressable, StyleSheet, } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+const INITIALS_COLORS = [
+    { bg: '#E3F2FD', text: '#1976D2' }, { bg: '#F3E5F5', text: '#7B1FA2' },
+    { bg: '#E8F5E8', text: '#388E3C' }, { bg: '#FFF3E0', text: '#F57C00' },
+    { bg: '#FCE4EC', text: '#C2185B' }, { bg: '#E0F2F1', text: '#00796B' },
+    { bg: '#FFF8E1', text: '#F9A825' }, { bg: '#F1F8E9', text: '#689F38' },
+    { bg: '#E8EAF6', text: '#3F51B5' }, { bg: '#FFEBEE', text: '#D32F2F' },
+];
+function getColorForText(text) {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++)
+        hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    return INITIALS_COLORS[Math.abs(hash) % INITIALS_COLORS.length];
+}
+export const Avatar = ({ src, alt, initials, icon, size = 'm', status, onPress, disabled = false, style, }) => {
+    const { theme } = useTheme();
+    const [imageError, setImageError] = useState(false);
+    // ─── 토큰에서 가져오기 ───
+    const avatarSizeTokens = theme.size.semantic?.avatar ?? {};
+    const aliases = theme.color.aliases ?? {};
+    const feedback = aliases.feedback ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+    const avatarSize = avatarSizeTokens[size] ?? { xs: 16, s: 20, m: 24, l: 32, xl: 40, '2xl': 48 }[size];
+    const fontSizeMap = { xs: 8, s: 10, m: 12, l: 16, xl: 20, '2xl': 26 };
+    const statusSizeMap = { xs: 6, s: 8, m: 10, l: 12, xl: 14, '2xl': 16 };
+    const statusColors = {
+        online: feedback.success?.fg ?? '#16A34A',
+        offline: aliases.text?.tertiary ?? '#757B80',
+        away: feedback.warning?.fg ?? '#D1B400',
+        busy: feedback.error?.fg ?? '#DC2626',
+    };
+    const shouldShowImage = src && !imageError;
+    const shouldShowInitials = !shouldShowImage && initials;
+    const initialsColor = shouldShowInitials ? getColorForText(initials) : null;
+    const content = (_jsxs(View, { style: [
+            styles.container,
+            {
+                width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2,
+                backgroundColor: shouldShowInitials ? initialsColor?.bg : (aliases.surface?.['layer-2'] ?? '#E8EEF2'),
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ], accessibilityRole: "image", accessibilityLabel: alt || initials || '아바타', children: [shouldShowImage && (_jsx(Image, { source: { uri: src }, style: [styles.image, { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 }], onError: () => setImageError(true) })), shouldShowInitials && (_jsx(Text, { style: { fontSize: fontSizeMap[size], color: initialsColor?.text, fontWeight: '600' }, children: initials.charAt(0).toUpperCase() })), !shouldShowImage && !shouldShowInitials && icon, status && (_jsx(View, { style: [styles.status, {
+                        width: statusSizeMap[size], height: statusSizeMap[size],
+                        borderRadius: statusSizeMap[size] / 2,
+                        backgroundColor: statusColors[status],
+                        borderColor: aliases.surface?.base ?? '#FFFFFF', borderWidth: 2,
+                    }] }))] }));
+    if (onPress) {
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", style: ({ pressed }) => pressed ? { opacity: 0.7 } : undefined, children: content }));
+    }
+    return content;
+};
+Avatar.displayName = 'Avatar';
+const styles = StyleSheet.create({
+    container: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+    image: { position: 'absolute' },
+    status: { position: 'absolute', bottom: 0, right: 0 },
+});
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

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

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Badge 컴포넌트 (React Native)
+ *
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand|feedback}.*, theme.color.aliases.text.*
+ *   - 폰트: theme.typography.foundation.fontSize.{xs|s}
+ *   - 간격: theme.spacing.aliases.padding.{xxs|xs|s}
+ *
+ * 원본: packages/ui/src/components/Badge/Badge.tsx
+ */
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export type BadgeSize = 's' | 'm' | 'l';
+export type BadgeVariant = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+export type BadgeType = 'dot' | 'number' | 'text' | 'outlined';
+export interface BadgeProps {
+    children?: React.ReactNode;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    type?: BadgeType;
+    count?: number;
+    maxCount?: number;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGtE,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/F,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,UAAU;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4DtC,CAAC;AASF,eAAe,KAAK,CAAC"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+export const Badge = ({ children, size = 'm', variant = 'primary', type = 'text', count, maxCount = 99, disabled = 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: { minWidth: 16, height: 16, fontSize: fontSize.xs ?? 12 - 2, paddingH: padding.xxs ?? 2, dotSize: 6 },
+        m: { minWidth: 20, height: 20, fontSize: fontSize.xs ?? 12 - 1, paddingH: padding.xs ?? 4, dotSize: 8 },
+        l: { minWidth: 24, height: 24, fontSize: fontSize.xs ?? 12, paddingH: padding.s ?? 8, dotSize: 10 },
+    }[size];
+    const variantColors = {
+        primary: { bg: aliases.brand?.primary ?? '#006FFF', text: '#FFFFFF' },
+        secondary: { bg: aliases.surface?.['layer-2'] ?? '#E8EEF2', text: aliases.text?.secondary ?? '#464A4D' },
+        info: { bg: feedback.info?.bg ?? '#EDF9FF', text: feedback.info?.fg ?? '#0683FF' },
+        success: { bg: feedback.success?.bg ?? '#F0FDF5', text: feedback.success?.fg ?? '#16A34A' },
+        warning: { bg: feedback.warning?.bg ?? '#FFFFE7', text: feedback.warning?.fg ?? '#D1B400' },
+        danger: { bg: feedback.error?.bg ?? '#FEF2F2', text: feedback.error?.fg ?? '#DC2626' },
+    }[variant];
+    if (type === 'dot') {
+        return (_jsx(View, { style: [
+                { width: sizeConfig.dotSize, height: sizeConfig.dotSize, borderRadius: sizeConfig.dotSize / 2, backgroundColor: variantColors.bg },
+                disabled && { opacity: disabledOpacity }, style,
+            ] }));
+    }
+    const displayContent = type === 'number' && count !== undefined
+        ? (count > maxCount ? `${maxCount}+` : String(count))
+        : children;
+    const isOutlined = type === 'outlined';
+    return (_jsx(View, { style: [
+            styles.badge,
+            {
+                minWidth: sizeConfig.minWidth, height: sizeConfig.height,
+                borderRadius: sizeConfig.height / 2, paddingHorizontal: sizeConfig.paddingH,
+                backgroundColor: isOutlined ? 'transparent' : variantColors.bg,
+                borderWidth: isOutlined ? 1 : 0,
+                borderColor: isOutlined ? variantColors.bg : undefined,
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ], accessibilityRole: "text", children: typeof displayContent === 'string' || typeof displayContent === 'number' ? (_jsx(Text, { style: [styles.text, { fontSize: sizeConfig.fontSize, color: isOutlined ? variantColors.bg : variantColors.text }], children: displayContent })) : displayContent }));
+};
+Badge.displayName = 'Badge';
+const styles = StyleSheet.create({
+    badge: { alignItems: 'center', justifyContent: 'center', alignSelf: 'flex-start' },
+    text: { fontWeight: '600', textAlign: 'center' },
+});
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAiBhD,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EACxC,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,MAAM,EACxD,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GAChD,EAAE,EAAE;IACD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;IAC1C,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,IAAI,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,CAAC;IAC7D,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC;IAE9D,MAAM,UAAU,GAAG;QACf,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE;QACxG,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE;QACvG,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;KACtG,CAAC,IAAI,CAAC,CAAC;IAER,MAAM,aAAa,GAAG;QAClB,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,IAAI,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;QACrE,SAAS,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,IAAI,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,IAAI,SAAS,EAAE;QACxG,IAAI,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,SAAS,EAAE;QAClF,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,IAAI,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,IAAI,SAAS,EAAE;QAC3F,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,IAAI,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,IAAI,SAAS,EAAE;QAC3F,MAAM,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,SAAS,EAAE;KACzF,CAAC,OAAO,CAAC,CAAC;IAEX,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACjB,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAE;gBACT,EAAE,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,EAAE,eAAe,EAAE,aAAa,CAAC,EAAE,EAAE;gBAClI,QAAQ,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,KAAK;aAClD,GAAI,CACR,CAAC;IACN,CAAC;IAED,MAAM,cAAc,GAAG,IAAI,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS;QAC3D,CAAC,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrD,CAAC,CAAC,QAAQ,CAAC;IACf,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;IAEvC,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAE;YACT,MAAM,CAAC,KAAK;YACZ;gBACI,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM;gBACxD,YAAY,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,iBAAiB,EAAE,UAAU,CAAC,QAAQ;gBAC3E,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;gBAC9D,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC/B,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;aACzD;YACD,QAAQ,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,KAAK;SAClD,EAAE,iBAAiB,EAAC,MAAM,YACtB,OAAO,cAAc,KAAK,QAAQ,IAAI,OAAO,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxE,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,YACnH,cAAc,GACZ,CACV,CAAC,CAAC,CAAC,cAAc,GACf,CACV,CAAC;AACN,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC7B,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE;IAClF,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE;CACnD,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant, BadgeType } from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+//# sourceMappingURL=index.js.map

package/dist/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/BottomNavigation/BottomNavigation.d.ts

@@ -0,0 +1,30 @@
+/**
+ * BottomNavigation 컴포넌트 (React Native)
+ *
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.base
+ *   - 보더: theme.color.aliases.border.base
+ *   - 활성: theme.color.aliases.brand.primary
+ *   - 비활성: theme.color.aliases.text.tertiary
+ *   - 폰트: theme.typography.foundation.fontSize.xs
+ *   - 그림자: theme.shadow.foundation.m
+ */
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export interface BottomNavItem {
+    key: string;
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    badge?: number;
+}
+export interface BottomNavigationProps {
+    items: BottomNavItem[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    showLabels?: boolean;
+    style?: ViewStyle;
+}
+export declare const BottomNavigation: React.FC<BottomNavigationProps>;
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.d.ts.map

package/dist/components/BottomNavigation/BottomNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjF,MAAM,WAAW,aAAa;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4D5D,CAAC;AAWF,eAAe,gBAAgB,CAAC"}

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+export const BottomNavigation = ({ items, activeKey, onChange, showLabels = true, style, }) => {
+    const { theme } = useTheme();
+    const surface = theme.color.aliases?.surface ?? {};
+    const brand = theme.color.aliases?.brand ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const shadow = theme.shadow.foundation ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const toShadowStyle = (s) => s ? {
+        shadowColor: s.shadowColor ?? '#000',
+        shadowOffset: { width: s.shadowOffsetX ?? 0, height: -(s.shadowOffsetY ?? 4) },
+        shadowOpacity: s.shadowOpacity ?? 0.1,
+        shadowRadius: s.shadowRadius ?? 6,
+        elevation: s.elevation ?? 8,
+    } : {};
+    return (_jsx(View, { style: [
+            styles.container,
+            {
+                backgroundColor: surface.base ?? '#FFFFFF',
+                borderTopColor: borders.base ?? '#E8EEF2',
+                paddingBottom: padding.xs ?? 4,
+                ...toShadowStyle(shadow.m),
+            },
+            style,
+        ], children: items.map((item) => {
+            const isActive = activeKey === item.key;
+            const activeColor = brand.primary ?? '#006FFF';
+            const inactiveColor = textColors.tertiary ?? '#757B80';
+            return (_jsxs(Pressable, { onPress: () => onChange(item.key), accessibilityRole: "tab", accessibilityState: { selected: isActive }, style: [styles.item, { paddingTop: padding.s ?? 8 }], children: [_jsxs(View, { children: [isActive ? (item.activeIcon ?? item.icon) : item.icon, item.badge !== undefined && item.badge > 0 && (_jsx(View, { style: [styles.badge, { backgroundColor: theme.color.aliases?.feedback?.error?.fg ?? '#DC2626' }], children: _jsx(Text, { style: styles.badgeText, children: item.badge > 99 ? '99+' : item.badge }) }))] }), showLabels && (_jsx(Text, { style: {
+                            fontSize: fontSize.xs ?? 12 - 2,
+                            color: isActive ? activeColor : inactiveColor,
+                            fontWeight: isActive ? '600' : '400', marginTop: 2,
+                        }, children: item.label }))] }, item.key));
+        }) }));
+};
+BottomNavigation.displayName = 'BottomNavigation';
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', borderTopWidth: 1 },
+    item: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    badge: { position: 'absolute', top: -4, right: -8, minWidth: 16, height: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 3 },
+    badgeText: { color: '#FFFFFF', fontSize: 9, fontWeight: '700' },
+});
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

package/dist/components/BottomNavigation/BottomNavigation.js.map

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

package/dist/components/BottomNavigation/index.d.ts

@@ -0,0 +1,3 @@
+export { BottomNavigation } from './BottomNavigation';
+export type { BottomNavigationProps, BottomNavItem } from './BottomNavigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/BottomNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BottomNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/BottomNavigation/index.js

@@ -0,0 +1,2 @@
+export { BottomNavigation } from './BottomNavigation';
+//# sourceMappingURL=index.js.map

package/dist/components/BottomNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}