@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/components/ListItem.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+// Base ListItem container component
+
+function ListItem({
+  onPress,
+  children,
+  disabled = false,
+  style
+}) {
+  const Container = onPress ? _reactNative.TouchableOpacity : _reactNative.View;
+  const containerProps = onPress ? {
+    onPress,
+    disabled
+  } : {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    ...containerProps,
+    style: [styles.container, style],
+    children: children
+  });
+}
+
+// Header section for status badges, timestamps, etc.
+
+function Header({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.header, style],
+    children: children
+  });
+}
+
+// Content section for main item content
+
+function Content({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.content, style],
+    children: children
+  });
+}
+
+// Footer section for actions, metadata, etc.
+
+function Footer({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.footer, style],
+    children: children
+  });
+}
+
+// Title component for item titles
+
+function Title({
+  children,
+  numberOfLines = 1,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.title, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+}
+
+// Subtitle component for secondary text
+
+function Subtitle({
+  children,
+  numberOfLines = 2,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.subtitle, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+}
+
+// Metadata component for timestamps, counts, etc.
+
+function Metadata({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.metadata, style],
+    children: children
+  });
+}
+
+// Actions container for buttons
+
+function Actions({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.actions, style],
+    children: children
+  });
+}
+
+// Attach sub-components to the main component
+ListItem.Header = Header;
+ListItem.Content = Content;
+ListItem.Footer = Footer;
+ListItem.Title = Title;
+ListItem.Subtitle = Subtitle;
+ListItem.Metadata = Metadata;
+ListItem.Actions = Actions;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: "#1A1A1A",
+    borderRadius: 8,
+    padding: 12,
+    marginHorizontal: 16,
+    marginVertical: 4,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+    gap: 8
+  },
+  content: {
+    flex: 1
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 8,
+    gap: 8
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#E5E7EB",
+    marginBottom: 4
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#9CA3AF",
+    lineHeight: 20
+  },
+  metadata: {
+    fontSize: 12,
+    color: "#6B7280"
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginLeft: "auto"
+  }
+});

