@oxyhq/bloom 0.29.6 → 0.30.0

package/src/stat-bar/StatBar.tsx

@@ -0,0 +1,156 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { StatBarProps } from './types';
+
+function clampPercent(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+/**
+ * A horizontal labeled value bar with two variants:
+ *
+ * - `progress` — a rounded capsule track with a proportional `value / max`
+ *   fill, an optional top-right `icon`, and an optional min/max footer row.
+ * - `split` — a capsule split at `percent` (left portion active, remainder the
+ *   track color), a bold percentage right of the label, and a two-sided footer
+ *   of opposing values (inflow/outflow style).
+ *
+ * Pure `<View>` composition, so it renders identically on web and native.
+ */
+const StatBarComponent: React.FC<StatBarProps> = (props) => {
+  const { colors } = useTheme();
+  const { label, fillColor, trackColor, height = 6, icon, style, testID } = props;
+  const fill = fillColor ?? colors.primary;
+  const track = trackColor ?? colors.backgroundSecondary;
+  const radius = height / 2;
+
+  if (props.variant === 'split') {
+    const { percent, leftValue, rightValue, leftColor, rightColor } = props;
+    const leftPercent = clampPercent(percent);
+    const activeLeft = leftColor ?? fill;
+    const remainder = rightColor ?? track;
+
+    return (
+      <View style={[styles.wrap, style]} testID={testID}>
+        <View style={styles.labelRow}>
+          <Text style={[styles.label, { color: colors.textSecondary }]} numberOfLines={1}>
+            {label}
+          </Text>
+          <Text style={[styles.percent, { color: colors.text }]} numberOfLines={1}>
+            {Math.round(leftPercent)}%
+          </Text>
+        </View>
+
+        <View style={[styles.track, { height, borderRadius: radius, backgroundColor: remainder }]}>
+          <View
+            style={{
+              width: `${leftPercent}%`,
+              height,
+              borderRadius: radius,
+              backgroundColor: activeLeft,
+            }}
+          />
+        </View>
+
+        <View style={styles.footerRow}>
+          <Text style={[styles.footerValue, { color: colors.textTertiary }]} numberOfLines={1}>
+            {leftValue}
+          </Text>
+          <Text style={[styles.footerValue, { color: colors.textTertiary }]} numberOfLines={1}>
+            {rightValue}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  const { value, max, minLabel, maxLabel } = props;
+  const ratio = max > 0 ? clampPercent((value / max) * 100) : 0;
+  const hasFooter = minLabel != null || maxLabel != null;
+
+  return (
+    <View style={[styles.wrap, style]} testID={testID}>
+      <View style={styles.labelRow}>
+        <Text style={[styles.label, { color: colors.textSecondary }]} numberOfLines={1}>
+          {label}
+        </Text>
+        {icon != null && <View style={styles.icon}>{icon}</View>}
+      </View>
+
+      <View
+        style={[styles.track, { height, borderRadius: radius, backgroundColor: track }]}
+        accessibilityRole="progressbar"
+        accessibilityValue={{ min: 0, max, now: value }}
+      >
+        <View
+          style={{
+            width: `${ratio}%`,
+            height,
+            borderRadius: radius,
+            backgroundColor: fill,
+          }}
+        />
+      </View>
+
+      {hasFooter && (
+        <View style={styles.footerRow}>
+          <Text style={[styles.footerValue, { color: colors.textTertiary }]} numberOfLines={1}>
+            {minLabel ?? ''}
+          </Text>
+          <Text style={[styles.footerValue, { color: colors.textTertiary }]} numberOfLines={1}>
+            {maxLabel ?? ''}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrap: {
+    gap: 8,
+  },
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  label: {
+    flexShrink: 1,
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  percent: {
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: -0.2,
+    fontVariant: ['tabular-nums'],
+  },
+  icon: {
+    marginLeft: 8,
+  },
+  track: {
+    width: '100%',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    borderCurve: 'continuous',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  footerValue: {
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+  },
+});
+
+export const StatBar = memo(StatBarComponent);
+StatBar.displayName = 'StatBar';

package/src/stat-bar/index.ts

@@ -0,0 +1,7 @@
+export { StatBar } from './StatBar';
+export type {
+  StatBarProps,
+  StatBarProgressProps,
+  StatBarSplitProps,
+  StatBarVariant,
+} from './types';

package/src/stat-bar/types.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type StatBarVariant = 'progress' | 'split';
+
+interface StatBarBaseProps {
+  /** Label shown at the top-left of the bar. */
+  label: string;
+  /**
+   * Fill color of the (active portion of the) track.
+   * @default theme.colors.primary
+   */
+  fillColor?: string;
+  /**
+   * Color of the empty/track portion.
+   * @default theme.colors.backgroundSecondary
+   */
+  trackColor?: string;
+  /**
+   * Height of the capsule track in px.
+   * @default 6
+   */
+  height?: number;
+  /** Optional node rendered at the top-right of the label row (e.g. a trophy icon). */
+  icon?: ReactNode;
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** A labeled progress bar with an optional min/max footer row. */
+export interface StatBarProgressProps extends StatBarBaseProps {
+  variant?: 'progress';
+  /** Current value; the fill spans `value / max` of the track. */
+  value: number;
+  /** Maximum value (the full track). */
+  max: number;
+  /** Optional label shown at the bottom-left (e.g. the range minimum). */
+  minLabel?: string;
+  /** Optional label shown at the bottom-right (e.g. the range maximum). */
+  maxLabel?: string;
+}
+
+/** A two-sided split bar showing an inflow/outflow-style ratio. */
+export interface StatBarSplitProps extends StatBarBaseProps {
+  variant: 'split';
+  /** Share of the track filled from the left, 0–100. Shown right of the label. */
+  percent: number;
+  /** Value label shown at the bottom-left. */
+  leftValue: string;
+  /** Value label shown at the bottom-right. */
+  rightValue: string;
+  /**
+   * Color of the left (active) portion.
+   * @default fillColor (theme.colors.primary)
+   */
+  leftColor?: string;
+  /**
+   * Color of the right portion.
+   * @default trackColor (theme.colors.backgroundSecondary)
+   */
+  rightColor?: string;
+}
+
+export type StatBarProps = StatBarProgressProps | StatBarSplitProps;