add and replace separator component

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

@@ -11,7 +11,6 @@
   },
   "devDependencies": {
     "@radix-ui/react-context-menu": "^2.1.0",
-    "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-toggle": "^1.0.1",
     "@radix-ui/react-toggle-group": "^1.0.1",

packages/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -8,9 +8,11 @@ import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { ToggleInput } from '../inputs/ToggleInput'
 import { ZoomMenu } from '../ZoomMenu'
-import * as Separator from '@radix-ui/react-separator'
 import { LogseqContext } from '../../lib/logseq-context'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export const ActionBar = observer(function ActionBar(): JSX.Element {
   const app = useApp<Shape>()
   const {
@@ -65,7 +67,7 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
         <Button tooltip={t('whiteboard/zoom-out')} onClick={zoomOut} id="tl-zoom-out">
           <TablerIcon name="minus" />
         </Button>
-        <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+        <LSUI.Separator orientation="vertical" />
         <ZoomMenu />
       </div>
 

packages/tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx

@@ -1,4 +1,3 @@
-import * as Separator from '@radix-ui/react-separator'
 import {
   getContextBarTranslation,
   HTMLContainer,
@@ -11,6 +10,9 @@ import * as React from 'react'
 import type { Shape } from '../../lib'
 import { getContextBarActionsForShapes } from './contextBarActionFactory'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden }) => {
   const app = useApp()
   const rSize = React.useRef<[number, number] | null>(null)
@@ -52,7 +54,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
             <React.Fragment key={idx}>
               <Action />
               {idx < Actions.length - 1 && (
-                <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                <LSUI.Separator orientation="vertical" />
               )}
             </React.Fragment>
           ))}

packages/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -8,9 +8,11 @@ import { KeyboardShortcut } from '../KeyboardShortcut'
 import * as React from 'react'
 
 import * as ReactContextMenu from '@radix-ui/react-context-menu'
-import * as Separator from '@radix-ui/react-separator'
 import { toJS } from 'mobx'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 interface ContextMenuProps {
   children: React.ReactNode
   collisionRef: React.RefObject<HTMLDivElement>
@@ -82,7 +84,7 @@ export const ContextMenu = observer(function ContextMenu({
                     >
                       <TablerIcon name="layout-align-right" />
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <LSUI.Separator orientation="vertical" />
                     <Button
                       tooltip={t('whiteboard/distribute-horizontally')}
                       onClick={() =>
@@ -111,7 +113,7 @@ export const ContextMenu = observer(function ContextMenu({
                     >
                       <TablerIcon name="layout-align-bottom" />
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <LSUI.Separator orientation="vertical" />
                     <Button
                       tooltip={t('whiteboard/distribute-vertically')}
                       onClick={() =>

packages/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx

@@ -6,9 +6,11 @@ import { ToolButton } from '../ToolButton'
 import { GeometryTools } from '../GeometryTools'
 import { ColorInput } from '../inputs/ColorInput'
 import { ScaleInput } from '../inputs/ScaleInput'
-import * as Separator from '@radix-ui/react-separator'
 import { LogseqContext } from '../../lib/logseq-context'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export const PrimaryTools = observer(function PrimaryTools() {
   const app = useApp()
   const {
@@ -51,7 +53,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
           id="move"
           icon={app.isIn('move.panning') ? 'hand-grab' : 'hand-stop'}
         />
-        <Separator.Root className="tl-toolbar-separator" orientation="horizontal" />
+        <LSUI.Separator orientation="horizontal" />
         <ToolButton
           handleClick={() => app.selectTool('logseq-portal')}
           tooltip={t('whiteboard/add-block-or-page')}
@@ -89,8 +91,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
           icon="text"
         />
         <GeometryTools activeGeometry={activeGeomId} setGeometry={handleToolClick} />
-        <Separator.Root
-          className="tl-toolbar-separator"
+        <LSUI.Separator
           orientation="horizontal"
           style={{ margin: '0 -4px' }}
         />

packages/tldraw/apps/tldraw-logseq/src/styles.css

@@ -827,17 +827,6 @@ html[data-theme='dark'] {
   }
 }
 
-.tl-toolbar-separator {
-  background-color: var(--ls-border-color);
-  width: 1px;
-  opacity: 0.5;
-
-  &[data-orientation='horizontal'] {
-    height: 1px;
-    width: auto;
-  }
-}
-
 .tl-youtube-link,
 .tl-twitter-link,
 .tl-iframe-src {

packages/tldraw/yarn.lock

@@ -790,14 +790,6 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-controllable-state" "1.0.0"
 
-"@radix-ui/react-separator@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.1.tgz#0ff3036c7f499fee9ea99268dc9ebf16055e356f"
-  integrity sha512-uc6Izot0D8uVz6T2nSb/HI7OaxkeaD50GgKr3W6HORnbfGVrG7LWuy+g6Fd58n8wHbrRblSYJZEfcjgymMlJjw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.1"
-
 "@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"

packages/ui/@/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px]" : "w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

packages/ui/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",

packages/ui/src/ui.ts

@@ -86,6 +86,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { TooltipArrow } from '@radix-ui/react-tooltip'
 import { Link } from '@/components/ui/link'
+import { Separator } from '@/components/ui/separator'
 
 declare global {
   var LSUI: any
@@ -147,6 +148,7 @@ const shadui = {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
+  Separator,
   Calendar,
   Popover,
   PopoverTrigger,

packages/ui/yarn.lock

@@ -2680,7 +2680,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-separator@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
   integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==