@bacon-pos/ui 0.8.0 → 0.10.0

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/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

@@ -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';
@@ -16,12 +17,15 @@ export * from './Keypad';
 export * from './LinkButton';
 export * from './Menu';
 export * from './ProductCard';
+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,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.8.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/Icon/icons.generated.ts

@@ -45,6 +45,7 @@ export const icons = {
   "coffee": "<svg viewBox=\"0 0 21.5 20.5001\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(1 0 0 -1 0 20.5001)\"> <g id=\"elements\"> <path id=\"Vector 5682\" d=\"M17.0006 11.75H18.3904C20.2418 11.75 20.7922 11.4845 20.7476 10.1662C20.6738 7.98262 19.6891 5.44535 15.7501 4.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector\" d=\"M4.69635 1.63553C1.32194 4.22996 0.824766 7.90995 0.751515 11.7499C0.719871 13.4087 1.20135 13.75 3.40927 13.75L14.0909 13.75C16.2988 13.75 16.7803 13.4087 16.7487 11.7499C16.6754 7.90995 16.1782 4.22996 12.8038 1.63553C11.8435 0.8972 11.0332 0.75 9.66944 0.75L7.83073 0.75C6.46694 0.75 5.65666 0.897199 4.69635 1.63553Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector_2\" d=\"M10.059 19.75C9.51224 19.4114 8.75133 18.25 8.75133 16.75M6.28979 18.25C6.28979 18.25 5.75008 17.75 5.75008 16.75M12.7513 18.25C12.4779 18.0807 12.2501 17.25 12.2501 16.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </g> </g></svg>",
   "coins": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M2.42871 10.3867C2.6547 10.081 3.08006 9.99032 3.41406 10.1885C3.76995 10.3999 3.88702 10.8597 3.67578 11.2158L3.46777 11.5947C3.00895 12.4973 2.75001 13.5189 2.75 14.6025C2.75005 18.2738 5.7262 21.25 9.39746 21.25C10.6357 21.25 11.793 20.9123 12.7842 20.3242L12.8525 20.2881C13.1972 20.1284 13.6133 20.2524 13.8115 20.5859C14.0229 20.9421 13.906 21.4029 13.5498 21.6143L13.3193 21.7451C12.1553 22.3855 10.8179 22.75 9.39746 22.75C4.89777 22.75 1.25005 19.1022 1.25 14.6025C1.25002 13.0876 1.66394 11.6667 2.38574 10.4502L2.42871 10.3867ZM14 1.25C18.8325 1.25 22.75 5.16751 22.75 10C22.75 14.8325 18.8325 18.75 14 18.75C9.16751 18.75 5.25 14.8325 5.25 10C5.25 5.16751 9.16751 1.25 14 1.25ZM14 2.75C9.99594 2.75 6.75 5.99594 6.75 10C6.75 14.0041 9.99594 17.25 14 17.25C18.0041 17.25 21.25 14.0041 21.25 10C21.25 5.99594 18.0041 2.75 14 2.75Z\" fill=\"currentColor\"/> </g> </svg>",
   "computer-add": "<svg viewBox=\"0 0 21.5 21.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"elements\"> <path id=\"Vector 6709\" d=\"M10.2546 0.75H8.75385C5.47304 0.75 3.83264 0.75 2.66983 1.56382C2.23962 1.8649 1.86544 2.23891 1.56421 2.66891C0.75 3.83116 0.75 5.47077 0.75 8.75C0.75 12.0292 0.75 13.6688 1.56421 14.8311C1.86544 15.2611 2.23962 15.6351 2.66983 15.9362C3.83264 16.75 5.47304 16.75 8.75385 16.75H12.7558C16.0366 16.75 17.677 16.75 18.8398 15.9362C19.27 15.6351 19.6442 15.2611 19.9454 14.8311C20.5741 13.9337 20.7174 12.7517 20.75 10.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector\" d=\"M12.75 4.75H16.75M16.75 4.75L20.75 4.75M16.75 4.75L16.75 0.75M16.75 4.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector 3361\" d=\"M9.75 13.75H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path id=\"Vector 6773\" d=\"M10.75 16.75V20.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path id=\"Vector 3994\" d=\"M6.75 20.75H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
+  "computer-check": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g transform=\"translate(1.25 1.25)\"> <path d=\"M20.749 9.7502C20.7406 12.3757 20.6627 13.7937 19.9362 14.8313C19.6351 15.2613 19.2611 15.6353 18.8311 15.9364C17.6688 16.7502 16.0292 16.7502 12.75 16.7502H8.75C5.47077 16.7502 3.83116 16.7502 2.66891 15.9364C2.23891 15.6353 1.8649 15.2613 1.56382 14.8313C0.75 13.669 0.75 12.0294 0.75 8.7502C0.75 5.47097 0.75 3.83136 1.56382 2.66911C1.8649 2.23911 2.23891 1.86511 2.66891 1.56402C3.83116 0.750204 5.47077 0.750204 8.75 0.750204H10.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M12.75 4.7502C12.75 4.7502 13.75 4.7502 14.75 6.7502C14.75 6.7502 17.9265 1.7502 20.75 0.750204\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M9.75 13.7502H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M10.75 16.7502V20.7502\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path d=\"M6.75 20.7502H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
   "computer-settings": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g transform=\"translate(1.25 1.25)\"> <path d=\"M9.75294 0.750009H8.7562C5.47443 0.750009 3.83355 0.750009 2.67039 1.56383C2.24006 1.86491 1.86577 2.23892 1.56445 2.66892C0.75 3.83116 0.75 5.47078 0.75 8.75001C0.75 12.0292 0.75 13.6689 1.56445 14.8311C1.86577 15.2611 2.24006 15.6351 2.67039 15.9362C3.83355 16.75 5.47443 16.75 8.7562 16.75H12.7593C16.0411 16.75 17.682 16.75 18.8451 15.9362C19.2754 15.6351 19.6497 15.2611 19.9511 14.8311C20.5656 13.9542 20.7163 12.8441 20.75 11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M16.75 8.46428V9.75M16.75 8.46428C15.5932 8.46428 14.5741 7.89608 13.9763 7.03331M19.5238 3.46688C19.8773 3.97711 20.0833 4.59035 20.0833 5.25C20.0833 5.90973 19.8772 6.52304 19.5237 7.03331C18.9259 7.89608 17.9068 8.46428 16.75 8.46428M16.75 2.03571C17.9069 2.03571 18.9261 2.604 19.5238 3.46688M16.75 2.03571C15.5931 2.03571 14.5739 2.604 13.9762 3.46688M16.75 2.03571V0.75M20.75 2.67857L19.5238 3.46688M12.7504 7.82143L13.9763 7.03331M12.75 2.67857L13.9762 3.46688M20.7496 7.82143L19.5237 7.03331M13.9762 3.46688C13.6227 3.97711 13.4167 4.59035 13.4167 5.25C13.4167 5.90973 13.6228 6.52304 13.9763 7.03331\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M9.75 13.75H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M10.75 16.75V20.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path d=\"M6.75 20.75H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
   "copy-01": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M9.5 1.25C11.1254 1.25 12.4104 1.24923 13.4248 1.36914C14.4557 1.49101 15.3047 1.74633 16.0137 2.32813C16.2541 2.52544 16.4746 2.74592 16.6719 2.98633C17.2232 3.65811 17.482 4.45566 17.6113 5.41504C17.7163 6.19414 17.7408 7.13229 17.7471 8.26172C18.3694 8.27466 18.9159 8.30227 19.3916 8.36621C20.2917 8.48723 21.0495 8.74672 21.6514 9.34863C22.2533 9.95055 22.5128 10.7083 22.6338 11.6084C22.7519 12.4869 22.75 13.6071 22.75 15V16C22.75 17.3929 22.7519 18.5131 22.6338 19.3916C22.5128 20.2917 22.2533 21.0495 21.6514 21.6514C21.0495 22.2533 20.2917 22.5128 19.3916 22.6338C18.5131 22.7519 17.3929 22.75 16 22.75H15C13.6071 22.75 12.4869 22.7519 11.6084 22.6338C10.7083 22.5128 9.95055 22.2533 9.34863 21.6514C8.74672 21.0495 8.48723 20.2917 8.36621 19.3916C8.30227 18.9159 8.27466 18.3694 8.26172 17.7471C7.13229 17.7408 6.19414 17.7163 5.41504 17.6113C4.45565 17.482 3.65811 17.2232 2.98633 16.6719C2.74592 16.4746 2.52544 16.2541 2.32813 16.0137C1.74633 15.3047 1.49101 14.4557 1.36914 13.4248C1.24923 12.4104 1.25 11.1254 1.25 9.5C1.25 7.87463 1.24923 6.58961 1.36914 5.5752C1.49101 4.54427 1.74633 3.69525 2.32813 2.98633C2.52544 2.74592 2.74592 2.52544 2.98633 2.32813C3.69525 1.74633 4.54427 1.49101 5.5752 1.36914C6.58961 1.24923 7.87463 1.25 9.5 1.25ZM15 9.75C13.5648 9.75 12.5639 9.75202 11.8086 9.85352C11.0748 9.95217 10.6859 10.1324 10.4092 10.4092C10.1324 10.6859 9.95217 11.0748 9.85352 11.8086C9.75202 12.5639 9.75 13.5648 9.75 15V16C9.75 17.4352 9.75202 18.4361 9.85352 19.1914C9.95217 19.9252 10.1324 20.3141 10.4092 20.5908C10.6859 20.8676 11.0748 21.0478 11.8086 21.1465C12.5639 21.248 13.5648 21.25 15 21.25H16C17.4352 21.25 18.4361 21.248 19.1914 21.1465C19.9252 21.0478 20.3141 20.8676 20.5908 20.5908C20.8676 20.3141 21.0478 19.9252 21.1465 19.1914C21.248 18.4361 21.25 17.4352 21.25 16V15C21.25 13.5648 21.248 12.5639 21.1465 11.8086C21.0478 11.0748 20.8676 10.6859 20.5908 10.4092C20.3141 10.1324 19.9252 9.95217 19.1914 9.85352C18.4361 9.75202 17.4352 9.75 16 9.75H15ZM9.5 2.75C7.83789 2.75 6.65689 2.75132 5.75098 2.8584C4.8621 2.9635 4.33579 3.16138 3.93848 3.4873C3.77392 3.62236 3.62236 3.77392 3.4873 3.93848C3.16138 4.33579 2.9635 4.8621 2.8584 5.75098C2.75132 6.65689 2.75 7.83789 2.75 9.5C2.75 11.1621 2.75132 12.3431 2.8584 13.249C2.9635 14.1379 3.16138 14.6642 3.4873 15.0615C3.62236 15.2261 3.77392 15.3776 3.93848 15.5127C4.31534 15.8218 4.80869 16.0162 5.61621 16.125C6.29513 16.2164 7.14017 16.2395 8.25 16.2461V15C8.25 13.6071 8.24812 12.4869 8.36621 11.6084C8.48723 10.7083 8.74672 9.95055 9.34863 9.34863C9.95055 8.74672 10.7083 8.48723 11.6084 8.36621C12.4869 8.24812 13.6071 8.25 15 8.25H16.2461C16.2395 7.14017 16.2164 6.29513 16.125 5.61621C16.0162 4.80869 15.8219 4.31534 15.5127 3.93848C15.3776 3.77392 15.2261 3.62236 15.0615 3.4873C14.6642 3.16138 14.1379 2.9635 13.249 2.8584C12.3431 2.75132 11.1621 2.75 9.5 2.75Z\" fill=\"currentColor\"/> </g> </svg>",
   "credit-card": "<svg viewBox=\"0 0 21.5 17.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M12.25 2.51451e-07C14.1117 2.51451e-07 15.5713 -0.000815228 16.7197 0.128907C17.8817 0.2602 18.8241 0.533739 19.6074 1.15234L19.7803 1.29492C19.9495 1.44088 20.1087 1.59749 20.2568 1.76367L20.3779 1.90625C20.9598 2.62542 21.2295 3.48682 21.3623 4.52832C21.5013 5.61866 21.5 7.00132 21.5 8.75C21.5 10.4987 21.5013 11.8813 21.3623 12.9717C21.2295 14.0132 20.9598 14.8746 20.3779 15.5938L20.2568 15.7363C20.1087 15.9025 19.9495 16.0591 19.7803 16.2051L19.6074 16.3477C18.8241 16.9663 17.8817 17.2398 16.7197 17.3711C15.5713 17.5008 14.1117 17.5 12.25 17.5H9.25C7.38832 17.5 5.92866 17.5008 4.78027 17.3711C3.69083 17.248 2.79424 17.0003 2.04102 16.46L1.89258 16.3477C1.71667 16.2087 1.55009 16.0592 1.39453 15.8994L1.24316 15.7363C0.57699 14.9891 0.279393 14.0828 0.137696 12.9717C-0.00129631 11.8813 8.71061e-07 10.4987 8.71061e-07 8.75C8.71045e-07 7.00132 -0.0012963 5.61866 0.137696 4.52832C0.279393 3.41717 0.57699 2.51089 1.24316 1.76367L1.39453 1.60059C1.55009 1.4408 1.71667 1.29127 1.89258 1.15234L2.04102 1.04004C2.79424 0.49971 3.69083 0.252001 4.78027 0.128907C5.92866 -0.000815229 7.38832 2.51451e-07 9.25 2.51451e-07H12.25ZM1.51563 6.5C1.50128 7.14611 1.5 7.88783 1.5 8.75C1.5 10.5385 1.50184 11.8087 1.62598 12.7822C1.74748 13.735 1.97568 14.3046 2.36231 14.7383L2.58203 14.9629C2.65878 15.0351 2.73876 15.105 2.82227 15.1709L3.00684 15.3027C3.45622 15.5961 4.04721 15.779 4.94922 15.8809C5.99376 15.9988 7.35327 16 9.25 16H12.25C14.1467 16 15.5062 15.9988 16.5508 15.8809C17.5815 15.7644 18.2065 15.543 18.6777 15.1709L18.918 14.9629C18.9946 14.8908 19.0682 14.8162 19.1377 14.7383L19.2754 14.5684C19.5798 14.1559 19.7677 13.6158 19.874 12.7822C19.9982 11.8087 20 10.5385 20 8.75C20 7.88783 19.9987 7.14611 19.9844 6.5H1.51563ZM10.25 12C10.6642 12 11 12.3358 11 12.75C11 13.1642 10.6642 13.5 10.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H10.25ZM16.75 12C17.1642 12 17.5 12.3358 17.5 12.75C17.5 13.1642 17.1642 13.5 16.75 13.5H13.25C12.8358 13.5 12.5 13.1642 12.5 12.75C12.5 12.3358 12.8358 12 13.25 12H16.75ZM9.25 1.5C7.35327 1.5 5.99376 1.50117 4.94922 1.61914C4.04721 1.72103 3.45622 1.90385 3.00684 2.19727L2.82227 2.3291C2.73876 2.39505 2.65878 2.46486 2.58203 2.53711L2.36231 2.76172C1.97568 3.19538 1.74748 3.76497 1.62598 4.71777C1.61433 4.80913 1.6053 4.90324 1.5957 5H19.9043C19.8947 4.90324 19.8857 4.80913 19.874 4.71777C19.7677 3.88425 19.5798 3.34408 19.2754 2.93164L19.1377 2.76172C19.0682 2.6838 18.9946 2.60921 18.918 2.53711L18.6777 2.3291C18.2065 1.95697 17.5815 1.73557 16.5508 1.61914C15.5062 1.50117 14.1467 1.5 12.25 1.5H9.25Z\" fill=\"currentColor\"/> </g> </svg>",

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Text } from '../Text/Text';
+
+export interface ProgressBarProps {
+  /** Progress from 0 to 1. Drive it from whatever is loading (e.g. a download). */
+  progress: number;
+  /** Left-side label. Defaults to "Downloading...". */
+  label?: string;
+  /** Show the label + percentage row under the bar. Defaults to true. */
+  showSupporting?: boolean;
+  /** Show the percentage on the right. Defaults to true. */
+  showValue?: boolean;
+  /** Format the right-side value. Defaults to `47%`. */
+  formatValue?: (progress: number) => string;
+  /** Bar height. Defaults to 32 (Figma). */
+  height?: number;
+  /** Fixed width. Omit to fill the parent. */
+  width?: number;
+  /** Fill color. Defaults to `action.primary` (lime). */
+  color?: string;
+  /** Track background. Defaults to `background.subtle`. */
+  trackColor?: string;
+  /** Track border color. Defaults to `border.default`. */
+  borderColor?: string;
+  /** Animate width changes. Defaults to true. */
+  animated?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label. Defaults to `label`. */
+  accessibilityLabel?: string;
+}
+
+const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);
+
+/**
+ * Determinate progress bar — the Figma "Loader". Drive it with a `progress`
+ * (0–1) prop from whatever is loading; the fill animates to match. A supporting
+ * row underneath shows a customizable `label` (default "Downloading...") on the
+ * left and the percentage on the right. Colors, height and width are tokens/props.
+ */
+export function ProgressBar({
+  progress,
+  label = 'Downloading...',
+  showSupporting = true,
+  showValue = true,
+  formatValue,
+  height = 32,
+  width,
+  color,
+  trackColor,
+  borderColor,
+  animated = true,
+  style,
+  accessibilityLabel,
+}: ProgressBarProps) {
+  const theme = useTheme();
+  const value = clamp01(progress);
+  const percent = Math.round(value * 100);
+
+  const anim = useRef(new Animated.Value(value)).current;
+  useEffect(() => {
+    if (animated) {
+      Animated.timing(anim, {
+        toValue: value,
+        duration: 240,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false, // width can't use the native driver
+      }).start();
+    } else {
+      anim.setValue(value);
+    }
+  }, [value, animated, anim]);
+
+  const fillWidth = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp',
+  });
+
+  const inset = 2.5;
+
+  return (
+    <View
+      style={[{ gap: 12, width: width ?? undefined, alignSelf: width != null ? 'flex-start' : 'stretch' }, style]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{ min: 0, max: 100, now: percent }}
+    >
+      <View
+        style={{
+          height,
+          borderRadius: height / 2,
+          borderWidth: 1.5,
+          borderColor: borderColor ?? theme.colors.border.default,
+          backgroundColor: trackColor ?? theme.colors.background.subtle,
+          padding: inset,
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        <Animated.View
+          style={{
+            width: fillWidth,
+            height: '100%',
+            borderRadius: height / 2,
+            backgroundColor: color ?? theme.colors.action.primary,
+          }}
+        />
+      </View>
+
+      {showSupporting ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 8,
+            gap: 8,
+          }}
+        >
+          <Text variant="bodyLarge" color="secondary" numberOfLines={1} style={{ flexShrink: 1 }}>
+            {label}
+          </Text>
+          {showValue ? (
+            <Text variant="bodyLarge" color="secondary" numberOfLines={1}>
+              {formatValue ? formatValue(value) : `${percent}%`}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ProgressBar/index.ts

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