passportxyz · lucianHymer · Feb 6, 2025 · Jan 27, 2025 · Jan 28, 2025 · Jan 29, 2025
diff --git a/example/index.html b/example/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
   "private": false,
+  "sideEffects": false,
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -32,9 +33,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "npm run build:esm && npm run build:cjs && npm run build:types",
-    "build:esm": "tsc --module ESNext --outDir dist/esm && postcss 'src/**/*.css' -d dist/esm/ --base src",
-    "build:cjs": "tsc --module CommonJS --outDir dist/cjs && postcss 'src/**/*.css' -d dist/cjs/ --base src",
+    "build": "npm run build:bundle && npm run build:types",
+    "build:bundle": "webpack",
     "build:types": "tsc --declaration --declarationDir dist --emitDeclarationOnly",
     "dev": "cd example && yarn dev",
     "watch:css": "postcss 'src/**/*.css' -d dist/esm/ --base src --watch",
@@ -45,13 +45,28 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.7",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
+    "@babel/runtime-corejs3": "^7.26.7",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "core-js": "3",
+    "css-loader": "^7.1.2",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "typescript": "^5.6.3"
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.11",
+    "typescript": "^5.6.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.11",

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
@@ -1,5 +1,3 @@
-@import "../theme.css";
-
 .button {
   background-color: rgba(var(--color-primary-c6dbf459), 1);
   color: rgba(var(--color-background-c6dbf459), 1);

diff --git a/src/components/Header.module.css b/src/components/Header.module.css
@@ -36,6 +36,10 @@
   cursor: pointer;
 }
 
