@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,167 @@
+"use strict";
+
+import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+
+// Base ListItem container component
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ListItem({
+  onPress,
+  children,
+  disabled = false,
+  style
+}) {
+  const Container = onPress ? TouchableOpacity : View;
+  const containerProps = onPress ? {
+    onPress,
+    disabled
+  } : {};
+  return /*#__PURE__*/_jsx(Container, {
+    ...containerProps,
+    style: [styles.container, style],
+    children: children
+  });
+}
+
+// Header section for status badges, timestamps, etc.
+
+function Header({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.header, style],
+    children: children
+  });
+}
+
+// Content section for main item content
+
+function Content({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.content, style],
+    children: children
+  });
+}
+
+// Footer section for actions, metadata, etc.
+
+function Footer({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.footer, style],
+    children: children
+  });
+}
+
+// Title component for item titles
+
+function Title({
+  children,
+  numberOfLines = 1,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.title, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+}
+
+// Subtitle component for secondary text
+
+function Subtitle({
+  children,
+  numberOfLines = 2,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.subtitle, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+}
+
+// Metadata component for timestamps, counts, etc.
+
+function Metadata({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.metadata, style],
+    children: children
+  });
+}
+
+// Actions container for buttons
+
+function Actions({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(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 = 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/module/ui/components/ModalHeader.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { ChevronLeft, X } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+
+// Base ModalHeader container component
+// Note: onClose and onMinimize are now handled by WindowControls in JsModal
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function ModalHeader({
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.headerContainer,
+    children: children
+  });
+}
+
+// Navigation component for back/close buttons
+
+export function Navigation({
+  onBack,
+  onClose,
+  backIcon,
+  closeIcon
+}) {
+  // When only showing close button, position it on the right
+  if (!onBack && onClose) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClose,
+        style: styles.navigationButton,
+        children: closeIcon || /*#__PURE__*/_jsx(X, {
+          size: 20,
+          color: buoyColors.textMuted
+        })
+      })]
+    });
+  }
+
+  // When only showing back button
+  if (onBack && !onClose) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onBack,
+      style: styles.navigationButton,
+      children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
+        size: 20,
+        color: 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__*/_jsx(TouchableOpacity, {
+      onPress: onBack,
+      style: styles.navigationButton,
+      children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
+        size: 20,
+        color: buoyColors.textSecondary
+      })
+    });
+  }
+  return null;
+}
+
+// Content component for title and subtitle
+
+export function Content({
+  title,
+  subtitle,
+  children,
+  centered,
+  noMargin
+}) {
+  if (children) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.headerContent, noMargin && styles.headerContentNoMargin],
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.headerContent, centered && styles.headerContentCentered],
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      style: [styles.headerTitle, centered && styles.headerTitleCentered],
+      numberOfLines: 1,
+      children: title
+    }), subtitle && /*#__PURE__*/_jsx(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
+
+export function Actions({
+  children
+}) {
+  return /*#__PURE__*/_jsx(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 = 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: buoyColors.text,
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  headerTitleCentered: {
+    textAlign: "center"
+  },
+  headerSubtitle: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    marginTop: 2
+  },
+  headerSubtitleCentered: {
+    textAlign: "center"
+  },
+  headerActions: {
+    flexDirection: "row",
+    gap: 6,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  headerContentNoMargin: {
+    marginHorizontal: 0
+  }
+});

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

@@ -0,0 +1,143 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { memo, useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A visually striking hint banner that teaches users about double-tap functionality
+ */
+export const ModalHintBanner = /*#__PURE__*/memo(function ModalHintBanner({
+  onAcknowledge
+}) {
+  const handleAcknowledge = useCallback(() => {
+    onAcknowledge();
+  }, [onAcknowledge]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.inner,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.tapIndicator,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.tapCircle, styles.tapCircle1]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.tapCircle, styles.tapCircle2]
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.messageContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.messageTitle,
+          children: "\uD83D\uDCA1 Pro Tip"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.messageText,
+          children: "Double-tap the header to transform this into a floating modal"
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.acknowledgeButton,
+        onPress: handleAcknowledge,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.acknowledgeButtonText,
+          children: "Got it!"
+        })
+      })]
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: `${gameUIColors.info}15`,
+    borderLeftWidth: 3,
+    borderLeftColor: gameUIColors.info,
+    borderRadius: 8,
+    marginHorizontal: 12,
+    marginTop: 8,
+    marginBottom: 4,
+    overflow: "hidden",
+    shadowColor: 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: 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: gameUIColors.info,
+    letterSpacing: 0.3
+  },
+  messageText: {
+    fontSize: 12,
+    color: gameUIColors.primaryLight,
+    lineHeight: 16
+  },
+  acknowledgeButton: {
+    backgroundColor: `${gameUIColors.info}30`,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: `${gameUIColors.info}50`
+  },
+  acknowledgeButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: gameUIColors.info
+  }
+});