@bacon-pos/ui 0.1.0

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon, type IconProps } from './Icon';
+export { icons, type IconName } from './icons.generated';

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,156 @@
+import { useMemo } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+
+/** Icon-only button styles — 1:1 with the Figma "Icon button" style variants. */
+export type IconButtonVariant =
+  | 'default'
+  | 'secondary'
+  | 'inverse'
+  | 'destructive'
+  | 'ghost';
+
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+
+/** `round` = circle (default), `square` = 16px corner radius. */
+export type IconButtonShape = 'round' | 'square';
+
+export interface IconButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Icon name from the generated registry. */
+  icon: IconName;
+  /**
+   * Describes the action for screen readers — required since there is no visible
+   * label (e.g. "Delete item").
+   */
+  accessibilityLabel: string;
+  /** Visual style. Defaults to `default` (the lime accent action). */
+  variant?: IconButtonVariant;
+  /** Container size: `sm` = 40, `md` = 48, `lg` = 58. Defaults to `md`. */
+  size?: IconButtonSize;
+  /** Corner style. Defaults to `round` (circle). */
+  shape?: IconButtonShape;
+  /** Show a spinner and block presses. */
+  loading?: boolean;
+  /** Disable interaction and apply disabled tokens. */
+  disabled?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<IconButtonSize, { box: number; iconSize: number }> = {
+  sm: { box: 40, iconSize: 20 },
+  md: { box: 48, iconSize: 24 },
+  lg: { box: 58, iconSize: 24 },
+};
+
+interface VariantColors {
+  backgroundColor: string;
+  iconColor: string;
+  borderColor: string;
+  borderWidth: number;
+}
+
+function getVariantColors(theme: Theme, variant: IconButtonVariant): VariantColors {
+  const { action, state, border, text } = theme.colors;
+  const noBorder = { borderColor: 'transparent', borderWidth: 0 };
+  switch (variant) {
+    case 'secondary':
+      return {
+        backgroundColor: action.secondary,
+        iconColor: action.secondaryForeground,
+        borderColor: border.default,
+        borderWidth: 1,
+      };
+    case 'inverse':
+      return { backgroundColor: action.inverse, iconColor: action.inverseForeground, ...noBorder };
+    case 'destructive':
+      return {
+        backgroundColor: state.destructiveSubtle,
+        iconColor: state.destructiveSubtleForeground,
+        ...noBorder,
+      };
+    case 'ghost':
+      return { backgroundColor: 'transparent', iconColor: text.primary, ...noBorder };
+    case 'default':
+    default:
+      return { backgroundColor: action.primary, iconColor: action.primaryForeground, ...noBorder };
+  }
+}
+
+/**
+ * Icon-only button — faithful to the Bacon POS Figma "Icon button" frames.
+ * Circular or square, token-driven colors and states.
+ */
+export function IconButton({
+  icon,
+  accessibilityLabel,
+  variant = 'default',
+  size = 'md',
+  shape = 'round',
+  loading = false,
+  disabled = false,
+  style,
+  ...rest
+}: IconButtonProps) {
+  const theme = useTheme();
+  const sizeConfig = SIZES[size];
+  const isDisabled = disabled || loading;
+
+  const colors = useMemo<VariantColors>(() => {
+    const variantColors = getVariantColors(theme, variant);
+    if (!isDisabled) return variantColors;
+    return {
+      backgroundColor: variant === 'ghost' ? 'transparent' : theme.colors.disabled.background,
+      iconColor: theme.colors.disabled.foreground,
+      borderColor: variantColors.borderWidth > 0 ? theme.colors.disabled.border : 'transparent',
+      borderWidth: variantColors.borderWidth,
+    };
+  }, [theme, variant, isDisabled]);
+
+  const borderRadius = shape === 'square' ? theme.radii.xl : theme.radii.pill;
+
+  const containerStyle = useMemo(
+    () =>
+      ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+        {
+          width: sizeConfig.box,
+          height: sizeConfig.box,
+          borderRadius,
+          borderWidth: colors.borderWidth,
+          borderColor: colors.borderColor,
+          backgroundColor: colors.backgroundColor,
+          alignItems: 'center',
+          justifyContent: 'center',
+          opacity: pressed && !isDisabled ? 0.9 : 1,
+        } satisfies ViewStyle,
+        style,
+      ],
+    [sizeConfig, borderRadius, colors, isDisabled, style],
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      style={containerStyle}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.iconColor} size="small" />
+      ) : (
+        <Icon name={icon} size={sizeConfig.iconSize} color={colors.iconColor} />
+      )}
+    </Pressable>
+  );
+}

package/src/components/IconButton/index.ts

