@bacon-pos/ui 0.11.0 → 0.15.1

package/src/components/CodeInput/CodeInput.tsx

@@ -30,6 +30,10 @@ export interface CodeInputProps {
   disabled?: boolean;
   /** Focus on mount. */
   autoFocus?: boolean;
+  /** Mark the field invalid — turns the cells red. Pass a string to show it as a message below. */
+  error?: boolean | string;
+  /** Helper/message text below the cells. Replaced by the error message when `error` is a string. */
+  helperText?: string;
   /** Show an eye toggle to reveal/hide the entered digits. */
   revealable?: boolean;
   /** Controlled reveal state. Omit for uncontrolled (toggled by the eye). */
@@ -52,21 +56,28 @@ function Cell({
   filled,
   revealed,
   disabled,
+  error,
   theme,
 }: {
   char: string;
   filled: boolean;
   revealed: boolean;
   disabled: boolean;
+  error: boolean;
   theme: Theme;
 }) {
+  const errorColor = theme.colors.feedback.error;
   return (
     <View
       testID="code-input-cell"
       style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}
     >
       {revealed && filled ? (
-        <Text variant="bodyMedium" weight="medium" color={disabled ? 'tertiary' : 'primary'}>
+        <Text
+          variant="bodyMedium"
+          weight="medium"
+          color={disabled ? 'tertiary' : error ? errorColor : 'primary'}
+        >
           {char}
         </Text>
       ) : (
@@ -76,8 +87,16 @@ function Cell({
             height: 20,
             borderRadius: 10,
             borderWidth: 1.5,
-            backgroundColor: filled ? theme.colors.text.primary : theme.colors.background.default,
-            borderColor: filled ? theme.colors.text.primary : theme.colors.border.strong,
+            backgroundColor: filled
+              ? error
+                ? errorColor
+                : theme.colors.text.primary
+              : theme.colors.background.default,
+            borderColor: error
+              ? errorColor
+              : filled
+                ? theme.colors.text.primary
+                : theme.colors.border.strong,
             opacity: disabled ? 0.5 : 1,
           }}
         />
@@ -100,6 +119,8 @@ export function CodeInput({
   onComplete,
   disabled = false,
   autoFocus = false,
+  error,
+  helperText,
   revealable = false,
   revealed: revealedProp,
   onRevealChange,
@@ -114,6 +135,8 @@ export function CodeInput({
   const [internalRevealed, setInternalRevealed] = useState(false);
   const revealed = revealedProp ?? internalRevealed;
   const filled = Math.min(value.length, length);
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
 
   const handleChange = (text: string) => {
     const digits = text.replace(/[^0-9]/g, '').slice(0, length);
@@ -141,6 +164,7 @@ export function CodeInput({
             filled={i < filled}
             revealed={revealed}
             disabled={disabled}
+            error={hasError}
             theme={theme}
           />
         ))}
@@ -180,21 +204,29 @@ export function CodeInput({
   const eyeFirst = revealPosition === 'top' || revealPosition === 'left';
 
   return (
-    <View
-      style={[
-        {
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
+      <View
+        style={{
           flexDirection: vertical ? 'column' : 'row',
           alignItems: 'center',
           gap: 12,
-          alignSelf: 'flex-start',
           paddingVertical: 8,
-        },
-        style,
-      ]}
-    >
-      {eyeFirst ? eyeToggle : null}
-      {cells}
-      {eyeFirst ? null : eyeToggle}
+        }}
+      >
+        {eyeFirst ? eyeToggle : null}
+        {cells}
+        {eyeFirst ? null : eyeToggle}
+      </View>
+
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 4, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
     </View>
   );
 }

package/src/components/Dialog/Dialog.tsx

@@ -14,7 +14,9 @@ import {
 import { useTheme } from '../../theme';
 import { Button, type ButtonVariant } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
 import { Text } from '../Text/Text';
+import { ModalHostContext } from '../_internal/ModalHostContext';
 import { ScrollArea } from '../_internal/ScrollArea';
 
 export interface DialogAction {
@@ -44,6 +46,18 @@ export interface DialogProps {
   title: string;
   /** Optional subtitle. */
   subtitle?: string;
+  /**
+   * Show a round back button to the left of the title and wire its press here.
+   * Used for multi-step flows (see `StepDialog`). Omit for a plain dialog.
+   */
+  onBack?: () => void;
+  /** Accessibility label for the back button. Defaults to "Back". */
+  backAccessibilityLabel?: string;
+  /**
+   * Content pinned in the footer, above the action buttons (e.g. a step
+   * progress bar). Centered. Shows the footer region even without actions.
+   */
+  footerAccessory?: ReactNode;
   /** Any content — from text to a full form. */
   children?: ReactNode;
   /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
@@ -99,6 +113,9 @@ export function Dialog({
   onClose,
   title,
   subtitle,
+  onBack,
+  backAccessibilityLabel = 'Back',
+  footerAccessory,
   children,
   actions = [],
   cancel,
@@ -140,54 +157,94 @@ export function Dialog({
 
   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>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 20,
+          paddingRight: showClose ? 40 : 0,
+        }}
+      >
+        {onBack ? (
+          <IconButton
+            icon="arrow-left"
+            accessibilityLabel={backAccessibilityLabel}
+            variant="secondary"
+            size="lg"
+            onPress={onBack}
+          />
         ) : null}
+        <View style={{ flex: 1, gap: 4 }}>
+          <Text variant="h3" weight="semibold" color="primary">
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text variant="bodyLarge" color="secondary">
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
       </View>
     </View>
   );
 
-  const contentBody = <View style={{ paddingHorizontal: padding }}>{children}</View>;
+  const hasButtons = cancel != null || actions.length > 0;
+  const hasFooter = hasButtons || footerAccessory != null;
+
+  // The footer owns the bottom padding; without a footer the content would
+  // otherwise hug the bottom edge, so it takes over the bottom padding itself.
+  const contentBody = (
+    <View style={{ paddingHorizontal: padding, paddingBottom: hasFooter ? 0 : 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}
-          />
+      {footerAccessory ? (
+        <View
+          style={{
+            alignItems: 'center',
+            // Figma keeps the accessory (e.g. step progress) closer to the
+            // content above it than to the buttons below (~40 vs ~56).
+            marginBottom: hasButtons ? Math.round(contentSpacing * 1.4) : 0,
+          }}
+        >
+          {footerAccessory}
         </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}
-          />
+      {hasButtons ? (
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          {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}
     </View>
   ) : null;
 
@@ -213,6 +270,7 @@ export function Dialog({
       <ScrollArea
         indicatorColor={indicatorColor}
         style={{ flex: 1 }}
+        contentContainerStyle={{ paddingVertical: 8 }}
         keyboardShouldPersistTaps="handled"
         keyboardDismissMode="interactive"
       >
@@ -239,6 +297,7 @@ export function Dialog({
         <ScrollArea
           indicatorColor={indicatorColor}
           style={{ flexShrink: 1 }}
+          contentContainerStyle={{ paddingVertical: 8 }}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="interactive"
         >
@@ -258,6 +317,7 @@ export function Dialog({
       statusBarTranslucent
       onRequestClose={onClose}
     >
+      <ModalHostContext.Provider value={true}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         style={{ flex: 1 }}
@@ -294,6 +354,7 @@ export function Dialog({
           )}
         </View>
       </KeyboardAvoidingView>
+      </ModalHostContext.Provider>
     </Modal>
   );
 }

package/src/components/Dialog/StepDialog.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+import { Dialog, type DialogProps } from './Dialog';
+
+export interface StepDialogStep {
+  /** Header title for this step. */
+  title: string;
+  /** Optional subtitle under the title. */
+  subtitle?: string;
+  /** The step body. */
+  content: ReactNode;
+  /** Primary button label. Defaults to "Continue" (or `finishLabel` on the last step). */
+  nextLabel?: string;
+  /** Disable the primary button — e.g. until this step is valid. */
+  nextDisabled?: boolean;
+  /** Show a spinner on the primary button (e.g. while submitting). */
+  nextLoading?: boolean;
+  /**
+   * Run when the primary button is pressed on this step. Return (or resolve to)
+   * `false` to stay on the step — e.g. when validation fails. Anything else
+   * advances to the next step (or finishes on the last one).
+   */
+  onNext?: () => boolean | void | Promise<boolean | void>;
+}
+
+export interface StepDialogProps
+  extends Omit<
+    DialogProps,
+    'title' | 'subtitle' | 'children' | 'actions' | 'cancel' | 'onBack' | 'footerAccessory'
+  > {
+  /** The ordered steps of the flow. */
+  steps: StepDialogStep[];
+  /** Controlled step index. Omit for uncontrolled. */
+  step?: number;
+  /** Initial step index (uncontrolled). Defaults to 0. Resets to this on close. */
+  defaultStep?: number;
+  /** Notified whenever the step changes. */
+  onStepChange?: (index: number) => void;
+  /** Called after the last step's `onNext` resolves (unless it returned `false`). */
+  onFinish?: () => void;
+  /** Primary label on the last step. Defaults to "Finish". */
+  finishLabel?: string;
+  /** Secondary label used to go back on steps after the first. Defaults to "Back". */
+  backLabel?: string;
+  /** Secondary label on the first step (closes the dialog). Defaults to "Cancel". */
+  cancelLabel?: string;
+  /** Show the round back button in the header from step 2 onward. Defaults to true. */
+  showHeaderBack?: boolean;
+  /** Show the footer secondary button (Back / Cancel). Defaults to true. */
+  showFooterBack?: boolean;
+  /** Show the progress bar in the footer. Defaults to true. */
+  showProgress?: boolean;
+  /**
+   * Width of the progress bar within the footer (centered). A number is px; a
+   * string is any RN dimension (e.g. `'62%'`). Defaults to `'62%'` — the narrower,
+   * centered bar from Figma (≈ 500 / 820 of the content width).
+   */
+  progressWidth?: number | `${number}%`;
+}
+
+const clamp = (n: number, min: number, max: number) => (n < min ? min : n > max ? max : n);
+
+/**
+ * StepDialog — a multi-step (wizard) flow built on `Dialog`. Give it an array of
+ * `steps`; it tracks the current one, renders a round back button in the header
+ * from step 2 onward, a thin progress bar in the footer, and a
+ * secondary (Back / Cancel) + primary (Continue / Finish) button pair. A step's
+ * `onNext` can return `false` (sync or async) to block advancing after failed
+ * validation. Controlled via `step`/`onStepChange` or fully uncontrolled.
+ * Forwards all other `Dialog` props (width, fullscreen, scrollMode, …).
+ */
+export function StepDialog({
+  steps,
+  step,
+  defaultStep = 0,
+  onStepChange,
+  onFinish,
+  finishLabel = 'Finish',
+  backLabel = 'Back',
+  cancelLabel = 'Cancel',
+  showHeaderBack = true,
+  showFooterBack = true,
+  showProgress = true,
+  progressWidth = '62%',
+  visible,
+  onClose,
+  ...dialogProps
+}: StepDialogProps) {
+  const total = steps.length;
+  const [uncontrolled, setUncontrolled] = useState(defaultStep);
+  const isControlled = step !== undefined;
+  const index = clamp(isControlled ? step : uncontrolled, 0, Math.max(0, total - 1));
+
+  // Reset an uncontrolled flow to its first step whenever it is closed.
+  useEffect(() => {
+    if (!visible && !isControlled) setUncontrolled(defaultStep);
+  }, [visible, isControlled, defaultStep]);
+
+  const setIndex = (next: number) => {
+    const clamped = clamp(next, 0, total - 1);
+    if (!isControlled) setUncontrolled(clamped);
+    onStepChange?.(clamped);
+  };
+
+  const current = steps[index];
+  if (!current) return null;
+
+  const isFirst = index === 0;
+  const isLast = index === total - 1;
+
+  const goBack = () => {
+    if (!isFirst) setIndex(index - 1);
+  };
+
+  const advance = () => {
+    if (isLast) onFinish?.();
+    else setIndex(index + 1);
+  };
+
+  const goNext = () => {
+    const result = current.onNext?.();
+    // Await only a real promise, so sync steps advance synchronously.
+    if (result && typeof (result as Promise<unknown>).then === 'function') {
+      void (result as Promise<boolean | void>).then((r) => {
+        if (r !== false) advance();
+      });
+      return;
+    }
+    if (result === false) return;
+    advance();
+  };
+
+  const footerAccessory = showProgress ? (
+    <ProgressBar
+      progress={(index + 1) / total}
+      showSupporting={false}
+      bordered={false}
+      height={6}
+      style={{ width: progressWidth, alignSelf: 'center' }}
+      accessibilityLabel={`Step ${index + 1} of ${total}`}
+    />
+  ) : undefined;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      visible={visible}
+      onClose={onClose}
+      title={current.title}
+      subtitle={current.subtitle}
+      onBack={!isFirst && showHeaderBack ? goBack : undefined}
+      backAccessibilityLabel={backLabel}
+      footerAccessory={footerAccessory}
+      cancel={
+        showFooterBack
+          ? isFirst
+            ? { label: cancelLabel, onPress: onClose }
+            : { label: backLabel, onPress: goBack }
+          : undefined
+      }
+      actions={[
+        {
+          label: current.nextLabel ?? (isLast ? finishLabel : 'Continue'),
+          onPress: goNext,
+          disabled: current.nextDisabled,
+          loading: current.nextLoading,
+        },
+      ]}
+    >
+      {current.content}
+    </Dialog>
+  );
+}

package/src/components/Dialog/index.ts

@@ -4,3 +4,4 @@ export {
   type DialogAction,
   type DialogCancelConfig,
 } from './Dialog';
+export { StepDialog, type StepDialogProps, type StepDialogStep } from './StepDialog';