@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,147 +1 @@
-"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
-  }
-});
+"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");const ModalHintBanner=exports.ModalHintBanner=(0,_react.memo)(function o({onAcknowledge:e}){const t=(0,_react.useCallback)(()=>{e()},[e]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inner,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconContainer,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.tapIndicator,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.tapCircle,styles.tapCircle1]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.tapCircle,styles.tapCircle2]})]})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.messageContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.messageTitle,children:"\u{1F4A1} Pro Tip"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.messageText,children:"Double-tap the header to transform this into a floating modal"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.acknowledgeButton,onPress:t,activeOpacity:.7,children:(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:.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:.6,transform:[{scale:.8}]},tapCircle2:{opacity:1,transform:[{scale:1}]},messageContainer:{flex:1,gap:2},messageTitle:{fontSize:13,fontWeight:"600",color:_index.gameUIColors.info,letterSpacing:.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}});

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

@@ -1,115 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Pill = Pill;
-var _reactNative = require("react-native");
-var _nightTheme = require("../night/nightTheme.js");
-var _fonts = require("../fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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)
- */
-
-function Pill({
-  label,
-  color = _nightTheme.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" ? _nightTheme.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
-        color: textColor
-      }],
-      testID: testID,
-      children: label
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.pill, variant === "soft" && styles.pillSoft, size === "sm" && styles.pillSm, chrome, style],
-    children: [icon, dot && variant === "quiet" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.dot, {
-        backgroundColor: color
-      }]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
-        color: textColor
-      }],
-      testID: testID,
-      children: label
-    })]
-  });
-}
-const styles = _reactNative.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: _fonts.monoFont
-  },
-  upper: {
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    fontWeight: "700"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Pill=Pill;var _reactNative=require("react-native");var _nightTheme=require("../night/nightTheme.js");var _fonts=require("../fonts.js");var _jsxRuntime=require("react/jsx-runtime");function Pill({label:o,color:t=_nightTheme.night.color.textSecondary,variant:e="tinted",size:r="xs",mono:i=false,uppercase:d,dot:u=false,icon:c,testID:l,style:p}){const n=d??(e==="tinted"||e==="quiet"||e==="text");const s=e==="quiet"?_nightTheme.night.color.textSecondary:t;const x=e==="tinted"?{backgroundColor:`${t}15`,borderColor:`${t}40`,borderWidth:1}:e==="soft"?{backgroundColor:`${t}20`}:e==="outline"?{borderColor:t,borderWidth:1}:e==="quiet"?{backgroundColor:"rgba(255,255,255,0.06)"}:{};if(e==="text"){return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,r==="sm"&&styles.textSm,i&&styles.mono,n&&styles.upper,{color:s}],testID:l,children:o})}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.pill,e==="soft"&&styles.pillSoft,r==="sm"&&styles.pillSm,x,p],children:[c,u&&e==="quiet"?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,{backgroundColor:t}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,r==="sm"&&styles.textSm,i&&styles.mono,n&&styles.upper,{color:s}],testID:l,children:o})]})}const styles=_reactNative.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:.3},textSm:{fontSize:11},mono:{fontFamily:_fonts.monoFont},upper:{textTransform:"uppercase",letterSpacing:.5,fontWeight:"700"}});

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

