@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,111 +1 @@
-"use strict";
-
-/**
- * Pill — the small caption chip every tool draws next to a row: a verdict
- * ("UNUSED", "OVERSIZE"), a kind ("event", "transaction"), a link ("↔ 2"),
- * a source ("MMKV"). Sixteen packages defined 150+ local pill styles that
- * fall into five looks; those are the `variant`s here. Text is always in
- * the pill's color (or the muted ink for `quiet`), never the series color
- * of anything else.
- *
- * - `tinted`  — color fill at 15% + border at 40%   (scenarios, react-query chips)
- * - `soft`    — color fill at 20%, rounded, no border (events correlation badge)
- * - `outline` — color border only                   (sentry envelope types)
- * - `quiet`   — neutral 6% white fill, muted text, optional color dot (assets)
- * - `text`    — bare colored caption, no chrome       (images row badges)
- */
-
-import { StyleSheet, Text, View } from "react-native";
-import { night } from "../night/nightTheme.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function Pill({
-  label,
-  color = night.color.textSecondary,
-  variant = "tinted",
-  size = "xs",
-  mono = false,
-  uppercase,
-  dot = false,
-  icon,
-  testID,
-  style
-}) {
-  const upper = uppercase ?? (variant === "tinted" || variant === "quiet" || variant === "text");
-  const textColor = variant === "quiet" ? night.color.textSecondary : color;
-  const chrome = variant === "tinted" ? {
-    backgroundColor: `${color}15`,
-    borderColor: `${color}40`,
-    borderWidth: 1
-  } : variant === "soft" ? {
-    backgroundColor: `${color}20`
-  } : variant === "outline" ? {
-    borderColor: color,
-    borderWidth: 1
-  } : variant === "quiet" ? {
-    backgroundColor: "rgba(255,255,255,0.06)"
-  } : {};
-  if (variant === "text") {
-    return /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
-        color: textColor
-      }],
-      testID: testID,
-      children: label
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.pill, variant === "soft" && styles.pillSoft, size === "sm" && styles.pillSm, chrome, style],
-    children: [icon, dot && variant === "quiet" ? /*#__PURE__*/_jsx(View, {
-      style: [styles.dot, {
-        backgroundColor: color
-      }]
-    }) : null, /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
-        color: textColor
-      }],
-      testID: testID,
-      children: label
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  pill: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  pillSoft: {
-    paddingHorizontal: 8,
-    borderRadius: 10
-  },
-  pillSm: {
-    paddingHorizontal: 8,
-    paddingVertical: 3
-  },
-  dot: {
-    width: 5,
-    height: 5,
-    borderRadius: 2.5
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.3
-  },
-  textSm: {
-    fontSize: 11
-  },
-  mono: {
-    fontFamily: monoFont
-  },
-  upper: {
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    fontWeight: "700"
-  }
-});
+"use strict";import{StyleSheet as h,Text as c,View as m}from"react-native";import{night as u}from"../night/nightTheme.js";import{monoFont as b}from"../fonts.js";import{jsx as l,jsxs as y}from"react/jsx-runtime";export function Pill({label:i,color:o=u.color.textSecondary,variant:e="tinted",size:r="xs",mono:d=false,uppercase:f,dot:x=false,icon:g,testID:n,style:S}){const s=f??(e==="tinted"||e==="quiet"||e==="text");const p=e==="quiet"?u.color.textSecondary:o;const a=e==="tinted"?{backgroundColor:`${o}15`,borderColor:`${o}40`,borderWidth:1}:e==="soft"?{backgroundColor:`${o}20`}:e==="outline"?{borderColor:o,borderWidth:1}:e==="quiet"?{backgroundColor:"rgba(255,255,255,0.06)"}:{};if(e==="text"){return l(c,{style:[t.text,r==="sm"&&t.textSm,d&&t.mono,s&&t.upper,{color:p}],testID:n,children:i})}return y(m,{style:[t.pill,e==="soft"&&t.pillSoft,r==="sm"&&t.pillSm,a,S],children:[g,x&&e==="quiet"?l(m,{style:[t.dot,{backgroundColor:o}]}):null,l(c,{style:[t.text,r==="sm"&&t.textSm,d&&t.mono,s&&t.upper,{color:p}],testID:n,children:i})]})}const t=h.create({pill:{flexDirection:"row",alignItems:"center",alignSelf:"flex-start",gap:4,paddingHorizontal:6,paddingVertical:2,borderRadius:4},pillSoft:{paddingHorizontal:8,borderRadius:10},pillSm:{paddingHorizontal:8,paddingVertical:3},dot:{width:5,height:5,borderRadius:2.5},text:{fontSize:10,fontWeight:"600",letterSpacing:.3},textSm:{fontSize:11},mono:{fontFamily:b},upper:{textTransform:"uppercase",letterSpacing:.5,fontWeight:"700"}});

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

