@bacon-pos/ui 0.1.0 → 0.2.1

package/README.md

@@ -229,8 +229,9 @@ Built from the Figma design system (colors, typography, ~150 icons, inputs,
 etc.). Current components: `Button`, `IconButton`, `LinkButton`, `Input`, `Card`,
 `ProductCard`, `Surface`, `Text`, `Icon` (167 icons — 24px outline + fill + 20px
 optical set), plus multicolor `Logo` (Visa/Mastercard) and `Flag` (US/BR) brand
-assets, `QuantityStepper`, `CodeInput` (PIN), `Chip` + `ChipGroup` (single/multi
-select), `Avatar` (photo or initials), and form controls `Checkbox`, `Radio`,
-`Switch` (each standalone or with a positionable `label`). The Figma
+assets, `QuantityStepper`, `CodeInput` (PIN), `CodeField` (segmented code),
+`Spinner`, `Chip` + `ChipGroup` (single/multi select), `Avatar` (photo or
+initials), and form controls `Checkbox`, `Radio`, `Switch` (each standalone or
+with a positionable `label`). The Figma
 "loader" is an animated ring, not an icon — use RN's `ActivityIndicator`
 (Button/LinkButton already do).

package/lib/commonjs/components/CodeField/CodeField.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeField = CodeField;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Removes the browser's default focus outline on web (no-op on native). */const WEB_NO_OUTLINE = {
+  outlineStyle: 'none',
+  outlineWidth: 0
+};
+/** Chars to strip per mode (applied after upper-casing). */
+const DISALLOWED = {
+  numeric: /[^0-9]/g,
+  alpha: /[^A-Z]/g,
+  alphanumeric: /[^A-Z0-9]/g
+};
+/**
+ * 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.
+ */
+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
+}) {
+  const theme = (0, _index.useTheme)();
+  const inputRef = (0, _react.useRef)(null);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const handleChange = text => {
+    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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: () => inputRef.current?.focus(),
+    disabled: disabled,
+    style: [{
+      position: 'relative',
+      alignSelf: 'flex-start'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        gap
+      },
+      children: Array.from({
+        length
+      }).map((_, i) => {
+        const isActive = focused && i === activeIndex && !disabled;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          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)'
+              }]
+            } : null)
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+            color: disabled ? 'tertiary' : 'primary',
+            style: {
+              fontFamily: fontFamily ?? theme.fontFamily.regular,
+              fontSize,
+              lineHeight: Math.round(fontSize * 1.45)
+            },
+            children: value[i] ?? ''
+          })
+        }, i);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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: true,
+      autoFocus: autoFocus,
+      accessibilityLabel: accessibilityLabel,
+      style: [{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: 0
+      }, WEB_NO_OUTLINE]
+    })]
+  });
+}
+//# sourceMappingURL=CodeField.js.map

package/lib/commonjs/components/CodeField/CodeField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_Text","_jsxRuntime","WEB_NO_OUTLINE","outlineStyle","outlineWidth","DISALLOWED","numeric","alpha","alphanumeric","CodeField","value","onChangeText","length","mode","onComplete","disabled","autoFocus","cellWidth","cellHeight","gap","fontFamily","fontSize","accessibilityLabel","style","theme","useTheme","inputRef","useRef","focused","setFocused","useState","handleChange","text","next","toUpperCase","replace","slice","activeIndex","Math","min","jsxs","Pressable","onPress","current","focus","position","alignSelf","children","jsx","View","flexDirection","Array","from","map","_","i","isActive","testID","width","height","borderRadius","radii","pill","borderWidth","borderColor","colors","border","default","backgroundColor","background","alignItems","justifyContent","opacity","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","color","Text","regular","lineHeight","round","TextInput","ref","onFocus","onBlur","keyboardType","autoCapitalize","autoCorrect","maxLength","editable","caretHidden","top","left","right","bottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/CodeField/CodeField.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Disabled = exports.Default = exports.Compact = exports.Alphanumeric = exports.Alpha = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _CodeField = require("./CodeField.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/CodeField',
+  component: _CodeField.CodeField
+};
+var _default = exports.default = meta;
+function Demo(props) {
+  const [value, setValue] = (0, _react.useState)('');
+  const [done, setDone] = (0, _react.useState)('');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 8,
+      alignItems: 'flex-start'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: value,
+      onChangeText: setValue,
+      onComplete: setDone,
+      ...props
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.Text, {
+      variant: "caption",
+      color: "secondary",
+      children: ["value: \"", value, "\"", done ? ` · complete: ${done}` : '']
+    })]
+  });
+}
+
+// Figma defaults (wide desktop cells).
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    length: 4
+  })
+};
+// Compact cells for mobile.
+const Compact = exports.Compact = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    length: 6,
+    cellWidth: 48,
+    gap: 8
+  })
+};
+const Alphanumeric = exports.Alphanumeric = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    length: 6,
+    mode: "alphanumeric",
+    cellWidth: 48,
+    gap: 8
+  })
+};
+const Alpha = exports.Alpha = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    length: 5,
+    mode: "alpha",
+    cellWidth: 48,
+    gap: 8
+  })
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    length: 4,
+    cellWidth: 48,
+    gap: 8,
+    disabled: true
+  })
+};
+//# sourceMappingURL=CodeField.stories.js.map

