@bacon-pos/ui 0.2.1 → 0.4.0

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,299 @@
+import { type ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { Button, type ButtonVariant } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export interface DialogAction {
+  label: string;
+  onPress?: () => void;
+  /** Button variant. Defaults to `default` (lime). Pass another for other colors. */
+  variant?: ButtonVariant;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export interface DialogCancelConfig {
+  /** Cancel label. Defaults to "Cancel". */
+  label?: string;
+  /** Handler. Defaults to `onClose`. */
+  onPress?: () => void;
+  /** Use the destructive style (subtle red) instead of the neutral secondary. */
+  destructive?: boolean;
+}
+
+export interface DialogProps {
+  /** Whether the dialog is shown. */
+  visible: boolean;
+  /** Called on backdrop press, close button, or Android back. */
+  onClose: () => void;
+  /** Required title. */
+  title: string;
+  /** Optional subtitle. */
+  subtitle?: string;
+  /** Any content — from text to a full form. */
+  children?: ReactNode;
+  /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
+  actions?: DialogAction[];
+  /** Optional cancel button (left side). */
+  cancel?: DialogCancelConfig;
+  /** Show the top-right close (×). Defaults to true. */
+  showClose?: boolean;
+  /** Render the close (×) in the destructive color. */
+  closeDestructive?: boolean;
+  /** Dismiss when the backdrop (overlay) is pressed. Defaults to false. */
+  dismissOnBackdrop?: boolean;
+  /**
+   * `inner` (default): the card caps at the screen height and its content
+   * scrolls inside. `page`: the card grows to its content and the whole modal
+   * scrolls (nothing behind moves) — better for short screens.
+   */
+  scrollMode?: 'inner' | 'page';
+  /** Keep the header pinned while content scrolls (inner mode). Defaults to true. */
+  stickyHeader?: boolean;
+  /** Keep the footer pinned while content scrolls (inner mode). Defaults to true. */
+  stickyFooter?: boolean;
+  /** Inner padding. Defaults to 24. */
+  padding?: number;
+  /** Vertical space between header↔content and content↔footer. Defaults to 24. */
+  contentSpacing?: number;
+  /** Corner radius. Defaults to 24. */
+  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. */
+  scrollbarColor?: string;
+  /** Override the card style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dialog — an accessible, keyboard-aware modal that can hold anything from a
+ * short message to a full form (selects, date pickers, etc. keep working thanks
+ * to `keyboardShouldPersistTaps`). Content scrolls with an elegant thin,
+ * auto-hiding indicator. `scrollMode="page"` scrolls the whole modal on short
+ * screens instead of scrolling inside the card. Footer composes the
+ * design-system `Button`.
+ */
+export function Dialog({
+  visible,
+  onClose,
+  title,
+  subtitle,
+  children,
+  actions = [],
+  cancel,
+  showClose = true,
+  closeDestructive = false,
+  dismissOnBackdrop = false,
+  scrollMode = 'inner',
+  stickyHeader = true,
+  stickyFooter = true,
+  padding = 24,
+  contentSpacing = 24,
+  radius = 24,
+  maxWidth = 560,
+  width,
+  fullscreen = false,
+  maxHeightRatio = 0.9,
+  scrollbarColor,
+  style,
+}: DialogProps) {
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+  const indicatorColor = scrollbarColor ?? theme.colors.text.tertiary;
+
+  const closeBtn = showClose ? (
+    <Pressable
+      onPress={onClose}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      style={{ position: 'absolute', top: padding, right: padding, padding: 4, zIndex: 1 }}
+    >
+      <Icon
+        name="close"
+        size={24}
+        color={closeDestructive ? theme.colors.feedback.error : theme.colors.text.secondary}
+      />
+    </Pressable>
+  ) : null;
+
+  const header = (
+    <View style={{ paddingHorizontal: padding, paddingTop: padding, paddingBottom: contentSpacing }}>
+      <View style={{ paddingRight: showClose ? 40 : 0, gap: 4 }}>
+        <Text variant="h3" weight="semibold" color="primary">
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text variant="bodyLarge" color="secondary">
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  const contentBody = <View style={{ paddingHorizontal: padding }}>{children}</View>;
+
+  const hasFooter = cancel != null || actions.length > 0;
+  const footer = hasFooter ? (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: 12,
+        paddingHorizontal: padding,
+        paddingBottom: padding,
+        paddingTop: contentSpacing,
+      }}
+    >
+      {cancel ? (
+        <View style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={cancel.destructive ? 'destructive' : 'secondary'}
+            label={cancel.label ?? 'Cancel'}
+            onPress={cancel.onPress ?? onClose}
+          />
+        </View>
+      ) : null}
+      {actions.map((action, i) => (
+        <View key={i} style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={action.variant ?? 'default'}
+            label={action.label}
+            onPress={action.onPress}
+            loading={action.loading}
+            disabled={action.disabled}
+          />
+        </View>
+      ))}
+    </View>
+  ) : null;
+
+  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 = 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}
+        {contentBody}
+        {footer}
+      </View>
+    ) : (
+      <View
+        accessibilityViewIsModal
+        style={[cardBase, { maxHeight: height * maxHeightRatio }, style]}
+      >
+        {closeBtn}
+        {stickyHeader ? header : null}
+        <ScrollArea
+          indicatorColor={indicatorColor}
+          style={{ flexShrink: 1 }}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
+        >
+          {!stickyHeader ? header : null}
+          {contentBody}
+          {!stickyFooter ? footer : null}
+        </ScrollArea>
+        {stickyFooter ? footer : null}
+      </View>
+    );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
+      >
+        <View style={{ flex: 1, backgroundColor: 'rgba(16, 18, 20, 0.55)' }}>
+          {fullscreen ? (
+            card
+          ) : scrollMode === 'page' ? (
+            <ScrollView
+              style={{ flex: 1 }}
+              contentContainerStyle={{ flexGrow: 1, padding: 16 }}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              <Pressable
+                style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+              >
+                <Pressable style={{ width: '100%', alignItems: 'center' }} onPress={() => {}}>
+                  {card}
+                </Pressable>
+              </Pressable>
+            </ScrollView>
+          ) : (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 }}>
+              <Pressable
+                style={StyleSheet.absoluteFill}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+              />
+              {card}
+            </View>
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

package/src/components/Dialog/index.ts

@@ -0,0 +1,6 @@
+export {
+  Dialog,
+  type DialogProps,
+  type DialogAction,
+  type DialogCancelConfig,
+} from './Dialog';

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/_internal/ScrollArea.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  /** Thin indicator color (a design-system color). */
+  indicatorColor: string;
+  /** Indicator thickness. Defaults to 4. */
+  indicatorWidth?: number;
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export function ScrollArea({
+  children,
+  indicatorColor,
+  indicatorWidth = 4,
+  keyboardShouldPersistTaps,
+  keyboardDismissMode,
+  style,
+  contentContainerStyle,
+}: ScrollAreaProps) {
+  const [viewportH, setViewportH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scrollable = contentH > viewportH + 1;
+  const thumbH = scrollable ? Math.max(24, (viewportH / contentH) * viewportH) : 0;
+  const maxScroll = Math.max(1, contentH - viewportH);
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, viewportH - thumbH],
+    extrapolate: 'clamp',
+  });
+
+  const reveal = () => {
+    Animated.timing(opacity, { toValue: 1, duration: 120, useNativeDriver: true }).start();
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => {
+      Animated.timing(opacity, { toValue: 0, duration: 400, useNativeDriver: true }).start();
+    }, 900);
+  };
+
+  return (
+    <Animated.View style={[{ position: 'relative' }, style]}>
+      <Animated.ScrollView
+        style={{ flexShrink: 1 }}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={16}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        keyboardDismissMode={keyboardDismissMode}
+        onLayout={(e) => setViewportH(e.nativeEvent.layout.height)}
+        onContentSizeChange={(_w: number, h: number) => setContentH(h)}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: (_e: NativeSyntheticEvent<NativeScrollEvent>) => reveal(),
+        })}
+      >
+        {children}
+      </Animated.ScrollView>
+      {scrollable ? (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 2,
+            width: indicatorWidth,
+            height: thumbH,
+            borderRadius: indicatorWidth / 2,
+            backgroundColor: indicatorColor,
+            opacity,
+            transform: [{ translateY }],
+          }}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}