@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,169 +1 @@
-"use strict";
-
-import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-
-// Base ListItem container component
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ListItem({
-  onPress,
-  children,
-  disabled = false,
-  style
-}) {
-  const Container = onPress ? TouchableOpacity : View;
-  const containerProps = onPress ? {
-    onPress,
-    disabled
-  } : {};
-  return /*#__PURE__*/_jsx(Container, {
-    ...containerProps,
-    style: [styles.container, style],
-    children: children
-  });
-}
-
-// Header section for status badges, timestamps, etc.
-
-function Header({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.header, style],
-    children: children
-  });
-}
-
-// Content section for main item content
-
-function Content({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.content, style],
-    children: children
-  });
-}
-
-// Footer section for actions, metadata, etc.
-
-function Footer({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.footer, style],
-    children: children
-  });
-}
-
-// Title component for item titles
-
-function Title({
-  children,
-  numberOfLines = 1,
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.title, style],
-    numberOfLines: numberOfLines,
-    children: children
-  });
-}
-
-// Subtitle component for secondary text
-
-function Subtitle({
-  children,
-  numberOfLines = 2,
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.subtitle, style],
-    numberOfLines: numberOfLines,
-    children: children
-  });
-}
-
-// Metadata component for timestamps, counts, etc.
-
-function Metadata({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.metadata, style],
-    children: children
-  });
-}
-
-// Actions container for buttons
-
-function Actions({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.actions, style],
-    children: children
-  });
-}
-
-// Attach sub-components to the main component
-ListItem.Header = Header;
-ListItem.Content = Content;
-ListItem.Footer = Footer;
-ListItem.Title = Title;
-ListItem.Subtitle = Subtitle;
-ListItem.Metadata = Metadata;
-ListItem.Actions = Actions;
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 8,
-    padding: 12,
-    marginHorizontal: 16,
-    marginVertical: 4,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)"
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 8,
-    gap: 8
-  },
-  content: {
-    flex: 1
-  },
-  footer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginTop: 8,
-    gap: 8
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: buoyColors.text,
-    marginBottom: 4
-  },
-  subtitle: {
-    fontSize: 14,
-    color: buoyColors.textSecondary,
-    lineHeight: 20
-  },
-  metadata: {
-    fontSize: 12,
-    color: macOSColors.text.icon
-  },
-  actions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginLeft: "auto"
-  }
-});
+"use strict";import{TouchableOpacity as d,View as i,Text as a,StyleSheet as f}from"react-native";import{macOSColors as m}from"../gameUI/constants/macOSDesignSystemColors.js";import{buoyColors as c}from"../gameUI/constants/gameUIColors.js";import{jsx as n}from"react/jsx-runtime";export function ListItem({onPress:t,children:e,disabled:o=false,style:l}){const s=t?d:i;const u=t?{onPress:t,disabled:o}:{};return n(s,{...u,style:[r.container,l],children:e})}function g({children:t,style:e}){return n(i,{style:[r.header,e],children:t})}function h({children:t,style:e}){return n(i,{style:[r.content,e],children:t})}function b({children:t,style:e}){return n(i,{style:[r.footer,e],children:t})}function y({children:t,numberOfLines:e=1,style:o}){return n(a,{style:[r.title,o],numberOfLines:e,children:t})}function p({children:t,numberOfLines:e=2,style:o}){return n(a,{style:[r.subtitle,o],numberOfLines:e,children:t})}function x({children:t,style:e}){return n(a,{style:[r.metadata,e],children:t})}function S({children:t,style:e}){return n(i,{style:[r.actions,e],children:t})}ListItem.Header=g;ListItem.Content=h;ListItem.Footer=b;ListItem.Title=y;ListItem.Subtitle=p;ListItem.Metadata=x;ListItem.Actions=S;const r=f.create({container:{backgroundColor:c.card,borderRadius:8,padding:12,marginHorizontal:16,marginVertical:4,borderWidth:1,borderColor:"rgba(128, 128, 128, 0.1)"},header:{flexDirection:"row",alignItems:"center",marginBottom:8,gap:8},content:{flex:1},footer:{flexDirection:"row",alignItems:"center",marginTop:8,gap:8},title:{fontSize:16,fontWeight:"600",color:c.text,marginBottom:4},subtitle:{fontSize:14,color:c.textSecondary,lineHeight:20},metadata:{fontSize:12,color:m.text.icon},actions:{flexDirection:"row",alignItems:"center",gap:8,marginLeft:"auto"}});

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

