@oxyhq/bloom 0.29.5 → 0.30.0

package/src/dot-grid-meter/DotGridMeter.tsx

@@ -0,0 +1,71 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { DotGridMeterProps } from './types';
+
+/**
+ * A data-driven grid of small circular dots — the "diversity meter" visual. The
+ * first `filled` dots use `filledColor`, the rest use `emptyColor`, laid out in
+ * a flex-wrapped grid of `columns` per row. Pure `<View>` composition (no SVG),
+ * so it renders identically on web and native.
+ */
+const DotGridMeterComponent: React.FC<DotGridMeterProps> = ({
+  filled,
+  total,
+  columns = 10,
+  dotSize = 10,
+  gap = 6,
+  filledColor,
+  emptyColor,
+  style,
+  testID,
+}) => {
+  const { colors } = useTheme();
+  const onColor = filledColor ?? colors.success;
+  const offColor = emptyColor ?? colors.backgroundSecondary;
+
+  const safeTotal = Math.max(0, Math.floor(total));
+  const safeFilled = Math.min(safeTotal, Math.max(0, Math.floor(filled)));
+  // A row can hold at most `columns` dots; a grid narrower than one full row
+  // should still wrap tightly, so the container width follows the smaller count.
+  const perRow = Math.max(1, Math.floor(columns));
+  const rowWidth = Math.min(safeTotal, perRow);
+
+  const dots = useMemo(
+    () => Array.from({ length: safeTotal }, (_, index) => index < safeFilled),
+    [safeTotal, safeFilled],
+  );
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap,
+          width: rowWidth * dotSize + Math.max(0, rowWidth - 1) * gap,
+        },
+        style,
+      ]}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: safeTotal, now: safeFilled }}
+      testID={testID}
+    >
+      {dots.map((isFilled, index) => (
+        <View
+          key={index}
+          style={{
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            backgroundColor: isFilled ? onColor : offColor,
+          }}
+        />
+      ))}
+    </View>
+  );
+};
+
+export const DotGridMeter = memo(DotGridMeterComponent);
+DotGridMeter.displayName = 'DotGridMeter';

package/src/dot-grid-meter/index.ts

@@ -0,0 +1,2 @@
+export { DotGridMeter } from './DotGridMeter';
+export type { DotGridMeterProps } from './types';

package/src/dot-grid-meter/types.ts

