V4 Improvements

.editorconfig

@@ -8,7 +8,7 @@ charset = utf-8
 end_of_line = lf
 indent_size = 2
 insert_final_newline = true
-max_line_length = 90
+max_line_length = 110
 trim_trailing_whitespace = true
 
 [*.{md,mdx}]

.github/workflows/publish-preview.yml

@@ -9,20 +9,18 @@ jobs:
 
     steps:
       - name: 🛒 Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: ⚒️ Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: 📦 Install Dependencies
-        run: |
-          corepack enable
-          pnpm install --frozen-lockfile --filter react-compare-slider
+        run: npm run bootstrap
 
       - name: 🔨 Build
         run: pnpm run --filter react-compare-slider build

.nvmrc

@@ -1 +1 @@
-lts/iron
+lts/jod

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "editor.rulers": [100],
+  "editor.rulers": [110],
   "editor.formatOnSave": true,
   "search.exclude": {
     "**/node_modules": true,

.zed/settings.json

@@ -0,0 +1,26 @@
+{
+  "wrap_guides": [110],
+  "languages": {
+    "JavaScript": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TypeScript": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TSX": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    }
+  }
+}

README.md

@@ -11,12 +11,15 @@
 <a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild"><img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" /></a>
 <a href="https://codeclimate.com/github/nerdyman/react-compare-slider/code?q=lib"><img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" /></a>
 <a href="https://react-compare-slider.vercel.app"><img  alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" /></a>
+<a href="https://pkg.pr.new/~/nerdyman/react-compare-slider">
+<img alt="Open in pkg.pr.new" src="https://pkg.pr.new/badge/nerdyman/react-compare-slider?style=flat&color=000&logoSize=auto">
+</a>
 
 </div>
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > This readme is for the [v4 release](https://github.com/nerdyman/react-compare-slider/releases) which is currently in beta (`react-compare-slider@beta`).
-> 
+>
 > See [Version 3](https://github.com/nerdyman/react-compare-slider/tree/v3.1.0) for the latest stable release (`react-compare-slider`).
 
 ---
@@ -72,7 +75,7 @@ export const Example = () => {
 
 | Prop | Type | Required | Default | Description |
 | ---- | ---- | :------: | ------- | ----------- |
-| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `number`                     |   | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
+| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `string`                     |   | `0%`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
 | [`browsingContext`](https://react-compare-slider.vercel.app/?path=/story/demos--browsing-context)               | `globalThis`                 |   | `globalThis`  | Context to bind events to (useful for iframes).
 | [`clip`](https://react-compare-slider.vercel.app/?path=/docs/docs-clip--docs)           | `` both\|itemOne\|itemTwo ``   |   | `both`          | Whether to clip `itemOne`, `itemTwo` or `both` items.
 | [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/demos--change-position-on-hover) | `boolean`                    |   | `false`       | Whether the slider should follow the pointer on hover.