@buoy-gg/bottom-sheet 7.0.26 → 7.0.27

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 (9) hide show
  1. package/lib/commonjs/components/BottomSheet.js +4 -3
  2. package/lib/commonjs/components/BottomSheet.web.js +14 -4
  3. package/lib/module/components/BottomSheet.js +5 -4
  4. package/lib/module/components/BottomSheet.web.js +13 -4
  5. package/lib/typescript/components/BottomSheet.d.ts +6 -0
  6. package/lib/typescript/components/BottomSheet.d.ts.map +1 -1
  7. package/lib/typescript/components/BottomSheet.web.d.ts +5 -0
  8. package/lib/typescript/components/BottomSheet.web.d.ts.map +1 -1
  9. package/package.json +2 -2
package/lib/commonjs/components/BottomSheet.js CHANGED
@@ -412,7 +412,8 @@ const BottomSheetComponent = ({
412
412
  footer,
413
413
  footerHeight = 0,
414
414
  onBack,
415
- theme: customTheme
415
+ theme: customTheme,
416
+ background = true
416
417
  }) => {
417
418
  const theme = {
418
419
  ...defaultTheme,
@@ -828,7 +829,7 @@ const BottomSheetComponent = ({
828
829
  })
829
830
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
830
831
  style: [styles.content, customStyles.content],
831
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
832
+ children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
832
833
  style: {
833
834
  flex: 1
834
835
  },
@@ -936,7 +937,7 @@ const BottomSheetComponent = ({
936
937
  theme: theme
937
938
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
938
939
  style: [styles.content, customStyles.content],
939
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
940
+ children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
940
941
  style: {
941
942
  flex: 1
942
943
  },
package/lib/commonjs/components/BottomSheet.web.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.BottomSheet = void 0;
7
7
  var _react = require("react");
8
+ var _sharedUi = require("@buoy-gg/shared-ui");
8
9
  var _bottomSheetGeometry = require("./bottomSheetGeometry");
9
10
  var _useMultiTap = require("./useMultiTap");
10
11
  var _jsxRuntime = require("react/jsx-runtime");
@@ -38,6 +39,10 @@ var _jsxRuntime = require("react/jsx-runtime");
38
39
  * animates out), and we mirror that.
39
40
  */
40
41
 
42
+ // RN component, but safe here: every consumer of the web sheet (desktop
43
+ // renderer, website demos) aliases `react-native` to react-native-web, and
44
+ // the backgrounds primitives handle RNW explicitly.
45
+
41
46
  // ============================================================================
42
47
  // THEME — same palette as native BottomSheet.tsx defaultTheme
43
48
  // ============================================================================
@@ -304,7 +309,8 @@ function SheetContent({
304
309
  footerHeight,
305
310
  disableScrollWrapper,
306
311
  contentStyle,
307
- theme
312
+ theme,
313
+ background
308
314
  }) {
309
315
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
310
316
  style: {
@@ -320,7 +326,7 @@ function SheetContent({
320
326
  position: 'relative',
321
327
  ...contentStyle
322
328
  },
323
- children: [disableScrollWrapper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
329
+ children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}) : null, disableScrollWrapper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
324
330
  style: {
325
331
  flex: 1,
326
332
  minHeight: 0,
@@ -367,7 +373,8 @@ function SheetPanel({
367
373
  footer,
368
374
  footerHeight = 0,
369
375
  disableScrollWrapper,
370
- zIndex = 1000
376
+ zIndex = 1000,
377
+ background = true
371
378
  } = props;
372
379
  const sheetRef = (0, _react.useRef)(null);
373
380
  const wrapperRef = (0, _react.useRef)(null);
@@ -482,6 +489,7 @@ function SheetPanel({
482
489
  disableScrollWrapper: disableScrollWrapper,
483
490
  contentStyle: customStyles.content,
484
491
  theme: theme,
492
+ background: background,
485
493
  children: children
486
494
  })]
487
495
  })
@@ -527,7 +535,8 @@ function FloatingWindow({
527
535
  footerHeight = 0,
528
536
  onBack,
529
537
  disableScrollWrapper,
530
- zIndex = 1000
538
+ zIndex = 1000,
539
+ background = true
531
540
  } = props;
532
541
  const windowRef = (0, _react.useRef)(null);
533
542
  const [isDragging, setIsDragging] = (0, _react.useState)(false);
@@ -696,6 +705,7 @@ function FloatingWindow({
696
705
  disableScrollWrapper: disableScrollWrapper,
697
706
  contentStyle: customStyles.content,
698
707
  theme: theme,
708
+ background: background,
699
709
  children: children
700
710
  }), corners.map(({
701
711
  corner,
package/lib/module/components/BottomSheet.js CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  import { useState, useRef, useEffect, useMemo, useCallback, memo } from "react";
16
16
  import { View, StyleSheet, TouchableWithoutFeedback, Dimensions, PanResponder, Animated, ScrollView, Text, Platform, StatusBar } from "react-native";
17
- import { absoluteFill } from "@buoy-gg/shared-ui";
17
+ import { absoluteFill, ToolBackground } from "@buoy-gg/shared-ui";
18
18
 
19
19
  // ============================================================================
20
20
  // CONSTANTS - Modal dimensions and configuration
@@ -409,7 +409,8 @@ const BottomSheetComponent = ({
409
409
  footer,
410
410
  footerHeight = 0,
411
411
  onBack,
412
- theme: customTheme
412
+ theme: customTheme,
413
+ background = true
413
414
  }) => {
414
415
  const theme = {
415
416
  ...defaultTheme,
@@ -825,7 +826,7 @@ const BottomSheetComponent = ({
825
826
  })
826
827
  }), /*#__PURE__*/_jsxs(View, {
827
828
  style: [styles.content, customStyles.content],
828
- children: [/*#__PURE__*/_jsx(ScrollView, {
829
+ children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, /*#__PURE__*/_jsx(ScrollView, {
829
830
  style: {
830
831
  flex: 1
831
832
  },
@@ -933,7 +934,7 @@ const BottomSheetComponent = ({
933
934
  theme: theme
934
935
  }), /*#__PURE__*/_jsxs(View, {
935
936
  style: [styles.content, customStyles.content],
936
- children: [/*#__PURE__*/_jsx(ScrollView, {
937
+ children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, /*#__PURE__*/_jsx(ScrollView, {
937
938
  style: {
938
939
  flex: 1
939
940
  },
package/lib/module/components/BottomSheet.web.js CHANGED
@@ -31,6 +31,10 @@
31
31
  */
32
32
 
33
33
  import { useState, useRef, useEffect } from 'react';
34
+ // RN component, but safe here: every consumer of the web sheet (desktop
35
+ // renderer, website demos) aliases `react-native` to react-native-web, and
36
+ // the backgrounds primitives handle RNW explicitly.
37
+ import { ToolBackground } from '@buoy-gg/shared-ui';
34
38
  import { MIN_HEIGHT, DEFAULT_HEIGHT, FLOATING_WIDTH, FLOATING_HEIGHT, FLOATING_MIN_HEIGHT, floatingMinWidth, resizeCorner, shouldCloseOnRelease } from './bottomSheetGeometry';
35
39
  import { useMultiTap } from './useMultiTap';
36
40
 
@@ -301,7 +305,8 @@ function SheetContent({
301
305
  footerHeight,
302
306
  disableScrollWrapper,
303
307
  contentStyle,
304
- theme
308
+ theme,
309
+ background
305
310
  }) {
306
311
  return /*#__PURE__*/_jsxs("div", {
307
312
  style: {
@@ -317,7 +322,7 @@ function SheetContent({
317
322
  position: 'relative',
318
323
  ...contentStyle
319
324
  },
320
- children: [disableScrollWrapper ? children : /*#__PURE__*/_jsx("div", {
325
+ children: [background ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ? children : /*#__PURE__*/_jsx("div", {
321
326
  style: {
322
327
  flex: 1,
323
328
  minHeight: 0,
@@ -364,7 +369,8 @@ function SheetPanel({
364
369
  footer,
365
370
  footerHeight = 0,
366
371
  disableScrollWrapper,
367
- zIndex = 1000
372
+ zIndex = 1000,
373
+ background = true
368
374
  } = props;
369
375
  const sheetRef = useRef(null);
370
376
  const wrapperRef = useRef(null);
@@ -479,6 +485,7 @@ function SheetPanel({
479
485
  disableScrollWrapper: disableScrollWrapper,
480
486
  contentStyle: customStyles.content,
481
487
  theme: theme,
488
+ background: background,
482
489
  children: children
483
490
  })]
484
491
  })
@@ -524,7 +531,8 @@ function FloatingWindow({
524
531
  footerHeight = 0,
525
532
  onBack,
526
533
  disableScrollWrapper,
527
- zIndex = 1000
534
+ zIndex = 1000,
535
+ background = true
528
536
  } = props;
529
537
  const windowRef = useRef(null);
530
538
  const [isDragging, setIsDragging] = useState(false);
@@ -693,6 +701,7 @@ function FloatingWindow({
693
701
  disableScrollWrapper: disableScrollWrapper,
694
702
  contentStyle: customStyles.content,
695
703
  theme: theme,
704
+ background: background,
696
705
  children: children
697
706
  }), corners.map(({
698
707
  corner,
package/lib/typescript/components/BottomSheet.d.ts CHANGED
@@ -48,6 +48,12 @@ export interface BottomSheetProps {
48
48
  footerHeight?: number;
49
49
  onBack?: () => void;
50
50
  theme?: Partial<typeof defaultTheme>;
51
+ /**
52
+ * Render the shared `ToolBackground` (the persisted preset — Live Sky by
53
+ * default) behind the sheet body. On by default; pass false for sheets that
54
+ * don't want a backdrop.
55
+ */
56
+ background?: boolean;
51
57
  }
52
58
  export declare const BottomSheet: import("react").NamedExoticComponent<BottomSheetProps>;
53
59
  export {};
package/lib/typescript/components/BottomSheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAUL,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EASL,SAAS,EAIV,MAAM,cAAc,CAAC;AAgGtB,QAAA,MAAM,YAAY;;;;;;;;;;CAUjB,CAAC;AAKF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,YAAY,CAAC,CAAC;CACtC;AA4mCD,eAAO,MAAM,WAAW,wDAA6B,CAAC"}
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAUL,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EASL,SAAS,EAIV,MAAM,cAAc,CAAC;AAgGtB,QAAA,MAAM,YAAY;;;;;;;;;;CAUjB,CAAC;AAKF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,YAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAknCD,eAAO,MAAM,WAAW,wDAA6B,CAAC"}
package/lib/typescript/components/BottomSheet.web.d.ts CHANGED
@@ -69,6 +69,11 @@ export interface BottomSheetProps {
69
69
  disableScrollWrapper?: boolean;
70
70
  /** Web-only: stacking context for hosts (native hardcodes 1000). */
71
71
  zIndex?: number;
72
+ /**
73
+ * Render the shared `ToolBackground` behind the sheet body (native parity:
74
+ * first child of the clipping content box). On by default.
75
+ */
76
+ background?: boolean;
72
77
  }
73
78
  export declare const BottomSheet: FC<BottomSheetProps>;
74
79
  export {};
package/lib/typescript/components/BottomSheet.web.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.web.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAoBf,QAAA,MAAM,YAAY;;;;;;;;;;CAUjB,CAAC;AAKF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,YAAY,CAAC,CAAC;IACrC,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA6tBD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}
1
+ {"version":3,"file":"BottomSheet.web.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAwBf,QAAA,MAAM,YAAY;;;;;;;;;;CAUjB,CAAC;AAKF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,YAAY,CAAC,CAAC;IACrC,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAquBD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@buoy-gg/bottom-sheet",
3
- "version": "7.0.26",
3
+ "version": "7.0.27",
4
4
  "description": "High-performance bottom sheet & floating window component for React Native — 60 FPS native-driver animations, fully customizable.",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
26
26
  ],
27
27
  "sideEffects": false,
28
28
  "dependencies": {
29
- "@buoy-gg/shared-ui": "^7.0.26"
29
+ "@buoy-gg/shared-ui": "^7.0.27"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": "*",