@idealyst/blur 1.2.40
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.
- package/package.json +74 -0
- package/src/BlurView.native.tsx +57 -0
- package/src/BlurView.web.tsx +56 -0
- package/src/examples/BlurViewExamples.tsx +430 -0
- package/src/examples/index.ts +1 -0
- package/src/index.native.ts +2 -0
- package/src/index.ts +2 -0
- package/src/types.ts +64 -0
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@idealyst/blur",
|
|
3
|
+
"version": "1.2.40",
|
|
4
|
+
"description": "Cross-platform blur component for React and React Native",
|
|
5
|
+
"readme": "README.md",
|
|
6
|
+
"main": "src/index.ts",
|
|
7
|
+
"module": "src/index.ts",
|
|
8
|
+
"types": "src/index.ts",
|
|
9
|
+
"react-native": "src/index.native.ts",
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/IdealystIO/idealyst-framework.git",
|
|
13
|
+
"directory": "packages/blur"
|
|
14
|
+
},
|
|
15
|
+
"author": "Idealyst <contact@idealyst.io>",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"react-native": "./src/index.native.ts",
|
|
23
|
+
"import": "./src/index.ts",
|
|
24
|
+
"require": "./src/index.ts",
|
|
25
|
+
"types": "./src/index.ts"
|
|
26
|
+
},
|
|
27
|
+
"./examples": {
|
|
28
|
+
"import": "./src/examples/index.ts",
|
|
29
|
+
"require": "./src/examples/index.ts",
|
|
30
|
+
"types": "./src/examples/index.ts"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"scripts": {
|
|
34
|
+
"prepublishOnly": "echo 'Publishing TypeScript source directly'",
|
|
35
|
+
"publish:npm": "npm publish"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"@idealyst/components": ">=1.2.0",
|
|
39
|
+
"@react-native-community/blur": ">=4.0.0",
|
|
40
|
+
"react": ">=16.8.0",
|
|
41
|
+
"react-native": ">=0.60.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependenciesMeta": {
|
|
44
|
+
"@idealyst/components": {
|
|
45
|
+
"optional": true
|
|
46
|
+
},
|
|
47
|
+
"@react-native-community/blur": {
|
|
48
|
+
"optional": true
|
|
49
|
+
},
|
|
50
|
+
"react-native": {
|
|
51
|
+
"optional": true
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@idealyst/components": "^1.2.40",
|
|
56
|
+
"@react-native-community/blur": "^4.4.1",
|
|
57
|
+
"@types/react": "^19.1.0",
|
|
58
|
+
"react": "^19.1.0",
|
|
59
|
+
"react-native": "^0.80.1",
|
|
60
|
+
"typescript": "^5.0.0"
|
|
61
|
+
},
|
|
62
|
+
"files": [
|
|
63
|
+
"src",
|
|
64
|
+
"README.md"
|
|
65
|
+
],
|
|
66
|
+
"keywords": [
|
|
67
|
+
"react",
|
|
68
|
+
"react-native",
|
|
69
|
+
"blur",
|
|
70
|
+
"backdrop-filter",
|
|
71
|
+
"cross-platform",
|
|
72
|
+
"glassmorphism"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BlurView as RNBlurView } from '@react-native-community/blur';
|
|
3
|
+
import type { BlurViewNativeProps, BlurType } from './types';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Map our blur types to react-native-community/blur types
|
|
7
|
+
*/
|
|
8
|
+
const mapBlurType = (
|
|
9
|
+
blurType: BlurType
|
|
10
|
+
): 'light' | 'dark' | 'xlight' | 'prominent' | 'regular' => {
|
|
11
|
+
switch (blurType) {
|
|
12
|
+
case 'light':
|
|
13
|
+
return 'light';
|
|
14
|
+
case 'dark':
|
|
15
|
+
return 'dark';
|
|
16
|
+
case 'default':
|
|
17
|
+
default:
|
|
18
|
+
return 'regular';
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* BlurView component for React Native using @react-native-community/blur
|
|
24
|
+
*
|
|
25
|
+
* Wraps the native blur implementation with a consistent API matching the web version.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* <BlurView intensity={50} blurType="light">
|
|
30
|
+
* <Text>Content with blurred background</Text>
|
|
31
|
+
* </BlurView>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export const BlurView: React.FC<BlurViewNativeProps> = ({
|
|
35
|
+
intensity = 50,
|
|
36
|
+
blurType = 'default',
|
|
37
|
+
children,
|
|
38
|
+
style,
|
|
39
|
+
testID,
|
|
40
|
+
reducedTransparencyFallbackColor,
|
|
41
|
+
}) => {
|
|
42
|
+
const normalizedIntensity = Math.max(0, Math.min(100, intensity));
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<RNBlurView
|
|
46
|
+
style={style}
|
|
47
|
+
blurType={mapBlurType(blurType)}
|
|
48
|
+
blurAmount={normalizedIntensity / 10}
|
|
49
|
+
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
50
|
+
testID={testID}
|
|
51
|
+
>
|
|
52
|
+
{children}
|
|
53
|
+
</RNBlurView>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default BlurView;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BlurViewWebProps, BlurType } from './types';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Get the background color based on blur type
|
|
6
|
+
*/
|
|
7
|
+
const getBackgroundColor = (blurType: BlurType): string => {
|
|
8
|
+
switch (blurType) {
|
|
9
|
+
case 'light':
|
|
10
|
+
return 'rgba(255, 255, 255, 0.3)';
|
|
11
|
+
case 'dark':
|
|
12
|
+
return 'rgba(0, 0, 0, 0.3)';
|
|
13
|
+
case 'default':
|
|
14
|
+
default:
|
|
15
|
+
return 'transparent';
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* BlurView component for web using CSS backdrop-filter
|
|
21
|
+
*
|
|
22
|
+
* Uses the native CSS backdrop-filter property for efficient blur effects.
|
|
23
|
+
* Note: backdrop-filter may not be supported in all browsers.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <BlurView intensity={50} blurType="light">
|
|
28
|
+
* <Text>Content with blurred background</Text>
|
|
29
|
+
* </BlurView>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export const BlurView: React.FC<BlurViewWebProps> = ({
|
|
33
|
+
intensity = 50,
|
|
34
|
+
blurType = 'default',
|
|
35
|
+
children,
|
|
36
|
+
style,
|
|
37
|
+
className,
|
|
38
|
+
testID,
|
|
39
|
+
}) => {
|
|
40
|
+
const blurAmount = Math.max(0, Math.min(100, intensity)) / 5;
|
|
41
|
+
|
|
42
|
+
const blurStyle: React.CSSProperties = {
|
|
43
|
+
backdropFilter: `blur(${blurAmount}px)`,
|
|
44
|
+
WebkitBackdropFilter: `blur(${blurAmount}px)`,
|
|
45
|
+
backgroundColor: getBackgroundColor(blurType),
|
|
46
|
+
...(style as React.CSSProperties),
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div style={blurStyle} className={className} data-testid={testID}>
|
|
51
|
+
{children}
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export default BlurView;
|
|
@@ -0,0 +1,430 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BlurView Package Examples
|
|
3
|
+
*
|
|
4
|
+
* Demonstrates the @idealyst/blur component:
|
|
5
|
+
* - Basic blur effects with different types
|
|
6
|
+
* - Intensity control
|
|
7
|
+
* - Glassmorphism card patterns
|
|
8
|
+
* - Overlay effects
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import React, { useState } from 'react';
|
|
12
|
+
import { Screen, View, Text, Card, Slider, Divider, Button, Image } from '@idealyst/components';
|
|
13
|
+
import { BlurView } from '../index';
|
|
14
|
+
|
|
15
|
+
// Sample image for backgrounds
|
|
16
|
+
const SAMPLE_IMAGE = 'https://picsum.photos/800/600';
|
|
17
|
+
|
|
18
|
+
// =============================================================================
|
|
19
|
+
// Basic Blur Demo
|
|
20
|
+
// =============================================================================
|
|
21
|
+
|
|
22
|
+
const BasicBlurDemo: React.FC = () => {
|
|
23
|
+
return (
|
|
24
|
+
<Card padding="md" gap="md">
|
|
25
|
+
<Text typography="h4" weight="semibold">Basic Usage</Text>
|
|
26
|
+
<Text color="secondary">
|
|
27
|
+
Simple blur effect over content using the BlurView component.
|
|
28
|
+
</Text>
|
|
29
|
+
|
|
30
|
+
<View style={{ position: 'relative', height: 200, borderRadius: 12, overflow: 'hidden' }}>
|
|
31
|
+
<Image
|
|
32
|
+
source={{ uri: SAMPLE_IMAGE }}
|
|
33
|
+
style={{
|
|
34
|
+
position: 'absolute',
|
|
35
|
+
width: '100%',
|
|
36
|
+
height: '100%',
|
|
37
|
+
}}
|
|
38
|
+
/>
|
|
39
|
+
<BlurView
|
|
40
|
+
intensity={50}
|
|
41
|
+
blurType="default"
|
|
42
|
+
style={{
|
|
43
|
+
position: 'absolute',
|
|
44
|
+
bottom: 0,
|
|
45
|
+
left: 0,
|
|
46
|
+
right: 0,
|
|
47
|
+
padding: 16,
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
<Text weight="semibold" style={{ color: '#333' }}>
|
|
51
|
+
Blurred overlay content
|
|
52
|
+
</Text>
|
|
53
|
+
<Text typography="caption" style={{ color: '#555' }}>
|
|
54
|
+
This text is rendered on top of a blur effect
|
|
55
|
+
</Text>
|
|
56
|
+
</BlurView>
|
|
57
|
+
</View>
|
|
58
|
+
|
|
59
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
60
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
61
|
+
{`<BlurView intensity={50} blurType="default">
|
|
62
|
+
<Text>Blurred overlay content</Text>
|
|
63
|
+
</BlurView>`}
|
|
64
|
+
</Text>
|
|
65
|
+
</View>
|
|
66
|
+
</Card>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// =============================================================================
|
|
71
|
+
// Blur Types Demo
|
|
72
|
+
// =============================================================================
|
|
73
|
+
|
|
74
|
+
const BlurTypesDemo: React.FC = () => {
|
|
75
|
+
return (
|
|
76
|
+
<Card padding="md" gap="md">
|
|
77
|
+
<Text typography="h4" weight="semibold">Blur Types</Text>
|
|
78
|
+
<Text color="secondary">
|
|
79
|
+
Different blur types for light and dark backgrounds.
|
|
80
|
+
</Text>
|
|
81
|
+
|
|
82
|
+
<View direction="row" gap="md" style={{ flexWrap: 'wrap' }}>
|
|
83
|
+
{(['default', 'light', 'dark'] as const).map((type) => (
|
|
84
|
+
<View
|
|
85
|
+
key={type}
|
|
86
|
+
style={{
|
|
87
|
+
flex: 1,
|
|
88
|
+
minWidth: 150,
|
|
89
|
+
position: 'relative',
|
|
90
|
+
height: 150,
|
|
91
|
+
borderRadius: 12,
|
|
92
|
+
overflow: 'hidden',
|
|
93
|
+
}}
|
|
94
|
+
>
|
|
95
|
+
<Image
|
|
96
|
+
source={{ uri: SAMPLE_IMAGE }}
|
|
97
|
+
style={{
|
|
98
|
+
position: 'absolute',
|
|
99
|
+
width: '100%',
|
|
100
|
+
height: '100%',
|
|
101
|
+
}}
|
|
102
|
+
/>
|
|
103
|
+
<BlurView
|
|
104
|
+
intensity={60}
|
|
105
|
+
blurType={type}
|
|
106
|
+
style={{
|
|
107
|
+
flex: 1,
|
|
108
|
+
justifyContent: 'center',
|
|
109
|
+
alignItems: 'center',
|
|
110
|
+
}}
|
|
111
|
+
>
|
|
112
|
+
<Text
|
|
113
|
+
weight="semibold"
|
|
114
|
+
style={{ color: type === 'dark' ? '#fff' : '#333' }}
|
|
115
|
+
>
|
|
116
|
+
{type}
|
|
117
|
+
</Text>
|
|
118
|
+
</BlurView>
|
|
119
|
+
</View>
|
|
120
|
+
))}
|
|
121
|
+
</View>
|
|
122
|
+
|
|
123
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
124
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
125
|
+
{`// Available blur types
|
|
126
|
+
blurType="default" // Transparent blur
|
|
127
|
+
blurType="light" // Light tinted blur
|
|
128
|
+
blurType="dark" // Dark tinted blur`}
|
|
129
|
+
</Text>
|
|
130
|
+
</View>
|
|
131
|
+
</Card>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
// =============================================================================
|
|
136
|
+
// Intensity Control Demo
|
|
137
|
+
// =============================================================================
|
|
138
|
+
|
|
139
|
+
const IntensityControlDemo: React.FC = () => {
|
|
140
|
+
const [intensity, setIntensity] = useState(50);
|
|
141
|
+
|
|
142
|
+
return (
|
|
143
|
+
<Card padding="md" gap="md">
|
|
144
|
+
<Text typography="h4" weight="semibold">Intensity Control</Text>
|
|
145
|
+
<Text color="secondary">
|
|
146
|
+
Adjust the blur intensity from 0 to 100.
|
|
147
|
+
</Text>
|
|
148
|
+
|
|
149
|
+
<View style={{ position: 'relative', height: 200, borderRadius: 12, overflow: 'hidden' }}>
|
|
150
|
+
<Image
|
|
151
|
+
source={{ uri: SAMPLE_IMAGE }}
|
|
152
|
+
style={{
|
|
153
|
+
position: 'absolute',
|
|
154
|
+
width: '100%',
|
|
155
|
+
height: '100%',
|
|
156
|
+
}}
|
|
157
|
+
/>
|
|
158
|
+
<BlurView
|
|
159
|
+
intensity={intensity}
|
|
160
|
+
blurType="light"
|
|
161
|
+
style={{
|
|
162
|
+
flex: 1,
|
|
163
|
+
justifyContent: 'center',
|
|
164
|
+
alignItems: 'center',
|
|
165
|
+
}}
|
|
166
|
+
>
|
|
167
|
+
<Text typography="h3" weight="bold" style={{ color: '#333' }}>
|
|
168
|
+
{intensity}%
|
|
169
|
+
</Text>
|
|
170
|
+
<Text typography="caption" style={{ color: '#555' }}>
|
|
171
|
+
Blur Intensity
|
|
172
|
+
</Text>
|
|
173
|
+
</BlurView>
|
|
174
|
+
</View>
|
|
175
|
+
|
|
176
|
+
<View gap="sm">
|
|
177
|
+
<View direction="row" gap="sm" style={{ alignItems: 'center' }}>
|
|
178
|
+
<Text typography="caption" style={{ width: 70 }}>Intensity:</Text>
|
|
179
|
+
<View style={{ flex: 1 }}>
|
|
180
|
+
<Slider
|
|
181
|
+
value={intensity}
|
|
182
|
+
onValueChange={setIntensity}
|
|
183
|
+
minimumValue={0}
|
|
184
|
+
maximumValue={100}
|
|
185
|
+
step={5}
|
|
186
|
+
/>
|
|
187
|
+
</View>
|
|
188
|
+
<Text typography="caption" style={{ width: 40 }}>{intensity}%</Text>
|
|
189
|
+
</View>
|
|
190
|
+
</View>
|
|
191
|
+
|
|
192
|
+
<View direction="row" gap="sm" style={{ justifyContent: 'center' }}>
|
|
193
|
+
<Button type="outlined" size="sm" onPress={() => setIntensity(0)}>0%</Button>
|
|
194
|
+
<Button type="outlined" size="sm" onPress={() => setIntensity(25)}>25%</Button>
|
|
195
|
+
<Button type="outlined" size="sm" onPress={() => setIntensity(50)}>50%</Button>
|
|
196
|
+
<Button type="outlined" size="sm" onPress={() => setIntensity(75)}>75%</Button>
|
|
197
|
+
<Button type="outlined" size="sm" onPress={() => setIntensity(100)}>100%</Button>
|
|
198
|
+
</View>
|
|
199
|
+
|
|
200
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
201
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
202
|
+
{`<BlurView intensity={${intensity}}>
|
|
203
|
+
{/* Content */}
|
|
204
|
+
</BlurView>`}
|
|
205
|
+
</Text>
|
|
206
|
+
</View>
|
|
207
|
+
</Card>
|
|
208
|
+
);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
// =============================================================================
|
|
212
|
+
// Glassmorphism Card Demo
|
|
213
|
+
// =============================================================================
|
|
214
|
+
|
|
215
|
+
const GlassmorphismDemo: React.FC = () => {
|
|
216
|
+
return (
|
|
217
|
+
<Card padding="md" gap="md">
|
|
218
|
+
<Text typography="h4" weight="semibold">Glassmorphism Pattern</Text>
|
|
219
|
+
<Text color="secondary">
|
|
220
|
+
Create modern frosted glass UI effects.
|
|
221
|
+
</Text>
|
|
222
|
+
|
|
223
|
+
<View style={{ position: 'relative', height: 300, borderRadius: 16, overflow: 'hidden' }}>
|
|
224
|
+
<View
|
|
225
|
+
style={{
|
|
226
|
+
position: 'absolute',
|
|
227
|
+
width: '100%',
|
|
228
|
+
height: '100%',
|
|
229
|
+
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
230
|
+
}}
|
|
231
|
+
/>
|
|
232
|
+
<View
|
|
233
|
+
style={{
|
|
234
|
+
position: 'absolute',
|
|
235
|
+
width: 150,
|
|
236
|
+
height: 150,
|
|
237
|
+
borderRadius: 75,
|
|
238
|
+
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
239
|
+
top: -30,
|
|
240
|
+
left: -30,
|
|
241
|
+
}}
|
|
242
|
+
/>
|
|
243
|
+
<View
|
|
244
|
+
style={{
|
|
245
|
+
position: 'absolute',
|
|
246
|
+
width: 200,
|
|
247
|
+
height: 200,
|
|
248
|
+
borderRadius: 100,
|
|
249
|
+
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
250
|
+
bottom: -50,
|
|
251
|
+
right: -50,
|
|
252
|
+
}}
|
|
253
|
+
/>
|
|
254
|
+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
|
|
255
|
+
<BlurView
|
|
256
|
+
intensity={40}
|
|
257
|
+
blurType="light"
|
|
258
|
+
style={{
|
|
259
|
+
padding: 24,
|
|
260
|
+
borderRadius: 16,
|
|
261
|
+
width: '100%',
|
|
262
|
+
maxWidth: 300,
|
|
263
|
+
}}
|
|
264
|
+
>
|
|
265
|
+
<Text typography="h4" weight="bold" style={{ color: '#333', marginBottom: 8 }}>
|
|
266
|
+
Glass Card
|
|
267
|
+
</Text>
|
|
268
|
+
<Text style={{ color: '#555', marginBottom: 16 }}>
|
|
269
|
+
This card uses a blur effect combined with transparency to create a
|
|
270
|
+
glassmorphism design pattern.
|
|
271
|
+
</Text>
|
|
272
|
+
<Button size="sm" intent="primary">
|
|
273
|
+
Learn More
|
|
274
|
+
</Button>
|
|
275
|
+
</BlurView>
|
|
276
|
+
</View>
|
|
277
|
+
</View>
|
|
278
|
+
|
|
279
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
280
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
281
|
+
{`// Glassmorphism pattern
|
|
282
|
+
<BlurView
|
|
283
|
+
intensity={40}
|
|
284
|
+
blurType="light"
|
|
285
|
+
style={{
|
|
286
|
+
padding: 24,
|
|
287
|
+
borderRadius: 16,
|
|
288
|
+
}}
|
|
289
|
+
>
|
|
290
|
+
<Text>Glass card content</Text>
|
|
291
|
+
</BlurView>`}
|
|
292
|
+
</Text>
|
|
293
|
+
</View>
|
|
294
|
+
</Card>
|
|
295
|
+
);
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
// =============================================================================
|
|
299
|
+
// Modal Overlay Demo
|
|
300
|
+
// =============================================================================
|
|
301
|
+
|
|
302
|
+
const ModalOverlayDemo: React.FC = () => {
|
|
303
|
+
const [showOverlay, setShowOverlay] = useState(false);
|
|
304
|
+
|
|
305
|
+
return (
|
|
306
|
+
<Card padding="md" gap="md">
|
|
307
|
+
<Text typography="h4" weight="semibold">Modal Overlay</Text>
|
|
308
|
+
<Text color="secondary">
|
|
309
|
+
Use blur as a modal backdrop for focus effects.
|
|
310
|
+
</Text>
|
|
311
|
+
|
|
312
|
+
<View style={{ position: 'relative', height: 250, borderRadius: 12, overflow: 'hidden' }}>
|
|
313
|
+
<View style={{ padding: 16 }}>
|
|
314
|
+
<Text weight="semibold" style={{ marginBottom: 8 }}>Background Content</Text>
|
|
315
|
+
<Text color="secondary" style={{ marginBottom: 8 }}>
|
|
316
|
+
This is the main content that will be blurred when the overlay is shown.
|
|
317
|
+
</Text>
|
|
318
|
+
<View direction="row" gap="sm" style={{ marginBottom: 16 }}>
|
|
319
|
+
<View style={{ width: 50, height: 50, backgroundColor: '#e74c3c', borderRadius: 8 }} />
|
|
320
|
+
<View style={{ width: 50, height: 50, backgroundColor: '#3498db', borderRadius: 8 }} />
|
|
321
|
+
<View style={{ width: 50, height: 50, backgroundColor: '#2ecc71', borderRadius: 8 }} />
|
|
322
|
+
<View style={{ width: 50, height: 50, backgroundColor: '#f39c12', borderRadius: 8 }} />
|
|
323
|
+
</View>
|
|
324
|
+
<Button onPress={() => setShowOverlay(true)} intent="primary">
|
|
325
|
+
Show Overlay
|
|
326
|
+
</Button>
|
|
327
|
+
</View>
|
|
328
|
+
|
|
329
|
+
{showOverlay && (
|
|
330
|
+
<BlurView
|
|
331
|
+
intensity={70}
|
|
332
|
+
blurType="dark"
|
|
333
|
+
style={{
|
|
334
|
+
position: 'absolute',
|
|
335
|
+
top: 0,
|
|
336
|
+
left: 0,
|
|
337
|
+
right: 0,
|
|
338
|
+
bottom: 0,
|
|
339
|
+
justifyContent: 'center',
|
|
340
|
+
alignItems: 'center',
|
|
341
|
+
}}
|
|
342
|
+
>
|
|
343
|
+
<View
|
|
344
|
+
style={{
|
|
345
|
+
backgroundColor: 'white',
|
|
346
|
+
padding: 24,
|
|
347
|
+
borderRadius: 12,
|
|
348
|
+
maxWidth: 250,
|
|
349
|
+
}}
|
|
350
|
+
>
|
|
351
|
+
<Text weight="semibold" style={{ marginBottom: 8 }}>
|
|
352
|
+
Modal Content
|
|
353
|
+
</Text>
|
|
354
|
+
<Text color="secondary" style={{ marginBottom: 16 }}>
|
|
355
|
+
The background is blurred to draw focus to this modal.
|
|
356
|
+
</Text>
|
|
357
|
+
<Button onPress={() => setShowOverlay(false)} size="sm">
|
|
358
|
+
Close
|
|
359
|
+
</Button>
|
|
360
|
+
</View>
|
|
361
|
+
</BlurView>
|
|
362
|
+
)}
|
|
363
|
+
</View>
|
|
364
|
+
|
|
365
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
366
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
367
|
+
{`// Modal overlay pattern
|
|
368
|
+
{showOverlay && (
|
|
369
|
+
<BlurView
|
|
370
|
+
intensity={70}
|
|
371
|
+
blurType="dark"
|
|
372
|
+
style={{ position: 'absolute', ...fullSize }}
|
|
373
|
+
>
|
|
374
|
+
<ModalContent />
|
|
375
|
+
</BlurView>
|
|
376
|
+
)}`}
|
|
377
|
+
</Text>
|
|
378
|
+
</View>
|
|
379
|
+
</Card>
|
|
380
|
+
);
|
|
381
|
+
};
|
|
382
|
+
|
|
383
|
+
// =============================================================================
|
|
384
|
+
// Main Screen
|
|
385
|
+
// =============================================================================
|
|
386
|
+
|
|
387
|
+
export const BlurViewExamples: React.FC = () => {
|
|
388
|
+
return (
|
|
389
|
+
<Screen background="primary" padding="lg" scrollable>
|
|
390
|
+
<View gap="lg">
|
|
391
|
+
<Text typography="h2" weight="bold" align="center">
|
|
392
|
+
BlurView Examples
|
|
393
|
+
</Text>
|
|
394
|
+
<Text color="secondary" align="center">
|
|
395
|
+
Cross-platform blur effects for React and React Native
|
|
396
|
+
</Text>
|
|
397
|
+
|
|
398
|
+
<Divider />
|
|
399
|
+
|
|
400
|
+
<BasicBlurDemo />
|
|
401
|
+
<BlurTypesDemo />
|
|
402
|
+
<IntensityControlDemo />
|
|
403
|
+
<GlassmorphismDemo />
|
|
404
|
+
<ModalOverlayDemo />
|
|
405
|
+
|
|
406
|
+
<Card type="elevated" padding="md" gap="sm">
|
|
407
|
+
<Text weight="semibold">About @idealyst/blur</Text>
|
|
408
|
+
<Text color="secondary">
|
|
409
|
+
Cross-platform blur component that uses CSS backdrop-filter on web and
|
|
410
|
+
@react-native-community/blur on native platforms.
|
|
411
|
+
</Text>
|
|
412
|
+
<View gap="xs">
|
|
413
|
+
<Text typography="caption" weight="semibold">Props:</Text>
|
|
414
|
+
<Text typography="caption" color="secondary">• intensity (0-100) - Blur strength</Text>
|
|
415
|
+
<Text typography="caption" color="secondary">• blurType - 'default' | 'light' | 'dark'</Text>
|
|
416
|
+
<Text typography="caption" color="secondary">• style - Container styles</Text>
|
|
417
|
+
<Text typography="caption" color="secondary">• children - Content to render</Text>
|
|
418
|
+
</View>
|
|
419
|
+
<View gap="xs" style={{ marginTop: 8 }}>
|
|
420
|
+
<Text typography="caption" weight="semibold">Platform Notes:</Text>
|
|
421
|
+
<Text typography="caption" color="secondary">• Web: Uses CSS backdrop-filter (check browser support)</Text>
|
|
422
|
+
<Text typography="caption" color="secondary">• Native: Requires @react-native-community/blur</Text>
|
|
423
|
+
</View>
|
|
424
|
+
</Card>
|
|
425
|
+
</View>
|
|
426
|
+
</Screen>
|
|
427
|
+
);
|
|
428
|
+
};
|
|
429
|
+
|
|
430
|
+
export default BlurViewExamples;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BlurViewExamples } from './BlurViewExamples';
|
package/src/index.ts
ADDED
package/src/types.ts
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
import type { ViewStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Blur type for controlling the blur effect style
|
|
6
|
+
* - 'light': Light blur effect (suitable for light backgrounds)
|
|
7
|
+
* - 'dark': Dark blur effect (suitable for dark backgrounds)
|
|
8
|
+
* - 'default': Standard blur without tint
|
|
9
|
+
*/
|
|
10
|
+
export type BlurType = 'light' | 'dark' | 'default';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Common props shared between web and native BlurView implementations
|
|
14
|
+
*/
|
|
15
|
+
export interface BlurViewProps {
|
|
16
|
+
/**
|
|
17
|
+
* The intensity of the blur effect (0-100)
|
|
18
|
+
* @default 50
|
|
19
|
+
*/
|
|
20
|
+
intensity?: number;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* The type of blur effect to apply
|
|
24
|
+
* @default 'default'
|
|
25
|
+
*/
|
|
26
|
+
blurType?: BlurType;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Content to render inside the blur view
|
|
30
|
+
*/
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Style to apply to the blur container
|
|
35
|
+
*/
|
|
36
|
+
style?: ViewStyle | CSSProperties;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Test ID for testing purposes
|
|
40
|
+
*/
|
|
41
|
+
testID?: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Web-specific props for BlurView
|
|
46
|
+
*/
|
|
47
|
+
export interface BlurViewWebProps extends BlurViewProps {
|
|
48
|
+
/**
|
|
49
|
+
* Additional CSS class name
|
|
50
|
+
*/
|
|
51
|
+
className?: string;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Native-specific props for BlurView
|
|
56
|
+
* Extends the base props with react-native-community/blur specific options
|
|
57
|
+
*/
|
|
58
|
+
export interface BlurViewNativeProps extends BlurViewProps {
|
|
59
|
+
/**
|
|
60
|
+
* Reduce the intensity of the blur effect when set to true
|
|
61
|
+
* Only applicable on iOS
|
|
62
|
+
*/
|
|
63
|
+
reducedTransparencyFallbackColor?: string;
|
|
64
|
+
}
|