package/lib/commonjs/ui/components/ModalHeader.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Actions = Actions;
+exports.Content = Content;
+exports.ModalHeader = ModalHeader;
+exports.Navigation = Navigation;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// Base ModalHeader container component
+// Note: onClose and onMinimize are now handled by WindowControls in JsModal
+
+function ModalHeader({
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.headerContainer,
+    children: children
+  });
+}
+
+// Navigation component for back/close buttons
+
+function Navigation({
+  onBack,
+  onClose,
+  backIcon,
+  closeIcon
+}) {
+  // When only showing close button, position it on the right
+  if (!onBack && onClose) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onClose,
+        style: styles.navigationButton,
+        children: closeIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+          size: 20,
+          color: _gameUIColors.buoyColors.textMuted
+        })
+      })]
+    });
+  }
+
+  // When only showing back button
+  if (onBack && !onClose) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onBack,
+      style: styles.navigationButton,
+      children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
+        size: 20,
+        color: _gameUIColors.buoyColors.textSecondary
+      })
+    });
+  }
+
+  // When showing both, we need to handle them separately
+  // The close button will be rendered separately on the right
+  if (onBack && onClose) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onBack,
+      style: styles.navigationButton,
+      children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
+        size: 20,
+        color: _gameUIColors.buoyColors.textSecondary
+      })
+    });
+  }
+  return null;
+}
+
+// Content component for title and subtitle
+
+function Content({
+  title,
+  subtitle,
+  children,
+  centered,
+  noMargin
+}) {
+  if (children) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.headerContent, noMargin && styles.headerContentNoMargin],
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.headerContent, centered && styles.headerContentCentered],
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.headerTitle, centered && styles.headerTitleCentered],
+      numberOfLines: 1,
+      children: title
+    }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.headerSubtitle, centered && styles.headerSubtitleCentered],
+      numberOfLines: 1,
+      children: subtitle
+    })]
+  });
+}
+
+// Actions component for header action buttons
+// Note: onClose and onMinimize are now handled by WindowControls in JsModal
+
+function Actions({
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.headerActions,
+    children: children
+  });
+}
+Actions.displayName = "ModalHeaderActions";
+
+// Attach sub-components to the main component
+ModalHeader.Navigation = Navigation;
+ModalHeader.Content = Content;
+ModalHeader.Actions = Actions;
+const styles = _reactNative.StyleSheet.create({
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 8,
+    minHeight: 32,
+    paddingLeft: 4
+  },
+  navigationButton: {
+    padding: 4
+  },
+  closeButtonOnly: {
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  headerContent: {
+    flex: 1,
+    marginHorizontal: 8
+  },
+  headerContentCentered: {
+    justifyContent: "center"
+  },
+  headerTitle: {
+    color: _gameUIColors.buoyColors.text,
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  headerTitleCentered: {
+    textAlign: "center"
+  },
+  headerSubtitle: {
+    fontSize: 12,
+    color: _gameUIColors.buoyColors.textSecondary,
+    marginTop: 2
+  },
+  headerSubtitleCentered: {
+    textAlign: "center"
+  },
+  headerActions: {
+    flexDirection: "row",
+    gap: 6,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  headerContentNoMargin: {
+    marginHorizontal: 0
+  }
+});

package/lib/commonjs/ui/components/ModalHintBanner.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalHintBanner = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ModalHintBanner - A hint banner that shows users they can double-tap to toggle modal mode
+ *
+ * Displays a dismissible hint to educate users about the double-tap gesture.
+ * Automatically manages storage to remember when the user acknowledges the hint.
+ */
+
+/**
+ * A visually striking hint banner that teaches users about double-tap functionality
+ */
+const ModalHintBanner = exports.ModalHintBanner = /*#__PURE__*/(0, _react.memo)(function ModalHintBanner({
+  onAcknowledge
+}) {
+  const handleAcknowledge = (0, _react.useCallback)(() => {
+    onAcknowledge();
+  }, [onAcknowledge]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.tapIndicator,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.tapCircle, styles.tapCircle1]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.tapCircle, styles.tapCircle2]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.messageContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.messageTitle,
+          children: "\uD83D\uDCA1 Pro Tip"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.messageText,
+          children: "Double-tap the header to transform this into a floating modal"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.acknowledgeButton,
+        onPress: handleAcknowledge,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.acknowledgeButtonText,
+          children: "Got it!"
+        })
+      })]
+    })
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: `${_index.gameUIColors.info}15`,
+    borderLeftWidth: 3,
+    borderLeftColor: _index.gameUIColors.info,
+    borderRadius: 8,
+    marginHorizontal: 12,
+    marginTop: 8,
+    marginBottom: 4,
+    overflow: "hidden",
+    shadowColor: _index.gameUIColors.info,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  inner: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    gap: 12
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  tapIndicator: {
+    width: 28,
+    height: 28,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  tapCircle: {
+    position: "absolute",
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: _index.gameUIColors.info
+  },
+  tapCircle1: {
+    opacity: 0.6,
+    transform: [{
+      scale: 0.8
+    }]
+  },
+  tapCircle2: {
+    opacity: 1,
+    transform: [{
+      scale: 1
+    }]
+  },
+  messageContainer: {
+    flex: 1,
+    gap: 2
+  },
+  messageTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _index.gameUIColors.info,
+    letterSpacing: 0.3
+  },
+  messageText: {
+    fontSize: 12,
+    color: _index.gameUIColors.primaryLight,
+    lineHeight: 16
+  },
+  acknowledgeButton: {
+    backgroundColor: `${_index.gameUIColors.info}30`,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: `${_index.gameUIColors.info}50`
+  },
+  acknowledgeButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _index.gameUIColors.info
+  }
+});