@@ -1,297 +1 @@
-"use strict";
-
-import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
-import { useEffect, useRef } from "react";
-import { ChevronLeft, Search as SearchIcon, X } from "../../icons/index.js";
-import { night } from "../night/nightTheme.js";
-import { windowDragProps } from "./windowDrag.js";
-
-// Base ModalHeader container component
-// Note: onClose and onMinimize are now handled by WindowControls in JsModal
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function ModalHeader({
-  children
-}) {
-  // Tagged as a window-drag region for Buoy Desktop (see ./windowDrag): on
-  // the desktop dashboard this header is the top edge of a frameless window,
-  // so it moves the app like a title bar. Inert everywhere else.
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.headerContainer,
-    ...windowDragProps,
-    children: children
-  });
-}
-
-// Navigation component for back/close buttons
-
-export function Navigation({
-  onBack,
-  onClose,
-  backIcon,
-  closeIcon
-}) {
-  // When only showing close button, position it on the right
-  if (!onBack && onClose) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        style: {
-          flex: 1
-        }
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onClose,
-        style: styles.navigationButton,
-        testID: "tool-close",
-        accessibilityLabel: "Close",
-        accessibilityRole: "button",
-        children: closeIcon || /*#__PURE__*/_jsx(X, {
-          size: 20,
-          color: night.color.textSecondary
-        })
-      })]
-    });
-  }
-
-  // When only showing back button
-  if (onBack && !onClose) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onBack,
-      style: styles.navigationButton,
-      testID: "tool-back",
-      accessibilityLabel: "Back",
-      accessibilityRole: "button",
-      children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
-        size: 20,
-        color: night.color.textSecondary
-      })
-    });
-  }
-
-  // When showing both, we need to handle them separately
-  // The close button will be rendered separately on the right
-  if (onBack && onClose) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onBack,
-      style: styles.navigationButton,
-      testID: "tool-back",
-      accessibilityLabel: "Back",
-      accessibilityRole: "button",
-      children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
-        size: 20,
-        color: night.color.textSecondary
-      })
-    });
-  }
-  return null;
-}
-
-// Content component for title and subtitle
-
-export function Content({
-  title,
-  subtitle,
-  children,
-  centered,
-  noMargin,
-  testID
-}) {
-  if (children) {
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.headerContent, noMargin && styles.headerContentNoMargin],
-      children: children
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.headerContent, centered && styles.headerContentCentered],
-    children: [title && /*#__PURE__*/_jsx(Text, {
-      style: [styles.headerTitle, centered && styles.headerTitleCentered],
-      numberOfLines: 1,
-      testID: testID,
-      children: title
-    }), subtitle && /*#__PURE__*/_jsx(Text, {
-      style: [styles.headerSubtitle, centered && styles.headerSubtitleCentered],
-      numberOfLines: 1,
-      testID: testID ? `${testID}-subtitle` : undefined,
-      children: subtitle
-    })]
-  });
-}
-
-// Actions component for header action buttons
-// Note: onClose and onMinimize are now handled by WindowControls in JsModal
-
-export function Actions({
-  children
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.headerActions,
-    children: children
-  });
-}
-Actions.displayName = "ModalHeaderActions";
-
-// Expanding search input for the header. Render this IN PLACE OF
-// `ModalHeader.Content` while search is active — it fills the same flex slot.
-// Extracts the idiom env/network/storage each hand-rolled (~50 lines apiece).
-
-export function HeaderSearch({
-  value,
-  onChangeText,
-  onCancel,
-  placeholder = "Search...",
-  autoFocus = true,
-  testID,
-  containerTestID,
-  clearTestID,
-  accessibilityLabel,
-  onBlur,
-  iconSize = 12,
-  dismissOnBlur = false,
-  onDismiss,
-  clearOnlyWhenText = false,
-  inputProps,
-  containerNativeID
-}) {
-  const inputRef = useRef(null);
-  // Set while the ✕ is pressed so the blur it causes doesn't dismiss first.
-  const clearPressRef = useRef(false);
-  useEffect(() => {
-    if (autoFocus) inputRef.current?.focus();
-  }, [autoFocus]);
-  const dismiss = onDismiss ?? onCancel;
-  const showClear = !clearOnlyWhenText || value.length > 0;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.searchContainer,
-    testID: containerTestID,
-    nativeID: containerNativeID,
-    children: [/*#__PURE__*/_jsx(SearchIcon, {
-      size: iconSize,
-      color: night.color.textSecondary
-    }), /*#__PURE__*/_jsx(TextInput, {
-      ref: inputRef,
-      style: styles.searchInput,
-      placeholder: placeholder,
-      placeholderTextColor: night.color.placeholder,
-      value: value,
-      onChangeText: onChangeText,
-      onSubmitEditing: () => dismissOnBlur ? dismiss() : inputRef.current?.blur(),
-      onBlur: () => {
-        if (dismissOnBlur && !clearPressRef.current) dismiss();
-        onBlur?.();
-      },
-      autoCorrect: false,
-      autoCapitalize: "none",
-      returnKeyType: "search",
-      testID: testID,
-      accessibilityLabel: accessibilityLabel ?? placeholder,
-      ...inputProps
-    }), showClear ? /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onCancel
-      // react-native-web delays press-in ~50ms by default (native fires it
-      // immediately), which would put it AFTER the blur.
-      ,
-      delayPressIn: 0,
-      onPressIn: () => {
-        clearPressRef.current = true;
-      },
-      onPressOut: () => {
-        clearPressRef.current = false;
-      },
-      style: styles.searchCancelButton,
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear search",
-      testID: clearTestID ?? (testID ? `${testID}-clear` : undefined),
-      children: /*#__PURE__*/_jsx(X, {
-        size: 12,
-        color: night.color.textSecondary
-      })
-    }) : null]
-  });
-}
-
-// Attach sub-components to the main component
-ModalHeader.Navigation = Navigation;
-ModalHeader.Content = Content;
-ModalHeader.Actions = Actions;
-ModalHeader.Search = HeaderSearch;
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    gap: 8,
-    minHeight: 32,
-    paddingLeft: 4
-    // No right inset: the traffic-light window controls are cleared
-    // VERTICALLY — JsModal's drag-indicator strip owns their band (see
-    // WINDOW_CONTROLS_BAND) — so nothing here has to be pushed sideways to
-    // stay out from under them. `headerActions` already ends 4pt off the
-    // edge, matching the left, and hosts that render this header with no
-    // window controls at all (the desktop inline panels) get no phantom gap.
-  },
-  navigationButton: {
-    padding: 4
-  },
-  closeButtonOnly: {
-    marginLeft: "auto",
-    marginRight: 4
-  },
-  headerContent: {
-    flex: 1,
-    marginHorizontal: 8
-  },
-  headerContentCentered: {
-    justifyContent: "center"
-  },
-  headerTitle: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "500"
-  },
-  headerTitleCentered: {
-    textAlign: "center"
-  },
-  headerSubtitle: {
-    fontSize: 12,
-    color: night.color.textSecondary,
-    marginTop: 2
-  },
-  headerSubtitleCentered: {
-    textAlign: "center"
-  },
-  headerActions: {
-    flexDirection: "row",
-    gap: 6,
-    marginLeft: "auto",
-    marginRight: 4,
-    flexShrink: 0
-  },
-  headerContentNoMargin: {
-    marginHorizontal: 0
-  },
-  searchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    marginHorizontal: 12,
-    marginVertical: 4,
-    height: 32,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  searchInput: {
-    flex: 1,
-    marginLeft: 8,
-    fontSize: 13,
-    color: night.color.text,
-    padding: 0,
-    height: "100%"
-  },
-  searchCancelButton: {
-    padding: 4,
-    marginLeft: 4
-  }
-});
+"use strict";import{View as c,Text as b,TextInput as H,TouchableOpacity as d,StyleSheet as w}from"react-native";import{useEffect as A,useRef as m}from"react";import{ChevronLeft as x,Search as j,X as p}from"../../icons/index.js";import{night as n}from"../night/nightTheme.js";import{windowDragProps as B}from"./windowDrag.js";import{jsx as e,Fragment as N,jsxs as f}from"react/jsx-runtime";export function ModalHeader({children:r}){return e(c,{style:t.headerContainer,...B,children:r})}export function Navigation({onBack:r,onClose:o,backIcon:i,closeIcon:a}){if(!r&&o){return f(N,{children:[e(c,{style:{flex:1}}),e(d,{onPress:o,style:t.navigationButton,testID:"tool-close",accessibilityLabel:"Close",accessibilityRole:"button",children:a||e(p,{size:20,color:n.color.textSecondary})})]})}if(r&&!o){return e(d,{onPress:r,style:t.navigationButton,testID:"tool-back",accessibilityLabel:"Back",accessibilityRole:"button",children:i||e(x,{size:20,color:n.color.textSecondary})})}if(r&&o){return e(d,{onPress:r,style:t.navigationButton,testID:"tool-back",accessibilityLabel:"Back",accessibilityRole:"button",children:i||e(x,{size:20,color:n.color.textSecondary})})}return null}export function Content({title:r,subtitle:o,children:i,centered:a,noMargin:s,testID:l}){if(i){return e(c,{style:[t.headerContent,s&&t.headerContentNoMargin],children:i})}return f(c,{style:[t.headerContent,a&&t.headerContentCentered],children:[r&&e(b,{style:[t.headerTitle,a&&t.headerTitleCentered],numberOfLines:1,testID:l,children:r}),o&&e(b,{style:[t.headerSubtitle,a&&t.headerSubtitleCentered],numberOfLines:1,testID:l?`${l}-subtitle`:void 0,children:o})]})}export function Actions({children:r}){return e(c,{style:t.headerActions,children:r})}Actions.displayName="ModalHeaderActions";export function HeaderSearch({value:r,onChangeText:o,onCancel:i,placeholder:a="Search...",autoFocus:s=true,testID:l,containerTestID:C,clearTestID:S,accessibilityLabel:z,onBlur:L,iconSize:I=12,dismissOnBlur:g=false,onDismiss:T,clearOnlyWhenText:R=false,inputProps:v,containerNativeID:D}){const h=m(null);const u=m(false);A(()=>{if(s)h.current?.focus()},[s]);const y=T??i;const P=!R||r.length>0;return f(c,{style:t.searchContainer,testID:C,nativeID:D,children:[e(j,{size:I,color:n.color.textSecondary}),e(H,{ref:h,style:t.searchInput,placeholder:a,placeholderTextColor:n.color.placeholder,value:r,onChangeText:o,onSubmitEditing:()=>g?y():h.current?.blur(),onBlur:()=>{if(g&&!u.current)y();L?.()},autoCorrect:false,autoCapitalize:"none",returnKeyType:"search",testID:l,accessibilityLabel:z??a,...v}),P?e(d,{onPress:i,delayPressIn:0,onPressIn:()=>{u.current=true},onPressOut:()=>{u.current=false},style:t.searchCancelButton,accessibilityRole:"button",accessibilityLabel:"Clear search",testID:S??(l?`${l}-clear`:void 0),children:e(p,{size:12,color:n.color.textSecondary})}):null]})}ModalHeader.Navigation=Navigation;ModalHeader.Content=Content;ModalHeader.Actions=Actions;ModalHeader.Search=HeaderSearch;const t=w.create({headerContainer:{flexDirection:"row",alignItems:"center",flex:1,gap:8,minHeight:32,paddingLeft:4},navigationButton:{padding:4},closeButtonOnly:{marginLeft:"auto",marginRight:4},headerContent:{flex:1,marginHorizontal:8},headerContentCentered:{justifyContent:"center"},headerTitle:{color:n.color.text,fontSize:14,fontWeight:"500"},headerTitleCentered:{textAlign:"center"},headerSubtitle:{fontSize:12,color:n.color.textSecondary,marginTop:2},headerSubtitleCentered:{textAlign:"center"},headerActions:{flexDirection:"row",gap:6,marginLeft:"auto",marginRight:4,flexShrink:0},headerContentNoMargin:{marginHorizontal:0},searchContainer:{flexDirection:"row",alignItems:"center",flex:1,backgroundColor:n.color.surfaceElevated,borderRadius:10,paddingHorizontal:10,paddingVertical:4,marginHorizontal:12,marginVertical:4,height:32,borderWidth:1,borderColor:n.color.border},searchInput:{flex:1,marginLeft:8,fontSize:13,color:n.color.text,padding:0,height:"100%"},searchCancelButton:{padding:4,marginLeft:4}});

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

