@bacon-pos/ui 0.1.0

package/src/components/ProductCard/index.ts

@@ -0,0 +1 @@
+export { ProductCard, type ProductCardProps } from './ProductCard';

package/src/components/QuantityStepper/QuantityStepper.tsx

@@ -0,0 +1,162 @@
+import {
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, textStyle } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { IconButton, type IconButtonSize } from '../IconButton/IconButton';
+import { Text } from '../Text/Text';
+
+export type QuantityStepperSize = 'sm' | 'md' | 'lg';
+
+/** 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;
+
+export interface QuantityStepperProps {
+  /** Current quantity. */
+  value: number;
+  /** Called with the next clamped value. */
+  onChange: (value: number) => void;
+  /**
+   * Minimum value. Defaults to 1: the `−` button hides at the minimum so the
+   * quantity can't go lower. Set `min={0}` to allow decreasing back to 0.
+   */
+  min?: number;
+  /** Maximum value. Defaults to no limit. */
+  max?: number;
+  /** Control size: `sm` = 40px, `md` = 48px, `lg` = 58px buttons. Defaults to `lg`. */
+  size?: QuantityStepperSize;
+  /** Disable interaction and apply disabled tokens. */
+  disabled?: boolean;
+  /** Let the quantity be typed on a numeric keyboard (for large amounts). */
+  editable?: boolean;
+  /** Accessibility labels. */
+  addLabel?: string;
+  decrementLabel?: string;
+  incrementLabel?: string;
+  quantityLabel?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<
+  QuantityStepperSize,
+  { button: IconButtonSize; gap: number; text: TypographyVariant; minWidth: number }
+> = {
+  sm: { button: 'sm', gap: 8, text: 'bodySmall', minWidth: 32 },
+  md: { button: 'md', gap: 8, text: 'bodyMedium', minWidth: 40 },
+  lg: { button: 'lg', gap: 12, text: 'bodyMedium', minWidth: 40 },
+};
+
+/**
+ * Quantity stepper — faithful to the Bacon POS Figma "Input qty". At 0 it shows
+ * a single lime "+" (add); at the minimum it shows `value +` (no `−`, so it
+ * can't go lower); above the minimum it shows `− value +`. Controlled via
+ * `value`/`onChange`; set `editable` to type the amount on a numeric keyboard.
+ */
+export function QuantityStepper({
+  value,
+  onChange,
+  min = 1,
+  max = Number.POSITIVE_INFINITY,
+  size = 'lg',
+  disabled = false,
+  editable = false,
+  addLabel = 'Add',
+  decrementLabel = 'Decrease quantity',
+  incrementLabel = 'Increase quantity',
+  quantityLabel = 'Quantity',
+  style,
+}: QuantityStepperProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+
+  const clamp = (n: number) => Math.max(min, Math.min(max, n));
+  const decrement = () => onChange(clamp(value - 1));
+  const increment = () => onChange(clamp(value + 1));
+
+  if (value <= 0) {
+    return (
+      <IconButton
+        icon="plus"
+        variant="default"
+        size={cfg.button}
+        accessibilityLabel={addLabel}
+        disabled={disabled}
+        onPress={increment}
+      />
+    );
+  }
+
+  const valueColor = disabled ? theme.colors.text.tertiary : theme.colors.text.primary;
+
+  return (
+    <View
+      style={[
+        {
+          alignSelf: 'flex-start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: cfg.gap,
+          padding: 8,
+          borderRadius: theme.radii.pill,
+          borderWidth: 1,
+          borderColor: disabled ? theme.colors.disabled.border : theme.colors.border.default,
+          backgroundColor: disabled
+            ? theme.colors.disabled.background
+            : theme.colors.background.default,
+          boxShadow: [
+            { inset: true, offsetX: 0, offsetY: 2, blurRadius: 4, spreadDistance: 0, color: 'rgba(0,0,0,0.05)' },
+          ] as ViewStyle['boxShadow'],
+        },
+        style,
+      ]}
+    >
+      {value > min ? (
+        <IconButton
+          icon="minus"
+          variant="default"
+          size={cfg.button}
+          accessibilityLabel={decrementLabel}
+          disabled={disabled}
+          onPress={decrement}
+        />
+      ) : null}
+
+      {editable ? (
+        <TextInput
+          value={String(value)}
+          onChangeText={(text) => {
+            const digits = text.replace(/[^0-9]/g, '');
+            onChange(clamp(digits === '' ? min : parseInt(digits, 10)));
+          }}
+          keyboardType="number-pad"
+          editable={!disabled}
+          selectTextOnFocus
+          accessibilityLabel={quantityLabel}
+          style={[
+            textStyle(theme, cfg.text, 'regular'),
+            { minWidth: cfg.minWidth, textAlign: 'center', color: valueColor, paddingVertical: 0 },
+            WEB_NO_OUTLINE,
+          ]}
+        />
+      ) : (
+        <Text variant={cfg.text} color={valueColor} align="center" style={{ minWidth: cfg.minWidth }}>
+          {value}
+        </Text>
+      )}
+
+      <IconButton
+        icon="plus"
+        variant="default"
+        size={cfg.button}
+        accessibilityLabel={incrementLabel}
+        disabled={disabled || value >= max}
+        onPress={increment}
+      />
+    </View>
+  );
+}

