@designbasekorea/ui-native 0.1.0

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,99 @@
+/**
+ * ProgressBar 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 트랙: theme.color.aliases.surface.{layer-2}
+ *   - 바: theme.color.aliases.{brand.primary|feedback.*.fg}
+ *   - 라운드: theme.border.semantic.radius.full
+ *   - 폰트: theme.typography.foundation.fontSize.xs
+ *   - 텍스트: theme.color.aliases.text.secondary
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { View, Text, Animated, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type ProgressBarSize = 's' | 'm' | 'l';
+
+export interface ProgressBarProps {
+    value: number;
+    max?: number;
+    variant?: ProgressBarVariant;
+    size?: ProgressBarSize;
+    showLabel?: boolean;
+    label?: string;
+    animated?: boolean;
+    style?: ViewStyle;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+    value, max = 100, variant = 'primary', size = 'm',
+    showLabel = false, label, animated = true, style,
+}) => {
+    const { theme } = useTheme();
+    const animatedWidth = useRef(new Animated.Value(0)).current;
+
+    const surface = theme.color.aliases?.surface ?? {};
+    const brand = theme.color.aliases?.brand ?? {};
+    const feedback = theme.color.aliases?.feedback ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const trackHeight = { s: 4, m: 8, l: 12 }[size];
+
+    const barColors: Record<ProgressBarVariant, string> = {
+        primary: brand.primary ?? '#006FFF',
+        success: feedback.success?.fg ?? '#16A34A',
+        warning: feedback.warning?.fg ?? '#D1B400',
+        danger: feedback.error?.fg ?? '#DC2626',
+        info: feedback.info?.fg ?? '#0683FF',
+    };
+
+    useEffect(() => {
+        if (animated) {
+            Animated.spring(animatedWidth, { toValue: percentage, useNativeDriver: false, friction: 10, tension: 40 }).start();
+        } else {
+            animatedWidth.setValue(percentage);
+        }
+    }, [percentage, animated, animatedWidth]);
+
+    const barWidthInterpolation = animatedWidth.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'] });
+
+    return (
+        <View style={[styles.container, style]} accessibilityRole="progressbar"
+            accessibilityValue={{ min: 0, max, now: value }}>
+            {(showLabel || label) && (
+                <View style={styles.labelRow}>
+                    <Text style={{ fontSize: fontSize.xs ?? 12, color: textColors.secondary ?? '#464A4D' }}>
+                        {label ?? `${Math.round(percentage)}%`}
+                    </Text>
+                    {label && showLabel && (
+                        <Text style={{ fontSize: fontSize.xs ?? 12, color: textColors.tertiary ?? '#757B80' }}>
+                            {Math.round(percentage)}%
+                        </Text>
+                    )}
+                </View>
+            )}
+            <View style={[styles.track, { height: trackHeight, borderRadius: trackHeight / 2, backgroundColor: surface['layer-2'] ?? '#E8EEF2' }]}>
+                <Animated.View style={[styles.bar, {
+                    height: trackHeight, borderRadius: trackHeight / 2,
+                    backgroundColor: barColors[variant],
+                    width: barWidthInterpolation,
+                }]} />
+            </View>
+        </View>
+    );
+};
+
+ProgressBar.displayName = 'ProgressBar';
+
+const styles = StyleSheet.create({
+    container: { width: '100%' },
+    labelRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
+    track: { overflow: 'hidden' },
+    bar: {},
+});
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarVariant, ProgressBarSize } from './ProgressBar';

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,103 @@
+/**
+ * Radio 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand.primary|border.base|surface.base}
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ *   - 간격: theme.spacing.aliases.gap.*
+ */
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type RadioSize = 's' | 'm' | 'l';
+
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+
+export interface RadioProps {
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: RadioSize;
+    disabled?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    style?: ViewStyle;
+}
+
+export const Radio: React.FC<RadioProps> = ({
+    options, value: controlledValue, defaultValue, onChange,
+    size = 'm', disabled = false, direction = 'vertical', style,
+}) => {
+    const { theme } = useTheme();
+    const [internalValue, setInternalValue] = React.useState(controlledValue ?? defaultValue ?? '');
+    const selectedValue = controlledValue ?? internalValue;
+
+    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 fontSize = theme.typography.foundation?.fontSize ?? {};
+    const gap = theme.spacing.aliases?.gap ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const outerSize = { s: 16, m: 20, l: 24 }[size];
+    const innerSize = { s: 8, m: 10, l: 14 }[size];
+    const labelFontSize = { s: fontSize.xs ?? 12, m: fontSize.s ?? 14, l: fontSize.base ?? 16 }[size];
+
+    const handleSelect = (val: string) => {
+        if (disabled) return;
+        setInternalValue(val);
+        onChange?.(val);
+    };
+
+    return (
+        <View style={[
+            direction === 'horizontal' ? styles.horizontal : styles.vertical,
+            { gap: gap.m ?? 12 }, style,
+        ]} accessibilityRole="radiogroup">
+            {options.map((opt) => {
+                const isSelected = selectedValue === opt.value;
+                const isDisabled = disabled || opt.disabled;
+                return (
+                    <Pressable key={opt.value} onPress={() => handleSelect(opt.value)} disabled={isDisabled}
+                        accessibilityRole="radio" accessibilityState={{ checked: isSelected, disabled: isDisabled }}
+                        style={[styles.option, { gap: gap.s ?? 8 }, isDisabled && { opacity: disabledOpacity }]}>
+                        <View style={[styles.outer, {
+                            width: outerSize, height: outerSize, borderRadius: outerSize / 2,
+                            borderColor: isSelected ? (brand.primary ?? '#006FFF') : (borders.base ?? '#E8EEF2'),
+                            backgroundColor: surface.base ?? '#FFFFFF',
+                        }]}>
+                            {isSelected && (
+                                <View style={[styles.inner, { width: innerSize, height: innerSize, borderRadius: innerSize / 2, backgroundColor: brand.primary ?? '#006FFF' }]} />
+                            )}
+                        </View>
+                        <View style={styles.labelContainer}>
+                            <Text style={{ fontSize: labelFontSize, color: textColors.primary ?? '#17191A' }}>{opt.label}</Text>
+                            {opt.description && <Text style={{ fontSize: fontSize.xs ?? 12, color: textColors.tertiary ?? '#757B80' }}>{opt.description}</Text>}
+                        </View>
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+};
+
+Radio.displayName = 'Radio';
+
+const styles = StyleSheet.create({
+    vertical: {},
+    horizontal: { flexDirection: 'row', flexWrap: 'wrap' },
+    option: { flexDirection: 'row', alignItems: 'flex-start' },
+    outer: { borderWidth: 2, alignItems: 'center', justifyContent: 'center' },
+    inner: {},
+    labelContainer: { flex: 1, gap: 2, paddingTop: 1 },
+});
+
+export default Radio;

package/src/components/Radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioOption, RadioSize } from './Radio';

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,115 @@
+/**
+ * SearchBar 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.semantic.field.input.*
+ *   - 사이즈: theme.size.semantic.search.{s|m|l}
+ *   - 라운드: theme.border.semantic.radius.{l|full}
+ *   - 패딩: theme.spacing.aliases.padding.*
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ */
+
+import React, { useState } from 'react';
+import { View, TextInput, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type SearchBarSize = 's' | 'm' | 'l';
+
+export interface SearchBarProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    size?: SearchBarSize;
+    onChangeText?: (text: string) => void;
+    onSubmit?: (text: string) => void;
+    onClear?: () => void;
+    disabled?: boolean;
+    showClearButton?: boolean;
+    startIcon?: React.ReactNode;
+    style?: ViewStyle;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+    value: controlledValue, defaultValue = '', placeholder = '검색...',
+    size = 'm', onChangeText, onSubmit, onClear, disabled = false,
+    showClearButton = true, startIcon, style,
+}) => {
+    const { theme } = useTheme();
+    const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const currentValue = controlledValue ?? internalValue;
+
+    const fieldTokens = theme.color.semantic?.field?.input ?? {};
+    const aliases = theme.color.aliases ?? {};
+    const searchSize = theme.size.semantic?.search ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const sizeConfig = {
+        s: { height: searchSize.s ?? 32, fontSize: fontSize.xs ?? 12, paddingH: padding.s ?? 8 },
+        m: { height: searchSize.m ?? 40, fontSize: fontSize.s ?? 14, paddingH: padding.m ?? 12 },
+        l: { height: searchSize.l ?? 48, fontSize: fontSize.base ?? 16, paddingH: padding.l ?? 20 },
+    }[size];
+
+    const bgColor = disabled
+        ? (fieldTokens['bg-disabled'] ?? aliases.surface?.muted ?? '#E8EEF2')
+        : (fieldTokens['bg-default'] ?? aliases.surface?.['layer-1'] ?? '#F2F8FC');
+    const borderColor = isFocused
+        ? (fieldTokens['border-focus'] ?? aliases.brand?.primary ?? '#006FFF')
+        : 'transparent';
+    const placeholderColor = fieldTokens?.placeholder ?? aliases.text?.tertiary ?? '#757B80';
+    const textColor = fieldTokens?.['text-default'] ?? aliases.text?.primary ?? '#17191A';
+
+    const handleChange = (text: string) => {
+        setInternalValue(text);
+        onChangeText?.(text);
+    };
+
+    const handleClear = () => {
+        setInternalValue('');
+        onChangeText?.('');
+        onClear?.();
+    };
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                height: sizeConfig.height, borderRadius: sizeConfig.height / 2,
+                backgroundColor: bgColor, paddingHorizontal: sizeConfig.paddingH,
+                borderWidth: isFocused ? 2 : 0, borderColor,
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ]}>
+            {startIcon ?? <Text style={{ fontSize: sizeConfig.fontSize, color: placeholderColor }}>🔍</Text>}
+            <TextInput
+                value={currentValue}
+                onChangeText={handleChange}
+                onSubmitEditing={() => onSubmit?.(currentValue)}
+                placeholder={placeholder}
+                placeholderTextColor={placeholderColor}
+                editable={!disabled}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                returnKeyType="search"
+                style={[styles.input, { fontSize: sizeConfig.fontSize, color: textColor }]}
+                accessibilityLabel={placeholder}
+            />
+            {showClearButton && currentValue.length > 0 && (
+                <Pressable onPress={handleClear} hitSlop={8} accessibilityLabel="검색 지우기">
+                    <Text style={{ fontSize: sizeConfig.fontSize, color: aliases.text?.tertiary ?? '#757B80' }}>✕</Text>
+                </Pressable>
+            )}
+        </View>
+    );
+};
+
+SearchBar.displayName = 'SearchBar';
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    input: { flex: 1, height: '100%', padding: 0 },
+});
+
+export default SearchBar;

