@oxyhq/bloom 0.1.0

package/lib/typescript/module/theme/types.d.ts

@@ -0,0 +1,39 @@
+export type ThemeMode = 'light' | 'dark' | 'system' | 'adaptive';
+export interface ThemeColors {
+    background: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    border: string;
+    borderLight: string;
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    secondary: string;
+    tint: string;
+    icon: string;
+    iconActive: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    primarySubtle: string;
+    primarySubtleForeground: string;
+    negative: string;
+    negativeForeground: string;
+    negativeSubtle: string;
+    negativeSubtleForeground: string;
+    contrast50: string;
+    card: string;
+    shadow: string;
+    overlay: string;
+}
+export interface Theme {
+    mode: 'light' | 'dark';
+    colors: ThemeColors;
+    isDark: boolean;
+    isLight: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/lib/typescript/module/theme/use-theme.d.ts

@@ -0,0 +1,5 @@
+import type { Theme, ThemeColors } from './types';
+export declare function useTheme(): Theme;
+export declare function useThemeColor(colorKey: keyof ThemeColors): string;
+export declare function useBloomTheme(): import("./BloomThemeProvider").BloomThemeContextValue;
+//# sourceMappingURL=use-theme.d.ts.map

package/lib/typescript/module/theme/use-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-theme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,QAAQ,IAAI,KAAK,CAMhC;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,WAAW,GAAG,MAAM,CAGjE;AAED,wBAAgB,aAAa,0DAM5B"}

package/package.json

@@ -0,0 +1,260 @@
+{
+  "name": "@oxyhq/bloom",
+  "version": "0.1.0",
+  "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/commonjs/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./theme": {
+      "react-native": "./src/theme/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/theme/index.d.ts",
+        "default": "./lib/module/theme/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/theme/index.d.ts",
+        "default": "./lib/commonjs/theme/index.js"
+      }
+    },
+    "./portal": {
+      "react-native": "./src/portal/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/portal/index.d.ts",
+        "default": "./lib/module/portal/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/portal/index.d.ts",
+        "default": "./lib/commonjs/portal/index.js"
+      }
+    },
+    "./dialog": {
+      "react-native": "./src/dialog/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/dialog/index.d.ts",
+        "default": "./lib/module/dialog/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/dialog/index.d.ts",
+        "default": "./lib/commonjs/dialog/index.js"
+      }
+    },
+    "./prompt": {
+      "react-native": "./src/prompt/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/prompt/index.d.ts",
+        "default": "./lib/module/prompt/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/prompt/index.d.ts",
+        "default": "./lib/commonjs/prompt/index.js"
+      }
+    },
+    "./button": {
+      "react-native": "./src/button/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/button/index.d.ts",
+        "default": "./lib/module/button/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/button/index.d.ts",
+        "default": "./lib/commonjs/button/index.js"
+      }
+    },
+    "./grouped-buttons": {
+      "react-native": "./src/grouped-buttons/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/grouped-buttons/index.d.ts",
+        "default": "./lib/module/grouped-buttons/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/grouped-buttons/index.d.ts",
+        "default": "./lib/commonjs/grouped-buttons/index.js"
+      }
+    },
+    "./divider": {
+      "react-native": "./src/divider/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/divider/index.d.ts",
+        "default": "./lib/module/divider/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/divider/index.d.ts",
+        "default": "./lib/commonjs/divider/index.js"
+      }
+    },
+    "./radio-indicator": {
+      "react-native": "./src/radio-indicator/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/radio-indicator/index.d.ts",
+        "default": "./lib/module/radio-indicator/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/radio-indicator/index.d.ts",
+        "default": "./lib/commonjs/radio-indicator/index.js"
+      }
+    },
+    "./collapsible": {
+      "react-native": "./src/collapsible/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/collapsible/index.d.ts",
+        "default": "./lib/module/collapsible/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/collapsible/index.d.ts",
+        "default": "./lib/commonjs/collapsible/index.js"
+      }
+    },
+    "./error-boundary": {
+      "react-native": "./src/error-boundary/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/error-boundary/index.d.ts",
+        "default": "./lib/module/error-boundary/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/error-boundary/index.d.ts",
+        "default": "./lib/commonjs/error-boundary/index.js"
+      }
+    },
+    "./avatar": {
+      "react-native": "./src/avatar/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/avatar/index.d.ts",
+        "default": "./lib/module/avatar/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/avatar/index.d.ts",
+        "default": "./lib/commonjs/avatar/index.js"
+      }
+    },
+    "./loading": {
+      "react-native": "./src/loading/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/loading/index.d.ts",
+        "default": "./lib/module/loading/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/loading/index.d.ts",
+        "default": "./lib/commonjs/loading/index.js"
+      }
+    },
+    "./prompt-input": {
+      "react-native": "./src/prompt-input/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/prompt-input/index.d.ts",
+        "default": "./lib/module/prompt-input/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/prompt-input/index.d.ts",
+        "default": "./lib/commonjs/prompt-input/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui",
+    "components",
+    "dialog",
+    "prompt",
+    "button",
+    "theme",
+    "avatar",
+    "loading",
+    "divider",
+    "collapsible",
+    "error-boundary",
+    "prompt-input",
+    "ai"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OxyHQ/Bloom.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "bob build",
+    "typescript": "tsc --noEmit",
+    "clean": "rm -rf lib",
+    "prepare": "bob build || true",
+    "release": "rm -rf lib && npm run build && release-it"
+  },
+  "devDependencies": {
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@types/react": "~19.1.0",
+    "@types/react-native": "*",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.16",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.2",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "^15.15.3",
+    "release-it": "^19.0.6",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  }
+}

