@bacon-pos/ui 0.1.0

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,126 @@
+import { Pressable, View, type PressableStateCallbackType, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import type { RadiusToken } from '../../theme/spacing';
+import type { TypographyVariant } from '../../theme/typography';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+/** Highlight color when the chip is active. */
+export type ChipTone = 'dark' | 'primary';
+
+export type ChipSize = 'sm' | 'md';
+
+const SIZES: Record<
+  ChipSize,
+  { paddingH: number; paddingV: number; gap: number; text: TypographyVariant; icon: number; swatch: number; radius: RadiusToken }
+> = {
+  sm: { paddingH: 12, paddingV: 6, gap: 6, text: 'bodySmall', icon: 16, swatch: 8, radius: 'md' },
+  md: { paddingH: 16, paddingV: 12, gap: 8, text: 'bodyMedium', icon: 20, swatch: 10, radius: 'lg' },
+};
+
+export interface ChipProps {
+  /** Chip label. */
+  label: string;
+  /** Selected/on state — filled highlight, inverse text, swatch hidden. */
+  active?: boolean;
+  /** Toggle handler. */
+  onPress?: () => void;
+  /** Active highlight: `dark` (default) or `primary` (the Button-default action color). */
+  tone?: ChipTone;
+  /** Control size: `sm` or `md` (default). */
+  size?: ChipSize;
+  /**
+   * Color dot shown on the left (a legend/convention color). Hidden when
+   * `active` — the chip fills with the tone color instead.
+   */
+  swatchColor?: string;
+  /** Optional left icon (shown in both states, tinted to the text color). */
+  icon?: IconName;
+  /** Show a check icon on the right while active. */
+  showCheck?: boolean;
+  /** Disable and dim. */
+  disabled?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label (defaults to `label`). */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Chip — faithful to the Bacon POS Figma "Chips". A selectable pill: default
+ * (light, secondary text) / active (filled, inverse text). Options: a left color
+ * swatch (a convention color) that hides when active, a left icon, a `primary`
+ * active tone, and a right check when selected.
+ */
+export function Chip({
+  label,
+  active = false,
+  onPress,
+  tone = 'dark',
+  size = 'md',
+  swatchColor,
+  icon,
+  showCheck = false,
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: ChipProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+
+  let backgroundColor = theme.colors.background.default;
+  let borderColor = theme.colors.border.default;
+  let contentColor = theme.colors.text.secondary;
+  if (active) {
+    if (tone === 'primary') {
+      // Same lime action color as the default Button.
+      backgroundColor = theme.colors.action.primary;
+      borderColor = theme.colors.action.primary;
+      contentColor = theme.colors.action.primaryForeground;
+    } else {
+      backgroundColor = theme.colors.text.primary;
+      borderColor = theme.colors.text.primary;
+      contentColor = theme.colors.text.inverse;
+    }
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      accessibilityRole="button"
+      accessibilityState={{ selected: active, disabled }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={({ pressed }: PressableStateCallbackType) => [
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          alignSelf: 'flex-start',
+          gap: cfg.gap,
+          paddingHorizontal: cfg.paddingH,
+          paddingVertical: cfg.paddingV,
+          borderRadius: theme.radii[cfg.radius],
+          borderWidth: 1,
+          borderColor,
+          backgroundColor,
+          opacity: disabled ? 0.5 : pressed ? 0.9 : 1,
+        },
+        style,
+      ]}
+    >
+      {icon ? (
+        <Icon name={icon} size={cfg.icon} color={contentColor} />
+      ) : swatchColor && !active ? (
+        <View
+          testID="chip-swatch"
+          style={{ width: cfg.swatch, height: cfg.swatch, borderRadius: cfg.swatch / 2, backgroundColor: swatchColor }}
+        />
+      ) : null}
+      <Text variant={cfg.text} weight="medium" color={contentColor} numberOfLines={1}>
+        {label}
+      </Text>
+      {active && showCheck ? <Icon name="check" size={cfg.icon} color={contentColor} /> : null}
+    </Pressable>
+  );
+}

package/src/components/Chip/ChipGroup.tsx

@@ -0,0 +1,88 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+import { Chip, type ChipTone, type ChipSize } from './Chip';
+
+export interface ChipOption {
+  value: string;
+  label: string;
+  /** Left convention color dot (hidden when active). */
+  swatchColor?: string;
+  /** Left icon. */
+  icon?: IconName;
+  /** Disable just this option. */
+  disabled?: boolean;
+}
+
+interface ChipGroupBase {
+  options: ChipOption[];
+  /** Active highlight tone applied to all chips. */
+  tone?: ChipTone;
+  /** Size applied to all chips. */
+  size?: ChipSize;
+  /** Show a check on selected chips. */
+  showCheck?: boolean;
+  /** Disable the whole group. */
+  disabled?: boolean;
+  /** Gap between chips. Defaults to 8. */
+  gap?: number;
+  /** Override the wrapper style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+interface SingleSelect {
+  multiple?: false;
+  /** Selected value, or null when none. */
+  value: string | null;
+  onChange: (value: string | null) => void;
+}
+
+interface MultiSelect {
+  multiple: true;
+  /** Selected values. */
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+
+export type ChipGroupProps = ChipGroupBase & (SingleSelect | MultiSelect);
+
+/**
+ * A wrapping row of Chips with single- or multi-select behavior. Set `multiple`
+ * to toggle several; otherwise selecting a chip replaces the selection (and
+ * re-tapping the active one clears it).
+ */
+export function ChipGroup(props: ChipGroupProps) {
+  const { options, tone, size, showCheck, disabled, gap = 8, style } = props;
+
+  const isSelected = (value: string) =>
+    props.multiple ? props.value.includes(value) : props.value === value;
+
+  const handlePress = (value: string) => {
+    if (props.multiple) {
+      const set = new Set(props.value);
+      if (set.has(value)) set.delete(value);
+      else set.add(value);
+      props.onChange(Array.from(set));
+    } else {
+      props.onChange(props.value === value ? null : value);
+    }
+  };
+
+  return (
+    <View style={[{ flexDirection: 'row', flexWrap: 'wrap', gap }, style]}>
+      {options.map((option) => (
+        <Chip
+          key={option.value}
+          label={option.label}
+          swatchColor={option.swatchColor}
+          icon={option.icon}
+          tone={tone}
+          size={size}
+          showCheck={showCheck}
+          active={isSelected(option.value)}
+          disabled={disabled || option.disabled}
+          onPress={() => handlePress(option.value)}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip, type ChipProps, type ChipTone, type ChipSize } from './Chip';
+export { ChipGroup, type ChipGroupProps, type ChipOption } from './ChipGroup';

package/src/components/CodeInput/CodeInput.tsx

@@ -0,0 +1,200 @@
+import { useRef, useState } from 'react';
+import {
+  Pressable,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+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;
+
+/** Where the reveal (eye) toggle sits relative to the code cells. */
+export type RevealPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface CodeInputProps {
+  /** Current entered digits. */
+  value: string;
+  /** Called with the digits as they change (digits only, capped to `length`). */
+  onChangeText: (value: string) => void;
+  /** Number of cells. Defaults to 4. */
+  length?: number;
+  /** Called once all cells are filled. */
+  onComplete?: (value: string) => void;
+  /** Disable input and dim the cells. */
+  disabled?: boolean;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Show an eye toggle to reveal/hide the entered digits. */
+  revealable?: boolean;
+  /** Controlled reveal state. Omit for uncontrolled (toggled by the eye). */
+  revealed?: boolean;
+  /** Called when the eye toggle changes the reveal state. */
+  onRevealChange?: (revealed: boolean) => void;
+  /** Where the eye toggle sits. Defaults to `right`. */
+  revealPosition?: RevealPosition;
+  /** Accessibility label for the hidden field. Defaults to "Code". */
+  accessibilityLabel?: string;
+  /** Accessibility labels for the reveal toggle. */
+  revealLabel?: string;
+  hideLabel?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+function Cell({
+  char,
+  filled,
+  revealed,
+  disabled,
+  theme,
+}: {
+  char: string;
+  filled: boolean;
+  revealed: boolean;
+  disabled: boolean;
+  theme: Theme;
+}) {
+  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'}>
+          {char}
+        </Text>
+      ) : (
+        <View
+          style={{
+            width: 20,
+            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,
+            opacity: disabled ? 0.5 : 1,
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+/**
+ * Code / PIN input — faithful to the Bacon POS Figma "Acceso code input".
+ * Shows `length` cells that fill as digits are entered; a hidden numeric field
+ * captures input. With `revealable`, an eye toggle switches between hidden dots
+ * and the visible digits (position configurable). Controlled via
+ * `value` / `onChangeText`.
+ */
+export function CodeInput({
+  value,
+  onChangeText,
+  length = 4,
+  onComplete,
+  disabled = false,
+  autoFocus = false,
+  revealable = false,
+  revealed: revealedProp,
+  onRevealChange,
+  revealPosition = 'right',
+  accessibilityLabel = 'Code',
+  revealLabel = 'Show code',
+  hideLabel = 'Hide code',
+  style,
+}: CodeInputProps) {
+  const theme = useTheme();
+  const inputRef = useRef<TextInput>(null);
+  const [internalRevealed, setInternalRevealed] = useState(false);
+  const revealed = revealedProp ?? internalRevealed;
+  const filled = Math.min(value.length, length);
+
+  const handleChange = (text: string) => {
+    const digits = text.replace(/[^0-9]/g, '').slice(0, length);
+    onChangeText(digits);
+    if (digits.length === length) onComplete?.(digits);
+  };
+
+  const toggleReveal = () => {
+    const next = !revealed;
+    onRevealChange?.(next);
+    if (revealedProp === undefined) setInternalRevealed(next);
+  };
+
+  const cells = (
+    <Pressable
+      onPress={() => inputRef.current?.focus()}
+      disabled={disabled}
+      style={{ position: 'relative' }}
+    >
+      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center', justifyContent: 'center' }}>
+        {Array.from({ length }).map((_, i) => (
+          <Cell
+            key={i}
+            char={value[i] ?? ''}
+            filled={i < filled}
+            revealed={revealed}
+            disabled={disabled}
+            theme={theme}
+          />
+        ))}
+      </View>
+      <TextInput
+        ref={inputRef}
+        value={value}
+        onChangeText={handleChange}
+        keyboardType="number-pad"
+        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>
+  );
+
+  const eyeToggle = revealable ? (
+    <Pressable
+      onPress={toggleReveal}
+      disabled={disabled}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel={revealed ? hideLabel : revealLabel}
+      style={{ padding: 4, opacity: disabled ? 0.5 : 1 }}
+    >
+      <Icon name={revealed ? 'eye' : 'eye-hide'} size={24} color="secondary" />
+    </Pressable>
+  ) : null;
+
+  const vertical = revealPosition === 'top' || revealPosition === 'bottom';
+  const eyeFirst = revealPosition === 'top' || revealPosition === 'left';
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: vertical ? 'column' : 'row',
+          alignItems: 'center',
+          gap: 12,
+          alignSelf: 'flex-start',
+          paddingVertical: 8,
+        },
+        style,
+      ]}
+    >
+      {eyeFirst ? eyeToggle : null}
+      {cells}
+      {eyeFirst ? null : eyeToggle}
+    </View>
+  );
+}

package/src/components/CodeInput/index.ts

@@ -0,0 +1 @@
+export { CodeInput, type CodeInputProps } from './CodeInput';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,32 @@
+import { SvgXml } from 'react-native-svg';
+import { useTheme } from '../../theme';
+import { icons, type IconName } from './icons.generated';
+
+type IconColorToken = keyof ReturnType<typeof useTheme>['colors']['text'];
+
+export interface IconProps {
+  /** Icon name from the generated registry. */
+  name: IconName;
+  /** Square size in px. Defaults to 24. */
+  size?: number;
+  /** Semantic text color token, or any raw color string. Defaults to `primary`. */
+  color?: IconColorToken | (string & {});
+}
+
+/**
+ * Renders a design-system icon as a themeable SVG. The source SVG is rendered
+ * faithfully via react-native-svg's <SvgXml> (stroke icons stay stroked,
+ * compound fills keep their holes) and tinted through `currentColor`.
+ */
+export function Icon({ name, size = 24, color = 'primary' }: IconProps) {
+  const theme = useTheme();
+  const xml = icons[name] as string | undefined;
+  if (!xml) return null;
+
+  const tint =
+    color in theme.colors.text
+      ? theme.colors.text[color as IconColorToken]
+      : (color as string);
+
+  return <SvgXml xml={xml} width={size} height={size} color={tint} />;
+}