@@ -0,0 +1,7 @@
+export {
+  IconButton,
+  type IconButtonProps,
+  type IconButtonVariant,
+  type IconButtonSize,
+  type IconButtonShape,
+} from './IconButton';

package/src/components/Input/Input.tsx

@@ -0,0 +1,230 @@
+import { forwardRef, useState, type ReactNode } from 'react';
+import {
+  Pressable,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputFocusEventData,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, textStyle } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+
+/** Width of the focus ring, in px (Figma "Focus" effect: spread 6). */
+const FOCUS_RING_SPREAD = 6;
+/** Focus ring opacity (Figma color #..0x26 ≈ 15%). */
+const FOCUS_RING_ALPHA = 0.15;
+
+/**
+ * Removes the browser's default focus outline on web (react-native-web renders
+ * TextInput as a DOM input). No-op on native; our lime focus ring is the focus
+ * affordance instead.
+ */
+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 InputSize = 'md' | 'lg';
+
+export interface InputProps extends Omit<TextInputProps, 'style' | 'editable'> {
+  /** Field label rendered above the input. */
+  label?: string;
+  /** Helper text rendered below the input. 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;
+  /** Field height: `md` = 48, `lg` = 58. Defaults to `lg`. */
+  size?: InputSize;
+  /** Disable input and apply disabled tokens. */
+  disabled?: boolean;
+  /** Element rendered inside the field, before the text. */
+  leftIcon?: ReactNode;
+  /** Element rendered inside the field, after the text. */
+  rightIcon?: ReactNode;
+  /**
+   * Password field with a trailing eye toggle to reveal/hide the text. Starts
+   * masked; the toggle replaces `rightIcon`.
+   */
+  revealable?: boolean;
+  /** Accessibility labels for the reveal toggle. */
+  revealLabel?: string;
+  hideLabel?: string;
+  /** Style for the outer wrapper (label + field + helper). */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Style for the field row. */
+  fieldStyle?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<
+  InputSize,
+  { height: number; gap: number; iconSize: number; textVariant: TypographyVariant }
+> = {
+  md: { height: 48, gap: 8, iconSize: 20, textVariant: 'bodyMedium' },
+  lg: { height: 58, gap: 10, iconSize: 24, textVariant: 'bodyLarge' },
+};
+
+/**
+ * Text field — faithful to the Bacon POS Figma "Input rounds".
+ * Pill-shaped, with label, helper/error text, optional icons and a lime focus
+ * ring. Focus is tracked internally; error and disabled are controlled by props.
+ */
+export const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    label,
+    helperText,
+    error,
+    size = 'lg',
+    disabled = false,
+    leftIcon,
+    rightIcon,
+    revealable = false,
+    revealLabel = 'Show password',
+    hideLabel = 'Hide password',
+    secureTextEntry,
+    containerStyle,
+    fieldStyle,
+    onFocus,
+    onBlur,
+    ...rest
+  },
+  ref,
+) {
+  const theme = useTheme();
+  const sizeConfig = SIZES[size];
+  const [focused, setFocused] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+
+  const effectiveSecure = revealable ? !revealed : secureTextEntry;
+  const trailing = revealable ? (
+    <Pressable
+      onPress={() => setRevealed((r) => !r)}
+      disabled={disabled}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel={revealed ? hideLabel : revealLabel}
+    >
+      <Icon name={revealed ? 'eye' : 'eye-hide'} size={sizeConfig.iconSize} color="tertiary" />
+    </Pressable>
+  ) : (
+    rightIcon
+  );
+
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
+
+  const borderColor = disabled
+    ? theme.colors.disabled.border
+    : hasError
+      ? theme.colors.feedback.error
+      : focused
+        ? theme.colors.border.focus
+        : theme.colors.border.default;
+
+  // Outer focus ring — a colored spread with no blur (Figma "Focus" effect).
+  // `boxShadow` (RN 0.76+ / New Architecture, and react-native-web) is the only
+  // cross-platform way to get a colored spread: `shadow*` is iOS-only with no
+  // spread, and `elevation` is a grey Android-only shadow.
+  const showRing = focused && !disabled;
+  const ringColor = hasError ? theme.colors.feedback.error : theme.colors.border.focus;
+  const boxShadow: ViewStyle['boxShadow'] = showRing
+    ? [
+        {
+          offsetX: 0,
+          offsetY: 0,
+          blurRadius: 0,
+          spreadDistance: FOCUS_RING_SPREAD,
+          color: hexToRgba(ringColor, FOCUS_RING_ALPHA),
+        },
+      ]
+    : undefined;
+
+  const iconBox: ViewStyle = {
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  return (
+    <View style={containerStyle}>
+      {label ? (
+        <Text variant="bodySmall" color="secondary" style={{ marginBottom: 4, marginLeft: 8 }}>
+          {label}
+        </Text>
+      ) : null}
+
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: sizeConfig.gap,
+            height: sizeConfig.height,
+            paddingHorizontal: 16,
+            borderWidth: 1,
+            borderColor,
+            borderRadius: theme.radii.pill,
+            backgroundColor: disabled
+              ? theme.colors.disabled.background
+              : theme.colors.background.default,
+            boxShadow,
+          },
+          fieldStyle,
+        ]}
+      >
+        {leftIcon ? <View style={iconBox}>{leftIcon}</View> : null}
+        <TextInput
+          ref={ref}
+          editable={!disabled}
+          secureTextEntry={effectiveSecure}
+          placeholderTextColor={theme.colors.text.tertiary}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={[
+            textStyle(theme, sizeConfig.textVariant, 'regular'),
+            {
+              flex: 1,
+              paddingVertical: 0,
+              color: disabled ? theme.colors.text.tertiary : theme.colors.text.primary,
+            },
+            WEB_NO_OUTLINE,
+          ]}
+          {...rest}
+        />
+        {trailing ? <View style={iconBox}>{trailing}</View> : null}
+      </View>
+
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 8, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
+  );
+});

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input, type InputProps, type InputSize } from './Input';

