@bacon-pos/ui 0.1.0

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@bacon-pos/ui",
+  "version": "0.1.0",
+  "description": "Bacon POS design system — React Native component library",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/*.stories.ts",
+    "!**/*.stories.tsx"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "del-cli lib",
+    "build": "bob build",
+    "prepare": "bob build",
+    "typecheck": "tsc --noEmit",
+    "gen:icons": "node scripts/generate-icons.mjs",
+    "gen:graphics": "node scripts/generate-graphics.mjs",
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "changeset publish",
+    "version": "changeset version"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "design-system",
+    "component-library",
+    "ui",
+    "bacon-pos"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@changesets/cli": "^2.27.11",
+    "@react-native/babel-preset": "0.79.5",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-native-web-vite": "^8.6.14",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@testing-library/react-native": "^13.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "~19.0.10",
+    "del-cli": "^6.0.0",
+    "jest": "^29.7.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.5",
+    "react-native-svg": "15.11.2",
+    "react-native-web": "^0.20.0",
+    "react-test-renderer": "19.0.0",
+    "storybook": "^8.6.14",
+    "typescript": "~5.8.3",
+    "vite": "^6.0.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/.pnpm/(?!(?:@react-native|react-native))"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Image, View, type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Text } from '../Text/Text';
+
+export type AvatarSize = 'sm' | 'md' | 'lg';
+
+export interface AvatarProps {
+  /** Image source; when omitted or it fails to load, initials are shown. */
+  source?: ImageSourcePropType;
+  /** Full name used to derive the initials. */
+  name?: string;
+  /** Explicit initials (overrides `name`). */
+  initials?: string;
+  /** How many initials to show: 1 or 2. Defaults to 2. */
+  initialsCount?: 1 | 2;
+  /** Size preset: `sm` 32 / `md` 40 / `lg` 56. Defaults to `md`. */
+  size?: AvatarSize;
+  /** Custom diameter in px. Overrides `size` when set; initials scale to fit. */
+  diameter?: number;
+  /** Initials color. Defaults to a neutral foreground. */
+  color?: string;
+  /** Background behind initials (kept lighter than the initials). Defaults to a light neutral. */
+  backgroundColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label (defaults to `name`). */
+  accessibilityLabel?: string;
+}
+
+const SIZES: Record<AvatarSize, { diameter: number; text: TypographyVariant }> = {
+  sm: { diameter: 32, text: 'bodySmall' },
+  md: { diameter: 40, text: 'bodyMedium' },
+  lg: { diameter: 56, text: 'h3' },
+};
+
+function getInitials(name: string | undefined, explicit: string | undefined, count: 1 | 2): string {
+  if (explicit) return explicit.slice(0, count).toUpperCase();
+  if (!name) return '';
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0];
+  if (!first) return '';
+  if (count === 1) return first.charAt(0).toUpperCase();
+  const second = words[1];
+  if (second) return (first.charAt(0) + second.charAt(0)).toUpperCase();
+  return first.slice(0, 2).toUpperCase();
+}
+
+/**
+ * Avatar — circular user image with an initials fallback. Shows the photo when
+ * `source` loads; otherwise shows 1–2 uppercase initials on a lighter background.
+ * Sizes: sm / md / lg.
+ */
+export function Avatar({
+  source,
+  name,
+  initials,
+  initialsCount = 2,
+  size = 'md',
+  diameter,
+  color,
+  backgroundColor,
+  style,
+  accessibilityLabel,
+}: AvatarProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+  const [errored, setErrored] = useState(false);
+  const showImage = source != null && !errored;
+
+  const d = diameter ?? cfg.diameter;
+  const bg = backgroundColor ?? theme.colors.background.muted;
+  const fg = color ?? theme.colors.text.secondary;
+  // With a custom diameter, scale the initials to fit; otherwise use the preset.
+  const initialsStyle = diameter
+    ? { fontSize: Math.round(d * 0.4), lineHeight: Math.round(d * 0.5) }
+    : undefined;
+
+  return (
+    <View
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel ?? name}
+      style={[
+        {
+          width: d,
+          height: d,
+          borderRadius: d / 2,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: showImage ? theme.colors.background.default : bg,
+        },
+        style,
+      ]}
+    >
+      {showImage ? (
+        <Image
+          source={source}
+          resizeMode="cover"
+          onError={() => setErrored(true)}
+          style={{ width: '100%', height: '100%' }}
+        />
+      ) : (
+        <Text variant={cfg.text} weight="semibold" color={fg} style={initialsStyle}>
+          {getInitials(name, initials, initialsCount)}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize } from './Avatar';

package/src/components/Button/Button.tsx

@@ -0,0 +1,216 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  View,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Text } from '../Text/Text';
+
+/** Visual styles — 1:1 with the Figma "Round buttons" style variants. */
+export type ButtonVariant =
+  | 'default'
+  | 'secondary'
+  | 'inverse'
+  | 'destructive'
+  | 'success'
+  | 'successSubtle';
+
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/** `round` = pill (default), `square` = 16px corner radius. */
+export type ButtonShape = 'round' | 'square';
+
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Visual style. Defaults to `default` (the lime accent action). */
+  variant?: ButtonVariant;
+  /** Control height and typography. Defaults to `lg`. */
+  size?: ButtonSize;
+  /** Corner style. Defaults to `round` (pill). */
+  shape?: ButtonShape;
+  /** Button label. */
+  label: string;
+  /** Show a spinner in the leading slot and block presses. The label stays visible. */
+  loading?: boolean;
+  /** Disable interaction and apply disabled tokens. */
+  disabled?: boolean;
+  /** Stretch to the full width of the parent. */
+  fullWidth?: boolean;
+  /** Element rendered before the label (sized to the size's icon box). */
+  leftIcon?: ReactNode;
+  /** Element rendered after the label. */
+  rightIcon?: ReactNode;
+  /**
+   * Element rendered above the label in a vertical stack. Only applies when
+   * `shape="square"` — ignored otherwise. Takes precedence over left/right icons.
+   */
+  topIcon?: ReactNode;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<
+  ButtonSize,
+  { height: number; paddingHorizontal: number; gap: number; textVariant: TypographyVariant; iconSize: number }
+> = {
+  sm: { height: 48, paddingHorizontal: 16, gap: 10, textVariant: 'bodyMedium', iconSize: 20 },
+  md: { height: 58, paddingHorizontal: 24, gap: 10, textVariant: 'bodyLarge', iconSize: 24 },
+  lg: { height: 74, paddingHorizontal: 24, gap: 10, textVariant: 'bodyLarge', iconSize: 24 },
+  xl: { height: 90, paddingHorizontal: 24, gap: 10, textVariant: 'bodyLarge', iconSize: 24 },
+};
+
+interface VariantColors {
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+  borderWidth: number;
+}
+
+function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
+  const { action, state, border } = theme.colors;
+  const base: Omit<VariantColors, 'backgroundColor' | 'textColor'> = {
+    borderColor: 'transparent',
+    borderWidth: 0,
+  };
+  switch (variant) {
+    case 'secondary':
+      return {
+        backgroundColor: action.secondary,
+        textColor: action.secondaryForeground,
+        borderColor: border.default,
+        borderWidth: 1,
+      };
+    case 'inverse':
+      return { backgroundColor: action.inverse, textColor: action.inverseForeground, ...base };
+    case 'destructive':
+      return {
+        backgroundColor: state.destructiveSubtle,
+        textColor: state.destructiveSubtleForeground,
+        ...base,
+      };
+    case 'success':
+      return { backgroundColor: state.success, textColor: state.successForeground, ...base };
+    case 'successSubtle':
+      return {
+        backgroundColor: state.successSubtle,
+        textColor: state.successSubtleForeground,
+        ...base,
+      };
+    case 'default':
+    default:
+      return { backgroundColor: action.primary, textColor: action.primaryForeground, ...base };
+  }
+}
+
+/**
+ * Text button — faithful to the Bacon POS Figma "Buttons" frame.
+ * Colors, sizes, radii and states are driven by theme tokens.
+ */
+export function Button({
+  variant = 'default',
+  size = 'lg',
+  shape = 'round',
+  label,
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  topIcon,
+  style,
+  ...rest
+}: ButtonProps) {
+  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: theme.colors.disabled.background,
+      textColor: 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;
+  // Vertical (icon-on-top) layout is only allowed for the square shape.
+  const isVertical = shape === 'square' && !!topIcon;
+
+  const containerStyle = useMemo(
+    () =>
+      ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+        {
+          ...(isVertical
+            ? { paddingVertical: 16, flexDirection: 'column' as const }
+            : { height: sizeConfig.height, flexDirection: 'row' as const }),
+          paddingHorizontal: sizeConfig.paddingHorizontal,
+          borderRadius,
+          borderWidth: colors.borderWidth,
+          borderColor: colors.borderColor,
+          backgroundColor: colors.backgroundColor,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: isVertical ? 16 : sizeConfig.gap,
+          opacity: pressed && !isDisabled ? 0.9 : 1,
+          alignSelf: fullWidth ? 'stretch' : 'flex-start',
+        } satisfies ViewStyle,
+        style,
+      ],
+    [isVertical, sizeConfig, borderRadius, colors, isDisabled, fullWidth, style],
+  );
+
+  const iconBox: ViewStyle = {
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      style={containerStyle}
+      {...rest}
+    >
+      {isVertical ? (
+        <>
+          {loading ? (
+            <ActivityIndicator color={colors.textColor} size="small" />
+          ) : (
+            <View style={iconBox}>{topIcon}</View>
+          )}
+          <Text
+            variant={sizeConfig.textVariant}
+            weight="medium"
+            color={colors.textColor}
+            align="center"
+          >
+            {label}
+          </Text>
+        </>
+      ) : (
+        <>
+          {loading ? (
+            <ActivityIndicator color={colors.textColor} size="small" />
+          ) : leftIcon ? (
+            <View style={iconBox}>{leftIcon}</View>
+          ) : null}
+          <Text variant={sizeConfig.textVariant} weight="medium" color={colors.textColor}>
+            {label}
+          </Text>
+          {!loading && rightIcon ? <View style={iconBox}>{rightIcon}</View> : null}
+        </>
+      )}
+    </Pressable>
+  );
+}

