@oxyhq/bloom 0.6.6 → 0.6.8

package/src/dialog/Dialog.tsx

@@ -256,11 +256,11 @@ function getActionPalette(
     case 'cancel':
       return { background: colors.contrast50, foreground: colors.text };
     case 'default':
-      return { background: colors.primary, foreground: '#FFFFFF' };
+      return { background: colors.primary, foreground: colors.primaryForeground };
     /* c8 ignore next 2 -- TS exhaustiveness check guards this branch */
     default: {
       const _exhaustive: never = color;
-      return { background: colors.primary, foreground: '#FFFFFF' };
+      return { background: colors.primary, foreground: colors.primaryForeground };
     }
   }
 }

package/src/dialog/Dialog.web.tsx

@@ -330,11 +330,11 @@ function getActionPalette(
     case 'cancel':
       return { background: colors.contrast50, foreground: colors.text };
     case 'default':
-      return { background: colors.primary, foreground: '#FFFFFF' };
+      return { background: colors.primary, foreground: colors.primaryForeground };
     /* c8 ignore next 3 -- TS exhaustiveness guard */
     default: {
       const _exhaustive: never = color;
-      return { background: colors.primary, foreground: '#FFFFFF' };
+      return { background: colors.primary, foreground: colors.primaryForeground };
     }
   }
 }

package/src/hooks/mergeRefs.ts

@@ -1,17 +1,28 @@
-import React from 'react';
+import type { Ref, RefObject } from 'react';
 
 /**
  * Merges multiple React refs into a single callback ref.
+ *
+ * The returned callback is annotated as `(instance: T | null) => void`
+ * rather than `React.RefCallback<T>`. `RefCallback<T>` permits a cleanup
+ * return (`() => VoidOrUndefinedOnly`), and `VoidOrUndefinedOnly` is built on
+ * a `unique symbol` that is distinct per copy of `@types/react`. When a
+ * consumer resolves two copies of the React types (e.g. Bloom's pinned
+ * `@types/react` and the app's own), TypeScript reports the cleanup branch as
+ * "two different types with this name exist, but they are unrelated" and the
+ * host element's `ref` overload fails to match. A plain `void` return carries
+ * no copy-specific identity, so the callback stays assignable to `Ref<T>` from
+ * any copy of the types.
  */
 export function mergeRefs<T>(
-  refs: Array<React.Ref<T> | null | undefined>,
-): React.RefCallback<T> {
+  refs: Array<Ref<T> | null | undefined>,
+): (instance: T | null) => void {
   return (instance: T | null) => {
     for (const ref of refs) {
       if (typeof ref === 'function') {
         ref(instance);
       } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = instance;
+        (ref as RefObject<T | null>).current = instance;
       }
     }
   };

package/src/prompt-input/SubmitButton.tsx