package/src/avatar/Avatar.tsx

@@ -0,0 +1,217 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { AvatarProps } from './types';
+
+// Squircle clip path normalized to 0–1 coordinate space (viewBox="0 0 1 1").
+const SQUIRCLE_PATH =
+  'M0 0.5 L0.00122 0.31674 L0.00489 0.25123 L0.01103 0.20331 L0.01969 0.16478 L0.03097 0.13257 L0.04495 0.10518 L0.0618 0.08177 L0.08177 0.0618 L0.10518 0.04495 L0.13257 0.03097 L0.16478 0.01969 L0.20331 0.01103 L0.25123 0.00489 L0.31674 0.00122 L0.5 0' +
+  ' L0.68895 0.0014 L0.7564 0.00561 L0.80559 0.01267 L0.84499 0.02264 L0.87771 0.03564 L0.9053 0.05181 L0.92862 0.07138 L0.94819 0.0947 L0.96436 0.12228 L0.97736 0.15501 L0.98733 0.19441 L0.99439 0.2436 L0.9986 0.31105 L1 0.5' +
+  ' L0.9986 0.68895 L0.99439 0.7564 L0.98733 0.80559 L0.97736 0.84499 L0.96436 0.87771 L0.94819 0.9053 L0.92862 0.92862 L0.9053 0.94819 L0.87771 0.96436 L0.84499 0.97736 L0.80559 0.98733 L0.7564 0.99439 L0.68895 0.9986 L0.5 1' +
+  ' L0.31105 0.9986 L0.2436 0.99439 L0.19441 0.98733 L0.15501 0.97736 L0.12228 0.96436 L0.0947 0.94819 L0.07138 0.92862 L0.05181 0.9053 L0.03564 0.87771 L0.02264 0.84499 L0.01267 0.80559 L0.00561 0.7564 L0.0014 0.68895 L0 0.5Z';
+
+let clipIdCounter = 0;
+
+// Lazy-loaded SVG components for squircle shape.
+// Returns null if react-native-svg is not installed.
+type SvgModuleType = typeof import('react-native-svg');
+let svgModule: SvgModuleType | null = null;
+let svgModuleResolved = false;
+
+function getSvgModule(): SvgModuleType | null {
+  if (!svgModuleResolved) {
+    svgModuleResolved = true;
+    try {
+      svgModule = require('react-native-svg');
+    } catch {
+      svgModule = null;
+    }
+  }
+  return svgModule;
+}
+
+function SquircleImage({
+  uri,
+  fallbackSource,
+  size,
+  fallbackColor,
+  onError,
+}: {
+  uri?: string;
+  fallbackSource?: AvatarProps['fallbackSource'];
+  size: number;
+  fallbackColor: string;
+  onError: () => void;
+}) {
+  const svg = getSvgModule();
+  if (!svg) {
+    // Fallback to circle if react-native-svg is not installed
+    return <CircleFallback size={size} fallbackColor={fallbackColor} />;
+  }
+
+  const { default: Svg, Defs, ClipPath, Path, Image: SvgImage } = svg;
+  const clipId = useMemo(() => `bloom-sqc${clipIdCounter++}`, []);
+
+  const href = uri ? { uri } : fallbackSource;
+  if (!href) {
+    return <CircleFallback size={size} fallbackColor={fallbackColor} />;
+  }
+
+  return (
+    <>
+      {/* Hidden RN Image for error detection on remote URIs */}
+      {uri && (
+        <Image
+          source={{ uri }}
+          style={styles.errorDetector}
+          onError={onError}
+        />
+      )}
+      <Svg width={size} height={size} viewBox="0 0 1 1">
+        <Defs>
+          <ClipPath id={clipId}>
+            <Path d={SQUIRCLE_PATH} />
+          </ClipPath>
+        </Defs>
+        <SvgImage
+          href={href}
+          width={1}
+          height={1}
+          preserveAspectRatio="xMidYMid slice"
+          clipPath={`url(#${clipId})`}
+        />
+      </Svg>
+    </>
+  );
+}
+
+function CircleFallback({ size, fallbackColor }: { size: number; fallbackColor: string }) {
+  const radius = size / 2;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius,
+        backgroundColor: fallbackColor,
+      }}
+    />
+  );
+}
+
+const AvatarComponent: React.FC<AvatarProps> = ({
+  source,
+  uri,
+  fallbackSource,
+  size = 40,
+  verified = false,
+  verifiedIcon,
+  shape = 'circle',
+  style,
+  imageStyle,
+  onPress,
+  testID,
+}) => {
+  const [errored, setErrored] = useState(false);
+  const theme = useTheme();
+  const radius = size / 2;
+  const fallbackColor = theme.colors.backgroundTertiary;
+
+  // Resolve source prop: string → uri, object → ImageSourcePropType
+  const resolvedUri = useMemo(() => {
+    if (typeof source === 'string') return source;
+    return uri;
+  }, [source, uri]);
+
+  const resolvedImageSource = useMemo(() => {
+    if (source != null && typeof source !== 'string') return source;
+    return undefined;
+  }, [source]);
+
+  const effectiveUri = errored ? undefined : resolvedUri;
+
+  const imageSource = useMemo(() => {
+    if (effectiveUri) return { uri: effectiveUri };
+    if (resolvedImageSource) return resolvedImageSource;
+    return fallbackSource;
+  }, [effectiveUri, resolvedImageSource, fallbackSource]);
+
+  const content = (
+    <View style={[styles.container, { width: size, height: size }, style]} testID={testID}>
+      {shape === 'squircle' ? (
+        <SquircleImage
+          uri={effectiveUri}
+          fallbackSource={fallbackSource}
+          size={size}
+          fallbackColor={fallbackColor}
+          onError={() => setErrored(true)}
+        />
+      ) : (
+        <View style={[styles.imageContainer, { width: size, height: size, borderRadius: radius }]}>
+          {imageSource ? (
+            <Image
+              source={imageSource}
+              onError={() => setErrored(true)}
+              resizeMode="cover"
+              style={[StyleSheet.absoluteFillObject, { borderRadius: radius }, imageStyle]}
+            />
+          ) : (
+            <CircleFallback size={size} fallbackColor={fallbackColor} />
+          )}
+        </View>
+      )}
+
+      {verified && verifiedIcon && (
+        <View
+          style={[
+            styles.verifiedBadge,
+            {
+              width: size * 0.36,
+              height: size * 0.36,
+            },
+          ]}
+        >
+          {verifiedIcon}
+        </View>
+      )}
+    </View>
+  );
+
+  if (onPress) {
+    return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
+  }
+
+  return content;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'visible',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  verifiedBadge: {
+    position: 'absolute',
+    bottom: -2,
+    right: -2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  errorDetector: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});
+
+export const Avatar = memo(AvatarComponent);
+Avatar.displayName = 'Avatar';