package/src/components/Button/index.ts

@@ -0,0 +1,6 @@
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from './Button';

package/src/components/Card/Card.tsx

@@ -0,0 +1,145 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  Pressable,
+  View,
+  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';
+import { Text } from '../Text/Text';
+
+export interface CardProps {
+  /** Bold card title (H3). */
+  title?: string;
+  /** Supporting description below the title. */
+  description?: string;
+  /** Optional leading icon shown above the title. */
+  icon?: IconName;
+  /** Selected state — lime surface, lime border + focus ring, checked radio. */
+  selected?: boolean;
+  /** Show the radio indicator in the top-right corner. Defaults to true. */
+  showRadio?: boolean;
+  /** Makes the card pressable (to select it). */
+  onPress?: () => void;
+  /** Dim and block presses. */
+  disabled?: boolean;
+  /** Extra content rendered after the description. */
+  children?: ReactNode;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label (defaults to `title`). */
+  accessibilityLabel?: string;
+}
+
+function Radio({ selected, theme }: { selected: boolean; theme: Theme }) {
+  return (
+    <View
+      style={{
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(selected
+          ? { backgroundColor: theme.colors.action.primary }
+          : { borderWidth: 1.5, borderColor: theme.colors.border.strong }),
+      }}
+    >
+      {selected ? <Icon name="check" size={14} color={theme.colors.action.primaryForeground} /> : null}
+    </View>
+  );
+}
+
+/**
+ * Selectable card — faithful to the Bacon POS Figma "Card". A padded rounded
+ * surface with an optional icon, title, description and a radio indicator;
+ * `selected` applies the lime surface, border and focus ring.
+ */
+export function Card({
+  title,
+  description,
+  icon,
+  selected = false,
+  showRadio = true,
+  onPress,
+  disabled = false,
+  children,
+  style,
+  accessibilityLabel,
+}: CardProps) {
+  const theme = useTheme();
+
+  const baseStyle = useMemo<ViewStyle>(() => {
+    return {
+      gap: theme.spacing.md,
+      padding: theme.spacing['2xl'],
+      borderRadius: theme.radii['3xl'],
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: selected ? theme.colors.border.focus : 'transparent',
+      backgroundColor: selected
+        ? theme.colors.brand.accentSubtle // surface/selected #faffe6 (accent tint)
+        : theme.colors.background.default,
+      ...(selected
+        ? {
+            boxShadow: [
+              {
+                offsetX: 0,
+                offsetY: 0,
+                blurRadius: 0,
+                spreadDistance: 6,
+                color: 'rgba(201, 255, 0, 0.15)',
+              },
+            ] as ViewStyle['boxShadow'],
+          }
+        : null),
+      opacity: disabled ? 0.5 : 1,
+    };
+  }, [theme, selected, disabled]);
+
+  const content = (
+    <>
+      {icon ? <Icon name={icon} size={24} color="primary" /> : null}
+      {title ? (
+        <Text variant="h3" weight="semibold" color="primary" numberOfLines={1}>
+          {title}
+        </Text>
+      ) : null}
+      {description ? (
+        <Text variant="bodyMedium" color="tertiary">
+          {description}
+        </Text>
+      ) : null}
+      {children}
+      {showRadio ? (
+        <View style={{ position: 'absolute', top: 24, right: 24 }}>
+          <Radio selected={selected} theme={theme} />
+        </View>
+      ) : null}
+    </>
+  );
+
+  if (!onPress) {
+    return <View style={[baseStyle, style]}>{content}</View>;
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+      accessibilityLabel={accessibilityLabel ?? title}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }: PressableStateCallbackType) => [
+        baseStyle,
+        { opacity: disabled ? 0.5 : pressed ? 0.96 : 1 },
+        style,
+      ]}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card, type CardProps } from './Card';

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,86 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import { Labeled, type LabelPosition } from '../_internal/Labeled';
+
+export interface CheckboxProps {
+  /** Checked state. */
+  checked: boolean;
+  /** Called with the next checked value when pressed. */
+  onChange: (checked: boolean) => void;
+  /** Show the indeterminate (mixed) mark instead of a check. */
+  indeterminate?: boolean;
+  /** 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>;
+}
+
+/**
+ * Checkbox — faithful to the Bacon POS Figma "Form controls". 24px rounded box:
+ * unchecked (outlined), checked (dark fill + white check), indeterminate (dash).
+ * Standalone or with a positionable label.
+ */
+export function Checkbox({
+  checked,
+  onChange,
+  indeterminate = false,
+  disabled = false,
+  label,
+  labelPosition,
+  style,
+}: CheckboxProps) {
+  const theme = useTheme();
+  const on = checked || indeterminate;
+
+  let backgroundColor: string;
+  let borderWidth = 0;
+  let borderColor = 'transparent';
+  let markColor = theme.colors.background.default;
+
+  if (disabled) {
+    backgroundColor = on ? theme.colors.disabled.backgroundStrong : theme.colors.disabled.background;
+    borderWidth = on ? 0 : 1;
+    borderColor = theme.colors.disabled.border;
+    markColor = theme.colors.disabled.foreground;
+  } else if (on) {
+    backgroundColor = theme.colors.text.primary;
+  } else {
+    backgroundColor = theme.colors.background.default;
+    borderWidth = 1;
+    borderColor = theme.colors.border.strong;
+  }
+
+  const mark = indeterminate ? 'minus' : checked ? 'check' : null;
+
+  return (
+    <Labeled
+      label={label}
+      labelPosition={labelPosition}
+      disabled={disabled}
+      onPress={() => onChange(!checked)}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      style={style}
+    >
+      <View
+        style={{
+          width: 24,
+          height: 24,
+          borderRadius: theme.radii.md,
+          backgroundColor,
+          borderWidth,
+          borderColor,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {mark ? <Icon name={mark} size={18} color={markColor} /> : null}
+      </View>
+    </Labeled>
+  );
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';