@@ -1,74 +1 @@
-"use strict";
-
-/**
- * PowerToggleButton Component
- *
- * A reusable power button for toggling capture/recording state across dev tools.
- * Displays green when enabled, red when disabled.
- */
-
-import { TouchableOpacity, StyleSheet } from "react-native";
-import { Power } from "../../icons/index.js";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Power toggle button used across dev tools for start/stop functionality.
- *
- * @example
- * ```tsx
- * <PowerToggleButton
- *   isEnabled={isRecording}
- *   onToggle={() => setIsRecording(!isRecording)}
- *   accessibilityLabel="Toggle network recording"
- * />
- * ```
- */
-export function PowerToggleButton({
-  isEnabled,
-  onToggle,
-  size = "medium",
-  accessibilityLabel,
-  testID,
-  disabled = false
-}) {
-  const buttonSize = size === "small" ? 28 : 32;
-  const iconSize = size === "small" ? 12 : 14;
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    onPress: onToggle,
-    disabled: disabled,
-    accessibilityLabel: accessibilityLabel,
-    testID: testID,
-    accessibilityRole: "button",
-    style: [styles.button, {
-      width: buttonSize,
-      height: buttonSize
-    }, isEnabled ? styles.enabledButton : styles.disabledButton, disabled && styles.buttonDisabled],
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Power, {
-      size: iconSize,
-      color: isEnabled ? macOSColors.semantic.success : macOSColors.semantic.error
-    })
-  });
-}
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 8,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  enabledButton: {
-    backgroundColor: macOSColors.semantic.successBackground,
-    borderColor: macOSColors.semantic.success + "40"
-  },
-  // OFF stays red on both chromes: capture being disabled is exactly the kind
-  // of state the user needs to notice, so it keeps its colour.
-  disabledButton: {
-    backgroundColor: macOSColors.semantic.errorBackground,
-    borderColor: macOSColors.semantic.error + "40",
-    borderWidth: 1
-  },
-  buttonDisabled: {
-    opacity: 0.55
-  }
-});
+"use strict";import{TouchableOpacity as b,StyleSheet as d}from"react-native";import{Power as m}from"../../icons/index.js";import{macOSColors as t}from"../gameUI/constants/macOSDesignSystemColors.js";import{jsx as i}from"react/jsx-runtime";export function PowerToggleButton({isEnabled:o,onToggle:n,size:r="medium",accessibilityLabel:a,testID:l,disabled:s=false}){const c=r==="small"?28:32;const u=r==="small"?12:14;return i(b,{onPress:n,disabled:s,accessibilityLabel:a,testID:l,accessibilityRole:"button",style:[e.button,{width:c,height:c},o?e.enabledButton:e.disabledButton,s&&e.buttonDisabled],activeOpacity:.7,children:i(m,{size:u,color:o?t.semantic.success:t.semantic.error})})}const e=d.create({button:{borderRadius:8,borderWidth:1,alignItems:"center",justifyContent:"center"},enabledButton:{backgroundColor:t.semantic.successBackground,borderColor:t.semantic.success+"40"},disabledButton:{backgroundColor:t.semantic.errorBackground,borderColor:t.semantic.error+"40",borderWidth:1},buttonDisabled:{opacity:.55}});

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

