@umituz/react-native-design-system 4.25.87 → 4.25.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +30 -30
  2. package/src/responsive/compute/computeResponsivePositioning.ts +5 -4
  3. package/src/responsive/responsiveModal.ts +11 -11
  4. package/src/responsive/useResponsive.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "4.25.87",
3
+ "version": "4.25.89",
4
4
  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./dist/index.d.ts",
@@ -13,148 +13,148 @@
13
13
  "default": "./src/index.ts"
14
14
  },
15
15
  "./atoms": {
16
- "react-native": "./src/atoms/index.ts",
17
16
  "types": "./dist/atoms/index.d.ts",
17
+ "react-native": "./src/atoms/index.ts",
18
18
  "default": "./src/atoms/index.ts"
19
19
  },
20
20
  "./molecules": {
21
- "react-native": "./src/molecules/index.ts",
22
21
  "types": "./dist/molecules/index.d.ts",
22
+ "react-native": "./src/molecules/index.ts",
23
23
  "default": "./src/molecules/index.ts"
24
24
  },
25
25
  "./navigation": {
26
- "react-native": "./src/molecules/navigation/index.ts",
27
26
  "types": "./dist/molecules/navigation/index.d.ts",
27
+ "react-native": "./src/molecules/navigation/index.ts",
28
28
  "default": "./src/molecules/navigation/index.ts"
29
29
  },
30
30
  "./organisms": {
31
- "react-native": "./src/organisms/index.ts",
32
31
  "types": "./dist/organisms/index.d.ts",
32
+ "react-native": "./src/organisms/index.ts",
33
33
  "default": "./src/organisms/index.ts"
34
34
  },
35
35
  "./theme": {
36
- "react-native": "./src/theme/index.ts",
37
36
  "types": "./dist/theme/index.d.ts",
37
+ "react-native": "./src/theme/index.ts",
38
38
  "default": "./src/theme/index.ts"
39
39
  },
40
40
  "./typography": {
41
- "react-native": "./src/typography/index.ts",
42
41
  "types": "./dist/typography/index.d.ts",
42
+ "react-native": "./src/typography/index.ts",
43
43
  "default": "./src/typography/index.ts"
44
44
  },
45
45
  "./responsive": {
46
- "react-native": "./src/responsive/index.ts",
47
46
  "types": "./dist/responsive/index.d.ts",
47
+ "react-native": "./src/responsive/index.ts",
48
48
  "default": "./src/responsive/index.ts"
49
49
  },
50
50
  "./layouts": {
51
- "react-native": "./src/layouts/index.ts",
52
51
  "types": "./dist/layouts/index.d.ts",
52
+ "react-native": "./src/layouts/index.ts",
53
53
  "default": "./src/layouts/index.ts"
54
54
  },
55
55
  "./safe-area": {
56
- "react-native": "./src/safe-area/index.ts",
57
56
  "types": "./dist/safe-area/index.d.ts",
57
+ "react-native": "./src/safe-area/index.ts",
58
58
  "default": "./src/safe-area/index.ts"
59
59
  },
60
60
  "./device": {
61
- "react-native": "./src/device/index.ts",
62
61
  "types": "./dist/device/index.d.ts",
62
+ "react-native": "./src/device/index.ts",
63
63
  "default": "./src/device/index.ts"
64
64
  },
65
65
  "./exception": {
66
- "react-native": "./src/exception/index.ts",
67
66
  "types": "./dist/exception/index.d.ts",
67
+ "react-native": "./src/exception/index.ts",
68
68
  "default": "./src/exception/index.ts"
69
69
  },
70
70
  "./image": {
71
- "react-native": "./src/image/index.ts",
72
71
  "types": "./dist/image/index.d.ts",
72
+ "react-native": "./src/image/index.ts",
73
73
  "default": "./src/image/index.ts"
74
74
  },
75
75
  "./timezone": {
76
- "react-native": "./src/timezone/index.ts",
77
76
  "types": "./dist/timezone/index.d.ts",
77
+ "react-native": "./src/timezone/index.ts",
78
78
  "default": "./src/timezone/index.ts"
79
79
  },
80
80
  "./offline": {
81
- "react-native": "./src/offline/index.ts",
82
81
  "types": "./dist/offline/index.d.ts",
82
+ "react-native": "./src/offline/index.ts",
83
83
  "default": "./src/offline/index.ts"
84
84
  },
85
85
  "./onboarding": {
86
- "react-native": "./src/onboarding/index.ts",
87
86
  "types": "./dist/onboarding/index.d.ts",
87
+ "react-native": "./src/onboarding/index.ts",
88
88
  "default": "./src/onboarding/index.ts"
89
89
  },
