@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventStepperFooter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _lucideIcons = require("../../icons/lucide-icons.js");
+var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * EventStepperFooter
+ *
+ * A reusable footer component for stepping through events/items.
+ * Used in storage event details, render history, and other event-based views.
+ * This is a "dumb" component with no internal logic - all state is controlled externally.
+ */
+
+/**
+ * A footer component for navigating through a list of events/items.
+ * Shows Previous/Next buttons with a counter in the middle.
+ */
+const EventStepperFooter = exports.EventStepperFooter = /*#__PURE__*/(0, _react.memo)(function EventStepperFooter({
+  currentIndex,
+  totalItems,
+  onPrevious,
+  onNext,
+  itemLabel = "Event",
+  subtitle,
+  absolute = false,
+  applySafeAreaInset = true
+}) {
+  const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
+
+  // Don't render if there's only one or no items
+  if (totalItems <= 1) return null;
+  const isFirstItem = currentIndex === 0;
+  const isLastItem = currentIndex === totalItems - 1;
+  const bottomPadding = applySafeAreaInset ? 12 + insets.bottom : 12;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.footer, absolute && styles.footerAbsolute, {
+      paddingBottom: bottomPadding
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: onPrevious,
+      disabled: isFirstItem,
+      style: [styles.navButton, isFirstItem && styles.navButtonDisabled],
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronLeft, {
+        size: 20,
+        color: isFirstItem ? _macOSDesignSystemColors.macOSColors.text.muted : _macOSDesignSystemColors.macOSColors.text.primary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.navButtonText, isFirstItem && styles.navButtonTextDisabled],
+        children: "Previous"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.counterContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.counterText,
+        children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.subtitleText,
+        children: subtitle
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: onNext,
+      disabled: isLastItem,
+      style: [styles.navButton, isLastItem && styles.navButtonDisabled],
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.navButtonText, isLastItem && styles.navButtonTextDisabled],
+        children: "Next"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronRight, {
+        size: 20,
+        color: isLastItem ? _macOSDesignSystemColors.macOSColors.text.muted : _macOSDesignSystemColors.macOSColors.text.primary
+      })]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.base,
+    borderTopWidth: 1,
+    borderTopColor: _macOSDesignSystemColors.macOSColors.border.default,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  footerAbsolute: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  navButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
+    minWidth: 100,
+    justifyContent: "center"
+  },
+  navButtonDisabled: {
+    opacity: 0.3
+  },
+  navButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _macOSDesignSystemColors.macOSColors.text.primary,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  navButtonTextDisabled: {
+    color: _macOSDesignSystemColors.macOSColors.text.muted
+  },
+  counterContainer: {
+    alignItems: "center"
+  },
+  counterText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: _macOSDesignSystemColors.macOSColors.text.primary,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  subtitleText: {
+    fontSize: 11,
+    color: _macOSDesignSystemColors.macOSColors.text.secondary,
+    fontFamily: "monospace",
+    marginTop: 2
+  }
+});

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

