@bacon-pos/ui 0.10.0 → 0.15.1

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/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/StatTile/StatTile.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export interface StatTileProps {
+  /** Small label above the value. */
+  label: string;
+  /** The value — a string/number, or a node for custom formatting/color. */
+  value: ReactNode;
+  /** Optional leading icon. */
+  icon?: IconName;
+  /** Fixed width. Omit to fill the parent (works in a flex/grid row of tiles). */
+  width?: number;
+  /** Make the tile pressable. */
+  onPress?: () => void;
+  /** Tile background. Defaults to `background.subtle`. */
+  backgroundColor?: string;
+  /** Label color. Defaults to `secondary`. */
+  labelColor?: string;
+  /** Value color (when `value` is text). Defaults to `primary`. */
+  valueColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * StatTile — a compact KPI card: a small label over a prominent value (Figma
+ * "info card"). Fills its parent by default (so a row/grid of tiles sizes evenly)
+ * or takes a fixed `width`. `value` accepts a node for custom color/formatting.
+ */
+export function StatTile({
+  label,
+  value,
+  icon,
+  width,
+  onPress,
+  backgroundColor,
+  labelColor,
+  valueColor,
+  style,
+  accessibilityLabel,
+}: StatTileProps) {
+  const theme = useTheme();
+
+  const content = (
+    <>
+      {icon ? (
+        <View style={{ width: 24, height: 24, flexShrink: 0 }}>
+          <Icon name={icon} size={24} color="secondary" />
+        </View>
+      ) : null}
+      <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+        <Text variant="bodySmall" color={labelColor ?? 'secondary'} numberOfLines={1}>
+          {label}
+        </Text>
+        {typeof value === 'string' || typeof value === 'number' ? (
+          <Text variant="bodyLarge" weight="semibold" color={valueColor ?? 'primary'} numberOfLines={1}>
+            {String(value)}
+          </Text>
+        ) : (
+          value
+        )}
+      </View>
+    </>
+  );
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 12,
+    borderRadius: theme.radii.lg,
+    backgroundColor: backgroundColor ?? theme.colors.background.subtle,
+    ...(width != null ? { width } : { alignSelf: 'stretch' }),
+  };
+
+  if (!onPress) {
+    return (
+      <View accessibilityLabel={accessibilityLabel} style={[containerStyle, style]}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={({ pressed }) => [containerStyle, { opacity: pressed ? 0.96 : 1 }, style]}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/components/StatTile/index.ts

@@ -0,0 +1,2 @@
+export { StatTile } from './StatTile';
+export type { StatTileProps } from './StatTile';

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

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './Avatar';
 export * from './Badge';
 export * from './brand';
@@ -15,6 +16,7 @@ export * from './IconButton';
 export * from './Input';
 export * from './Keypad';
 export * from './LinkButton';
+export * from './List';
 export * from './Menu';
 export * from './ProductCard';
 export * from './ProgressBar';
@@ -23,6 +25,7 @@ export * from './Radio';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';
+export * from './StatTile';
 export * from './Surface';
 export * from './Switch';
 export * from './Table';