@@ -1,161 +1 @@
-"use strict";
-
-import { useState } from "react";
-import { View, TextInput, TouchableOpacity, Text, StyleSheet } from "react-native";
-import { Search, X, Filter } from "../../icons/index.js";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SearchBar({
-  value,
-  onChange,
-  onClear,
-  placeholder = "Search...",
-  showFilters = false,
-  onFilterPress,
-  style,
-  containerStyle,
-  autoFocus = false,
-  onSubmitEditing,
-  testID,
-  returnKeyType
-}) {
-  const [isFocused, setIsFocused] = useState(false);
-  const handleClear = () => {
-    onChange("");
-    onClear?.();
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, containerStyle],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.searchBar, isFocused && styles.searchBarFocused],
-      children: [/*#__PURE__*/_jsx(Search, {
-        size: 16,
-        color: gameUIColors.secondary
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, style],
-        placeholder: placeholder,
-        placeholderTextColor: gameUIColors.tertiary,
-        value: value,
-        onChangeText: onChange,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        autoFocus: autoFocus,
-        autoCapitalize: "none",
-        autoCorrect: false,
-        onSubmitEditing: onSubmitEditing,
-        returnKeyType: returnKeyType,
-        testID: testID
-      }), value.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: handleClear,
-        style: styles.clearButton,
-        testID: testID ? `${testID}-clear` : undefined,
-        accessibilityLabel: "Clear search",
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(X, {
-          size: 14,
-          color: gameUIColors.secondary
-        })
-      }), showFilters && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onFilterPress,
-        style: styles.filterButton,
-        children: /*#__PURE__*/_jsx(Filter, {
-          size: 14,
-          color: gameUIColors.primary
-        })
-      })]
-    })
-  });
-}
-SearchBar.Quick = function QuickSearch({
-  onSearch,
-  placeholder = "Quick search...",
-  style
-}) {
-  const [query, setQuery] = useState("");
-  const handleSubmit = () => {
-    if (query.trim()) {
-      onSearch(query.trim());
-      setQuery("");
-    }
-  };
-  return /*#__PURE__*/_jsx(SearchBar, {
-    value: query,
-    onChange: setQuery,
-    placeholder: placeholder,
-    onSubmitEditing: handleSubmit,
-    returnKeyType: "search",
-    style: style
-  });
-};
-SearchBar.WithFilters = function WithFilters({
-  filterCount,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.withFiltersContainer,
-    children: [/*#__PURE__*/_jsx(SearchBar, {
-      ...props,
-      showFilters: true
-    }), filterCount !== undefined && filterCount > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.filterBadge,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.filterBadgeText,
-        children: filterCount
-      })
-    })]
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    position: "relative",
-    zIndex: 100
-  },
-  searchBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    gap: 8,
-    borderWidth: 1,
-    borderColor: "transparent"
-  },
-  searchBarFocused: {
-    borderColor: gameUIColors.primary + "40"
-  },
-  input: {
-    flex: 1,
-    fontSize: 14,
-    color: gameUIColors.text,
-    padding: 0
-  },
-  clearButton: {
-    padding: 4
-  },
-  filterButton: {
-    padding: 4,
-    borderRadius: 4,
-    backgroundColor: gameUIColors.primary + "20"
-  },
-  withFiltersContainer: {
-    position: "relative"
-  },
-  filterBadge: {
-    position: "absolute",
-    top: -4,
-    right: -4,
-    backgroundColor: gameUIColors.error,
-    borderRadius: 10,
-    minWidth: 18,
-    height: 18,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 4
-  },
-  filterBadgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: "#FFFFFF"
-  }
-});
+"use strict";import{useState as p}from"react";import{View as l,TextInput as C,TouchableOpacity as y,Text as S,StyleSheet as z}from"react-native";import{Search as T,X as k,Filter as I}from"../../icons/index.js";import{gameUIColors as r}from"../gameUI/index.js";import{jsx as e,jsxs as f}from"react/jsx-runtime";export function SearchBar({value:a,onChange:o,onClear:i,placeholder:c="Search...",showFilters:n=false,onFilterPress:s,style:d,containerStyle:g,autoFocus:m=false,onSubmitEditing:b,testID:u,returnKeyType:F}){const[x,h]=p(false);const B=()=>{o("");i?.()};return e(l,{style:[t.container,g],children:f(l,{style:[t.searchBar,x&&t.searchBarFocused],children:[e(T,{size:16,color:r.secondary}),e(C,{style:[t.input,d],placeholder:c,placeholderTextColor:r.tertiary,value:a,onChangeText:o,onFocus:()=>h(true),onBlur:()=>h(false),autoFocus:m,autoCapitalize:"none",autoCorrect:false,onSubmitEditing:b,returnKeyType:F,testID:u}),a.length>0&&e(y,{onPress:B,style:t.clearButton,testID:u?`${u}-clear`:void 0,accessibilityLabel:"Clear search",accessibilityRole:"button",children:e(k,{size:14,color:r.secondary})}),n&&e(y,{onPress:s,style:t.filterButton,children:e(I,{size:14,color:r.primary})})]})})}SearchBar.Quick=function a({onSearch:o,placeholder:i="Quick search...",style:c}){const[n,s]=p("");const d=()=>{if(n.trim()){o(n.trim());s("")}};return e(SearchBar,{value:n,onChange:s,placeholder:i,onSubmitEditing:d,returnKeyType:"search",style:c})};SearchBar.WithFilters=function a({filterCount:o,...i}){return f(l,{style:t.withFiltersContainer,children:[e(SearchBar,{...i,showFilters:true}),o!==void 0&&o>0&&e(l,{style:t.filterBadge,children:e(S,{style:t.filterBadgeText,children:o})})]})};const t=z.create({container:{position:"relative",zIndex:100},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:r.panel,borderRadius:8,paddingHorizontal:12,paddingVertical:8,gap:8,borderWidth:1,borderColor:"transparent"},searchBarFocused:{borderColor:r.primary+"40"},input:{flex:1,fontSize:14,color:r.text,padding:0},clearButton:{padding:4},filterButton:{padding:4,borderRadius:4,backgroundColor:r.primary+"20"},withFiltersContainer:{position:"relative"},filterBadge:{position:"absolute",top:-4,right:-4,backgroundColor:r.error,borderRadius:10,minWidth:18,height:18,justifyContent:"center",alignItems:"center",paddingHorizontal:4},filterBadgeText:{fontSize:10,fontWeight:"700",color:"#FFFFFF"}});

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