@@ -0,0 +1,36 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface DotGridMeterProps {
+  /** Number of filled dots (clamped to `[0, total]`). */
+  filled: number;
+  /** Total number of dots in the grid. */
+  total: number;
+  /**
+   * Dots per row before wrapping.
+   * @default 10
+   */
+  columns?: number;
+  /**
+   * Diameter of each dot in px.
+   * @default 10
+   */
+  dotSize?: number;
+  /**
+   * Gap between dots in px (both axes).
+   * @default 6
+   */
+  gap?: number;
+  /**
+   * Color of a filled dot.
+   * @default theme.colors.success
+   */
+  filledColor?: string;
+  /**
+   * Color of an empty dot.
+   * @default theme.colors.backgroundSecondary
+   */
+  emptyColor?: string;
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/index.ts

@@ -152,6 +152,30 @@ export * from './accordion';
 export { LinkPreviewCard } from './link-preview';
 export type { LinkPreviewCardProps } from './link-preview';
 
+// Stat / profile widgets
+export { CompositionBar } from './composition-bar';
+export type { CompositionBarProps, CompositionCategory } from './composition-bar';
+export { DotGridMeter } from './dot-grid-meter';
+export type { DotGridMeterProps } from './dot-grid-meter';
+export { StatBar } from './stat-bar';
+export type {
+  StatBarProps,
+  StatBarProgressProps,
+  StatBarSplitProps,
+  StatBarVariant,
+} from './stat-bar';
+export { ActivityHeatmap, bucketByDay } from './activity-heatmap';
+export type { ActivityHeatmapProps, ActivityHeatmapDay } from './activity-heatmap';
+export { ProfileCard } from './profile-card';
+export type {
+  ProfileCardProps,
+  ProfileCardLayout,
+  ProfileCardVariant,
+  ProfileCardAvatar,
+  ProfileCardMetric,
+  ProfileCardFooter,
+} from './profile-card';
+
 // Settings / Grouped list
 export * from './settings-list';
 export { Item } from './item';

package/src/index.web.ts

@@ -157,6 +157,30 @@ export * from './accordion';
 export { LinkPreviewCard } from './link-preview';
 export type { LinkPreviewCardProps } from './link-preview';
 
+// Stat / profile widgets
+export { CompositionBar } from './composition-bar';
+export type { CompositionBarProps, CompositionCategory } from './composition-bar';
+export { DotGridMeter } from './dot-grid-meter';
+export type { DotGridMeterProps } from './dot-grid-meter';
+export { StatBar } from './stat-bar';
+export type {
+  StatBarProps,
+  StatBarProgressProps,
+  StatBarSplitProps,
+  StatBarVariant,
+} from './stat-bar';
+export { ActivityHeatmap, bucketByDay } from './activity-heatmap';
+export type { ActivityHeatmapProps, ActivityHeatmapDay } from './activity-heatmap';
+export { ProfileCard } from './profile-card';
+export type {
+  ProfileCardProps,
+  ProfileCardLayout,
+  ProfileCardVariant,
+  ProfileCardAvatar,
+  ProfileCardMetric,
+  ProfileCardFooter,
+} from './profile-card';
+
 // Settings / Grouped list
 export * from './settings-list';
 export { Item } from './item';

package/src/profile-card/ProfileCard.stories.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProfileCard } from './index';
+import type { AvatarGroupItem } from '../avatar-group';
+import { BloomThemeProvider } from '../theme';
+import { Star_Filled_Corner0_Rounded as StarIcon } from '../icons/Star';
+
+/** Small colored square as a data-URI so stories are self-contained. */
+function token(color: string): string {
+  return `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' rx='20' fill='${color}'/></svg>`;
+}
+
+const TOP_TOKENS: AvatarGroupItem[] = [
+  { id: 'a', uri: token('gold') },
+  { id: 'b', uri: token('tomato') },
+  { id: 'c', uri: token('mediumseagreen') },
+  { id: 'd', uri: token('royalblue') },
+  { id: 'e', uri: token('orchid') },
+];
+
+const HERO = token('slateblue');
+
+function Badge() {
+  return (
+    <View
+      style={{
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        backgroundColor: 'gold',
+        borderWidth: 2,
+        borderColor: '#111',
+      }}
+    />
+  );
+}
+
+const trophy = <StarIcon size="sm" style={{ color: '#F5B301' }} />;
+
+function Gallery() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 20, maxWidth: 780 }}>
+      {/* wallet — dot-grid meter */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        headlineIcon={trophy}
+        metric={{ kind: 'dots', label: 'Token diversity', filled: 34, total: 50 }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* wallet — progress + trophy */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        metric={{
+          kind: 'progress',
+          label: 'TX count 24h',
+          value: 192,
+          max: 350,
+          minLabel: '32',
+          maxLabel: '350',
+          icon: trophy,
+        }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* wallet — split bar % */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        metric={{
+          kind: 'split',
+          label: 'Net flow 24h',
+          percent: 62,
+          leftValue: '+$4,210',
+          rightValue: '-$2,560',
+        }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* social */}
+      <ProfileCard
+        variant="social"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Ada' }}
+        value="12,480"
+        subtitle="@ada"
+        metric={{ kind: 'progress', label: 'Weekly goal', value: 5, max: 7 }}
+        footer={{ label: 'Mutuals', items: TOP_TOKENS }}
+      />
+
+      {/* shopping */}
+      <ProfileCard
+        variant="shopping"
+        avatar={{ source: HERO, name: 'Store' }}
+        value="48 orders"
+        subtitle="This month"
+        metric={{ kind: 'dots', label: 'Categories', filled: 6, total: 12 }}
+        footer={{ label: 'Recent buyers', items: TOP_TOKENS }}
+      />
+
+      {/* stat (default) */}
+      <ProfileCard
+        variant="stat"
+        avatar={{ source: HERO, name: 'Score' }}
+        value="820"
+        subtitle="Trust score"
+        headlineIcon={trophy}
+        metric={{
+          kind: 'split',
+          label: 'Positive vs negative',
+          percent: 88,
+          leftValue: '880',
+          rightValue: '60',
+        }}
+      />
+    </View>
+  );
+}
+
+function WideGallery() {
+  return (
+    <View style={{ gap: 16, width: 420 }}>
+      <ProfileCard
+        layout="wide"
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        headlineIcon={trophy}
+        metric={{ kind: 'dots', label: 'Token diversity', filled: 34, total: 50 }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+      <ProfileCard
+        layout="wide"
+        variant="social"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Ada' }}
+        value="12,480"
+        subtitle="@ada"
+        metric={{
+          kind: 'progress',
+          label: 'TX count 24h',
+          value: 192,
+          max: 350,
+          minLabel: '32',
+          maxLabel: '350',
+          icon: trophy,
+        }}
+        footer={{ label: 'Mutuals', items: TOP_TOKENS }}
+      />
+    </View>
+  );
+}
+
+const meta: Meta<typeof ProfileCard> = {
+  title: 'Data Display/ProfileCard',
+  component: ProfileCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfileCard>;
+
+export const WidgetLight: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24 }}>
+        <Gallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WidgetDark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, backgroundColor: '#000' }}>
+        <Gallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WideLight: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24 }}>
+        <WideGallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WideDark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, backgroundColor: '#000' }}>
+        <WideGallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};