90
90
  "./storage": {
91
- "react-native": "./src/storage/index.ts",
92
91
  "types": "./dist/storage/index.d.ts",
92
+ "react-native": "./src/storage/index.ts",
93
93
  "default": "./src/storage/index.ts"
94
94
  },
95
95
  "./filesystem": {
96
- "react-native": "./src/filesystem/index.ts",
97
96
  "types": "./dist/filesystem/index.d.ts",
97
+ "react-native": "./src/filesystem/index.ts",
98
98
  "default": "./src/filesystem/index.ts"
99
99
  },
100
100
  "./media": {
101
- "react-native": "./src/media/index.ts",
102
101
  "types": "./dist/media/index.d.ts",
102
+ "react-native": "./src/media/index.ts",
103
103
  "default": "./src/media/index.ts"
104
104
  },
105
105
  "./tanstack": {
106
- "react-native": "./src/tanstack/index.ts",
107
106
  "types": "./dist/tanstack/index.d.ts",
107
+ "react-native": "./src/tanstack/index.ts",
108
108
  "default": "./src/tanstack/index.ts"
109
109
  },
110
110
  "./loading": {
111
- "react-native": "./src/loading/index.ts",
112
111
  "types": "./dist/loading/index.d.ts",
112
+ "react-native": "./src/loading/index.ts",
113
113
  "default": "./src/loading/index.ts"
114
114
  },
115
115
  "./haptics": {
116
- "react-native": "./src/haptics/index.ts",
117
116
  "types": "./dist/haptics/index.d.ts",
117
+ "react-native": "./src/haptics/index.ts",
118
118
  "default": "./src/haptics/index.ts"
119
119
  },
120
120
  "./carousel": {
121
- "react-native": "./src/carousel/index.ts",
122
121
  "types": "./dist/carousel/index.d.ts",
122
+ "react-native": "./src/carousel/index.ts",
123
123
  "default": "./src/carousel/index.ts"
124
124
  },
125
125
  "./gallery": {
126
- "react-native": "./src/gallery/index.ts",
127
126
  "types": "./dist/gallery/index.d.ts",
127
+ "react-native": "./src/gallery/index.ts",
128
128
  "default": "./src/gallery/index.ts"
129
129
  },
130
130
  "./init": {
131
- "react-native": "./src/init/index.ts",
132
131
  "types": "./dist/init/index.d.ts",
132
+ "react-native": "./src/init/index.ts",
133
133
  "default": "./src/init/index.ts"
134
134
  },
135
135
  "./uuid": {
136
- "react-native": "./src/uuid/index.ts",
137
136
  "types": "./dist/uuid/index.d.ts",
137
+ "react-native": "./src/uuid/index.ts",
138
138
  "default": "./src/uuid/index.ts"
139
139
  },
140
140
  "./infinite-scroll": {
141
- "react-native": "./src/infinite-scroll/index.ts",
142
141
  "types": "./dist/infinite-scroll/index.d.ts",
142
+ "react-native": "./src/infinite-scroll/index.ts",
143
143
  "default": "./src/infinite-scroll/index.ts"
144
144
  },
145
145
  "./utilities": {
146
- "react-native": "./src/utilities/index.ts",
147
146
  "types": "./dist/utilities/index.d.ts",
147
+ "react-native": "./src/utilities/index.ts",
148
148
  "default": "./src/utilities/index.ts"
149
149
  },
150
150
  "./utils": {
151
- "react-native": "./src/utils/logger.ts",
152
151
  "types": "./dist/utils/logger.d.ts",
152
+ "react-native": "./src/utils/logger.ts",
153
153
  "default": "./src/utils/logger.ts"
154
154
  },
155
155
  "./variants": {
156
- "react-native": "./src/presentation/utils/variants.ts",
157
156
  "types": "./dist/presentation/utils/variants.d.ts",
157
+ "react-native": "./src/presentation/utils/variants.ts",
158
158
  "default": "./src/presentation/utils/variants.ts"
159
159
  },
160
160
  "./package.json": "./package.json"
package/src/responsive/compute/computeResponsivePositioning.ts CHANGED
@@ -28,7 +28,8 @@ export interface ComputedResponsivePositioning {
28
28
  }
29
29
 
