@oxyhq/bloom 0.8.5 → 0.9.0

package/src/theme/color-scope/style-builder.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 
-import { getResolvedTokens } from '../token-registry';
+import { CANONICAL_TOKENS, getResolvedTokens } from '../token-registry';
 import type { AppColorName } from '../color-presets';
 import { lazyRequire } from '../../utils/lazy-require';
 
@@ -25,17 +25,29 @@ const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
 
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 export function buildScopeVars(
   colorPreset: AppColorName,
   mode: 'light' | 'dark',
 ): Record<string, string> {
-  return getResolvedTokens(colorPreset, mode);
+  const tokens = getResolvedTokens(colorPreset, mode);
+  const vars: Record<string, string> = { ...tokens };
+
+  for (const token of CANONICAL_TOKENS) {
+    const value = tokens[`--${token}`];
+    if (value !== undefined) {
+      vars[`--color-${token}`] = value;
+    }
+  }
+
+  return vars;
 }
 
 /**

package/src/user-hover-card/UserHoverCard.stories.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UserHoverCard } from './UserHoverCard';
+
+const SAMPLE_AVATAR =
+  'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop';
+
+function DemoFollowButton() {
+  return (
+    <Pressable
+      style={{
+        paddingHorizontal: 14,
+        paddingVertical: 7,
+        borderRadius: 999,
+        backgroundColor: '#1A73E8',
+      }}
+    >
+      <Text style={{ color: '#fff', fontWeight: '600', fontSize: 13 }}>
+        Follow
+      </Text>
+    </Pressable>
+  );
+}
+
+const meta: Meta<typeof UserHoverCard> = {
+  title: 'Components/UserHoverCard',
+  component: UserHoverCard,
+  argTypes: {
+    verified: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UserHoverCard>;
+
+export const Basic: Story = {
+  args: {
+    avatar: SAMPLE_AVATAR,
+    displayName: 'Nate Isern',
+    username: 'nate',
+    bio: 'Building the Oxy ecosystem. Designer, engineer, and occasional rose grower.',
+    stats: [
+      { label: 'Following', value: '312' },
+      { label: 'Followers', value: '4.8K' },
+    ],
+    verified: true,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    avatar: SAMPLE_AVATAR,
+    displayName: 'Ada Lovelace',
+    username: 'ada',
+    bio: 'Mathematician. Wrote the first algorithm intended for a machine.',
+    stats: [
+      { label: 'Following', value: '12' },
+      { label: 'Followers', value: '1.2M' },
+    ],
+    verified: true,
+    action: <DemoFollowButton />,
+  },
+  name: 'With action slot',
+};
+
+export const NoAction: Story = {
+  args: {
+    avatar: null,
+    displayName: 'Grace Hopper',
+    username: 'grace',
+    bio: 'Computer scientist and US Navy rear admiral.',
+    stats: [
+      { label: 'Following', value: '88' },
+      { label: 'Followers', value: '900K' },
+    ],
+  },
+  name: 'No action slot',
+};
+
+export const Minimal: Story = {
+  args: {
+    displayName: 'Anonymous',
+  },
+  name: 'Minimal (name only)',
+};
+
+export const Pressable_: Story = {
+  render: (args) => (
+    <View style={{ gap: 8 }}>
+      <UserHoverCard
+        {...args}
+        avatar={SAMPLE_AVATAR}
+        displayName="Linus Torvalds"
+        username="linus"
+        bio="Creator of Linux and Git."
+        stats={[
+          { label: 'Following', value: '3' },
+          { label: 'Followers', value: '2.1M' },
+        ]}
+        action={<DemoFollowButton />}
+        onPressProfile={() => {
+          // eslint-disable-next-line no-alert
+          if (typeof window !== 'undefined') window.alert('open profile');
+        }}
+      />
+      <Text>Click the identity area to open the profile.</Text>
+    </View>
+  ),
+  name: 'Pressable identity',
+};

package/src/user-hover-card/UserHoverCard.tsx

@@ -0,0 +1,204 @@
+import React, { memo, useMemo } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Avatar } from '../avatar';
+import { VerifiedCheck } from '../icons/VerifiedCheck';
+import { useTheme } from '../theme/use-theme';
+import { borderRadius, fontSize, space } from '../styles/tokens';
+import type { UserHoverCardProps } from './types';
+
+const AVATAR_SIZE = 48;
+const VERIFIED_SIZE = 16;
+
+const UserHoverCardComponent: React.FC<UserHoverCardProps> = ({
+  avatar,
+  displayName,
+  username,
+  bio,
+  stats,
+  verified = false,
+  onPressProfile,
+  action,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+
+  const cardStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      backgroundColor: theme.colors.card,
+      borderRadius: borderRadius.lg,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+      padding: space.lg,
+      width: 280,
+    };
+
+    if (Platform.OS === 'web') {
+      base.boxShadow = `0px 8px 24px ${theme.colors.shadow}`;
+    } else {
+      base.shadowColor = theme.colors.shadow;
+      base.shadowOffset = { width: 0, height: 8 };
+      base.shadowOpacity = 0.18;
+      base.shadowRadius = 16;
+      base.elevation = 8;
+    }
+
+    return base;
+  }, [theme]);
+
+  const identity = (
+    <View style={styles.identityRow}>
+      <Avatar uri={avatar ?? undefined} name={displayName} size={AVATAR_SIZE} />
+      <View style={styles.identityText}>
+        <View style={styles.nameRow}>
+          <Text
+            numberOfLines={1}
+            style={[styles.displayName, { color: theme.colors.text }]}
+          >
+            {displayName}
+          </Text>
+          {verified && (
+            <VerifiedCheck
+              size="sm"
+              fill={theme.colors.primary}
+              width={VERIFIED_SIZE}
+              height={VERIFIED_SIZE}
+              style={styles.verifiedBadge}
+            />
+          )}
+        </View>
+        {username ? (
+          <Text
+            numberOfLines={1}
+            style={[styles.username, { color: theme.colors.textSecondary }]}
+          >
+            @{username}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={[cardStyle, style]} testID={testID}>
+      <View style={styles.header}>
+        {onPressProfile ? (
+          <Pressable
+            onPress={onPressProfile}
+            accessibilityRole="button"
+            accessibilityLabel={
+              username ? `${displayName} (@${username})` : displayName
+            }
+            style={styles.identityPressable}
+          >
+            {identity}
+          </Pressable>
+        ) : (
+          <View style={styles.identityPressable}>{identity}</View>
+        )}
+        {action != null ? <View style={styles.action}>{action}</View> : null}
+      </View>
+
+      {bio ? (
+        <Text
+          numberOfLines={3}
+          style={[styles.bio, { color: theme.colors.text }]}
+        >
+          {bio}
+        </Text>
+      ) : null}
+
+      {stats && stats.length > 0 ? (
+        <View style={styles.statsRow}>
+          {stats.map((stat) => (
+            <View key={stat.label} style={styles.stat}>
+              <Text style={[styles.statValue, { color: theme.colors.text }]}>
+                {stat.value}
+              </Text>
+              <Text
+                style={[styles.statLabel, { color: theme.colors.textSecondary }]}
+              >
+                {stat.label}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: space.sm,
+  },
+  identityPressable: {
+    flexShrink: 1,
+    flexGrow: 1,
+  },
+  identityRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space.sm,
+  },
+  identityText: {
+    flexShrink: 1,
+    flexGrow: 1,
+  },
+  nameRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space.xs,
+  },
+  displayName: {
+    fontSize: fontSize.lg,
+    fontWeight: '700',
+    flexShrink: 1,
+  },
+  verifiedBadge: {
+    flexShrink: 0,
+  },
+  username: {
+    fontSize: fontSize.sm,
+    marginTop: space._2xs,
+  },
+  action: {
+    flexShrink: 0,
+  },
+  bio: {
+    fontSize: fontSize.sm,
+    lineHeight: fontSize.sm * 1.4,
+    marginTop: space.md,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: space.lg,
+    marginTop: space.md,
+  },
+  stat: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: space.xs,
+  },
+  statValue: {
+    fontSize: fontSize.sm,
+    fontWeight: '700',
+  },
+  statLabel: {
+    fontSize: fontSize.sm,
+  },
+});
+
+export const UserHoverCard = memo(UserHoverCardComponent);
+UserHoverCard.displayName = 'UserHoverCard';

package/src/user-hover-card/index.ts

@@ -0,0 +1,2 @@
+export { UserHoverCard } from './UserHoverCard';
+export type { UserHoverCardProps, UserHoverCardStat } from './types';

package/src/user-hover-card/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** A single labeled metric rendered in the {@link UserHoverCardProps.stats} row. */
+export interface UserHoverCardStat {
+  /** Human-readable label, e.g. `"Followers"`. */
+  label: string;
+  /** Pre-formatted value, e.g. `"1.2K"` or `42`. */
+  value: string | number;
+}
+
+export interface UserHoverCardProps {
+  /**
+   * Avatar image source — a URL string, or null/undefined to fall back to the
+   * deterministic name-based placeholder rendered by {@link Avatar}.
+   */
+  avatar?: string | null;
+  /** Canonical, already-resolved display name (an API contract — render directly). */
+  displayName: string;
+  /** Handle without the leading `@` (the component prefixes it). */
+  username?: string;
+  /** Optional short biography; truncated to a few lines. */
+  bio?: string;
+  /** Optional metrics row (e.g. Following / Followers). */
+  stats?: UserHoverCardStat[];
+  /** Whether to show the verified badge next to the display name. */
+  verified?: boolean;
+  /** Makes the identity area (avatar + name + handle) pressable. */
+  onPressProfile?: () => void;
+  /**
+   * Slot for a consumer-injected action — typically the app's SDK FollowButton.
+   * Bloom does NOT implement follow logic; it only renders the card.
+   */
+  action?: ReactNode;
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}