@popp0102/nova 0.6.7 → 0.7.0

package/lib/components/Button/config.js

@@ -19,26 +19,32 @@ export const sizes = {
   tiny: {
     fontSize: 12,
     padding: 6,
+    fontWeight: '400',
   },
   small: {
     fontSize: 14,
     padding: 8,
+    fontWeight: '500',
   },
   medium: {
-    fontSize: 16,
+    fontSize: 18,
     padding: 12,
+    fontWeight: '600',
   },
   large: {
-    fontSize: 20,
+    fontSize: 22,
     padding: 16,
+    fontWeight: '700',
   },
   xlarge: {
-    fontSize: 24,
+    fontSize: 26,
     padding: 20,
+    fontWeight: '800',
   },
   xxlarge: {
-    fontSize: 28,
+    fontSize: 30,
     padding: 24,
+    fontWeight: '900',
   },
 };
 
@@ -46,10 +52,13 @@ export const styles = StyleSheet.create({
   button: {
     padding: 8,
     borderRadius: 8,
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.18,
-    shadowRadius: 1.0,
-    elevation: 2,
+    borderWidth: 2,
+    borderColor: 'rgba(0, 0, 0, 0.3)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 8,
   },
   buttonContent: {
     flexDirection: 'row',

package/lib/components/Button/index.js

@@ -1,4 +1,5 @@
 import { View, Text, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import { MaterialIcons } from '@expo/vector-icons';
 import { colors, sizes, styles } from './config';
 
@@ -10,70 +11,62 @@ export default function Button({
   style,
   onPress,
   children,
-  icon,
-  iconPosition,
-  iconColor
+  icon
 }) {
   const buttonColors = colors[type];
   const buttonSizes = sizes[size];
-  const backgroundColor = color || buttonColors.background;
+  const isGradient = Array.isArray(color);
+  const backgroundColor = isGradient ? null : (color || buttonColors.background);
   const finalTextColor = textColor || buttonColors.text;
-  const iconSize = buttonSizes.fontSize * 1.4;
-  const finalIconColor = iconColor || finalTextColor;
+
+  const iconName = icon?.name;
+  const iconPosition = icon?.position;
+  const iconColor = icon?.color || finalTextColor;
 
   if (iconPosition && !['left', 'right', 'top'].includes(iconPosition)) {
-    throw new Error(`Invalid iconPosition: "${iconPosition}". Must be "left", "right", or "top".`);
+    throw new Error(`Invalid icon.position: "${iconPosition}". Must be "left", "right", or "top".`);
   }
 
   const isVerticalLayout = iconPosition === 'top';
+  const baseIconSize = buttonSizes.fontSize * 1.4;
   const verticalIconSize = buttonSizes.fontSize * 2.5;
+  const iconSize = isVerticalLayout ? verticalIconSize : baseIconSize;
+
+  const textElement = (
+    <Text
+      style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize, fontWeight: buttonSizes.fontWeight }]}
+      numberOfLines={1}
+    >
+      {children}
+    </Text>
+  );
+
+  const iconElement = iconName && (
+    <MaterialIcons name={iconName} size={iconSize} color={iconColor} />
+  );
+
+  const content = (
+    <View style={[styles.buttonContent, isVerticalLayout && styles.verticalContent]}>
+      {iconName && (iconPosition === 'left' || iconPosition === 'top') && iconElement}
+      {textElement}
+      {iconName && iconPosition === 'right' && iconElement}
+    </View>
+  );
+
+  const backgroundStyle = isGradient
+    ? { overflow: 'hidden', padding: 0 }
+    : { backgroundColor, padding: buttonSizes.padding };
 
   return (
     <Pressable
       onPress={onPress}
-      style={({ pressed }) => [
-        styles.button,
-        {
-          backgroundColor: backgroundColor,
-          padding: buttonSizes.padding,
-        },
-        pressed && styles.pressed,
-        style,
-      ]}
+      style={({ pressed }) => [styles.button, backgroundStyle, pressed && styles.pressed, style]}
     >
-      <View style={[
-        styles.buttonContent,
-        isVerticalLayout && styles.verticalContent
-      ]}>
-        {isVerticalLayout ? (
-          <>
-            {icon && (
-              <MaterialIcons name={icon} size={verticalIconSize} color={finalIconColor} />
-            )}
-            <Text
-              style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize }]}
-              numberOfLines={1}
-            >
-              {children}
-            </Text>
-          </>
-        ) : (
-          <>
-            {icon && iconPosition === 'left' && (
-              <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
-            )}
-            <Text
-              style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize }]}
-              numberOfLines={1}
-            >
-              {children}
-            </Text>
-            {icon && iconPosition === 'right' && (
-              <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
-            )}
-          </>
-        )}
-      </View>
+      {isGradient ? (
+        <LinearGradient colors={color} style={{ padding: buttonSizes.padding }}>
+          {content}
+        </LinearGradient>
+      ) : content}
     </Pressable>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -31,6 +31,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
+    "expo-linear-gradient": ">=14.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -42,7 +43,7 @@
     "@babel/preset-react": "^7.24.0",
     "@testing-library/react-native": "^12.4.3",
     "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^30.2.0",