zkit-ui 2.0.7 → 2.0.8

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/dist/ui/Button/index.d.ts.map +1 -1
  2. package/dist/ui/Button/index.js +39 -12
  3. package/package.json +1 -1
  4. package/src/ui/Button/index.tsx +50 -17
package/dist/ui/Button/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
package/dist/ui/Button/index.js CHANGED
@@ -189,6 +189,10 @@ function colorToRgba(color, alpha) {
189
189
  const a = Math.max(0, Math.min(1, alpha));
190
190
  return `rgba(${r},${g},${b},${a})`;
191
191
  }
192
+ function resolveBoxShadowColor(color, opacity) {
193
+ var _a;
194
+ return (_a = colorToRgba(color, opacity)) !== null && _a !== void 0 ? _a : color;
195
+ }
192
196
  function resolveColorToken(input, fallback, theme) {
193
197
  var _a;
194
198
  if (input == null)
@@ -305,13 +309,22 @@ function resolveShadowStyle(shadow, scheme, variant) {
305
309
  return undefined;
306
310
  if (typeof shadow === 'object') {
307
311
  const radius = Math.max(0, (_a = shadow.radius) !== null && _a !== void 0 ? _a : (0, zkit_tools_1.wp)(10));
312
+ const color = (_b = shadow.color) !== null && _b !== void 0 ? _b : '#000000';
313
+ const offsetX = (_c = shadow.offsetX) !== null && _c !== void 0 ? _c : 0;
314
+ const offsetY = (_d = shadow.offsetY) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(3);
315
+ const opacity = (_e = shadow.opacity) !== null && _e !== void 0 ? _e : (scheme === 'dark' ? 0.28 : 0.14);
316
+ if (react_native_1.Platform.OS === 'web') {
317
+ return {
318
+ boxShadow: `${offsetX}px ${offsetY}px ${radius}px ${resolveBoxShadowColor(color, opacity)}`,
319
+ };
320
+ }
308
321
  return {
309
- shadowColor: (_b = shadow.color) !== null && _b !== void 0 ? _b : '#000000',
322
+ shadowColor: color,
310
323
  shadowOffset: {
311
- width: (_c = shadow.offsetX) !== null && _c !== void 0 ? _c : 0,
312
- height: (_d = shadow.offsetY) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(3),
324
+ width: offsetX,
325
+ height: offsetY,
313
326
  },
314
- shadowOpacity: (_e = shadow.opacity) !== null && _e !== void 0 ? _e : (scheme === 'dark' ? 0.28 : 0.14),
327
+ shadowOpacity: opacity,
315
328
  shadowRadius: radius,
316
329
  elevation: (_f = shadow.elevation) !== null && _f !== void 0 ? _f : Math.max(0, Math.round(radius * 0.55)),
317
330
  };
@@ -320,10 +333,17 @@ function resolveShadowStyle(shadow, scheme, variant) {
320
333
  if (level <= 0)
321
334
  return undefined;
322
335
  const radius = (0, zkit_tools_1.wp)(level * 5 + 3);
336
+ const offsetY = (0, zkit_tools_1.wp)(level + 1);
337
+ const opacity = scheme === 'dark' ? 0.26 : 0.14;
338
+ if (react_native_1.Platform.OS === 'web') {
339
+ return {
340
+ boxShadow: `0px ${offsetY}px ${radius}px ${resolveBoxShadowColor('#000000', opacity)}`,
341
+ };
342
+ }
323
343
  return {
324
344
  shadowColor: '#000000',
325
- shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(level + 1) },
326
- shadowOpacity: scheme === 'dark' ? 0.26 : 0.14,
345
+ shadowOffset: { width: 0, height: offsetY },
346
+ shadowOpacity: opacity,
327
347
  shadowRadius: radius,
328
348
  elevation: Math.max(0, Math.round(radius * 0.55)),
329
349
  };
@@ -539,6 +559,8 @@ function resolveWebCursorStyle(disabled) {
539
559
  return undefined;
540
560
  return { cursor: disabled ? 'not-allowed' : 'pointer' };
541
561
  }
562
+ const nativeNonePointerEvents = react_native_1.Platform.OS === 'web' ? undefined : 'none';
563
+ const webNonePointerEventsStyle = react_native_1.Platform.OS === 'web' ? { pointerEvents: 'none' } : undefined;
542
564
  function resolveRootAccessibilityRole() {
543
565
  return react_native_1.Platform.OS === 'web' ? undefined : 'button';
544
566
  }
@@ -741,15 +763,16 @@ function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', sh
741
763
  ...accessibilityState,
742
764
  busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
743
765
  disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
744
- }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
766
+ }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
745
767
  styles.content,
768
+ webNonePointerEventsStyle,
746
769
  contentSizeStyle,
747
770
  paddingStyle,
748
771
  radiusStyle,
749
772
  borderStyle,
750
773
  { backgroundColor: visualColors.backgroundColor },
751
774
  contentStyle,
752
- ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
775
+ ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
753
776
  }
