@bacon-pos/ui 0.1.0 → 0.2.0

package/lib/module/components/Spinner/Spinner.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { Spinner } from "./Spinner.js";
+import { ThemeProvider } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function renderWithTheme(ui) {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    children: ui
+  }));
+}
+describe('Spinner', () => {
+  it('renders with a progressbar role', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Spinner, {
+      accessibilityLabel: "Loading"
+    }));
+    expect(screen.getByLabelText('Loading')).toBeTruthy();
+  });
+  it('renders its label', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Spinner, {
+      label: "Wait a moment please..."
+    }));
+    expect(screen.getByText('Wait a moment please...')).toBeTruthy();
+  });
+  it('renders without a label when none is given', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Spinner, {
+      accessibilityLabel: "Loading"
+    }));
+    expect(screen.queryByText('Loading')).toBeNull();
+  });
+});
+//# sourceMappingURL=Spinner.test.js.map

package/lib/module/components/Spinner/Spinner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","render","screen","Spinner","ThemeProvider","jsx","_jsx","renderWithTheme","ui","children","describe","it","accessibilityLabel","expect","getByLabelText","toBeTruthy","label","getByText","queryByText","toBeNull"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.test.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,MAAM,QAAQ,+BAA+B;AAC9D,SAASC,OAAO,QAAQ,cAAW;AACnC,SAASC,aAAa,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,SAASC,eAAeA,CAACC,EAAsB,EAAE;EAC/C,OAAOP,MAAM,cAACK,IAAA,CAACF,aAAa;IAAAK,QAAA,EAAED;EAAE,CAAgB,CAAC,CAAC;AACpD;AAEAE,QAAQ,CAAC,SAAS,EAAE,MAAM;EACxBC,EAAE,CAAC,iCAAiC,EAAE,MAAM;IAC1CJ,eAAe,cAACD,IAAA,CAACH,OAAO;MAACS,kBAAkB,EAAC;IAAS,CAAE,CAAC,CAAC;IACzDC,MAAM,CAACX,MAAM,CAACY,cAAc,CAAC,SAAS,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EACvD,CAAC,CAAC;EAEFJ,EAAE,CAAC,mBAAmB,EAAE,MAAM;IAC5BJ,eAAe,cAACD,IAAA,CAACH,OAAO;MAACa,KAAK,EAAC;IAAyB,CAAE,CAAC,CAAC;IAC5DH,MAAM,CAACX,MAAM,CAACe,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAACF,UAAU,CAAC,CAAC;EAClE,CAAC,CAAC;EAEFJ,EAAE,CAAC,4CAA4C,EAAE,MAAM;IACrDJ,eAAe,cAACD,IAAA,CAACH,OAAO;MAACS,kBAAkB,EAAC;IAAS,CAAE,CAAC,CAAC;IACzDC,MAAM,CAACX,MAAM,CAACgB,WAAW,CAAC,SAAS,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EAClD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Spinner/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Spinner } from "./Spinner.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Spinner"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAA6C,cAAW","ignoreList":[]}

package/lib/module/components/index.js

@@ -6,6 +6,7 @@ export * from "./Button/index.js";
 export * from "./Card/index.js";
 export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