package/src/profile-card/ProfileCard.tsx

@@ -0,0 +1,303 @@
+import React, { memo } from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+
+import { Card } from '../card';
+import { Avatar } from '../avatar';
+import { AvatarGroup } from '../avatar-group';
+import { DotGridMeter } from '../dot-grid-meter';
+import { StatBar } from '../stat-bar';
+import { Text } from '../typography';
+import { useTheme } from '../theme/use-theme';
+import type { ThemeColors } from '../theme/types';
+import type { AvatarRingConfig } from '../avatar/types';
+import type {
+  ProfileCardMetric,
+  ProfileCardProps,
+  ProfileCardVariant,
+} from './types';
+
+const WIDGET_WIDTH = 240;
+const CARD_PADDING = 16;
+const CARD_RADIUS = 24;
+const AVATAR_SIZE = 52;
+const FOOTER_AVATAR_SIZE = 28;
+
+interface VariantAccents {
+  ring: string;
+  fill: string;
+  dots: string;
+}
+
+function variantAccents(variant: ProfileCardVariant, colors: ThemeColors): VariantAccents {
+  switch (variant) {
+    case 'wallet':
+      return { ring: colors.success, fill: colors.primary, dots: colors.success };
+    case 'shopping':
+      return { ring: colors.info, fill: colors.info, dots: colors.info };
+    case 'social':
+      return { ring: colors.primary, fill: colors.primary, dots: colors.primary };
+    case 'stat':
+    default:
+      return { ring: colors.primary, fill: colors.primary, dots: colors.primary };
+  }
+}
+
+function AvatarWithBadge({
+  source,
+  name,
+  ring,
+  badge,
+}: {
+  source?: string | null;
+  name?: string;
+  ring: AvatarRingConfig;
+  badge?: React.ReactNode;
+}) {
+  return (
+    <View style={styles.avatarWrap}>
+      <Avatar source={source ?? undefined} name={name} size={AVATAR_SIZE} ring={ring} />
+      {badge != null && (
+        <View
+          style={[
+            styles.badge,
+            { width: Math.round(AVATAR_SIZE * 0.34), height: Math.round(AVATAR_SIZE * 0.34) },
+          ]}
+        >
+          {badge}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function MetricSection({
+  metric,
+  accents,
+  labelColor,
+}: {
+  metric: ProfileCardMetric;
+  accents: VariantAccents;
+  labelColor: string;
+}) {
+  switch (metric.kind) {
+    case 'dots':
+      return (
+        <View style={styles.section}>
+          {metric.label != null && (
+            <Text style={[styles.sectionLabel, { color: labelColor }]} numberOfLines={1}>
+              {metric.label}
+            </Text>
+          )}
+          <DotGridMeter
+            filled={metric.filled}
+            total={metric.total}
+            filledColor={metric.filledColor ?? accents.dots}
+          />
+        </View>
+      );
+    case 'progress':
+      return (
+        <StatBar
+          variant="progress"
+          label={metric.label}
+          value={metric.value}
+          max={metric.max}
+          minLabel={metric.minLabel}
+          maxLabel={metric.maxLabel}
+          icon={metric.icon}
+          fillColor={metric.fillColor ?? accents.fill}
+        />
+      );
+    case 'split':
+      return (
+        <StatBar
+          variant="split"
+          label={metric.label}
+          percent={metric.percent}
+          leftValue={metric.leftValue}
+          rightValue={metric.rightValue}
+          fillColor={metric.fillColor ?? accents.fill}
+        />
+      );
+    case 'custom':
+    default:
+      return <>{metric.node}</>;
+  }
+}
+
+/**
+ * A composed profile "widget" card — the Apple-Watch-style stat card. Fully
+ * app-agnostic: it takes pre-formatted strings, colors, and `ReactNode` icons
+ * (no domain/currency logic). Built on {@link Card}, {@link Avatar} (ring +
+ * badge), {@link DotGridMeter}/{@link StatBar}, and a {@link AvatarGroup} row.
+ *
+ * `variant` only picks sensible accent defaults (ring + metric fill); every
+ * accent stays overridable via the individual props.
+ */
+const ProfileCardComponent: React.FC<ProfileCardProps> = ({
+  layout = 'widget',
+  variant = 'stat',
+  avatar,
+  value,
+  subtitle,
+  headlineIcon,
+  metric,
+  footer,
+  onPress,
+  style,
+  testID,
+}) => {
+  const { colors } = useTheme();
+  const accents = variantAccents(variant, colors);
+  const isWide = layout === 'wide';
+
+  const ring: AvatarRingConfig = avatar.ring ?? { colors: accents.ring, width: 2, gap: 2 };
+
+  const surfaceStyle: ViewStyle = {
+    width: isWide ? '100%' : WIDGET_WIDTH,
+    padding: CARD_PADDING,
+    borderRadius: CARD_RADIUS,
+    borderCurve: 'continuous',
+  };
+
+  const headline = (
+    <>
+      <Text style={[styles.value, { color: colors.text }]} numberOfLines={1}>
+        {value}
+      </Text>
+      {subtitle != null && (
+        <Text style={[styles.subtitle, { color: colors.textTertiary }]} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      )}
+    </>
+  );
+
+  const metricNode =
+    metric != null ? (
+      <MetricSection metric={metric} accents={accents} labelColor={colors.textTertiary} />
+    ) : null;
+
+  const footerNode =
+    footer != null ? (
+      <View style={styles.section}>
+        {footer.label != null && (
+          <Text style={[styles.sectionLabel, { color: colors.textTertiary }]} numberOfLines={1}>
+            {footer.label}
+          </Text>
+        )}
+        <AvatarGroup
+          layout="row"
+          items={footer.items}
+          size={FOOTER_AVATAR_SIZE}
+          max={footer.max ?? 4}
+        />
+      </View>
+    ) : null;
+
+  return (
+    <Card
+      variant="filled"
+      onPress={onPress}
+      style={[surfaceStyle, style]}
+      testID={testID}
+    >
+      <View style={styles.body}>
+        {isWide ? (
+          <View style={styles.headerRowWide}>
+            <AvatarWithBadge
+              source={avatar.source}
+              name={avatar.name}
+              ring={ring}
+              badge={avatar.badge}
+            />
+            <View style={styles.wideValueRow}>
+              <View style={styles.headlineColumn}>{headline}</View>
+              {headlineIcon != null && <View style={styles.wideIcon}>{headlineIcon}</View>}
+            </View>
+          </View>
+        ) : (
+          <View style={styles.headerRow}>
+            <AvatarWithBadge
+              source={avatar.source}
+              name={avatar.name}
+              ring={ring}
+              badge={avatar.badge}
+            />
+            <View style={styles.headlineColumn}>{headline}</View>
+          </View>
+        )}
+
+        {metricNode}
+        {footerNode}
+      </View>
+
+      {!isWide && headlineIcon != null && <View style={styles.floatingIcon}>{headlineIcon}</View>}
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    gap: 16,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  headerRowWide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  headlineColumn: {
+    flex: 1,
+    minWidth: 0,
+  },
+  wideValueRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  wideIcon: {
+    marginLeft: 8,
+  },
+  value: {
+    fontSize: 26,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+    fontVariant: ['tabular-nums'],
+  },
+  subtitle: {
+    marginTop: 2,
+    fontSize: 13,
+    fontVariant: ['tabular-nums'],
+  },
+  section: {
+    gap: 8,
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  avatarWrap: {
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    right: -2,
+    bottom: -2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floatingIcon: {
+    position: 'absolute',
+    top: CARD_PADDING,
+    right: CARD_PADDING,
+  },
+});
+
+export const ProfileCard = memo(ProfileCardComponent);
+ProfileCard.displayName = 'ProfileCard';

package/src/profile-card/index.ts

@@ -0,0 +1,9 @@
+export { ProfileCard } from './ProfileCard';
+export type {
+  ProfileCardProps,
+  ProfileCardLayout,
+  ProfileCardVariant,
+  ProfileCardAvatar,
+  ProfileCardMetric,
+  ProfileCardFooter,
+} from './types';