move tldraw to packages

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

@@ -0,0 +1,75 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group'
+import { TablerIcon } from '../icons'
+import { Tooltip } from '../Tooltip'
+
+export interface ToggleGroupInputOption {
+  value: string
+  icon: string
+  tooltip?: string
+}
+
+interface ToggleGroupInputProps extends React.HTMLAttributes<HTMLElement> {
+  options: ToggleGroupInputOption[]
+  value: string
+  onValueChange: (value: string) => void
+}
+
+interface ToggleGroupMultipleInputProps extends React.HTMLAttributes<HTMLElement> {
+  options: ToggleGroupInputOption[]
+  value: string[]
+  onValueChange: (value: string[]) => void
+}
+
+export function ToggleGroupInput({ options, value, onValueChange }: ToggleGroupInputProps) {
+  return (
+    <ToggleGroup.Root
+      className="tl-toggle-group-input"
+      type="single"
+      value={value}
+      onValueChange={onValueChange}
+    >
+      {options.map(option => {
+        return (
+          <Tooltip content={option.tooltip} key={option.value}>
+            <div className="inline-block">
+              <ToggleGroup.Item
+                className="tl-toggle-group-input-button"
+                value={option.value}
+                disabled={option.value === value}
+              >
+                <TablerIcon name={option.icon} />
+              </ToggleGroup.Item>
+            </div>
+          </Tooltip>
+        )
+      })}
+    </ToggleGroup.Root>
+  )
+}
+
+export function ToggleGroupMultipleInput({
+  options,
+  value,
+  onValueChange,
+}: ToggleGroupMultipleInputProps) {
+  return (
+    <ToggleGroup.Root
+      className="tl-toggle-group-input"
+      type="multiple"
+      value={value}
+      onValueChange={onValueChange}
+    >
+      {options.map(option => {
+        return (
+          <ToggleGroup.Item
+            className="tl-toggle-group-input-button"
+            key={option.value}
+            value={option.value}
+          >
+            <TablerIcon name={option.icon} />
+          </ToggleGroup.Item>
+        )
+      })}
+    </ToggleGroup.Root>
+  )
+}