754
777
  function ButtonPressAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
755
778
  const frame = useButtonFrame({
@@ -833,16 +856,18 @@ function ButtonPressAnimatedImpl({ variant = 'solid', tone = 'primary', size = '
833
856
  ...accessibilityState,
834
857
  busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
835
858
  disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
836
- }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
859
+ }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
837
860
  styles.content,
861
+ webNonePointerEventsStyle,
838
862
  contentSizeStyle,
839
863
  paddingStyle,
840
864
  radiusStyle,
841
865
  borderStyle,
842
866
  { backgroundColor: visualColors.backgroundColor },
843
867
  contentStyle,
844
- ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, pressHighlightEnabled ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
868
+ ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, pressHighlightEnabled ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: nativeNonePointerEvents, style: [
845
869
  react_native_1.StyleSheet.absoluteFillObject,
870
+ webNonePointerEventsStyle,
846
871
  radiusStyle,
847
872
  { backgroundColor: pressOverlay.color },
848
873
  overlayAnimatedStyle,
@@ -1016,16 +1041,18 @@ function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md',
1016
1041
  ...accessibilityState,
1017
1042
  busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
1018
1043
  disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
1019
- }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
1044
+ }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
1020
1045
  styles.content,
1046
+ webNonePointerEventsStyle,
1021
1047
  contentSizeStyle,
1022
1048
  paddingStyle,
1023
1049
  radiusStyle,
1024
1050
  borderStyle,
1025
1051
  { backgroundColor: visualColors.backgroundColor },
1026
1052
  contentStyle,
1027
- ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
1053
+ ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: nativeNonePointerEvents, style: [
1028
1054
  react_native_1.StyleSheet.absoluteFillObject,
1055
+ webNonePointerEventsStyle,
1029
1056
  radiusStyle,
1030
1057
  { backgroundColor: pressOverlay.color },
1031
1058
  overlayAnimatedStyle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zkit-ui",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/ui/Button/index.tsx CHANGED
@@ -352,6 +352,10 @@ function colorToRgba(color: string, alpha: number) {
352
352
  return `rgba(${r},${g},${b},${a})`;
353
353
  }
354
354
 
355
+ function resolveBoxShadowColor(color: string, opacity: number) {
356
+ return colorToRgba(color, opacity) ?? color;
357
+ }
358
+
355
359
  function resolveColorToken(input: string | undefined, fallback: string, theme: Theme) {
356
360
  if (input == null) return fallback;
357
361
 
@@ -484,13 +488,24 @@ function resolveShadowStyle(
484
488
 
485
489
  if (typeof shadow === 'object') {
486
490
  const radius = Math.max(0, shadow.radius ?? wp(10));
491
+ const color = shadow.color ?? '#000000';
492
+ const offsetX = shadow.offsetX ?? 0;
493
+ const offsetY = shadow.offsetY ?? wp(3);
494
+ const opacity = shadow.opacity ?? (scheme === 'dark' ? 0.28 : 0.14);
495
+
496
+ if (Platform.OS === 'web') {
497
+ return {
498
+ boxShadow: `${offsetX}px ${offsetY}px ${radius}px ${resolveBoxShadowColor(color, opacity)}`,
499
+ } as ViewStyle;
500
+ }
501
+
487
502
  return {
488
- shadowColor: shadow.color ?? '#000000',
503
+ shadowColor: color,
489
504
  shadowOffset: {
490
- width: shadow.offsetX ?? 0,
491
- height: shadow.offsetY ?? wp(3),
505
+ width: offsetX,
506
+ height: offsetY,
492
507
  },
493
- shadowOpacity: shadow.opacity ?? (scheme === 'dark' ? 0.28 : 0.14),
508
+ shadowOpacity: opacity,
494
509
  shadowRadius: radius,
495
510
  elevation: shadow.elevation ?? Math.max(0, Math.round(radius * 0.55)),
496
511
  };
@@ -500,10 +515,19 @@ function resolveShadowStyle(
500
515
  if (level <= 0) return undefined;
501
516
 
502
517
  const radius = wp(level * 5 + 3);
518
+ const offsetY = wp(level + 1);
519
+ const opacity = scheme === 'dark' ? 0.26 : 0.14;
520
+
521
+ if (Platform.OS === 'web') {
522
+ return {
523
+ boxShadow: `0px ${offsetY}px ${radius}px ${resolveBoxShadowColor('#000000', opacity)}`,
524
+ } as ViewStyle;
525
+ }
526
+
503
527
  return {
504
528
  shadowColor: '#000000',
505
- shadowOffset: { width: 0, height: wp(level + 1) },
506
- shadowOpacity: scheme === 'dark' ? 0.26 : 0.14,
529
+ shadowOffset: { width: 0, height: offsetY },
530
+ shadowOpacity: opacity,
507
531
  shadowRadius: radius,
508
532
  elevation: Math.max(0, Math.round(radius * 0.55)),
509
533
  };
@@ -839,6 +863,10 @@ function resolveWebCursorStyle(disabled: boolean): ViewStyle | undefined {
839
863
  return { cursor: disabled ? 'not-allowed' : 'pointer' } as ViewStyle;
840
864
  }
841
865
 
866
+ const nativeNonePointerEvents = Platform.OS === 'web' ? undefined : 'none';
867
+ const webNonePointerEventsStyle =
868
+ Platform.OS === 'web' ? ({ pointerEvents: 'none' } as ViewStyle) : undefined;
869
+
842
870
  function resolveRootAccessibilityRole() {
843
871
  return Platform.OS === 'web' ? undefined : 'button';
844
872
  }
@@ -1218,9 +1246,10 @@ function ButtonStaticImpl(
1218
1246
  testID={testID}
1219
1247
  >
1220
1248
  <View
1221
- pointerEvents="none"
1249
+ pointerEvents={nativeNonePointerEvents}
1222
1250
  style={[
1223
1251
  styles.content,
1252
+ webNonePointerEventsStyle,
1224
1253
  contentSizeStyle,
1225
1254
  paddingStyle,
1226
1255
  radiusStyle,
@@ -1231,11 +1260,11 @@ function ButtonStaticImpl(
1231
1260
  >
1232
1261
  {LinearGradientComponent && gradientCfg ? (
1233
1262
  <LinearGradientComponent
1234
- pointerEvents="none"
1263
+ pointerEvents={nativeNonePointerEvents}
1235
1264
  colors={gradientCfg.colors}
1236
1265
  start={gradientCfg.start}
1237
1266
  end={gradientCfg.end}
1238
- style={[StyleSheet.absoluteFillObject, radiusStyle]}
1267
+ style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
1239
1268
  />
1240
1269
  ) : null}
1241
1270
 
@@ -1437,9 +1466,10 @@ function ButtonPressAnimatedImpl(
1437
1466
  testID={testID}
1438
1467
  >
1439
1468
  <View
1440
- pointerEvents="none"
1469
+ pointerEvents={nativeNonePointerEvents}
1441
1470
  style={[
1442
1471
  styles.content,
1472
+ webNonePointerEventsStyle,
1443
1473
  contentSizeStyle,
1444
1474
  paddingStyle,
1445
1475
  radiusStyle,
@@ -1450,19 +1480,20 @@ function ButtonPressAnimatedImpl(
1450
1480
  >
1451
1481
  {LinearGradientComponent && gradientCfg ? (
1452
1482
  <LinearGradientComponent
1453
- pointerEvents="none"
1483
+ pointerEvents={nativeNonePointerEvents}
1454
1484
  colors={gradientCfg.colors}
1455
1485
  start={gradientCfg.start}
1456
1486
  end={gradientCfg.end}
1457
- style={[StyleSheet.absoluteFillObject, radiusStyle]}
1487
+ style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
1458
1488
  />
1459
1489
  ) : null}
1460
1490
 
1461
1491
  {pressHighlightEnabled ? (
1462
1492
  <Animated.View
1463
- pointerEvents="none"
1493
+ pointerEvents={nativeNonePointerEvents}
1464
1494
  style={[
1465
1495
  StyleSheet.absoluteFillObject,
1496
+ webNonePointerEventsStyle,
1466
1497
  radiusStyle,
1467
1498
  { backgroundColor: pressOverlay.color },
1468
1499
  overlayAnimatedStyle,
@@ -1777,9 +1808,10 @@ function ButtonAnimatedImpl(
1777
1808
  testID={testID}
1778
1809
  >
1779
1810
  <View
1780
- pointerEvents="none"
1811
+ pointerEvents={nativeNonePointerEvents}
1781
1812
  style={[
1782
1813
  styles.content,
1814
+ webNonePointerEventsStyle,
1783
1815
  contentSizeStyle,
1784
1816
  paddingStyle,
1785
1817
  radiusStyle,
@@ -1790,18 +1822,19 @@ function ButtonAnimatedImpl(
1790
1822
  >
1791
1823
  {LinearGradientComponent && gradientCfg ? (
1792
1824
  <LinearGradientComponent
1793
- pointerEvents="none"
1825
+ pointerEvents={nativeNonePointerEvents}
1794
1826
  colors={gradientCfg.colors}
1795
1827
  start={gradientCfg.start}
1796
1828
  end={gradientCfg.end}
1797
- style={[StyleSheet.absoluteFillObject, radiusStyle]}
1829
+ style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
1798
1830
  />
1799
1831
  ) : null}
1800
1832
 
1801
1833
  <Animated.View
1802
- pointerEvents="none"
1834
+ pointerEvents={nativeNonePointerEvents}
1803
1835
  style={[
1804
1836
  StyleSheet.absoluteFillObject,
1837
+ webNonePointerEventsStyle,
1805
1838
  radiusStyle,
1806
1839
  { backgroundColor: pressOverlay.color },
1807
1840
  overlayAnimatedStyle,