@bacon-pos/ui 0.5.1 → 0.6.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,323 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Menu, type EdgeInsets, type MenuOrigin } from '../Menu/Menu';
+import { Text } from '../Text/Text';
+
+/** Width of the focus ring, in px (Figma "Focus" effect: spread 6). */
+const FOCUS_RING_SPREAD = 6;
+const FOCUS_RING_ALPHA = 0.15;
+
+/** 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 SelectSize = 'md' | 'lg';
+
+const SIZES: Record<
+  SelectSize,
+  { 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' },
+};
+
+/** An option in a `Select`. */
+export interface SelectOption {
+  key: string;
+  label: string;
+  /** Leading icon shown in the option row. */
+  icon?: IconName;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  /** The options to choose from. */
+  options: SelectOption[];
+  /** Allow choosing several options (checkbox rows; value is an array). */
+  multiple?: boolean;
+  /** Selected key(s) — a string (single) or string[] (multiple). Controlled. */
+  value?: string | string[];
+  /** Initial selection for the uncontrolled case. */
+  defaultValue?: string | string[];
+  /** Called with the new selection (string for single, string[] for multiple). */
+  onChange?: (value: string | string[]) => void;
+
+  /** Label above the field. */
+  label?: string;
+  /** Helper text below the field. Replaced by the error message when `error` is a string. */
+  helperText?: string;
+  /** Mark invalid. Pass a string to show it as the error message. */
+  error?: boolean | string;
+  /** Text shown when nothing is selected. Defaults to "Select option". */
+  placeholder?: string;
+  /** Fixed leading icon on the field. */
+  leftIcon?: IconName;
+  /** Field height: `md` = 48, `lg` = 58. Defaults to `lg`. */
+  size?: SelectSize;
+  /** Fixed field width. Omit to use `fullWidth` (the Figma default). */
+  width?: number;
+  /** Stretch to the full width of the parent. Defaults to true. Ignored when `width` is set. */
+  fullWidth?: boolean;
+  /** Disable the field. */
+  disabled?: boolean;
+  /** Custom display for the selected value(s). */
+  renderValue?: (selected: SelectOption[]) => string;
+
+  /** Match the menu width to the field width. Defaults to true. */
+  matchTriggerWidth?: boolean;
+  /** Menu width when `matchTriggerWidth` is false. */
+  menuWidth?: number;
+  /** Max menu height; scrolls beyond it. */
+  maxHeight?: number;
+  /** Point on the field the menu latches to. Defaults to `{ bottom, left }`. */
+  anchorOrigin?: MenuOrigin;
+  /** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
+  menuOrigin?: MenuOrigin;
+  /** Gap between field and menu. Defaults to 8. */
+  offset?: number;
+  /** Auto-fit the menu height and flip direction near screen edges. Defaults to true. */
+  autoFit?: boolean;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Close after selecting. Defaults to `!multiple`. */
+  closeOnSelect?: boolean;
+  /** Container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Select — a form field that opens a `Dropdown` of options. The field mirrors
+ * `Input` (pill, label, helper/error, lime focus ring, red error ring); it is
+ * not editable — pressing it opens the menu, which matches the field width. The
+ * current option is marked with a check. With `multiple`, rows become checkboxes,
+ * the value is an array, and the menu stays open while picking.
+ */
+export function Select({
+  options,
+  multiple = false,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  helperText,
+  error,
+  placeholder = 'Select option',
+  leftIcon,
+  size = 'lg',
+  width,
+  fullWidth = true,
+  disabled = false,
+  renderValue,
+  matchTriggerWidth = true,
+  menuWidth,
+  maxHeight,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
+  menuOrigin = { vertical: 'top', horizontal: 'left' },
+  offset = 8,
+  autoFit = true,
+  insets,
+  closeOnSelect,
+  style,
+}: SelectProps) {
+  const theme = useTheme();
+  const sizeConfig = SIZES[size];
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState<string | string[] | undefined>(
+    defaultValue ?? (multiple ? [] : undefined),
+  );
+  const current = isControlled ? value : internal;
+  const selectedKeys = multiple
+    ? ((current as string[] | undefined) ?? [])
+    : current != null
+      ? [current as string]
+      : [];
+
+  const commit = (next: string | string[]) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  const selectSingle = (key: string) => commit(key);
+  const toggleMulti = (key: string) => {
+    const set = new Set(selectedKeys);
+    if (set.has(key)) set.delete(key);
+    else set.add(key);
+    commit([...set]);
+  };
+
+  const selectedOptions = options.filter((o) => selectedKeys.includes(o.key));
+  const isEmpty = selectedOptions.length === 0;
+  const displayText = renderValue
+    ? renderValue(selectedOptions)
+    : isEmpty
+      ? placeholder
+      : selectedOptions.map((o) => o.label).join(', ');
+
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
+
+  const rows: DropdownEntry[] = options.map((o) => ({
+    key: o.key,
+    label: o.label,
+    disabled: o.disabled,
+    leading: o.icon ? { kind: 'icon', name: o.icon } : undefined,
+    trailing: multiple
+      ? { kind: 'checkbox', checked: selectedKeys.includes(o.key), onChange: () => toggleMulti(o.key) }
+      : selectedKeys.includes(o.key)
+        ? { kind: 'icon', name: 'check', color: theme.colors.feedback.success }
+        : undefined,
+  }));
+
+  const shouldClose = closeOnSelect ?? !multiple;
+
+  const iconBox: ViewStyle = {
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  const containerWidth: ViewStyle =
+    width != null
+      ? { width, alignSelf: 'flex-start' }
+      : fullWidth
+        ? { alignSelf: 'stretch' }
+        : { alignSelf: 'flex-start' };
+
+  return (
+    <View style={[containerWidth, style]}>
+      {label ? (
+        <Text variant="bodySmall" color="secondary" style={{ marginBottom: 4, marginLeft: 8 }}>
+          {label}
+        </Text>
+      ) : null}
+
+      <Menu
+        anchorOrigin={anchorOrigin}
+        menuOrigin={menuOrigin}
+        offset={offset}
+        autoFit={autoFit}
+        insets={insets}
+        triggerStyle={{ alignSelf: 'stretch' }}
+        renderTrigger={({ open, toggle }) => {
+          const showRing = open && !disabled;
+          const borderColor = disabled
+            ? theme.colors.disabled.border
+            : hasError
+              ? theme.colors.feedback.error
+              : open
+                ? theme.colors.border.focus
+                : theme.colors.border.default;
+          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;
+          return (
+            <Pressable
+              onPress={toggle}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityState={{ expanded: open, disabled }}
+              accessibilityLabel={label ?? placeholder}
+              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,
+              }}
+            >
+              {leftIcon ? (
+                <View style={iconBox}>
+                  <Icon
+                    name={leftIcon}
+                    size={sizeConfig.iconSize}
+                    color={disabled ? theme.colors.disabled.foreground : 'secondary'}
+                  />
+                </View>
+              ) : null}
+
+              <Text
+                variant={sizeConfig.textVariant}
+                color={disabled ? 'tertiary' : isEmpty ? 'tertiary' : 'primary'}
+                numberOfLines={1}
+                style={{ flex: 1, minWidth: 0 } as TextStyle}
+              >
+                {displayText}
+              </Text>
+
+              <View
+                style={[iconBox, { transform: [{ rotate: open ? '180deg' : '0deg' }] }]}
+              >
+                <Icon
+                  name="chevron-down"
+                  size={sizeConfig.iconSize}
+                  color={disabled ? theme.colors.disabled.foreground : 'secondary'}
+                />
+              </View>
+            </Pressable>
+          );
+        }}
+      >
+        {({ close, triggerWidth, maxHeight: autoMaxHeight }) => (
+          <Dropdown
+            options={rows}
+            width={matchTriggerWidth ? triggerWidth : menuWidth}
+            maxHeight={maxHeight ?? autoMaxHeight}
+            onSelect={
+              multiple
+                ? undefined
+                : (key) => {
+                    selectSingle(key);
+                    if (shouldClose) close();
+                  }
+            }
+          />
+        )}
+      </Menu>
+
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 8, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption, SelectSize } from './Select';

package/src/components/UserChip/UserChip.tsx

@@ -0,0 +1,138 @@
+import {
+  Pressable,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import type { TypographyVariant } from '../../theme/typography';
+import { Avatar } from '../Avatar/Avatar';
+import { Text } from '../Text/Text';
+
+export type UserChipSize = 'sm' | 'md' | 'lg';
+
+export interface UserChipProps {
+  /** Avatar image; when omitted or it fails to load, initials from `name` show. */
+  source?: ImageSourcePropType;
+  /**
+   * Name shown as the label and used for the avatar initials. When omitted, only
+   * the avatar renders (no pill) — the label's presence is driven by this prop.
+   */
+  name?: string;
+  /** Explicit initials for the avatar fallback (overrides `name`). */
+  initials?: string;
+  /** Size preset — scales the avatar, text and the fixed pill width. Defaults to `md`. */
+  size?: UserChipSize;
+  /** Pill background. Defaults to `action.primary` (lime). */
+  backgroundColor?: string;
+  /** Text color. Defaults to `action.secondaryForeground`. */
+  color?: string;
+  /** Make the chip pressable. */
+  onPress?: () => void;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label. Defaults to `name`. */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Per-size config. `width` is the fixed total pill width (the chip never grows or
+ * shrinks with the text — long names truncate). Avatar diameter equals the pill
+ * height, so it sits flush in the left circle.
+ */
+const SIZES: Record<
+  UserChipSize,
+  { diameter: number; gap: number; paddingRight: number; width: number; textVariant: TypographyVariant }
+> = {
+  sm: { diameter: 40, gap: 8, paddingRight: 16, width: 160, textVariant: 'bodyMedium' },
+  md: { diameter: 48, gap: 10, paddingRight: 20, width: 188, textVariant: 'bodyLarge' },
+  lg: { diameter: 58, gap: 12, paddingRight: 24, width: 212, textVariant: 'bodyLarge' },
+};
+
+/**
+ * User chip — an `Avatar` with an optional name. With a `name` it renders the
+ * lime pill from Figma "User": the avatar flush on the left and the name in a
+ * fixed-width box that is centered when short and truncates with an ellipsis when
+ * long. Without a `name` it is just the avatar. The pill width is fixed per size.
+ */
+export function UserChip({
+  source,
+  name,
+  initials,
+  size = 'md',
+  backgroundColor,
+  color,
+  onPress,
+  style,
+  accessibilityLabel,
+}: UserChipProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+  const hasName = Boolean(name && name.trim());
+
+  const avatar = (
+    <Avatar
+      source={source}
+      name={name}
+      initials={initials}
+      diameter={cfg.diameter}
+      accessibilityLabel={accessibilityLabel ?? name}
+    />
+  );
+
+  // No name → just the avatar, exactly like using <Avatar> directly.
+  if (!hasName) {
+    if (!onPress) return <View style={style}>{avatar}</View>;
+    return (
+      <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={style}>
+        {avatar}
+      </Pressable>
+    );
+  }
+
+  const pillStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: cfg.gap,
+    width: cfg.width,
+    height: cfg.diameter,
+    borderRadius: cfg.diameter / 2,
+    paddingRight: cfg.paddingRight,
+    backgroundColor: backgroundColor ?? theme.colors.action.primary,
+  };
+
+  const inner = (
+    <>
+      {avatar}
+      <Text
+        variant={cfg.textVariant}
+        weight="medium"
+        align="center"
+        color={color ?? theme.colors.action.secondaryForeground}
+        numberOfLines={1}
+        style={{ flex: 1 }}
+      >
+        {name}
+      </Text>
+    </>
+  );
+
+  if (!onPress) {
+    return (
+      <View accessibilityLabel={accessibilityLabel ?? name} style={[pillStyle, style]}>
+        {inner}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? name}
+      style={[pillStyle, style]}
+    >
+      {inner}
+    </Pressable>
+  );
+}

package/src/components/UserChip/index.ts

@@ -0,0 +1,2 @@
+export { UserChip } from './UserChip';
+export type { UserChipProps, UserChipSize } from './UserChip';

package/src/components/index.ts

@@ -7,18 +7,22 @@ export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
 export * from './Dialog';
+export * from './Dropdown';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
 export * from './Keypad';
 export * from './LinkButton';
+export * from './Menu';
 export * from './ProductCard';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './Select';
 export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
 export * from './Toast';
+export * from './UserChip';
 
 export type { LabelPosition } from './_internal/Labeled';