@bacon-pos/ui 0.3.0 → 0.4.0

package/src/components/Dialog/Dialog.tsx

@@ -74,6 +74,10 @@ export interface DialogProps {
   radius?: number;
   /** Max width of the dialog card. Defaults to 560. */
   maxWidth?: number;
+  /** Fixed card width (overrides `maxWidth`). */
+  width?: number;
+  /** Fill the whole screen — for small devices. Overrides width/maxWidth/scrollMode. */
+  fullscreen?: boolean;
   /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
   maxHeightRatio?: number;
   /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
@@ -108,6 +112,8 @@ export function Dialog({
   contentSpacing = 24,
   radius = 24,
   maxWidth = 560,
+  width,
+  fullscreen = false,
   maxHeightRatio = 0.9,
   scrollbarColor,
   style,
@@ -185,16 +191,38 @@ export function Dialog({
     </View>
   ) : null;
 
-  const cardBase: ViewStyle = {
-    width: '100%',
-    maxWidth,
-    backgroundColor: theme.colors.background.default,
-    borderRadius: radius,
-    overflow: 'hidden',
-  };
+  const cardBase: ViewStyle = fullscreen
+    ? {
+        flex: 1,
+        width: '100%',
+        backgroundColor: theme.colors.background.default,
+        borderRadius: 0,
+      }
+    : {
+        width: width ?? '100%',
+        maxWidth: width ? undefined : maxWidth,
+        backgroundColor: theme.colors.background.default,
+        borderRadius: radius,
+        overflow: 'hidden',
+      };
 
-  const card =
-    scrollMode === 'page' ? (
+  const card = fullscreen ? (
+    <View accessibilityViewIsModal style={[cardBase, style]}>
+      {closeBtn}
+      {stickyHeader ? header : null}
+      <ScrollArea
+        indicatorColor={indicatorColor}
+        style={{ flex: 1 }}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+      >
+        {!stickyHeader ? header : null}
+        {contentBody}
+        {!stickyFooter ? footer : null}
+      </ScrollArea>
+      {stickyFooter ? footer : null}
+    </View>
+  ) : scrollMode === 'page' ? (
       <View accessibilityViewIsModal style={[cardBase, style]}>
         {closeBtn}
         {header}
@@ -235,7 +263,9 @@ export function Dialog({
         style={{ flex: 1 }}
       >
         <View style={{ flex: 1, backgroundColor: 'rgba(16, 18, 20, 0.55)' }}>
-          {scrollMode === 'page' ? (
+          {fullscreen ? (
+            card
+          ) : scrollMode === 'page' ? (
             <ScrollView
               style={{ flex: 1 }}
               contentContainerStyle={{ flexGrow: 1, padding: 16 }}

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  type LayoutChangeEvent,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { palette } from '../../theme/palette';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+/** Built-in statuses. More can be added later, or use custom colors. */
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastOptions {
+  /** Message text. Ellipsized on a single line if it overflows. */
+  message: string;
+  /** Visual status. Defaults to `info`. */
+  status?: ToastStatus;
+  /** Optional leading icon. */
+  icon?: IconName;
+  /** Time on screen in ms. `0` keeps it until dismissed. */
+  duration?: number;
+  /** Custom fixed height. */
+  height?: number;
+  /** Custom fixed width. Defaults to full width. */
+  width?: number;
+  /** Show a countdown progress bar for the remaining time (needs duration > 0). */
+  showProgress?: boolean;
+  /** Custom background (overrides status). */
+  backgroundColor?: string;
+  /** Custom text/icon color (overrides status). */
+  color?: string;
+  /** Countdown bar color. Defaults to the status foreground. */
+  progressColor?: string;
+}
+
+function statusColors(theme: Theme, status: ToastStatus): { bg: string; fg: string } {
+  switch (status) {
+    case 'success':
+      return { bg: theme.colors.feedback.successSubtle, fg: theme.colors.feedback.success };
+    case 'error':
+      return { bg: theme.colors.feedback.errorSubtle, fg: theme.colors.feedback.error };
+    case 'warning':
+      return { bg: theme.colors.feedback.warningSubtle, fg: palette.warning[600] };
+    case 'info':
+    default:
+      return { bg: theme.colors.background.subtle, fg: palette.neutral[500] };
+  }
+}
+
+export interface ToastViewProps extends ToastOptions {
+  id: number;
+  position: 'top' | 'bottom';
+  /** When true, the toast animates out and then calls `onRemove`. */
+  leaving: boolean;
+  onRequestClose: (id: number) => void;
+  onRemove: (id: number) => void;
+  maxWidth?: number;
+}
+
+/**
+ * A single toast with an elegant slide + fade in/out. Self-contained: it runs
+ * its own duration timer and exit animation. Managed by `ToastProvider`.
+ */
+export function ToastView({
+  id,
+  message,
+  status = 'info',
+  icon,
+  duration = 3000,
+  height,
+  width,
+  showProgress = false,
+  backgroundColor,
+  color,
+  progressColor,
+  position,
+  leaving,
+  onRequestClose,
+  onRemove,
+  maxWidth,
+}: ToastViewProps) {
+  const theme = useTheme();
+  const base = statusColors(theme, status);
+  const bg = backgroundColor ?? base.bg;
+  const fg = color ?? base.fg;
+
+  const from = position === 'top' ? -12 : 12;
+  const translateY = useRef(new Animated.Value(from)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const remaining = useRef(new Animated.Value(1)).current;
+  const [contentW, setContentW] = useState(0);
+  const withProgress = showProgress && duration > 0;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, { toValue: 1, duration: 260, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+      Animated.timing(translateY, { toValue: 0, duration: 260, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+    ]).start();
+    if (withProgress) {
+      Animated.timing(remaining, { toValue: 0, duration, easing: Easing.linear, useNativeDriver: false }).start();
+    }
+    if (duration > 0) {
+      const timer = setTimeout(() => onRequestClose(id), duration);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+    // Mount only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!leaving) return;
+    Animated.parallel([
+      Animated.timing(opacity, { toValue: 0, duration: 200, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+      Animated.timing(translateY, { toValue: from, duration: 200, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+    ]).start(() => onRemove(id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leaving]);
+
+  const pressStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingHorizontal: 20,
+    paddingVertical: height ? 0 : 20,
+    borderRadius: 16,
+    backgroundColor: bg,
+    overflow: 'hidden',
+    ...(height ? { height } : null),
+  };
+
+  // Fixed width if given, otherwise full width (capped by the provider maxWidth).
+  const outerWidth: ViewStyle = width != null ? { width } : { width: '100%', maxWidth };
+
+  return (
+    <Animated.View
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      style={{ opacity, transform: [{ translateY }], ...outerWidth }}
+    >
+      <Pressable
+        onPress={() => onRequestClose(id)}
+        onLayout={(e: LayoutChangeEvent) => setContentW(e.nativeEvent.layout.width)}
+        style={pressStyle}
+      >
+        {icon ? <Icon name={icon} size={24} color={fg} /> : null}
+        <Text variant="bodyLarge" weight="medium" color={fg} numberOfLines={1} align="center" style={{ flexShrink: 1 }}>
+          {message}
+        </Text>
+        {withProgress ? (
+          <Animated.View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              left: 0,
+              bottom: 0,
+              height: 3,
+              borderRadius: 3,
+              backgroundColor: progressColor ?? fg,
+              width: remaining.interpolate({ inputRange: [0, 1], outputRange: [0, contentW] }),
+            }}
+          />
+        ) : null}
+      </Pressable>
+    </Animated.View>
+  );
+}

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,126 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { View } from 'react-native';
+import { ToastView, type ToastOptions } from './Toast';
+
+export interface ToastApi {
+  /** Show a toast; returns its id. */
+  show: (options: ToastOptions) => number;
+  /** Dismiss a toast by id (animates out). */
+  hide: (id: number) => void;
+  /** Dismiss all toasts. */
+  hideAll: () => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+
+interface ToastItem extends ToastOptions {
+  id: number;
+  leaving: boolean;
+}
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  /** Where toasts appear. Defaults to `bottom`. */
+  position?: 'top' | 'bottom';
+  /** Max toasts on screen at once. Defaults to 2. */
+  maxVisible?: number;
+  /** Default time on screen in ms. Defaults to 3000. */
+  duration?: number;
+  /** Distance from the screen edge. Defaults to 24. */
+  offset?: number;
+  /** Gap between stacked toasts. Defaults to 8. */
+  gap?: number;
+  /** Max toast width. Defaults to full width (no cap). */
+  maxWidth?: number;
+}
+
+/**
+ * Provides the imperative toast API and renders the toast stack. Wrap your app
+ * (inside ThemeProvider). Trigger toasts with `useToast().show(...)`. Newest
+ * toasts appear nearest the edge; at most `maxVisible` show at once.
+ */
+export function ToastProvider({
+  children,
+  position = 'bottom',
+  maxVisible = 2,
+  duration = 3000,
+  offset = 24,
+  gap = 8,
+  maxWidth,
+}: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const idRef = useRef(0);
+
+  const show = useCallback(
+    (options: ToastOptions) => {
+      const id = (idRef.current += 1);
+      setToasts((prev) => {
+        const next: ToastItem[] = [...prev, { leaving: false, duration, ...options, id }];
+        return next.length > maxVisible ? next.slice(next.length - maxVisible) : next;
+      });
+      return id;
+    },
+    [duration, maxVisible],
+  );
+
+  const hide = useCallback((id: number) => {
+    setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, leaving: true } : t)));
+  }, []);
+
+  const remove = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const hideAll = useCallback(() => {
+    setToasts((prev) => prev.map((t) => ({ ...t, leaving: true })));
+  }, []);
+
+  const api = useMemo<ToastApi>(() => ({ show, hide, hideAll }), [show, hide, hideAll]);
+
+  // Newest nearest the edge.
+  const display = position === 'top' ? [...toasts].reverse() : toasts;
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <View
+        pointerEvents="box-none"
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          [position]: offset,
+          alignItems: 'center',
+          paddingHorizontal: 16,
+          gap,
+        }}
+      >
+        {display.map((t) => (
+          <ToastView
+            key={t.id}
+            {...t}
+            position={position}
+            maxWidth={maxWidth}
+            onRequestClose={hide}
+            onRemove={remove}
+          />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+/** Access the toast API. Must be used within a `ToastProvider`. */
+export function useToast(): ToastApi {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
+  return ctx;
+}

package/src/components/Toast/index.ts

@@ -0,0 +1,7 @@
+export { ToastView, type ToastOptions, type ToastStatus, type ToastViewProps } from './Toast';
+export {
+  ToastProvider,
+  useToast,
+  type ToastApi,
+  type ToastProviderProps,
+} from './ToastProvider';

package/src/components/index.ts

@@ -18,5 +18,6 @@ export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
+export * from './Toast';
 
 export type { LabelPosition } from './_internal/Labeled';