@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

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

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

@@ -1,231 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StatusIndicator = StatusIndicator;
-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");
-const statusConfig = {
-  success: {
-    color: _index2.gameUIColors.success,
-    icon: _index.CheckCircle,
-    label: "Success",
-    bgColor: _index2.gameUIColors.success + "20"
-  },
-  error: {
-    color: _index2.gameUIColors.error,
-    icon: _index.XCircle,
-    label: "Error",
-    bgColor: _index2.gameUIColors.error + "20"
-  },
-  warning: {
-    color: _index2.gameUIColors.warning,
-    icon: _index.AlertCircle,
-    label: "Warning",
-    bgColor: _index2.gameUIColors.warning + "20"
-  },
-  pending: {
-    color: _index2.gameUIColors.warning,
-    icon: _index.Clock,
-    label: "Pending",
-    bgColor: _index2.gameUIColors.warning + "20"
-  },
-  info: {
-    color: _index2.gameUIColors.primary,
-    icon: _index.Info,
-    label: "Info",
-    bgColor: _index2.gameUIColors.primary + "20"
-  }
-};
-function StatusIndicator({
-  status,
-  size = "medium",
-  showLabel = false,
-  label,
-  showIcon = true,
-  animated = false,
-  style,
-  labelStyle,
-  variant = "icon"
-}) {
-  const pulseAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const config = statusConfig[status];
-  const sizeConfig = {
-    small: {
-      iconSize: 12,
-      fontSize: 10,
-      dotSize: 6,
-      padding: 4
-    },
-    medium: {
-      iconSize: 16,
-      fontSize: 12,
-      dotSize: 8,
-      padding: 6
-    },
-    large: {
-      iconSize: 20,
-      fontSize: 14,
-      dotSize: 10,
-      padding: 8
-    }
-  };
-  const sizes = sizeConfig[size];
-  const Icon = config.icon;
-  const displayLabel = label || config.label;
-  (0, _react.useEffect)(() => {
-    if (animated && status === "pending") {
-      const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseAnim, {
-        toValue: 1.2,
-        duration: 600,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(pulseAnim, {
-        toValue: 1,
-        duration: 600,
-        useNativeDriver: true
-      })]));
-      animation.start();
-      return () => animation.stop();
-    }
-  }, [animated, status, pulseAnim]);
-  if (variant === "dot") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.dot, {
-        width: sizes.dotSize,
-        height: sizes.dotSize,
-        backgroundColor: config.color,
-        transform: animated && status === "pending" ? [{
-          scale: pulseAnim
-        }] : []
-      }, style]
-    });
-  }
-  if (variant === "text") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.text, {
-        color: config.color,
-        fontSize: sizes.fontSize
-      }, labelStyle],
-      children: displayLabel
-    });
-  }
-  if (variant === "badge") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.badge, {
-        backgroundColor: config.bgColor,
-        paddingHorizontal: sizes.padding,
-        paddingVertical: sizes.padding / 2
-      }, style],
-      children: [showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        size: sizes.iconSize,
-        color: config.color
-      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.badgeLabel, {
-          color: config.color,
-          fontSize: sizes.fontSize
-        }, !showIcon && {
-          marginLeft: 0
-        }, labelStyle],
-        children: displayLabel
-      })]
-    });
-  }
-
-  // Default icon variant
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.iconContainer, {
-      transform: animated && status === "pending" ? [{
-        scale: pulseAnim
-      }] : []
-    }, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      size: sizes.iconSize,
-      color: config.color
-    }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, {
-        color: config.color,
-        fontSize: sizes.fontSize
-      }, labelStyle],
-      children: displayLabel
-    })]
-  });
-}
-StatusIndicator.Dot = function StatusDot({
-  status,
-  size = 8,
-  animated = false,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-    status: status,
-    variant: "dot",
-    animated: animated,
-    style: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      ...style
-    }
-  });
-};
-StatusIndicator.Badge = function StatusBadge({
-  status,
-  label,
-  size = "medium",
-  showIcon = true,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-    status: status,
-    variant: "badge",
-    size: size,
-    showIcon: showIcon,
-    showLabel: true,
-    label: label,
-    style: style
-  });
-};
-StatusIndicator.Text = function StatusText({
-  status,
-  label,
-  size = "medium",
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-    status: status,
-    variant: "text",
-    size: size,
-    label: label,
-    labelStyle: style
-  });
-};
-const styles = _reactNative.StyleSheet.create({
-  iconContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  label: {
-    fontWeight: "500"
-  },
-  dot: {
-    borderRadius: 100
-  },
-  text: {
-    fontWeight: "600"
-  },
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    borderRadius: 4
-  },
-  badgeLabel: {
-    fontWeight: "600",
-    marginLeft: 4
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.StatusIndicator=StatusIndicator;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");const statusConfig={success:{color:_index2.gameUIColors.success,icon:_index.CheckCircle,label:"Success",bgColor:_index2.gameUIColors.success+"20"},error:{color:_index2.gameUIColors.error,icon:_index.XCircle,label:"Error",bgColor:_index2.gameUIColors.error+"20"},warning:{color:_index2.gameUIColors.warning,icon:_index.AlertCircle,label:"Warning",bgColor:_index2.gameUIColors.warning+"20"},pending:{color:_index2.gameUIColors.warning,icon:_index.Clock,label:"Pending",bgColor:_index2.gameUIColors.warning+"20"},info:{color:_index2.gameUIColors.primary,icon:_index.Info,label:"Info",bgColor:_index2.gameUIColors.primary+"20"}};function StatusIndicator({status:i,size:n="medium",showLabel:e=false,label:a,showIcon:t=true,animated:l=false,style:c,labelStyle:d,variant:g="icon"}){const s=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current;const o=statusConfig[i];const b={small:{iconSize:12,fontSize:10,dotSize:6,padding:4},medium:{iconSize:16,fontSize:12,dotSize:8,padding:6},large:{iconSize:20,fontSize:14,dotSize:10,padding:8}};const r=b[n];const f=o.icon;const u=a||o.label;(0,_react.useEffect)(()=>{if(l&&i==="pending"){const m=_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(s,{toValue:1.2,duration:600,useNativeDriver:true}),_reactNative.Animated.timing(s,{toValue:1,duration:600,useNativeDriver:true})]));m.start();return()=>m.stop()}},[l,i,s]);if(g==="dot"){return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.dot,{width:r.dotSize,height:r.dotSize,backgroundColor:o.color,transform:l&&i==="pending"?[{scale:s}]:[]},c]})}if(g==="text"){return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:o.color,fontSize:r.fontSize},d],children:u})}if(g==="badge"){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.badge,{backgroundColor:o.bgColor,paddingHorizontal:r.padding,paddingVertical:r.padding/2},c],children:[t&&(0,_jsxRuntime.jsx)(f,{size:r.iconSize,color:o.color}),e&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeLabel,{color:o.color,fontSize:r.fontSize},!t&&{marginLeft:0},d],children:u})]})}return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[styles.iconContainer,{transform:l&&i==="pending"?[{scale:s}]:[]},c],children:[(0,_jsxRuntime.jsx)(f,{size:r.iconSize,color:o.color}),e&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.label,{color:o.color,fontSize:r.fontSize},d],children:u})]})}StatusIndicator.Dot=function i({status:n,size:e=8,animated:a=false,style:t}){return(0,_jsxRuntime.jsx)(StatusIndicator,{status:n,variant:"dot",animated:a,style:{width:e,height:e,borderRadius:e/2,...t}})};StatusIndicator.Badge=function i({status:n,label:e,size:a="medium",showIcon:t=true,style:l}){return(0,_jsxRuntime.jsx)(StatusIndicator,{status:n,variant:"badge",size:a,showIcon:t,showLabel:true,label:e,style:l})};StatusIndicator.Text=function i({status:n,label:e,size:a="medium",style:t}){return(0,_jsxRuntime.jsx)(StatusIndicator,{status:n,variant:"text",size:a,label:e,labelStyle:t})};const styles=_reactNative.StyleSheet.create({iconContainer:{flexDirection:"row",alignItems:"center",gap:4},label:{fontWeight:"500"},dot:{borderRadius:100},text:{fontWeight:"600"},badge:{flexDirection:"row",alignItems:"center",gap:4,borderRadius:4},badgeLabel:{fontWeight:"600",marginLeft:4}});

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

@@ -1,97 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StorageTypeBadge = StorageTypeBadge;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _nightTheme = require("../night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function StorageTypeBadge({
-  type,
-  size = "small",
-  showIcon = true
-}) {
-  const isSmall = size === "small";
-  const getStorageColor = () => {
-    switch (type) {
-      case "async":
-        return _nightTheme.night.color.textSecondary;
-      case "mmkv":
-        return _gameUIColors.buoyColors.success;
-      case "secure":
-        return _gameUIColors.buoyColors.warning;
-      default:
-        return _nightTheme.night.color.textTertiary;
-    }
-  };
-  const getStorageText = () => {
-    switch (type) {
-      case "async":
-        return "ASYNC";
-      case "mmkv":
-        return "MMKV";
-      case "secure":
-        return "SECURE";
-    }
-  };
-  const getStorageIcon = () => {
-    const color = getStorageColor();
-    const iconSize = isSmall ? 10 : 12;
-    switch (type) {
-      case "async":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Database, {
-          size: iconSize,
-          color: color
-        });
-      case "mmkv":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.HardDrive, {
-          size: iconSize,
-          color: color
-        });
-      case "secure":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Lock, {
-          size: iconSize,
-          color: color
-        });
-      default:
-        return null;
-    }
-  };
-  const backgroundColor = getStorageColor() + "1A";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.badge, {
-      backgroundColor
-    }, isSmall && styles.smallBadge],
-    children: [showIcon && getStorageIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.text, {
-        color: getStorageColor()
-      }, isSmall && styles.smallText],
-      children: getStorageText()
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  smallBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5
-  },
-  smallText: {
-    fontSize: 9
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.StorageTypeBadge=StorageTypeBadge;var _reactNative=require("react-native");var _index=require("../../icons/index.js");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _nightTheme=require("../night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");function StorageTypeBadge({type:e,size:o="small",showIcon:n=true}){const r=o==="small";const t=()=>{switch(e){case"async":return _nightTheme.night.color.textSecondary;case"mmkv":return _gameUIColors.buoyColors.success;case"secure":return _gameUIColors.buoyColors.warning;default:return _nightTheme.night.color.textTertiary}};const c=()=>{switch(e){case"async":return"ASYNC";case"mmkv":return"MMKV";case"secure":return"SECURE"}};const i=()=>{const s=t();const a=r?10:12;switch(e){case"async":return(0,_jsxRuntime.jsx)(_index.Database,{size:a,color:s});case"mmkv":return(0,_jsxRuntime.jsx)(_index.HardDrive,{size:a,color:s});case"secure":return(0,_jsxRuntime.jsx)(_index.Lock,{size:a,color:s});default:return null}};const l=t()+"1A";return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.badge,{backgroundColor:l},r&&styles.smallBadge],children:[n&&i(),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:t()},r&&styles.smallText],children:c()})]})}const styles=_reactNative.StyleSheet.create({badge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,flexDirection:"row",alignItems:"center",gap:4},smallBadge:{paddingHorizontal:6,paddingVertical:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5},smallText:{fontSize:9}});

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