package/src/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,118 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  View,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Text } from '../Text/Text';
+
+/** Link styles — the Figma "Link buttons" frame (default / destructive). */
+export type LinkButtonVariant = 'default' | 'destructive';
+
+export type LinkButtonSize = 'md' | 'lg';
+
+export interface LinkButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Link label. */
+  label: string;
+  /** Color intent. Defaults to `default`. */
+  variant?: LinkButtonVariant;
+  /** Underline the label (Figma "underline" styles). Defaults to false. */
+  underline?: boolean;
+  /** Typography size: `md` = 16, `lg` = 18. Defaults to `md`. */
+  size?: LinkButtonSize;
+  /** Dim and block presses. */
+  disabled?: boolean;
+  /** Show a spinner in the leading slot and block presses. The label stays visible. */
+  loading?: boolean;
+  /** Element rendered before the label. */
+  leftIcon?: ReactNode;
+  /** Element rendered after the label. */
+  rightIcon?: ReactNode;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<LinkButtonSize, { textVariant: TypographyVariant; gap: number; iconSize: number }> = {
+  md: { textVariant: 'bodyMedium', gap: 8, iconSize: 20 },
+  lg: { textVariant: 'bodyLarge', gap: 10, iconSize: 24 },
+};
+
+/**
+ * Text link with an optional underline — faithful to the Bacon POS Figma
+ * "Link buttons" frame. No background; sits inline with copy.
+ */
+export function LinkButton({
+  label,
+  variant = 'default',
+  underline = false,
+  size = 'md',
+  disabled = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  style,
+  ...rest
+}: LinkButtonProps) {
+  const theme = useTheme();
+  const sizeConfig = SIZES[size];
+  const isDisabled = disabled || loading;
+
+  const textColor = isDisabled
+    ? theme.colors.disabled.foreground
+    : variant === 'destructive'
+      ? theme.colors.state.destructiveSubtleForeground
+      : theme.colors.action.secondaryForeground; // neutral-800, Figma text/foreground
+
+  const labelStyle: TextStyle = underline ? { textDecorationLine: 'underline' } : {};
+
+  const containerStyle = useMemo(
+    () =>
+      ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          alignSelf: 'flex-start',
+          gap: sizeConfig.gap,
+          paddingVertical: 2,
+          opacity: pressed && !isDisabled ? 0.6 : 1,
+        } satisfies ViewStyle,
+        style,
+      ],
+    [sizeConfig, isDisabled, style],
+  );
+
+  const iconBox: ViewStyle = {
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      hitSlop={8}
+      style={containerStyle}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator color={textColor} size="small" />
+      ) : leftIcon ? (
+        <View style={iconBox}>{leftIcon}</View>
+      ) : null}
+      <Text variant={sizeConfig.textVariant} weight="medium" color={textColor} style={labelStyle}>
+        {label}
+      </Text>
+      {!loading && rightIcon ? <View style={iconBox}>{rightIcon}</View> : null}
+    </Pressable>
+  );
+}

package/src/components/LinkButton/index.ts