package/src/avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarShape } from './types';

package/src/avatar/types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle, ImageStyle } from 'react-native';
+
+export type AvatarShape = 'circle' | 'squircle';
+
+export interface AvatarProps {
+  /**
+   * Flexible image source — accepts a URL string, an ImageSourcePropType
+   * (e.g. require('./img.png') or { uri: '...' }), or null/undefined.
+   * Takes precedence over the `uri` prop when both are provided.
+   */
+  source?: string | ImageSourcePropType | null;
+  /** Direct URI string. Use `source` for more flexible input. */
+  uri?: string;
+  /** Fallback image source when source/uri is missing or errors (defaults to colored circle) */
+  fallbackSource?: ImageSourcePropType;
+  /** Avatar size in pixels (defaults to 40) */
+  size?: number;
+  /** Whether to show a verified badge */
+  verified?: boolean;
+  /** Custom verified badge icon (rendered at bottom-right) */
+  verifiedIcon?: ReactNode;
+  /** Shape of the avatar (defaults to 'circle'). 'squircle' requires react-native-svg. */
+  shape?: AvatarShape;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Image style (circle shape only) */
+  imageStyle?: StyleProp<ImageStyle>;
+  /** Press handler — wraps avatar in TouchableOpacity when provided */
+  onPress?: () => void;
+  testID?: string;
+}