@oxyhq/bloom 0.1.4 → 0.1.6

package/src/admonition/index.tsx

@@ -0,0 +1,186 @@
+import React, { createContext, useContext } from 'react';
+import { StyleSheet, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text as BaseText } from '../typography';
+import { Button as BaseButton, type ButtonProps } from '../button';
+import { CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon } from '../icons/CircleInfo';
+import { CircleX_Stroke2_Corner0_Rounded as CircleXIcon } from '../icons/CircleX';
+import { Warning_Stroke2_Corner0_Rounded as WarningIcon } from '../icons/Warning';
+import { EmojiSad_Stroke2_Corner0_Rounded as EmojiSadIcon } from '../icons/Emoji';
+
+type AdmonitionType = 'info' | 'tip' | 'warning' | 'error' | 'apology';
+
+type AdmonitionContextValue = {
+  type: AdmonitionType;
+};
+
+const AdmonitionContext = createContext<AdmonitionContextValue>({
+  type: 'info',
+});
+AdmonitionContext.displayName = 'AdmonitionContext';
+
+const ICON_MAP = {
+  info: CircleInfoIcon,
+  tip: CircleInfoIcon,
+  warning: WarningIcon,
+  error: CircleXIcon,
+  apology: EmojiSadIcon,
+} as const;
+
+export function Icon() {
+  const theme = useTheme();
+  const { type } = useContext(AdmonitionContext);
+
+  const IconComponent = ICON_MAP[type];
+
+  const fillMap: Record<AdmonitionType, string> = {
+    info: theme.colors.textSecondary,
+    tip: theme.colors.primary,
+    warning: theme.colors.warning,
+    error: theme.colors.error,
+    apology: theme.colors.textSecondary,
+  };
+
+  return <IconComponent fill={fillMap[type]} size="md" />;
+}
+
+export function Content({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return (
+    <View style={[styles.content, style]}>
+      {children}
+    </View>
+  );
+}
+
+export function Text({
+  children,
+  style,
+}: {
+  children?: React.ReactNode;
+  style?: TextStyle;
+}) {
+  return (
+    <BaseText style={style ? [styles.text, style] : styles.text}>
+      {children}
+    </BaseText>
+  );
+}
+
+export function Button({
+  children,
+  ...props
+}: Omit<ButtonProps, 'size' | 'variant'>) {
+  return (
+    <BaseButton size="small" {...props}>
+      {children}
+    </BaseButton>
+  );
+}
+
+export function Row({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return (
+    <View style={[styles.row, style]}>
+      {children}
+    </View>
+  );
+}
+
+export function Outer({
+  children,
+  type = 'info',
+  style,
+}: {
+  children: React.ReactNode;
+  type?: AdmonitionType;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useTheme();
+
+  const borderColorMap: Record<AdmonitionType, string> = {
+    info: theme.colors.border,
+    tip: theme.colors.primary,
+    warning: theme.colors.warning,
+    error: theme.colors.error,
+    apology: theme.colors.border,
+  };
+
+  return (
+    <AdmonitionContext.Provider value={{ type }}>
+      <View
+        style={[
+          styles.outer,
+          {
+            borderColor: borderColorMap[type],
+            backgroundColor: theme.colors.background,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </AdmonitionContext.Provider>
+  );
+}
+
+/**
+ * Simple all-in-one Admonition component for common use cases.
+ * For more control, compose with Outer, Row, Icon, Content, Text, and Button.
+ */
+export function Admonition({
+  children,
+  type,
+  style,
+}: {
+  children?: React.ReactNode;
+  type?: AdmonitionType;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return (
+    <Outer type={type} style={style}>
+      <Row>
+        <Icon />
+        <Content>
+          <Text>{children}</Text>
+        </Content>
+      </Row>
+    </Outer>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  row: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  content: {
+    gap: 8,
+    flex: 1,
+    minHeight: 20,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    paddingRight: 12,
+  },
+});

package/src/avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo, useRef, useState } from 'react';
 import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
@@ -118,6 +118,19 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   const radius = size / 2;
   const fallbackColor = theme.colors.backgroundTertiary;
 
+  // Reset error state when source changes (e.g., list item recycling
+  // or async URL resolution replacing an initial file ID).
+  // Pattern from https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const prevSourceRef = useRef(source);
+  const prevUriRef = useRef(uri);
+  if (prevSourceRef.current !== source || prevUriRef.current !== uri) {
+    prevSourceRef.current = source;
+    prevUriRef.current = uri;
+    if (errored) {
+      setErrored(false);
+    }
+  }
+
   // Resolve source prop: string → uri, object → ImageSourcePropType
   const resolvedUri = useMemo(() => {
     if (typeof source === 'string') return source;

package/src/context-menu/context.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared context definitions and hooks for ContextMenu (native + web).
+ */
+import { createContext, useContext } from 'react';
+
+import type { ContextMenuContextValue, ItemContextValue } from './types';
+
+// ---------------------------------------------------------------------------
+// ContextMenu context + hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Base context shared by both platforms. Each platform extends this with
+ * additional fields (native adds `control`, web adds `position`) by
+ * providing a compatible superset value.
+ */
+export const ContextMenuContext = createContext<ContextMenuContextValue | null>(null);
+ContextMenuContext.displayName = 'ContextMenuContext';
+
+export function useContextMenuContext(): ContextMenuContextValue {
+  const ctx = useContext(ContextMenuContext);
+  if (!ctx) {
+    throw new Error(
+      'ContextMenu components must be used within a ContextMenu.Root',
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Item context + hook
+// ---------------------------------------------------------------------------
+
+export const ItemCtx = createContext<ItemContextValue | null>(null);
+ItemCtx.displayName = 'ContextMenuItemContext';
+
+export function useItemContext(): ItemContextValue {
+  const ctx = useContext(ItemCtx);
+  if (!ctx) {
+    throw new Error(
+      'ContextMenu.ItemText/ItemIcon must be used within a ContextMenu.Item',
+    );
+  }
+  return ctx;
+}

package/src/context-menu/index.tsx

@@ -0,0 +1,285 @@
+/**
+ * ContextMenu — Native implementation
+ *
+ * Opens a bottom-sheet menu via Bloom's Dialog when the user long-presses
+ * the trigger.  The menu body is rendered through Bloom's Menu component
+ * pattern using Dialog.Outer / Dialog.ScrollableInner.
+ */
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import * as Dialog from '../dialog';
+import { useInteractionState } from '../hooks/useInteractionState';
+import { ItemCtx, useItemContext } from './context';
+import type {
+  ContextMenuContextValue,
+  GroupProps,
+  ItemContextValue,
+  ItemIconProps,
+  ItemProps,
+  ItemTextProps,
+  OuterProps,
+  TriggerProps,
+} from './types';
+
+// ---------------------------------------------------------------------------
+// Native-specific context (extends base with Dialog control)
+// ---------------------------------------------------------------------------
+
+type NativeContextMenuContextValue = ContextMenuContextValue & {
+  control: Dialog.DialogControlProps;
+};
+
+const NativeContextMenuContext = createContext<NativeContextMenuContextValue | null>(null);
+NativeContextMenuContext.displayName = 'NativeContextMenuContext';
+
+function useNativeContextMenuContext(): NativeContextMenuContextValue {
+  const ctx = useContext(NativeContextMenuContext);
+  if (!ctx) {
+    throw new Error(
+      'ContextMenu components must be used within a ContextMenu.Root',
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
+export function Root({ children }: { children: React.ReactNode }) {
+  const control = Dialog.useDialogControl();
+
+  const ctx = useMemo(
+    () => ({
+      isOpen: false,
+      open: () => control.open(),
+      close: () => control.close(),
+      control,
+    }),
+    [control],
+  );
+
+  return (
+    <NativeContextMenuContext.Provider value={ctx}>
+      {children}
+    </NativeContextMenuContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Trigger
+// ---------------------------------------------------------------------------
+
+export function Trigger({ children, label, hint, style }: TriggerProps) {
+  const { open } = useNativeContextMenuContext();
+  const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
+
+  return (
+    <View style={style}>
+      {children({
+        isOpen: false,
+        state: {
+          hovered: false,
+          focused,
+          pressed: false,
+        },
+        props: {
+          onPress: null,
+          onLongPress: open,
+          onFocus,
+          onBlur,
+          accessibilityLabel: label,
+          accessibilityHint: hint ?? 'Long press to open context menu',
+        },
+      })}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Outer  (the menu container — uses Bloom Dialog as a bottom sheet)
+// ---------------------------------------------------------------------------
+
+export function Outer({ children, style }: OuterProps) {
+  const { control } = useNativeContextMenuContext();
+
+  return (
+    <Dialog.Outer control={control} preventExpansion>
+      <Dialog.Handle />
+      <NativeContextMenuContext.Provider
+        value={{
+          isOpen: true,
+          open: () => control.open(),
+          close: () => control.close(),
+          control,
+        }}
+      >
+        <Dialog.ScrollableInner label="Context menu">
+          <View style={[styles.outerContent, style]}>{children}</View>
+        </Dialog.ScrollableInner>
+      </NativeContextMenuContext.Provider>
+    </Dialog.Outer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item
+// ---------------------------------------------------------------------------
+
+export function Item({
+  children,
+  label,
+  onPress,
+  disabled = false,
+  style,
+}: ItemProps) {
+  const theme = useTheme();
+  const { close } = useNativeContextMenuContext();
+  const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState();
+
+  const isHighlighted = (focused || pressed) && !disabled;
+
+  const handlePress = useCallback(() => {
+    close();
+    onPress();
+  }, [close, onPress]);
+
+  const itemCtx = useMemo<ItemContextValue>(
+    () => ({ disabled }),
+    [disabled],
+  );
+
+  return (
+    <Pressable
+      accessibilityHint=""
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onPress={handlePress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={[
+        styles.item,
+        {
+          backgroundColor: theme.colors.contrast50,
+          borderColor: theme.colors.borderLight,
+        },
+        isHighlighted && {
+          backgroundColor: theme.colors.backgroundSecondary,
+        },
+        style,
+      ]}
+    >
+      <ItemCtx.Provider value={itemCtx}>{children}</ItemCtx.Provider>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ItemText
+// ---------------------------------------------------------------------------
+
+export function ItemText({ children, style }: ItemTextProps) {
+  const theme = useTheme();
+  const { disabled } = useItemContext();
+
+  return (
+    <Text
+      numberOfLines={2}
+      ellipsizeMode="middle"
+      style={[
+        styles.itemText,
+        { color: disabled ? theme.colors.textTertiary : theme.colors.text },
+        ...(style ? [style] : []),
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ItemIcon
+// ---------------------------------------------------------------------------
+
+export function ItemIcon({ icon: Comp }: ItemIconProps) {
+  const theme = useTheme();
+  const { disabled } = useItemContext();
+
+  return (
+    <Comp
+      size="lg"
+      fill={disabled ? theme.colors.textTertiary : theme.colors.textSecondary}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Group
+// ---------------------------------------------------------------------------
+
+export function Group({ children, style }: GroupProps) {
+  return <View style={style}>{children}</View>;
+}
+
+// ---------------------------------------------------------------------------
+// Divider
+// ---------------------------------------------------------------------------
+
+export function Divider() {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.divider,
+        { borderTopColor: theme.colors.borderLight },
+      ]}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  outerContent: {
+    gap: 4,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    minHeight: 44,
+    paddingVertical: 10,
+  },
+  itemText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  divider: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    marginVertical: 4,
+  },
+});