@bacon-pos/ui 0.3.0 → 0.5.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/Keypad/Keypad.tsx

@@ -0,0 +1,191 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+/** The optional key to the left of 0. Hidden unless provided. */
+export interface KeypadExtraKey {
+  /** Short label (e.g. "."). */
+  label?: string;
+  /** Or an icon. */
+  icon?: IconName;
+  /** If set, pressing appends this to the value (e.g. "." for decimals). */
+  value?: string;
+  /** Custom action (open a modal, navigate, …). Overrides `value`. */
+  onPress?: () => void;
+  /** Content color. */
+  color?: string;
+  /** Key background color. */
+  backgroundColor?: string;
+}
+
+export interface KeypadProps {
+  /** Controlled value being entered. Defaults to ''. */
+  value?: string;
+  /** Called with the next value on digit / backspace / extra-value press. */
+  onChangeText?: (value: string) => void;
+  /** Fired on every press with the raw key: '0'–'9', 'backspace', or 'extra'. */
+  onKeyPress?: (key: string) => void;
+  /** Max length of `value`. */
+  maxLength?: number;
+  /** Content shown above the keys (dots, amount, anything). Swappable per use case. */
+  header?: ReactNode;
+  /** The key left of 0. Hidden by default; provide to show and customize it. */
+  extraKey?: KeypadExtraKey;
+  /** Key height. Defaults to 83. */
+  keyHeight?: number;
+  /** Gap between keys. Defaults to 8. */
+  gap?: number;
+  /** Total width. Defaults to full width; the 3 columns split evenly. */
+  width?: number;
+  /** Digit font size. Defaults to 24. */
+  digitSize?: number;
+  /** Space between header and keys. Defaults to 24. */
+  headerGap?: number;
+  /** Disable all keys. */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const ROWS = [
+  ['1', '2', '3'],
+  ['4', '5', '6'],
+  ['7', '8', '9'],
+];
+
+/**
+ * Numeric keypad — a 3-column pad decoupled from what it drives (bind it to a
+ * PIN display, an amount, etc. via `value`/`onChangeText`, and put that display
+ * in `header`). Backspace is fixed to the right of 0; the key left of 0 is hidden
+ * unless you pass `extraKey` (custom symbol/icon, action and colors). Width,
+ * key height, gap and digit size are all configurable.
+ */
+export function Keypad({
+  value = '',
+  onChangeText,
+  onKeyPress,
+  maxLength,
+  header,
+  extraKey,
+  keyHeight = 83,
+  gap = 8,
+  width,
+  digitSize = 24,
+  headerGap = 24,
+  disabled = false,
+  style,
+}: KeypadProps) {
+  const theme = useTheme();
+
+  const keyStyle = (bg?: string): StyleProp<ViewStyle> => ({
+    flex: 1,
+    height: keyHeight,
+    borderRadius: theme.radii.xl,
+    borderWidth: 1,
+    borderColor: theme.colors.border.strong,
+    backgroundColor: bg ?? theme.colors.action.secondary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+
+  const pressDigit = (digit: string) => {
+    onKeyPress?.(digit);
+    if (maxLength != null && value.length >= maxLength) return;
+    onChangeText?.(value + digit);
+  };
+
+  const pressBackspace = () => {
+    onKeyPress?.('backspace');
+    onChangeText?.(value.slice(0, -1));
+  };
+
+  const pressExtra = () => {
+    onKeyPress?.('extra');
+    if (extraKey?.onPress) {
+      extraKey.onPress();
+      return;
+    }
+    if (extraKey?.value != null) {
+      if (maxLength != null && value.length >= maxLength) return;
+      onChangeText?.(value + extraKey.value);
+    }
+  };
+
+  const DigitKey = ({ digit }: { digit: string }) => (
+    <Pressable
+      onPress={() => pressDigit(digit)}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={digit}
+      style={({ pressed }) => [
+        keyStyle(),
+        { opacity: disabled ? 0.5 : pressed ? 0.85 : 1 },
+      ]}
+    >
+      <Text
+        variant="h2"
+        color={theme.colors.action.secondaryForeground}
+        style={{ fontSize: digitSize, lineHeight: Math.round(digitSize * 1.35) }}
+      >
+        {digit}
+      </Text>
+    </Pressable>
+  );
+
+  return (
+    <View style={[{ width: width ?? '100%', gap }, style]}>
+      {header != null ? <View style={{ marginBottom: headerGap - gap }}>{header}</View> : null}
+
+      {ROWS.map((row) => (
+        <View key={row[0]} style={{ flexDirection: 'row', gap }}>
+          {row.map((digit) => (
+            <DigitKey key={digit} digit={digit} />
+          ))}
+        </View>
+      ))}
+
+      <View style={{ flexDirection: 'row', gap }}>
+        {extraKey ? (
+          <Pressable
+            onPress={pressExtra}
+            disabled={disabled}
+            accessibilityRole="button"
+            accessibilityLabel={extraKey.label ?? 'action'}
+            style={({ pressed }) => [
+              keyStyle(extraKey.backgroundColor),
+              { opacity: disabled ? 0.5 : pressed ? 0.85 : 1 },
+            ]}
+          >
+            {extraKey.icon ? (
+              <Icon name={extraKey.icon} size={24} color={extraKey.color ?? theme.colors.action.secondaryForeground} />
+            ) : (
+              <Text
+                variant="h2"
+                color={extraKey.color ?? theme.colors.action.secondaryForeground}
+                style={{ fontSize: digitSize, lineHeight: Math.round(digitSize * 1.35) }}
+              >
+                {extraKey.label ?? ''}
+              </Text>
+            )}
+          </Pressable>
+        ) : (
+          <View style={{ flex: 1 }} />
+        )}
+
+        <DigitKey digit="0" />
+
+        <Pressable
+          onPress={pressBackspace}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel="Backspace"
+          style={({ pressed }) => [keyStyle(), { opacity: disabled ? 0.5 : pressed ? 0.85 : 1 }]}
+        >
+          <Icon name="arrow-left" size={24} color={theme.colors.action.secondaryForeground} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}

package/src/components/Keypad/index.ts

@@ -0,0 +1,2 @@
+export { Keypad } from './Keypad';
+export type { KeypadProps, KeypadExtraKey } from './Keypad';

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

@@ -10,6 +10,7 @@ export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
+export * from './Keypad';
 export * from './LinkButton';
 export * from './ProductCard';
 export * from './QuantityStepper';
@@ -18,5 +19,6 @@ export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
+export * from './Toast';
 
 export type { LabelPosition } from './_internal/Labeled';