@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,149 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ClipboardHintBanner = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../gameUI/index.js");
-var _lucideIcons = require("../../icons/lucide-icons.js");
-var _fonts = require("../fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * ClipboardHintBanner - A hint banner that shows users how to fix iOS Simulator clipboard sync
- *
- * Displays a dismissible hint to educate users about the iOS Simulator's
- * "Automatically Sync Pasteboard" setting that needs to be toggled if copy doesn't work.
- * Automatically manages storage to remember when the user acknowledges the hint.
- */
-
-/**
- * A modal hint that teaches users about iOS Simulator clipboard sync
- */
-const ClipboardHintBanner = exports.ClipboardHintBanner = /*#__PURE__*/(0, _react.memo)(function ClipboardHintBanner({
-  visible,
-  onAcknowledge
-}) {
-  const handleAcknowledge = (0, _react.useCallback)(() => {
-    onAcknowledge();
-  }, [onAcknowledge]);
-  if (!visible) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: handleAcknowledge,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      style: styles.overlay,
-      onPress: handleAcknowledge,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: styles.container,
-        onPress: e => e.stopPropagation(),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.inner,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.iconContainer,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Copy, {
-              size: 22,
-              color: _index.gameUIColors.info,
-              strokeWidth: 2
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.messageContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.messageTitle,
-              children: "Clipboard Tip"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-              style: styles.messageText,
-              children: ["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:", "\n\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.menuPath,
-                children: "Edit \u2192 Automatically Sync Pasteboard"
-              }), "\n\n", "Toggle it off and on again to fix the sync."]
-            })]
-          }), /*#__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({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.6)",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 24
-  },
-  container: {
-    backgroundColor: _index.gameUIColors.panel,
-    borderLeftWidth: 3,
-    borderLeftColor: _index.gameUIColors.info,
-    borderRadius: 12,
-    overflow: "hidden",
-    shadowColor: _index.gameUIColors.info,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 16,
-    elevation: 8,
-    maxWidth: 340
-  },
-  inner: {
-    padding: 20,
-    gap: 16,
-    alignItems: "center"
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: `${_index.gameUIColors.info}20`,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  messageContainer: {
-    gap: 8
-  },
-  messageTitle: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: _index.gameUIColors.info,
-    letterSpacing: 0.3,
-    textAlign: "center"
-  },
-  messageText: {
-    fontSize: 13,
-    color: _index.gameUIColors.primaryLight,
-    lineHeight: 20,
-    textAlign: "center"
-  },
-  menuPath: {
-    fontFamily: _fonts.monoFont,
-    fontSize: 12,
-    color: _index.gameUIColors.primary,
-    fontWeight: "600"
-  },
-  acknowledgeButton: {
-    backgroundColor: _index.gameUIColors.info,
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    borderRadius: 8,
-    marginTop: 4
-  },
-  acknowledgeButtonText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: "#FFFFFF"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ClipboardHintBanner=void 0;var _react=require("react");var _reactNative=require("react-native");var _index=require("../gameUI/index.js");var _lucideIcons=require("../../icons/lucide-icons.js");var _fonts=require("../fonts.js");var _jsxRuntime=require("react/jsx-runtime");const ClipboardHintBanner=exports.ClipboardHintBanner=(0,_react.memo)(function r({visible:t,onAcknowledge:o}){const e=(0,_react.useCallback)(()=>{o()},[o]);if(!t)return null;return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:t,transparent:true,animationType:"fade",onRequestClose:e,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:styles.overlay,onPress:e,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:styles.container,onPress:n=>n.stopPropagation(),children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inner,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconContainer,children:(0,_jsxRuntime.jsx)(_lucideIcons.Copy,{size:22,color:_index.gameUIColors.info,strokeWidth:2})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.messageContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.messageTitle,children:"Clipboard Tip"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.messageText,children:["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:","\n\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.menuPath,children:"Edit \u2192 Automatically Sync Pasteboard"}),"\n\n","Toggle it off and on again to fix the sync."]})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.acknowledgeButton,onPress:e,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.acknowledgeButtonText,children:"Got it!"})})]})})})})});const styles=_reactNative.StyleSheet.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.6)",justifyContent:"center",alignItems:"center",padding:24},container:{backgroundColor:_index.gameUIColors.panel,borderLeftWidth:3,borderLeftColor:_index.gameUIColors.info,borderRadius:12,overflow:"hidden",shadowColor:_index.gameUIColors.info,shadowOffset:{width:0,height:0},shadowOpacity:.4,shadowRadius:16,elevation:8,maxWidth:340},inner:{padding:20,gap:16,alignItems:"center"},iconContainer:{width:48,height:48,borderRadius:24,backgroundColor:`${_index.gameUIColors.info}20`,justifyContent:"center",alignItems:"center"},messageContainer:{gap:8},messageTitle:{fontSize:16,fontWeight:"700",color:_index.gameUIColors.info,letterSpacing:.3,textAlign:"center"},messageText:{fontSize:13,color:_index.gameUIColors.primaryLight,lineHeight:20,textAlign:"center"},menuPath:{fontFamily:_fonts.monoFont,fontSize:12,color:_index.gameUIColors.primary,fontWeight:"600"},acknowledgeButton:{backgroundColor:_index.gameUIColors.info,paddingHorizontal:24,paddingVertical:10,borderRadius:8,marginTop:4},acknowledgeButtonText:{fontSize:14,fontWeight:"700",color:"#FFFFFF"}});

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

@@ -1,170 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CollapsibleSection = CollapsibleSection;
-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 CollapsibleSection({
-  title,
-  children,
-  icon: Icon,
-  badge,
-  defaultOpen = false,
-  variant = "bordered",
-  style,
-  headerStyle,
-  titleStyle,
-  contentStyle,
-  onToggle
-}) {
-  const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
-  const rotateAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultOpen ? 1 : 0)).current;
-  const toggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    onToggle?.(newState);
-    _reactNative.Animated.timing(rotateAnim, {
-      toValue: newState ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true
-    }).start();
-  };
-  const rotation = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"]
-  });
-  const containerStyles = [styles.container, variant === "bordered" && styles.borderedVariant, variant === "card" && styles.cardVariant, style];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: containerStyles,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: [styles.header, headerStyle],
-      onPress: toggle,
-      activeOpacity: 0.7,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.headerLeft,
-        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          size: 16,
-          color: variant === "card" ? _index2.gameUIColors.primary : _index2.gameUIColors.secondary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.title, titleStyle],
-          children: title
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.headerRight,
-        children: [badge !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.badgeContainer,
-          children: typeof badge === "string" || typeof badge === "number" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.badge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.badgeText,
-              children: badge
-            })
-          }) : badge
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: {
-            transform: [{
-              rotate: rotation
-            }]
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-            size: 16,
-            color: _index2.gameUIColors.secondary
-          })
-        })]
-      })]
-    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.content, contentStyle],
-      children: children
-    })]
-  });
-}
-CollapsibleSection.Simple = function Simple({
-  title,
-  children,
-  defaultOpen
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-    title: title,
-    defaultOpen: defaultOpen,
-    variant: "plain",
-    children: children
-  });
-};
-CollapsibleSection.WithIcon = function WithIcon({
-  title,
-  icon,
-  children,
-  defaultOpen,
-  badge
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
-    title: title,
-    icon: icon,
-    badge: badge,
-    defaultOpen: defaultOpen,
-    variant: "card",
-    children: children
-  });
-};
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    marginBottom: 8
-  },
-  borderedVariant: {
-    borderWidth: 1,
-    borderColor: _index2.gameUIColors.border + "30",
-    borderRadius: 8,
-    overflow: "hidden"
-  },
-  cardVariant: {
-    backgroundColor: _index2.gameUIColors.panel,
-    borderRadius: 8,
-    overflow: "hidden"
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: 12
-  },
-  headerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    gap: 8
-  },
-  headerRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: _index2.gameUIColors.text,
-    flex: 1
-  },
-  badgeContainer: {
-    marginRight: 4
-  },
-  badge: {
-    backgroundColor: _index2.gameUIColors.primary + "20",
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _index2.gameUIColors.primary
-  },
-  content: {
-    paddingHorizontal: 12,
-    paddingBottom: 12
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.CollapsibleSection=CollapsibleSection;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 CollapsibleSection({title:o,children:t,icon:r,badge:e,defaultOpen:n=false,variant:i="bordered",style:l,headerStyle:c,titleStyle:g,contentStyle:u,onToggle:x}){const[s,h]=(0,_react.useState)(n);const d=(0,_react.useRef)(new _reactNative.Animated.Value(n?1:0)).current;const m=()=>{const a=!s;h(a);x?.(a);_reactNative.Animated.timing(d,{toValue:a?1:0,duration:200,useNativeDriver:true}).start()};const p=d.interpolate({inputRange:[0,1],outputRange:["0deg","180deg"]});const f=[styles.container,i==="bordered"&&styles.borderedVariant,i==="card"&&styles.cardVariant,l];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:f,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.header,c],onPress:m,activeOpacity:.7,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerLeft,children:[r&&(0,_jsxRuntime.jsx)(r,{size:16,color:i==="card"?_index2.gameUIColors.primary:_index2.gameUIColors.secondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,g],children:o})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerRight,children:[e!==void 0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.badgeContainer,children:typeof e==="string"||typeof e==="number"?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.badge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,children:e})}):e}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{rotate:p}]},children:(0,_jsxRuntime.jsx)(_index.ChevronDown,{size:16,color:_index2.gameUIColors.secondary})})]})]}),s&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.content,u],children:t})]})}CollapsibleSection.Simple=function o({title:t,children:r,defaultOpen:e}){return(0,_jsxRuntime.jsx)(CollapsibleSection,{title:t,defaultOpen:e,variant:"plain",children:r})};CollapsibleSection.WithIcon=function o({title:t,icon:r,children:e,defaultOpen:n,badge:i}){return(0,_jsxRuntime.jsx)(CollapsibleSection,{title:t,icon:r,badge:i,defaultOpen:n,variant:"card",children:e})};const styles=_reactNative.StyleSheet.create({container:{marginBottom:8},borderedVariant:{borderWidth:1,borderColor:_index2.gameUIColors.border+"30",borderRadius:8,overflow:"hidden"},cardVariant:{backgroundColor:_index2.gameUIColors.panel,borderRadius:8,overflow:"hidden"},header:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",padding:12},headerLeft:{flexDirection:"row",alignItems:"center",flex:1,gap:8},headerRight:{flexDirection:"row",alignItems:"center",gap:8},title:{fontSize:14,fontWeight:"600",color:_index2.gameUIColors.text,flex:1},badgeContainer:{marginRight:4},badge:{backgroundColor:_index2.gameUIColors.primary+"20",paddingHorizontal:8,paddingVertical:2,borderRadius:4},badgeText:{fontSize:11,fontWeight:"600",color:_index2.gameUIColors.primary},content:{paddingHorizontal:12,paddingBottom:12}});

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

@@ -1,114 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CompactFilterChips = CompactFilterChips;
-var _reactNative = require("react-native");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function CompactFilterChips({
-  groups,
-  onChipPress
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: groups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.group,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.groupTitle,
-        children: group.title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        style: styles.chipsScroll,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.chipsRow,
-          children: group.chips.map(chip => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.chip, chip.isActive && styles.chipActive, chip.isActive && chip.color && {
-              backgroundColor: chip.color + "15",
-              borderColor: chip.color + "40"
-            }],
-            onPress: () => onChipPress(group.id, chip.id, chip.value),
-            children: [chip.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(chip.icon, {
-              size: 10,
-              color: chip.isActive ? chip.color || _macOSDesignSystemColors.macOSColors.semantic.info : _macOSDesignSystemColors.macOSColors.text.muted
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.chipLabel, chip.isActive && styles.chipLabelActive, chip.isActive && chip.color && {
-                color: chip.color
-              }],
-              children: chip.label
-            }), chip.count !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.chipCount, chip.isActive && styles.chipCountActive, chip.isActive && chip.color && {
-                color: chip.color
-              }],
-              children: chip.count
-            })]
-          }, chip.id))
-        })
-      })]
-    }, group.id))
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    gap: 8
-  },
-  group: {
-    gap: 6
-  },
-  groupTitle: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _macOSDesignSystemColors.macOSColors.text.muted,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    paddingHorizontal: 4
-  },
-  chipsScroll: {
-    flexGrow: 0
-  },
-  chipsRow: {
-    flexDirection: "row",
-    gap: 4,
-    paddingHorizontal: 4
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
-    height: 24
-  },
-  chipActive: {
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.infoBackground,
-    borderColor: _macOSDesignSystemColors.macOSColors.semantic.info + "40"
-  },
-  chipLabel: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: _macOSDesignSystemColors.macOSColors.text.secondary
-  },
-  chipLabelActive: {
-    color: _macOSDesignSystemColors.macOSColors.semantic.info,
-    fontWeight: "600"
-  },
-  chipCount: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _macOSDesignSystemColors.macOSColors.text.muted,
-    backgroundColor: _macOSDesignSystemColors.macOSColors.background.hover,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  chipCountActive: {
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.info + "20",
-    color: _macOSDesignSystemColors.macOSColors.semantic.info
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.CompactFilterChips=CompactFilterChips;var _reactNative=require("react-native");var _macOSDesignSystemColors=require("../gameUI/constants/macOSDesignSystemColors.js");var _jsxRuntime=require("react/jsx-runtime");function CompactFilterChips({groups:r,onChipPress:t}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:r.map(e=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.group,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.groupTitle,children:e.title}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:true,showsHorizontalScrollIndicator:false,style:styles.chipsScroll,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.chipsRow,children:e.chips.map(o=>(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.chip,o.isActive&&styles.chipActive,o.isActive&&o.color&&{backgroundColor:o.color+"15",borderColor:o.color+"40"}],onPress:()=>t(e.id,o.id,o.value),children:[o.icon&&(0,_jsxRuntime.jsx)(o.icon,{size:10,color:o.isActive?o.color||_macOSDesignSystemColors.macOSColors.semantic.info:_macOSDesignSystemColors.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.chipLabel,o.isActive&&styles.chipLabelActive,o.isActive&&o.color&&{color:o.color}],children:o.label}),o.count!==void 0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.chipCount,o.isActive&&styles.chipCountActive,o.isActive&&o.color&&{color:o.color}],children:o.count})]},o.id))})})]},e.id))})}const styles=_reactNative.StyleSheet.create({container:{gap:8},group:{gap:6},groupTitle:{fontSize:9,fontWeight:"600",color:_macOSDesignSystemColors.macOSColors.text.muted,letterSpacing:.5,textTransform:"uppercase",paddingHorizontal:4},chipsScroll:{flexGrow:0},chipsRow:{flexDirection:"row",gap:4,paddingHorizontal:4},chip:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,backgroundColor:_macOSDesignSystemColors.macOSColors.background.card,borderRadius:4,borderWidth:1,borderColor:_macOSDesignSystemColors.macOSColors.border.default,height:24},chipActive:{backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.infoBackground,borderColor:_macOSDesignSystemColors.macOSColors.semantic.info+"40"},chipLabel:{fontSize:10,fontWeight:"500",color:_macOSDesignSystemColors.macOSColors.text.secondary},chipLabelActive:{color:_macOSDesignSystemColors.macOSColors.semantic.info,fontWeight:"600"},chipCount:{fontSize:9,fontWeight:"600",color:_macOSDesignSystemColors.macOSColors.text.muted,backgroundColor:_macOSDesignSystemColors.macOSColors.background.hover,paddingHorizontal:4,paddingVertical:1,borderRadius:3},chipCountActive:{backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.info+"20",color:_macOSDesignSystemColors.macOSColors.semantic.info}});