@@ -1,102 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TabSelector = TabSelector;
-var _reactNative = require("react-native");
-var _nightTheme = require("../night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Header tab strip — the night segmented control (see ui/night): `#050505`
- * track, `#161618` thumb, accent underline glow under the active label.
- *
- * Same props API it has always had, so every tool header that mounts it got
- * the night look in one shared edit. Visually identical to `NightSegmented`
- * at its compact size — new night-native code should prefer that primitive;
- * this component exists so existing consumers convert without a code change.
- */
-function TabSelector({
-  tabs,
-  activeTab,
-  onTabChange,
-  testIDPrefix
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: tabs.map(tab => {
-      const active = activeTab === tab.key;
-      const disabled = !!tab.disabled && !active;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        "sentry-label": "ignore user interaction",
-        testID: testIDPrefix ? `${testIDPrefix}-${tab.key}` : undefined,
-        accessibilityRole: "tab",
-        accessibilityState: {
-          selected: active,
-          disabled
-        },
-        accessibilityLabel: tab.label,
-        accessibilityHint: `View ${tab.label.toLowerCase()}`,
-        disabled: disabled,
-        onPress: () => onTabChange(tab.key),
-        style: [styles.tabButton, active && styles.tabButtonActive, disabled && styles.tabButtonDisabled],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.tabButtonText, active && styles.tabButtonTextActive, disabled && styles.tabButtonTextDisabled],
-          children: tab.label
-        }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.underline
-        }) : null]
-      }, tab.key);
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    backgroundColor: _nightTheme.night.color.bg,
-    borderRadius: _nightTheme.night.radius.row,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border,
-    padding: 3
-  },
-  tabButton: {
-    flex: 1,
-    paddingVertical: 5,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: _nightTheme.night.radius.segment
-  },
-  tabButtonActive: {
-    backgroundColor: _nightTheme.night.color.surfaceElevated
-  },
-  tabButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: _nightTheme.night.color.textSecondary
-  },
-  tabButtonTextActive: {
-    fontWeight: "600",
-    color: _nightTheme.night.color.text
-  },
-  tabButtonDisabled: {
-    opacity: 0.45
-  },
-  tabButtonTextDisabled: {
-    color: _nightTheme.night.color.textTertiary
-  },
-  underline: {
-    position: "absolute",
-    bottom: 1.5,
-    width: 20,
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: _nightTheme.night.color.accent,
-    shadowColor: _nightTheme.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 6
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.TabSelector=TabSelector;var _reactNative=require("react-native");var _nightTheme=require("../night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");function TabSelector({tabs:r,activeTab:n,onTabChange:a,testIDPrefix:i}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:r.map(e=>{const t=n===e.key;const o=!!e.disabled&&!t;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore user interaction",testID:i?`${i}-${e.key}`:void 0,accessibilityRole:"tab",accessibilityState:{selected:t,disabled:o},accessibilityLabel:e.label,accessibilityHint:`View ${e.label.toLowerCase()}`,disabled:o,onPress:()=>a(e.key),style:[styles.tabButton,t&&styles.tabButtonActive,o&&styles.tabButtonDisabled],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.tabButtonText,t&&styles.tabButtonTextActive,o&&styles.tabButtonTextDisabled],children:e.label}),t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.underline}):null]},e.key)})})}const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",backgroundColor:_nightTheme.night.color.bg,borderRadius:_nightTheme.night.radius.row,borderWidth:1,borderColor:_nightTheme.night.color.border,padding:3},tabButton:{flex:1,paddingVertical:5,alignItems:"center",justifyContent:"center",borderRadius:_nightTheme.night.radius.segment},tabButtonActive:{backgroundColor:_nightTheme.night.color.surfaceElevated},tabButtonText:{fontSize:12,fontWeight:"500",color:_nightTheme.night.color.textSecondary},tabButtonTextActive:{fontWeight:"600",color:_nightTheme.night.color.text},tabButtonDisabled:{opacity:.45},tabButtonTextDisabled:{color:_nightTheme.night.color.textTertiary},underline:{position:"absolute",bottom:1.5,width:20,height:2,borderRadius:1,backgroundColor:_nightTheme.night.color.accent,shadowColor:_nightTheme.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:6}});