@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/numbers/__stories__/RollingNumber.stories.js

@@ -0,0 +1,1008 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { Easing } from 'react-native-reanimated';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons/Icon';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { ProgressBar } from '../../visualizations/ProgressBar';
+import { RollingNumber } from '../RollingNumber';
+import { DefaultRollingNumberAffixSection } from '../RollingNumber/DefaultRollingNumberAffixSection';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fonts = ['display1', 'display2', 'display3', 'title1', 'title2', 'title3', 'title4', 'headline', 'body', 'label1', 'label2', 'caption', 'legal'];
+const useTestValues = () => {
+  const values = [98345.67, 91345.67, 123450.123, 1234512.88];
+  const prefixes = ['+', '-', ''];
+  const suffixes = [' BTC', ' ETH', ''];
+  const iconPrefixes = [/*#__PURE__*/_jsx(Icon, {
+    name: "arrowUp",
+    size: "l"
+  }, "arrowUp"), /*#__PURE__*/_jsx(Icon, {
+    name: "arrowDown",
+    size: "l"
+  }, "arrowDown"), /*#__PURE__*/_jsx(Icon, {
+    name: "arrowDown",
+    size: "l"
+  }, "arrowDown")];
+  const iconSuffixes = [/*#__PURE__*/_jsx(Icon, {
+    name: "arrowDown",
+    size: "l"
+  }, "arrowDown"), /*#__PURE__*/_jsx(Icon, {
+    name: "arrowUp",
+    size: "l"
+  }, "arrowUp"), null];
+  const [valIdx, setValIdx] = useState(0);
+  const onNext = () => {
+    setValIdx((valIdx + 1) % values.length);
+  };
+  return {
+    value: values[valIdx],
+    prefix: prefixes[valIdx],
+    suffix: suffixes[valIdx],
+    iconPrefix: iconPrefixes[valIdx],
+    iconSuffix: iconSuffixes[valIdx],
+    onNext
+  };
+};
+export const Examples = () => {
+  // Deterministic sequence of values and their corresponding differences
+  const values = [12345.67, 12425.32, 12391.02, 12550.87, 12345.67];
+  const differences = [0, 79.65, -34.3, 159.85, -205.2];
+  const [idx, setIdx] = useState(0);
+  const price = values[idx];
+  const difference = differences[idx];
+  const onNext = () => setIdx(i => (i + 1) % values.length);
+  const trendColor = difference >= 0 ? 'fgPositive' : 'fgNegative';
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Basic example"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      format: {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Portfolio Balance"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      accessibilityLabelPrefix: difference > 0 ? 'up ' : difference < 0 ? 'down ' : '',
+      color: trendColor,
+      font: "body",
+      format: {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      },
+      prefix: difference >= 0 ? /*#__PURE__*/_jsx(Icon, {
+        color: trendColor,
+        name: "diagonalUpArrow",
+        size: "xs"
+      }) : /*#__PURE__*/_jsx(Icon, {
+        color: trendColor,
+        name: "diagonalDownArrow",
+        size: "xs"
+      }),
+      styles: {
+        prefix: {
+          paddingRight: theme.space[1]
+        }
+      },
+      suffix: "(" + (Math.abs(difference) / price * 100).toFixed(2) + "%)",
+      value: Math.abs(difference)
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "BTC Conversion"
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "fgPrimary",
+        name: "arrowsVertical",
+        size: "xs",
+        testID: "swap-icon"
+      }), /*#__PURE__*/_jsx(RollingNumber, {
+        color: "fgPrimary",
+        fontFamily: "body",
+        fontSize: "body",
+        fontWeight: "body",
+        format: {
+          minimumFractionDigits: 8,
+          maximumFractionDigits: 8
+        },
+        value: price / 150000
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+const FontCustomization = () => {
+  const [price, setPrice] = React.useState(9876.54);
+  const onNext = () => setPrice(p => Math.max(0, Math.round((p + (Math.random() - 0.5) * 100) * 100) / 100));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Font sizes, weights, and line heights"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      fontSize: "display3",
+      fontWeight: "title3",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      fontSize: "title3",
+      fontWeight: "headline",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      fontSize: "body",
+      fontWeight: "body",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      lineHeight: "display3",
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "mono"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      mono: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+const Format = () => {
+  const values = [98345.67, 91345.67, 123450.123, 1234512.88];
+  const [idx, setIdx] = React.useState(0);
+  const onNext = () => setIdx((idx + 1) % values.length);
+  const value = values[idx];
+  const format = {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 5,
+    notation: 'compact'
+  };
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Compact number with currency sign"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      font: "display3",
+      format: format,
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Number without grouping"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      font: "display3",
+      format: {
+        useGrouping: false
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+export const PrefixAndSuffix = () => {
+  const {
+    value,
+    prefix,
+    suffix,
+    iconPrefix,
+    iconSuffix,
+    onNext
+  } = useTestValues();
+  const format = {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 5
+  };
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Simple text prefix and suffix"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      format: format,
+      prefix: "+",
+      suffix: " BTC",
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Dynamic prefix and suffix"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      format: format,
+      prefix: prefix,
+      suffix: suffix,
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "ReactNode prefix and suffix"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      format: format,
+      prefix: iconPrefix,
+      suffix: iconSuffix,
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Suffix wraps to second line"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display1",
+      format: format,
+      styles: {
+        fraction: {
+          paddingRight: theme.space[2]
+        }
+      },
+      suffix: "BTC",
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Suffix no wrapping"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display1",
+      format: format,
+      styles: {
+        visibleContent: {
+          flexWrap: 'nowrap'
+        },
+        fraction: {
+          paddingRight: theme.space[2]
+        }
+      },
+      suffix: "BTC",
+      value: value
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+export const ColorAndTransition = () => {
+  const [price, setPrice] = React.useState(555.55);
+  const onNext = () => setPrice(p => Math.max(0, Math.round((p + (Math.random() - 0.5) * 50) * 100) / 100));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Color pulse and custom transition"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      transition: {
+        color: {
+          type: 'timing',
+          duration: durations.moderate3,
+          easing: Easing.inOut(Easing.quad)
+        },
+        y: {
+          type: 'timing',
+          duration: durations.moderate3,
+          easing: Easing.in(Easing.quad)
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      color: "accentBoldBlue",
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      transition: {
+        color: {
+          type: 'timing',
+          duration: durations.slow4,
+          easing: Easing.inOut(Easing.quad)
+        },
+        y: {
+          type: 'timing',
+          duration: durations.slow4,
+          easing: Easing.in(Easing.quad)
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Customize positive and negative change colors"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      negativePulseColor: "bgWarning",
+      positivePulseColor: "fgPrimary",
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Fast digits, slow color"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'EUR'
+      },
+      transition: {
+        y: {
+          type: 'timing',
+          duration: durations.fast1,
+          easing: Easing.bezier(...curves.enterFunctional)
+        },
+        color: {
+          type: 'timing',
+          duration: 5000,
+          easing: Easing.bezier(...curves.global)
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Springy digits"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      transition: {
+        y: {
+          type: 'spring',
+          stiffness: 1000,
+          damping: 24,
+          mass: 3,
+          overshootClamping: false
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Custom easings"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      transition: {
+        y: {
+          type: 'timing',
+          duration: durations.moderate2,
+          easing: Easing.bezier(...curves.enterExpressive)
+        },
+        color: {
+          type: 'timing',
+          duration: durations.slow1,
+          easing: Easing.bezier(...curves.exitFunctional)
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+const StyleOverrides = () => {
+  const [price, setPrice] = React.useState(12345.67);
+  const onNext = () => setPrice(p => Math.max(0, Math.round((p + (Math.random() - 0.5) * 200) * 100) / 100));
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Style overrides per section"
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "body",
+      children: "Note: currently we do not support overriding the text styles (color, font, etc.) for inidividual number sections in mobile. Text props are applied globally."
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      format: {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+        notation: 'compact'
+      },
+      prefix: "-",
+      styles: {
+        root: {
+          borderStyle: 'dashed',
+          borderColor: 'rgba(0,0,0,0.1)',
+          borderWidth: 1,
+          paddingVertical: 4,
+          paddingHorizontal: 8,
+          borderRadius: 8,
+          backgroundColor: theme.color.bgSecondaryWash
+        },
+        fraction: {
+          opacity: 0.2,
+          gap: 10
+        },
+        suffix: {
+          marginLeft: 10,
+          backgroundColor: theme.color.accentBoldYellow,
+          borderRadius: 8,
+          padding: 4
+        }
+      },
+      suffix: "BTC",
+      value: price
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+const Subscript = () => {
+  const values = [0.0000000001, 0.00009, 0.000012, 0.0000001, 0.000000001, 0.000000000000000000000011];
+  const [idx, setIdx] = React.useState(0);
+  const onNext = () => setIdx((idx + 1) % values.length);
+  const value = values[idx];
+  const format = {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 25
+  };
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Subscript for small decimals"
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: "Default:"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      font: "display3",
+      format: format,
+      value: value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: "With subscript:"
+    }), fonts.map(fontKey => /*#__PURE__*/_jsx(RollingNumber, {
+      enableSubscriptNotation: true,
+      font: fontKey,
+      format: format,
+      value: value
+    }, fontKey)), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+export const UserProvidedFormattedValue = () => {
+  const btcPrices = [{
+    value: 98765.43,
+    formattedValue: '¥98,765.43 BTC'
+  }, {
+    value: 931.42,
+    formattedValue: '$931.42 BTC'
+  }, {
+    value: 100890.56,
+    formattedValue: '¥100,890.56 BTC'
+  }, {
+    value: 149432.12,
+    formattedValue: '¥149,432.12 BTC'
+  }, {
+    value: 150321.23,
+    formattedValue: '¥150,321.23 BTC'
+  }];
+  const subscripts = [{
+    value: 0.0000000001,
+    formattedValue: '€0,0₉1',
+    accessibilityLabel: '€0.0000000001'
+  }, {
+    value: 0.00009,
+    formattedValue: '€0,0₄9',
+    accessibilityLabel: '€0.00009'
+  }, {
+    value: 0.000012,
+    formattedValue: '€0,0₄12',
+    accessibilityLabel: '€0.000012'
+  }, {
+    value: 0.0000001,
+    formattedValue: '€0,0₆1',
+    accessibilityLabel: '€0.0000001'
+  }, {
+    value: 0.000000000000000000000011,
+    formattedValue: '€0,0₂₂11',
+    accessibilityLabel: '€0.000000000000000000000011'
+  }];
+  const [idx, setIdx] = React.useState(0);
+  const onNext = () => setIdx((idx + 1) % 5);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "User provided formatted value"
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: "BTC prices"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      font: "display3",
+      formattedValue: btcPrices[idx].formattedValue,
+      prefix: /*#__PURE__*/_jsx(Icon, {
+        name: "crypto",
+        size: "l"
+      }),
+      value: btcPrices[idx].value
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: "Subscripts with comma as decimal separator"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      accessibilityLabel: subscripts[idx].accessibilityLabel,
+      font: "display3",
+      formattedValue: subscripts[idx].formattedValue,
+      value: subscripts[idx].value
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onNext,
+      children: "Next"
+    })]
+  });
+};
+const CounterExample = () => {
+  const [count, setCount] = React.useState(0);
+  const onInc = () => setCount(c => c + 1);
+  const onDec = () => setCount(c => Math.max(0, c - 1));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Counter"
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "decrement",
+        name: "minus",
+        onPress: onDec
+      }), /*#__PURE__*/_jsx(RollingNumber, {
+        colorPulseOnUpdate: true,
+        font: "display1",
+        format: {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0
+        },
+        value: count
+      }), /*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "increment",
+        name: "add",
+        onPress: onInc
+      })]
+    })]
+  });
+};
+const CountDownExample = () => {
+  const pad = n => String(n).padStart(2, '0');
+  const totalSeconds = 5 * 60;
+  const [seconds, setSeconds] = React.useState(totalSeconds);
+  const [running, setRunning] = React.useState(false);
+  React.useEffect(() => {
+    if (!running) return;
+    const id = setInterval(() => {
+      setSeconds(prev => {
+        if (prev <= 1) {
+          clearInterval(id);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(id);
+  }, [running]);
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  const formatted = pad(minutes) + ":" + pad(secs);
+  const onReset = () => setSeconds(totalSeconds);
+  const progress = Math.max(0, Math.min(1, (totalSeconds - seconds) / totalSeconds));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Countdown clock"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      accessibilityLiveRegion: "none",
+      font: "display3",
+      formattedValue: formatted,
+      value: seconds
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: () => setRunning(r => !r),
+        children: running ? 'Pause' : 'Start'
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: onReset,
+        children: "Reset"
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Countdown with progress"
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(ProgressBar, {
+        progress: progress
+      }), /*#__PURE__*/_jsx(RollingNumber, {
+        accessibilityLiveRegion: "none",
+        font: "body",
+        format: {
+          style: 'percent',
+          maximumFractionDigits: 0
+        },
+        prefix: "Elapsed: ",
+        value: progress
+      })]
+    })]
+  });
+};
+const SubscriptionPriceExample = () => {
+  const [yearly, setYearly] = React.useState(false);
+  const price = yearly ? 199 : 19;
+  const suffix = yearly ? '/yr' : '/mo';
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(RollingNumber, {
+      colorPulseOnUpdate: true,
+      RollingNumberAffixSectionComponent: props => /*#__PURE__*/_jsx(DefaultRollingNumberAffixSection, _extends({}, props, {
+        textProps: {
+          font: 'title1'
+        }
+      })),
+      accessibilityLabel: "$" + price + " " + (suffix === '/yr' ? 'yearly' : 'monthly'),
+      font: "display1",
+      format: {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      },
+      styles: {
+        suffix: {
+          alignItems: 'flex-end',
+          paddingBottom: theme.space[1],
+          opacity: 0.5
+        }
+      },
+      suffix: suffix,
+      transition: {
+        y: {
+          type: 'spring',
+          stiffness: 80,
+          damping: 24,
+          mass: 3
+        }
+      },
+      value: price
+    }), /*#__PURE__*/_jsx(HStack, {
+      gap: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        onPress: () => setYearly(v => !v),
+        children: yearly ? 'Switch to monthly' : 'Switch to yearly'
+      })
+    })]
+  });
+};
+const StatisticsExample = () => {
+  const [views, setViews] = useState(1234567);
+  const [likes, setLikes] = useState(89432);
+  const [shares, setShares] = useState(12789);
+  const [downloads, setDownloads] = useState(567890);
+  const simulateActivity = () => {
+    setViews(v => v + Math.floor(Math.random() * 1000));
+    setLikes(l => l + Math.floor(Math.random() * 200));
+    setShares(s => s + Math.floor(Math.random() * 100));
+    setDownloads(d => d + Math.floor(Math.random() * 500));
+  };
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Social Media Statistics"
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(RollingNumber, {
+          colorPulseOnUpdate: true,
+          font: "title1",
+          format: {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+            minimumFractionDigits: 1
+          },
+          positivePulseColor: "accentBoldBlue",
+          value: views
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Views"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(RollingNumber, {
+          colorPulseOnUpdate: true,
+          font: "title1",
+          format: {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+            minimumFractionDigits: 1
+          },
+          positivePulseColor: "accentBoldRed",
+          prefix: /*#__PURE__*/_jsx(Icon, {
+            color: "accentBoldRed",
+            name: "heart"
+          }),
+          styles: {
+            prefix: {
+              paddingRight: theme.space[0.5]
+            }
+          },
+          value: likes
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Likes"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(RollingNumber, {
+          colorPulseOnUpdate: true,
+          font: "title1",
+          format: {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+            minimumFractionDigits: 1
+          },
+          positivePulseColor: "accentBoldGreen",
+          value: shares
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Shares"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(RollingNumber, {
+          colorPulseOnUpdate: true,
+          font: "title1",
+          format: {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+            minimumFractionDigits: 1
+          },
+          positivePulseColor: "accentBoldPurple",
+          value: downloads
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Downloads"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: simulateActivity,
+      children: "Simulate Activity"
+    })]
+  });
+};
+const LiveBiddingExample = () => {
+  const [currentBid, setCurrentBid] = useState(45000);
+  const [bidCount, setBidCount] = useState(23);
+  const [timeLeft, setTimeLeft] = useState(180);
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(t => Math.max(0, t - 1));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+  const placeBid = increment => {
+    setCurrentBid(b => b + increment);
+    setBidCount(c => c + 1);
+  };
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Live Auction"
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "caption",
+        children: "Current Bid"
+      }), /*#__PURE__*/_jsx(RollingNumber, {
+        colorPulseOnUpdate: true,
+        font: "display2",
+        format: {
+          style: 'currency',
+          currency: 'USD',
+          minimumFractionDigits: 0
+        },
+        positivePulseColor: "accentBoldRed",
+        transition: {
+          y: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 20
+          }
+        },
+        value: currentBid
+      }), /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(RollingNumber, {
+          accessibilityLiveRegion: "none",
+          font: "body",
+          format: {
+            minimumFractionDigits: 0
+          },
+          value: bidCount
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "bids placed"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          children: "\u2022"
+        }), /*#__PURE__*/_jsx(RollingNumber, {
+          accessibilityLiveRegion: "none",
+          color: timeLeft < 30 ? 'fgNegative' : 'fg',
+          font: "body",
+          formattedValue: minutes + ":" + String(seconds).padStart(2, '0'),
+          value: timeLeft
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "remaining"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: () => placeBid(100),
+        children: "+$100"
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: () => placeBid(500),
+        children: "+$500"
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: () => placeBid(1000),
+        children: "+$1000"
+      })]
+    })]
+  });
+};
+const FunExamples = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(CounterExample, {}), /*#__PURE__*/_jsx(CountDownExample, {}), /*#__PURE__*/_jsx(SubscriptionPriceExample, {}), /*#__PURE__*/_jsx(StatisticsExample, {}), /*#__PURE__*/_jsx(LiveBiddingExample, {})]
+  });
+};
+const Accessibility = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Override screen reader label (compact notation)"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      accessibilityLabel: "1,230 followers",
+      font: "display3",
+      formattedValue: "1.23K",
+      suffix: " followers",
+      value: 1230
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Prefix/Suffix for screen readers (basis points)"
+    }), /*#__PURE__*/_jsx(RollingNumber, {
+      accessibilityLabelPrefix: "down ",
+      accessibilityLabelSuffix: " likes",
+      font: "body",
+      prefix: /*#__PURE__*/_jsx(Icon, {
+        name: "arrowDown",
+        size: "s"
+      }),
+      suffix: /*#__PURE__*/_jsx(Icon, {
+        name: "heart",
+        size: "s"
+      }),
+      value: 25
+    })]
+  });
+};
+const RollingNumberScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Examples",
+      children: /*#__PURE__*/_jsx(Examples, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Font customization",
+      children: /*#__PURE__*/_jsx(FontCustomization, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Color and Transition",
+      children: /*#__PURE__*/_jsx(ColorAndTransition, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Format",
+      children: /*#__PURE__*/_jsx(Format, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Prefix and Suffix",
+      children: /*#__PURE__*/_jsx(PrefixAndSuffix, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Style Overrides",
+      children: /*#__PURE__*/_jsx(StyleOverrides, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Subscript",
+      children: /*#__PURE__*/_jsx(Subscript, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "User Provided Formatted Value",
+      children: /*#__PURE__*/_jsx(UserProvidedFormattedValue, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Accessibility (labels & prefix/suffix)",
+      children: /*#__PURE__*/_jsx(Accessibility, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fun",
+      children: /*#__PURE__*/_jsx(FunExamples, {})
+    })]
+  });
+};
+export default RollingNumberScreen;