@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,227 +1 @@
-"use strict";
-
-import { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, Animated } from "react-native";
-import { CheckCircle, XCircle, AlertCircle, Clock, Info } from "../../icons/index.js";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const statusConfig = {
-  success: {
-    color: gameUIColors.success,
-    icon: CheckCircle,
-    label: "Success",
-    bgColor: gameUIColors.success + "20"
-  },
-  error: {
-    color: gameUIColors.error,
-    icon: XCircle,
-    label: "Error",
-    bgColor: gameUIColors.error + "20"
-  },
-  warning: {
-    color: gameUIColors.warning,
-    icon: AlertCircle,
-    label: "Warning",
-    bgColor: gameUIColors.warning + "20"
-  },
-  pending: {
-    color: gameUIColors.warning,
-    icon: Clock,
-    label: "Pending",
-    bgColor: gameUIColors.warning + "20"
-  },
-  info: {
-    color: gameUIColors.primary,
-    icon: Info,
-    label: "Info",
-    bgColor: gameUIColors.primary + "20"
-  }
-};
-export function StatusIndicator({
-  status,
-  size = "medium",
-  showLabel = false,
-  label,
-  showIcon = true,
-  animated = false,
-  style,
-  labelStyle,
-  variant = "icon"
-}) {
-  const pulseAnim = useRef(new 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;
-  useEffect(() => {
-    if (animated && status === "pending") {
-      const animation = Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
-        toValue: 1.2,
-        duration: 600,
-        useNativeDriver: true
-      }), Animated.timing(pulseAnim, {
-        toValue: 1,
-        duration: 600,
-        useNativeDriver: true
-      })]));
-      animation.start();
-      return () => animation.stop();
-    }
-  }, [animated, status, pulseAnim]);
-  if (variant === "dot") {
-    return /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-      style: [styles.text, {
-        color: config.color,
-        fontSize: sizes.fontSize
-      }, labelStyle],
-      children: displayLabel
-    });
-  }
-  if (variant === "badge") {
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.badge, {
-        backgroundColor: config.bgColor,
-        paddingHorizontal: sizes.padding,
-        paddingVertical: sizes.padding / 2
-      }, style],
-      children: [showIcon && /*#__PURE__*/_jsx(Icon, {
-        size: sizes.iconSize,
-        color: config.color
-      }), showLabel && /*#__PURE__*/_jsx(Text, {
-        style: [styles.badgeLabel, {
-          color: config.color,
-          fontSize: sizes.fontSize
-        }, !showIcon && {
-          marginLeft: 0
-        }, labelStyle],
-        children: displayLabel
-      })]
-    });
-  }
-
-  // Default icon variant
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.iconContainer, {
-      transform: animated && status === "pending" ? [{
-        scale: pulseAnim
-      }] : []
-    }, style],
-    children: [/*#__PURE__*/_jsx(Icon, {
-      size: sizes.iconSize,
-      color: config.color
-    }), showLabel && /*#__PURE__*/_jsx(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__*/_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__*/_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__*/_jsx(StatusIndicator, {
-    status: status,
-    variant: "text",
-    size: size,
-    label: label,
-    labelStyle: style
-  });
-};
-const styles = 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";import{useEffect as w,useRef as y}from"react";import{View as I,Text as S,StyleSheet as V,Animated as s}from"react-native";import{CheckCircle as D,XCircle as v,AlertCircle as L,Clock as j,Info as k}from"../../icons/index.js";import{gameUIColors as o}from"../gameUI/index.js";import{jsx as t,jsxs as h}from"react/jsx-runtime";const R={success:{color:o.success,icon:D,label:"Success",bgColor:o.success+"20"},error:{color:o.error,icon:v,label:"Error",bgColor:o.error+"20"},warning:{color:o.warning,icon:L,label:"Warning",bgColor:o.warning+"20"},pending:{color:o.warning,icon:j,label:"Pending",bgColor:o.warning+"20"},info:{color:o.primary,icon:k,label:"Info",bgColor:o.primary+"20"}};export function StatusIndicator({status:n,size:a="medium",showLabel:e=false,label:c,showIcon:l=true,animated:d=false,style:f,labelStyle:m,variant:b="icon"}){const u=y(new s.Value(1)).current;const i=R[n];const x={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=x[a];const z=i.icon;const p=c||i.label;w(()=>{if(d&&n==="pending"){const C=s.loop(s.sequence([s.timing(u,{toValue:1.2,duration:600,useNativeDriver:true}),s.timing(u,{toValue:1,duration:600,useNativeDriver:true})]));C.start();return()=>C.stop()}},[d,n,u]);if(b==="dot"){return t(s.View,{style:[g.dot,{width:r.dotSize,height:r.dotSize,backgroundColor:i.color,transform:d&&n==="pending"?[{scale:u}]:[]},f]})}if(b==="text"){return t(S,{style:[g.text,{color:i.color,fontSize:r.fontSize},m],children:p})}if(b==="badge"){return h(I,{style:[g.badge,{backgroundColor:i.bgColor,paddingHorizontal:r.padding,paddingVertical:r.padding/2},f],children:[l&&t(z,{size:r.iconSize,color:i.color}),e&&t(S,{style:[g.badgeLabel,{color:i.color,fontSize:r.fontSize},!l&&{marginLeft:0},m],children:p})]})}return h(s.View,{style:[g.iconContainer,{transform:d&&n==="pending"?[{scale:u}]:[]},f],children:[t(z,{size:r.iconSize,color:i.color}),e&&t(S,{style:[g.label,{color:i.color,fontSize:r.fontSize},m],children:p})]})}StatusIndicator.Dot=function n({status:a,size:e=8,animated:c=false,style:l}){return t(StatusIndicator,{status:a,variant:"dot",animated:c,style:{width:e,height:e,borderRadius:e/2,...l}})};StatusIndicator.Badge=function n({status:a,label:e,size:c="medium",showIcon:l=true,style:d}){return t(StatusIndicator,{status:a,variant:"badge",size:c,showIcon:l,showLabel:true,label:e,style:d})};StatusIndicator.Text=function n({status:a,label:e,size:c="medium",style:l}){return t(StatusIndicator,{status:a,variant:"text",size:c,label:e,labelStyle:l})};const g=V.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/module/ui/components/StorageTypeBadge.js

@@ -1,93 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { Database, Lock, HardDrive } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { night } from "../night/nightTheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function StorageTypeBadge({
-  type,
-  size = "small",
-  showIcon = true
-}) {
-  const isSmall = size === "small";
-  const getStorageColor = () => {
-    switch (type) {
-      case "async":
-        return night.color.textSecondary;
-      case "mmkv":
-        return buoyColors.success;
-      case "secure":
-        return buoyColors.warning;
-      default:
-        return 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__*/_jsx(Database, {
-          size: iconSize,
-          color: color
-        });
-      case "mmkv":
-        return /*#__PURE__*/_jsx(HardDrive, {
-          size: iconSize,
-          color: color
-        });
-      case "secure":
-        return /*#__PURE__*/_jsx(Lock, {
-          size: iconSize,
-          color: color
-        });
-      default:
-        return null;
-    }
-  };
-  const backgroundColor = getStorageColor() + "1A";
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.badge, {
-      backgroundColor
-    }, isSmall && styles.smallBadge],
-    children: [showIcon && getStorageIcon(), /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: getStorageColor()
-      }, isSmall && styles.smallText],
-      children: getStorageText()
-    })]
-  });
-}
-const styles = 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";import{View as x,Text as S,StyleSheet as f}from"react-native";import{Database as p,Lock as y,HardDrive as h}from"../../icons/index.js";import{buoyColors as n}from"../gameUI/constants/gameUIColors.js";import{night as l}from"../night/nightTheme.js";import{jsx as e,jsxs as z}from"react/jsx-runtime";export function StorageTypeBadge({type:t,size:i="small",showIcon:u=true}){const o=i==="small";const s=()=>{switch(t){case"async":return l.color.textSecondary;case"mmkv":return n.success;case"secure":return n.warning;default:return l.color.textTertiary}};const m=()=>{switch(t){case"async":return"ASYNC";case"mmkv":return"MMKV";case"secure":return"SECURE"}};const g=()=>{const a=s();const c=o?10:12;switch(t){case"async":return e(p,{size:c,color:a});case"mmkv":return e(h,{size:c,color:a});case"secure":return e(y,{size:c,color:a});default:return null}};const d=s()+"1A";return z(x,{style:[r.badge,{backgroundColor:d},o&&r.smallBadge],children:[u&&g(),e(S,{style:[r.text,{color:s()},o&&r.smallText],children:m()})]})}const r=f.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/module/ui/components/TabSelector.js

