@oxyhq/bloom 0.29.5 → 0.30.0

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;
+}

package/src/stat-bar/StatBar.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { StatBar } from './index';
+import { BloomThemeProvider } from '../theme';
+import { Star_Filled_Corner0_Rounded as StarIcon } from '../icons/Star';
+
+function Demo() {
+  return (
+    <View style={{ gap: 28 }}>
+      <StatBar
+        variant="progress"
+        label="TX count 24h"
+        value={192}
+        max={350}
+        minLabel="32"
+        maxLabel="350"
+        icon={<StarIcon size="sm" style={{ color: '#F59E0B' }} />}
+      />
+      <StatBar
+        variant="split"
+        label="Net flow 24h"
+        percent={62}
+        leftValue="+$4,210"
+        rightValue="-$2,560"
+        leftColor="#10B981"
+        rightColor="#EF4444"
+      />
+    </View>
+  );
+}
+
+const meta: Meta<typeof StatBar> = {
+  title: 'Data Display/StatBar',
+  component: StatBar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatBar>;
+
+export const Light: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24, width: 320 }}>
+        <Demo />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const Dark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, width: 320, backgroundColor: '#000' }}>
+        <Demo />
+      </View>
+    </BloomThemeProvider>
+  ),
+};

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;

package/src/typography/index.tsx

@@ -8,7 +8,7 @@ import {
 import { useTheme } from '../theme/use-theme';
 import { fontFamilies } from '../fonts/tokens';
 import { mergeTypographyStyle, typographyDefaultsWhenNoClassName } from './defaults';
-import { getInteropText, hasTypographyClassNameInterop } from './styled-text';
+import { getInteropText } from './styled-text';
 
 export type TextProps = RNTextProps & {
   className?: string;
@@ -50,16 +50,14 @@ const DEFAULT_TEXT_TYPOGRAPHY: TextStyle = {
 const TextComponent = function Text({ children, style, className, ...rest }: TextProps) {
   const { colors } = useTheme();
   const InteropText = getInteropText();
-  const interopActive = hasTypographyClassNameInterop();
-
-  const resolvedClassName = interopActive && className?.trim() ? className : undefined;
+  const trimmedClassName = className?.trim() ? className : undefined;
 
   return (
     <InteropText
       {...rest}
-      {...(resolvedClassName ? { className: resolvedClassName } : {})}
+      {...(trimmedClassName ? { className: trimmedClassName } : {})}
       style={mergeTypographyStyle(
-        resolvedClassName,
+        trimmedClassName,
         { ...DEFAULT_TEXT_TYPOGRAPHY, color: colors.text },
         SANS_FONT_FAMILY,
         style,

package/src/typography/styled-text.ts

@@ -1,41 +1,24 @@
 import type { ComponentType } from 'react';
 import { Text as RNText, type TextProps } from 'react-native';
-
-import { lazyRequire } from '../utils/lazy-require';
+import { styled } from 'react-native-css';
 
 type StyledTextComponent = ComponentType<TextProps & { className?: string }>;
 
-type NativeWindModule = {
-  styled: (
-    component: typeof RNText,
-    mapping?: { className: 'style' },
-  ) => StyledTextComponent;
-};
-
-const getNativeWind = lazyRequire<NativeWindModule>('nativewind');
-
-let interopText: StyledTextComponent = RNText;
-
 /**
- * RN `Text` wired for NativeWind `className` → `style` interop when
- * `nativewind` is installed in the consumer. Falls back to plain `RNText`
- * otherwise (className is ignored upstream).
+ * RN `Text` wired for NativeWind `className` → `style` interop.
+ *
+ * Import `styled` from Bloom's direct dependency `react-native-css` — not via
+ * lazy `require('nativewind')`. Metro cannot reliably bundle dynamic requires
+ * from published `@oxyhq/bloom/lib`, so the 0.29.4 lazy path left interop
+ * inactive at runtime and Bloom defaults (fontSize 13) overrode hero utilities.
  */
-export function getInteropText(): StyledTextComponent {
-  if (interopText !== RNText) {
-    return interopText;
-  }
-
-  const nativewind = getNativeWind();
-  if (nativewind?.styled) {
-    interopText = nativewind.styled(RNText, { className: 'style' });
-  }
+const interopText: StyledTextComponent = styled(RNText, { className: 'style' });
 
+export function getInteropText(): StyledTextComponent {
   return interopText;
 }
 
-/** True when className interop is active (nativewind present). */
+/** True when className interop is active (always — react-native-css is a direct dep). */
 export function hasTypographyClassNameInterop(): boolean {
-  getInteropText();
-  return interopText !== RNText;
+  return true;
 }