chore(docs): Add missing prop documentation, update package.json

.changeset/friendly-pears-hang.md

@@ -0,0 +1,5 @@
+---
+"react-shiki": patch
+---
+
+Update README, package.json, and tsup config

package.json

@@ -5,6 +5,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "pnpm --stream -r --parallel dev",
+    "build": "pnpm --stream -r --parallel build",
     "package:dev": "pnpm --filter react-shiki dev",
     "package:build": "pnpm --filter react-shiki build",
     "playground:dev": "pnpm --filter playground dev",

package/README.md

@@ -52,9 +52,10 @@ function CodeBlock() {
 The component accepts several props in addition to language and theme:
 
 - `showLanguage: boolean` - Shows the language name in the top right corner of the code block.
-- `style: object` - Style object to be passed to the component.
+- `addDefaultStyles`: boolean - Adds default styles (padding, overflow handling, and border-radius) to the code block.
 - `as: string` - The component to be rendered. Defaults to 'pre'.
 - `className: string` - Class name to be passed to the component.
+- `style: object` - Style object to be passed to the component.
 
 ```tsx
 function Houston() {

package/package.json

@@ -11,7 +11,7 @@
   "repository": {
     "type": "git",
     "directory": "package",
-    "url": "https://github.com/avgvstvs96/react-shiki"
+    "url": "git+https://github.com/avgvstvs96/react-shiki.git"
   },
   "homepage": "https://react-shiki.vercel.app/",
   "keywords": [
@@ -26,9 +26,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup';
+import { peerDependencies } from './package.json';
 
 export default defineConfig((options) => {
   const dev = !!options.watch;
@@ -11,6 +12,6 @@ export default defineConfig((options) => {
     clean: true,
     minify: !dev,
     injectStyle: true,
-    external: ['react', 'react-dom'],
+    external: [...Object.keys(peerDependencies)],
   };
 });

playground/src/CodeTest.tsx

@@ -330,8 +330,8 @@ export const HighlightCodeBlocks = React.memo(() => {
           the top right corner of the code block.
         </li>
         <li>
-          <code>style: object</code> - Style object to be passed to the
-          component.
+          <code>addDefaultStyles: boolean</code> - Adds default styles to
+          the top right corner of the code block.
         </li>
         <li>
           <code>as: string</code> - The component to be rendered. Defaults
@@ -341,6 +341,10 @@ export const HighlightCodeBlocks = React.memo(() => {
           <code>className: string</code> - Class name to be passed to the
           component.
         </li>
+        <li>
+          <code>style: object</code> - Style object to be passed to the
+          component.
+        </li>
       </ul>
       <Houston />
       <p>