@oxyhq/bloom 0.6.11 → 0.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -172,6 +172,11 @@
     },
     "./loading": {
       "react-native": "./src/loading/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/loading/index.web.d.ts",
+        "import": "./lib/module/loading/index.web.js",
+        "require": "./lib/commonjs/loading/index.web.js"
+      },
       "import": {
         "types": "./lib/typescript/module/loading/index.d.ts",
         "default": "./lib/module/loading/index.js"

package/src/index.web.ts

@@ -54,7 +54,7 @@ export type {
   ErrorBoundaryFallbackContext,
 } from './error-boundary';
 export * from './avatar';
-export * from './loading';
+export * from './loading/index.web';
 export * as PromptInput from './prompt-input';
 export * from './switch';
 export { toast, type Toast } from './toast/index.web';

package/src/loading/Loading.web.tsx

@@ -0,0 +1,244 @@
+import React, { memo, useMemo } from 'react';
+import { View, Text, StyleSheet, type DimensionValue, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
+import { SpinnerIcon } from './SpinnerIcon.web';
+import type {
+  LoadingProps,
+  SpinnerLoadingProps,
+  TopLoadingProps,
+  SkeletonLoadingProps,
+  InlineLoadingProps,
+} from './types';
+
+const SIZE_CONFIG = {
+  small: { spinner: 20, text: 13 },
+  medium: { spinner: 24, text: 15 },
+  large: { spinner: 44, text: 16 },
+} as const;
+
+const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
+  size = 'medium',
+  color,
+  className,
+  text,
+  textStyle,
+  style,
+  showText = true,
+  iconSize,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
+  const spinnerColor = className ? 'currentColor' : (color ?? theme.colors.primary);
+  const textColor = color ?? theme.colors.textSecondary;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
+      {showText && text && (
+        <Text
+          style={[
+            styles.text,
+            { color: textColor, fontSize: sizeConfig.text, marginTop: 8 },
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+/**
+ * Web fork of the `top` variant.
+ *
+ * The native variant collapses/expands the container height and slides the
+ * spinner in/out with `react-native-reanimated`. Reanimated can't ship to a
+ * web bundle (its worklets Babel plugin has no web equivalent and importing it
+ * statically breaks the bundler), so this fork drives the same motion with CSS
+ * transitions — react-native-web emits `transition-*` style props to the DOM.
+ * The element stays mounted across `showLoading` toggles so both directions
+ * animate, exactly like the native `withTiming` on `height`, `opacity`, and
+ * `translateY`.
+ */
+const TopLoading: React.FC<TopLoadingProps> = ({
+  size = 'medium',
+  color,
+  style,
+  showLoading = true,
+  iconSize,
+  heightOffset = 0,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
+  const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
+  const spinnerColor = color ?? theme.colors.primary;
+
+  const duration = animation.duration.slow;
+  // `cubic-bezier(0.33, 1, 0.68, 1)` is the standard CSS approximation of
+  // reanimated's `Easing.out(Easing.cubic)` used by the native variant.
+  const easing = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+  const containerTransition = {
+    transitionProperty: 'height',
+    transitionDuration: `${duration}ms`,
+    transitionTimingFunction: easing,
+  } as ViewStyle;
+
+  const innerTransition = {
+    transitionProperty: 'opacity, transform',
+    transitionDuration: `${duration}ms`,
+    transitionTimingFunction: easing,
+  } as ViewStyle;
+
+  return (
+    <View
+      style={[styles.topContainer, { height: showLoading ? targetHeight : 0 }, containerTransition]}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.topLoadingView,
+          { height: targetHeight },
+          {
+            opacity: showLoading ? 1 : 0,
+            transform: [{ translateY: showLoading ? 0 : -targetHeight }],
+          },
+          innerTransition,
+          style,
+        ]}
+      >
+        {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+      </View>
+    </View>
+  );
+};
+
+const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
+  lines = 3,
+  width = '100%',
+  lineHeight = 16,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+  const skeletonColor = theme.colors.backgroundSecondary;
+
+  const skeletonLines = useMemo(
+    () =>
+      Array.from({ length: lines }, (_, index) => (
+        <View
+          key={index}
+          style={[
+            styles.skeletonLine,
+            {
+              width: (typeof width === 'string' ? width : `${width}%`) as DimensionValue,
+              height: lineHeight,
+              backgroundColor: skeletonColor,
+              marginBottom: index < lines - 1 ? 8 : 0,
+            },
+          ]}
+        />
+      )),
+    [lines, width, lineHeight, skeletonColor],
+  );
+
+  return (
+    <View style={[styles.skeletonContainer, style]} testID={testID}>
+      {skeletonLines}
+    </View>
+  );
+};
+
+const InlineLoading: React.FC<InlineLoadingProps> = ({
+  size = 'small',
+  color,
+  text,
+  style,
+  textStyle,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const spinnerColor = color ?? theme.colors.primary;
+  const textColor = theme.colors.textSecondary;
+
+  return (
+    <View style={[styles.inlineContainer, style]} testID={testID}>
+      {spinnerIcon ?? <SpinnerIcon size={SIZE_CONFIG.small.spinner} color={spinnerColor} />}
+      {text && (
+        <Text
+          style={[
+            { color: textColor, fontSize: sizeConfig.text, marginLeft: 8 },
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const LoadingComponent: React.FC<LoadingProps> = (props) => {
+  const variant = props.variant ?? 'spinner';
+
+  switch (variant) {
+    case 'top':
+      return <TopLoading {...(props as TopLoadingProps)} />;
+    case 'skeleton':
+      return <SkeletonLoading {...(props as SkeletonLoadingProps)} />;
+    case 'inline':
+      return <InlineLoading {...(props as InlineLoadingProps)} />;
+    case 'spinner':
+    default:
+      return <SpinnerLoading {...(props as SpinnerLoadingProps)} />;
+  }
+};
+
+export const Loading = memo(LoadingComponent);
+Loading.displayName = 'Loading';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  text: {
+    textAlign: 'center',
+  },
+  topContainer: {
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  topLoadingView: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  skeletonContainer: {
+    width: '100%',
+  },
+  skeletonLine: {
+    borderRadius: 4,
+  },
+  inlineContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/loading/SpinnerIcon.web.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+interface SpinnerIconProps {
+  size?: number;
+  color?: string;
+  className?: string;
+  style?: ViewStyle;
+}
+
+/**
+ * iOS-style spinner — 8 rotating blades with an opacity-gradient trail.
+ *
+ * Web fork of `./SpinnerIcon`. The native variant draws the blades with
+ * `react-native-svg` and spins them with `react-native-reanimated`. Neither
+ * dependency exists in a plain web bundle (and importing reanimated statically
+ * breaks any web bundler — its Babel worklets plugin has no web equivalent), so
+ * this fork renders the blades as plain `View`s and spins the container with a
+ * CSS `@keyframes` rotation injected once into `<head>`.
+ *
+ * The geometry mirrors the native SVG exactly. The SVG draws each blade on a
+ * 100×100 canvas as a `28×10` rounded rect with its top-left at `(67, 45)` —
+ * i.e. a blade whose centre sits `31` units to the right of the canvas centre
+ * `(50, 50)` — then rotates copies of it about the centre at
+ * `-90…225°` in `45°` steps with opacities `0…0.875`. Here each blade is a
+ * `View` centred on the container, then `rotate(θ) translateX(radius)` places
+ * its centre at distance `radius` from the container centre at angle `θ`. All
+ * lengths scale by `size / 100` so any `size` is pixel-identical to native.
+ */
+const SVG_CANVAS = 100;
+const BLADE_WIDTH = 28;
+const BLADE_HEIGHT = 10;
+/** Distance from canvas centre to a blade's centre: (67 + 28/2) − 50 = 31. */
+const BLADE_RADIUS = 31;
+const BLADE_RADIUS_CORNER = BLADE_HEIGHT / 2;
+
+/** Angle (deg) / opacity for each of the 8 blades, matching the native SVG. */
+const BLADES: ReadonlyArray<{ angle: number; opacity: number }> = [
+  { angle: -90, opacity: 0 },
+  { angle: -45, opacity: 0.125 },
+  { angle: 0, opacity: 0.25 },
+  { angle: 45, opacity: 0.375 },
+  { angle: 90, opacity: 0.5 },
+  { angle: 135, opacity: 0.625 },
+  { angle: 180, opacity: 0.75 },
+  { angle: 225, opacity: 0.875 },
+];
+
+const SPIN_DURATION_MS = 400;
+const KEYFRAMES_ID = 'bloom-spinner-keyframes';
+const SPIN_ANIMATION_NAME = 'bloomSpinnerRotate';
+
+/**
+ * CSS keyframes powering the spin. Injected once into `<head>` (keyed by id so
+ * multiple spinners and re-mounts don't duplicate the rule). Mirrors the
+ * native `withRepeat(withTiming(360, { duration: 400, easing: linear }))`.
+ */
+export const BLOOM_SPINNER_CSS = `
+@keyframes ${SPIN_ANIMATION_NAME} { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+`;
+
+function useKeyframes(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(KEYFRAMES_ID)) return;
+    const style = document.createElement('style');
+    style.id = KEYFRAMES_ID;
+    style.textContent = BLOOM_SPINNER_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
+export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
+  color = 'currentColor',
+  size = 26,
+  className,
+  style,
+}) => {
+  useKeyframes();
+
+  const scale = size / SVG_CANVAS;
+  const bladeWidth = BLADE_WIDTH * scale;
+  const bladeHeight = BLADE_HEIGHT * scale;
+  const bladeRadius = BLADE_RADIUS * scale;
+  const bladeCorner = BLADE_RADIUS_CORNER * scale;
+
+  return (
+    <View
+      {...(className ? ({ className } as Record<string, string>) : {})}
+      // `animation` is a real CSS prop on web; react-native-web passes it
+      // through to the DOM node. Typed as a cast because RN's ViewStyle has no
+      // `animation` key.
+      style={[
+        styles.container,
+        { width: size, height: size },
+        { animation: `${SPIN_ANIMATION_NAME} ${SPIN_DURATION_MS}ms linear infinite` } as ViewStyle,
+        style,
+      ]}
+    >
+      {BLADES.map(({ angle, opacity }) => (
+        <View
+          key={angle}
+          style={[
+            styles.blade,
+            {
+              width: bladeWidth,
+              height: bladeHeight,
+              borderRadius: bladeCorner,
+              backgroundColor: color,
+              opacity,
+              marginLeft: -bladeWidth / 2,
+              marginTop: -bladeHeight / 2,
+              transform: [{ rotate: `${angle}deg` }, { translateX: bladeRadius }],
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+SpinnerIcon.displayName = 'SpinnerIcon';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blade: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+  },
+});

package/src/loading/index.web.ts

@@ -0,0 +1,24 @@
+// Web variant of the `./loading` barrel.
+//
+// The default barrel (`./index.ts`) re-exports from `./Loading` and
+// `./SpinnerIcon`, which statically import `react-native-reanimated` (and lazily
+// `react-native-svg`). Reanimated has no web build — its worklets Babel plugin
+// is native-only and importing it statically breaks every web bundler (Vite,
+// webpack, Metro-web). The web forks (`./Loading.web`, `./SpinnerIcon.web`)
+// render the same components with CSS keyframes/transitions and no native deps.
+//
+// Web bundlers select this file via the `"browser"` export condition in
+// `package.json`'s `exports['./loading']`; native bundlers fall through to the
+// React Native build above. Types are platform-agnostic, so they come straight
+// from `./types`.
+export { Loading } from './Loading.web';
+export { SpinnerIcon } from './SpinnerIcon.web';
+export type {
+  LoadingProps,
+  LoadingVariant,
+  LoadingSize,
+  SpinnerLoadingProps,
+  TopLoadingProps,
+  SkeletonLoadingProps,
+  InlineLoadingProps,
+} from './types';

package/src/theme/apply-dark-class.ts

@@ -10,6 +10,11 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
 /**
  * Apply a color preset's CSS custom properties to the document root.
  * No-op on native — only affects web.
+ *
+ * Values are written as raw HSL triples (e.g. `185 100% 20%`), matching the
+ * shadcn/Tailwind convention where stylesheets wrap them themselves with
+ * `hsl(var(--primary))`. Writing pre-resolved `hsl(...)` values here would
+ * produce invalid `hsl(hsl(...))` in consuming stylesheets and break theming.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;
@@ -21,6 +26,6 @@ export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | '
   const root = document.documentElement.style;
 
   for (const [key, value] of Object.entries(vars)) {
-    root.setProperty(key, `hsl(${value})`);
+    root.setProperty(key, value);
   }
 }