@bacon-pos/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,30 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ButtonVariant } from '../Button/Button';
+import type { IconName } from '../Icon/icons.generated';
+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 declare function EmptyState({ icon, title, description, action, paddingVertical, style, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAiB,EACjB,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAoB,EACpB,KAAK,GACN,EAAE,eAAe,2CAiDjB"}

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

@@ -0,0 +1,3 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction } from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+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>;
+}
+/**
+ * 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 declare function Sidebar({ items, activeKey, defaultActiveKey, onChange, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, showToggle, logo, footer, expandedWidth, collapsedWidth, scrollbarColor, style, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,mEAAmE;IACnE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgGD;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAU,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,gBAAwB,EACxB,iBAAiB,EACjB,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,aAAmB,EACnB,cAAoB,EACpB,cAAc,EACd,KAAK,GACN,EAAE,YAAY,2CAwId"}

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

@@ -0,0 +1,3 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem } from './Sidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+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 declare function StatTile({ label, value, icon, width, onPress, backgroundColor, labelColor, valueColor, style, accessibilityLabel, }: StatTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatTile.d.ts","sourceRoot":"","sources":["../../../../../src/components/StatTile/StatTile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,eAAe,EACf,UAAU,EACV,UAAU,EACV,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,2CAoDf"}

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

@@ -0,0 +1,3 @@
+export { StatTile } from './StatTile';
+export type { StatTileProps } from './StatTile';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StatTile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,53 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type EmptyStateProps } from '../EmptyState/EmptyState';
+import type { IconName } from '../Icon/icons.generated';
+import { type TableProps } from './Table';
+export interface DataTableTab {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+export interface DataTablePagination {
+    /** 1-based current page. */
+    page: number;
+    pageSize: number;
+    /** Total row count (across pages). */
+    total: number;
+    onPageChange: (page: number) => void;
+    /** Customize the range label. Defaults to `${from}–${to} of ${total}`. */
+    formatRange?: (from: number, to: number, total: number) => string;
+}
+export interface DataTableProps<T> extends Omit<TableProps<T>, 'empty'> {
+    /** Tabs above the toolbar (reuses `ChipGroup`). */
+    tabs?: DataTableTab[];
+    /** Active tab (controlled). */
+    activeTab?: string;
+    defaultTab?: string;
+    onTabChange?: (value: string) => void;
+    /** Show the search field. */
+    searchable?: boolean;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    /** Show a create button on the right of the toolbar. */
+    createLabel?: string;
+    onCreate?: () => void;
+    createIcon?: IconName;
+    /** Structured empty state (alternative to Table's `empty` node). */
+    emptyState?: EmptyStateProps;
+    /** Raw empty node (wins over `emptyState`). */
+    empty?: React.ReactNode;
+    /** Pagination controls below the table. */
+    pagination?: DataTablePagination;
+    /** Gap between toolbar sections. Defaults to 16. */
+    gap?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * DataTable — the turnkey management table (Figma): optional tabs (`ChipGroup`),
+ * a search + create toolbar, the `Table` body, a structured `EmptyState`, and
+ * optional pagination — assembled with consistent spacing. For bespoke layouts,
+ * compose `Table` + `EmptyState` yourself.
+ */
+export declare function DataTable<T>({ tabs, activeTab, defaultTab, onTabChange, searchable, searchValue, onSearchChange, searchPlaceholder, createLabel, onCreate, createIcon, emptyState, empty, pagination, gap, containerStyle, ...tableProps }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnE;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IACrE,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IAEtB,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAkB,EAClB,WAAW,EACX,cAAc,EACd,iBAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,UAAmB,EACnB,UAAU,EACV,KAAK,EACL,UAAU,EACV,GAAQ,EACR,cAAc,EACd,GAAG,UAAU,EACd,EAAE,cAAc,CAAC,CAAC,CAAC,2CAwDnB"}

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

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './Avatar';
 export * from './Badge';
 export * from './brand';
@@ -9,6 +10,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 +22,12 @@ export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
 export * from './Select';
+export * from './Sidebar';
 export * from './Spinner';
+export * from './StatTile';
 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,SAAS,CAAC;AACxB,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,YAAY,CAAC;AAC3B,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.11.0",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,132 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { palette } from '../../theme/palette';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export type AlertStatus = 'info' | 'warning' | 'success' | 'destructive';
+
+export interface AlertProps {
+  /** Color/status. Defaults to `info`. */
+  status?: AlertStatus;
+  /** Optional bold title line above the message. */
+  title?: string;
+  /** Message text. Alternatively pass `children`. */
+  message?: string;
+  /** Message content (overrides `message`). */
+  children?: ReactNode;
+  /** Leading icon. Defaults to `info` (as in the design). */
+  icon?: IconName;
+  /** Hide the leading icon. */
+  showIcon?: boolean;
+  /** Vertical alignment of the icon vs the text. Defaults to `center`. */
+  iconAlign?: 'top' | 'center';
+  /** Trailing content (e.g. a link/button). */
+  action?: ReactNode;
+  /** Show a close (×) button and call this on press. */
+  onClose?: () => void;
+  /** Background override (for a custom status). */
+  backgroundColor?: string;
+  /** Foreground (text/icon) override. */
+  color?: string;
+  /** Fixed width. Omit to fill the parent. */
+  width?: number;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+function statusColors(theme: Theme, status: AlertStatus): { bg: string; fg: string } {
+  switch (status) {
+    case 'warning':
+      return { bg: theme.colors.feedback.warningSubtle, fg: palette.warning[600] };
+    case 'success':
+      return { bg: theme.colors.feedback.successSubtle, fg: theme.colors.feedback.success };
+    case 'destructive':
+      return { bg: theme.colors.feedback.errorSubtle, fg: theme.colors.feedback.error };
+    case 'info':
+    default:
+      return { bg: theme.colors.background.subtle, fg: palette.neutral[500] };
+  }
+}
+
+/**
+ * Alert — an inline banner in four statuses (info / warning / success /
+ * destructive), each a subtle tinted surface with a matching icon and text
+ * (Figma "Alert"). Fills its parent by default (text wraps to any width) or takes
+ * a fixed `width`. Supports an optional title, a trailing action and a close
+ * button; colors are overridable for custom statuses.
+ */
+export function Alert({
+  status = 'info',
+  title,
+  message,
+  children,
+  icon = 'info',
+  showIcon = true,
+  iconAlign = 'center',
+  action,
+  onClose,
+  backgroundColor,
+  color,
+  width,
+  style,
+}: AlertProps) {
+  const theme = useTheme();
+  const { bg, fg } = statusColors(theme, status);
+  const foreground = color ?? fg;
+  const background = backgroundColor ?? bg;
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 16,
+          paddingVertical: 20,
+          paddingHorizontal: 16,
+          borderRadius: theme.radii.lg,
+          backgroundColor: background,
+          ...(width != null ? { width } : { alignSelf: 'stretch' }),
+        },
+        style,
+      ]}
+    >
+      {showIcon ? (
+        <View style={{ width: 24, height: 24, flexShrink: 0, alignSelf: iconAlign === 'center' ? 'center' : 'flex-start' }}>
+          <Icon name={icon} size={24} color={foreground} />
+        </View>
+      ) : null}
+
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        {title ? (
+          <Text variant="bodyLarge" weight="semibold" color={foreground}>
+            {title}
+          </Text>
+        ) : null}
+        {children ?? (message ? (
+          <Text variant="bodyLarge" color={foreground}>
+            {message}
+          </Text>
+        ) : null)}
+      </View>
+
+      {action ? <View style={{ flexShrink: 0 }}>{action}</View> : null}
+
+      {onClose ? (
+        <Pressable
+          onPress={onClose}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          style={{ width: 24, height: 24, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <Icon name="close" size={20} color={foreground} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertStatus } from './Alert';

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';