package/lib/commonjs/components/CodeField/CodeField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_CodeField","_Text","_jsxRuntime","meta","title","component","CodeField","_default","exports","default","Demo","props","value","setValue","useState","done","setDone","jsxs","View","style","gap","alignItems","children","jsx","onChangeText","onComplete","Text","variant","color","Default","render","length","Compact","cellWidth","Alphanumeric","mode","Alpha","Disabled","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.stories.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAoC,IAAAI,WAAA,GAAAJ,OAAA;AAEpC,MAAMK,IAAI,GAAG;EACXC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAEC;AACb,CAAkC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEpBN,IAAI;AAGnB,SAASO,IAAIA,CAACC,KAQb,EAAE;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACtC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EACpC,oBACE,IAAAZ,WAAA,CAAAe,IAAA,EAAClB,YAAA,CAAAmB,IAAI;IAACC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAa,CAAE;IAAAC,QAAA,gBAChD,IAAApB,WAAA,CAAAqB,GAAA,EAACvB,UAAA,CAAAM,SAAS;MAACM,KAAK,EAAEA,KAAM;MAACY,YAAY,EAAEX,QAAS;MAACY,UAAU,EAAET,OAAQ;MAAA,GAAKL;IAAK,CAAG,CAAC,eACnF,IAAAT,WAAA,CAAAe,IAAA,EAAChB,KAAA,CAAAyB,IAAI;MAACC,OAAO,EAAC,SAAS;MAACC,KAAK,EAAC,WAAW;MAAAN,QAAA,GAAC,WAChC,EAACV,KAAK,EAAC,IAAC,EAACG,IAAI,GAAG,gBAAgBA,IAAI,EAAE,GAAG,EAAE;IAAA,CAC/C,CAAC;EAAA,CACH,CAAC;AAEX;;AAEA;AACO,MAAMc,OAAc,GAAArB,OAAA,CAAAqB,OAAA,GAAG;EAAEC,MAAM,EAAEA,CAAA,kBAAM,IAAA5B,WAAA,CAAAqB,GAAA,EAACb,IAAI;IAACqB,MAAM,EAAE;EAAE,CAAE;AAAE,CAAC;AACnE;AACO,MAAMC,OAAc,GAAAxB,OAAA,CAAAwB,OAAA,GAAG;EAAEF,MAAM,EAAEA,CAAA,kBAAM,IAAA5B,WAAA,CAAAqB,GAAA,EAACb,IAAI;IAACqB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACb,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AACnF,MAAMc,YAAmB,GAAA1B,OAAA,CAAA0B,YAAA,GAAG;EACjCJ,MAAM,EAAEA,CAAA,kBAAM,IAAA5B,WAAA,CAAAqB,GAAA,EAACb,IAAI;IAACqB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,cAAc;IAACF,SAAS,EAAE,EAAG;IAACb,GAAG,EAAE;EAAE,CAAE;AAC7E,CAAC;AACM,MAAMgB,KAAY,GAAA5B,OAAA,CAAA4B,KAAA,GAAG;EAAEN,MAAM,EAAEA,CAAA,kBAAM,IAAA5B,WAAA,CAAAqB,GAAA,EAACb,IAAI;IAACqB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,OAAO;IAACF,SAAS,EAAE,EAAG;IAACb,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AAC9F,MAAMiB,QAAe,GAAA7B,OAAA,CAAA6B,QAAA,GAAG;EAAEP,MAAM,EAAEA,CAAA,kBAAM,IAAA5B,WAAA,CAAAqB,GAAA,EAACb,IAAI;IAACqB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACb,GAAG,EAAE,CAAE;IAACkB,QAAQ;EAAA,CAAE;AAAE,CAAC","ignoreList":[]}