package/src/components/QuantityStepper/index.ts

@@ -0,0 +1,5 @@
+export {
+  QuantityStepper,
+  type QuantityStepperProps,
+  type QuantityStepperSize,
+} from './QuantityStepper';

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,76 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Labeled, type LabelPosition } from '../_internal/Labeled';
+
+export interface RadioProps {
+  /** Selected state. */
+  selected: boolean;
+  /** Called when pressed (selecting this radio). */
+  onChange: () => void;
+  /** Disable and dim the control. */
+  disabled?: boolean;
+  /** Optional label. */
+  label?: string;
+  /** Where the label sits: top / bottom / left / right. Defaults to `right`. */
+  labelPosition?: LabelPosition;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Radio button — faithful to the Bacon POS Figma "Form controls". A 20px circle:
+ * unselected (outlined), selected (dark ring + dot). Usually rendered as a group;
+ * standalone or with a positionable label.
+ */
+export function Radio({
+  selected,
+  onChange,
+  disabled = false,
+  label,
+  labelPosition,
+  style,
+}: RadioProps) {
+  const theme = useTheme();
+
+  const borderColor = disabled
+    ? theme.colors.disabled.border
+    : selected
+      ? theme.colors.text.primary
+      : theme.colors.border.strong;
+
+  return (
+    <Labeled
+      label={label}
+      labelPosition={labelPosition}
+      disabled={disabled}
+      onPress={onChange}
+      accessibilityRole="radio"
+      accessibilityState={{ selected, disabled }}
+      style={style}
+    >
+      <View
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: selected ? 2 : 1.5,
+          borderColor,
+          backgroundColor: theme.colors.background.default,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {selected ? (
+          <View
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              backgroundColor: disabled ? theme.colors.disabled.foreground : theme.colors.text.primary,
+            }}
+          />
+        ) : null}
+      </View>
+    </Labeled>
+  );
+}

