replace slider

packages/tldraw/apps/tldraw-logseq/package.json

@@ -11,7 +11,6 @@
   },
   "devDependencies": {
     "@radix-ui/react-context-menu": "^2.1.0",
-    "@radix-ui/react-slider": "^1.1.0",
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/react": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",

packages/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -1,11 +1,12 @@
 import type { Side } from '@radix-ui/react-popper'
-import * as Slider from '@radix-ui/react-slider'
 import { Color, isBuiltInColor, debounce } from '@tldraw/core'
 import { TablerIcon } from '../icons'
 import { PopoverButton } from '../PopoverButton'
 import { Tooltip } from '../Tooltip'
 import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
+// @ts-ignore
+const LSUI = window.LSUI
 
 interface ColorInputProps extends React.HTMLAttributes<HTMLButtonElement> {
   color?: string
@@ -100,7 +101,7 @@ export function ColorInput({
 
         {setOpacity && (
           <div className="mx-1 my-2">
-            <Slider.Root
+            <LSUI.Slider
               defaultValue={[opacity ?? 0]}
               onValueCommit={value => setOpacity(value[0])}
               max={1}
@@ -108,11 +109,11 @@ export function ColorInput({
               aria-label={t('whiteboard/opacity')}
               className="tl-slider-root"
             >
-              <Slider.Track className="tl-slider-track">
-                <Slider.Range className="tl-slider-range" />
-              </Slider.Track>
-              <Slider.Thumb className="tl-slider-thumb" />
-            </Slider.Root>
+              <LSUI.SliderTrack className="tl-slider-track">
+                <LSUI.SliderRange className="tl-slider-range" />
+              </LSUI.SliderTrack>
+              <LSUI.SliderThumb className="tl-slider-thumb" />
+            </LSUI.Slider>
           </div>
         )}
       </div>

packages/tldraw/yarn.lock

@@ -604,13 +604,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@radix-ui/[email protected]":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
-  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
@@ -790,24 +783,6 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-controllable-state" "1.0.0"
 
-"@radix-ui/react-slider@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.0.tgz#b3fdaca27619150e9e6067ad9f979a4535f68d5e"
-  integrity sha512-5H/QB4xD3GF9UfoSCVLBx2JjlXamMcmTyL6gr4kkd/MiAGaYB0W7Exi4MQa0tJApBFJe+KmS5InKCI56p2kmjA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-previous" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
-
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
@@ -846,13 +821,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/[email protected]":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
-  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"

packages/ui/@/components/ui/slider.tsx

@@ -3,10 +3,16 @@ import * as SliderPrimitive from '@radix-ui/react-slider'
 
 import { cn } from '@/lib/utils'
 
+const SliderTrack = SliderPrimitive.Track
+
+const SliderRange = SliderPrimitive.Range
+
+const SliderThumb = SliderPrimitive.Thumb
+
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
@@ -16,13 +22,16 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary"/>
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
-      className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"/>
+    {children ??
+     <React.Fragment>
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary"/>
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"/>
+     </React.Fragment>}
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
 
-export { Slider }
+export { Slider, SliderTrack, SliderRange, SliderThumb }

packages/ui/src/ui.ts

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-import { Slider } from '@/components/ui/slider'
+import { Slider, SliderTrack, SliderRange, SliderThumb } from '@/components/ui/slider'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -96,7 +96,8 @@ declare global {
 }
 
 const shadui = {
-  Link, Button, Slider,
+  Link, Button, 
+  Slider, SliderTrack, SliderRange, SliderThumb,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,