package/lib/commonjs/components/CodeField/CodeField.test.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("@testing-library/react-native");
+var _CodeField = require("./CodeField.js");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function renderWithTheme(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+describe('CodeField', () => {
+  it('renders one cell per length', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "",
+      onChangeText: () => {},
+      length: 4
+    }));
+    expect(_reactNative.screen.getAllByTestId('code-field-cell')).toHaveLength(4);
+  });
+  it('numeric mode keeps digits only', () => {
+    const onChangeText = jest.fn();
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "",
+      onChangeText: onChangeText,
+      mode: "numeric",
+      length: 4
+    }));
+    _reactNative.fireEvent.changeText(_reactNative.screen.getByLabelText('Code'), '12ab34');
+    expect(onChangeText).toHaveBeenCalledWith('1234');
+  });
+  it('alphanumeric mode upper-cases and strips symbols', () => {
+    const onChangeText = jest.fn();
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "",
+      onChangeText: onChangeText,
+      mode: "alphanumeric",
+      length: 6
+    }));
+    _reactNative.fireEvent.changeText(_reactNative.screen.getByLabelText('Code'), 'a1-b2!');
+    expect(onChangeText).toHaveBeenCalledWith('A1B2');
+  });
+  it('alpha mode strips digits', () => {
+    const onChangeText = jest.fn();
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "",
+      onChangeText: onChangeText,
+      mode: "alpha",
+      length: 4
+    }));
+    _reactNative.fireEvent.changeText(_reactNative.screen.getByLabelText('Code'), 'a1b2c3');
+    expect(onChangeText).toHaveBeenCalledWith('ABC');
+  });
+  it('caps a pasted value to length and fires onComplete', () => {
+    const onChangeText = jest.fn();
+    const onComplete = jest.fn();
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "",
+      onChangeText: onChangeText,
+      onComplete: onComplete,
+      length: 4
+    }));
+    _reactNative.fireEvent.changeText(_reactNative.screen.getByLabelText('Code'), '123456');
+    expect(onChangeText).toHaveBeenCalledWith('1234');
+    expect(onComplete).toHaveBeenCalledWith('1234');
+  });
+  it('shows entered characters in the cells', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeField.CodeField, {
+      value: "12",
+      onChangeText: () => {},
+      length: 4
+    }));
+    expect(_reactNative.screen.getByText('1')).toBeTruthy();
+    expect(_reactNative.screen.getByText('2')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=CodeField.test.js.map

package/lib/commonjs/components/CodeField/CodeField.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_CodeField","_index","_jsxRuntime","e","__esModule","default","renderWithTheme","ui","render","jsx","ThemeProvider","children","describe","it","CodeField","value","onChangeText","length","expect","screen","getAllByTestId","toHaveLength","jest","fn","mode","fireEvent","changeText","getByLabelText","toHaveBeenCalledWith","onComplete","getByText","toBeTruthy"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/CodeField/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CodeField", {
+  enumerable: true,
+  get: function () {
+    return _CodeField.CodeField;
+  }
+});
+var _CodeField = require("./CodeField.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/CodeField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_CodeField","require"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/components/Spinner/Spinner.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spinner = Spinner;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _index = require("../../theme/index.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Diameters per size — `xl` matches the Figma spinner (164, 12px ring). */
+const SIZES = {
+  xs: 24,
+  sm: 40,
+  md: 64,
+  lg: 96,
+  xl: 164
+};
+/**
+ * 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).
+ */
+function Spinner({
+  size = 'md',
+  color,
+  thickness,
+  label,
+  labelPosition = 'bottom',
+  gap = 8,
+  labelSize = 16,
+  labelColor,
+  duration = 900,
+  style,
+  accessibilityLabel
+}) {
+  const theme = (0, _index.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 = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    rotation.setValue(0);
+    const loop = _reactNative.Animated.loop(_reactNative.Animated.timing(rotation, {
+      toValue: 1,
+      duration,
+      easing: _reactNative.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: _reactNative.Platform.OS !== 'web'
+    }));
+    loop.start();
+    return () => loop.stop();
+  }, [rotation, duration]);
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const labelStyle = {
+    fontSize: labelSize,
+    lineHeight: Math.round(labelSize * 1.4),
+    ...(labelPosition === 'top' ? {} : null)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [{
+      alignItems: 'center',
+      gap,
+      flexDirection: labelPosition === 'top' ? 'column-reverse' : 'column'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        width: diameter,
+        height: diameter,
+        transform: [{
+          rotate: spin
+        }]
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+        width: diameter,
+        height: diameter,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: diameter / 2,
+          cy: diameter / 2,
+          r: radius,
+          stroke: arcColor,
+          strokeWidth: stroke,
+          fill: "none",
+          opacity: 0.2
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: diameter / 2,
+          cy: diameter / 2,
+          r: radius,
+          stroke: arcColor,
+          strokeWidth: stroke,
+          fill: "none",
+          strokeLinecap: "round",
+          strokeDasharray: [circumference * 0.7, circumference * 0.3]
+        })]
+      })
+    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      color: labelColor ?? 'secondary',
+      style: labelStyle,
+      children: label
+    }) : null]
+  });
+}
+//# sourceMappingURL=Spinner.js.map

