@bacon-pos/ui 0.1.0

package/lib/commonjs/components/Icon/Icon.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = Icon;
+var _reactNativeSvg = require("react-native-svg");
+var _index = require("../../theme/index.js");
+var _iconsGenerated = require("./icons.generated.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders a design-system icon as a themeable SVG. The source SVG is rendered
+ * faithfully via react-native-svg's <SvgXml> (stroke icons stay stroked,
+ * compound fills keep their holes) and tinted through `currentColor`.
+ */
+function Icon({
+  name,
+  size = 24,
+  color = 'primary'
+}) {
+  const theme = (0, _index.useTheme)();
+  const xml = _iconsGenerated.icons[name];
+  if (!xml) return null;
+  const tint = color in theme.colors.text ? theme.colors.text[color] : color;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgXml, {
+    xml: xml,
+    width: size,
+    height: size,
+    color: tint
+  });
+}
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSvg","require","_index","_iconsGenerated","_jsxRuntime","Icon","name","size","color","theme","useTheme","xml","icons","tint","colors","text","jsx","SvgXml","width","height"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Icon/Icon.tsx"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAAyD,IAAAG,WAAA,GAAAH,OAAA;AAazD;AACA;AACA;AACA;AACA;AACO,SAASI,IAAIA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAG,EAAE;EAAEC,KAAK,GAAG;AAAqB,CAAC,EAAE;EACtE,MAAMC,KAAK,GAAG,IAAAC,eAAQ,EAAC,CAAC;EACxB,MAAMC,GAAG,GAAGC,qBAAK,CAACN,IAAI,CAAuB;EAC7C,IAAI,CAACK,GAAG,EAAE,OAAO,IAAI;EAErB,MAAME,IAAI,GACRL,KAAK,IAAIC,KAAK,CAACK,MAAM,CAACC,IAAI,GACtBN,KAAK,CAACK,MAAM,CAACC,IAAI,CAACP,KAAK,CAAmB,GACzCA,KAAgB;EAEvB,oBAAO,IAAAJ,WAAA,CAAAY,GAAA,EAAChB,eAAA,CAAAiB,MAAM;IAACN,GAAG,EAAEA,GAAI;IAACO,KAAK,EAAEX,IAAK;IAACY,MAAM,EAAEZ,IAAK;IAACC,KAAK,EAAEK;EAAK,CAAE,CAAC;AACrE","ignoreList":[]}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = exports.Gallery = exports.Colored = void 0;
+var _reactNative = require("react-native");
+var _Icon = require("./Icon.js");
+var _iconsGenerated = require("./icons.generated.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/Icon',
+  component: _Icon.Icon,
+  args: {
+    name: 'search',
+    size: 24,
+    color: 'primary'
+  },
+  argTypes: {
+    name: {
+      control: 'select',
+      options: Object.keys(_iconsGenerated.icons)
+    },
+    size: {
+      control: {
+        type: 'range',
+        min: 12,
+        max: 64,
+        step: 2
+      }
+    },
+    color: {
+      control: 'text'
+    }
+  }
+};
+var _default = exports.default = meta;
+const Playground = exports.Playground = {};
+const Gallery = exports.Gallery = {
+  args: {
+    size: 56
+  },
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 24,
+      maxWidth: 520
+    },
+    children: Object.keys(_iconsGenerated.icons).map(name => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        alignItems: 'center',
+        width: 96,
+        gap: 8
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: name,
+        size: 28
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "caption",
+        color: "secondary",
+        align: "center",
+        children: name
+      })]
+    }, name))
+  })
+};
+const Colored = exports.Colored = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      gap: 24
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "check",
+      size: 32,
+      color: "#008C57"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "close",
+      size: 32,
+      color: "#D0001F"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "eye",
+      size: 32,
+      color: "secondary"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "trash",
+      size: 32,
+      color: "tertiary"
+    })]
+  })
+};
+//# sourceMappingURL=Icon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Icon","_iconsGenerated","_Text","_jsxRuntime","meta","title","component","Icon","args","name","size","color","argTypes","control","options","Object","keys","icons","type","min","max","step","_default","exports","default","Playground","Gallery","render","jsx","View","style","flexDirection","flexWrap","gap","maxWidth","children","map","jsxs","alignItems","width","Text","variant","align","Colored"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Icon/Icon.stories.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("@testing-library/react-native");
+var _Icon = require("./Icon.js");
+var _iconsGenerated = require("./icons.generated.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('Icon', () => {
+  it('renders a known icon without crashing', () => {
+    const {
+      toJSON
+    } = renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "search"
+    }));
+    expect(toJSON()).toBeTruthy();
+  });
+  it('has generated at least the core icon set', () => {
+    for (const name of ['search', 'close', 'check', 'chevron-down', 'plus']) {
+      expect(_iconsGenerated.icons).toHaveProperty(name);
+    }
+  });
+  it('every generated icon is a normalized, tintable SVG string', () => {
+    for (const xml of Object.values(_iconsGenerated.icons)) {
+      expect(typeof xml).toBe('string');
+      expect(xml).toContain('<svg');
+      // no hardcoded hex colors survive — everything is tintable via currentColor
+      expect(/(fill|stroke)="#/.test(xml)).toBe(false);
+    }
+  });
+});
+//# sourceMappingURL=Icon.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Icon","_iconsGenerated","_index","_jsxRuntime","e","__esModule","default","renderWithTheme","ui","render","jsx","ThemeProvider","children","describe","it","toJSON","Icon","name","expect","toBeTruthy","icons","toHaveProperty","xml","Object","values","toBe","toContain","test"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Icon/Icon.test.tsx"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA4C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,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,MAAM,EAAE,MAAM;EACrBC,EAAE,CAAC,uCAAuC,EAAE,MAAM;IAChD,MAAM;MAAEC;IAAO,CAAC,GAAGR,eAAe,cAAC,IAAAJ,WAAA,CAAAO,GAAA,EAACV,KAAA,CAAAgB,IAAI;MAACC,IAAI,EAAC;IAAQ,CAAE,CAAC,CAAC;IAC1DC,MAAM,CAACH,MAAM,CAAC,CAAC,CAAC,CAACI,UAAU,CAAC,CAAC;EAC/B,CAAC,CAAC;EAEFL,EAAE,CAAC,0CAA0C,EAAE,MAAM;IACnD,KAAK,MAAMG,IAAI,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE;MACvEC,MAAM,CAACE,qBAAK,CAAC,CAACC,cAAc,CAACJ,IAAI,CAAC;IACpC;EACF,CAAC,CAAC;EAEFH,EAAE,CAAC,2DAA2D,EAAE,MAAM;IACpE,KAAK,MAAMQ,GAAG,IAAIC,MAAM,CAACC,MAAM,CAACJ,qBAAK,CAAC,EAAE;MACtCF,MAAM,CAAC,OAAOI,GAAG,CAAC,CAACG,IAAI,CAAC,QAAQ,CAAC;MACjCP,MAAM,CAACI,GAAG,CAAC,CAACI,SAAS,CAAC,MAAM,CAAC;MAC7B;MACAR,MAAM,CAAC,kBAAkB,CAACS,IAAI,CAACL,GAAG,CAAC,CAAC,CAACG,IAAI,CAAC,KAAK,CAAC;IAClD;EACF,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}