package/src/components/SearchBar/index.ts

@@ -0,0 +1,2 @@
+export { SearchBar } from './SearchBar';
+export type { SearchBarProps, SearchBarSize } from './SearchBar';

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,74 @@
+/**
+ * Skeleton 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.{layer-1|layer-2}
+ *   - 라운드: theme.border.semantic.radius.{s|m|l}
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { View, Animated, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type SkeletonVariant = 'text' | 'rectangular' | 'circular';
+
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    variant?: SkeletonVariant;
+    borderRadius?: number;
+    count?: number;
+    gap?: number;
+    style?: ViewStyle;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+    width = '100%', height = 16, variant = 'text',
+    borderRadius: customRadius, count = 1, gap: customGap, style,
+}) => {
+    const { theme } = useTheme();
+    const animValue = useRef(new Animated.Value(0)).current;
+
+    const surface = theme.color.aliases?.surface ?? {};
+    const radiusTokens = theme.border.semantic?.radius ?? {};
+    const gapValue = customGap ?? theme.spacing.aliases?.gap?.s ?? 8;
+
+    const bgColor = surface['layer-1'] ?? '#F2F8FC';
+    const pulseColor = surface['layer-2'] ?? '#E8EEF2';
+
+    const resolvedRadius = customRadius ?? (() => {
+        switch (variant) {
+            case 'circular': return typeof width === 'number' ? width / 2 : 9999;
+            case 'rectangular': return radiusTokens.s ?? 4;
+            default: return radiusTokens.s ?? 4;
+        }
+    })();
+
+    const resolvedSize = variant === 'circular' ? { width: width ?? 40, height: width ?? 40 } : { width, height };
+
+    useEffect(() => {
+        const animation = Animated.loop(
+            Animated.sequence([
+                Animated.timing(animValue, { toValue: 1, duration: 800, useNativeDriver: false }),
+                Animated.timing(animValue, { toValue: 0, duration: 800, useNativeDriver: false }),
+            ])
+        );
+        animation.start();
+        return () => animation.stop();
+    }, [animValue]);
+
+    const backgroundColor = animValue.interpolate({ inputRange: [0, 1], outputRange: [bgColor, pulseColor] });
+
+    const items = Array.from({ length: count }, (_, i) => (
+        <Animated.View key={i} style={[
+            { ...resolvedSize, borderRadius: resolvedRadius, backgroundColor } as any,
+            i > 0 && { marginTop: gapValue },
+            style,
+        ]} />
+    ));
+
+    return count === 1 ? items[0]! : <View>{items}</View>;
+};
+
+Skeleton.displayName = 'Skeleton';
+export default Skeleton;

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,58 @@
+/**
+ * Spinner 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.brand.primary
+ *   - 폰트: theme.typography.foundation.fontSize.xs
+ *   - 텍스트: theme.color.aliases.text.secondary
+ * 
+ * 원본: packages/ui/src/components/Spinner/Spinner.tsx
+ */
+
+import React from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type SpinnerSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: string;
+    label?: string;
+    showLabel?: boolean;
+    style?: ViewStyle;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({
+    size = 'm', color, label = '로딩 중...', showLabel = false, style,
+}) => {
+    const { theme } = useTheme();
+
+    const spinnerColor = color ?? theme.color.aliases?.brand?.primary ?? '#006FFF';
+    const textColor = theme.color.aliases?.text?.secondary ?? '#464A4D';
+    const labelFontSize = theme.typography.foundation?.fontSize?.xs ?? 12;
+
+    const rnSize = size === 'xs' || size === 's' ? 'small' : 'large';
+    const scale = { xs: 0.6, s: 0.8, m: 1, l: 1.2, xl: 1.5 }[size];
+    const gap = theme.spacing.aliases?.gap?.s ?? 8;
+
+    return (
+        <View style={[styles.container, { gap }, style]}
+            accessibilityRole="progressbar" accessibilityLabel={label} accessibilityState={{ busy: true }}>
+            <View style={{ transform: [{ scale }] }}>
+                <ActivityIndicator size={rnSize} color={spinnerColor} />
+            </View>
+            {showLabel && label && (
+                <Text style={{ color: textColor, fontSize: labelFontSize }}>{label}</Text>
+            )}
+        </View>
+    );
+};
+
+Spinner.displayName = 'Spinner';
+
+const styles = StyleSheet.create({
+    container: { alignItems: 'center', justifyContent: 'center' },
+});
+
+export default Spinner;

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner';

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,124 @@
+/**
+ * Tabs 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand.primary|text.*|border.base|surface.*}
+ *   - 폰트: theme.typography.foundation.fontSize.{s|base}
+ *   - 간격: theme.spacing.aliases.padding.*
+ */
+
+import React, { useState } from 'react';
+import { View, Text, Pressable, ScrollView, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export interface TabItem {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    badge?: number;
+    disabled?: boolean;
+}
+
+export interface TabsProps {
+    items: TabItem[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    variant?: 'underline' | 'pill' | 'enclosed';
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+    items, activeKey, defaultActiveKey, onChange,
+    variant = 'underline', fullWidth = false, children, style,
+}) => {
+    const { theme } = useTheme();
+    const [internalKey, setInternalKey] = useState(activeKey ?? defaultActiveKey ?? items[0]?.key ?? '');
+    const currentKey = activeKey ?? internalKey;
+
+    const brand = theme.color.aliases?.brand ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const surface = theme.color.aliases?.surface ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const handlePress = (key: string) => {
+        setInternalKey(key);
+        onChange?.(key);
+    };
+
+    const renderTab = (item: TabItem) => {
+        const isActive = currentKey === item.key;
+        const tabColor = isActive ? (brand.primary ?? '#006FFF') : (textColors.tertiary ?? '#757B80');
+
+        const tabStyle: ViewStyle = (() => {
+            switch (variant) {
+                case 'pill':
+                    return {
+                        backgroundColor: isActive ? (brand.primary ?? '#006FFF') : 'transparent',
+                        borderRadius: 9999, paddingHorizontal: padding.m ?? 12, paddingVertical: padding.xs ?? 4,
+                    };
+                case 'enclosed':
+                    return {
+                        backgroundColor: isActive ? (surface.base ?? '#FFFFFF') : (surface['layer-1'] ?? '#F2F8FC'),
+                        borderWidth: isActive ? 1 : 0, borderColor: borders.base ?? '#E8EEF2',
+                        borderBottomWidth: isActive ? 0 : 1,
+                        borderTopLeftRadius: 8, borderTopRightRadius: 8,
+                        paddingHorizontal: padding.m ?? 12, paddingVertical: padding.s ?? 8,
+                    };
+                default:
+                    return {
+                        borderBottomWidth: isActive ? 2 : 0, borderBottomColor: brand.primary ?? '#006FFF',
+                        paddingHorizontal: padding.m ?? 12, paddingVertical: padding.s ?? 8,
+                    };
+            }
+        })();
+
+        return (
+            <Pressable key={item.key} onPress={() => handlePress(item.key)} disabled={item.disabled}
+                accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled: item.disabled }}
+                style={[styles.tab, tabStyle, fullWidth && styles.tabFull, item.disabled && { opacity: disabledOpacity }]}>
+                {item.icon}
+                <Text style={{
+                    fontSize: fontSize.s ?? 14, fontWeight: isActive ? '600' : '400',
+                    color: variant === 'pill' && isActive ? '#FFFFFF' : tabColor,
+                }}>{item.label}</Text>
+                {item.badge !== undefined && item.badge > 0 && (
+                    <View style={[styles.badge, { backgroundColor: brand.primary ?? '#006FFF' }]}>
+                        <Text style={styles.badgeText}>{item.badge > 99 ? '99+' : item.badge}</Text>
+                    </View>
+                )}
+            </Pressable>
+        );
+    };
+
+    return (
+        <View style={style}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}
+                contentContainerStyle={[
+                    styles.tabBar,
+                    variant === 'underline' && { borderBottomWidth: 1, borderBottomColor: borders.base ?? '#E8EEF2' },
+                    fullWidth && { flex: 1 },
+                ]}>
+                {items.map(renderTab)}
+            </ScrollView>
+            {children}
+        </View>
+    );
+};
+
+Tabs.displayName = 'Tabs';
+
+const styles = StyleSheet.create({
+    tabBar: { flexDirection: 'row' },
+    tab: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    tabFull: { flex: 1, justifyContent: 'center' },
+    badge: { minWidth: 18, height: 18, borderRadius: 9, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 4 },
+    badgeText: { color: '#FFFFFF', fontSize: 10, fontWeight: '700' },
+});
+
+export default Tabs;

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';