@@ -1,125 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-
-// Base SectionHeader container component
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SectionHeader({
-  children
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: children
-  });
-}
-
-// Icon component for section headers
-
-function Icon({
-  icon: IconComponent,
-  color = buoyColors.text,
-  size = 16
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.iconWrapper,
-    children: /*#__PURE__*/_jsx(IconComponent, {
-      size: size,
-      color: color
-    })
-  });
-}
-
-// Title component for section headers
-
-function Title({
-  children,
-  flex = 1
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.title, {
-      flex
-    }],
-    numberOfLines: 1,
-    children: children
-  });
-}
-
-// Badge component for counts or status
-
-function Badge({
-  count,
-  color = buoyColors.primary,
-  children,
-  testID
-}) {
-  const backgroundColor = `${color}15`;
-  const borderColor = `${color}33`;
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.badge, {
-      backgroundColor,
-      borderColor
-    }],
-    children: count !== undefined ? /*#__PURE__*/_jsx(Text, {
-      testID: testID,
-      style: [styles.badgeText, {
-        color
-      }],
-      children: count
-    }) : children
-  });
-}
-
-// Actions component for section header actions
-
-function Actions({
-  children
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.actions,
-    children: children
-  });
-}
-
-// Attach sub-components to the main component
-SectionHeader.Icon = Icon;
-SectionHeader.Title = Title;
-SectionHeader.Badge = Badge;
-SectionHeader.Actions = Actions;
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    // Transparent (was the opaque buoy base): section headers sit on night
-    // surfaces now, and an opaque strip breaks the star field behind them.
-    backgroundColor: "transparent",
-    minHeight: 40
-  },
-  iconWrapper: {
-    marginRight: 8
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: buoyColors.text
-  },
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 12,
-    borderWidth: 1,
-    marginLeft: 8
-  },
-  badgeText: {
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  actions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginLeft: "auto"
-  }
-});
+"use strict";import{View as i,Text as c,StyleSheet as g}from"react-native";import{buoyColors as a}from"../gameUI/constants/gameUIColors.js";import{jsx as n}from"react/jsx-runtime";export function SectionHeader({children:e}){return n(i,{style:r.container,children:e})}function f({icon:e,color:t=a.text,size:o=16}){return n(i,{style:r.iconWrapper,children:n(e,{size:o,color:t})})}function u({children:e,flex:t=1}){return n(c,{style:[r.title,{flex:t}],numberOfLines:1,children:e})}function p({count:e,color:t=a.primary,children:o,testID:d}){const l=`${t}15`;const s=`${t}33`;return n(i,{style:[r.badge,{backgroundColor:l,borderColor:s}],children:e!==void 0?n(c,{testID:d,style:[r.badgeText,{color:t}],children:e}):o})}function m({children:e}){return n(i,{style:r.actions,children:e})}SectionHeader.Icon=f;SectionHeader.Title=u;SectionHeader.Badge=p;SectionHeader.Actions=m;const r=g.create({container:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,backgroundColor:"transparent",minHeight:40},iconWrapper:{marginRight:8},title:{fontSize:14,fontWeight:"600",color:a.text},badge:{paddingHorizontal:8,paddingVertical:3,borderRadius:12,borderWidth:1,marginLeft:8},badgeText:{fontSize:12,fontWeight:"600"},actions:{flexDirection:"row",alignItems:"center",gap:8,marginLeft:"auto"}});

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