@@ -0,0 +1,341 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandablePopover = ExpandablePopover;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // ============================================================================
+// Types
+// ============================================================================
+// ============================================================================
+// Constants
+// ============================================================================
+
+const DEFAULT_PEEK_HEIGHT = 28;
+const DEFAULT_WIDTH = 44;
+
+// ============================================================================
+// Collapsed Peek Component
+// ============================================================================
+
+function CollapsedPeek({
+  count,
+  showCount,
+  onPress,
+  progress,
+  width,
+  height,
+  customContent,
+  label
+}) {
+  // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
+  // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
+  const opacity = progress.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [1, 0.5, 0]
+  });
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.9]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [styles.peekContainer, {
+      width,
+      opacity,
+      transform: [{
+        scale
+      }]
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onPress,
+      activeOpacity: 0.8,
+      style: [styles.peekButton, {
+        width,
+        height
+      }],
+      accessibilityLabel: label || `Expand options`,
+      accessibilityRole: "button",
+      children: customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+          size: 12,
+          color: _gameUIColors.gameUIColors.muted,
+          strokeWidth: 2
+        }), showCount && count !== undefined && count > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.peekCount,
+          children: count
+        })]
+      })
+    })
+  });
+}
+
+// ============================================================================
+// Expanded Content Wrapper
+// ============================================================================
+
+function ExpandedWrapper({
+  children,
+  onCollapse,
+  progress,
+  width,
+  expandedHeight,
+  isExpanded,
+  style
+}) {
+  // Animate height from 0 to full height
+  const animatedHeight = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, expandedHeight]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [styles.expandedContainer, {
+      width,
+      height: animatedHeight,
+      overflow: "hidden"
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.expandedInner, {
+        height: expandedHeight
+      }],
+      children: [isExpanded && children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onCollapse,
+        activeOpacity: 0.6,
+        style: styles.collapseButton,
+        accessibilityLabel: "Collapse",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+          size: 12,
+          color: _gameUIColors.gameUIColors.muted,
+          style: {
+            transform: [{
+              rotate: "180deg"
+            }]
+          }
+        })
+      })]
+    })
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+function ExpandablePopover({
+  hasItems,
+  itemCount,
+  showCount = true,
+  width = DEFAULT_WIDTH,
+  children,
+  expandedHeight,
+  onExpandedChange,
+  defaultExpanded = false,
+  collapsedContent,
+  collapsedLabel,
+  expandedStyle,
+  persistState = false,
+  storageKey,
+  peekHeight = DEFAULT_PEEK_HEIGHT
+}) {
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
+  const [isStateRestored, setIsStateRestored] = (0, _react.useState)(!persistState);
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(defaultExpanded ? 1 : 0)).current;
+  const hasInitialized = (0, _react.useRef)(false);
+
+  // Restore expanded state on mount if persistence is enabled
+  (0, _react.useEffect)(() => {
+    if (!persistState || !storageKey) {
+      setIsStateRestored(true);
+      return;
+    }
+    const restoreState = async () => {
+      try {
+        // Dynamic import to avoid circular dependency
+        const {
+          safeGetItem
+        } = await Promise.resolve().then(() => _interopRequireWildcard(require("../../utils/safeAsyncStorage")));
+        const saved = await safeGetItem(storageKey);
+        if (saved === "true") {
+          setIsExpanded(true);
+          progress.setValue(1);
+        }
+      } catch {
+        // Ignore errors
+      }
+      setIsStateRestored(true);
+    };
+    restoreState();
+  }, [persistState, storageKey, progress]);
+
+  // Persist expanded state when it changes
+  (0, _react.useEffect)(() => {
+    if (!persistState || !storageKey || !isStateRestored) return;
+    const persistExpanded = async () => {
+      try {
+        const {
+          safeSetItem
+        } = await Promise.resolve().then(() => _interopRequireWildcard(require("../../utils/safeAsyncStorage")));
+        await safeSetItem(storageKey, isExpanded ? "true" : "false");
+      } catch {
+        // Ignore errors
+      }
+    };
+    persistExpanded();
+  }, [isExpanded, persistState, storageKey, isStateRestored]);
+
+  // Notify parent of expansion state changes
+  (0, _react.useEffect)(() => {
+    onExpandedChange?.(isExpanded);
+  }, [isExpanded, onExpandedChange]);
+
+  // Expand handler
+  const handleExpand = (0, _react.useCallback)(() => {
+    setIsExpanded(true);
+    _reactNative.Animated.timing(progress, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+  }, [progress]);
+
+  // Collapse handler
+  const handleCollapse = (0, _react.useCallback)(() => {
+    _reactNative.Animated.timing(progress, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: false
+    }).start(() => {
+      setIsExpanded(false);
+    });
+  }, [progress]);
+
+  // Initialize animation when items first appear
+  (0, _react.useEffect)(() => {
+    if (!isStateRestored) return;
+    if (hasItems && !hasInitialized.current) {
+      hasInitialized.current = true;
+      if (isExpanded) {
+        progress.setValue(1);
+      } else {
+        progress.setValue(0);
+      }
+    } else if (!hasItems) {
+      hasInitialized.current = false;
+      setIsExpanded(false);
+      progress.setValue(0);
+    }
+  }, [hasItems, progress, isStateRestored, isExpanded]);
+
+  // Don't render if no items
+  if (!hasItems) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      height: peekHeight
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.expandedWrapper,
+      pointerEvents: isExpanded ? "box-none" : "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandedWrapper, {
+        onCollapse: handleCollapse,
+        progress: progress,
+        width: width,
+        expandedHeight: expandedHeight,
+        isExpanded: isExpanded,
+        style: expandedStyle,
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.peekWrapper,
+      pointerEvents: isExpanded ? "none" : "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsedPeek, {
+        count: itemCount,
+        showCount: showCount,
+        onPress: handleExpand,
+        progress: progress,
+        width: width,
+        height: peekHeight,
+        customContent: collapsedContent,
+        label: collapsedLabel
+      })
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    overflow: "visible",
+    zIndex: 1000
+  },
+  expandedWrapper: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "visible"
+  },
+  peekWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  peekContainer: {},
+  peekButton: {
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    backgroundColor: _gameUIColors.gameUIColors.panel,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: _gameUIColors.gameUIColors.muted + "66",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 2
+  },
+  peekCount: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.muted,
+    marginLeft: 1
+  },
+  expandedContainer: {
+    backgroundColor: _gameUIColors.gameUIColors.panel,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: _gameUIColors.gameUIColors.muted + "66"
+  },
+  expandedInner: {
+    alignItems: "center",
+    paddingTop: 8,
+    gap: 6
+  },
+  collapseButton: {
+    width: "100%",
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 3
+  }
+});

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableSection = ExpandableSection;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _ExpandableSectionHeader = require("./ExpandableSectionHeader.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function ExpandableSection({
+  icon,
+  iconColor,
+  iconBackgroundColor,
+  title,
+  subtitle,
+  children,
+  defaultExpanded = false,
+  onPress
+}) {
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableSectionHeader.ExpandableSectionHeader, {
+        icon: icon,
+        iconColor: iconColor,
+        iconBackgroundColor: iconBackgroundColor,
+        title: title,
+        subtitle: subtitle,
+        isExpanded: isExpanded,
+        onPress: handlePress
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.divider
+      }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: {
+          opacity: 1
+        },
+        children: children
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: "#1F1F1F",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    overflow: "hidden",
+    marginHorizontal: 8,
+    marginBottom: 16
+  },
+  content: {
+    padding: 24
+  },
+  divider: {
+    height: 1,
+    width: "100%",
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    marginBottom: 24
+  }
+});

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableSectionHeader = ExpandableSectionHeader;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function ExpandableSectionHeader({
+  icon: Icon,
+  iconColor,
+  iconBackgroundColor,
+  title,
+  subtitle,
+  isExpanded,
+  onPress
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore expand section button",
+    accessibilityRole: "button",
+    onPress: onPress,
+    style: styles.button,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.container,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconContainer, {
+          backgroundColor: iconBackgroundColor.replace(")", ", 0.7)").replace("rgb(", "rgba(")
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          size: 20,
+          color: iconColor
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.title,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.subtitle,
+          numberOfLines: 2,
+          children: subtitle
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.chevronContainer,
+        children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+          size: 18,
+          color: "#4B5563"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
+          size: 18,
+          color: "#4B5563"
+        })
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    marginBottom: 16
+  },
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  iconContainer: {
+    padding: 12,
+    borderRadius: 12
+  },
+  textContainer: {
+    flex: 1,
+    marginHorizontal: 16
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "white",
+    marginBottom: 4
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#9CA3AF"
+  },
+  chevronContainer: {
+    paddingTop: 6
+  }
+});