@@ -37,7 +37,7 @@ export function PromptInputSubmitButton({
         testID={testID}
       >
         {stopIcon ?? (
-          <Text style={{ fontSize: 12, color: '#FFFFFF', fontWeight: '700' }}>■</Text>
+          <Text style={{ fontSize: 12, color: theme.colors.primaryForeground, fontWeight: '700' }}>■</Text>
         )}
       </TouchableOpacity>
     );
@@ -67,7 +67,7 @@ export function PromptInputSubmitButton({
       testID={testID}
     >
       {submitIcon ?? (
-        <Text style={{ fontSize: 16, color: '#FFFFFF', fontWeight: '700' }}>↑</Text>
+        <Text style={{ fontSize: 16, color: theme.colors.primaryForeground, fontWeight: '700' }}>↑</Text>
       )}
     </TouchableOpacity>
   );

package/src/radio-indicator/RadioIndicator.tsx

@@ -15,6 +15,10 @@ const RadioIndicatorComponent: React.FC<RadioIndicatorProps> = ({
   const theme = useTheme();
   const resolvedSelectedColor = selectedColor ?? theme.colors.primary;
   const resolvedBorderColor = borderColor ?? theme.colors.border;
+  // The inner dot sits on `resolvedSelectedColor`. When that is the theme
+  // primary, use the preset's readable foreground (white for blue, black for
+  // yellow). A caller-supplied custom color falls back to white.
+  const dotColor = selectedColor == null ? theme.colors.primaryForeground : '#FFFFFF';
   const dotSize = size * 0.5;
 
   return (
@@ -40,7 +44,7 @@ const RadioIndicatorComponent: React.FC<RadioIndicatorProps> = ({
             width: dotSize,
             height: dotSize,
             borderRadius: dotSize / 2,
-            backgroundColor: '#FFFFFF',
+            backgroundColor: dotColor,
           }}
         />
       )}

package/src/tabs/Tabs.tsx

@@ -154,7 +154,7 @@ const TabComponent: React.FC<TabProps> = ({
     };
 
     if (variant === 'outlined' && isSelected) {
-      base.color = '#fff';
+      base.color = theme.colors.primaryForeground;
     } else if (isSelected) {
       base.color = theme.colors.primary;
     } else {

package/src/text-field/index.tsx

@@ -22,7 +22,7 @@ import {
   type TextStyleProp,
   type ViewStyleProp,
 } from '../styles';
-import { type Props as SVGIconProps } from '../icons/common';
+import { type IconStyle, type Props as SVGIconProps } from '../icons/common';
 import { Text } from '../typography';
 
 const Context = createContext<{
@@ -270,12 +270,11 @@ export function Icon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }
   const ctx = useContext(Context);
 
   const { hover, focus, errorHover, errorFocus } = useMemo(() => {
-    return {
-      hover: { color: theme.colors.text } as TextStyle,
-      focus: { color: theme.colors.primary } as TextStyle,
-      errorHover: { color: theme.colors.error } as TextStyle,
-      errorFocus: { color: theme.colors.error } as TextStyle,
-    };
+    const hover: IconStyle = { color: theme.colors.text };
+    const focus: IconStyle = { color: theme.colors.primary };
+    const errorHover: IconStyle = { color: theme.colors.error };
+    const errorFocus: IconStyle = { color: theme.colors.error };
+    return { hover, focus, errorHover, errorFocus };
   }, [theme]);
 
   return (

package/src/theme/BloomThemeProvider.tsx

@@ -53,6 +53,7 @@ export function buildTheme(appColor: AppColorName, resolved: 'light' | 'dark', i
     const mutedForeground = hslVarToCSS(vars['--muted-foreground'] ?? '0 0% 50%');
 
     const primaryColor = hslVarToCSS(vars['--primary'] ?? '0 0% 50%');
+    const primaryForeground = hslVarToCSS(vars['--primary-foreground'] ?? '0 0% 100%');
 
     themeColors = {
       background,
@@ -67,6 +68,7 @@ export function buildTheme(appColor: AppColorName, resolved: 'light' | 'dark', i
       borderLight: hslVarToCSS(vars['--input'] ?? '0 0% 20%'),
 
       primary: primaryColor,
+      primaryForeground,
       primaryLight: surface,
       primaryDark: background,
 

package/src/theme/adaptive-colors.ts

@@ -19,6 +19,7 @@ function getAndroidColors(): ThemeColors | null {
       border: c(d.outlineVariant),
       borderLight: c(d.outline),
       primary: c(d.primary),
+      primaryForeground: c(d.onPrimary),
       primaryLight: c(d.primaryContainer),
       primaryDark: c(d.onPrimaryContainer),
       secondary: c(d.secondary),
@@ -61,6 +62,7 @@ function getIOSColors(): ThemeColors | null {
       border: c(i.separator),
       borderLight: c(i.opaqueSeparator),
       primary: c(i.systemBlue),
+      primaryForeground: '#FFFFFF',
       primaryLight: c(i.systemGray6),
       primaryDark: c(i.systemBlue),
       secondary: c(i.systemPurple),

package/src/theme/types.ts

@@ -13,6 +13,7 @@ export interface ThemeColors {
   borderLight: string;
 
   primary: string;
+  primaryForeground: string;
   primaryLight: string;
   primaryDark: string;