@bacon-pos/ui 0.10.0 → 0.15.1

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

@@ -20,6 +20,8 @@ export interface ProgressBarProps {
     trackColor?: string;
     /** Track border color. Defaults to `border.default`. */
     borderColor?: string;
+    /** Draw the track border (and inner inset). Set false for a flat, thin bar. Defaults to true. */
+    bordered?: boolean;
     /** Animate width changes. Defaults to true. */
     animated?: boolean;
     /** Override the container style. */
@@ -33,5 +35,5 @@ export interface ProgressBarProps {
  * 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 declare function ProgressBar({ progress, label, showSupporting, showValue, formatValue, height, width, color, trackColor, borderColor, animated, style, accessibilityLabel, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ progress, label, showSupporting, showValue, formatValue, height, width, color, trackColor, borderColor, bordered, animated, style, accessibilityLabel, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAItF,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAwB,EACxB,cAAqB,EACrB,SAAgB,EAChB,WAAW,EACX,MAAW,EACX,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,2CA8ElB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAItF,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAwB,EACxB,cAAqB,EACrB,SAAgB,EAChB,WAAW,EACX,MAAW,EACX,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAe,EACf,QAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,2CA8ElB"}

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

@@ -1 +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"}
+{"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,2CAgJd"}

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/Table.d.ts

@@ -1,6 +1,20 @@
 import { type ReactNode } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
 export type ColumnAlign = 'left' | 'center' | 'right';
+/** A structured row action (inline icon, or a row in the overflow "More" menu). */
+export interface TableAction {
+    key: string;
+    label: string;
+    icon: IconName;
+    onPress?: () => void;
+    /** Render in the error color (red icon inline, red row in the menu). */
+    destructive?: boolean;
+    /** Dim and block the action. */
+    disabled?: boolean;
+    /** Icon color override (ignored when `destructive`). */
+    color?: string;
+}
 export type SortDirection = 'asc' | 'desc';
 export interface TableSort {
     key: string;
@@ -41,9 +55,17 @@ export interface TableProps<T> {
     expandedKeys?: string[];
     defaultExpandedKeys?: string[];
     onExpandedChange?: (keys: string[]) => void;
-    /** Trailing per-row actions (e.g. edit/delete) — mutually exclusive with `expandable`. */
+    /** Trailing per-row actions, free-form (e.g. custom buttons) — mutually exclusive with `expandable`. */
     renderActions?: (row: T, index: number) => ReactNode;
-    /** Width reserved for the actions column. Defaults to 96. */
+    /** Structured per-row actions: the first `maxInlineActions` render as inline icons, the rest collapse into a "More" menu. */
+    actions?: (row: T, index: number) => TableAction[];
+    /** How many actions render inline before overflowing into the More menu. Defaults to 2. */
+    maxInlineActions?: number;
+    /** Icon for the overflow menu trigger. Defaults to `more`. */
+    moreIcon?: IconName;
+    /** Width of the overflow More menu. */
+    actionsMenuWidth?: number;
+    /** Width reserved for the actions column. Defaults to fit the actions. */
     actionsWidth?: number;
     /** Row selection via checkboxes. */
     selectable?: boolean;
@@ -81,5 +103,5 @@ export interface TableProps<T> {
  * 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;
+export declare function Table<T>({ columns, data, keyExtractor, onRowPress, expandable, renderExpanded, expansionMode, expandedKeys, defaultExpandedKeys, onExpandedChange, renderActions, actions, maxInlineActions, moreIcon, actionsMenuWidth, 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

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

package/lib/typescript/module/components/_internal/ModalHostContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * True when the subtree is rendered inside a full-screen (statusBarTranslucent)
+ * Modal host — e.g. `Dialog`, or a `Menu` overlay. Anchored menus use this to
+ * skip the status-bar coordinate compensation: inside such a host, a trigger
+ * measured with `measureInWindow` is already in full-screen coordinates that
+ * match the menu's own Modal, so adding the status bar height would push the
+ * menu down (a visible gap). Outside a host, the compensation is still applied.
+ */
+export declare const ModalHostContext: import("react").Context<boolean>;
+export declare function useInsideModalHost(): boolean;
+//# sourceMappingURL=ModalHostContext.d.ts.map

package/lib/typescript/module/components/_internal/ModalHostContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHostContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/_internal/ModalHostContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,kCAAuB,CAAC;AAErD,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C"}

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

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

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,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"}
+{"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,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.10.0",
+  "version": "0.15.1",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -28,6 +28,19 @@
     "!**/*.stories.tsx"
   ],
   "sideEffects": false,
+  "scripts": {
+    "clean": "del-cli lib",
+    "build": "bob build",
+    "prepare": "bob build",
+    "typecheck": "tsc --noEmit",
+    "gen:icons": "node scripts/generate-icons.mjs",
+    "gen:graphics": "node scripts/generate-graphics.mjs",
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "changeset publish",
+    "version": "changeset version"
+  },
   "keywords": [
     "react-native",
     "expo",
@@ -99,16 +112,5 @@
       "typescript"
     ]
   },
-  "scripts": {
-    "clean": "del-cli lib",
-    "build": "bob build",
-    "typecheck": "tsc --noEmit",
-    "gen:icons": "node scripts/generate-icons.mjs",
-    "gen:graphics": "node scripts/generate-graphics.mjs",
-    "test": "jest",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "release": "changeset publish",
-    "version": "changeset version"
-  }
-}
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
+}

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

@@ -30,6 +30,10 @@ export interface CodeInputProps {
   disabled?: boolean;
   /** Focus on mount. */
   autoFocus?: boolean;
+  /** Mark the field invalid — turns the cells red. Pass a string to show it as a message below. */
+  error?: boolean | string;
+  /** Helper/message text below the cells. Replaced by the error message when `error` is a string. */
+  helperText?: string;
   /** Show an eye toggle to reveal/hide the entered digits. */
   revealable?: boolean;
   /** Controlled reveal state. Omit for uncontrolled (toggled by the eye). */
@@ -52,21 +56,28 @@ function Cell({
   filled,
   revealed,
   disabled,
+  error,
   theme,
 }: {
   char: string;
   filled: boolean;
   revealed: boolean;
   disabled: boolean;
+  error: boolean;
   theme: Theme;
 }) {
+  const errorColor = theme.colors.feedback.error;
   return (
     <View
       testID="code-input-cell"
       style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}
     >
       {revealed && filled ? (
-        <Text variant="bodyMedium" weight="medium" color={disabled ? 'tertiary' : 'primary'}>
+        <Text
+          variant="bodyMedium"
+          weight="medium"
+          color={disabled ? 'tertiary' : error ? errorColor : 'primary'}
+        >
           {char}
         </Text>
       ) : (
@@ -76,8 +87,16 @@ function Cell({
             height: 20,
             borderRadius: 10,
             borderWidth: 1.5,
-            backgroundColor: filled ? theme.colors.text.primary : theme.colors.background.default,
-            borderColor: filled ? theme.colors.text.primary : theme.colors.border.strong,
+            backgroundColor: filled
+              ? error
+                ? errorColor
+                : theme.colors.text.primary
+              : theme.colors.background.default,
+            borderColor: error
+              ? errorColor
+              : filled
+                ? theme.colors.text.primary
+                : theme.colors.border.strong,
             opacity: disabled ? 0.5 : 1,
           }}
         />
@@ -100,6 +119,8 @@ export function CodeInput({
   onComplete,
   disabled = false,
   autoFocus = false,
+  error,
+  helperText,
   revealable = false,
   revealed: revealedProp,
   onRevealChange,
@@ -114,6 +135,8 @@ export function CodeInput({
   const [internalRevealed, setInternalRevealed] = useState(false);
   const revealed = revealedProp ?? internalRevealed;
   const filled = Math.min(value.length, length);
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
 
   const handleChange = (text: string) => {
     const digits = text.replace(/[^0-9]/g, '').slice(0, length);
@@ -141,6 +164,7 @@ export function CodeInput({
             filled={i < filled}
             revealed={revealed}
             disabled={disabled}
+            error={hasError}
             theme={theme}
           />
         ))}
@@ -180,21 +204,29 @@ export function CodeInput({
   const eyeFirst = revealPosition === 'top' || revealPosition === 'left';
 
   return (
-    <View
-      style={[
-        {
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
+      <View
+        style={{
           flexDirection: vertical ? 'column' : 'row',
           alignItems: 'center',
           gap: 12,
-          alignSelf: 'flex-start',
           paddingVertical: 8,
-        },
-        style,
-      ]}
-    >
-      {eyeFirst ? eyeToggle : null}
-      {cells}
-      {eyeFirst ? null : eyeToggle}
+        }}
+      >
+        {eyeFirst ? eyeToggle : null}
+        {cells}
+        {eyeFirst ? null : eyeToggle}
+      </View>
+
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 4, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
     </View>
   );
 }