remove clipboard dependency

components/CodeBlock.tsx

@@ -5,7 +5,7 @@ import { Box, Flex, IconButton, ScrollArea, Theme } from '@radix-ui/themes';
 import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
 import { classNames } from '@utils/classNames';
 import styles from './CodeBlock.module.css';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 import refractor from 'refractor/core';
 import js from 'refractor/lang/javascript';
@@ -166,7 +166,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
           const value = event.currentTarget
             .closest(`[data-code-block-content]`)
             .querySelector('code').textContent;
-          copy(value);
+          await copy(value);
           setHasCopied(true);
         }}
         color="gray"

components/CustomSwatch.tsx

@@ -20,7 +20,7 @@ import styles from './CustomSwatch.module.css';
 import { classNames } from '@utils/classNames';
 import { useTheme } from 'next-themes';
 import { Cross2Icon, InfoCircledIcon } from '@radix-ui/react-icons';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 const brightColors = ['amber', 'yellow', 'lime', 'mint', 'sky'];
 
@@ -289,7 +289,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
         ref={ref}
         size="2"
         style={{ userSelect: 'auto' }}
-        onClick={async (event) => {
+        onClick={(event) => {
           onClick?.(event);
           const originalDefaultPrevented = event.defaultPrevented;
 
@@ -304,7 +304,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
             });
 
             if (!originalDefaultPrevented) {
-              copy(text);
+              void copy(text);
             }
           }
         }}

components/Swatch.tsx

@@ -21,7 +21,7 @@ import { classNames } from '@utils/classNames';
 import * as Colors from '@radix-ui/colors';
 import { useTheme } from 'next-themes';
 import { Cross2Icon, InfoCircledIcon } from '@radix-ui/react-icons';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 const brightColors = ['amber', 'yellow', 'lime', 'mint', 'sky'];
 
@@ -418,7 +418,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
         ref={ref}
         size="2"
         style={{ userSelect: 'auto' }}
-        onClick={async (event) => {
+        onClick={(event) => {
           onClick?.(event);
           const originalDefaultPrevented = event.defaultPrevented;
 
@@ -433,7 +433,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
             });
 
             if (!originalDefaultPrevented) {
-              copy(text);
+              void copy(text);
             }
           }
         }}

package.json

@@ -57,7 +57,6 @@
     "bezier-easing": "^2.1.0",
     "codesandbox": "^2.2.3",
     "colorjs.io": "0.5.2",
-    "copy-to-clipboard": "^3.3.1",
     "esbuild": "0.19.5",
     "eslint-config-next": "^14.2.3",
     "glob": "^7.1.6",

pages/colors/custom.tsx

@@ -73,7 +73,7 @@ import { useLayoutEffect } from '../../utils/use-layout-effect';
 import { useIsHydrated } from '../../utils/use-is-hydrated';
 import { useTheme } from 'next-themes';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import copy from 'copy-to-clipboard';
+import { copy } from '../../utils/clipboard';
 import { CustomSwatch } from '@components/CustomSwatch';
 import { ColorUsageRange } from '@components/ColorUsageRange';
 import { ColorStepLabel } from '@components/ColorStepLabel';
@@ -290,7 +290,7 @@ export default function Page() {
 
                         <DropdownMenu.SubContent>
                           <DropdownMenu.Item
-                            onSelect={() => {
+                            onSelect={async () => {
                               const css = getColorScaleCss({
                                 isDarkMode: resolvedTheme === 'dark',
                                 name: getColorName(accentValue),
@@ -303,7 +303,7 @@ export default function Page() {
                                 surfaceWideGamut: result.accentSurfaceWideGamut,
                               });
 
-                              copy(css);
+                              await copy(css);
                               setCopiedMessage('accents');
                             }}
                           >

utils/clipboard.ts

@@ -0,0 +1,12 @@
+import { canUseDOM } from './can-use-dom';
+
+export async function copy(text: string) {
+  if (!canUseDOM) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error('Copying text is only allowed in a secure context');
+  }
+}

yarn.lock

@@ -2199,13 +2199,6 @@ copy-concurrently@^1.0.0:
     rimraf "^2.5.4"
     run-queue "^1.0.0"
 
-copy-to-clipboard@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -6732,11 +6725,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
 toml@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"