docs: clipboard

Author: segunadebayo

packages/react/src/components/clipboard/clipboard.stories.tsx

@@ -9,6 +9,7 @@ export default meta
 export { Basic } from './examples/basic'
 export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
+export { CopyStatus } from './examples/copy-status'
 export { CustomTimeout } from './examples/custom-timeout'
 export { Programmatic } from './examples/programmatic'
 export { RootProvider } from './examples/root-provider'

packages/react/src/components/clipboard/examples/copy-status.tsx

@@ -0,0 +1,26 @@
+import { Clipboard } from '@ark-ui/react/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
+import { useState } from 'react'
+
+export const CopyStatus = () => {
+  const [copyCount, setCopyCount] = useState(0)
+
+  return (
+    <Clipboard.Root
+      value="https://ark-ui.com"
+      onStatusChange={(details) => {
+        if (details.copied) {
+          setCopyCount((prev) => prev + 1)
+        }
+      }}
+    >
+      <Clipboard.Trigger>
+        <Clipboard.Indicator copied={<CheckIcon />}>
+          <ClipboardCopyIcon />
+        </Clipboard.Indicator>
+        Copy
+      </Clipboard.Trigger>
+      <p>Copied {copyCount} times</p>
+    </Clipboard.Root>
+  )
+}

packages/solid/src/components/clipboard/clipboard.stories.tsx

@@ -9,6 +9,7 @@ export default meta
 export { Basic } from './examples/basic'
 export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
+export { CopyStatus } from './examples/copy-status'
 export { CustomTimeout } from './examples/custom-timeout'
 export { Programmatic } from './examples/programmatic'
 export { RootProvider } from './examples/root-provider'

packages/solid/src/components/clipboard/examples/copy-status.tsx

@@ -0,0 +1,28 @@
+import { Clipboard } from '@ark-ui/solid/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
+import { Show, createSignal } from 'solid-js'
+
+export const CopyStatus = () => {
+  const [copyCount, setCopyCount] = createSignal(0)
+
+  return (
+    <Clipboard.Root
+      value="https://ark-ui.com"
+      onStatusChange={(details) => {
+        if (details.copied) {
+          setCopyCount((prev) => prev + 1)
+        }
+      }}
+    >
+      <Clipboard.Trigger>
+        <Clipboard.Indicator>
+          <Show when={false} fallback={<ClipboardCopyIcon />}>
+            <CheckIcon />
+          </Show>
+        </Clipboard.Indicator>
+        Copy
+      </Clipboard.Trigger>
+      <p>Copied {copyCount()} times</p>
+    </Clipboard.Root>
+  )
+}

packages/svelte/src/lib/components/clipboard/clipboard.stories.ts

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/svelte'
 import BasicExample from './examples/basic.svelte'
 import ContextExample from './examples/context.svelte'
 import ControlledExample from './examples/controlled.svelte'
+import CopyStatusExample from './examples/copy-status.svelte'
 import CustomTimeoutExample from './examples/custom-timeout.svelte'
 import ProgrammaticExample from './examples/programmatic.svelte'
 import RootProviderExample from './examples/root-provider.svelte'
@@ -31,6 +32,12 @@ export const Controlled = {
   }),
 }
 
+export const CopyStatus = {
+  render: () => ({
+    Component: CopyStatusExample,
+  }),
+}
+
 export const CustomTimeout = {
   render: () => ({
     Component: CustomTimeoutExample,

packages/svelte/src/lib/components/clipboard/examples/copy-status.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
+  import { Clipboard } from '@ark-ui/svelte/clipboard'
+  
+  let copyCount = $state(0)
+</script>
+
+<Clipboard.Root 
+  value="https://ark-ui.com"
+  onStatusChange={(details) => {
+    if (details.copied) {
+      copyCount += 1
+    }
+  }}
+>
+  <Clipboard.Trigger>
+    <Clipboard.Indicator>
+      <ClipboardCopyIcon />
+      {#snippet copied()}
+        <CheckIcon />
+      {/snippet}
+    </Clipboard.Indicator>
+    Copy
+  </Clipboard.Trigger>
+  <p>Copied {copyCount} times</p>
+</Clipboard.Root>

packages/vue/src/components/clipboard/clipboard.stories.vue

@@ -2,6 +2,7 @@
 import Basic from './examples/basic.vue'
 import Context from './examples/context.vue'
 import Controlled from './examples/controlled.vue'
+import CopyStatus from './examples/copy-status.vue'
 import CustomTimeout from './examples/custom-timeout.vue'
 import Programmatic from './examples/programmatic.vue'
 import RootProvider from './examples/root-provider.vue'
@@ -18,6 +19,9 @@ import ValueText from './examples/value-text.vue'
     <Variant title="Controlled">
       <Controlled />
     </Variant>
+    <Variant title="CopyStatus">
+      <CopyStatus />
+    </Variant>
     <Variant title="CustomTimeout">
       <CustomTimeout />
     </Variant>

packages/vue/src/components/clipboard/examples/copy-status.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Clipboard } from '@ark-ui/vue/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const copyCount = ref(0)
+</script>
+
+<template>
+  <Clipboard.Root
+    default-value="https://ark-ui.com"
+    @status-change="
+      (details) => {
+        if (details.copied) {
+          copyCount += 1
+        }
+      }
+    "
+  >
+    <Clipboard.Trigger>
+      <Clipboard.Indicator>
+        <ClipboardCopyIcon />
+        <template #copied>
+          <CheckIcon />
+        </template>
+      </Clipboard.Indicator>
+      Copy
+    </Clipboard.Trigger>
+    <p>Copied {{ copyCount }} times</p>
+  </Clipboard.Root>
+</template>

website/src/content/pages/components/clipboard.mdx

@@ -29,6 +29,13 @@ Access the clipboard state and methods using `Clipboard.Context`. This provides
 
 <Example id="context" />
 
+### Copy Status
+
+Use the `onStatusChange` prop to listen for copy operations. It exposes a `copied` property that you can use to display
+a success message.
+
+<Example id="copy-status" />
+
 ### Controlled
 
 Control the clipboard value externally by managing the state yourself and using `onValueChange` to handle updates.