@@ -1,98 +1 @@
-"use strict";
-
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { night } from "../night/nightTheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "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.
- */
-export function TabSelector({
-  tabs,
-  activeTab,
-  onTabChange,
-  testIDPrefix
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: tabs.map(tab => {
-      const active = activeTab === tab.key;
-      const disabled = !!tab.disabled && !active;
-      return /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
-          style: [styles.tabButtonText, active && styles.tabButtonTextActive, disabled && styles.tabButtonTextDisabled],
-          children: tab.label
-        }), active ? /*#__PURE__*/_jsx(View, {
-          style: styles.underline
-        }) : null]
-      }, tab.key);
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    backgroundColor: night.color.bg,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 3
-  },
-  tabButton: {
-    flex: 1,
-    paddingVertical: 5,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: night.radius.segment
-  },
-  tabButtonActive: {
-    backgroundColor: night.color.surfaceElevated
-  },
-  tabButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  tabButtonTextActive: {
-    fontWeight: "600",
-    color: night.color.text
-  },
-  tabButtonDisabled: {
-    opacity: 0.45
-  },
-  tabButtonTextDisabled: {
-    color: night.color.textTertiary
-  },
-  underline: {
-    position: "absolute",
-    bottom: 1.5,
-    width: 20,
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: night.color.accent,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 6
-  }
-});
+"use strict";import{View as n,Text as b,TouchableOpacity as u,StyleSheet as y}from"react-native";import{night as t}from"../night/nightTheme.js";import{jsx as a,jsxs as h}from"react/jsx-runtime";export function TabSelector({tabs:s,activeTab:c,onTabChange:d,testIDPrefix:l}){return a(n,{style:o.container,children:s.map(e=>{const i=c===e.key;const r=!!e.disabled&&!i;return h(u,{"sentry-label":"ignore user interaction",testID:l?`${l}-${e.key}`:void 0,accessibilityRole:"tab",accessibilityState:{selected:i,disabled:r},accessibilityLabel:e.label,accessibilityHint:`View ${e.label.toLowerCase()}`,disabled:r,onPress:()=>d(e.key),style:[o.tabButton,i&&o.tabButtonActive,r&&o.tabButtonDisabled],children:[a(b,{style:[o.tabButtonText,i&&o.tabButtonTextActive,r&&o.tabButtonTextDisabled],children:e.label}),i?a(n,{style:o.underline}):null]},e.key)})})}const o=y.create({container:{flexDirection:"row",backgroundColor:t.color.bg,borderRadius:t.radius.row,borderWidth:1,borderColor:t.color.border,padding:3},tabButton:{flex:1,paddingVertical:5,alignItems:"center",justifyContent:"center",borderRadius:t.radius.segment},tabButtonActive:{backgroundColor:t.color.surfaceElevated},tabButtonText:{fontSize:12,fontWeight:"500",color:t.color.textSecondary},tabButtonTextActive:{fontWeight:"600",color:t.color.text},tabButtonDisabled:{opacity:.45},tabButtonTextDisabled:{color:t.color.textTertiary},underline:{position:"absolute",bottom:1.5,width:20,height:2,borderRadius:1,backgroundColor:t.color.accent,shadowColor:t.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:6}});

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

