chore: do a bunch of updates

app/package.json

@@ -6,14 +6,14 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "@md3-ui/core": "^0.2.1",
-    "expo": "^49.0.9",
+    "expo": "^49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-iphone-x-helper": "^1.3.1",
-    "react-native-safe-area-context": "4.5.0",
-    "react-router-native": "^6.15.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-router-native": "^6.16.0",
     "uuid": "^3.4.0"
   },
   "devDependencies": {

clean-package.config.json

@@ -0,0 +1,16 @@
+{
+  "replace": {
+    "main": "dist/commonjs/index.js",
+    "module": "dist/module/index.js",
+    "react-native": "src/index.ts",
+    "types": "dist/typescript/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/typescript/index.d.ts",
+        "import": "./dist/module/index.js",
+        "require": "./dist/commonjs/index.js"
+      },
+      "./package.json": "./package.json"
+    }
+  }
+}

docs/package.json

@@ -15,26 +15,26 @@
     "@md3-ui/utils": "^0.2.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.19",
+    "@next/mdx": "^13.5.4",
     "@preconstruct/next": "^4.0.0",
     "copy-to-clipboard": "^3.3.3",
-    "next": "^13.4.19",
+    "next": "^13.5.4",
     "next-seo": "^6.1.0",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-live": "^4.1.3",
-    "react-native": "0.72.4",
-    "react-native-safe-area-context": "4.5.0",
+    "react-live": "^4.1.5",
+    "react-native": "0.72.5",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-svg": "13.9.0",
-    "react-native-web": "^0.19.8",
+    "react-native-web": "^0.19.9",
     "remark-emoji": "^4.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-slug": "^7.0.1",
     "webpack": "^5.88.2"
   },
   "devDependencies": {
-    "eslint": "^8.49.0",
-    "eslint-config-next": "^13.4.19"
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^13.5.4"
   }
 }

jest.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('jest').Config} */
+const config = {
   testEnvironment: "jsdom",
   collectCoverageFrom: ["packages/**/*.{ts,tsx}"],
   moduleFileExtensions: [
@@ -15,7 +16,18 @@ module.exports = {
     "^react-native$": "react-native-web",
   },
   transform: {
-    "^.+\\.(ts|tsx|js|jsx)?$": "babel-jest",
+    "^.+\\.(ts|tsx|js|jsx)?$": [
+      "@swc/jest",
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+        },
+      },
+    ],
   },
   transformIgnorePatterns: [
     "node_modules/(?!(jest-)?react-native(-.*)?|@react-native(-community)?/)",
@@ -26,3 +38,5 @@ module.exports = {
     "jest-watch-typeahead/testname",
   ],
 }
+
+module.exports = config

jest.setup.js

@@ -1,3 +1,5 @@
+import "@testing-library/jest-dom"
+
 if (typeof window.matchMedia !== "function") {
   Object.defineProperty(window, "matchMedia", {
     enumerable: true,

package.json

@@ -9,75 +9,78 @@
     "docs"
   ],
   "dependencies": {
-    "@babel/core": "^7.22.15",
+    "@babel/core": "^7.23.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@manypkg/cli": "^0.21.0",
+    "@nicolo-ribaudo/semver-v6": "^6.3.3",
     "@preconstruct/hook": "^0.4.0",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@types/jest": "^29.5.4",
-    "@types/node": "^18.17.14",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "babel-jest": "^29.6.4",
-    "babel-plugin-react-native-web": "^0.19.8",
-    "eslint": "^8.49.0",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@swc/core": "^1.3.92",
+    "@swc/jest": "^0.2.29",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^18.18.4",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "babel-plugin-react-native-web": "^0.19.9",
+    "clean-package": "^2.2.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsdoc": "^46.5.1",
+    "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-testing-library": "^5.11.1",
+    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-testing-library": "^6.0.2",
     "eslint-plugin-unicorn": "^48.0.1",
     "gh-pages": "^6.0.0",
-    "glob": "^10.3.4",
+    "glob": "^10.3.10",
     "husky": "^8.0.3",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
-    "knip": "^2.22.0",
-    "lerna": "^7.2.0",
+    "knip": "^2.32.0",
+    "lerna": "^7.3.0",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.4",
-    "react-native-builder-bob": "^0.21.3",
-    "react-native-safe-area-context": "4.5.0",
+    "react-native": "0.72.5",
+    "react-native-builder-bob": "^0.23.1",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-svg": "13.9.0",
-    "react-native-web": "^0.19.8",
-    "rimraf": "^5.0.1",
-    "storybook": "^7.4.0",
+    "react-native-web": "^0.19.9",
+    "rimraf": "^5.0.5",
+    "storybook": "^7.4.6",
     "storybook-addon-performance": "^0.17.1",
     "storybook-dark-mode": "^3.0.1",
-    "tsx": "^3.12.8",
+    "tsx": "^3.13.0",
     "typescript": "~5.2.2",
     "webpack": "^5.88.2",
     "yarn-deduplicate": "^6.0.2"
   },
   "resolutions": {
-    "@types/react": "^18.2.21"
+    "@types/react": "^18.2.25"
   },
   "scripts": {
     "build": "lerna run build --ignore=\"@md3-ui/docs\"",
     "build:props-docs": "yarn typedocs && lerna run build --scope=\"@md3-ui/props-docs\"",
     "deploy": "yarn storybook:build && gh-pages -d storybook-static && rimraf storybook-static",
     "lint": "eslint .",
-    "postinstall": "manypkg check && tsx scripts/create-dist.ts",
+    "postinstall": "manypkg check",
     "prepare": "husky install",
     "prestorybook": "rimraf node_modules/.cache/storybook",
     "storybook": "sb dev -p 6006",

packages/app-bar/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@md3-ui/app-bar",
   "version": "0.2.1",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/module/index.js",
-  "react-native": "src/index.ts",
-  "types": "dist/typescript/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/typescript/index.d.ts",
-      "import": "./dist/module/index.js",
-      "require": "./dist/commonjs/index.js"
-    },
-    "./package.json": "./package.json"
-  },
+  "main": "src/index.ts",
   "license": "MIT",
   "homepage": "https://eikefoken.com/md3-ui/",
   "repository": {
@@ -40,17 +29,19 @@
   "devDependencies": {
     "@md3-ui/button": "^0.2.1",
     "@md3-ui/icons": "^0.2.1",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.25",
     "react": "18.2.0",
-    "react-native": "0.72.4"
+    "react-native": "0.72.5"
   },
   "peerDependencies": {
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
-    "react-native": ">=0.71.7"
+    "react-native": ">=0.72.5"
   },
   "scripts": {
     "build": "bob build",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore",
     "typecheck": "tsc --noEmit",
     "typedocs": "tsx ../../scripts/generate-type-docs.ts"
   },

packages/badge/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@md3-ui/badge",
   "version": "0.2.1",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/module/index.js",
-  "react-native": "src/index.ts",
-  "types": "dist/typescript/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/typescript/index.d.ts",
-      "import": "./dist/module/index.js",
-      "require": "./dist/commonjs/index.js"
-    },
-    "./package.json": "./package.json"
-  },
+  "main": "src/index.ts",
   "license": "MIT",
   "homepage": "https://eikefoken.com/md3-ui/",
   "repository": {
@@ -40,17 +29,19 @@
   },
   "devDependencies": {
     "@md3-ui/icons": "^0.2.1",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.25",
     "react": "18.2.0",
-    "react-native": "0.72.4"
+    "react-native": "0.72.5"
   },
   "peerDependencies": {
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
-    "react-native": ">=0.71.7"
+    "react-native": ">=0.72.5"
   },
   "scripts": {
     "build": "bob build",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore",
     "typecheck": "tsc --noEmit",
     "typedocs": "tsx ../../scripts/generate-type-docs.ts"
   },

