@metamask-previews/design-system-react 0.0.0-preview.04cb60f

package/dist/utils/tw-merge.mjs

@@ -0,0 +1,64 @@
+import { extendTailwindMerge } from "tailwind-merge";
+const variantClassGroups = [
+    's-display-md',
+    's-heading-lg',
+    's-heading-md',
+    's-heading-sm',
+    's-body-lg',
+    's-body-md',
+    's-body-sm',
+    's-body-xs',
+    'l-display-md',
+    'l-heading-lg',
+    'l-heading-md',
+    'l-heading-sm',
+    'l-body-lg',
+    'l-body-md',
+    'l-body-sm',
+    'l-body-xs',
+];
+/**
+ * Custom Tailwind Merge configuration to handle our design system's typography classes.
+ * This extends the default Tailwind Merge behavior to properly handle conflicts between:
+ * 1. Custom text color classes (text-default, text-alternative, text-muted)
+ * 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)
+ * 3. Standard and custom font weight classes
+ *
+ * Without this configuration, Tailwind Merge wouldn't know these classes are meant
+ * to override each other, potentially leading to multiple conflicting classes
+ * being applied simultaneously.
+ */
+export const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'text-color': ['text-default', 'text-alternative', 'text-muted'],
+            'font-size': [
+                {
+                    text: variantClassGroups,
+                },
+            ],
+            'font-weight': [
+                // Standard Tailwind font weights
+                'font-thin',
+                'font-extralight',
+                'font-light',
+                'font-normal',
+                'font-medium',
+                'font-semibold',
+                'font-bold',
+                'font-extrabold',
+                'font-black',
+                // Custom typography classes
+                {
+                    font: variantClassGroups,
+                },
+            ],
+        },
+        conflictingClassGroups: {
+            'text-color': ['text-color'],
+            'font-size': ['font-size'],
+            'font-weight': ['font-weight'],
+        },
+    },
+});
+//# sourceMappingURL=tw-merge.mjs.map

package/dist/utils/tw-merge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-merge.mjs","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB;AAErD,MAAM,kBAAkB,GAAG;IACzB,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC;IACzC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,YAAY,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,YAAY,CAAC;YAChE,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD,aAAa,EAAE;gBACb,iCAAiC;gBACjC,WAAW;gBACX,iBAAiB;gBACjB,YAAY;gBACZ,aAAa;gBACb,aAAa;gBACb,eAAe;gBACf,WAAW;gBACX,gBAAgB;gBAChB,YAAY;gBACZ,4BAA4B;gBAC5B;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;SACF;QACD,sBAAsB,EAAE;YACtB,YAAY,EAAE,CAAC,YAAY,CAAC;YAC5B,WAAW,EAAE,CAAC,WAAW,CAAC;YAC1B,aAAa,EAAE,CAAC,aAAa,CAAC;SAC/B;KACF;CACF,CAAC,CAAC","sourcesContent":["import { extendTailwindMerge } from 'tailwind-merge';\n\nconst variantClassGroups = [\n  's-display-md',\n  's-heading-lg',\n  's-heading-md',\n  's-heading-sm',\n  's-body-lg',\n  's-body-md',\n  's-body-sm',\n  's-body-xs',\n  'l-display-md',\n  'l-heading-lg',\n  'l-heading-md',\n  'l-heading-sm',\n  'l-body-lg',\n  'l-body-md',\n  'l-body-sm',\n  'l-body-xs',\n];\n\n/**\n * Custom Tailwind Merge configuration to handle our design system's typography classes.\n * This extends the default Tailwind Merge behavior to properly handle conflicts between:\n * 1. Custom text color classes (text-default, text-alternative, text-muted)\n * 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)\n * 3. Standard and custom font weight classes\n *\n * Without this configuration, Tailwind Merge wouldn't know these classes are meant\n * to override each other, potentially leading to multiple conflicting classes\n * being applied simultaneously.\n */\nexport const twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'text-color': ['text-default', 'text-alternative', 'text-muted'],\n      'font-size': [\n        {\n          text: variantClassGroups,\n        },\n      ],\n      'font-weight': [\n        // Standard Tailwind font weights\n        'font-thin',\n        'font-extralight',\n        'font-light',\n        'font-normal',\n        'font-medium',\n        'font-semibold',\n        'font-bold',\n        'font-extrabold',\n        'font-black',\n        // Custom typography classes\n        {\n          font: variantClassGroups,\n        },\n      ],\n    },\n    conflictingClassGroups: {\n      'text-color': ['text-color'],\n      'font-size': ['font-size'],\n      'font-weight': ['font-weight'],\n    },\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@metamask-previews/design-system-react",
+  "version": "0.0.0-preview.04cb60f",
+  "description": "Design system react ui components",
+  "keywords": [
+    "MetaMask",
+    "Ethereum"
+  ],
+  "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react#readme",
+  "bugs": {
+    "url": "https://github.com/MetaMask/metamask-design-system/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/metamask-design-system.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
+    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react",
+    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react",
+    "publish:preview": "yarn npm publish --tag preview",
+    "since-latest-release": "../../scripts/since-latest-release.sh",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
+    "test:clean": "NODE_OPTIONS=--experimental-vm-modules jest --clearCache",
+    "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "tailwind-merge": "^2.0.0"
+  },
+  "devDependencies": {
+    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.04cb60f",
+    "@metamask/auto-changelog": "^3.4.4",
+    "@storybook/react": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "deepmerge": "^4.2.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "typescript": "~5.2.2"
+  },
+  "peerDependencies": {
+    "@metamask/design-tokens": "^4.1.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "engines": {
+    "node": "^18.18 || >=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}