docs: clipboard

Author: segunadebayo

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

@@ -10,5 +10,6 @@ export { Basic } from './examples/basic'
 export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
 export { CustomTimeout } from './examples/custom-timeout'
+export { Programmatic } from './examples/programmatic'
 export { RootProvider } from './examples/root-provider'
 export { ValueText } from './examples/value-text'

packages/react/src/components/clipboard/examples/programmatic.tsx

@@ -0,0 +1,11 @@
+import { Clipboard } from '@ark-ui/react/clipboard'
+
+export const Programmatic = () => {
+  return (
+    <Clipboard.Root value="https://ark-ui.com">
+      <Clipboard.Context>
+        {(clipboard) => <button onClick={() => clipboard.copy()}>{clipboard.copied ? 'Copied!' : 'Copy URL'}</button>}
+      </Clipboard.Context>
+    </Clipboard.Root>
+  )
+}

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

@@ -10,5 +10,6 @@ export { Basic } from './examples/basic'
 export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
 export { CustomTimeout } from './examples/custom-timeout'
+export { Programmatic } from './examples/programmatic'
 export { RootProvider } from './examples/root-provider'
 export { ValueText } from './examples/value-text'

packages/solid/src/components/clipboard/examples/programmatic.tsx

@@ -0,0 +1,13 @@
+import { Clipboard } from '@ark-ui/solid/clipboard'
+
+export const Programmatic = () => {
+  return (
+    <Clipboard.Root value="https://ark-ui.com">
+      <Clipboard.Context>
+        {(clipboard) => (
+          <button onClick={() => clipboard().copy()}>{clipboard().copied ? 'Copied!' : 'Copy URL'}</button>
+        )}
+      </Clipboard.Context>
+    </Clipboard.Root>
+  )
+}

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

@@ -3,6 +3,7 @@ import BasicExample from './examples/basic.svelte'
 import ContextExample from './examples/context.svelte'
 import ControlledExample from './examples/controlled.svelte'
 import CustomTimeoutExample from './examples/custom-timeout.svelte'
+import ProgrammaticExample from './examples/programmatic.svelte'
 import RootProviderExample from './examples/root-provider.svelte'
 import ValueTextExample from './examples/value-text.svelte'
 
@@ -36,6 +37,12 @@ export const CustomTimeout = {
   }),
 }
 
+export const Programmatic = {
+  render: () => ({
+    Component: ProgrammaticExample,
+  }),
+}
+
 export const RootProvider = {
   render: () => ({
     Component: RootProviderExample,

packages/svelte/src/lib/components/clipboard/examples/programmatic.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Clipboard } from '@ark-ui/svelte/clipboard'
+</script>
+
+<Clipboard.Root value="https://ark-ui.com">
+  <Clipboard.Context>
+    {#snippet render(clipboard)}
+      <button onclick={() => clipboard().copy()}>
+        {clipboard().copied ? 'Copied!' : 'Copy URL'}
+      </button>
+    {/snippet}
+  </Clipboard.Context>
+</Clipboard.Root>

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

@@ -3,6 +3,7 @@ import Basic from './examples/basic.vue'
 import Context from './examples/context.vue'
 import Controlled from './examples/controlled.vue'
 import CustomTimeout from './examples/custom-timeout.vue'
+import Programmatic from './examples/programmatic.vue'
 import RootProvider from './examples/root-provider.vue'
 import ValueText from './examples/value-text.vue'
 </script>
@@ -20,6 +21,9 @@ import ValueText from './examples/value-text.vue'
     <Variant title="CustomTimeout">
       <CustomTimeout />
     </Variant>
+    <Variant title="Programmatic">
+      <Programmatic />
+    </Variant>
     <Variant title="RootProvider">
       <RootProvider />
     </Variant>

packages/vue/src/components/clipboard/examples/programmatic.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Clipboard } from '@ark-ui/vue/clipboard'
+</script>
+
+<template>
+  <Clipboard.Root default-value="https://ark-ui.com">
+    <Clipboard.Context v-slot="clipboard">
+      <button @click="clipboard.copy()">
+        {{ clipboard.copied ? 'Copied!' : 'Copy URL' }}
+      </button>
+    </Clipboard.Context>
+  </Clipboard.Root>
+</template>

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

@@ -25,6 +25,8 @@ Learn how to use the `Clipboard` component in your project. Let's take a look at
 Access the clipboard state and methods using `Clipboard.Context`. This provides access to properties like `copied`,
 `value`, and `setValue`
 
+> Alternatively, you can use the `useClipboardContext` hook to access the clipboard context.
+
 <Example id="context" />
 
 ### Controlled
@@ -48,6 +50,12 @@ Configure the copy status timeout duration using the `timeout` prop. Default is
 
 <Example id="custom-timeout" />
 
+### Programmatic Copy
+
+Trigger copy operations programmatically using the context's `copy()` method.
+
+<Example id="programmatic" />
+
 ### Value Text
 
 Use `Clipboard.ValueText` to display the current clipboard value.