package/lib/commonjs/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_index","_Text","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZES","xs","sm","md","lg","xl","Spinner","size","color","thickness","label","labelPosition","gap","labelSize","labelColor","duration","style","accessibilityLabel","theme","useTheme","diameter","stroke","Math","max","round","arcColor","colors","action","primary","radius","circumference","PI","rotation","useRef","Animated","Value","current","useEffect","setValue","loop","timing","toValue","easing","Easing","linear","useNativeDriver","Platform","OS","start","stop","spin","interpolate","inputRange","outputRange","labelStyle","fontSize","lineHeight","jsxs","View","accessibilityRole","alignItems","flexDirection","children","jsx","width","height","transform","rotate","Circle","cx","cy","strokeWidth","fill","opacity","strokeLinecap","strokeDasharray","Text"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Spinner/Spinner.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.XL = exports.WithLabel = exports.Sizes = exports.LabelTop = exports.Default = exports.CustomColor = void 0;
+var _reactNative = require("react-native");
+var _Spinner = require("./Spinner.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/Spinner',
+  component: _Spinner.Spinner,
+  args: {
+    size: 'md'
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['xs', 'sm', 'md', 'lg', 'xl']
+    },
+    labelPosition: {
+      control: 'inline-radio',
+      options: ['top', 'bottom']
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {};
+const WithLabel = exports.WithLabel = {
+  args: {
+    label: 'Wait a moment please...'
+  }
+};
+const LabelTop = exports.LabelTop = {
+  args: {
+    label: 'Loading',
+    labelPosition: 'top'
+  }
+};
+const XL = exports.XL = {
+  args: {
+    size: 'xl',
+    label: 'Wait a moment please...'
+  }
+};
+const CustomColor = exports.CustomColor = {
+  args: {
+    size: 'lg',
+    color: '#FF003A'
+  }
+};
+const Sizes = exports.Sizes = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 24
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "xs"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "sm"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "md"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "lg"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "xl"
+    })]
+  })
+};
+//# sourceMappingURL=Spinner.stories.js.map

