@oxyhq/bloom 0.50.2 → 0.51.0

package/src/toast/Toast.tsx

@@ -1,269 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import {
-  View,
-  Text as RNText,
-  Pressable,
-  StyleSheet,
-  type GestureResponderEvent,
-} from 'react-native';
-
-import { useTheme } from '../theme/use-theme';
-import { useInteractionState } from '../hooks/useInteractionState';
-import { bloomShadowStyle } from '../design-tokens/shadows';
-import type { ThemeColors } from '../theme/types';
-import { dismiss } from './sonner';
-import type { ToastType } from './types';
-
-const ToastConfigContext = createContext<{
-  id: string;
-  type: ToastType;
-}>({
-  id: '',
-  type: 'default',
-});
-ToastConfigContext.displayName = 'ToastConfigContext';
-
-export function ToastConfigProvider({
-  children,
-  id,
-  type,
-}: {
-  children: React.ReactNode;
-  id: string;
-  type: ToastType;
-}) {
-  return (
-    <ToastConfigContext.Provider
-      value={useMemo(() => ({ id, type }), [id, type])}>
-      {children}
-    </ToastConfigContext.Provider>
-  );
-}
-
-export function Outer({ children }: { children: React.ReactNode }) {
-  const { colors } = useTheme();
-  const { type } = useContext(ToastConfigContext);
-  const toastColors = useToastColors({ type, colors });
-
-  return (
-    <View
-      style={[
-        styles.outer,
-        {
-          backgroundColor: toastColors.backgroundColor,
-          borderColor: toastColors.borderColor,
-        },
-      ]}>
-      {children}
-    </View>
-  );
-}
-
-export function Icon({ icon }: { icon?: React.ReactNode }) {
-  const { colors } = useTheme();
-  const { type } = useContext(ToastConfigContext);
-  const toastColors = useToastColors({ type, colors });
-
-  if (!icon) {
-    return null;
-  }
-
-  if (React.isValidElement(icon)) {
-    return React.cloneElement(icon as React.ReactElement<{ color?: string }>, {
-      color: toastColors.iconColor,
-    });
-  }
-
-  return <>{icon}</>;
-}
-
-export function Text({ children }: { children: React.ReactNode }) {
-  const { colors } = useTheme();
-  const { type } = useContext(ToastConfigContext);
-  const toastColors = useToastColors({ type, colors });
-
-  return (
-    <View style={styles.textContainer}>
-      <RNText
-        selectable={false}
-        style={[
-          styles.text,
-          { color: toastColors.textColor },
-        ]}>
-        {children}
-      </RNText>
-    </View>
-  );
-}
-
-export function Action({
-  children,
-  onPress,
-  ...rest
-}: {
-  children: React.ReactNode;
-  onPress?: (e: GestureResponderEvent) => void;
-  label?: string;
-}) {
-  const { colors } = useTheme();
-  const { type, id } = useContext(ToastConfigContext);
-  const actionColors = useActionColors({ type, colors });
-  // Drive the pressed visual via state, not Pressable's function-form `style`
-  // / function-children, which NativeWind v4's css-interop swallows (dropping
-  // the base button style: padding, radius, alignSelf).
-  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
-    useInteractionState();
-
-  const handlePress = (e: GestureResponderEvent) => {
-    dismiss(id);
-    onPress?.(e);
-  };
-
-  return (
-    <Pressable
-      {...rest}
-      onPress={handlePress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      style={[
-        styles.actionButton,
-        {
-          backgroundColor: pressed
-            ? actionColors.interacted.backgroundColor
-            : actionColors.base.backgroundColor,
-        },
-      ]}>
-      <RNText
-        style={[
-          styles.actionText,
-          {
-            color: pressed
-              ? actionColors.interacted.textColor
-              : actionColors.base.textColor,
-          },
-        ]}>
-        {children}
-      </RNText>
-    </Pressable>
-  );
-}
-
-function useToastColors({ type, colors }: { type: ToastType; colors: ThemeColors }) {
-  return useMemo(() => {
-    const colorMap: Record<ToastType, {
-      backgroundColor: string;
-      borderColor: string;
-      iconColor: string;
-      textColor: string;
-    }> = {
-      default: {
-        backgroundColor: colors.backgroundSecondary,
-        borderColor: colors.border,
-        iconColor: colors.text,
-        textColor: colors.text,
-      },
-      success: {
-        backgroundColor: colors.primarySubtle,
-        borderColor: colors.primary,
-        iconColor: colors.primarySubtleForeground,
-        textColor: colors.primarySubtleForeground,
-      },
-      error: {
-        backgroundColor: colors.negativeSubtle,
-        borderColor: colors.negative,
-        iconColor: colors.negativeSubtleForeground,
-        textColor: colors.negativeSubtleForeground,
-      },
-      warning: {
-        backgroundColor: colors.backgroundSecondary,
-        borderColor: colors.border,
-        iconColor: colors.warning,
-        textColor: colors.text,
-      },
-      info: {
-        backgroundColor: colors.backgroundSecondary,
-        borderColor: colors.border,
-        iconColor: colors.info,
-        textColor: colors.text,
-      },
-    };
-    return colorMap[type];
-  }, [type, colors]);
-}
-
-function useActionColors({ type, colors }: { type: ToastType; colors: ThemeColors }) {
-  return useMemo(() => {
-    const base = {
-      base: {
-        textColor: colors.textSecondary,
-        backgroundColor: colors.backgroundTertiary,
-      },
-      interacted: {
-        textColor: colors.text,
-        backgroundColor: colors.contrast50,
-      },
-    };
-
-    const colorMap: Record<ToastType, typeof base> = {
-      default: base,
-      warning: base,
-      info: base,
-      success: {
-        base: {
-          textColor: colors.primarySubtleForeground,
-          backgroundColor: colors.primarySubtle,
-        },
-        interacted: {
-          textColor: colors.primaryDark,
-          backgroundColor: colors.primaryLight,
-        },
-      },
-      error: {
-        base: {
-          textColor: colors.negativeSubtleForeground,
-          backgroundColor: colors.negativeSubtle,
-        },
-        interacted: {
-          textColor: colors.negativeForeground,
-          backgroundColor: colors.negative,
-        },
-      },
-    };
-
-    return colorMap[type];
-  }, [type, colors]);
-}
-
-const styles = StyleSheet.create({
-  outer: {
-    flex: 1,
-    padding: 16,
-    borderRadius: 8,
-    borderWidth: 1,
-    flexDirection: 'row',
-    gap: 8,
-    paddingVertical: 14,
-    // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
-    ...bloomShadowStyle('s'),
-  },
-  textContainer: {
-    flex: 1,
-    paddingRight: 16,
-  },
-  text: {
-    fontSize: 15,
-    fontWeight: '500',
-    lineHeight: 20,
-  },
-  actionButton: {
-    paddingVertical: 5,
-    paddingHorizontal: 9,
-    borderRadius: 6,
-    alignSelf: 'center',
-  },
-  actionText: {
-    fontSize: 15,
-    fontWeight: '500',
-    lineHeight: 20,
-  },
-});

package/src/toast/const.ts

@@ -1 +0,0 @@
-export const DURATION = 3e3;

package/src/toast/index.web.tsx

@@ -1,101 +0,0 @@
-import React, { isValidElement } from 'react';
-import { nanoid } from 'nanoid/non-secure';
-import { toast as sonner, Toaster } from 'sonner';
-
-import { DURATION } from './const';
-import {
-  Icon as ToastIcon,
-  Outer as ToastOuter,
-  Text as ToastText,
-  ToastConfigProvider,
-} from './Toast';
-import type { BaseToastOptions, ToastType } from './types';
-
-export { DURATION } from './const';
-export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
-export type { ToastType, BaseToastOptions } from './types';
-
-/**
- * Toasts are rendered in a global outlet, which is placed at the top of the
- * component tree.
- */
-export function ToastOutlet() {
-  return (
-    <Toaster
-      position="bottom-left"
-      gap={8}
-      offset={20}
-      mobileOffset={20}
-    />
-  );
-}
-
-/** Direct access to the underlying Sonner API. Use sparingly. */
-export const api: typeof sonner = sonner;
-
-function dispatch(
-  content: React.ReactNode,
-  type: ToastType,
-  options: BaseToastOptions = {},
-): void {
-  const id = nanoid();
-  if (typeof content === 'string') {
-    sonner(
-      <ToastConfigProvider id={id} type={type}>
-        <ToastOuter>
-          <ToastIcon />
-          <ToastText>{content}</ToastText>
-        </ToastOuter>
-      </ToastConfigProvider>,
-      {
-        ...options,
-        unstyled: true,
-        id,
-        duration: options?.duration ?? DURATION,
-      },
-    );
-  } else if (isValidElement(content)) {
-    sonner(
-      <ToastConfigProvider id={id} type={type}>
-        {content}
-      </ToastConfigProvider>,
-      {
-        ...options,
-        unstyled: true,
-        id,
-        duration: options?.duration ?? DURATION,
-      },
-    );
-  } else {
-    throw new Error(
-      `Toast can be a string or a React element, got ${typeof content}`,
-    );
-  }
-}
-
-/**
- * Show a toast notification. Identical API to the native variant — see
- * `./index.tsx` for the full usage docs.
- */
-export interface ToastFn {
-  (content: React.ReactNode, options?: BaseToastOptions): void;
-  success: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  error: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  warning: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  info: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  dismiss: (id?: string | number) => void;
-}
-
-const toastImpl = ((content: React.ReactNode, options: BaseToastOptions = {}) => {
-  dispatch(content, options.type ?? 'default', options);
-}) as ToastFn;
-
-toastImpl.success = (content, options) => dispatch(content, 'success', options ?? {});
-toastImpl.error = (content, options) => dispatch(content, 'error', options ?? {});
-toastImpl.warning = (content, options) => dispatch(content, 'warning', options ?? {});
-toastImpl.info = (content, options) => dispatch(content, 'info', options ?? {});
-toastImpl.dismiss = (id) => sonner.dismiss(id);
-
-export const toast: ToastFn = toastImpl;
-export const show: ToastFn = toastImpl;
-export type Toast = ToastFn;

package/src/toast/sonner/index.ts

@@ -1,3 +0,0 @@
-import { toast } from 'sonner-native';
-
-export const dismiss = toast.dismiss;

package/src/toast/sonner/index.web.ts

@@ -1,3 +0,0 @@
-import { toast } from 'sonner';
-
-export const dismiss = toast.dismiss;