@bacon-pos/ui 0.9.0 → 0.10.0

package/lib/typescript/module/components/Table/Table.d.ts

@@ -0,0 +1,85 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+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>;
+}
+/**
+ * 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 declare function Table<T>({ columns, data, keyExtractor, onRowPress, expandable, renderExpanded, expansionMode, expandedKeys, defaultExpandedKeys, onExpandedChange, renderActions, actionsWidth, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, sort, defaultSort, onSortChange, rounded, maxHeight, scrollbarColor, loading, loadingVariant, loadingText, skeletonRows, empty, mobileBreakpoint, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/lib/typescript/module/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/module/components/Table/index.d.ts

@@ -0,0 +1,5 @@
+export { Table } from './Table';
+export type { TableProps, TableColumn, TableSort, ColumnAlign, SortDirection, } from './Table';
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableTab, DataTablePagination } from './DataTable';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC"}

package/lib/typescript/module/components/brand/BaconLogo.d.ts

@@ -0,0 +1,13 @@
+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 declare function BaconLogo({ height, color }: BaconLogoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaconLogo.d.ts.map

package/lib/typescript/module/components/brand/BaconLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaconLogo.d.ts","sourceRoot":"","sources":["../../../../../src/components/brand/BaconLogo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,oFAAoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAW,EAAE,KAAiB,EAAE,EAAE,cAAc,2CAG3E"}

package/lib/typescript/module/components/brand/index.d.ts

@@ -1,4 +1,5 @@
 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';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/brand/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/brand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/brand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/lib/typescript/module/components/index.d.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';

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacon-pos/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,91 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Button, type ButtonVariant } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export interface EmptyStateAction {
+  label: string;
+  onPress: () => void;
+  icon?: IconName;
+  variant?: ButtonVariant;
+}
+
+export interface EmptyStateProps {
+  /** Icon shown in the badge above the title. */
+  icon?: IconName;
+  /** Title line. */
+  title: string;
+  /** Supporting description below the title. */
+  description?: string;
+  /** Optional call-to-action button. */
+  action?: EmptyStateAction;
+  /** Vertical padding around the block. Defaults to 32. */
+  paddingVertical?: number;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Empty state — a centered icon, title, description and optional action button.
+ * Used by `Table`/`DataTable` when there's no data, and reusable anywhere a
+ * "nothing here yet" message is needed.
+ */
+export function EmptyState({
+  icon = 'no-photo',
+  title,
+  description,
+  action,
+  paddingVertical = 32,
+  style,
+}: EmptyStateProps) {
+  const theme = useTheme();
+  const variant = action?.variant ?? 'inverse';
+  const actionIconColor =
+    variant === 'default'
+      ? theme.colors.action.primaryForeground
+      : variant === 'secondary'
+        ? theme.colors.action.secondaryForeground
+        : theme.colors.action.inverseForeground;
+
+  return (
+    <View style={[{ alignItems: 'center', gap: 12, paddingVertical, paddingHorizontal: 24 }, style]}>
+      <View
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 24,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.background.subtle,
+        }}
+      >
+        <Icon name={icon} size={24} color="tertiary" />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 4 }}>
+        <Text variant="bodyLarge" weight="medium" color="primary" align="center">
+          {title}
+        </Text>
+        {description ? (
+          <Text variant="bodyMedium" color="tertiary" align="center" style={{ maxWidth: 420 }}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {action ? (
+        <View style={{ marginTop: 4 }}>
+          <Button
+            label={action.label}
+            variant={action.variant ?? 'inverse'}
+            size="sm"
+            onPress={action.onPress}
+            leftIcon={action.icon ? <Icon name={action.icon} size={20} color={actionIconColor} /> : undefined}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction } from './EmptyState';

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { BaconLogo } from '../brand/BaconLogo';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { IconButton } from '../IconButton/IconButton';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export interface SidebarItem {
+  /** Stable key; also the active identifier. */
+  key: string;
+  /** Button text (hidden when collapsed). */
+  label: string;
+  /** Leading icon. When omitted, expanded reserves the icon space and collapsed shows the label's initial. */
+  icon?: IconName;
+  /** Optional icon shown when the item is active (e.g. a filled variant). */
+  activeIcon?: IconName;
+  /** Press handler. */
+  onPress?: () => void;
+  /** Dim and block the item. */
+  disabled?: boolean;
+}
+
+export interface SidebarProps {
+  /** Navigation items — rendered top-to-bottom. Defaults to none. */
+  items?: SidebarItem[];
+  /** Active item key (controlled). */
+  activeKey?: string;
+  /** Active item key for the uncontrolled case. */
+  defaultActiveKey?: string;
+  /** Called with the pressed item's key. */
+  onChange?: (key: string) => void;
+
+  /** Collapsed (icons only) state — controlled. */
+  collapsed?: boolean;
+  /** Initial collapsed state (uncontrolled). Defaults to false. */
+  defaultCollapsed?: boolean;
+  /** Called when the collapse state changes. */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Show the built-in expand/collapse toggle. Defaults to true. */
+  showToggle?: boolean;
+
+  /** Logo shown at the top. Defaults to the Bacon mark. */
+  logo?: ReactNode;
+  /** Bottom supporting text (e.g. a version). Defaults to none. */
+  footer?: string;
+
+  /** Expanded width. Defaults to 284 (Figma). */
+  expandedWidth?: number;
+  /** Collapsed width. Defaults to 122 (Figma). */
+  collapsedWidth?: number;
+  /** Scroll indicator color. Defaults to a subtle neutral. */
+  scrollbarColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const ITEM_HEIGHT = 74;
+const ITEM_GAP = 16;
+const PADDING = 24;
+const TOGGLE_SIZE = 40; // IconButton size "sm"
+
+function SidebarButton({
+  item,
+  active,
+  collapsed,
+  onPress,
+}: {
+  item: SidebarItem;
+  active: boolean;
+  collapsed: boolean;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const [hovered, setHovered] = useState(false);
+  const disabled = item.disabled;
+
+  const backgroundColor = active
+    ? theme.colors.action.secondary
+    : hovered && !disabled
+      ? theme.colors.background.muted
+      : 'transparent';
+  const contentColor = active
+    ? theme.colors.action.secondaryForeground
+    : theme.colors.text.secondary;
+  const iconColor = active ? theme.colors.action.secondaryForeground : 'secondary';
+  const iconName = active && item.activeIcon ? item.activeIcon : item.icon;
+  const initial = item.label.trim().charAt(0).toUpperCase();
+
+  // Leading slot is always a fixed 24×24 box (flexShrink: 0) so the icon never
+  // shrinks next to a long label and labels stay aligned with or without an icon.
+  // No icon → reserve the space when expanded; show the initial when collapsed.
+  const leadingBox: ViewStyle = {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+  const leading = (
+    <View style={leadingBox}>
+      {iconName ? (
+        <Icon name={iconName} size={24} color={iconColor} />
+      ) : collapsed ? (
+        <Text variant="bodyLarge" weight="medium" color={contentColor}>
+          {initial}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      disabled={disabled}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active, disabled }}
+      accessibilityLabel={item.label}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        gap: 10,
+        height: ITEM_HEIGHT,
+        paddingHorizontal: PADDING,
+        borderRadius: theme.radii.pill,
+        borderWidth: active ? 1 : 0,
+        borderColor: active ? theme.colors.border.default : 'transparent',
+        backgroundColor,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {leading}
+      {!collapsed ? (
+        <Text
+          variant="bodyLarge"
+          weight="medium"
+          color={contentColor}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={{ flexShrink: 1, minWidth: 0 }}
+        >
+          {item.label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/**
+ * Sidebar — the app's main navigation drawer (Figma "Sidebar"). Expands/collapses
+ * between a labelled and an icon-only rail (animated width). The logo defaults to
+ * the Bacon mark (override via `logo`); an optional `footer` shows supporting text
+ * at the bottom. Items are dynamic buttons (icon + label via props); the list
+ * scrolls with an elegant auto-hiding indicator when it overflows, leaving the
+ * footer pinned. Buttons have hover and active states to mark the current section.
+ */
+export function Sidebar({
+  items = [],
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  showToggle = true,
+  logo,
+  footer,
+  expandedWidth = 284,
+  collapsedWidth = 122,
+  scrollbarColor,
+  style,
+}: SidebarProps) {
+  const theme = useTheme();
+
+  const activeControlled = activeKey !== undefined;
+  const [activeInternal, setActiveInternal] = useState(defaultActiveKey);
+  const active = activeControlled ? activeKey : activeInternal;
+
+  const collapseControlled = collapsedProp !== undefined;
+  const [collapsedInternal, setCollapsedInternal] = useState(defaultCollapsed);
+  const collapsed = collapseControlled ? collapsedProp : collapsedInternal;
+
+  const width = useRef(new Animated.Value(collapsed ? collapsedWidth : expandedWidth)).current;
+  // `visualCollapsed` drives the layout (labels, alignment, footer). It lags on
+  // collapse — labels stay mounted (clipped by overflow) until the width finishes
+  // shrinking — and leads on expand, so both directions animate without a jump.
+  const [visualCollapsed, setVisualCollapsed] = useState(collapsed);
+  useEffect(() => {
+    if (!collapsed) setVisualCollapsed(false);
+    const anim = Animated.timing(width, {
+      toValue: collapsed ? collapsedWidth : expandedWidth,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false, // width
+    });
+    anim.start(({ finished }) => {
+      if (finished && collapsed) setVisualCollapsed(true);
+    });
+    return () => anim.stop();
+  }, [collapsed, collapsedWidth, expandedWidth, width]);
+
+  // The toggle arrow spins in place (0° → 180°) instead of moving, so collapsing
+  // never nudges it. Driven by intent (`collapsed`), in sync with the width.
+  const arrowRot = useRef(new Animated.Value(collapsed ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(arrowRot, {
+      toValue: collapsed ? 1 : 0,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [collapsed, arrowRot]);
+  const arrowRotate = arrowRot.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] });
+
+  // Glide the toggle from flush-left (expanded) to centered on the icon axis
+  // (collapsed), tracking the width so it never jumps.
+  const toggleTranslateX = width.interpolate({
+    inputRange: [collapsedWidth, expandedWidth],
+    outputRange: [Math.max(0, (collapsedWidth - 2 * PADDING - TOGGLE_SIZE) / 2), 0],
+    extrapolate: 'clamp',
+  });
+
+  const selectItem = (item: SidebarItem) => {
+    if (!activeControlled) setActiveInternal(item.key);
+    item.onPress?.();
+    onChange?.(item.key);
+  };
+
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    if (!collapseControlled) setCollapsedInternal(next);
+    onCollapsedChange?.(next);
+  };
+
+  const logoNode = logo ?? <BaconLogo height={visualCollapsed ? 36 : 40} />;
+  const toggle = showToggle ? (
+    <Animated.View style={{ transform: [{ translateX: toggleTranslateX }] }}>
+      <Animated.View style={{ transform: [{ rotate: arrowRotate }] }}>
+        <IconButton
+          icon="arrow-left"
+          accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          variant="ghost"
+          size="sm"
+          onPress={toggleCollapsed}
+        />
+      </Animated.View>
+    </Animated.View>
+  ) : null;
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height: '100%',
+          backgroundColor: theme.colors.background.default,
+          paddingTop: 48,
+          paddingBottom: PADDING,
+          paddingHorizontal: PADDING,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {/* Logo */}
+      <View
+        style={{
+          minHeight: 56,
+          alignItems: visualCollapsed ? 'center' : 'flex-start',
+          justifyContent: 'center',
+        }}
+      >
+        {logoNode}
+      </View>
+
+      {/* Tabs (scrolls when overflowing; footer stays pinned below) */}
+      <ScrollArea
+        style={{ flex: 1, marginTop: 32 }}
+        indicatorColor={scrollbarColor ?? theme.colors.border.strong}
+        contentContainerStyle={{ gap: ITEM_GAP, paddingBottom: 8 }}
+      >
+        {items.map((item) => (
+          <SidebarButton
+            key={item.key}
+            item={item}
+            active={item.key === active}
+            collapsed={visualCollapsed}
+            onPress={() => selectItem(item)}
+          />
+        ))}
+      </ScrollArea>
+
+      {/* Bottom: supporting footer + fixed collapse/expand toggle */}
+      <View style={{ marginTop: 28, gap: 16 }}>
+        {footer && !visualCollapsed ? (
+          <Text variant="bodySmall" color="tertiary" numberOfLines={1} style={{ marginLeft: 8 }}>
+            {footer}
+          </Text>
+        ) : null}
+        {toggle ? (
+          <View style={{ alignItems: 'flex-start' }}>{toggle}</View>
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}

package/src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem } from './Sidebar';