@@ -0,0 +1,6 @@
+export {
+  LinkButton,
+  type LinkButtonProps,
+  type LinkButtonVariant,
+  type LinkButtonSize,
+} from './LinkButton';

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import {
+  Image,
+  Pressable,
+  View,
+  type ImageSourcePropType,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { palette } from '../../theme/palette';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+
+const PHOTO_HEIGHT = 104;
+const NO_PHOTO_ICON = 48;
+
+export interface ProductCardProps {
+  /** Product name (up to 2 lines). */
+  name: string;
+  /** Pre-formatted price string, e.g. "$5.50". */
+  price: string;
+  /** Product image. Omit for the no-photo layout; on load error it falls back to a placeholder. */
+  image?: ImageSourcePropType;
+  /** Category label shown on the photo (e.g. "Starters"). */
+  category?: string;
+  /** Category pill background color. Defaults to the design's light category tint. */
+  categoryColor?: string;
+  /** When > 0, shows the lime quantity badge. */
+  quantity?: number;
+  /** Makes the card pressable. */
+  onPress?: () => void;
+  /** Dim and block presses. */
+  disabled?: boolean;
+  /** Override the container style (e.g. width in a grid). */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label. Defaults to "{name}, {price}". */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Product tile — faithful to the Bacon POS Figma "Product card". Photo with an
+ * optional category pill, name + price, and a lime quantity badge. Handles three
+ * states: with photo, image-load failure (placeholder), and no photo (shorter).
+ */
+export function ProductCard({
+  name,
+  price,
+  image,
+  category,
+  categoryColor = '#FDD8D8', // dish-category/1-light (category-specific tint)
+  quantity,
+  onPress,
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: ProductCardProps) {
+  const theme = useTheme();
+  const [errored, setErrored] = useState(false);
+
+  const hasPhoto = image != null;
+  const showBadge = typeof quantity === 'number' && quantity > 0;
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: theme.colors.background.default,
+    borderRadius: theme.radii['2xl'],
+    padding: 8,
+    overflow: 'hidden',
+  };
+
+  const categoryPill = (extra: ViewStyle) =>
+    category ? (
+      <View
+        style={{
+          backgroundColor: categoryColor,
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderRadius: theme.radii.pill,
+          ...extra,
+        }}
+      >
+        <Text variant="bodySmall" weight="medium" color="primary" numberOfLines={1}>
+          {category}
+        </Text>
+      </View>
+    ) : null;
+
+  const content = (
+    <>
+      {hasPhoto ? (
+        <View
+          style={{
+            height: PHOTO_HEIGHT,
+            width: '100%',
+            borderTopLeftRadius: theme.radii.xl,
+            borderTopRightRadius: theme.radii.xl,
+            overflow: 'hidden',
+            backgroundColor: errored ? palette.neutral[200] : theme.colors.background.default,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {errored ? (
+            <Icon name="no-photo" size={NO_PHOTO_ICON} color="tertiary" />
+          ) : (
+            <Image
+              source={image}
+              resizeMode="cover"
+              onError={() => setErrored(true)}
+              style={{ width: '100%', height: '100%' }}
+            />
+          )}
+          {/* Category pill sits on the photo, bottom-left. */}
+          {categoryPill({ position: 'absolute', left: 10, bottom: 8 })}
+        </View>
+      ) : null}
+
+      <View style={{ gap: 12, paddingTop: 16, paddingBottom: 10, paddingHorizontal: 10, width: '100%' }}>
+        {/* No photo: the category pill moves inline, above the name. */}
+        {!hasPhoto ? categoryPill({ alignSelf: 'flex-start' }) : null}
+        <Text variant="h2" weight="semibold" color="primary" numberOfLines={2}>
+          {name}
+        </Text>
+        <Text variant="bodyMedium" weight="medium" color="tertiary" numberOfLines={1}>
+          {price}
+        </Text>
+      </View>
+
+      {showBadge ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            width: 32,
+            height: 32,
+            borderRadius: theme.radii.pill,
+            backgroundColor: theme.colors.action.primary,
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: [
+              { offsetX: 0, offsetY: 10, blurRadius: 7.5, spreadDistance: 0, color: 'rgba(0,0,0,0.04)' },
+              { offsetX: 0, offsetY: 4, blurRadius: 3, spreadDistance: 0, color: 'rgba(0,0,0,0.04)' },
+            ] as ViewStyle['boxShadow'],
+          }}
+        >
+          <Text variant="bodyMedium" weight="medium" color={theme.colors.action.primaryForeground}>
+            {quantity}
+          </Text>
+        </View>
+      ) : null}
+    </>
+  );
+
+  if (!onPress) {
+    return <View style={[containerStyle, style]}>{content}</View>;
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? `${name}, ${price}`}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }: PressableStateCallbackType) => [
+        containerStyle,
+        { opacity: disabled ? 0.5 : pressed ? 0.96 : 1 },
+        style,
+      ]}
+    >
+      {content}
+    </Pressable>
+  );
+}