package/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export { Radio, type RadioProps } from './Radio';

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,99 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  Pressable,
+  View,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import type { RadiusToken } from '../../theme/spacing';
+
+export type SurfaceVariant = 'elevated' | 'outlined' | 'filled';
+export type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface SurfaceProps {
+  /** Surface style. Defaults to `elevated`. */
+  variant?: SurfaceVariant;
+  /** Inner padding. Defaults to `md` (16). */
+  padding?: SurfacePadding;
+  /** Corner radius token. Defaults to `xl` (16). */
+  radius?: RadiusToken;
+  /** When provided, the surface becomes pressable (adds button semantics). */
+  onPress?: () => void;
+  /** Dim and block presses (only meaningful with `onPress`). */
+  disabled?: boolean;
+  /** Content. */
+  children?: ReactNode;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label (recommended when pressable). */
+  accessibilityLabel?: string;
+}
+
+const PADDING: Record<SurfacePadding, number> = {
+  none: 0,
+  sm: 12,
+  md: 16,
+  lg: 24,
+};
+
+/**
+ * Generic surface container built from design-system tokens. Use it to group
+ * content (panels, tiles, list rows). `elevated` adds a soft shadow, `outlined`
+ * a hairline border, `filled` a subtle background. For the selectable
+ * design-system card, use `Card`.
+ */
+export function Surface({
+  variant = 'elevated',
+  padding = 'md',
+  radius = 'xl',
+  onPress,
+  disabled = false,
+  children,
+  style,
+  accessibilityLabel,
+}: SurfaceProps) {
+  const theme = useTheme();
+
+  const baseStyle = useMemo<ViewStyle>(() => {
+    const common: ViewStyle = {
+      padding: PADDING[padding],
+      borderRadius: theme.radii[radius],
+      backgroundColor:
+        variant === 'filled' ? theme.colors.background.subtle : theme.colors.background.default,
+    };
+    if (variant === 'outlined') {
+      common.borderWidth = 1;
+      common.borderColor = theme.colors.border.default;
+    }
+    if (variant === 'elevated') {
+      common.boxShadow = [
+        { offsetX: 0, offsetY: 1, blurRadius: 3, spreadDistance: 0, color: 'rgba(16, 18, 20, 0.10)' },
+        { offsetX: 0, offsetY: 1, blurRadius: 2, spreadDistance: 0, color: 'rgba(16, 18, 20, 0.06)' },
+      ];
+    }
+    return common;
+  }, [theme, variant, padding, radius]);
+
+  if (!onPress) {
+    return <View style={[baseStyle, style]}>{children}</View>;
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }: PressableStateCallbackType) => [
+        baseStyle,
+        { opacity: pressed && !disabled ? 0.96 : 1 },
+        style,
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/components/Surface/index.ts

@@ -0,0 +1,6 @@
+export {
+  Surface,
+  type SurfaceProps,
+  type SurfaceVariant,
+  type SurfacePadding,
+} from './Surface';

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { palette } from '../../theme/palette';
+import { Labeled, type LabelPosition } from '../_internal/Labeled';
+
+export type SwitchSize = 'sm' | 'md';
+
+export interface SwitchProps {
+  /** On/off state. */
+  value: boolean;
+  /** Called with the next value when toggled. */
+  onValueChange: (value: boolean) => void;
+  /** Control size: `sm` = 40×24, `md` = 52×32. Defaults to `md`. */
+  size?: SwitchSize;
+  /** Disable and dim the control. */
+  disabled?: boolean;
+  /** Optional label. */
+  label?: string;
+  /** Where the label sits: top / bottom / left / right. Defaults to `right`. */
+  labelPosition?: LabelPosition;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const BORDER = 1.5;
+const SIZES: Record<SwitchSize, { width: number; height: number; handle: number; padding: number }> = {
+  sm: { width: 40, height: 24, handle: 18, padding: 3 },
+  md: { width: 52, height: 32, handle: 24, padding: 4 },
+};
+
+/**
+ * Switch — faithful to the Bacon POS Figma "Form controls". A 52×32 pill:
+ * off (gray outline + gray handle), on (dark track + white handle). The handle
+ * slides and the track/handle colors cross-fade between states.
+ */
+export function Switch({
+  value,
+  onValueChange,
+  size = 'md',
+  disabled = false,
+  label,
+  labelPosition,
+  style,
+}: SwitchProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+  const travel = cfg.width - 2 * BORDER - 2 * cfg.padding - cfg.handle;
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: 180,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false, // interpolating colors
+    }).start();
+  }, [value, anim]);
+
+  const trackColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.colors.background.default, theme.colors.text.primary],
+  });
+  const borderColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [palette.neutral[500], theme.colors.text.primary],
+  });
+  const handleColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [palette.neutral[500], theme.colors.background.default],
+  });
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, travel] });
+
+  return (
+    <Labeled
+      label={label}
+      labelPosition={labelPosition}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      style={style}
+    >
+      <Animated.View
+        style={{
+          width: cfg.width,
+          height: cfg.height,
+          borderRadius: cfg.height / 2,
+          borderWidth: BORDER,
+          paddingHorizontal: cfg.padding,
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: trackColor,
+          borderColor,
+          opacity: disabled ? 0.5 : 1,
+        }}
+      >
+        <Animated.View
+          style={{
+            width: cfg.handle,
+            height: cfg.handle,
+            borderRadius: cfg.handle / 2,
+            backgroundColor: handleColor,
+            transform: [{ translateX }],
+          }}
+        />
+      </Animated.View>
+    </Labeled>
+  );
+}

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';