package/lib/commonjs/components/Spinner/Spinner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Spinner","_jsxRuntime","meta","title","component","Spinner","args","size","argTypes","control","options","labelPosition","_default","exports","default","Default","WithLabel","label","LabelTop","XL","CustomColor","color","Sizes","render","jsxs","View","style","flexDirection","alignItems","gap","children","jsx"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.stories.tsx"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAoC,IAAAE,WAAA,GAAAF,OAAA;AAEpC,MAAMG,IAAI,GAAG;EACXC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEC,gBAAO;EAClBC,IAAI,EAAE;IAAEC,IAAI,EAAE;EAAK,CAAC;EACpBC,QAAQ,EAAE;IACRD,IAAI,EAAE;MAAEE,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAAE,CAAC;IAC1EC,aAAa,EAAE;MAAEF,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ;IAAE;EACvE;AACF,CAAgC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAElBZ,IAAI;AAGZ,MAAMa,OAAc,GAAAF,OAAA,CAAAE,OAAA,GAAG,CAAC,CAAC;AACzB,MAAMC,SAAgB,GAAAH,OAAA,CAAAG,SAAA,GAAG;EAAEV,IAAI,EAAE;IAAEW,KAAK,EAAE;EAA0B;AAAE,CAAC;AACvE,MAAMC,QAAe,GAAAL,OAAA,CAAAK,QAAA,GAAG;EAAEZ,IAAI,EAAE;IAAEW,KAAK,EAAE,SAAS;IAAEN,aAAa,EAAE;EAAM;AAAE,CAAC;AAC5E,MAAMQ,EAAS,GAAAN,OAAA,CAAAM,EAAA,GAAG;EAAEb,IAAI,EAAE;IAAEC,IAAI,EAAE,IAAI;IAAEU,KAAK,EAAE;EAA0B;AAAE,CAAC;AAC5E,MAAMG,WAAkB,GAAAP,OAAA,CAAAO,WAAA,GAAG;EAAEd,IAAI,EAAE;IAAEC,IAAI,EAAE,IAAI;IAAEc,KAAK,EAAE;EAAU;AAAE,CAAC;AAErE,MAAMC,KAAY,GAAAT,OAAA,CAAAS,KAAA,GAAG;EAC1BC,MAAM,EAAEA,CAAA,kBACN,IAAAtB,WAAA,CAAAuB,IAAA,EAAC1B,YAAA,CAAA2B,IAAI;IAACC,KAAK,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAG,CAAE;IAAAC,QAAA,gBACnE,IAAA7B,WAAA,CAAA8B,GAAA,EAAC/B,QAAA,CAAAK,OAAO;MAACE,IAAI,EAAC;IAAI,CAAE,CAAC,eACrB,IAAAN,WAAA,CAAA8B,GAAA,EAAC/B,QAAA,CAAAK,OAAO;MAACE,IAAI,EAAC;IAAI,CAAE,CAAC,eACrB,IAAAN,WAAA,CAAA8B,GAAA,EAAC/B,QAAA,CAAAK,OAAO;MAACE,IAAI,EAAC;IAAI,CAAE,CAAC,eACrB,IAAAN,WAAA,CAAA8B,GAAA,EAAC/B,QAAA,CAAAK,OAAO;MAACE,IAAI,EAAC;IAAI,CAAE,CAAC,eACrB,IAAAN,WAAA,CAAA8B,GAAA,EAAC/B,QAAA,CAAAK,OAAO;MAACE,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CACjB;AAEV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("@testing-library/react-native");
+var _Spinner = require("./Spinner.js");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function renderWithTheme(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+describe('Spinner', () => {
+  it('renders with a progressbar role', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      accessibilityLabel: "Loading"
+    }));
+    expect(_reactNative.screen.getByLabelText('Loading')).toBeTruthy();
+  });
+  it('renders its label', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      label: "Wait a moment please..."
+    }));
+    expect(_reactNative.screen.getByText('Wait a moment please...')).toBeTruthy();
+  });
+  it('renders without a label when none is given', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      accessibilityLabel: "Loading"
+    }));
+    expect(_reactNative.screen.queryByText('Loading')).toBeNull();
+  });
+});
+//# sourceMappingURL=Spinner.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Spinner","_index","_jsxRuntime","e","__esModule","default","renderWithTheme","ui","render","jsx","ThemeProvider","children","describe","it","Spinner","accessibilityLabel","expect","screen","getByLabelText","toBeTruthy","label","getByText","queryByText","toBeNull"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.test.tsx"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA4C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5C,SAASG,eAAeA,CAACC,EAAsB,EAAE;EAC/C,OAAO,IAAAC,mBAAM,eAAC,IAAAN,WAAA,CAAAO,GAAA,EAACR,MAAA,CAAAS,aAAa;IAAAC,QAAA,EAAEJ;EAAE,CAAgB,CAAC,CAAC;AACpD;AAEAK,QAAQ,CAAC,SAAS,EAAE,MAAM;EACxBC,EAAE,CAAC,iCAAiC,EAAE,MAAM;IAC1CP,eAAe,cAAC,IAAAJ,WAAA,CAAAO,GAAA,EAACT,QAAA,CAAAc,OAAO;MAACC,kBAAkB,EAAC;IAAS,CAAE,CAAC,CAAC;IACzDC,MAAM,CAACC,mBAAM,CAACC,cAAc,CAAC,SAAS,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EACvD,CAAC,CAAC;EAEFN,EAAE,CAAC,mBAAmB,EAAE,MAAM;IAC5BP,eAAe,cAAC,IAAAJ,WAAA,CAAAO,GAAA,EAACT,QAAA,CAAAc,OAAO;MAACM,KAAK,EAAC;IAAyB,CAAE,CAAC,CAAC;IAC5DJ,MAAM,CAACC,mBAAM,CAACI,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAACF,UAAU,CAAC,CAAC;EAClE,CAAC,CAAC;EAEFN,EAAE,CAAC,4CAA4C,EAAE,MAAM;IACrDP,eAAe,cAAC,IAAAJ,WAAA,CAAAO,GAAA,EAACT,QAAA,CAAAc,OAAO;MAACC,kBAAkB,EAAC;IAAS,CAAE,CAAC,CAAC;IACzDC,MAAM,CAACC,mBAAM,CAACK,WAAW,CAAC,SAAS,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EAClD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.Spinner;
+  }
+});
+var _Spinner = require("./Spinner.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Spinner","require"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA","ignoreList":[]}