setting up stitches js

packages/react/dist/index.d.ts

@@ -1 +1,3 @@
+declare function App(): JSX.Element;
 
+export { App };

packages/react/dist/index.js

@@ -1,4 +1,28 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  App: () => App
+});
+module.exports = __toCommonJS(src_exports);
 
 // ../tokens/dist/index.mjs
 var colors = {
@@ -18,5 +42,12 @@ var colors = {
   ignite900: "#00291D"
 };
 
-// src/index.ts
-console.log({ colors });
+// src/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function App() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: { color: colors.ignite300 }, children: "Design System" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  App
+});

packages/react/dist/index.mjs

@@ -16,5 +16,11 @@ var colors = {
   ignite900: "#00291D"
 };
 
-// src/index.ts
-console.log({ colors });
+// src/index.tsx
+import { jsx } from "react/jsx-runtime";
+function App() {
+  return /* @__PURE__ */ jsx("h1", { style: { color: colors.ignite300 }, children: "Design System" });
+}
+export {
+  App
+};

packages/react/package.json

@@ -6,18 +6,24 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch",
     "lint": "eslint src/**/*.ts* --fix"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@ignite-ui/eslint-config": "*",
     "@ignite-ui/tokens": "*",
     "@ignite-ui/ts-config": "*",
-    "@ignite-ui/eslint-config": "*",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "react": "^18.2.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.3"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8"
   }
 }

packages/react/src/index.tsx

@@ -0,0 +1,14 @@
+import { colors } from '@ignite-ui/tokens'
+import { styled } from './styles'
+
+const Button = styled('button', {
+  backgroundColor: '$ignite300',
+  fontFamily: '$default',
+  fontWeight: '$bold',
+  borderRadius: '$md',
+  height: '$10',
+})
+
+export function App() {
+  return <Button style={{ color: colors.ignite300 }}>Design System</Button>
+}

packages/react/src/styles/index.ts

@@ -0,0 +1,32 @@
+import {
+  colors,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  space,
+} from '@ignite-ui/tokens'
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  theme,
+  createTheme,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  config,
+} = createStitches({
+  themeMap: { ...defaultThemeMap, width: 'space', height: 'space' },
+  theme: {
+    colors,
+    fonts,
+    fontWeights,
+    fontSizes,
+    lineHeights,
+    radii,
+    space,
+  },
+})