package/src/components/Text/Text.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import {
+  Text as RNText,
+  type TextProps as RNTextProps,
+  type TextStyle,
+} from 'react-native';
+import { useTheme, textStyle } from '../../theme';
+import type { TypographyVariant, FontWeightToken } from '../../theme/typography';
+
+type TextColorToken = keyof ReturnType<typeof useTheme>['colors']['text'];
+
+export interface TextProps extends RNTextProps {
+  /** Type-scale variant from the design system. Defaults to `bodyMedium`. */
+  variant?: TypographyVariant;
+  /** Font weight token. Defaults to `regular`. */
+  weight?: FontWeightToken;
+  /** Semantic text color token, or any raw color string. Defaults to `primary`. */
+  color?: TextColorToken | (string & {});
+  /** Horizontal text alignment. */
+  align?: TextStyle['textAlign'];
+}
+
+/**
+ * Themed text primitive. Every string of copy in the app should render through
+ * this component so type scale, weight and color stay consistent.
+ */
+export function Text({
+  variant = 'bodyMedium',
+  weight = 'regular',
+  color = 'primary',
+  align,
+  style,
+  ...rest
+}: TextProps) {
+  const theme = useTheme();
+
+  const resolvedStyle = useMemo<TextStyle>(() => {
+    const textColor =
+      color in theme.colors.text
+        ? theme.colors.text[color as TextColorToken]
+        : (color as string);
+
+    return {
+      ...textStyle(theme, variant, weight),
+      color: textColor,
+      ...(align ? { textAlign: align } : null),
+    };
+  }, [theme, variant, weight, color, align]);
+
+  return <RNText style={[resolvedStyle, style]} {...rest} />;
+}

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/src/components/_internal/Labeled.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import {
+  Pressable,
+  type AccessibilityRole,
+  type AccessibilityState,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Text } from '../Text/Text';
+
+/** Where the label sits relative to the control. */
+export type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface LabeledProps {
+  /** Optional label. When omitted the control is standalone. */
+  label?: string;
+  /** Where the label sits. Defaults to `right`. */
+  labelPosition?: LabelPosition;
+  disabled?: boolean;
+  /** Fired when the control (or its label) is pressed. */
+  onPress?: () => void;
+  /** Gap between control and label. Defaults to 8. */
+  gap?: number;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** The control visual. */
+  children: ReactNode;
+}
+
+/**
+ * Wraps a form control with an optional, positionable label and makes the whole
+ * row/column pressable. Shared by Checkbox, Radio and Switch.
+ */
+export function Labeled({
+  label,
+  labelPosition = 'right',
+  disabled = false,
+  onPress,
+  gap = 8,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel,
+  style,
+  children,
+}: LabeledProps) {
+  const vertical = labelPosition === 'top' || labelPosition === 'bottom';
+  const controlFirst = labelPosition === 'right' || labelPosition === 'bottom';
+  const labelNode = label ? (
+    <Text variant="bodyMedium" color={disabled ? 'tertiary' : 'primary'}>
+      {label}
+    </Text>
+  ) : null;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[
+        { flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap, alignSelf: 'flex-start' },
+        style,
+      ]}
+    >
+      {controlFirst ? children : labelNode}
+      {controlFirst ? labelNode : children}
+    </Pressable>
+  );
+}

package/src/components/brand/Flag.tsx

