@bacon-pos/ui 0.11.0 → 0.16.0

package/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useContext, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Dimensions,
@@ -12,6 +12,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import { ModalHostContext } from '../_internal/ModalHostContext';
 import { computeMenuPlacement } from './placement';
 
 export type OriginVertical = 'top' | 'center' | 'bottom';
@@ -57,8 +58,10 @@ export interface MenuProps {
   insets?: EdgeInsets;
   /**
    * Offset between window coordinates (where the trigger is measured) and the
-   * full-screen Modal the menu paints into. Defaults to the Android status bar
-   * height (0 on iOS / web). Pass 0 when the host runs edge-to-edge / immersive.
+   * full-screen Modal the menu paints into. When omitted it defaults to the
+   * Android status bar height, or 0 when rendered inside a full-screen Modal host
+   * (e.g. `Dialog`) or on iOS / web. Pass an explicit value to override (e.g. 0
+   * when the host runs edge-to-edge / immersive).
    */
   statusBarHeight?: number;
   /** Controlled open state. Omit for uncontrolled. */
@@ -105,13 +108,18 @@ export function Menu({
   offset = 8,
   autoFit = true,
   insets = ZERO_INSETS,
-  statusBarHeight = DEFAULT_STATUS_BAR_HEIGHT,
+  statusBarHeight,
   open: openProp,
   onOpenChange,
   screenPadding = 8,
   triggerStyle,
 }: MenuProps) {
   const triggerRef = useRef<View>(null);
+  // Inside a full-screen Modal host (e.g. Dialog) the trigger is already measured
+  // in full-screen coordinates, so no status-bar compensation is needed there.
+  const insideModalHost = useContext(ModalHostContext);
+  const effectiveStatusBarHeight =
+    statusBarHeight ?? (insideModalHost ? 0 : DEFAULT_STATUS_BAR_HEIGHT);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
   const isControlled = openProp !== undefined;
   const open = isControlled ? openProp : uncontrolledOpen;
@@ -182,7 +190,7 @@ export function Menu({
           insets,
           screenWidth: screen.width,
           screenHeight: screen.height,
-          statusBarHeight,
+          statusBarHeight: effectiveStatusBarHeight,
           autoFit,
         })
       : null;
@@ -231,7 +239,8 @@ export function Menu({
               transform: [{ scale: placed ? anim.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) : 1 }],
             }}
           >
-            {content}
+            {/* The overlay is itself a full-screen Modal host for nested menus. */}
+            <ModalHostContext.Provider value={true}>{content}</ModalHostContext.Provider>
           </Animated.View>
         </Pressable>
       </Modal>

package/src/components/ProgressBar/ProgressBar.tsx

@@ -24,6 +24,8 @@ export interface ProgressBarProps {
   trackColor?: string;
   /** Track border color. Defaults to `border.default`. */
   borderColor?: string;
+  /** Draw the track border (and inner inset). Set false for a flat, thin bar. Defaults to true. */
+  bordered?: boolean;
   /** Animate width changes. Defaults to true. */
   animated?: boolean;
   /** Override the container style. */
@@ -51,6 +53,7 @@ export function ProgressBar({
   color,
   trackColor,
   borderColor,
+  bordered = true,
   animated = true,
   style,
   accessibilityLabel,
@@ -79,7 +82,7 @@ export function ProgressBar({
     extrapolate: 'clamp',
   });
 
-  const inset = 2.5;
+  const inset = bordered ? 2.5 : 0;
 
   return (
     <View
@@ -92,8 +95,8 @@ export function ProgressBar({
         style={{
           height,
           borderRadius: height / 2,
-          borderWidth: 1.5,
-          borderColor: borderColor ?? theme.colors.border.default,
+          borderWidth: bordered ? 1.5 : 0,
+          borderColor: bordered ? borderColor ?? theme.colors.border.default : 'transparent',
           backgroundColor: trackColor ?? theme.colors.background.subtle,
           padding: inset,
           justifyContent: 'center',

package/src/components/SegmentedButton/SegmentedButton.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  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';
+
+export type SegmentedButtonSize = 'sm' | 'md';
+/** `default` = soft-rounded rectangle; `round` = fully rounded (pill). */
+export type SegmentedButtonShape = 'default' | 'round';
+
+export interface SegmentedOption {
+  /** Visible label. */
+  label: string;
+  /** Unique value reported on change. */
+  value: string;
+  /** Optional icon shown next to the label. */
+  icon?: IconName;
+  /** Icon side. Defaults to `left`. */
+  iconPosition?: 'left' | 'right';
+  /** Disable just this segment. */
+  disabled?: boolean;
+}
+
+export interface SegmentedButtonProps {
+  /** The segments. Two or more recommended; any count is supported. */
+  options: SegmentedOption[];
+  /** Selected value (controlled). */
+  value?: string;
+  /** Initial selected value (uncontrolled). Defaults to the first option. */
+  defaultValue?: string;
+  /** Change handler. */
+  onChange?: (value: string) => void;
+  /** Size: `sm` (16px text) or `md` (18px text, default). */
+  size?: SegmentedButtonSize;
+  /** Corner style: `default` (rounded rect) or `round` (pill). Defaults to `default`. */
+  shape?: SegmentedButtonShape;
+  /** Override the track corner radius in px (segments follow). Wins over `shape`. */
+  radius?: number;
+  /** Stretch to the container; segments share the width equally. */
+  fullWidth?: boolean;
+  /** Fixed track width in px (overrides `fullWidth`). */
+  width?: number;
+  /** Disable the whole control. */
+  disabled?: boolean;
+  /** Show the track border. Defaults to true. */
+  bordered?: boolean;
+  /** Track background color. Defaults to `background.muted`. */
+  trackColor?: string;
+  /** Selected segment background. Defaults to `action.inverse` (dark). */
+  selectedColor?: string;
+  /** Selected segment text/icon color. Defaults to `action.inverseForeground`. */
+  selectedTextColor?: string;
+  /** Unselected text/icon color. Defaults to `text.secondary`. */
+  textColor?: string;
+  /** Icon size override. Defaults to the size preset. */
+  iconSize?: number;
+  /** Slide the selected highlight between segments. Defaults to true. */
+  animated?: boolean;
+  /** Override the track container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label for the group. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+const SIZES: Record<
+  SegmentedButtonSize,
+  {
+    paddingH: number;
+    paddingV: number;
+    gap: number;
+    trackPadding: number;
+    text: TypographyVariant;
+    icon: number;
+    radius: RadiusToken;
+  }
+> = {
+  sm: { paddingH: 12, paddingV: 10, gap: 6, trackPadding: 4, text: 'bodyMedium', icon: 18, radius: 'md' },
+  md: { paddingH: 16, paddingV: 12, gap: 8, trackPadding: 5, text: 'bodyLarge', icon: 20, radius: 'lg' },
+};
+
+/**
+ * SegmentedButton — faithful to the Bacon POS Figma "Segmented button". A single
+ * connected control of 2+ options where exactly one is selected: the active
+ * segment fills dark with inverse text; the rest are transparent with secondary
+ * text, all inside a rounded track. Supports `sm`/`md` sizes, `default`/`round`
+ * shapes (or a custom `radius`), hug / `fullWidth` / fixed `width` layouts, icons,
+ * per-segment disabling, and color overrides. Controlled or uncontrolled.
+ */
+export function SegmentedButton({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = 'md',
+  shape = 'default',
+  radius,
+  fullWidth = false,
+  width,
+  disabled = false,
+  bordered = true,
+  trackColor,
+  selectedColor,
+  selectedTextColor,
+  textColor,
+  iconSize,
+  animated = true,
+  style,
+  accessibilityLabel,
+  testID,
+}: SegmentedButtonProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? options[0]?.value ?? '');
+  const selected = isControlled ? value : uncontrolled;
+
+  const select = (next: string) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+  };
+
+  // Sliding highlight (thumb): we measure each segment's position/size and glide
+  // an absolutely-positioned fill to the selected one.
+  const layouts = useRef<Record<string, { x: number; width: number }>>({});
+  const thumbX = useRef(new Animated.Value(0)).current;
+  const thumbW = useRef(new Animated.Value(0)).current;
+  const placed = useRef(false);
+  const [measured, setMeasured] = useState(false);
+
+  const placeThumb = (x: number, width: number, withAnim: boolean) => {
+    if (withAnim && animated) {
+      Animated.parallel([
+        Animated.timing(thumbX, { toValue: x, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+        Animated.timing(thumbW, { toValue: width, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+      ]).start();
+    } else {
+      thumbX.setValue(x);
+      thumbW.setValue(width);
+    }
+  };
+
+  // Animate to the selected segment when it changes (once layouts are known).
+  useEffect(() => {
+    const l = layouts.current[selected];
+    if (!l) return;
+    placeThumb(l.x, l.width, placed.current);
+    if (!placed.current) {
+      placed.current = true;
+      setMeasured(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, animated]);
+
+  const onSegmentLayout = (value: string) => (e: LayoutChangeEvent) => {
+    const { x, width } = e.nativeEvent.layout;
+    layouts.current[value] = { x, width };
+    // Place/keep the thumb aligned with the selected segment (initial mount and
+    // on relayout/resize) without animating.
+    if (value === selected) {
+      placeThumb(x, width, false);
+      if (!placed.current) {
+        placed.current = true;
+        setMeasured(true);
+      }
+    }
+  };
+
+  const trackRadius = radius ?? (shape === 'round' ? theme.radii.pill : theme.radii.xl);
+  const segmentRadius =
+    shape === 'round'
+      ? theme.radii.pill
+      : radius != null
+        ? Math.max(radius - cfg.trackPadding, 0)
+        : theme.radii[cfg.radius];
+
+  const selectedBg = selectedColor ?? theme.colors.action.inverse;
+  const selectedFg = selectedTextColor ?? theme.colors.action.inverseForeground;
+  const restFg = textColor ?? theme.colors.text.secondary;
+  const resolvedIconSize = iconSize ?? cfg.icon;
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        {
+          padding: cfg.trackPadding,
+          borderRadius: trackRadius,
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          backgroundColor: trackColor ?? theme.colors.background.muted,
+          alignSelf: fullWidth && width == null ? 'stretch' : 'flex-start',
+          width: width ?? (fullWidth ? '100%' : undefined),
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+    >
+      {/* Inner row: shares an unpadded coordinate space with the thumb so the
+          measured segment x/width line up exactly. */}
+      <View style={{ flexDirection: 'row', alignItems: 'stretch', gap: cfg.gap, position: 'relative' }}>
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: thumbX,
+            width: thumbW,
+            borderRadius: segmentRadius,
+            backgroundColor: selectedBg,
+            opacity: measured ? 1 : 0,
+          }}
+        />
+        {options.map((opt) => {
+          const isSelected = opt.value === selected;
+          const isDisabled = disabled || opt.disabled;
+          const fg = isSelected ? selectedFg : restFg;
+          const iconNode = opt.icon ? <Icon name={opt.icon} size={resolvedIconSize} color={fg} /> : null;
+          const iconRight = opt.iconPosition === 'right';
+          return (
+            <Pressable
+              key={opt.value}
+              onLayout={onSegmentLayout(opt.value)}
+              onPress={isDisabled ? undefined : () => select(opt.value)}
+              disabled={isDisabled}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+              accessibilityLabel={opt.label}
+              testID={`segment-${opt.value}`}
+              style={({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => ({
+                flex: fullWidth || width != null ? 1 : undefined,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: cfg.gap,
+                paddingHorizontal: cfg.paddingH,
+                paddingVertical: cfg.paddingV,
+                borderRadius: segmentRadius,
+                opacity: opt.disabled ? 0.5 : pressed && !isSelected ? 0.6 : 1,
+              })}
+            >
+              {iconNode && !iconRight ? iconNode : null}
+              <Text variant={cfg.text} weight="medium" color={fg} numberOfLines={1}>
+                {opt.label}
+              </Text>
+              {iconNode && iconRight ? iconNode : null}
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/components/SegmentedButton/index.ts

@@ -0,0 +1,7 @@
+export {
+  SegmentedButton,
+  type SegmentedButtonProps,
+  type SegmentedOption,
+  type SegmentedButtonSize,
+  type SegmentedButtonShape,
+} from './SegmentedButton';

package/src/components/Sidebar/Sidebar.tsx

@@ -234,6 +234,15 @@ export function Sidebar({
     extrapolate: 'clamp',
   });
 
+  // The logo glides to center the same way (measured so any custom logo works),
+  // at a constant size — no discrete size/alignment swap, so no flicker.
+  const [logoWidth, setLogoWidth] = useState(0);
+  const logoTranslateX = width.interpolate({
+    inputRange: [collapsedWidth, expandedWidth],
+    outputRange: [Math.max(0, (collapsedWidth - 2 * PADDING - logoWidth) / 2), 0],
+    extrapolate: 'clamp',
+  });
+
   const selectItem = (item: SidebarItem) => {
     if (!activeControlled) setActiveInternal(item.key);
     item.onPress?.();
@@ -246,7 +255,7 @@ export function Sidebar({
     onCollapsedChange?.(next);
   };
 
-  const logoNode = logo ?? <BaconLogo height={visualCollapsed ? 36 : 40} />;
+  const logoNode = logo ?? <BaconLogo height={40} />;
   const toggle = showToggle ? (
     <Animated.View style={{ transform: [{ translateX: toggleTranslateX }] }}>
       <Animated.View style={{ transform: [{ rotate: arrowRotate }] }}>
@@ -276,15 +285,14 @@ export function Sidebar({
         style,
       ]}
     >
-      {/* Logo */}
-      <View
-        style={{
-          minHeight: 56,
-          alignItems: visualCollapsed ? 'center' : 'flex-start',
-          justifyContent: 'center',
-        }}
-      >
-        {logoNode}
+      {/* Logo — constant size, glides to center on collapse (no flicker) */}
+      <View style={{ minHeight: 56, alignItems: 'flex-start', justifyContent: 'center' }}>
+        <Animated.View
+          onLayout={(e) => setLogoWidth(e.nativeEvent.layout.width)}
+          style={{ transform: [{ translateX: logoTranslateX }] }}
+        >
+          {logoNode}
+        </Animated.View>
       </View>
 
       {/* Tabs (scrolls when overflowing; footer stays pinned below) */}

package/src/components/Table/Table.tsx

@@ -11,13 +11,30 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { useTheme } from '../../theme';
+import type { DropdownEntry } from '../Dropdown/Dropdown';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { MenuButton } from '../Menu/MenuButton';
 import { Spinner } from '../Spinner/Spinner';
 import { Text } from '../Text/Text';
 import { ScrollArea } from '../_internal/ScrollArea';
 
 export type ColumnAlign = 'left' | 'center' | 'right';
+
+/** A structured row action (inline icon, or a row in the overflow "More" menu). */
+export interface TableAction {
+  key: string;
+  label: string;
+  icon: IconName;
+  onPress?: () => void;
+  /** Render in the error color (red icon inline, red row in the menu). */
+  destructive?: boolean;
+  /** Dim and block the action. */
+  disabled?: boolean;
+  /** Icon color override (ignored when `destructive`). */
+  color?: string;
+}
 export type SortDirection = 'asc' | 'desc';
 export interface TableSort {
   key: string;
@@ -63,9 +80,17 @@ export interface TableProps<T> {
   defaultExpandedKeys?: string[];
   onExpandedChange?: (keys: string[]) => void;
 
-  /** Trailing per-row actions (e.g. edit/delete) — mutually exclusive with `expandable`. */
+  /** Trailing per-row actions, free-form (e.g. custom buttons) — mutually exclusive with `expandable`. */
   renderActions?: (row: T, index: number) => ReactNode;
-  /** Width reserved for the actions column. Defaults to 96. */
+  /** Structured per-row actions: the first `maxInlineActions` render as inline icons, the rest collapse into a "More" menu. */
+  actions?: (row: T, index: number) => TableAction[];
+  /** How many actions render inline before overflowing into the More menu. Defaults to 2. */
+  maxInlineActions?: number;
+  /** Icon for the overflow menu trigger. Defaults to `more`. */
+  moreIcon?: IconName;
+  /** Width of the overflow More menu. */
+  actionsMenuWidth?: number;
+  /** Width reserved for the actions column. Defaults to fit the actions. */
   actionsWidth?: number;
 
   /** Row selection via checkboxes. */
@@ -135,7 +160,11 @@ export function Table<T>({
   defaultExpandedKeys,
   onExpandedChange,
   renderActions,
-  actionsWidth = 96,
+  actions,
+  maxInlineActions = 2,
+  moreIcon = 'more',
+  actionsMenuWidth,
+  actionsWidth,
   selectable = false,
   selectedKeys,
   defaultSelectedKeys,
@@ -159,8 +188,11 @@ export function Table<T>({
   const isMobile = screenWidth < mobileBreakpoint;
 
   // Expandable and actions are mutually exclusive; expandable wins if both set.
-  const hasActions = !expandable && !!renderActions;
-  const trailingWidth = expandable ? CHEVRON_WIDTH : hasActions ? actionsWidth : 0;
+  const hasActions = !expandable && (!!renderActions || !!actions);
+  const ACTION_SLOT = 44; // sm icon-button footprint (40 + gap)
+  const actionsColWidth =
+    actionsWidth ?? (renderActions ? 96 : (maxInlineActions + 1) * ACTION_SLOT);
+  const trailingWidth = expandable ? CHEVRON_WIDTH : hasActions ? actionsColWidth : 0;
 
   // ---- sort ----
   const sortControlled = sort !== undefined;
@@ -245,6 +277,57 @@ export function Table<T>({
     return content as ReactNode;
   };
 
+  // Actions cell: free-form `renderActions`, or structured `actions` with the
+  // first N inline and the rest in a "More" menu (all in the menu on mobile).
+  const renderActionsCell = (row: T, index: number): ReactNode => {
+    if (renderActions) return renderActions(row, index);
+    if (!actions) return null;
+    const list = actions(row, index);
+    const inlineCount = isMobile ? 0 : maxInlineActions;
+    const inline = list.slice(0, inlineCount);
+    const overflow = list.slice(inlineCount);
+    return (
+      <>
+        {inline.map((a) => (
+          <Pressable
+            key={a.key}
+            onPress={a.disabled ? undefined : a.onPress}
+            disabled={a.disabled}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel={a.label}
+            style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center', opacity: a.disabled ? 0.5 : 1 }}
+          >
+            <Icon
+              name={a.icon}
+              size={24}
+              color={a.destructive ? theme.colors.feedback.error : a.color ?? theme.colors.text.secondary}
+            />
+          </Pressable>
+        ))}
+        {overflow.length > 0 ? (
+          <MenuButton
+            icon={moreIcon}
+            accessibilityLabel="More actions"
+            variant="ghost"
+            size="sm"
+            menuWidth={actionsMenuWidth}
+            options={overflow.map(
+              (a): DropdownEntry => ({
+                key: a.key,
+                label: a.label,
+                disabled: a.disabled,
+                destructive: a.destructive,
+                leading: { kind: 'icon', name: a.icon, ...(a.destructive || !a.color ? {} : { color: a.color }) },
+                onPress: a.onPress,
+              }),
+            )}
+          />
+        ) : null}
+      </>
+    );
+  };
+
   // ---------- Desktop ----------
   const header = (
     <View
@@ -347,8 +430,8 @@ export function Table<T>({
               <Icon name="chevron-down" size={24} color="secondary" />
             </View>
           ) : hasActions ? (
-            <View style={{ width: actionsWidth, flexShrink: 0, flexDirection: 'row', justifyContent: 'flex-end', gap: 4 }}>
-              {renderActions!(row, index)}
+            <View style={{ width: actionsColWidth, flexShrink: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 4 }}>
+              {renderActionsCell(row, index)}
             </View>
           ) : null}
         </Pressable>
@@ -418,7 +501,9 @@ export function Table<T>({
             ) : null}
           </View>
           {hasActions ? (
-            <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 4 }}>{renderActions!(row, index)}</View>
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 4 }}>
+              {renderActionsCell(row, index)}
+            </View>
           ) : null}
         </Pressable>
         {expandable && isOpen && renderExpanded ? (

package/src/components/_internal/ModalHostContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * True when the subtree is rendered inside a full-screen (statusBarTranslucent)
+ * Modal host — e.g. `Dialog`, or a `Menu` overlay. Anchored menus use this to
+ * skip the status-bar coordinate compensation: inside such a host, a trigger
+ * measured with `measureInWindow` is already in full-screen coordinates that
+ * match the menu's own Modal, so adding the status bar height would push the
+ * menu down (a visible gap). Outside a host, the compensation is still applied.
+ */
+export const ModalHostContext = createContext(false);
+
+export function useInsideModalHost(): boolean {
+  return useContext(ModalHostContext);
+}

package/src/components/index.ts

@@ -16,11 +16,13 @@ export * from './IconButton';
 export * from './Input';
 export * from './Keypad';
 export * from './LinkButton';
+export * from './List';
 export * from './Menu';
 export * from './ProductCard';
 export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './SegmentedButton';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';