packages/button/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@md3-ui/button",
   "version": "0.2.1",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/module/index.js",
-  "react-native": "src/index.ts",
-  "types": "dist/typescript/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/typescript/index.d.ts",
-      "import": "./dist/module/index.js",
-      "require": "./dist/commonjs/index.js"
-    },
-    "./package.json": "./package.json"
-  },
+  "main": "src/index.ts",
   "license": "MIT",
   "homepage": "https://eikefoken.com/md3-ui/",
   "repository": {
@@ -42,17 +31,19 @@
   "devDependencies": {
     "@md3-ui/icons": "^0.2.1",
     "@md3-ui/layout": "^0.2.1",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.25",
     "react": "18.2.0",
-    "react-native": "0.72.4"
+    "react-native": "0.72.5"
   },
   "peerDependencies": {
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
-    "react-native": ">=0.71.7"
+    "react-native": ">=0.72.5"
   },
   "scripts": {
     "build": "bob build",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore",
     "typecheck": "tsc --noEmit",
     "typedocs": "tsx ../../scripts/generate-type-docs.ts"
   },

packages/button/src/button-base.tsx

@@ -250,7 +250,9 @@ export const ButtonBase = forwardRef<RNView, ButtonBaseProps>(
     >([])
 
     const [{ backgroundColor = null, ...containerStyle }] = splitProps(
-      StyleSheet.flatten([style, styles?.root]),
+      Platform.OS === "web"
+        ? ({ backgroundColor: undefined } as RNViewStyle)
+        : StyleSheet.flatten([style, styles?.root]),
       [
         "backgroundColor",
         "borderRadius",

packages/button/tests/__snapshots__/elevated-button.test.tsx.snap

@@ -8,12 +8,11 @@ exports[`<ElevatedButton /> should render 1`] = `
   type="button"
 >
   <div
-    style="color: rgb(103, 80, 164); display: contents;"
+    style="display: contents;"
   >
     <div
       class="css-text-146c3p1 Text-root ElevatedButton-label r-fontFamily-rxj5oj r-fontSize-1b43r93 r-fontWeight-majxgm r-letterSpacing-8ay8q1 r-lineHeight-rjixqe r-textAlign-q4m81j"
       dir="auto"
-      style="color: rgb(103, 80, 164);"
     >
       Hello World
     </div>

packages/button/tests/__snapshots__/filled-button.test.tsx.snap

@@ -8,12 +8,11 @@ exports[`<FilledButton /> should render 1`] = `
   type="button"
 >
   <div
-    style="color: rgb(255, 255, 255); display: contents;"
+    style="display: contents;"
   >
     <div
       class="css-text-146c3p1 Text-root FilledButton-label r-fontFamily-rxj5oj r-fontSize-1b43r93 r-fontWeight-majxgm r-letterSpacing-8ay8q1 r-lineHeight-rjixqe r-textAlign-q4m81j"
       dir="auto"
-      style="color: rgb(255, 255, 255);"
     >
       Hello World
     </div>