Add copyable element

Author: chrsgrrtt

README.md

@@ -5,7 +5,7 @@ A collection of unstyled, headless custom elements designed to make building ric
 ## Overview
 
 **Hyperkit**  
-Version: 0.0.1  
+Version: 0.0.2  
 [Github](https://github.com/hyperlaunch/hyperkit)
 
 **Headless Elements, Supercharged UIs**  

packages/docs/markdoc.config.ts

@@ -110,6 +110,9 @@ export default defineMarkdocConfig({
 				"./src/astro-components/Examples/FieldsetRepeater/TransitionFieldsetRepeater.astro",
 			),
 		},
+		copyable: {
+			render: component("./src/astro-components/Examples/Copyable.astro"),
+		},
 	},
 	extends: [
 		shiki({

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyperkitxyz/docs",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"dependencies": {
 		"@fontsource/poppins": "^5.1.0",
 		"@hyperkitxyz/elements": "workspace:*",

packages/docs/src/assets/robot.png

@@ -4,7 +4,8 @@ type Props = {
 };
 
 const { href } = Astro.props;
-const active = Astro.url.pathname === href;
+const normalize = (str: string) => str.replace(/^\/+|\/+$/g, "");
+const active = normalize(Astro.url.pathname) === normalize(href);
 ---
 
 <li class="pb-2 last:pb-0">

packages/docs/src/assets/rockets/dark.png

@@ -0,0 +1,11 @@
+<hyperkit-copyable value="https://www.hyperkit.xyz/">
+  <button
+    class="group px-4 py-2 bg-white text-xs text-gray-800 rounded shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200"
+  >
+    <span class="group-data-[copied]:hidden">Copy</span>
+    <span class="hidden group-data-[copied]:block">Copied</span>
+  </button>
+</hyperkit-copyable>
+<script>
+  import "@hyperkitxyz/elements/copyable.ts";
+</script>

packages/docs/src/assets/rockets/light.png

@@ -73,7 +73,7 @@ const pageTitle = [title, name].filter(Boolean).join(" — ");
         <span
           class="px-2 py-1 text-xs font-medium shadow-sm rounded-full bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200"
         >
-          0.0.1
+          0.0.2
         </span>
       </h1>
 

packages/docs/src/astro-components/ComponentNavItem.astro

@@ -0,0 +1,83 @@
+---
+name: Copyable  
+tagline: A button that allows easy copying of text to the clipboard.
+thumbnail: "./thumbnails/modal.png"
+---
+
+The `<hyperkit-copyable />` element provides an easy way to copy specified text to the user's clipboard. It wraps a button element, which, when clicked, copies the provided text value to the clipboard. Additionally, it fires a `copied` event when the action is successful and sets a `data-copied` attribute on the button.
+
+{% example hero=true %}{% copyable / %}{% /example %}
+
+## Usage
+
+Import the JS:
+```js
+import "@hyperkitxyz/elements/copyable";
+```
+
+Tag:
+```html
+<hyperkit-copyable value="Text to copy">
+	<button>Copy</button>
+</hyperkit-copyable>
+```
+
+### Options
+
+{% table %}
+* Attribute
+* Value
+* 
+---
+* `value`
+* String _(required)_
+* Specifies the text that will be copied to the clipboard when the button is clicked.
+---
+{% /table %}
+
+### Children
+
+```html
+<hyperkit-copyable value="Text to copy">
+  <button>Copy</button>
+</hyperkit-copyable>
+```
+
+#### `<button />`
+* The button that triggers the copy action when clicked.
+* Can be styled according to your needs and can contain any text or content.
+
+## JavaScript API
+
+The `hyperkit-copyable` element provides a simple JavaScript API to interact with its functionality and listen for events.
+
+### Listening for the `copied` Event
+
+The element emits a `copied` event whenever the text is successfully copied to the clipboard. You can listen for this event to respond to the copy action:
+
+```js
+const copyable = document.querySelector("hyperkit-copyable");
+
+copyable.on("copied", (event) => {
+  console.log("Copied value:", event.detail.value);
+});
+```
+
+## Examples
+
+### Styling the button
+
+This example shows how you can use the data-copied attribute to toggle the visible text when the button is used.
+
+{% example %}{% copyable / %}{% /example %}
+
+```html
+<hyperkit-copyable value="https://www.hyperkit.xyz/">
+  <button
+    class="group px-4 py-2 bg-white text-xs text-gray-800 rounded shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200"
+  >
+    <span class="group-data-[copied]:hidden">Copy</span>
+    <span class="hidden group-data-[copied]:block">Copied</span>
+  </button>
+</hyperkit-copyable>
+```