@@ -1,78 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PowerToggleButton = PowerToggleButton;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * PowerToggleButton Component
- *
- * A reusable power button for toggling capture/recording state across dev tools.
- * Displays green when enabled, red when disabled.
- */
-
-/**
- * Power toggle button used across dev tools for start/stop functionality.
- *
- * @example
- * ```tsx
- * <PowerToggleButton
- *   isEnabled={isRecording}
- *   onToggle={() => setIsRecording(!isRecording)}
- *   accessibilityLabel="Toggle network recording"
- * />
- * ```
- */
-function PowerToggleButton({
-  isEnabled,
-  onToggle,
-  size = "medium",
-  accessibilityLabel,
-  testID,
-  disabled = false
-}) {
-  const buttonSize = size === "small" ? 28 : 32;
-  const iconSize = size === "small" ? 12 : 14;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.Power, {
-      size: iconSize,
-      color: isEnabled ? _macOSDesignSystemColors.macOSColors.semantic.success : _macOSDesignSystemColors.macOSColors.semantic.error
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  button: {
-    borderRadius: 8,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  enabledButton: {
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.successBackground,
-    borderColor: _macOSDesignSystemColors.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: _macOSDesignSystemColors.macOSColors.semantic.errorBackground,
-    borderColor: _macOSDesignSystemColors.macOSColors.semantic.error + "40",
-    borderWidth: 1
-  },
-  buttonDisabled: {
-    opacity: 0.55
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.PowerToggleButton=PowerToggleButton;var _reactNative=require("react-native");var _index=require("../../icons/index.js");var _macOSDesignSystemColors=require("../gameUI/constants/macOSDesignSystemColors.js");var _jsxRuntime=require("react/jsx-runtime");function PowerToggleButton({isEnabled:e,onToggle:s,size:t="medium",accessibilityLabel:c,testID:a,disabled:o=false}){const r=t==="small"?28:32;const n=t==="small"?12:14;return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:s,disabled:o,accessibilityLabel:c,testID:a,accessibilityRole:"button",style:[styles.button,{width:r,height:r},e?styles.enabledButton:styles.disabledButton,o&&styles.buttonDisabled],activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_index.Power,{size:n,color:e?_macOSDesignSystemColors.macOSColors.semantic.success:_macOSDesignSystemColors.macOSColors.semantic.error})})}const styles=_reactNative.StyleSheet.create({button:{borderRadius:8,borderWidth:1,alignItems:"center",justifyContent:"center"},enabledButton:{backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.successBackground,borderColor:_macOSDesignSystemColors.macOSColors.semantic.success+"40"},disabledButton:{backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.errorBackground,borderColor:_macOSDesignSystemColors.macOSColors.semantic.error+"40",borderWidth:1},buttonDisabled:{opacity:.55}});

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

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

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

@@ -1,129 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SectionHeader = SectionHeader;
-var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-// Base SectionHeader container component
-
-function SectionHeader({
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: children
-  });
-}
-
-// Icon component for section headers
-
-function Icon({
-  icon: IconComponent,
-  color = _gameUIColors.buoyColors.text,
-  size = 16
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.iconWrapper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-      size: size,
-      color: color
-    })
-  });
-}
-
-// Title component for section headers
-
-function Title({
-  children,
-  flex = 1
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [styles.title, {
-      flex
-    }],
-    numberOfLines: 1,
-    children: children
-  });
-}
-
-// Badge component for counts or status
-
-function Badge({
-  count,
-  color = _gameUIColors.buoyColors.primary,
-  children,
-  testID
-}) {
-  const backgroundColor = `${color}15`;
-  const borderColor = `${color}33`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.badge, {
-      backgroundColor,
-      borderColor
-    }],
-    children: count !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      testID: testID,
-      style: [styles.badgeText, {
-        color
-      }],
-      children: count
-    }) : children
-  });
-}
-
-// Actions component for section header actions
-
-function Actions({
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = _reactNative.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: _gameUIColors.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";Object.defineProperty(exports,"__esModule",{value:true});exports.SectionHeader=SectionHeader;var _reactNative=require("react-native");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _jsxRuntime=require("react/jsx-runtime");function SectionHeader({children:e}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:e})}function Icon({icon:e,color:t=_gameUIColors.buoyColors.text,size:r=16}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconWrapper,children:(0,_jsxRuntime.jsx)(e,{size:r,color:t})})}function Title({children:e,flex:t=1}){return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,{flex:t}],numberOfLines:1,children:e})}function Badge({count:e,color:t=_gameUIColors.buoyColors.primary,children:r,testID:n}){const i=`${t}15`;const o=`${t}33`;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:i,borderColor:o}],children:e!==void 0?(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:n,style:[styles.badgeText,{color:t}],children:e}):r})}function Actions({children:e}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actions,children:e})}SectionHeader.Icon=Icon;SectionHeader.Title=Title;SectionHeader.Badge=Badge;SectionHeader.Actions=Actions;const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,backgroundColor:"transparent",minHeight:40},iconWrapper:{marginRight:8},title:{fontSize:14,fontWeight:"600",color:_gameUIColors.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"}});