docs: clipboard

Author: segunadebayo

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

@@ -11,3 +11,4 @@ export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
 export { CustomTimeout } from './examples/custom-timeout'
 export { RootProvider } from './examples/root-provider'
+export { ValueText } from './examples/value-text'

packages/react/src/components/clipboard/examples/value-text.tsx

@@ -0,0 +1,16 @@
+import { Clipboard } from '@ark-ui/react/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
+
+export const ValueText = () => {
+  return (
+    <Clipboard.Root value="https://ark-ui.com">
+      <Clipboard.ValueText />
+      <Clipboard.Trigger>
+        <Clipboard.Indicator copied={<CheckIcon />}>
+          <ClipboardCopyIcon />
+        </Clipboard.Indicator>
+        Copy
+      </Clipboard.Trigger>
+    </Clipboard.Root>
+  )
+}

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

@@ -11,3 +11,4 @@ export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
 export { CustomTimeout } from './examples/custom-timeout'
 export { RootProvider } from './examples/root-provider'
+export { ValueText } from './examples/value-text'

packages/solid/src/components/clipboard/examples/value-text.tsx

@@ -0,0 +1,19 @@
+import { Clipboard } from '@ark-ui/solid/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
+import { Show } from 'solid-js'
+
+export const ValueText = () => {
+  return (
+    <Clipboard.Root value="https://ark-ui.com">
+      <Clipboard.ValueText />
+      <Clipboard.Trigger>
+        <Clipboard.Indicator>
+          <Show when={false} fallback={<ClipboardCopyIcon />}>
+            <CheckIcon />
+          </Show>
+        </Clipboard.Indicator>
+        Copy
+      </Clipboard.Trigger>
+    </Clipboard.Root>
+  )
+}

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

@@ -4,6 +4,7 @@ import ContextExample from './examples/context.svelte'
 import ControlledExample from './examples/controlled.svelte'
 import CustomTimeoutExample from './examples/custom-timeout.svelte'
 import RootProviderExample from './examples/root-provider.svelte'
+import ValueTextExample from './examples/value-text.svelte'
 
 const meta: Meta = {
   title: 'Components/Clipboard',
@@ -40,3 +41,9 @@ export const RootProvider = {
     Component: RootProviderExample,
   }),
 }
+
+export const ValueText = {
+  render: () => ({
+    Component: ValueTextExample,
+  }),
+}

packages/svelte/src/lib/components/clipboard/examples/value-text.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
+  import { Clipboard } from '@ark-ui/svelte/clipboard'
+</script>
+
+<Clipboard.Root value="https://ark-ui.com">
+  <Clipboard.ValueText />
+  <Clipboard.Trigger>
+    <Clipboard.Indicator>
+      <ClipboardCopyIcon />
+      {#snippet copied()}
+        <CheckIcon />
+      {/snippet}
+    </Clipboard.Indicator>
+    Copy
+  </Clipboard.Trigger>
+</Clipboard.Root>

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

@@ -4,6 +4,7 @@ import Context from './examples/context.vue'
 import Controlled from './examples/controlled.vue'
 import CustomTimeout from './examples/custom-timeout.vue'
 import RootProvider from './examples/root-provider.vue'
+import ValueText from './examples/value-text.vue'
 </script>
 <template>
   <Story title="Clipboard">
@@ -22,5 +23,8 @@ import RootProvider from './examples/root-provider.vue'
     <Variant title="RootProvider">
       <RootProvider />
     </Variant>
+    <Variant title="ValueText">
+      <ValueText />
+    </Variant>
   </Story>
 </template>

packages/vue/src/components/clipboard/examples/value-text.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Clipboard } from '@ark-ui/vue/clipboard'
+import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Clipboard.Root default-value="https://ark-ui.com">
+    <Clipboard.ValueText />
+    <Clipboard.Trigger>
+      <Clipboard.Indicator>
+        <ClipboardCopyIcon />
+        <template #copied>
+          <CheckIcon />
+        </template>
+      </Clipboard.Indicator>
+      Copy
+    </Clipboard.Trigger>
+  </Clipboard.Root>
+</template>

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

@@ -48,6 +48,12 @@ Configure the copy status timeout duration using the `timeout` prop. Default is
 
 <Example id="custom-timeout" />
 
+### Value Text
+
+Use `Clipboard.ValueText` to display the current clipboard value.
+
+<Example id="value-text" />
+
 ## API Reference
 
 <ComponentTypes id="clipboard" />