@popp0102/nova 0.6.2 → 0.6.4

package/lib/components/Badge.js

@@ -1,6 +1,12 @@
 import { View, Text, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 
+const SIZES = {
+  small: 12,
+  medium: 14,
+  large: 16,
+};
+
 export default function Badge({
   children,
   leftIcon,
@@ -8,13 +14,16 @@ export default function Badge({
   iconSize = 20,
   color = 'white',
   backgroundColor = 'blue',
+  size = 'large',
   style
 }) {
+  const fontSize = SIZES[size] || SIZES.large;
+
   return (
     <View style={style}>
       <View style={[styles.container, { backgroundColor }]}>
         {leftIcon && <MaterialIcons name={leftIcon} size={iconSize} color={color} />}
-        <Text style={[styles.text, { color }]}>{children}</Text>
+        <Text style={[styles.text, { color, fontSize }]}>{children}</Text>
         {rightIcon && <MaterialIcons name={rightIcon} size={iconSize} color={color} />}
       </View>
     </View>
@@ -31,6 +40,6 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
   },
   text: {
-    fontSize: 16,
+    fontWeight: '600',
   },
 });

package/lib/components/Button.js

@@ -37,8 +37,8 @@ export default function Button({
   style,
   onPress,
   children,
-  leftIcon,
-  rightIcon,
+  icon,
+  iconPosition,
   iconColor
 }) {
   const buttonColors = colors[type];
@@ -47,6 +47,13 @@ export default function Button({
   const iconSize = sizes.fontSize * 1.4;
   const finalIconColor = iconColor || buttonColors.text;
 
+  if (iconPosition && !['left', 'right', 'top'].includes(iconPosition)) {
+    throw new Error(`Invalid iconPosition: "${iconPosition}". Must be "left", "right", or "top".`);
+  }
+
+  const isVerticalLayout = iconPosition === 'top';
+  const verticalIconSize = sizes.fontSize * 2.5;
+
   return (
     <View style={[style]}>
       <Pressable
@@ -60,18 +67,37 @@ export default function Button({
           pressed && styles.pressed,
         ]}
       >
-        <View style={styles.buttonContent}>
-          {leftIcon && (
-            <MaterialIcons name={leftIcon} size={iconSize} color={finalIconColor} />
-          )}
-          <Text
-            style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
-            numberOfLines={1}
-          >
-            {children}
-          </Text>
-          {rightIcon && (
-            <MaterialIcons name={rightIcon} size={iconSize} color={finalIconColor} />
+        <View style={[
+          styles.buttonContent,
+          isVerticalLayout && styles.verticalContent
+        ]}>
+          {isVerticalLayout ? (
+            <>
+              {icon && (
+                <MaterialIcons name={icon} size={verticalIconSize} color={finalIconColor} />
+              )}
+              <Text
+                style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
+                numberOfLines={1}
+              >
+                {children}
+              </Text>
+            </>
+          ) : (
+            <>
+              {icon && iconPosition === 'left' && (
+                <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
+              )}
+              <Text
+                style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
+                numberOfLines={1}
+              >
+                {children}
+              </Text>
+              {icon && iconPosition === 'right' && (
+                <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
+              )}
+            </>
           )}
         </View>
       </Pressable>
@@ -94,6 +120,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: 8,
   },
+  verticalContent: {
+    flexDirection: 'column',
+    gap: 4,
+  },
   text: {
     textAlign: 'center',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",