Next release

.github/workflows/ci.yml

@@ -56,9 +56,9 @@ jobs:
             ${{github.workspace}}/coverage/ssr-tests/*.info:lcov
             ${{github.workspace}}/coverage/storybook/*.info:lcov
 
-      # Needs https://github.com/preactjs/compressed-size-action/issues/83
-      # - uses: preactjs/compressed-size-action@v2
-      #   with:
-      #     repo-token: '${{ secrets.GITHUB_TOKEN }}'
-      #     build-script: 'build'
-      #     cwd: lib
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          install-script: 'pnpm install --frozen-lockfile --filter react-compare-slider'
+          build-script: 'build'
+          cwd: lib

.github/workflows/publish-preview.yml

@@ -0,0 +1,31 @@
+name: Publish Preview Release
+on:
+  pull_request:
+    types: [synchronize]
+jobs:
+  approved:
+    if: contains(join(github.event.pull_request.labels.*.name, ','), 'publish-preview')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛒 Checkout repo
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: ⚒️ Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: 📦 Install Dependencies
+        run: |
+          corepack enable
+          pnpm install --frozen-lockfile --filter react-compare-slider
+
+      - name: 🔨 Build
+        run: pnpm run --filter react-compare-slider build
+
+      - name: 🚀 Publish Preview Release
+        run: pnpx pkg-pr-new publish './lib' --template='./docs/example'

.github/workflows/ssr.yml

@@ -23,7 +23,7 @@ jobs:
       - name: ⚒️ Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
 
       - name: 📦 Install Dependencies

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.rulers": [100],
   "editor.formatOnSave": true,

README.md

@@ -69,6 +69,7 @@ export const Example = () => {
 | ---- | ---- | :------: | ------- | ----------- |
 | [`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).
 | [`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=/story/docs/docs-clip--docs)           | `` both\|itemOne\|itemTwo ``   |   | `5%`          | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.
 | [`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.
 | [`disabled`](https://react-compare-slider.vercel.app/?path=/story/demos--disabled)                              | `boolean`                    |   | `false`       |  Whether to disable slider movement (items are still interactable).
 | [`handle`](https://react-compare-slider.vercel.app/?path=/story/demos--handle)                                  | `ReactNode`                  |   | `undefined`   | Custom handle component.

docs/example/package.json

@@ -29,7 +29,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.5"
   }
 }

docs/ssr-tests/package.json

@@ -12,7 +12,7 @@
     "test-legacy": "node --test"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
+    "@types/node": "^22.5.5",
     "react": "^18.2.0",
     "react-compare-slider": "latest",
     "react-dom": "^18.2.0",

docs/storybook/.storybook/preview-head.html

@@ -140,20 +140,4 @@
   .sbdocs table:not(.docblock-argstable) td:last-of-type {
     border-right: 0 !important;
   }
-
-  /** @HACK Storybook adds a 100px height to this container for some reason.
-   *  Using custom styles to workaround it...ish.
-   */
-
-  .sbdocs-preview div[id^='story--'] {
-    display: flex;
-  }
-
-  .sbdocs-preview div[id^='story--'] > div {
-    height: 70vh !important;
-    max-height: 32rem;
-    max-width: 100%;
-    overflow: hidden;
-    flex-grow: 1;
-  }
 </style>

docs/storybook/content/06-bounds-padding.stories.mdx → docs/storybook/content/02-bounds-padding.stories.mdx

@@ -7,17 +7,15 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 # Using `boundsPadding`
 
 The `boundsPadding` prop allows you to limit the slideable area on the Y-axis
-in `portrait` mode or on the X-axis in the default landscape mode. The default
-`boundsPadding` value is `0`, negative values are treated the same as `0` and
-the value **MUST** be supplied as a number in pixels.
+in `portrait` mode or on the X-axis in the default landscape mode. Negative values are treated the
+same as `0` and the value **MUST** be supplied as a number in pixels.
 
-Bounds padding is useful when the slider has other components overlaying it - e.g. in a full
-width/height carousel with previous and next buttons which you don't want the slider
-handle to going behind.
+Bounds padding is useful when the slider has other components overlaying it. E.g. in a full
+width or height carousel with overlaying navigation buttons.
 
 In the example below, bounds padding prevents the slider handle from going
-within range of pixels of the left or right of the slider specified by the `boundsPadding` prop. The bounds are automatically
-applied to the top/bottom or right/left depending on the orientation of the slider.
+within range of pixels of the left or right of the slider specified by the `boundsPadding` prop.
+The bounds are automatically applied to the top/bottom or right/left depending on the orientation of the slider.
 
 ```JSX
 boundsPadding={80}

docs/storybook/content/03-clip.stories.mdx

@@ -0,0 +1,25 @@
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+<Meta title="Docs/Clip" component={ReactCompareSlider} />
+
+# Using `clip`
+
+The `clip` prop allows you to control whether `itemOne`, `itemTwo`, or both items are clipped to
+the bounds of the slider.
+
+This is useful in cases where you have transparent items and want to control which item takes
+precedence when the slider is moved.
+
+<Canvas>
+  <Story id="demos--images" />
+</Canvas>
+
+<ArgTypes of={ReactCompareSlider} />
+
+<br />
+
+## Live Examples
+
+Checkout the [Images example](/story/demos--images).

docs/storybook/content/04-disabled.stories.mdx

@@ -0,0 +1,22 @@
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+<Meta title="Docs/Disabled" component={ReactCompareSlider} />
+
+# Using `disabled`
+
+The `disabled` prop prevents the slider from being interacted with by the user and also applies
+the appropriate accessibility attributes to the slider controls.
+
+<Canvas>
+  <Story id="demos--disabled" />
+</Canvas>
+
+<ArgTypes of={ReactCompareSlider} />
+
+<br />
+
+## Live Examples
+
+Checkout the [Disabled example](/story/demos--disabled).

docs/storybook/content/99-real-world-examples.stories.mdx

@@ -7,9 +7,9 @@ import { Meta } from '@storybook/blocks';
 The library is used by many companies and over 1000 open source projects, below are some examples of
 how it's being used in the wild.
 
-- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
-- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
-- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2#Maps)
-- [Dota 2 Summer Client Update](https://www.dota2.com/summer2023)
+- [upscaler.party: Image upscaler and comparator](https://upscaler.party/)
+- [removerized: Free AI-Powered Background Remover Tool](https://removerized.tech/)
+- [VideoGigaGAN: Detail-rich Video Super-Resolution](https://videogigagan.com/)
+- [Upscayl: Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
+- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2#Maps) and [Dota 2 Summer Client Update](https://www.dota2.com/summer2023)
 - [RoomGPT](https://github.com/Nutlope/roomGPT)
-- [RestorePhotos.io](https://github.com/Nutlope/restorePhotos)