@bacon-pos/ui 0.9.0 → 0.10.0

package/src/components/Table/Table.tsx

@@ -0,0 +1,556 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export type ColumnAlign = 'left' | 'center' | 'right';
+export type SortDirection = 'asc' | 'desc';
+export interface TableSort {
+  key: string;
+  direction: SortDirection;
+}
+
+export interface TableColumn<T> {
+  /** Unique column id. */
+  key: string;
+  /** Header content (string or node). */
+  header: ReactNode;
+  /** Cell renderer. Defaults to `String(row[key])`. Return a string/number or any node (e.g. a `Badge`). */
+  render?: (row: T, index: number) => ReactNode;
+  /** Flex grow. Defaults to 1. Ignored when `width` is set. */
+  flex?: number;
+  /** Fixed column width in px. */
+  width?: number;
+  /** Text/content alignment. Defaults to `left`. */
+  align?: ColumnAlign;
+  /** Enable sorting on this column (needs `sortAccessor`). */
+  sortable?: boolean;
+  /** Value used to sort this column when sorting internally. */
+  sortAccessor?: (row: T) => string | number;
+}
+
+export interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  /** Stable key per row. */
+  keyExtractor: (row: T, index: number) => string;
+
+  /** Row press (non-expandable tables). Expandable rows toggle on press instead. */
+  onRowPress?: (row: T, index: number) => void;
+
+  /** Expandable (accordion) rows — mutually exclusive with `renderActions`. */
+  expandable?: boolean;
+  /** Content shown when a row is expanded. */
+  renderExpanded?: (row: T, index: number) => ReactNode;
+  /** One open row at a time (`single`) or many (`multiple`). Defaults to `single`. */
+  expansionMode?: 'single' | 'multiple';
+  /** Controlled expanded row keys. */
+  expandedKeys?: string[];
+  defaultExpandedKeys?: string[];
+  onExpandedChange?: (keys: string[]) => void;
+
+  /** Trailing per-row actions (e.g. edit/delete) — mutually exclusive with `expandable`. */
+  renderActions?: (row: T, index: number) => ReactNode;
+  /** Width reserved for the actions column. Defaults to 96. */
+  actionsWidth?: number;
+
+  /** Row selection via checkboxes. */
+  selectable?: boolean;
+  selectedKeys?: string[];
+  defaultSelectedKeys?: string[];
+  onSelectionChange?: (keys: string[]) => void;
+
+  /** Controlled sort. Omit for internal sorting via each column's `sortAccessor`. */
+  sort?: TableSort;
+  defaultSort?: TableSort;
+  onSortChange?: (sort: TableSort) => void;
+
+  /** Rounded, clipped container. Defaults to true. */
+  rounded?: boolean;
+  /** Cap the body height; rows scroll with the elegant indicator, header stays. */
+  maxHeight?: number;
+  scrollbarColor?: string;
+
+  /** Show a loading placeholder instead of rows. */
+  loading?: boolean;
+  /** Loading style: a centered `spinner` (default) or shimmering `skeleton` rows. */
+  loadingVariant?: 'spinner' | 'skeleton';
+  /** Text under the spinner. Defaults to "Loading data"; pass `null` to hide it. */
+  loadingText?: string | null;
+  /** Number of skeleton rows. Defaults to 5. */
+  skeletonRows?: number;
+  /** Shown when there is no data (and not loading). */
+  empty?: ReactNode;
+
+  /** Below this width the table renders each row as a card. Defaults to 640. */
+  mobileBreakpoint?: number;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const ROW_HEIGHT = 72;
+const PADDING = 24;
+const CELL_GAP = 8;
+const SEL_WIDTH = 24;
+const CHEVRON_WIDTH = 24;
+
+function alignToJustify(a: ColumnAlign | undefined): ViewStyle['justifyContent'] {
+  return a === 'center' ? 'center' : a === 'right' ? 'flex-end' : 'flex-start';
+}
+function alignToText(a: ColumnAlign | undefined): TextStyle['textAlign'] {
+  return a === 'center' ? 'center' : a === 'right' ? 'right' : 'left';
+}
+
+/**
+ * Table — a flexible, token-driven data table (Figma "Table"). Columns define
+ * width/flex, alignment and cell renderers (text, `Badge`, anything). Supports
+ * sortable headers, checkbox selection, and accordion rows (expand on row press)
+ * OR a trailing actions column (the two are mutually exclusive). A sticky header
+ * with an elegant scrolling body (`maxHeight`), loading and empty states, and a
+ * card fallback below `mobileBreakpoint`.
+ */
+export function Table<T>({
+  columns,
+  data,
+  keyExtractor,
+  onRowPress,
+  expandable = false,
+  renderExpanded,
+  expansionMode = 'single',
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
+  renderActions,
+  actionsWidth = 96,
+  selectable = false,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  sort,
+  defaultSort,
+  onSortChange,
+  rounded = true,
+  maxHeight,
+  scrollbarColor,
+  loading = false,
+  loadingVariant = 'spinner',
+  loadingText = 'Loading data',
+  skeletonRows = 5,
+  empty,
+  mobileBreakpoint = 640,
+  style,
+}: TableProps<T>) {
+  const theme = useTheme();
+  const { width: screenWidth } = useWindowDimensions();
+  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;
+
+  // ---- sort ----
+  const sortControlled = sort !== undefined;
+  const [sortInternal, setSortInternal] = useState<TableSort | undefined>(defaultSort);
+  const activeSort = sortControlled ? sort : sortInternal;
+  const setSort = (next: TableSort) => {
+    if (!sortControlled) setSortInternal(next);
+    onSortChange?.(next);
+  };
+  const onHeaderPress = (col: TableColumn<T>) => {
+    if (!col.sortable) return;
+    const direction: SortDirection =
+      activeSort?.key === col.key && activeSort.direction === 'asc' ? 'desc' : 'asc';
+    setSort({ key: col.key, direction });
+  };
+  const sortedData = useMemo(() => {
+    if (sortControlled || !activeSort) return data; // controlled → consumer sorts
+    const col = columns.find((c) => c.key === activeSort.key);
+    if (!col?.sortAccessor) return data;
+    const accessor = col.sortAccessor;
+    const arr = [...data].sort((a, b) => {
+      const av = accessor(a);
+      const bv = accessor(b);
+      if (av < bv) return -1;
+      if (av > bv) return 1;
+      return 0;
+    });
+    return activeSort.direction === 'asc' ? arr : arr.reverse();
+  }, [data, activeSort, sortControlled, columns]);
+
+  // ---- selection ----
+  const selControlled = selectedKeys !== undefined;
+  const [selInternal, setSelInternal] = useState<string[]>(defaultSelectedKeys ?? []);
+  const selected = selControlled ? selectedKeys : selInternal;
+  const setSelected = (keys: string[]) => {
+    if (!selControlled) setSelInternal(keys);
+    onSelectionChange?.(keys);
+  };
+  const allKeys = sortedData.map((r, i) => keyExtractor(r, i));
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selected.includes(k));
+  const someSelected = !allSelected && allKeys.some((k) => selected.includes(k));
+  const toggleRowSel = (k: string) =>
+    setSelected(selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k]);
+  const toggleAllSel = () => setSelected(allSelected ? [] : allKeys);
+
+  // ---- expansion ----
+  const expControlled = expandedKeys !== undefined;
+  const [expInternal, setExpInternal] = useState<string[]>(defaultExpandedKeys ?? []);
+  const expanded = expControlled ? expandedKeys : expInternal;
+  const setExpanded = (keys: string[]) => {
+    if (!expControlled) setExpInternal(keys);
+    onExpandedChange?.(keys);
+  };
+  const toggleExpand = (k: string) => {
+    const isOpen = expanded.includes(k);
+    if (expansionMode === 'single') setExpanded(isOpen ? [] : [k]);
+    else setExpanded(isOpen ? expanded.filter((x) => x !== k) : [...expanded, k]);
+  };
+
+  const cellStyle = (col: TableColumn<T>): ViewStyle => ({
+    ...(col.width != null ? { width: col.width } : { flex: col.flex ?? 1 }),
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: alignToJustify(col.align),
+  });
+
+  const renderCellContent = (col: TableColumn<T>, row: T, index: number) => {
+    const content = col.render ? col.render(row, index) : (row as Record<string, unknown>)[col.key];
+    if (content == null || typeof content === 'string' || typeof content === 'number') {
+      return (
+        <Text
+          variant="bodyMedium"
+          color={theme.colors.action.secondaryForeground}
+          numberOfLines={1}
+          style={{ flexShrink: 1, textAlign: alignToText(col.align) }}
+        >
+          {content == null ? '' : String(content)}
+        </Text>
+      );
+    }
+    return content as ReactNode;
+  };
+
+  // ---------- Desktop ----------
+  const header = (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: CELL_GAP,
+        paddingHorizontal: PADDING,
+        paddingVertical: 16,
+        backgroundColor: theme.colors.background.muted,
+        ...(rounded ? { borderTopLeftRadius: theme.radii.lg, borderTopRightRadius: theme.radii.lg } : null),
+      }}
+    >
+      {selectable ? (
+        <View style={{ width: SEL_WIDTH, flexShrink: 0 }}>
+          <Checkbox
+            checked={allSelected}
+            indeterminate={someSelected}
+            onChange={toggleAllSel}
+          />
+        </View>
+      ) : null}
+      {columns.map((col) => {
+        const isSorted = activeSort?.key === col.key;
+        return (
+          <Pressable
+            key={col.key}
+            disabled={!col.sortable}
+            onPress={() => onHeaderPress(col)}
+            style={[cellStyle(col), { gap: 4 }]}
+          >
+            {typeof col.header === 'string' ? (
+              <Text
+                variant="bodyMedium"
+                weight="medium"
+                color="secondary"
+                numberOfLines={1}
+                style={{ flexShrink: 1, textAlign: alignToText(col.align) }}
+              >
+                {col.header}
+              </Text>
+            ) : (
+              col.header
+            )}
+            {col.sortable ? (
+              <View style={{ transform: [{ rotate: isSorted && activeSort?.direction === 'asc' ? '180deg' : '0deg' }] }}>
+                <Icon name="chevron-down" size={16} color={isSorted ? 'secondary' : 'tertiary'} />
+              </View>
+            ) : null}
+          </Pressable>
+        );
+      })}
+      {trailingWidth > 0 ? <View style={{ width: trailingWidth, flexShrink: 0 }} /> : null}
+    </View>
+  );
+
+  const renderDesktopRow = (row: T, index: number) => {
+    const k = keyExtractor(row, index);
+    const isOpen = expanded.includes(k);
+    const rowPressable = expandable || !!onRowPress;
+    return (
+      <View key={k}>
+        <Pressable
+          onPress={rowPressable ? () => (expandable ? toggleExpand(k) : onRowPress?.(row, index)) : undefined}
+          disabled={!rowPressable}
+          style={({ pressed }) => ({
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: CELL_GAP,
+            minHeight: ROW_HEIGHT,
+            paddingHorizontal: PADDING,
+            paddingVertical: 12,
+            backgroundColor:
+              pressed && rowPressable ? theme.colors.background.subtle : theme.colors.background.default,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border.subtle,
+          })}
+        >
+          {selectable ? (
+            <View style={{ width: SEL_WIDTH, flexShrink: 0 }}>
+              <Checkbox
+                checked={selected.includes(k)}
+                onChange={() => toggleRowSel(k)}
+              />
+            </View>
+          ) : null}
+          {columns.map((col) => (
+            <View key={col.key} style={cellStyle(col)}>
+              {renderCellContent(col, row, index)}
+            </View>
+          ))}
+          {expandable ? (
+            <View
+              style={{
+                width: CHEVRON_WIDTH,
+                flexShrink: 0,
+                transform: [{ rotate: isOpen ? '180deg' : '0deg' }],
+              }}
+            >
+              <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>
+          ) : null}
+        </Pressable>
+        {expandable && isOpen && renderExpanded ? (
+          <View
+            style={{
+              paddingHorizontal: PADDING,
+              paddingVertical: 16,
+              backgroundColor: theme.colors.background.subtle,
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border.subtle,
+            }}
+          >
+            {renderExpanded(row, index)}
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+
+  // ---------- Mobile (cards) ----------
+  const renderMobileCard = (row: T, index: number) => {
+    const k = keyExtractor(row, index);
+    const isOpen = expanded.includes(k);
+    const rowPressable = expandable || !!onRowPress;
+    return (
+      <View
+        key={k}
+        style={{
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+          borderRadius: theme.radii.lg,
+          backgroundColor: theme.colors.background.default,
+          overflow: 'hidden',
+        }}
+      >
+        <Pressable
+          onPress={rowPressable ? () => (expandable ? toggleExpand(k) : onRowPress?.(row, index)) : undefined}
+          disabled={!rowPressable}
+          style={{ padding: 16, gap: 10 }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+            {selectable ? (
+              <Checkbox
+                checked={selected.includes(k)}
+                onChange={() => toggleRowSel(k)}
+              />
+            ) : null}
+            <View style={{ flex: 1, gap: 8 }}>
+              {columns.map((col) => (
+                <View key={col.key} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                  {typeof col.header === 'string' ? (
+                    <Text variant="bodySmall" color="tertiary" numberOfLines={1}>
+                      {col.header}
+                    </Text>
+                  ) : (
+                    col.header
+                  )}
+                  <View style={{ flexShrink: 1, alignItems: 'flex-end' }}>{renderCellContent(col, row, index)}</View>
+                </View>
+              ))}
+            </View>
+            {expandable ? (
+              <View style={{ transform: [{ rotate: isOpen ? '180deg' : '0deg' }] }}>
+                <Icon name="chevron-down" size={24} color="secondary" />
+              </View>
+            ) : null}
+          </View>
+          {hasActions ? (
+            <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 4 }}>{renderActions!(row, index)}</View>
+          ) : null}
+        </Pressable>
+        {expandable && isOpen && renderExpanded ? (
+          <View style={{ padding: 16, paddingTop: 0 }}>{renderExpanded(row, index)}</View>
+        ) : null}
+      </View>
+    );
+  };
+
+  // ---------- Loading ----------
+  const pulse = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!loading || loadingVariant !== 'skeleton') return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: Platform.OS !== 'web' }),
+        Animated.timing(pulse, { toValue: 0, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: Platform.OS !== 'web' }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [loading, loadingVariant, pulse]);
+  const barOpacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.45, 0.9] });
+  const bar = (style?: StyleProp<ViewStyle>) => (
+    <Animated.View
+      style={[{ height: 16, borderRadius: 8, backgroundColor: theme.colors.background.muted, opacity: barOpacity }, style]}
+    />
+  );
+
+  const renderSkeleton = () =>
+    isMobile ? (
+      <View style={{ gap: 12 }}>
+        {Array.from({ length: skeletonRows }).map((_, i) => (
+          <View
+            key={i}
+            style={{
+              borderWidth: 1,
+              borderColor: theme.colors.border.default,
+              borderRadius: theme.radii.lg,
+              padding: 16,
+              gap: 10,
+            }}
+          >
+            {columns.map((col) => (
+              <View key={col.key} style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 12 }}>
+                {bar({ width: 72 })}
+                {bar({ width: 96 })}
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+    ) : (
+      <View>
+        {Array.from({ length: skeletonRows }).map((_, i) => (
+          <View
+            key={i}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: CELL_GAP,
+              minHeight: 64,
+              paddingHorizontal: PADDING,
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border.subtle,
+            }}
+          >
+            {selectable ? <View style={{ width: SEL_WIDTH, flexShrink: 0 }}>{bar({ width: 20, height: 20, borderRadius: 6 })}</View> : null}
+            {columns.map((col) => (
+              <View key={col.key} style={cellStyle(col)}>
+                {bar({ width: '70%', maxWidth: 180 })}
+              </View>
+            ))}
+            {trailingWidth > 0 ? <View style={{ width: trailingWidth, flexShrink: 0 }} /> : null}
+          </View>
+        ))}
+      </View>
+    );
+
+  const renderSpinner = () => (
+    <View style={{ paddingVertical: 48, alignItems: 'center', gap: 12 }}>
+      <Spinner />
+      {loadingText ? (
+        <Text variant="bodyMedium" color="secondary">
+          {loadingText}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  // ---------- Body ----------
+  const bodyContent = loading ? (
+    loadingVariant === 'skeleton' ? (
+      renderSkeleton()
+    ) : (
+      renderSpinner()
+    )
+  ) : sortedData.length === 0 ? (
+    <View>{empty ?? null}</View>
+  ) : isMobile ? (
+    <View style={{ gap: 12 }}>{sortedData.map(renderMobileCard)}</View>
+  ) : (
+    <View>{sortedData.map(renderDesktopRow)}</View>
+  );
+
+  const body =
+    maxHeight != null ? (
+      <ScrollArea style={{ maxHeight }} indicatorColor={scrollbarColor ?? theme.colors.border.strong}>
+        {bodyContent}
+      </ScrollArea>
+    ) : (
+      bodyContent
+    );
+
+  if (isMobile) {
+    // Cards don't use the table header; labels live inside each card.
+    return <View style={[{ gap: 12 }, style]}>{body}</View>;
+  }
+
+  return (
+    <View
+      style={[
+        {
+          borderRadius: rounded ? theme.radii.lg : 0,
+          overflow: 'hidden',
+          backgroundColor: theme.colors.background.default,
+        },
+        style,
+      ]}
+    >
+      {header}
+      {body}
+    </View>
+  );
+}

package/src/components/Table/index.ts

@@ -0,0 +1,10 @@
+export { Table } from './Table';
+export type {
+  TableProps,
+  TableColumn,
+  TableSort,
+  ColumnAlign,
+  SortDirection,
+} from './Table';
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableTab, DataTablePagination } from './DataTable';

package/src/components/brand/BaconLogo.tsx

@@ -0,0 +1,25 @@
+import { SvgXml } from 'react-native-svg';
+
+const VIEWBOX_W = 90.029;
+const VIEWBOX_H = 75.2663;
+const ASPECT = VIEWBOX_W / VIEWBOX_H;
+
+const PATH =
+  'M79.6034 46.0332C84.1787 43.6264 87.0741 39.2894 87.0741 33.6655C87.0741 24.914 79.8477 19.0519 65.794 19.0519H51.2579H41.8987C40.594 19.0519 39.3728 18.7481 38.2826 18.2119C37.1626 17.6638 36.1975 16.8715 35.4409 15.9004C34.3923 14.5421 33.7609 12.8443 33.7609 11.0034V8.05447C33.7609 3.60426 30.1149 0 25.6289 0C21.143 0 17.497 3.60426 17.497 8.05447V11.0034C17.497 12.8443 16.8715 14.5421 15.817 15.9004C15.0604 16.8715 14.0953 17.6698 12.9753 18.2119C11.8851 18.7481 10.6638 19.0519 9.35915 19.0519H0V28.846H9.35915C13.857 28.846 17.4911 25.2357 17.4911 20.7915V16.4306C17.4911 11.9804 21.137 8.37617 25.623 8.37617C30.1089 8.37617 33.7549 11.9804 33.7549 16.4306V20.7915C33.7549 25.2357 37.3949 28.846 41.8868 28.846H64.1736C70.5183 28.846 73.9677 31.0145 73.9677 35.4289C73.9677 39.8434 70.5123 42.0953 64.1736 42.0953H51.9728H41.7617C40.5047 42.0775 39.3251 41.7796 38.2706 41.2553C37.1506 40.7132 36.1855 39.9149 35.4289 38.9438C34.3804 37.5855 33.7489 35.8877 33.7489 34.0468V31.0979C33.7489 26.6477 30.103 23.0494 25.6111 23.0494C21.1192 23.0494 17.4732 26.6536 17.4732 31.0979V34.0468C17.4732 35.8877 16.8477 37.5855 15.7932 38.9438C15.0366 39.9149 14.0715 40.7132 12.9515 41.2553C11.897 41.7796 10.7174 42.0775 9.46043 42.0953H0V51.5736H12.7251C12.7251 51.5736 12.737 51.5736 12.743 51.5736C15.3583 51.5736 17.4792 49.4528 17.4792 46.8375V44.24C17.4851 44.1089 17.4911 43.9779 17.4911 43.8468V39.486C17.4911 35.0357 21.137 31.4315 25.6289 31.4315C30.1209 31.4315 33.7668 35.0357 33.7668 39.486V43.8468C33.7668 43.9779 33.7728 44.1089 33.7787 44.24V46.8375C33.7787 49.4528 35.8996 51.5736 38.5149 51.5736C38.5149 51.5736 38.5268 51.5736 38.5328 51.5736H51.2579H66.4315C73.1753 51.5736 76.7915 53.8196 76.7915 58.5617C76.7915 63.3038 73.1753 65.4664 66.4315 65.4664H41.8928C40.5881 65.4664 39.3668 65.1626 38.2766 64.6264C37.1566 64.0783 36.1915 63.286 35.4349 62.3149C34.3864 60.9566 33.7549 59.2587 33.7549 57.4179V54.4689C33.7549 50.0187 30.1089 46.4145 25.623 46.4145C21.137 46.4145 17.4911 50.0187 17.4911 54.4689V57.4179C17.4911 59.2587 16.8655 60.9566 15.8111 62.3149C15.0545 63.286 14.0894 64.0843 12.9694 64.6264C11.8792 65.1626 10.6579 65.4664 9.35319 65.4664H0V75.2604H9.35915C13.857 75.2604 17.4911 71.6502 17.4911 67.206V62.8451C17.4911 58.3949 21.137 54.7906 25.623 54.7906C30.1089 54.7906 33.7549 58.3949 33.7549 62.8451V67.206C33.7549 71.6502 37.3949 75.2604 41.8868 75.2604H67.3906C82.1651 75.2604 89.8741 69.6366 89.8741 59.926C89.8741 52.8604 85.8587 48.0409 79.5975 46.0332H79.6034Z';
+
+export interface BaconLogoProps {
+  /** Rendered height in px; width follows the mark's aspect ratio. Defaults to 40. */
+  height?: number;
+  /** Mark color. Defaults to the Bacon red. */
+  color?: string;
+}
+
+/**
+ * The Bacon POS brand mark (the red "B"). Rendered at its natural aspect ratio
+ * and not tinted by default — the brand color is preserved. Used as the default
+ * logo in `Sidebar`.
+ */
+export function BaconLogo({ height = 40, color = '#FF003A' }: BaconLogoProps) {
+  const xml = `<svg viewBox="0 0 ${VIEWBOX_W} ${VIEWBOX_H}" xmlns="http://www.w3.org/2000/svg"><path d="${PATH}" fill="${color}"/></svg>`;
+  return <SvgXml xml={xml} width={height * ASPECT} height={height} />;
+}

package/src/components/brand/index.ts

@@ -1,3 +1,4 @@
 export { Logo, type LogoProps, type LogoName } from './Logo';
+export { BaconLogo, type BaconLogoProps } from './BaconLogo';
 export { Flag, type FlagProps, type FlagCountry } from './Flag';
 export { graphics, type GraphicName, type Graphic } from './registry';

package/src/components/index.ts

@@ -9,6 +9,7 @@ export * from './CodeField';
 export * from './CodeInput';
 export * from './Dialog';
 export * from './Dropdown';
+export * from './EmptyState';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
@@ -20,9 +21,11 @@ export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
 export * from './Select';
+export * from './Sidebar';
 export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
+export * from './Table';
 export * from './Text';
 export * from './Toast';
 export * from './UserChip';