@@ -1,138 +1 @@
-"use strict";
-
-import { useEffect, useState } from "react";
-import { Text } from "react-native";
-import { gameUIColors } from "../gameUI/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function TimeDisplay({
-  time,
-  format = "relative",
-  updateInterval = 60000,
-  style,
-  showSeconds = false,
-  prefix
-}) {
-  const [displayTime, setDisplayTime] = useState("");
-  const formatRelativeTime = date => {
-    const now = Date.now();
-    const diff = now - date.getTime();
-    const seconds = Math.floor(diff / 1000);
-    if (seconds < 60) return "just now";
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60) return `${minutes}m ago`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24) return `${hours}h ago`;
-    const days = Math.floor(hours / 24);
-    if (days < 7) return `${days}d ago`;
-    const weeks = Math.floor(days / 7);
-    if (weeks < 4) return `${weeks}w ago`;
-    const months = Math.floor(days / 30);
-    if (months < 12) return `${months}mo ago`;
-    const years = Math.floor(days / 365);
-    return `${years}y ago`;
-  };
-  const formatAbsoluteTime = (date, withSeconds) => {
-    if (withSeconds) {
-      return date.toLocaleTimeString();
-    }
-    return date.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-  };
-  const formatDuration = ms => {
-    if (ms < 1000) return `${ms}ms`;
-    const seconds = Math.floor(ms / 1000);
-    if (seconds < 60) return `${seconds}s`;
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    if (minutes < 60) {
-      return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
-    }
-    const hours = Math.floor(minutes / 60);
-    const remainingMinutes = minutes % 60;
-    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
-  };
-  useEffect(() => {
-    const formatMixed = date => {
-      const now = Date.now();
-      const diff = now - date.getTime();
-      const hours = Math.floor(diff / (1000 * 60 * 60));
-      if (hours < 24) {
-        return formatRelativeTime(date);
-      }
-      return date.toLocaleDateString([], {
-        month: "short",
-        day: "numeric",
-        year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined
-      });
-    };
-    const updateTime = () => {
-      if (format === "duration" && typeof time === "number") {
-        setDisplayTime(formatDuration(time));
-        return;
-      }
-      const date = new Date(time);
-      switch (format) {
-        case "relative":
-          setDisplayTime(formatRelativeTime(date));
-          break;
-        case "absolute":
-          setDisplayTime(formatAbsoluteTime(date, showSeconds));
-          break;
-        case "mixed":
-          setDisplayTime(formatMixed(date));
-          break;
-        default:
-          setDisplayTime(formatRelativeTime(date));
-      }
-    };
-    updateTime();
-    if (format === "relative" && updateInterval > 0) {
-      const interval = setInterval(updateTime, updateInterval);
-      return () => clearInterval(interval);
-    }
-  }, [time, format, updateInterval, showSeconds]);
-  return /*#__PURE__*/_jsx(Text, {
-    style: [defaultStyles.text, style],
-    children: prefix ? `${prefix} ${displayTime}` : displayTime
-  });
-}
-TimeDisplay.Timestamp = function Timestamp({
-  time,
-  style
-}) {
-  return /*#__PURE__*/_jsx(TimeDisplay, {
-    time: time,
-    format: "mixed",
-    style: style
-  });
-};
-TimeDisplay.Duration = function Duration({
-  milliseconds,
-  style
-}) {
-  return /*#__PURE__*/_jsx(TimeDisplay, {
-    time: milliseconds,
-    format: "duration",
-    style: style
-  });
-};
-TimeDisplay.Relative = function Relative({
-  time,
-  updateInterval = 60000,
-  style
-}) {
-  return /*#__PURE__*/_jsx(TimeDisplay, {
-    time: time,
-    format: "relative",
-    updateInterval: updateInterval,
-    style: style
-  });
-};
-const defaultStyles = {
-  text: {
-    fontSize: 12,
-    color: gameUIColors.tertiary
-  }
-};
+"use strict";import{useEffect as v,useState as w}from"react";import{Text as x}from"react-native";import{gameUIColors as b}from"../gameUI/index.js";import{jsx as l}from"react/jsx-runtime";export function TimeDisplay({time:a,format:o="relative",updateInterval:n=6e4,style:m,showSeconds:g=false,prefix:d}){const[$,f]=w("");const h=r=>{const e=Date.now();const t=e-r.getTime();const u=Math.floor(t/1e3);if(u<60)return"just now";const i=Math.floor(u/60);if(i<60)return`${i}m ago`;const s=Math.floor(i/60);if(s<24)return`${s}h ago`;const c=Math.floor(s/24);if(c<7)return`${c}d ago`;const y=Math.floor(c/7);if(y<4)return`${y}w ago`;const M=Math.floor(c/30);if(M<12)return`${M}mo ago`;const D=Math.floor(c/365);return`${D}y ago`};const T=(r,e)=>{if(e){return r.toLocaleTimeString()}return r.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})};const p=r=>{if(r<1e3)return`${r}ms`;const e=Math.floor(r/1e3);if(e<60)return`${e}s`;const t=Math.floor(e/60);const u=e%60;if(t<60){return u>0?`${t}m ${u}s`:`${t}m`}const i=Math.floor(t/60);const s=t%60;return s>0?`${i}h ${s}m`:`${i}h`};v(()=>{const r=t=>{const u=Date.now();const i=u-t.getTime();const s=Math.floor(i/(1e3*60*60));if(s<24){return h(t)}return t.toLocaleDateString([],{month:"short",day:"numeric",year:t.getFullYear()!==new Date().getFullYear()?"numeric":void 0})};const e=()=>{if(o==="duration"&&typeof a==="number"){f(p(a));return}const t=new Date(a);switch(o){case"relative":f(h(t));break;case"absolute":f(T(t,g));break;case"mixed":f(r(t));break;default:f(h(t))}};e();if(o==="relative"&&n>0){const t=setInterval(e,n);return()=>clearInterval(t)}},[a,o,n,g]);return l(x,{style:[S.text,m],children:d?`${d} ${$}`:$})}TimeDisplay.Timestamp=function a({time:o,style:n}){return l(TimeDisplay,{time:o,format:"mixed",style:n})};TimeDisplay.Duration=function a({milliseconds:o,style:n}){return l(TimeDisplay,{time:o,format:"duration",style:n})};TimeDisplay.Relative=function a({time:o,updateInterval:n=6e4,style:m}){return l(TimeDisplay,{time:o,format:"relative",updateInterval:n,style:m})};const S={text:{fontSize:12,color:b.tertiary}};

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

