feat(utils): add createShadow utility for consistent shadow styling

refactor(components): replace inline shadow styles with createShadow utility
fix(components): remove redundant pointerEvents in disabled states
style(components): clean up and standardize component styles

Author: masumrpg

.gitignore

@@ -16,6 +16,7 @@ node_modules
 *.launch
 .settings/
 *.sublime-workspace
+.vscode
 
 # IDE - VSCode
 .vscode/*

apps/example/app/ui/list/index.tsx

@@ -13,6 +13,7 @@ import {
   HFlashList,
   Typography,
   useTheme,
+  utils,
   VFlashList,
 } from 'rnc-theme';
 
@@ -348,14 +349,7 @@ const styles = StyleSheet.create({
   },
   postItem: {
     marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
+    ...utils.createShadow(3)
   },
   postHeader: {
     flexDirection: 'row',

apps/example/app/ui/modal/index.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
   Box,
   Switcher,
+  utils,
 } from 'rnc-theme';
 
 export default function ModalScreen() {
@@ -434,11 +435,7 @@ export default function ModalScreen() {
             style={{
               flex: 1,
               borderRadius: theme.components.borderRadius.lg,
-              shadowColor: '#ef4444',
-              shadowOffset: { width: 0, height: 4 },
-              shadowOpacity: 0.3,
-              shadowRadius: 8,
-              elevation: 6,
+              ...utils.createShadow(6)
             }}
           >
             <ButtonText>Delete</ButtonText>

apps/example/app/ui/scroll/index.tsx

@@ -21,6 +21,7 @@ import {
   ToggleMode,
   AnimatedVScroll,
   useScrollToHide,
+  utils,
 } from 'rnc-theme';
 
 interface Product {
@@ -387,11 +388,7 @@ const createStyles = (theme: Theme) =>
       right: 0,
       zIndex: 1000,
       backgroundColor: theme.colors.background,
-      shadowColor: 'black',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 5,
+      ...utils.createShadow(5)
     },
     headerContent: {
       height: HEADER_HEIGHT,
@@ -429,11 +426,7 @@ const createStyles = (theme: Theme) =>
       maxWidth: 80,
     },
     productCard: {
-      shadowColor: 'black',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 2,
+      ...utils.createShadow(2)
     },
     productImage: {
       width: '100%',

apps/example/app/ui/tooltip/index.tsx

@@ -19,6 +19,7 @@ import {
   useThemedStyles,
   Box,
   VScroll,
+  utils,
 } from 'rnc-theme';
 import { Settings, Star, Heart, AlertCircle } from 'lucide-react-native';
 
@@ -474,29 +475,15 @@ const createStyles = (theme: Theme) =>
       padding: theme.spacing.xl,
       borderRadius: theme.components.borderRadius.lg,
       margin: theme.spacing.lg,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 4,
-      },
-      shadowOpacity: 0.3,
-      shadowRadius: 4.65,
-      elevation: 8,
+      ...utils.createShadow(8)
     },
     modalContent: {
       backgroundColor: theme.colors.surface,
       padding: theme.spacing.xl,
       borderRadius: theme.components.borderRadius.lg,
       margin: theme.spacing.lg,
       maxWidth: 300,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-      elevation: 5,
+      ...utils.createShadow(5)
     },
     hostContainer: {
       borderWidth: 2,

libs/rnc-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnc-theme",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "funding": {
     "type": "github",
     "url": "https://github.com/masumrpg/react-native-components"