@@ -0,0 +1,41 @@
+import { View } from 'react-native';
+import { graphics } from './registry';
+
+/** Supported country flags. */
+export type FlagCountry = 'us' | 'br';
+
+export interface FlagProps {
+  /** Country flag to render. */
+  country: FlagCountry;
+  /** Diameter of the round flag chip in px. Defaults to 24. */
+  size?: number;
+}
+
+const KEY: Record<FlagCountry, 'flag-us' | 'flag-br'> = {
+  us: 'flag-us',
+  br: 'flag-br',
+};
+
+/**
+ * Country flag rendered as a round chip (Figma "Flags"). The artwork is wider
+ * than tall, scaled to fill the circle and cropped. Multicolor, not tinted.
+ */
+export function Flag({ country, size = 24 }: FlagProps) {
+  const graphic = graphics[KEY[country]];
+  if (!graphic) return null;
+  const { Component } = graphic;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Component width={size * graphic.aspect} height={size} />
+    </View>
+  );
+}

package/src/components/brand/Logo.tsx

@@ -0,0 +1,23 @@
+import { graphics } from './registry';
+
+/** Payment brand marks. */
+export type LogoName = 'visa' | 'mastercard';
+
+export interface LogoProps {
+  /** Brand mark to render. */
+  name: LogoName;
+  /** Rendered height in px; width follows the mark's aspect ratio. Defaults to 24. */
+  height?: number;
+}
+
+/**
+ * Multicolor payment brand logo (Visa, Mastercard). Rendered at its natural
+ * aspect ratio via a real react-native-svg component and NOT tinted — brand
+ * colors are preserved.
+ */
+export function Logo({ name, height = 24 }: LogoProps) {
+  const graphic = graphics[name];
+  if (!graphic) return null;
+  const { Component } = graphic;
+  return <Component width={height * graphic.aspect} height={height} />;
+}

package/src/components/brand/generated/FlagBr.tsx

@@ -0,0 +1,8 @@
+import Svg, { G, Rect, Mask, Path, Circle } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+const FlagBr = (props: SvgProps) => <Svg viewBox="0 0 33.5997 23.9998" fill="none" {...props}><G id="BR"><Rect id="Mask" x={0.0000243634} width={33.5997} height={23.9998} rx={1.71429} fill="white" /><Mask id="mask0_8024_16514" style={{
+      maskType: "luminance"
+    }} maskUnits="userSpaceOnUse" x={0} y={0} width={34} height={24}><Rect id="Mask_2" x={0.0000243634} width={33.5997} height={23.9998} rx={1.71429} fill="white" /></Mask><G mask="url(#mask0_8024_16514)"><Rect id="Mask Copy" x={0.0000243634} width={33.5997} height={23.9998} fill="#05AB41" /><Path id="Rectangle 60" fillRule="evenodd" clipRule="evenodd" d="M3.94146 12.4798C3.59346 12.2546 3.59346 11.7454 3.94146 11.5203L16.4895 3.40095C16.6784 3.27872 16.9214 3.27872 17.1103 3.40095L29.6583 11.5203C30.0063 11.7454 30.0063 12.2546 29.6583 12.4798L17.1103 20.5991C16.9214 20.7213 16.6784 20.7213 16.4895 20.5991L3.94146 12.4798Z" fill="#FDD216" /><G id="Oval 2"><Circle id="Mask_3" cx={16.7999} cy={12} r={5.59995} fill="#053087" /><Mask id="mask1_8024_16514" style={{
+          maskType: "luminance"
+        }} maskUnits="userSpaceOnUse" x={11} y={6} width={12} height={12}><Circle id="Mask_4" cx={16.7999} cy={12} r={5.59995} fill="white" /></Mask><G mask="url(#mask1_8024_16514)"><Path id="Line" d="M10.536 10.5361C11.4153 9.82406 14.2525 10.4985 16.9009 11.205C19.5494 11.9115 22.3116 13.3923 23.0149 14.2608" stroke="white" strokeWidth={1.14286} strokeLinecap="square" /></G></G></G></G></Svg>;
+export default FlagBr;