@@ -1,194 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function StatsCard({
-  children,
-  style,
-  title
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    children: [title && /*#__PURE__*/_jsx(Text, {
-      style: styles.cardTitle,
-      children: title
-    }), children]
-  });
-}
-StatsCard.Grid = function Grid({
-  children,
-  columns = 4,
-  style
-}) {
-  const gridStyles = {
-    2: styles.grid2,
-    3: styles.grid3,
-    4: styles.grid4
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.grid, gridStyles[columns], style],
-    children: children
-  });
-};
-StatsCard.Item = function Item({
-  icon: Icon,
-  label,
-  value,
-  color = "primary",
-  size = "medium",
-  style,
-  labelStyle,
-  valueStyle
-}) {
-  const colorMap = {
-    success: gameUIColors.success,
-    error: gameUIColors.error,
-    warning: gameUIColors.warning,
-    info: gameUIColors.primary,
-    primary: gameUIColors.primary
-  };
-  const finalColor = colorMap[color] || color;
-  const sizeConfig = {
-    small: {
-      iconSize: 12,
-      valueSize: 16,
-      labelSize: 10
-    },
-    medium: {
-      iconSize: 14,
-      valueSize: 20,
-      labelSize: 11
-    },
-    large: {
-      iconSize: 16,
-      valueSize: 24,
-      labelSize: 12
-    }
-  };
-  const config = sizeConfig[size];
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.statCard, style],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.statHeader,
-      children: [Icon && /*#__PURE__*/_jsx(Icon, {
-        size: config.iconSize,
-        color: finalColor
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.statLabel, {
-          fontSize: config.labelSize
-        }, labelStyle],
-        children: label
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.statValue, {
-        fontSize: config.valueSize,
-        color: finalColor
-      }, valueStyle],
-      children: value
-    })]
-  });
-};
-StatsCard.Row = function Row({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.row, style],
-    children: children
-  });
-};
-StatsCard.Divider = function Divider({
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.divider, style]
-  });
-};
-StatsCard.Section = function Section({
-  title,
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.section, style],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.sectionTitle,
-      children: title
-    }), children]
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 12,
-    padding: 16,
-    marginVertical: 8
-  },
-  cardTitle: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: gameUIColors.text,
-    marginBottom: 12
-  },
-  grid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12
-  },
-  grid2: {
-    justifyContent: "space-between"
-  },
-  grid3: {
-    justifyContent: "space-between"
-  },
-  grid4: {
-    justifyContent: "space-between"
-  },
-  statCard: {
-    flex: 1,
-    minWidth: 70,
-    backgroundColor: gameUIColors.background + "40",
-    borderRadius: 8,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: gameUIColors.border + "20"
-  },
-  statHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    marginBottom: 6
-  },
-  statLabel: {
-    color: gameUIColors.secondary,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  statValue: {
-    fontWeight: "700"
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 8
-  },
-  divider: {
-    height: 1,
-    backgroundColor: gameUIColors.border + "20",
-    marginVertical: 8
-  },
-  section: {
-    marginVertical: 8
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: gameUIColors.secondary,
-    marginBottom: 8,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  }
-});
+"use strict";import{View as o,Text as s,StyleSheet as h}from"react-native";import{gameUIColors as t}from"../gameUI/index.js";import{jsx as n,jsxs as d}from"react/jsx-runtime";export function StatsCard({children:a,style:r,title:i}){return d(o,{style:[e.container,r],children:[i&&n(s,{style:e.cardTitle,children:i}),a]})}StatsCard.Grid=function a({children:r,columns:i=4,style:l}){const c={2:e.grid2,3:e.grid3,4:e.grid4};return n(o,{style:[e.grid,c[i],l],children:r})};StatsCard.Item=function a({icon:r,label:i,value:l,color:c="primary",size:f="medium",style:m,labelStyle:p,valueStyle:y}){const S={success:t.success,error:t.error,warning:t.warning,info:t.primary,primary:t.primary};const u=S[c]||c;const b={small:{iconSize:12,valueSize:16,labelSize:10},medium:{iconSize:14,valueSize:20,labelSize:11},large:{iconSize:16,valueSize:24,labelSize:12}};const g=b[f];return d(o,{style:[e.statCard,m],children:[d(o,{style:e.statHeader,children:[r&&n(r,{size:g.iconSize,color:u}),n(s,{style:[e.statLabel,{fontSize:g.labelSize},p],children:i})]}),n(s,{style:[e.statValue,{fontSize:g.valueSize,color:u},y],children:l})]})};StatsCard.Row=function a({children:r,style:i}){return n(o,{style:[e.row,i],children:r})};StatsCard.Divider=function a({style:r}){return n(o,{style:[e.divider,r]})};StatsCard.Section=function a({title:r,children:i,style:l}){return d(o,{style:[e.section,l],children:[n(s,{style:e.sectionTitle,children:r}),i]})};const e=h.create({container:{backgroundColor:t.panel,borderRadius:12,padding:16,marginVertical:8},cardTitle:{fontSize:14,fontWeight:"600",color:t.text,marginBottom:12},grid:{flexDirection:"row",flexWrap:"wrap",gap:12},grid2:{justifyContent:"space-between"},grid3:{justifyContent:"space-between"},grid4:{justifyContent:"space-between"},statCard:{flex:1,minWidth:70,backgroundColor:t.background+"40",borderRadius:8,padding:12,borderWidth:1,borderColor:t.border+"20"},statHeader:{flexDirection:"row",alignItems:"center",gap:4,marginBottom:6},statLabel:{color:t.secondary,fontWeight:"500",textTransform:"uppercase",letterSpacing:.5},statValue:{fontWeight:"700"},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:8},divider:{height:1,backgroundColor:t.border+"20",marginVertical:8},section:{marginVertical:8},sectionTitle:{fontSize:12,fontWeight:"600",color:t.secondary,marginBottom:8,textTransform:"uppercase",letterSpacing:.5}});