@bacon-pos/ui 0.3.0 → 0.5.0

package/lib/typescript/commonjs/components/Toast/Toast.d.ts

@@ -0,0 +1,40 @@
+import type { IconName } from '../Icon/icons.generated';
+/** Built-in statuses. More can be added later, or use custom colors. */
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+export interface ToastOptions {
+    /** Message text. Ellipsized on a single line if it overflows. */
+    message: string;
+    /** Visual status. Defaults to `info`. */
+    status?: ToastStatus;
+    /** Optional leading icon. */
+    icon?: IconName;
+    /** Time on screen in ms. `0` keeps it until dismissed. */
+    duration?: number;
+    /** Custom fixed height. */
+    height?: number;
+    /** Custom fixed width. Defaults to full width. */
+    width?: number;
+    /** Show a countdown progress bar for the remaining time (needs duration > 0). */
+    showProgress?: boolean;
+    /** Custom background (overrides status). */
+    backgroundColor?: string;
+    /** Custom text/icon color (overrides status). */
+    color?: string;
+    /** Countdown bar color. Defaults to the status foreground. */
+    progressColor?: string;
+}
+export interface ToastViewProps extends ToastOptions {
+    id: number;
+    position: 'top' | 'bottom';
+    /** When true, the toast animates out and then calls `onRemove`. */
+    leaving: boolean;
+    onRequestClose: (id: number) => void;
+    onRemove: (id: number) => void;
+    maxWidth?: number;
+}
+/**
+ * A single toast with an elegant slide + fade in/out. Self-contained: it runs
+ * its own duration timer and exit animation. Managed by `ToastProvider`.
+ */
+export declare function ToastView({ id, message, status, icon, duration, height, width, showProgress, backgroundColor, color, progressColor, position, leaving, onRequestClose, onRemove, maxWidth, }: ToastViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/lib/typescript/commonjs/components/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgBD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,mEAAmE;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,OAAO,EACP,MAAe,EACf,IAAI,EACJ,QAAe,EACf,MAAM,EACN,KAAK,EACL,YAAoB,EACpB,eAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,2CAuFhB"}

package/lib/typescript/commonjs/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import { type ToastOptions } from './Toast';
+export interface ToastApi {
+    /** Show a toast; returns its id. */
+    show: (options: ToastOptions) => number;
+    /** Dismiss a toast by id (animates out). */
+    hide: (id: number) => void;
+    /** Dismiss all toasts. */
+    hideAll: () => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Where toasts appear. Defaults to `bottom`. */
+    position?: 'top' | 'bottom';
+    /** Max toasts on screen at once. Defaults to 2. */
+    maxVisible?: number;
+    /** Default time on screen in ms. Defaults to 3000. */
+    duration?: number;
+    /** Distance from the screen edge. Defaults to 24. */
+    offset?: number;
+    /** Gap between stacked toasts. Defaults to 8. */
+    gap?: number;
+    /** Max toast width. Defaults to full width (no cap). */
+    maxWidth?: number;
+}
+/**
+ * Provides the imperative toast API and renders the toast stack. Wrap your app
+ * (inside ThemeProvider). Trigger toasts with `useToast().show(...)`. Newest
+ * toasts appear nearest the edge; at most `maxVisible` show at once.
+ */
+export declare function ToastProvider({ children, position, maxVisible, duration, offset, gap, maxWidth, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Access the toast API. Must be used within a `ToastProvider`. */
+export declare function useToast(): ToastApi;
+//# sourceMappingURL=ToastProvider.d.ts.map

package/lib/typescript/commonjs/components/Toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,oCAAoC;IACpC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACxC,4CAA4C;IAC5C,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAmB,EACnB,UAAc,EACd,QAAe,EACf,MAAW,EACX,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA6DpB;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

package/lib/typescript/commonjs/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastView, type ToastOptions, type ToastStatus, type ToastViewProps } from './Toast';
+export { ToastProvider, useToast, type ToastApi, type ToastProviderProps, } from './ToastProvider';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,QAAQ,EACb,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC"}

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

@@ -10,6 +10,7 @@ export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
+export * from './Keypad';
 export * from './LinkButton';
 export * from './ProductCard';
 export * from './QuantityStepper';
@@ -18,5 +19,6 @@ export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
+export * from './Toast';
 export type { LabelPosition } from './_internal/Labeled';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/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,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,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,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,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,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -11,6 +11,10 @@ export interface CodeFieldProps {
     mode?: CodeFieldMode;
     /** Called once every cell is filled. */
     onComplete?: (value: string) => void;
+    /** Helper text below the cells. Replaced by the error message when `error` is a string. */
+    helperText?: string;
+    /** Mark the field invalid. Pass a string to show it as the error message. */
+    error?: boolean | string;
     /** Disable input and dim the cells. */
     disabled?: boolean;
     /** Focus on mount. */
@@ -36,5 +40,5 @@ export interface CodeFieldProps {
  * backspace-to-previous and type-to-next all work natively. The active cell
  * shows the lime focus ring. Cell size, gap, font and font size are configurable.
  */
-export declare function CodeField({ value, onChangeText, length, mode, onComplete, disabled, autoFocus, cellWidth, cellHeight, gap, fontFamily, fontSize, accessibilityLabel, style, }: CodeFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeField({ value, onChangeText, length, mode, onComplete, helperText, error, disabled, autoFocus, cellWidth, cellHeight, gap, fontFamily, fontSize, accessibilityLabel, style, }: CodeFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CodeField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AASjE,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,MAAU,EACV,IAAgB,EAChB,UAAU,EACV,QAAgB,EAChB,SAAiB,EACjB,SAAe,EACf,UAAe,EACf,GAAQ,EACR,UAAU,EACV,QAAa,EACb,kBAA2B,EAC3B,KAAK,GACN,EAAE,cAAc,2CAmFhB"}
+{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAiBtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AASjE,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,MAAU,EACV,IAAgB,EAChB,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,SAAiB,EACjB,SAAe,EACf,UAAe,EACf,GAAQ,EACR,UAAU,EACV,QAAa,EACb,kBAA2B,EAC3B,KAAK,GACN,EAAE,cAAc,2CA2GhB"}

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

@@ -56,6 +56,10 @@ export interface DialogProps {
     radius?: number;
     /** Max width of the dialog card. Defaults to 560. */
     maxWidth?: number;
+    /** Fixed card width (overrides `maxWidth`). */
+    width?: number;
+    /** Fill the whole screen — for small devices. Overrides width/maxWidth/scrollMode. */
+    fullscreen?: boolean;
     /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
     maxHeightRatio?: number;
     /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
@@ -71,5 +75,5 @@ export interface DialogProps {
  * screens instead of scrolling inside the card. Footer composes the
  * design-system `Button`.
  */
-export declare function Dialog({ visible, onClose, title, subtitle, children, actions, cancel, showClose, closeDestructive, dismissOnBackdrop, scrollMode, stickyHeader, stickyFooter, padding, contentSpacing, radius, maxWidth, maxHeightRatio, scrollbarColor, style, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ visible, onClose, title, subtitle, children, actions, cancel, showClose, closeDestructive, dismissOnBackdrop, scrollMode, stickyHeader, stickyFooter, padding, contentSpacing, radius, maxWidth, width, fullscreen, maxHeightRatio, scrollbarColor, style, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK9D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAY,EACZ,MAAM,EACN,SAAgB,EAChB,gBAAwB,EACxB,iBAAyB,EACzB,UAAoB,EACpB,YAAmB,EACnB,YAAmB,EACnB,OAAY,EACZ,cAAmB,EACnB,MAAW,EACX,QAAc,EACd,cAAoB,EACpB,cAAc,EACd,KAAK,GACN,EAAE,WAAW,2CA2Jb"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK9D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAY,EACZ,MAAM,EACN,SAAgB,EAChB,gBAAwB,EACxB,iBAAyB,EACzB,UAAoB,EACpB,YAAmB,EACnB,YAAmB,EACnB,OAAY,EACZ,cAAmB,EACnB,MAAW,EACX,QAAc,EACd,KAAK,EACL,UAAkB,EAClB,cAAoB,EACpB,cAAc,EACd,KAAK,GACN,EAAE,WAAW,2CAmLb"}

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

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+/** The optional key to the left of 0. Hidden unless provided. */
+export interface KeypadExtraKey {
+    /** Short label (e.g. "."). */
+    label?: string;
+    /** Or an icon. */
+    icon?: IconName;
+    /** If set, pressing appends this to the value (e.g. "." for decimals). */
+    value?: string;
+    /** Custom action (open a modal, navigate, …). Overrides `value`. */
+    onPress?: () => void;
+    /** Content color. */
+    color?: string;
+    /** Key background color. */
+    backgroundColor?: string;
+}
+export interface KeypadProps {
+    /** Controlled value being entered. Defaults to ''. */
+    value?: string;
+    /** Called with the next value on digit / backspace / extra-value press. */
+    onChangeText?: (value: string) => void;
+    /** Fired on every press with the raw key: '0'–'9', 'backspace', or 'extra'. */
+    onKeyPress?: (key: string) => void;
+    /** Max length of `value`. */
+    maxLength?: number;
+    /** Content shown above the keys (dots, amount, anything). Swappable per use case. */
+    header?: ReactNode;
+    /** The key left of 0. Hidden by default; provide to show and customize it. */
+    extraKey?: KeypadExtraKey;
+    /** Key height. Defaults to 83. */
+    keyHeight?: number;
+    /** Gap between keys. Defaults to 8. */
+    gap?: number;
+    /** Total width. Defaults to full width; the 3 columns split evenly. */
+    width?: number;
+    /** Digit font size. Defaults to 24. */
+    digitSize?: number;
+    /** Space between header and keys. Defaults to 24. */
+    headerGap?: number;
+    /** Disable all keys. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Numeric keypad — a 3-column pad decoupled from what it drives (bind it to a
+ * PIN display, an amount, etc. via `value`/`onChangeText`, and put that display
+ * in `header`). Backspace is fixed to the right of 0; the key left of 0 is hidden
+ * unless you pass `extraKey` (custom symbol/icon, action and colors). Width,
+ * key height, gap and digit size are all configurable.
+ */
+export declare function Keypad({ value, onChangeText, onKeyPress, maxLength, header, extraKey, keyHeight, gap, width, digitSize, headerGap, disabled, style, }: KeypadProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Keypad.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Keypad.d.ts","sourceRoot":"","sources":["../../../../../src/components/Keypad/Keypad.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,iEAAiE;AACjE,MAAM,WAAW,cAAc;IAC7B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAQD;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAU,EACV,YAAY,EACZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAc,EACd,GAAO,EACP,KAAK,EACL,SAAc,EACd,SAAc,EACd,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,2CAgHb"}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import type { IconName } from '../Icon/icons.generated';
+/** Built-in statuses. More can be added later, or use custom colors. */
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+export interface ToastOptions {
+    /** Message text. Ellipsized on a single line if it overflows. */
+    message: string;
+    /** Visual status. Defaults to `info`. */
+    status?: ToastStatus;
+    /** Optional leading icon. */
+    icon?: IconName;
+    /** Time on screen in ms. `0` keeps it until dismissed. */
+    duration?: number;
+    /** Custom fixed height. */
+    height?: number;
+    /** Custom fixed width. Defaults to full width. */
+    width?: number;
+    /** Show a countdown progress bar for the remaining time (needs duration > 0). */
+    showProgress?: boolean;
+    /** Custom background (overrides status). */
+    backgroundColor?: string;
+    /** Custom text/icon color (overrides status). */
+    color?: string;
+    /** Countdown bar color. Defaults to the status foreground. */
+    progressColor?: string;
+}
+export interface ToastViewProps extends ToastOptions {
+    id: number;
+    position: 'top' | 'bottom';
+    /** When true, the toast animates out and then calls `onRemove`. */
+    leaving: boolean;
+    onRequestClose: (id: number) => void;
+    onRemove: (id: number) => void;
+    maxWidth?: number;
+}
+/**
+ * A single toast with an elegant slide + fade in/out. Self-contained: it runs
+ * its own duration timer and exit animation. Managed by `ToastProvider`.
+ */
+export declare function ToastView({ id, message, status, icon, duration, height, width, showProgress, backgroundColor, color, progressColor, position, leaving, onRequestClose, onRemove, maxWidth, }: ToastViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgBD,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,mEAAmE;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,OAAO,EACP,MAAe,EACf,IAAI,EACJ,QAAe,EACf,MAAM,EACN,KAAK,EACL,YAAoB,EACpB,eAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,2CAuFhB"}

package/lib/typescript/module/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import { type ToastOptions } from './Toast';
+export interface ToastApi {
+    /** Show a toast; returns its id. */
+    show: (options: ToastOptions) => number;
+    /** Dismiss a toast by id (animates out). */
+    hide: (id: number) => void;
+    /** Dismiss all toasts. */
+    hideAll: () => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Where toasts appear. Defaults to `bottom`. */
+    position?: 'top' | 'bottom';
+    /** Max toasts on screen at once. Defaults to 2. */
+    maxVisible?: number;
+    /** Default time on screen in ms. Defaults to 3000. */
+    duration?: number;
+    /** Distance from the screen edge. Defaults to 24. */
+    offset?: number;
+    /** Gap between stacked toasts. Defaults to 8. */
+    gap?: number;
+    /** Max toast width. Defaults to full width (no cap). */
+    maxWidth?: number;
+}
+/**
+ * Provides the imperative toast API and renders the toast stack. Wrap your app
+ * (inside ThemeProvider). Trigger toasts with `useToast().show(...)`. Newest
+ * toasts appear nearest the edge; at most `maxVisible` show at once.
+ */
+export declare function ToastProvider({ children, position, maxVisible, duration, offset, gap, maxWidth, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Access the toast API. Must be used within a `ToastProvider`. */
+export declare function useToast(): ToastApi;
+//# sourceMappingURL=ToastProvider.d.ts.map

package/lib/typescript/module/components/Toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,oCAAoC;IACpC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACxC,4CAA4C;IAC5C,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAmB,EACnB,UAAc,EACd,QAAe,EACf,MAAW,EACX,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA6DpB;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

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

@@ -0,0 +1,3 @@
+export { ToastView, type ToastOptions, type ToastStatus, type ToastViewProps } from './Toast';
+export { ToastProvider, useToast, type ToastApi, type ToastProviderProps, } from './ToastProvider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,QAAQ,EACb,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC"}

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

@@ -10,6 +10,7 @@ export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
+export * from './Keypad';
 export * from './LinkButton';
 export * from './ProductCard';
 export * from './QuantityStepper';
@@ -18,5 +19,6 @@ export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
+export * from './Toast';
 export type { LabelPosition } from './_internal/Labeled';
 //# sourceMappingURL=index.d.ts.map

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,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,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,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,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,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

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

package/src/components/CodeField/CodeField.tsx

@@ -13,6 +13,16 @@ import { Text } from '../Text/Text';
 /** Removes the browser's default focus outline on web (no-op on native). */
 const WEB_NO_OUTLINE = { outlineStyle: 'none', outlineWidth: 0 } as unknown as TextStyle;
 
+/** Convert a `#RRGGBB` (or `#RGB`) token to an `rgba()` string at the given alpha. */
+function hexToRgba(hex: string, alpha: number): string {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 export type CodeFieldMode = 'numeric' | 'alpha' | 'alphanumeric';
 
 /** Chars to strip per mode (applied after upper-casing). */
@@ -33,6 +43,10 @@ export interface CodeFieldProps {
   mode?: CodeFieldMode;
   /** Called once every cell is filled. */
   onComplete?: (value: string) => void;
+  /** Helper text below the cells. Replaced by the error message when `error` is a string. */
+  helperText?: string;
+  /** Mark the field invalid. Pass a string to show it as the error message. */
+  error?: boolean | string;
   /** Disable input and dim the cells. */
   disabled?: boolean;
   /** Focus on mount. */
@@ -65,6 +79,8 @@ export function CodeField({
   length = 6,
   mode = 'numeric',
   onComplete,
+  helperText,
+  error,
   disabled = false,
   autoFocus = false,
   cellWidth = 126,
@@ -86,75 +102,99 @@ export function CodeField({
   };
 
   const activeIndex = Math.min(value.length, length - 1);
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
 
   return (
-    <Pressable
-      onPress={() => inputRef.current?.focus()}
-      disabled={disabled}
-      style={[{ position: 'relative', alignSelf: 'flex-start' }, style]}
-    >
-      <View style={{ flexDirection: 'row', gap }}>
-        {Array.from({ length }).map((_, i) => {
-          const isActive = focused && i === activeIndex && !disabled;
-          return (
-            <View
-              key={i}
-              testID="code-field-cell"
-              style={{
-                width: cellWidth,
-                height: cellHeight,
-                borderRadius: theme.radii.pill,
-                borderWidth: 1,
-                borderColor: isActive ? theme.colors.border.focus : theme.colors.border.default,
-                backgroundColor: disabled
-                  ? theme.colors.disabled.background
-                  : theme.colors.background.default,
-                alignItems: 'center',
-                justifyContent: 'center',
-                opacity: disabled ? 0.6 : 1,
-                ...(isActive
-                  ? {
-                      boxShadow: [
-                        { offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: 6, color: 'rgba(201,255,0,0.15)' },
-                      ] as ViewStyle['boxShadow'],
-                    }
-                  : null),
-              }}
-            >
-              <Text
-                color={disabled ? 'tertiary' : 'primary'}
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
+      <Pressable
+        onPress={() => inputRef.current?.focus()}
+        disabled={disabled}
+        style={{ position: 'relative' }}
+      >
+        <View style={{ flexDirection: 'row', gap }}>
+          {Array.from({ length }).map((_, i) => {
+            const isActive = focused && i === activeIndex && !disabled;
+            // Error overrides the default/focus border on every cell; the active
+            // cell still gets the ring (red on error, lime otherwise).
+            const borderColor = hasError
+              ? theme.colors.feedback.error
+              : isActive
+                ? theme.colors.border.focus
+                : theme.colors.border.default;
+            const ringColor = hasError
+              ? hexToRgba(theme.colors.feedback.error, 0.15)
+              : 'rgba(201,255,0,0.15)';
+            return (
+              <View
+                key={i}
+                testID="code-field-cell"
                 style={{
-                  fontFamily: fontFamily ?? theme.fontFamily.regular,
-                  fontSize,
-                  lineHeight: Math.round(fontSize * 1.45),
+                  width: cellWidth,
+                  height: cellHeight,
+                  borderRadius: theme.radii.pill,
+                  borderWidth: 1,
+                  borderColor,
+                  backgroundColor: disabled
+                    ? theme.colors.disabled.background
+                    : theme.colors.background.default,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: disabled ? 0.6 : 1,
+                  ...(isActive
+                    ? {
+                        boxShadow: [
+                          { offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: 6, color: ringColor },
+                        ] as ViewStyle['boxShadow'],
+                      }
+                    : null),
                 }}
               >
-                {value[i] ?? ''}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
+                <Text
+                  color={disabled ? 'tertiary' : 'primary'}
+                  style={{
+                    fontFamily: fontFamily ?? theme.fontFamily.regular,
+                    fontSize,
+                    lineHeight: Math.round(fontSize * 1.45),
+                  }}
+                >
+                  {value[i] ?? ''}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+
+        <TextInput
+          ref={inputRef}
+          value={value}
+          onChangeText={handleChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          keyboardType={mode === 'numeric' ? 'number-pad' : 'default'}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          maxLength={length}
+          editable={!disabled}
+          caretHidden
+          autoFocus={autoFocus}
+          accessibilityLabel={accessibilityLabel}
+          style={[
+            { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0 },
+            WEB_NO_OUTLINE,
+          ]}
+        />
+      </Pressable>
 
-      <TextInput
-        ref={inputRef}
-        value={value}
-        onChangeText={handleChange}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        keyboardType={mode === 'numeric' ? 'number-pad' : 'default'}
-        autoCapitalize="characters"
-        autoCorrect={false}
-        maxLength={length}
-        editable={!disabled}
-        caretHidden
-        autoFocus={autoFocus}
-        accessibilityLabel={accessibilityLabel}
-        style={[
-          { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0 },
-          WEB_NO_OUTLINE,
-        ]}
-      />
-    </Pressable>
+      {message ? (
+        <Text
+          variant="bodySmall"
+          color={hasError ? theme.colors.feedback.error : 'tertiary'}
+          style={{ marginTop: 8, marginLeft: 8 }}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
   );
 }