@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,145 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { memo, useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Modal, Pressable } from "react-native";
-import { gameUIColors } from "../gameUI/index.js";
-import { Copy } from "../../icons/lucide-icons.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * A modal hint that teaches users about iOS Simulator clipboard sync
- */
-export const ClipboardHintBanner = /*#__PURE__*/memo(function ClipboardHintBanner({
-  visible,
-  onAcknowledge
-}) {
-  const handleAcknowledge = useCallback(() => {
-    onAcknowledge();
-  }, [onAcknowledge]);
-  if (!visible) return null;
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: handleAcknowledge,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      style: styles.overlay,
-      onPress: handleAcknowledge,
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: styles.container,
-        onPress: e => e.stopPropagation(),
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.inner,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.iconContainer,
-            children: /*#__PURE__*/_jsx(Copy, {
-              size: 22,
-              color: gameUIColors.info,
-              strokeWidth: 2
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.messageContainer,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.messageTitle,
-              children: "Clipboard Tip"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.messageText,
-              children: ["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:", "\n\n", /*#__PURE__*/_jsx(Text, {
-                style: styles.menuPath,
-                children: "Edit \u2192 Automatically Sync Pasteboard"
-              }), "\n\n", "Toggle it off and on again to fix the sync."]
-            })]
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.acknowledgeButton,
-            onPress: handleAcknowledge,
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.acknowledgeButtonText,
-              children: "Got it!"
-            })
-          })]
-        })
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.6)",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 24
-  },
-  container: {
-    backgroundColor: gameUIColors.panel,
-    borderLeftWidth: 3,
-    borderLeftColor: gameUIColors.info,
-    borderRadius: 12,
-    overflow: "hidden",
-    shadowColor: 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: `${gameUIColors.info}20`,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  messageContainer: {
-    gap: 8
-  },
-  messageTitle: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: gameUIColors.info,
-    letterSpacing: 0.3,
-    textAlign: "center"
-  },
-  messageText: {
-    fontSize: 13,
-    color: gameUIColors.primaryLight,
-    lineHeight: 20,
-    textAlign: "center"
-  },
-  menuPath: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    color: gameUIColors.primary,
-    fontWeight: "600"
-  },
-  acknowledgeButton: {
-    backgroundColor: gameUIColors.info,
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    borderRadius: 8,
-    marginTop: 4
-  },
-  acknowledgeButtonText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: "#FFFFFF"
-  }
-});
+"use strict";import{memo as g,useCallback as h}from"react";import{View as r,Text as n,TouchableOpacity as m,StyleSheet as f,Modal as p,Pressable as d}from"react-native";import{gameUIColors as t}from"../gameUI/index.js";import{Copy as u}from"../../icons/lucide-icons.js";import{monoFont as y}from"../fonts.js";import{jsx as o,jsxs as a}from"react/jsx-runtime";export const ClipboardHintBanner=g(function C({visible:l,onAcknowledge:s}){const i=h(()=>{s()},[s]);if(!l)return null;return o(p,{visible:l,transparent:true,animationType:"fade",onRequestClose:i,children:o(d,{style:e.overlay,onPress:i,children:o(d,{style:e.container,onPress:c=>c.stopPropagation(),children:a(r,{style:e.inner,children:[o(r,{style:e.iconContainer,children:o(u,{size:22,color:t.info,strokeWidth:2})}),a(r,{style:e.messageContainer,children:[o(n,{style:e.messageTitle,children:"Clipboard Tip"}),a(n,{style:e.messageText,children:["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:","\n\n",o(n,{style:e.menuPath,children:"Edit \u2192 Automatically Sync Pasteboard"}),"\n\n","Toggle it off and on again to fix the sync."]})]}),o(m,{style:e.acknowledgeButton,onPress:i,activeOpacity:.7,children:o(n,{style:e.acknowledgeButtonText,children:"Got it!"})})]})})})})});const e=f.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.6)",justifyContent:"center",alignItems:"center",padding:24},container:{backgroundColor:t.panel,borderLeftWidth:3,borderLeftColor:t.info,borderRadius:12,overflow:"hidden",shadowColor:t.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:`${t.info}20`,justifyContent:"center",alignItems:"center"},messageContainer:{gap:8},messageTitle:{fontSize:16,fontWeight:"700",color:t.info,letterSpacing:.3,textAlign:"center"},messageText:{fontSize:13,color:t.primaryLight,lineHeight:20,textAlign:"center"},menuPath:{fontFamily:y,fontSize:12,color:t.primary,fontWeight:"600"},acknowledgeButton:{backgroundColor:t.info,paddingHorizontal:24,paddingVertical:10,borderRadius:8,marginTop:4},acknowledgeButtonText:{fontSize:14,fontWeight:"700",color:"#FFFFFF"}});

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