+.containerNoCollapseButton {
+  cursor: default;
+}
+
 .bodyExpanded {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -67,7 +67,11 @@ export const Header = ({
     <button
       className={`${styles.container} ${
         bodyIsOpen || !collapsible ? styles.bodyExpanded : styles.bodyCollapsed
-      } ${collapsible ? styles.containerCollapseButton : ""}`}
+      } ${
+        collapsible
+          ? styles.containerCollapseButton
+          : styles.containerNoCollapseButton
+      }`}
       onClick={() => {
         if (collapsible) {
           setBodyIsOpen((prev) => !prev);

diff --git a/src/components/ScrollableDiv.module.css b/src/components/ScrollableDiv.module.css
@@ -1,6 +1,9 @@
 .scrollableDiv {
   display: grid;
-  place-items: center;
+}
+
+.scrollableDiv > * {
+  place-self: center;
 }
 
 .scrollableDiv:hover .scrollIndicator {

diff --git a/src/components/TextButton.module.css b/src/components/TextButton.module.css
@@ -1,5 +1,3 @@
-@import "../theme.css";
-
 .textButton {
   padding: 4px 8px;
   cursor: pointer;

diff --git a/src/index.tsx → src/index.ts b/src/index.tsx → src/index.ts
@@ -3,6 +3,7 @@ export type { PassportScoreWidgetProps } from "./widgets/PassportScoreWidget";
 export type {
   GenericPassportWidgetProps,
   PassportWidgetTheme,
-  CollapseMode
+  CollapseMode,
 } from "./widgets/Widget";
+export { DarkTheme, LightTheme } from "./widgets/Widget";
 export { usePassportScore } from "./hooks/usePassportScore";
diff --git a/src/widgets/PassportScoreWidget.module.css b/src/widgets/PassportScoreWidget.module.css
@@ -1,5 +1,3 @@
-@import "../theme.css";
-
 .container {
   /* Reset styles */
   all: initial;
@@ -11,13 +9,6 @@
   color: rgba(var(--color-primary-c6dbf459), 1);
   border-radius: var(--widget-radius-c6dbf459);
 
-  /* Will be 320 x 300 unless screen
-   * is too narrow, in which case it
-   * will get narrower (match screen
-   * width) and taller */
-  width: 100%;
-  max-width: 320px;
-
   position: relative;
 }
 
@@ -50,13 +41,3 @@
 .visible {
   transition: opacity var(--transition-speed-c6dbf459) ease;
 }
-
-.centerChildren {
-  display: grid;
-  place-items: center;
-}
-
-.centerChildren > * {
-  grid-row: 1;
-  grid-column: 1;
-}
diff --git a/src/theme.css → src/widgets/Widget.module.css b/src/theme.css → src/widgets/Widget.module.css
@@ -12,7 +12,7 @@
  * variables to avoid conflicts
  */
 
-:root {
+.widget {
   --color-primary-c6dbf459: 255, 255, 255;
   --color-secondary-c6dbf459: 109, 109, 109;
   --color-background-c6dbf459: 0, 0, 0;
@@ -27,4 +27,11 @@
   --font-family-heading-c6dbf459: "Poppins", sans-serif;
   --font-family-alt-c6dbf459: "DM Mono", sans-serif;
   --position-overlay-z-index-c6dbf459: 10;
+
+  /* Width will be 320 unless screen
+   * is too narrow, in which case it
+   * will get narrower (match screen
+   * width) and taller */
+  width: 100%;
+  max-width: 320px;
 }
diff --git a/src/widgets/Widget.tsx b/src/widgets/Widget.tsx
@@ -1,12 +1,14 @@
+import styles from "./Widget.module.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { RefObject, useEffect, useRef } from "react";
 
 export type CollapseMode = "shift" | "overlay" | "off";
 
 export type GenericPassportWidgetProps = {
   children?: React.ReactNode;
   theme?: PassportWidgetTheme;
   collapseMode?: CollapseMode;
+  className?: string;
 };
 
 export type PassportWidgetTheme = {
@@ -42,15 +44,67 @@ export type PassportWidgetTheme = {
   };
 };
 
-export const Widget = ({ children, theme }: GenericPassportWidgetProps) => {
+export const DarkTheme: PassportWidgetTheme = {
+  colors: {
+    primary: "255, 255, 255",
+    secondary: "109, 109, 109",
+    background: "0, 0, 0",
+    success: "164, 255, 169",
+    failure: "203, 203, 203",
+  },
+  padding: {
+    widget: {
+      x: "20px",
+      y: "12px",
+    },
+  },
+  radius: {
+    widget: "16px",
+    button: "8px",
+  },
+  transition: {
+    speed: "50ms",
+  },
+  font: {
+    family: {
+      body: '"Poppins", sans-serif',
+      heading: '"Poppins", sans-serif',
+      alt: '"DM Mono", sans-serif',
+    },
+  },
+  position: {
+    overlayZIndex: "10",
+  },
+};
+
+export const LightTheme: PassportWidgetTheme = {
+  ...DarkTheme,
+  colors: {
+    primary: "55, 55, 55",
+    secondary: "201, 201, 201",
+    background: "255, 255, 255",
+    success: "36, 212, 83",
+    failure: "55, 55, 55",
+  },
+};
+
+export const Widget = ({
+  children,
+  theme,
+  className,
+}: GenericPassportWidgetProps) => {
+  const widgetRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    setTheme(theme);
+    setTheme({ theme, ref: widgetRef });
   }, [theme]);
 
   return (
-    <QueryClientProvider client={widgetQueryClient}>
-      {children}
-    </QueryClientProvider>
+    <div className={`${styles.widget} ${className}`} ref={widgetRef}>
+      <QueryClientProvider client={widgetQueryClient}>
+        {children}
+      </QueryClientProvider>
+    </div>
   );
 };
 
@@ -73,15 +127,27 @@ export const widgetQueryClient = new QueryClient({
 
 const CSS_VARIABLE_POSTFIX = "-c6dbf459";
 
-const setCssProperty = (name: string, value?: string) => {
+const setCssProperty = ({
+  ref,
+  name,
+  value,
+}: {
+  ref: RefObject<HTMLElement>;
+  name: string;
+  value?: string;
+}) => {
   value &&
-    document.documentElement.style.setProperty(
-      `--${name}${CSS_VARIABLE_POSTFIX}`,
-      value
-    );
+    ref.current &&
+    ref.current.style.setProperty(`--${name}${CSS_VARIABLE_POSTFIX}`, value);
 };
 
-const setTheme = (theme?: PassportWidgetTheme) => {
+const setTheme = ({
+  theme,
+  ref,
+}: {
+  theme?: PassportWidgetTheme;
+  ref: RefObject<HTMLElement>;
+}) => {
   if (!theme) return;
 
   const { colors, padding, radius, transition, font, position } = theme;
@@ -103,5 +169,5 @@ const setTheme = (theme?: PassportWidgetTheme) => {
     ["overlay-z-index", position?.overlayZIndex],
   ];
 
-  propertyMap.forEach(([name, value]) => setCssProperty(name, value));
+  propertyMap.forEach(([name, value]) => setCssProperty({ ref, name, value }));
 };