feat(registry): add compare-slider (#174)

* feat: add compare-slider draft

* feat: update compare-slider

* feat: update props

* feat: update demos

* feat: add compare slider

* feat: update compare-slider

* feat: update docs

* feat: update icons

* feat: add credits

* feat: update credits

* feat: use next image

* feat: update demos

Author: sadmann7

docs/__registry__/index.tsx

@@ -109,6 +109,24 @@ export const Index: Record<string, any> = {
       source: "",
       chunks: []
     },
+    "compare-slider": {
+      name: "compare-slider",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/ui/compare-slider.tsx",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/lib/compose-refs.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/ui/compare-slider.tsx")),
+      source: "",
+      chunks: []
+    },
     "cropper": {
       name: "cropper",
       description: "",
@@ -893,6 +911,62 @@ export const Index: Record<string, any> = {
       source: "",
       chunks: []
     },
+    "compare-slider-demo": {
+      name: "compare-slider-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["compare-slider"],
+      files: [{
+        path: "registry/default/examples/compare-slider-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/compare-slider-demo.tsx")),
+      source: "",
+      chunks: []
+    },
+    "compare-slider-controlled-demo": {
+      name: "compare-slider-controlled-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["compare-slider","button","label","slider"],
+      files: [{
+        path: "registry/default/examples/compare-slider-controlled-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/compare-slider-controlled-demo.tsx")),
+      source: "",
+      chunks: []
+    },
+    "compare-slider-customization-demo": {
+      name: "compare-slider-customization-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["compare-slider"],
+      files: [{
+        path: "registry/default/examples/compare-slider-customization-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/compare-slider-customization-demo.tsx")),
+      source: "",
+      chunks: []
+    },
+    "compare-slider-vertical-demo": {
+      name: "compare-slider-vertical-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["compare-slider"],
+      files: [{
+        path: "registry/default/examples/compare-slider-vertical-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/compare-slider-vertical-demo.tsx")),
+      source: "",
+      chunks: []
+    },
     "cropper-demo": {
       name: "cropper-demo",
       description: "",

docs/app/(lobby)/pg/page.tsx

@@ -1,23 +1,21 @@
 import { Demo } from "@/components/demo";
 import { Shell } from "@/components/shell";
 import ColorPickerDemo from "@/registry/default/examples/color-picker-demo";
-import QRCodeDemo from "@/registry/default/examples/qr-code-demo";
-import QRCodeFormatsDemo from "@/registry/default/examples/qr-code-formats-demo";
-import QRCodeOverlayDemo from "@/registry/default/examples/qr-code-overlay-demo";
-import ScrollSpyControlledDemo from "@/registry/default/examples/scroll-spy-controlled-demo";
+import CompareSliderControlledDemo from "@/registry/default/examples/compare-slider-controlled-demo";
+import CompareSliderCustomizationDemo from "@/registry/default/examples/compare-slider-customization-demo";
+import CompareSliderDemo from "@/registry/default/examples/compare-slider-demo";
+import CompareSliderVerticalDemo from "@/registry/default/examples/compare-slider-vertical-demo";
 import ScrollSpyDemo from "@/registry/default/examples/scroll-spy-demo";
-import ScrollSpyVerticalDemo from "@/registry/default/examples/scroll-spy-vertical-demo";
 
 export default function PlaygroundPage() {
   return (
     <Shell>
       <Demo>
-        <QRCodeDemo />
-        <QRCodeFormatsDemo />
-        <QRCodeOverlayDemo />
+        <CompareSliderDemo />
+        <CompareSliderCustomizationDemo />
+        <CompareSliderControlledDemo />
+        <CompareSliderVerticalDemo />
         <ScrollSpyDemo />
-        <ScrollSpyControlledDemo />
-        <ScrollSpyVerticalDemo />
         <ColorPickerDemo />
       </Demo>
     </Shell>