@@ -1,166 +1 @@
-"use strict";
-
-import { useState, useRef } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
-import { ChevronDown } from "../../icons/index.js";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CollapsibleSection({
-  title,
-  children,
-  icon: Icon,
-  badge,
-  defaultOpen = false,
-  variant = "bordered",
-  style,
-  headerStyle,
-  titleStyle,
-  contentStyle,
-  onToggle
-}) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const rotateAnim = useRef(new Animated.Value(defaultOpen ? 1 : 0)).current;
-  const toggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    onToggle?.(newState);
-    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__*/_jsxs(View, {
-    style: containerStyles,
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: [styles.header, headerStyle],
-      onPress: toggle,
-      activeOpacity: 0.7,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.headerLeft,
-        children: [Icon && /*#__PURE__*/_jsx(Icon, {
-          size: 16,
-          color: variant === "card" ? gameUIColors.primary : gameUIColors.secondary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.title, titleStyle],
-          children: title
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerRight,
-        children: [badge !== undefined && /*#__PURE__*/_jsx(View, {
-          style: styles.badgeContainer,
-          children: typeof badge === "string" || typeof badge === "number" ? /*#__PURE__*/_jsx(View, {
-            style: styles.badge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.badgeText,
-              children: badge
-            })
-          }) : badge
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            transform: [{
-              rotate: rotation
-            }]
-          },
-          children: /*#__PURE__*/_jsx(ChevronDown, {
-            size: 16,
-            color: gameUIColors.secondary
-          })
-        })]
-      })]
-    }), isOpen && /*#__PURE__*/_jsx(View, {
-      style: [styles.content, contentStyle],
-      children: children
-    })]
-  });
-}
-CollapsibleSection.Simple = function Simple({
-  title,
-  children,
-  defaultOpen
-}) {
-  return /*#__PURE__*/_jsx(CollapsibleSection, {
-    title: title,
-    defaultOpen: defaultOpen,
-    variant: "plain",
-    children: children
-  });
-};
-CollapsibleSection.WithIcon = function WithIcon({
-  title,
-  icon,
-  children,
-  defaultOpen,
-  badge
-}) {
-  return /*#__PURE__*/_jsx(CollapsibleSection, {
-    title: title,
-    icon: icon,
-    badge: badge,
-    defaultOpen: defaultOpen,
-    variant: "card",
-    children: children
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 8
-  },
-  borderedVariant: {
-    borderWidth: 1,
-    borderColor: gameUIColors.border + "30",
-    borderRadius: 8,
-    overflow: "hidden"
-  },
-  cardVariant: {
-    backgroundColor: 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: gameUIColors.text,
-    flex: 1
-  },
-  badgeContainer: {
-    marginRight: 4
-  },
-  badge: {
-    backgroundColor: gameUIColors.primary + "20",
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: gameUIColors.primary
-  },
-  content: {
-    paddingHorizontal: 12,
-    paddingBottom: 12
-  }
-});
+"use strict";import{useState as v,useRef as z}from"react";import{View as i,Text as m,StyleSheet as I,TouchableOpacity as j,Animated as g}from"react-native";import{ChevronDown as D}from"../../icons/index.js";import{gameUIColors as n}from"../gameUI/index.js";import{jsx as t,jsxs as c}from"react/jsx-runtime";export function CollapsibleSection({title:s,children:a,icon:o,badge:r,defaultOpen:l=false,variant:d="bordered",style:u,headerStyle:y,titleStyle:b,contentStyle:x,onToggle:w}){const[h,S]=v(l);const f=z(new g.Value(l?1:0)).current;const C=()=>{const p=!h;S(p);w?.(p);g.timing(f,{toValue:p?1:0,duration:200,useNativeDriver:true}).start()};const R=f.interpolate({inputRange:[0,1],outputRange:["0deg","180deg"]});const V=[e.container,d==="bordered"&&e.borderedVariant,d==="card"&&e.cardVariant,u];return c(i,{style:V,children:[c(j,{style:[e.header,y],onPress:C,activeOpacity:.7,children:[c(i,{style:e.headerLeft,children:[o&&t(o,{size:16,color:d==="card"?n.primary:n.secondary}),t(m,{style:[e.title,b],children:s})]}),c(i,{style:e.headerRight,children:[r!==void 0&&t(i,{style:e.badgeContainer,children:typeof r==="string"||typeof r==="number"?t(i,{style:e.badge,children:t(m,{style:e.badgeText,children:r})}):r}),t(g.View,{style:{transform:[{rotate:R}]},children:t(D,{size:16,color:n.secondary})})]})]}),h&&t(i,{style:[e.content,x],children:a})]})}CollapsibleSection.Simple=function s({title:a,children:o,defaultOpen:r}){return t(CollapsibleSection,{title:a,defaultOpen:r,variant:"plain",children:o})};CollapsibleSection.WithIcon=function s({title:a,icon:o,children:r,defaultOpen:l,badge:d}){return t(CollapsibleSection,{title:a,icon:o,badge:d,defaultOpen:l,variant:"card",children:r})};const e=I.create({container:{marginBottom:8},borderedVariant:{borderWidth:1,borderColor:n.border+"30",borderRadius:8,overflow:"hidden"},cardVariant:{backgroundColor:n.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:n.text,flex:1},badgeContainer:{marginRight:4},badge:{backgroundColor:n.primary+"20",paddingHorizontal:8,paddingVertical:2,borderRadius:4},badgeText:{fontSize:11,fontWeight:"600",color:n.primary},content:{paddingHorizontal:12,paddingBottom:12}});

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

