@oxyhq/bloom 0.29.6 → 0.30.1

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,269 @@
+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 = 18;
+const CARD_RADIUS = 28;
+const AVATAR_SIZE = 54;
+const FOOTER_AVATAR_SIZE = 30;
+
+/**
+ * Vivid per-variant accent, drawn from the theme's semantic tokens so it tracks
+ * the active Bloom preset. Every accent stays overridable per-prop.
+ */
+function variantAccent(variant: ProfileCardVariant, colors: ThemeColors): string {
+  switch (variant) {
+    case 'wallet':
+      return colors.success;
+    case 'shopping':
+      return colors.warning;
+    case 'social':
+      return colors.primary;
+    case 'stat':
+    default:
+      return colors.info;
+  }
+}
+
+function AvatarWithBadge({
+  source,
+  name,
+  ring,
+  badge,
+  haloColor,
+}: {
+  source?: string | null;
+  name?: string;
+  ring: AvatarRingConfig;
+  badge?: React.ReactNode;
+  haloColor: string;
+}) {
+  return (
+    <View style={styles.avatarWrap}>
+      <Avatar source={source ?? undefined} name={name} size={AVATAR_SIZE} ring={ring} />
+      {badge != null && (
+        <View style={[styles.badgeHalo, { backgroundColor: haloColor }]}>{badge}</View>
+      )}
+    </View>
+  );
+}
+
+function MetricSection({
+  metric,
+  accent,
+  labelColor,
+}: {
+  metric: ProfileCardMetric;
+  accent: string;
+  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}
+            columns={metric.total}
+            dotSize={9}
+            gap={6}
+            filledColor={metric.filledColor ?? accent}
+          />
+        </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 ?? accent}
+        />
+      );
+    case 'split':
+      return (
+        <StatBar
+          variant="split"
+          label={metric.label}
+          percent={metric.percent}
+          leftValue={metric.leftValue}
+          rightValue={metric.rightValue}
+          fillColor={metric.fillColor ?? accent}
+        />
+      );
+    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 an {@link AvatarGroup} row.
+ *
+ * Theme-driven (Bloom's `useTheme()` reads the same NativeWind token pipeline
+ * that backs the `--*` vars): the surface is the theme's `background` — the
+ * darkest token, a near-black in dark mode — with a hairline `border` so it
+ * separates on any page, and the metric tracks read from `backgroundSecondary`,
+ * a step lighter, so they always show. `variant` picks a vivid semantic accent
+ * (success/warning/info/primary), overridable per-prop.
+ */
+const ProfileCardComponent: React.FC<ProfileCardProps> = ({
+  layout = 'widget',
+  variant = 'stat',
+  avatar,
+  value,
+  subtitle,
+  headlineIcon,
+  metric,
+  footer,
+  onPress,
+  style,
+  testID,
+}) => {
+  const { colors } = useTheme();
+  const accent = variantAccent(variant, colors);
+  const isWide = layout === 'wide';
+
+  // Consumer ring wins for color; default to the accent, always with a small
+  // gap so the ring reads as a distinct halo (as in the reference).
+  const ring: AvatarRingConfig = { colors: accent, width: 2, gap: 2, ...avatar.ring };
+
+  const surfaceStyle: ViewStyle = {
+    width: isWide ? '100%' : WIDGET_WIDTH,
+    padding: CARD_PADDING,
+    borderRadius: CARD_RADIUS,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+    borderCurve: 'continuous',
+  };
+
+  const headline = (
+    <>
+      <Text style={[styles.value, { color: colors.text }]} numberOfLines={1}>
+        {value}
+      </Text>
+      {subtitle != null && (
+        <Text style={[styles.subtitle, { color: colors.textSecondary }]} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      )}
+    </>
+  );
+
+  const metricNode =
+    metric != null ? (
+      <MetricSection metric={metric} accent={accent} labelColor={colors.textSecondary} />
+    ) : null;
+
+  const footerNode =
+    footer != null ? (
+      <View style={styles.section}>
+        {footer.label != null && (
+          <Text style={[styles.sectionLabel, { color: colors.textSecondary }]} numberOfLines={1}>
+            {footer.label}
+          </Text>
+        )}
+        <AvatarGroup
+          layout="row"
+          items={footer.items}
+          size={FOOTER_AVATAR_SIZE}
+          spacing={7}
+          max={footer.max ?? 4}
+          showInitials
+        />
+      </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}
+              haloColor={colors.background}
+            />
+            <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}
+              haloColor={colors.background}
+            />
+            <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: 14 },
+  headlineColumn: { flex: 1, minWidth: 0 },
+  wideValueRow: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 },
+  wideIcon: { marginLeft: 8 },
+  value: { fontSize: 27, fontWeight: '800', letterSpacing: -0.6, fontVariant: ['tabular-nums'] },
+  subtitle: { marginTop: 2, fontSize: 13, fontWeight: '500', fontVariant: ['tabular-nums'] },
+  section: { gap: 10 },
+  sectionLabel: { fontSize: 13, fontWeight: '500' },
+  avatarWrap: { position: 'relative' },
+  badgeHalo: {
+    position: 'absolute',
+    right: -3,
+    bottom: -3,
+    padding: 2,
+    borderRadius: 999,
+    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';

package/src/profile-card/types.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AvatarRingConfig } from '../avatar/types';
+import type { AvatarGroupItem } from '../avatar-group/types';
+
+export type ProfileCardLayout = 'widget' | 'wide';
+export type ProfileCardVariant = 'wallet' | 'social' | 'shopping' | 'stat';
+
+/** The avatar block of a {@link ProfileCard}. All values are consumer-supplied. */
+export interface ProfileCardAvatar {
+  /**
+   * Avatar value, routed into {@link Avatar}'s `source` prop — a full URL or a
+   * resolver-handled id (e.g. an Oxy file ID).
+   */
+  source?: string | null;
+  /** Decorative ring. Defaults to a solid ring in the variant accent color. */
+  ring?: AvatarRingConfig;
+  /** Badge overlay pinned to the avatar's bottom-right (e.g. a small logo). */
+  badge?: ReactNode;
+  /** Name used for the avatar's initial/placeholder and accessibility. */
+  name?: string;
+}
+
+/** The metric visual rendered below the headline. */
+export type ProfileCardMetric =
+  | { kind: 'dots'; label?: string; filled: number; total: number; filledColor?: string }
+  | {
+      kind: 'progress';
+      label: string;
+      value: number;
+      max: number;
+      minLabel?: string;
+      maxLabel?: string;
+      icon?: ReactNode;
+      fillColor?: string;
+    }
+  | {
+      kind: 'split';
+      label: string;
+      percent: number;
+      leftValue: string;
+      rightValue: string;
+      fillColor?: string;
+    }
+  | { kind: 'custom'; node: ReactNode };
+
+/** The trailing facepile row (e.g. "Top tokens"). */
+export interface ProfileCardFooter {
+  /** Small label above the row. */
+  label?: string;
+  /** Avatars rendered adjacent in a row. */
+  items: AvatarGroupItem[];
+  /** Maximum avatars before collapsing into `+N`. @default 4 */
+  max?: number;
+}
+
+export interface ProfileCardProps {
+  /**
+   * Card shape. `'widget'` is a compact ~square card; `'wide'` is a full-width
+   * card. @default 'widget'
+   */
+  layout?: ProfileCardLayout;
+  /**
+   * Selects sensible accent defaults (ring / metric fill). Every accent stays
+   * overridable per-element. @default 'stat'
+   */
+  variant?: ProfileCardVariant;
+  /** Avatar block. */
+  avatar: ProfileCardAvatar;
+  /** Pre-formatted headline value (e.g. a balance or count). */
+  value: string;
+  /** Secondary line under the headline. */
+  subtitle?: string;
+  /** Node floated at the card's top-right (e.g. a trophy or menu icon). */
+  headlineIcon?: ReactNode;
+  /** Metric visual below the headline. */
+  metric?: ProfileCardMetric;
+  /** Trailing facepile row. */
+  footer?: ProfileCardFooter;
+  /** Press handler — makes the whole card pressable. */
+  onPress?: () => void;
+  /** Container style override (merged over the card surface). */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}