30
30
  export const computeResponsivePositioning = (
31
- insets: { top: number; bottom: number; left: number; right: number }
31
+ insets: { top: number; bottom: number; left: number; right: number },
32
+ dimensions?: { width: number; height: number }
32
33
  ): ComputedResponsivePositioning => ({
33
34
  horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
34
35
  verticalPadding: getResponsiveVerticalPadding(insets),
@@ -36,7 +37,7 @@ export const computeResponsivePositioning = (
36
37
  fabPosition: getResponsiveFABPosition(insets),
37
38
  screenLayoutConfig: getScreenLayoutConfig(insets),
38
39
  tabBarConfig: getResponsiveTabBarConfig(insets),
39
- modalLayout: getResponsiveModalLayout(),
40
- bottomSheetLayout: getResponsiveBottomSheetLayout(),
41
- dialogLayout: getResponsiveDialogLayout(),
40
+ modalLayout: getResponsiveModalLayout(dimensions),
41
+ bottomSheetLayout: getResponsiveBottomSheetLayout(dimensions),
42
+ dialogLayout: getResponsiveDialogLayout(dimensions),
42
43
  });
package/src/responsive/responsiveModal.ts CHANGED
@@ -70,9 +70,9 @@ export const getResponsiveMinModalHeight = (dimensions?: { height: number }): nu
70
70
  }
71
71
  };
72
72
 
73
- export const getResponsiveModalWidth = (): number => {
73
+ export const getResponsiveModalWidth = (dimensions?: { width: number }): number => {
74
74
  try {
75
- const { width } = getScreenDimensions();
75
+ const { width } = dimensions || getScreenDimensions();
76
76
  const isTabletDevice = isTablet();
77
77
 
78
78
  const widthPercent = isTabletDevice
@@ -89,9 +89,9 @@ export const getResponsiveModalWidth = (): number => {
89
89
  }
90
90
  };
91
91
 
92
- export const getResponsiveModalHeight = (): number => {
92
+ export const getResponsiveModalHeight = (dimensions?: { height: number }): number => {
93
93
  try {
94
- const { height } = getScreenDimensions();
94
+ const { height } = dimensions || getScreenDimensions();
95
95
  const isTabletDevice = isTablet();
96
96
 
97
97
  if (isTabletDevice) {
@@ -136,12 +136,12 @@ export const getResponsiveBackdropOpacity = (): number => {
136
136
  return MODAL_CONFIG.BACKDROP_OPACITY_DEFAULT;
137
137
  };
138
138
 
139
- export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
139
+ export const getResponsiveModalLayout = (dimensions?: { width: number; height: number }): ResponsiveModalLayout => {
140
140
  const isTabletDevice = isTablet();
141
141
 
142
142
  return {
143
- width: getResponsiveModalWidth(),
144
- height: getResponsiveModalHeight(),
143
+ width: getResponsiveModalWidth(dimensions),
144
+ height: getResponsiveModalHeight(dimensions),
145
145
  maxWidth: getResponsiveModalMaxWidth(),
146
146
  borderRadius: getResponsiveModalBorderRadius(),
147
147
  backdropOpacity: getResponsiveBackdropOpacity(),
@@ -151,8 +151,8 @@ export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
151
151
  };
152
152
  };
153
153
 
154
- export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout => {
155
- const { height } = getScreenDimensions();
154
+ export const getResponsiveBottomSheetLayout = (dimensions?: { width: number; height: number }): ResponsiveBottomSheetLayout => {
155
+ const { height } = dimensions || getScreenDimensions();
156
156
 
157
157
  return {
158
158
  minHeight: MODAL_CONFIG.BOTTOM_SHEET_MIN_HEIGHT,
@@ -161,8 +161,8 @@ export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout =>
161
161
  };
162
162
  };
163
163
 
164
- export const getResponsiveDialogLayout = (): ResponsiveDialogLayout => {
165
- const { width, height } = getScreenDimensions();
164
+ export const getResponsiveDialogLayout = (dimensions?: { width: number; height: number }): ResponsiveDialogLayout => {
165
+ const { width, height } = dimensions || getScreenDimensions();
166
166
 
167
167
  return {
168
168
  width: Math.min(
package/src/responsive/useResponsive.ts CHANGED
@@ -59,7 +59,7 @@ export const useResponsive = (): UseResponsiveReturn => {
59
59
  const dimensions = { width, height };
60
60
  const deviceInfo = computeDeviceInfo(dimensions);
61
61
  const sizes = computeResponsiveSizes(dimensions);
62
- const positioning = computeResponsivePositioning(insets);
62
+ const positioning = computeResponsivePositioning(insets, dimensions);
63
63
  const onboarding = computeOnboardingSizes(deviceInfo);
64
64
  const iPadLayout = deviceInfo.isTabletDevice ? getIPadLayoutInfo() : null;
65
65