@@ -1,110 +1 @@
-"use strict";
-
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CompactFilterChips({
-  groups,
-  onChipPress
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: groups.map(group => /*#__PURE__*/_jsxs(View, {
-      style: styles.group,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.groupTitle,
-        children: group.title
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        style: styles.chipsScroll,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.chipsRow,
-          children: group.chips.map(chip => /*#__PURE__*/_jsxs(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__*/_jsx(chip.icon, {
-              size: 10,
-              color: chip.isActive ? chip.color || macOSColors.semantic.info : macOSColors.text.muted
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.chipLabel, chip.isActive && styles.chipLabelActive, chip.isActive && chip.color && {
-                color: chip.color
-              }],
-              children: chip.label
-            }), chip.count !== undefined && /*#__PURE__*/_jsx(Text, {
-              style: [styles.chipCount, chip.isActive && styles.chipCountActive, chip.isActive && chip.color && {
-                color: chip.color
-              }],
-              children: chip.count
-            })]
-          }, chip.id))
-        })
-      })]
-    }, group.id))
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    gap: 8
-  },
-  group: {
-    gap: 6
-  },
-  groupTitle: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: 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: macOSColors.background.card,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    height: 24
-  },
-  chipActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "40"
-  },
-  chipLabel: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: macOSColors.text.secondary
-  },
-  chipLabelActive: {
-    color: macOSColors.semantic.info,
-    fontWeight: "600"
-  },
-  chipCount: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: macOSColors.text.muted,
-    backgroundColor: macOSColors.background.hover,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  chipCountActive: {
-    backgroundColor: macOSColors.semantic.info + "20",
-    color: macOSColors.semantic.info
-  }
-});
+"use strict";import{View as l,Text as c,TouchableOpacity as d,StyleSheet as u,ScrollView as g}from"react-native";import{macOSColors as e}from"../gameUI/constants/macOSDesignSystemColors.js";import{jsx as r,jsxs as n}from"react/jsx-runtime";export function CompactFilterChips({groups:a,onChipPress:s}){return r(l,{style:t.container,children:a.map(i=>n(l,{style:t.group,children:[r(c,{style:t.groupTitle,children:i.title}),r(g,{horizontal:true,showsHorizontalScrollIndicator:false,style:t.chipsScroll,children:r(l,{style:t.chipsRow,children:i.chips.map(o=>n(d,{style:[t.chip,o.isActive&&t.chipActive,o.isActive&&o.color&&{backgroundColor:o.color+"15",borderColor:o.color+"40"}],onPress:()=>s(i.id,o.id,o.value),children:[o.icon&&r(o.icon,{size:10,color:o.isActive?o.color||e.semantic.info:e.text.muted}),r(c,{style:[t.chipLabel,o.isActive&&t.chipLabelActive,o.isActive&&o.color&&{color:o.color}],children:o.label}),o.count!==void 0&&r(c,{style:[t.chipCount,o.isActive&&t.chipCountActive,o.isActive&&o.color&&{color:o.color}],children:o.count})]},o.id))})})]},i.id))})}const t=u.create({container:{gap:8},group:{gap:6},groupTitle:{fontSize:9,fontWeight:"600",color:e.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:e.background.card,borderRadius:4,borderWidth:1,borderColor:e.border.default,height:24},chipActive:{backgroundColor:e.semantic.infoBackground,borderColor:e.semantic.info+"40"},chipLabel:{fontSize:10,fontWeight:"500",color:e.text.secondary},chipLabelActive:{color:e.semantic.info,fontWeight:"600"},chipCount:{fontSize:9,fontWeight:"600",color:e.text.muted,backgroundColor:e.background.hover,paddingHorizontal:4,paddingVertical:1,borderRadius:3},chipCountActive:{backgroundColor:e.semantic.info+"20",color:e.semantic.info}});