@bacon-pos/ui 0.4.0 → 0.5.0

package/src/components/CodeField/CodeField.tsx

@@ -13,6 +13,16 @@ import { Text } from '../Text/Text';
 /** Removes the browser's default focus outline on web (no-op on native). */
 const WEB_NO_OUTLINE = { outlineStyle: 'none', outlineWidth: 0 } as unknown as TextStyle;
 
+/** Convert a `#RRGGBB` (or `#RGB`) token to an `rgba()` string at the given alpha. */
+function hexToRgba(hex: string, alpha: number): string {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 export type CodeFieldMode = 'numeric' | 'alpha' | 'alphanumeric';
 
 /** Chars to strip per mode (applied after upper-casing). */
@@ -33,6 +43,10 @@ export interface CodeFieldProps {
   mode?: CodeFieldMode;
   /** Called once every cell is filled. */
   onComplete?: (value: string) => void;
+  /** Helper text below the cells. Replaced by the error message when `error` is a string. */
+  helperText?: string;
+  /** Mark the field invalid. Pass a string to show it as the error message. */
+  error?: boolean | string;
   /** Disable input and dim the cells. */
   disabled?: boolean;
   /** Focus on mount. */
@@ -65,6 +79,8 @@ export function CodeField({
   length = 6,
   mode = 'numeric',
   onComplete,
+  helperText,
+  error,
   disabled = false,
   autoFocus = false,
   cellWidth = 126,
@@ -86,75 +102,99 @@ export function CodeField({
   };
 
   const activeIndex = Math.min(value.length, length - 1);
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
 
   return (
-    <Pressable
-      onPress={() => inputRef.current?.focus()}
-      disabled={disabled}
-      style={[{ position: 'relative', alignSelf: 'flex-start' }, style]}
-    >
-      <View style={{ flexDirection: 'row', gap }}>
-        {Array.from({ length }).map((_, i) => {
-          const isActive = focused && i === activeIndex && !disabled;
-          return (
-            <View
-              key={i}
-              testID="code-field-cell"
-              style={{
-                width: cellWidth,
-                height: cellHeight,
-                borderRadius: theme.radii.pill,
-                borderWidth: 1,
-                borderColor: isActive ? theme.colors.border.focus : theme.colors.border.default,
-                backgroundColor: disabled
-                  ? theme.colors.disabled.background
-                  : theme.colors.background.default,
-                alignItems: 'center',
-                justifyContent: 'center',
-                opacity: disabled ? 0.6 : 1,
-                ...(isActive
-                  ? {
-                      boxShadow: [
-                        { offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: 6, color: 'rgba(201,255,0,0.15)' },
-                      ] as ViewStyle['boxShadow'],
-                    }
-                  : null),
-              }}
-            >
-              <Text
-                color={disabled ? 'tertiary' : 'primary'}
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
+      <Pressable
+        onPress={() => inputRef.current?.focus()}
+        disabled={disabled}
+        style={{ position: 'relative' }}
+      >
+        <View style={{ flexDirection: 'row', gap }}>
+          {Array.from({ length }).map((_, i) => {
+            const isActive = focused && i === activeIndex && !disabled;
+            // Error overrides the default/focus border on every cell; the active
+            // cell still gets the ring (red on error, lime otherwise).
+            const borderColor = hasError
+              ? theme.colors.feedback.error
+              : isActive
+                ? theme.colors.border.focus
+                : theme.colors.border.default;
+            const ringColor = hasError
+              ? hexToRgba(theme.colors.feedback.error, 0.15)
+              : 'rgba(201,255,0,0.15)';
+            return (
+              <View
+                key={i}
+                testID="code-field-cell"
                 style={{
-                  fontFamily: fontFamily ?? theme.fontFamily.regular,
-                  fontSize,
-                  lineHeight: Math.round(fontSize * 1.45),
+                  width: cellWidth,
+                  height: cellHeight,
+                  borderRadius: theme.radii.pill,
+                  borderWidth: 1,
+                  borderColor,
+                  backgroundColor: disabled
+                    ? theme.colors.disabled.background
+                    : theme.colors.background.default,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: disabled ? 0.6 : 1,
+                  ...(isActive
+                    ? {
+                        boxShadow: [
+                          { offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: 6, color: ringColor },
+                        ] as ViewStyle['boxShadow'],
+                      }
+                    : null),
                 }}
               >
-                {value[i] ?? ''}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
+                <Text
+                  color={disabled ? 'tertiary' : 'primary'}
+                  style={{
+                    fontFamily: fontFamily ?? theme.fontFamily.regular,
+                    fontSize,
+                    lineHeight: Math.round(fontSize * 1.45),
+                  }}
+                >
+                  {value[i] ?? ''}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+
+        <TextInput
+          ref={inputRef}
+          value={value}
+          onChangeText={handleChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          keyboardType={mode === 'numeric' ? 'number-pad' : 'default'}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          maxLength={length}
+          editable={!disabled}
+          caretHidden
+          autoFocus={autoFocus}
+          accessibilityLabel={accessibilityLabel}
+          style={[
+            { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0 },
+            WEB_NO_OUTLINE,
+          ]}
+        />
+      </Pressable>
 
-      <TextInput
-        ref={inputRef}
-        value={value}
-        onChangeText={handleChange}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        keyboardType={mode === 'numeric' ? 'number-pad' : 'default'}
-        autoCapitalize="characters"
-        autoCorrect={false}
-        maxLength={length}
-        editable={!disabled}
-        caretHidden
-        autoFocus={autoFocus}
-        accessibilityLabel={accessibilityLabel}
-        style={[
-          { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0 },
-          WEB_NO_OUTLINE,
-        ]}
-      />
-    </Pressable>
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 8, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
   );
 }

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/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';