+export * from "./CodeField/index.js";
 export * from "./CodeInput/index.js";
 export * from "./Icon/index.js";
 export * from "./IconButton/index.js";

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type CodeFieldMode = 'numeric' | 'alpha' | 'alphanumeric';
+export interface CodeFieldProps {
+    /** Current code. */
+    value: string;
+    /** Called with the sanitized, upper-cased code as it changes. */
+    onChangeText: (value: string) => void;
+    /** Number of cells. Defaults to 6. */
+    length?: number;
+    /** Allowed characters. Defaults to `numeric`. */
+    mode?: CodeFieldMode;
+    /** Called once every cell is filled. */
+    onComplete?: (value: string) => void;
+    /** Disable input and dim the cells. */
+    disabled?: boolean;
+    /** Focus on mount. */
+    autoFocus?: boolean;
+    /** Cell width in px (Figma default 126). */
+    cellWidth?: number;
+    /** Cell height in px (Figma default 58). */
+    cellHeight?: number;
+    /** Gap between cells in px (Figma default 24). */
+    gap?: number;
+    /** Font family for the digits. Defaults to the theme's regular Inter. */
+    fontFamily?: string;
+    /** Font size for the digits (Figma default 18). */
+    fontSize?: number;
+    /** Accessibility label for the hidden field. Defaults to "Code". */
+    accessibilityLabel?: string;
+    /** Override the container style. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Code field — a row of boxes for entering a code (numeric / alpha /
+ * alphanumeric, always upper-cased). Backed by a single hidden input, so paste,
+ * 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;
+//# sourceMappingURL=CodeField.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export { CodeField, type CodeFieldProps, type CodeFieldMode } from './CodeField';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SpinnerProps {
+    /** Size preset: xs / sm / md / lg / xl. Defaults to `md`. */
+    size?: SpinnerSize;
+    /** Ring color. Defaults to the brand lime action color. */
+    color?: string;
+    /** Ring thickness in px. Defaults to ~7% of the diameter. */
+    thickness?: number;
+    /** Optional label shown next to the spinner. */
+    label?: string;
+    /** Label position relative to the spinner. Defaults to `bottom`. */
+    labelPosition?: 'top' | 'bottom';
+    /** Distance between spinner and label. Defaults to 8. */
+    gap?: number;
+    /** Label font size. Defaults to 16. */
+    labelSize?: number;
+    /** Label color (token or raw). Defaults to secondary text. */
+    labelColor?: string;
+    /** Rotation duration in ms (one full turn). Defaults to 900. */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Spinner — an infinitely rotating ring (react-native-svg + Animated, native
+ * driver for smooth motion). Configurable size, color, thickness and an
+ * optional label (top/bottom, with adjustable gap and font size).
+ */
+export declare function Spinner({ size, color, thickness, label, labelPosition, gap, labelSize, labelColor, duration, style, accessibilityLabel, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,SAAS,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAK3D,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,aAAwB,EACxB,GAAO,EACP,SAAc,EACd,UAAU,EACV,QAAc,EACd,KAAK,EACL,kBAAkB,GACnB,EAAE,YAAY,2CA4Ed"}

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

@@ -0,0 +1,2 @@
+export { Spinner, type SpinnerProps, type SpinnerSize } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -4,6 +4,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CodeField';
 export * from './CodeInput';
 export * from './Icon';
 export * from './IconButton';

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,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,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,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,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,40 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type CodeFieldMode = 'numeric' | 'alpha' | 'alphanumeric';
+export interface CodeFieldProps {
+    /** Current code. */
+    value: string;
+    /** Called with the sanitized, upper-cased code as it changes. */
+    onChangeText: (value: string) => void;
+    /** Number of cells. Defaults to 6. */
+    length?: number;
+    /** Allowed characters. Defaults to `numeric`. */
+    mode?: CodeFieldMode;
+    /** Called once every cell is filled. */
+    onComplete?: (value: string) => void;
+    /** Disable input and dim the cells. */
+    disabled?: boolean;
+    /** Focus on mount. */
+    autoFocus?: boolean;
+    /** Cell width in px (Figma default 126). */
+    cellWidth?: number;
+    /** Cell height in px (Figma default 58). */
+    cellHeight?: number;
+    /** Gap between cells in px (Figma default 24). */
+    gap?: number;
+    /** Font family for the digits. Defaults to the theme's regular Inter. */
+    fontFamily?: string;
+    /** Font size for the digits (Figma default 18). */
+    fontSize?: number;
+    /** Accessibility label for the hidden field. Defaults to "Code". */
+    accessibilityLabel?: string;
+    /** Override the container style. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Code field — a row of boxes for entering a code (numeric / alpha /
+ * alphanumeric, always upper-cased). Backed by a single hidden input, so paste,
+ * 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;
+//# sourceMappingURL=CodeField.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export { CodeField, type CodeFieldProps, type CodeFieldMode } from './CodeField';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SpinnerProps {
+    /** Size preset: xs / sm / md / lg / xl. Defaults to `md`. */
+    size?: SpinnerSize;
+    /** Ring color. Defaults to the brand lime action color. */
+    color?: string;
+    /** Ring thickness in px. Defaults to ~7% of the diameter. */
+    thickness?: number;
+    /** Optional label shown next to the spinner. */
+    label?: string;
+    /** Label position relative to the spinner. Defaults to `bottom`. */
+    labelPosition?: 'top' | 'bottom';
+    /** Distance between spinner and label. Defaults to 8. */
+    gap?: number;
+    /** Label font size. Defaults to 16. */
+    labelSize?: number;
+    /** Label color (token or raw). Defaults to secondary text. */
+    labelColor?: string;
+    /** Rotation duration in ms (one full turn). Defaults to 900. */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Spinner — an infinitely rotating ring (react-native-svg + Animated, native
+ * driver for smooth motion). Configurable size, color, thickness and an
+ * optional label (top/bottom, with adjustable gap and font size).
+ */
+export declare function Spinner({ size, color, thickness, label, labelPosition, gap, labelSize, labelColor, duration, style, accessibilityLabel, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,SAAS,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAK3D,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,aAAwB,EACxB,GAAO,EACP,SAAc,EACd,UAAU,EACV,QAAc,EACd,KAAK,EACL,kBAAkB,GACnB,EAAE,YAAY,2CA4Ed"}

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

@@ -0,0 +1,2 @@
+export { Spinner, type SpinnerProps, type SpinnerSize } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -4,6 +4,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CodeField';
 export * from './CodeInput';
 export * from './Icon';
 export * from './IconButton';

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,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,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,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,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacon-pos/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -28,19 +28,6 @@
     "!**/*.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",
@@ -112,5 +99,16 @@
       "typescript"
     ]
   },
-  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
-}
+  "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"
+  }
+}

package/src/components/CodeField/CodeField.tsx

@@ -0,0 +1,160 @@
+import { useRef, useState } from 'react';
+import {
+  Pressable,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+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;
+
+export type CodeFieldMode = 'numeric' | 'alpha' | 'alphanumeric';
+
+/** Chars to strip per mode (applied after upper-casing). */
+const DISALLOWED: Record<CodeFieldMode, RegExp> = {
+  numeric: /[^0-9]/g,
+  alpha: /[^A-Z]/g,
+  alphanumeric: /[^A-Z0-9]/g,
+};
+
+export interface CodeFieldProps {
+  /** Current code. */
+  value: string;
+  /** Called with the sanitized, upper-cased code as it changes. */
+  onChangeText: (value: string) => void;
+  /** Number of cells. Defaults to 6. */
+  length?: number;
+  /** Allowed characters. Defaults to `numeric`. */
+  mode?: CodeFieldMode;
+  /** Called once every cell is filled. */
+  onComplete?: (value: string) => void;
+  /** Disable input and dim the cells. */
+  disabled?: boolean;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Cell width in px (Figma default 126). */
+  cellWidth?: number;
+  /** Cell height in px (Figma default 58). */
+  cellHeight?: number;
+  /** Gap between cells in px (Figma default 24). */
+  gap?: number;
+  /** Font family for the digits. Defaults to the theme's regular Inter. */
+  fontFamily?: string;
+  /** Font size for the digits (Figma default 18). */
+  fontSize?: number;
+  /** Accessibility label for the hidden field. Defaults to "Code". */
+  accessibilityLabel?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Code field — a row of boxes for entering a code (numeric / alpha /
+ * alphanumeric, always upper-cased). Backed by a single hidden input, so paste,
+ * 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 function CodeField({
+  value,
+  onChangeText,
+  length = 6,
+  mode = 'numeric',
+  onComplete,
+  disabled = false,
+  autoFocus = false,
+  cellWidth = 126,
+  cellHeight = 58,
+  gap = 24,
+  fontFamily,
+  fontSize = 18,
+  accessibilityLabel = 'Code',
+  style,
+}: CodeFieldProps) {
+  const theme = useTheme();
+  const inputRef = useRef<TextInput>(null);
+  const [focused, setFocused] = useState(false);
+
+  const handleChange = (text: string) => {
+    const next = text.toUpperCase().replace(DISALLOWED[mode], '').slice(0, length);
+    onChangeText(next);
+    if (next.length === length) onComplete?.(next);
+  };
+
+  const activeIndex = Math.min(value.length, length - 1);
+
+  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'}
+                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>
+  );
+}

package/src/components/CodeField/index.ts

@@ -0,0 +1 @@
+export { CodeField, type CodeFieldProps, type CodeFieldMode } from './CodeField';

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTheme } from '../../theme';
+import { Text } from '../Text/Text';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Diameters per size — `xl` matches the Figma spinner (164, 12px ring). */
+const SIZES: Record<SpinnerSize, number> = { xs: 24, sm: 40, md: 64, lg: 96, xl: 164 };
+
+export interface SpinnerProps {
+  /** Size preset: xs / sm / md / lg / xl. Defaults to `md`. */
+  size?: SpinnerSize;
+  /** Ring color. Defaults to the brand lime action color. */
+  color?: string;
+  /** Ring thickness in px. Defaults to ~7% of the diameter. */
+  thickness?: number;
+  /** Optional label shown next to the spinner. */
+  label?: string;
+  /** Label position relative to the spinner. Defaults to `bottom`. */
+  labelPosition?: 'top' | 'bottom';
+  /** Distance between spinner and label. Defaults to 8. */
+  gap?: number;
+  /** Label font size. Defaults to 16. */
+  labelSize?: number;
+  /** Label color (token or raw). Defaults to secondary text. */
+  labelColor?: string;
+  /** Rotation duration in ms (one full turn). Defaults to 900. */
+  duration?: number;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Spinner — an infinitely rotating ring (react-native-svg + Animated, native
+ * driver for smooth motion). Configurable size, color, thickness and an
+ * optional label (top/bottom, with adjustable gap and font size).
+ */
+export function Spinner({
+  size = 'md',
+  color,
+  thickness,
+  label,
+  labelPosition = 'bottom',
+  gap = 8,
+  labelSize = 16,
+  labelColor,
+  duration = 900,
+  style,
+  accessibilityLabel,
+}: SpinnerProps) {
+  const theme = useTheme();
+  const diameter = SIZES[size];
+  const stroke = thickness ?? Math.max(2, Math.round(diameter * 0.073));
+  const arcColor = color ?? theme.colors.action.primary;
+  const radius = (diameter - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const rotation = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    rotation.setValue(0);
+    const loop = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration,
+        easing: Easing.linear,
+        // Native driver loops smoothly on iOS/Android; on web (react-native-web)
+        // a native-driven loop only runs once, so drive it on the JS thread there.
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [rotation, duration]);
+
+  const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  const labelStyle: TextStyle = {
+    fontSize: labelSize,
+    lineHeight: Math.round(labelSize * 1.4),
+    ...(labelPosition === 'top' ? {} : null),
+  };
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[
+        {
+          alignItems: 'center',
+          gap,
+          flexDirection: labelPosition === 'top' ? 'column-reverse' : 'column',
+        },
+        style,
+      ]}
+    >
+      <Animated.View style={{ width: diameter, height: diameter, transform: [{ rotate: spin }] }}>
+        <Svg width={diameter} height={diameter}>
+          <Circle
+            cx={diameter / 2}
+            cy={diameter / 2}
+            r={radius}
+            stroke={arcColor}
+            strokeWidth={stroke}
+            fill="none"
+            opacity={0.2}
+          />
+          <Circle
+            cx={diameter / 2}
+            cy={diameter / 2}
+            r={radius}
+            stroke={arcColor}
+            strokeWidth={stroke}
+            fill="none"
+            strokeLinecap="round"
+            strokeDasharray={[circumference * 0.7, circumference * 0.3]}
+          />
+        </Svg>
+      </Animated.View>
+      {label ? (
+        <Text color={labelColor ?? 'secondary'} style={labelStyle}>
+          {label}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps, type SpinnerSize } from './Spinner';

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CodeField';
 export * from './CodeInput';
 export * from './Icon';
 export * from './IconButton';