@@ -1,112 +1 @@
-"use strict";
-
-/**
- * ToggleRow — a labeled switch row for a tool's settings surface.
- *
- * Every settings screen (impersonate, image-overlay, highlight-updates,
- * perf-monitor, scenarios, storage, ask-buoy) drew its own `toggleRow` +
- * `<Switch>` pair with the same night track colors. The native switch stays
- * (a custom control would be a visible design change); the row chrome,
- * the label/description stack and the accent/warning tone are shared.
- *
- * - `variant="card"`  — an elevated bordered pill row (image-overlay)
- * - `variant="plain"` — a bare list row for use inside a card (impersonate)
- */
-
-import { StyleSheet, Switch, Text, View } from "react-native";
-import { night } from "../night/nightTheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ToggleRow({
-  label,
-  description,
-  value,
-  onValueChange,
-  disabled = false,
-  tone = "accent",
-  accessory,
-  variant = "card",
-  emphasizeLabel = false,
-  testID,
-  style
-}) {
-  const onColor = tone === "warning" ? night.color.warning : night.color.accent;
-  const isCard = variant === "card";
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.row, isCard ? styles.rowCard : styles.rowPlain, style],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.info,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.header,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [isCard ? styles.labelCard : styles.labelPlain, emphasizeLabel && {
-            color: onColor
-          }],
-          numberOfLines: 2,
-          children: label
-        }), accessory]
-      }), description ? /*#__PURE__*/_jsx(Text, {
-        style: styles.description,
-        children: description
-      }) : null]
-    }), /*#__PURE__*/_jsx(Switch, {
-      value: value,
-      onValueChange: onValueChange,
-      disabled: disabled,
-      testID: testID,
-      accessibilityLabel: label,
-      trackColor: isCard ? {
-        false: night.color.surfaceElevated,
-        true: onColor
-      } : {
-        false: night.color.border,
-        true: `${onColor}50`
-      },
-      thumbColor: isCard ? undefined : value ? onColor : night.color.knob
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  rowCard: {
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  rowPlain: {
-    paddingVertical: 12,
-    paddingHorizontal: 12
-  },
-  info: {
-    flex: 1,
-    marginRight: 12
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flexWrap: "wrap"
-  },
-  labelCard: {
-    fontSize: 13,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  labelPlain: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: night.color.text
-  },
-  description: {
-    fontSize: 12,
-    color: night.color.textTertiary,
-    lineHeight: 16,
-    marginTop: 3
-  }
-});
+"use strict";import{StyleSheet as m,Switch as C,Text as s,View as l}from"react-native";import{night as e}from"../night/nightTheme.js";import{jsx as n,jsxs as i}from"react/jsx-runtime";export function ToggleRow({label:a,description:c,value:d,onValueChange:f,disabled:g=false,tone:h="accent",accessory:b,variant:u="card",emphasizeLabel:w=false,testID:p,style:x}){const o=h==="warning"?e.color.warning:e.color.accent;const t=u==="card";return i(l,{style:[r.row,t?r.rowCard:r.rowPlain,x],children:[i(l,{style:r.info,children:[i(l,{style:r.header,children:[n(s,{style:[t?r.labelCard:r.labelPlain,w&&{color:o}],numberOfLines:2,children:a}),b]}),c?n(s,{style:r.description,children:c}):null]}),n(C,{value:d,onValueChange:f,disabled:g,testID:p,accessibilityLabel:a,trackColor:t?{false:e.color.surfaceElevated,true:o}:{false:e.color.border,true:`${o}50`},thumbColor:t?void 0:d?o:e.color.knob})]})}const r=m.create({row:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},rowCard:{backgroundColor:e.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:e.color.border,paddingHorizontal:12,paddingVertical:8},rowPlain:{paddingVertical:12,paddingHorizontal:12},info:{flex:1,marginRight:12},header:{flexDirection:"row",alignItems:"center",gap:8,flexWrap:"wrap"},labelCard:{fontSize:13,fontWeight:"500",color:e.color.textSecondary},labelPlain:{fontSize:14,fontWeight:"500",color:e.color.text},description:{fontSize:12,color:e.color.textTertiary,lineHeight:16,marginTop:3}});