Add copyable element

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/astro-components/ComponentNavItem.astro

@@ -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/astro-components/Examples/Copyable.astro

@@ -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/astro-components/Layout.astro

@@ -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/content/hyperkit-elements/copyable.mdoc

@@ -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>
+```

packages/docs/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { Picture } from "astro:assets";
-import robot from "../assets/robot.png";
+import darkRocket from "../assets/rockets/dark.png";
+import lightRocket from "../assets/rockets/light.png";
 import Layout from "../astro-components/Layout.astro";
 import { getComponentTree } from "../utils/component-tree";
 
@@ -10,10 +11,17 @@ const tree = await getComponentTree();
 <Layout>
   <div class="flex flex-col items-center justify-end relative">
     <Picture
-      src={robot}
+      src={lightRocket}
       format="webp"
       alt=""
-      class="w-full max-w-5xl"
+      class="w-full max-w-5xl dark:hidden"
+      widths={[375, 750, 1200, 1500]}
+    />
+    <Picture
+      src={darkRocket}
+      format="webp"
+      alt=""
+      class="w-full max-w-5xl hidden dark:block"
       widths={[375, 750, 1200, 1500]}
     />
     <div class="lg:absolute z-40">
@@ -24,7 +32,7 @@ lg:[text-shadow:_0_1px_50px_rgb(255_255_255/_100%)] dark:[text-shadow:_0_1px_30p
         <h1
           class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black mb-4 lg:mb-6 xl:mb-8"
         >
-          Headless Elements, Supercharged UIs
+          Headless Elements, Supercharged Sites
         </h1>
         <p class="md:text-lg lg:text-xl xl:text-2xl">
           A suite of unstyled custom elements designed for building rich,
@@ -36,11 +44,40 @@ lg:[text-shadow:_0_1px_50px_rgb(255_255_255/_100%)] dark:[text-shadow:_0_1px_30p
       </div>
     </div>
   </div>
-  <div
-    class="bg-zinc-950 dark:bg-white border border-zinc-700 dark:border-zinc-400 rounded shadow-md px-4 py-2 mr-auto lg:mx-auto white-space-no-wrap text-zinc-100 dark:text-zinc-950 text-sm lg:text-base font-medium"
-  >
-    bun add @hyperkitxyz/elements
-  </div>
+  <hyperkit-copyable value="bun add @hyperkitxyz/elements">
+    <button
+      class="group flex items-center gap-x-2 bg-zinc-950 dark:bg-white border border-zinc-700 dark:border-zinc-400 rounded shadow-md px-4 py-2 mr-auto lg:mx-auto white-space-no-wrap text-zinc-100 dark:text-zinc-950 text-sm lg:text-base font-medium"
+    >
+      bun add @hyperkitxyz/elements
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-5 group-data-[copied]:hidden"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+        ></path>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-5 hidden group-data-[copied]:block"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m4.5 12.75 6 6 9-13.5"></path>
+      </svg>
+    </button>
+  </hyperkit-copyable>
   <div class="flex items-center justify-center w-full max-w-3xl">
     <div class="relative flex items-center w-full max-w-screen-lg">
       <div
@@ -117,4 +154,5 @@ lg:[text-shadow:_0_1px_50px_rgb(255_255_255/_100%)] dark:[text-shadow:_0_1px_30p
 </Layout>
 <script>
   import "@hyperkitxyz/elements/detail.ts";
+  import "@hyperkitxyz/elements/copyable.ts";
 </script>

packages/docs/src/utils/component-tree.ts

@@ -3,6 +3,7 @@ import { getEntry } from "astro:content";
 export async function getComponentTree() {
 	const groups = {
 		UI: ["modal", "popover", "detail"],
+		UX: ["copyable"],
 		Form: [
 			"select",
 			"sortable",

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hyperkitxyz/elements",
 	"main": "./src/index.ts",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/hyperlaunch/hyperkit.git"

packages/elements/src/copyable.ts

@@ -0,0 +1,36 @@
+import { HyperkitElement } from "./hyperkit-element";
+
+export class HyperkitCopyable extends HyperkitElement<{
+	events: { type: "copied"; detail: { value: string } };
+	propagatedEvents: undefined;
+	propTypes: { value: "string" };
+}> {
+	requiredChildren = ["button"];
+	public propTypes = { value: "string" } as const;
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		requestAnimationFrame(() => {
+			const button = this.querySelector<HTMLButtonElement>("button");
+			const valueToCopy = this.prop("value");
+
+			const copyHandler = async () => {
+				if (!button) return;
+
+				try {
+					await navigator.clipboard.writeText(valueToCopy);
+					button.dataset.copied = "";
+					this.fire("copied", { detail: { value: valueToCopy } });
+				} catch (error) {
+					console.error(error, this);
+				}
+			};
+
+			button?.addEventListener("click", copyHandler);
+		});
+	}
+}
+
+if (!customElements.get("hyperkit-copyable"))
+	customElements.define("hyperkit-copyable", HyperkitCopyable);

vercel.json

@@ -0,0 +1,9 @@
+{
+	"rewrites": [
+		{
+			"source": "/ingest/:path(.*)",
+			"destination": "https://eu.posthog.com/:path*"
+		}
+	],
+	"trailingSlash": false
+}