add and replace toggle and toggle-group

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

@@ -12,8 +12,6 @@
   "devDependencies": {
     "@radix-ui/react-context-menu": "^2.1.0",
     "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-toggle": "^1.0.1",
-    "@radix-ui/react-toggle-group": "^1.0.1",
     "@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/ToggleGroupInput.tsx

@@ -1,7 +1,9 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group'
 import { TablerIcon } from '../icons'
 import { Tooltip } from '../Tooltip'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export interface ToggleGroupInputOption {
   value: string
   icon: string
@@ -22,8 +24,7 @@ interface ToggleGroupMultipleInputProps extends React.HTMLAttributes<HTMLElement
 
 export function ToggleGroupInput({ options, value, onValueChange }: ToggleGroupInputProps) {
   return (
-    <ToggleGroup.Root
-      className="tl-toggle-group-input"
+    <LSUI.ToggleGroup
       type="single"
       value={value}
       onValueChange={onValueChange}
@@ -31,19 +32,19 @@ export function ToggleGroupInput({ options, value, onValueChange }: ToggleGroupI
       {options.map(option => {
         return (
           <Tooltip content={option.tooltip} key={option.value}>
-            <div className="inline-block">
-              <ToggleGroup.Item
-                className="tl-toggle-group-input-button"
+            <div className="inline-block h-full">
+              <LSUI.ToggleGroupItem
+                className="h-full"
                 value={option.value}
                 disabled={option.value === value}
               >
                 <TablerIcon name={option.icon} />
-              </ToggleGroup.Item>
+              </LSUI.ToggleGroupItem>
             </div>
           </Tooltip>
         )
       })}
-    </ToggleGroup.Root>
+    </LSUI.ToggleGroup>
   )
 }
 
@@ -53,23 +54,23 @@ export function ToggleGroupMultipleInput({
   onValueChange,
 }: ToggleGroupMultipleInputProps) {
   return (
-    <ToggleGroup.Root
-      className="tl-toggle-group-input"
+    <LSUI.ToggleGroup
+      className="contents"
       type="multiple"
       value={value}
       onValueChange={onValueChange}
     >
       {options.map(option => {
         return (
-          <ToggleGroup.Item
-            className="tl-toggle-group-input-button"
+          <LSUI.ToggleGroupItem
+            className="h-full"
             key={option.value}
             value={option.value}
           >
             <TablerIcon name={option.icon} />
-          </ToggleGroup.Item>
+          </LSUI.ToggleGroupItem>
         )
       })}
-    </ToggleGroup.Root>
+    </LSUI.ToggleGroup>
   )
 }

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

@@ -1,5 +1,7 @@
 import { Tooltip } from '../Tooltip'
-import * as Toggle from '@radix-ui/react-toggle'
+
+// @ts-ignore
+const LSUI = window.LSUI
 
 interface ToggleInputProps extends React.HTMLAttributes<HTMLElement> {
   toggle?: boolean
@@ -19,13 +21,13 @@ export function ToggleInput({
   return (
     <Tooltip content={tooltip}>
       <div className="inline-block">
-        <Toggle.Root
+        <LSUI.Toggle
           {...rest}
           data-toggle={toggle}
-          className={'tl-toggle-input' + (className ? ' ' + className : '')}
+          className={'h-full' + (className ? ' ' + className : '')}
           pressed={pressed}
           onPressedChange={onPressedChange}
-        ></Toggle.Root>
+        />
       </div>
     </Tooltip>
   )

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

@@ -783,50 +783,6 @@ html[data-theme='dark'] {
   }
 }
 
-.tl-toggle-group-input {
-  @apply rounded overflow-hidden;
-  box-shadow: 0 0 0 1px var(--ls-secondary-border-color);
-}
-
-.tl-toggle-group-input-button {
-  @apply inline-flex items-center justify-center;
-  border-right: 1px solid var(--ls-secondary-border-color);
-  height: 32px;
-  width: 32px;
-  color: var(--ls-secondary-text-color);
-  opacity: 0.3;
-
-  &:last-of-type {
-    border-right: none;
-  }
-
-  &:hover {
-    background-color: var(--ls-tertiary-background-color);
-  }
-
-  &[data-state='on'] {
-    background-color: var(--ls-tertiary-background-color);
-    color: var(--ls-primary-text-color);
-    opacity: 1;
-  }
-}
-
-.tl-toggle-input {
-  @apply inline-flex items-center justify-center;
-  height: 32px;
-  min-width: 32px;
-  color: var(--ls-secondary-text-color);
-
-  &:hover {
-    background-color: var(--ls-tertiary-background-color);
-  }
-
-  &[data-state='on'] {
-    background-color: var(--ls-tertiary-background-color);
-    color: var(--ls-primary-text-color);
-  }
-}
-
 .tl-youtube-link,
 .tl-twitter-link,
 .tl-iframe-src {

packages/tldraw/yarn.lock

@@ -816,30 +816,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
-"@radix-ui/react-toggle-group@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.1.tgz#26ca9629b5b5e76680ddbd1d362d8bdf359fa14c"
-  integrity sha512-eye/gYvzy82xtoSSeu5Pwlzrh6N2rOcDIwAI7xMatu622Qjlg64LtwB0PSh3iWdmn6Wqy1Fjo5twNPQsp0guiw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "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-roving-focus" "1.0.1"
-    "@radix-ui/react-toggle" "1.0.1"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
-"@radix-ui/[email protected]", "@radix-ui/react-toggle@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.1.tgz#20120c060cd3cd6267463a6a9bcb106134b5af57"
-  integrity sha512-hZIp9ZKnw4NwVqeB4evWBLa91ryaSJhAO0Ed82wkzRPgg/I29ypcY6SuBb3AMZW+GsuBZpIVujpCq+33TdEcyg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"

packages/ui/@/components/ui/toggle-group.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

packages/ui/@/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

packages/ui/package.json

@@ -27,6 +27,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

packages/ui/src/ui.ts

@@ -87,6 +87,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { TooltipArrow } from '@radix-ui/react-tooltip'
 import { Link } from '@/components/ui/link'
 import { Separator } from '@/components/ui/separator'
+import { Toggle } from '@/components/ui/toggle'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 
 declare global {
   var LSUI: any
@@ -176,7 +178,8 @@ const shadui = {
   AlertDialogAction,
   AlertDialogCancel,
   Tooltip, TooltipTrigger, TooltipArrow,
-  TooltipContent, TooltipProvider
+  TooltipContent, TooltipProvider,
+  Toggle, ToggleGroup, ToggleGroupItem
 }
 
 function setupGlobals() {

packages/ui/yarn.lock

@@ -2755,7 +2755,7 @@
     "@radix-ui/react-use-layout-effect" "1.0.1"
     "@radix-ui/react-visually-hidden" "1.0.3"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-toggle-group@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"
   integrity sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==
@@ -2769,7 +2769,7 @@
     "@radix-ui/react-toggle" "1.0.3"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-toggle@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz#aecb2945630d1dc5c512997556c57aba894e539e"
   integrity sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==