@@ -1,143 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { memo, useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * A visually striking hint banner that teaches users about double-tap functionality
- */
-export const ModalHintBanner = /*#__PURE__*/memo(function ModalHintBanner({
-  onAcknowledge
-}) {
-  const handleAcknowledge = useCallback(() => {
-    onAcknowledge();
-  }, [onAcknowledge]);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.inner,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.iconContainer,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.tapIndicator,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.tapCircle, styles.tapCircle1]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.tapCircle, styles.tapCircle2]
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.messageContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.messageTitle,
-          children: "\uD83D\uDCA1 Pro Tip"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.messageText,
-          children: "Double-tap the header to transform this into a floating modal"
-        })]
-      }), /*#__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({
-  container: {
-    backgroundColor: `${gameUIColors.info}15`,
-    borderLeftWidth: 3,
-    borderLeftColor: gameUIColors.info,
-    borderRadius: 8,
-    marginHorizontal: 12,
-    marginTop: 8,
-    marginBottom: 4,
-    overflow: "hidden",
-    shadowColor: 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: 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: gameUIColors.info,
-    letterSpacing: 0.3
-  },
-  messageText: {
-    fontSize: 12,
-    color: gameUIColors.primaryLight,
-    lineHeight: 16
-  },
-  acknowledgeButton: {
-    backgroundColor: `${gameUIColors.info}30`,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: `${gameUIColors.info}50`
-  },
-  acknowledgeButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: gameUIColors.info
-  }
-});
+"use strict";import{memo as s,useCallback as c}from"react";import{View as i,Text as r,TouchableOpacity as d,StyleSheet as h}from"react-native";import{gameUIColors as t}from"../gameUI/index.js";import{jsx as o,jsxs as n}from"react/jsx-runtime";export const ModalHintBanner=s(function g({onAcknowledge:a}){const l=c(()=>{a()},[a]);return o(i,{style:e.container,children:n(i,{style:e.inner,children:[o(i,{style:e.iconContainer,children:n(i,{style:e.tapIndicator,children:[o(i,{style:[e.tapCircle,e.tapCircle1]}),o(i,{style:[e.tapCircle,e.tapCircle2]})]})}),n(i,{style:e.messageContainer,children:[o(r,{style:e.messageTitle,children:"\u{1F4A1} Pro Tip"}),o(r,{style:e.messageText,children:"Double-tap the header to transform this into a floating modal"})]}),o(d,{style:e.acknowledgeButton,onPress:l,activeOpacity:.7,children:o(r,{style:e.acknowledgeButtonText,children:"Got it!"})})]})})});const e=h.create({container:{backgroundColor:`${t.info}15`,borderLeftWidth:3,borderLeftColor:t.info,borderRadius:8,marginHorizontal:12,marginTop:8,marginBottom:4,overflow:"hidden",shadowColor:t.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:t.info},tapCircle1:{opacity:.6,transform:[{scale:.8}]},tapCircle2:{opacity:1,transform:[{scale:1}]},messageContainer:{flex:1,gap:2},messageTitle:{fontSize:13,fontWeight:"600",color:t.info,letterSpacing:.3},messageText:{fontSize:12,color:t.primaryLight,lineHeight:16},acknowledgeButton:{backgroundColor:`${t.info}30`,paddingHorizontal:12,paddingVertical:6,borderRadius:6,borderWidth:1,borderColor:`${t.info}50`},acknowledgeButtonText:{fontSize:12,fontWeight:"600",color:t.info}});