Add ESM/CommonJS import interop to UI kit

packages/mobile-app/app/(tabs)/ui.tsx

@@ -1,10 +1,11 @@
 import { useColorScheme, View, Text } from "react-native";
-import { Button } from "@ironfish/tackle-box";
+import { Button, Box } from "@ironfish/tackle-box";
 import { useState } from "react";
 
 export default function UiKit() {
   const scheme = useColorScheme();
   const [count, setCount] = useState(0);
+
   return (
     <View
       style={{
@@ -15,7 +16,9 @@ export default function UiKit() {
     >
       <Text>Count: {count}</Text>
       <Button title="Press me" onClick={() => setCount(count + 1)} />
-      <Button disabled title="Press me" onClick={() => setCount(count + 1)} />
+      <Box>
+        <Button disabled title="Press me" onClick={() => setCount(count + 1)} />
+      </Box>
     </View>
   );
 }

packages/tackle-box/lib/components/Box/Box.tsx

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { html } from "react-strict-dom";
+
+type Props = {
+  children?: ReactElement;
+};
+
+export function Box({ children }: Props) {
+  return (
+    <html.div>
+      <html.span>{children}</html.span>
+    </html.div>
+  );
+}

packages/tackle-box/lib/index.ts

@@ -1 +1,2 @@
 export { Button } from "./components/Button/Button";
+export { Box } from "./components/Box/Box";

packages/tackle-box/lib/vars/sizing.stylex.ts

@@ -0,0 +1,103 @@
+import { css } from "react-strict-dom";
+
+export const sizing = css.defineVars({
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  13: 52,
+  14: 56,
+  15: 60,
+  16: 64,
+  17: 68,
+  18: 72,
+  19: 76,
+  20: 80,
+  21: 84,
+  22: 88,
+  23: 92,
+  24: 96,
+  25: 100,
+  26: 104,
+  27: 108,
+  28: 112,
+  29: 116,
+  30: 120,
+  31: 124,
+  32: 128,
+  33: 132,
+  34: 136,
+  35: 140,
+  36: 144,
+  37: 148,
+  38: 152,
+  39: 156,
+  40: 160,
+  41: 164,
+  42: 168,
+  43: 172,
+  44: 176,
+  45: 180,
+  46: 184,
+  47: 188,
+  48: 192,
+  49: 196,
+  50: 200,
+  51: 204,
+  52: 208,
+  53: 212,
+  54: 216,
+  55: 220,
+  56: 224,
+  57: 228,
+  58: 232,
+  59: 236,
+  60: 240,
+  61: 244,
+  62: 248,
+  63: 252,
+  64: 256,
+  65: 260,
+  66: 264,
+  67: 268,
+  68: 272,
+  69: 276,
+  70: 280,
+  71: 284,
+  72: 288,
+  73: 292,
+  74: 296,
+  75: 300,
+  76: 304,
+  77: 308,
+  78: 312,
+  79: 316,
+  80: 320,
+  81: 324,
+  82: 328,
+  83: 332,
+  84: 336,
+  85: 340,
+  86: 344,
+  87: 348,
+  88: 352,
+  89: 356,
+  90: 360,
+  91: 364,
+  92: 368,
+  93: 372,
+  94: 376,
+  95: 380,
+  96: 384,
+  97: 388,
+  98: 392,
+  99: 396,
+});

packages/tackle-box/package.json

@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@stylexjs/babel-plugin": "^0.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

packages/tackle-box/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./lib/index.ts","./lib/components/button/button.tsx"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./lib/index.ts","./lib/components/box/box.tsx","./lib/components/button/button.tsx","./lib/components/stack/stack.tsx","./lib/vars/sizing.stylex.ts"],"version":"5.6.3"}

packages/tackle-box/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, PluginOption } from "vite";
 import { resolve } from "path";
 import react from "@vitejs/plugin-react";
 import dts from "vite-plugin-dts";
+// import commonjs from "@rollup/plugin-commonjs";
 // import reactStrictBabelPreset from "react-strict-dom/babel-preset";
 
 function getPlatform(mode: string) {
@@ -48,9 +49,7 @@ export default defineConfig(({ mode }) => {
           globals: {
             react: "react",
           },
-          generatedCode: {
-            symbols: false,
-          },
+          interop: "auto",
         },
       },
     },