@zag-js/clipboard 0.0.0-dev-20240202223441

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @zag-js/clipboard
+
+Core logic for the clipboard widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/clipboard
+# or
+npm i @zag-js/clipboard
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, CommonProperties, PropTypes, Context, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "indicator">;
+
+interface CopyStatusDetails {
+    copied: boolean;
+}
+interface PublicContext extends CommonProperties {
+    /**
+     * The value to be copied to the clipboard
+     */
+    value: string;
+    /**
+     * The function to be called when the value is copied to the clipboard
+     */
+    onCopyStatusChange?: (details: CopyStatusDetails) => void;
+    /**
+     * The timeout for the copy operation
+     */
+    timeout: number;
+}
+type PrivateContext = Context<{}>;
+type ComputedContext = Readonly<{}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: "idle" | "copied";
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+interface IndicatorProps {
+    copied: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value to be copied to the clipboard
+     */
+    value: string;
+    /**
+     * Set the value to be copied to the clipboard
+     */
+    setValue(value: string): void;
+    /**
+     * The props for the trigger button
+     */
+    triggerProps: T["button"];
+    /**
+     * The props for the indicator
+     */
+    getIndicatorProps(props: IndicatorProps): T["element"];
+    /**
+     * Whether the value has been copied to the clipboard
+     */
+    isCopied: boolean;
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { type UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, CommonProperties, PropTypes, Context, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "indicator">;
+
+interface CopyStatusDetails {
+    copied: boolean;
+}
+interface PublicContext extends CommonProperties {
+    /**
+     * The value to be copied to the clipboard
+     */
+    value: string;
+    /**
+     * The function to be called when the value is copied to the clipboard
+     */
+    onCopyStatusChange?: (details: CopyStatusDetails) => void;
+    /**
+     * The timeout for the copy operation
+     */
+    timeout: number;
+}
+type PrivateContext = Context<{}>;
+type ComputedContext = Readonly<{}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: "idle" | "copied";
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+interface IndicatorProps {
+    copied: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value to be copied to the clipboard
+     */
+    value: string;
+    /**
+     * Set the value to be copied to the clipboard
+     */
+    setValue(value: string): void;
+    /**
+     * The props for the trigger button
+     */
+    triggerProps: T["button"];
+    /**
+     * The props for the indicator
+     */
+    getIndicatorProps(props: IndicatorProps): T["element"];
+    /**
+     * Whether the value has been copied to the clipboard
+     */
+    isCopied: boolean;
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { type UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/clipboard.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("clipboard").parts("trigger", "indicator");
+var parts = anatomy.build();
+
+// src/clipboard.connect.ts
+var import_dom_query = require("@zag-js/dom-query");
+function connect(state, send, normalize) {
+  const isCopied = state.matches("copied");
+  return {
+    isCopied,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    triggerProps: normalize.button({
+      ...parts.trigger,
+      "data-copied": (0, import_dom_query.dataAttr)(isCopied),
+      onClick() {
+        send({ type: "COPY" });
+      }
+    }),
+    getIndicatorProps(props) {
+      return normalize.element({
+        ...parts.indicator,
+        hidden: props.copied !== isCopied
+      });
+    }
+  };
+}
+
+// src/clipboard.machine.ts
+var import_core = require("@zag-js/core");
+var import_utils2 = require("@zag-js/utils");
+
+// src/clipboard.dom.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+function createNode(doc, text) {
+  const node = doc.createElement("pre");
+  Object.assign(node.style, {
+    width: "1px",
+    height: "1px",
+    position: "fixed",
+    top: "5px"
+  });
+  node.textContent = text;
+  return node;
+}
+var dom = (0, import_dom_query2.createScope)({
+  getRootId: (ctx) => `clip-${ctx.id}`,
+  getTriggerId: (ctx) => `clip-trigger-${ctx.id}`,
+  getIndicatorId: (ctx) => `clip-indicator-${ctx.id}`,
+  writeToClipboard: (ctx) => copyText(dom.getDoc(ctx), ctx.value)
+});
+function copyNode(node) {
+  const win = (0, import_dom_query2.getWindow)(node);
+  const selection = win.getSelection();
+  if (selection == null) {
+    return Promise.reject(new Error());
+  }
+  selection.removeAllRanges();
+  const doc = node.ownerDocument;
+  const range = doc.createRange();
+  range.selectNodeContents(node);
+  selection.addRange(range);
+  doc.execCommand("copy");
+  selection.removeAllRanges();
+  return Promise.resolve();
+}
+function copyText(doc, text) {
+  const win = doc.defaultView || window;
+  if ((0, import_utils.hasProp)(win.navigator, "clipboard")) {
+    return win.navigator.clipboard.writeText(text);
+  }
+  if (!doc.body) {
+    return Promise.reject(new Error());
+  }
+  const node = createNode(doc, text);
+  doc.body.appendChild(node);
+  copyNode(node);
+  doc.body.removeChild(node);
+  return Promise.resolve();
+}
+
+// src/clipboard.machine.ts
+function machine(userContext) {
+  const ctx = (0, import_utils2.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      id: "clipboard",
+      initial: "idle",
+      context: {
+        value: "",
+        timeout: 3e3,
+        ...ctx
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"]
+            }
+          }
+        },
+        copied: {
+          after: {
+            COPY_TIMEOUT: "idle"
+          },
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"]
+            }
+          }
+        }
+      }
+    },
+    {
+      actions: {
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        copyToClipboard(ctx2) {
+          dom.writeToClipboard(ctx2);
+        },
+        invokeOnCopied(ctx2) {
+          ctx2.onCopyStatusChange?.({ copied: true });
+        }
+      },
+      delays: {
+        COPY_TIMEOUT: (ctx2) => ctx2.timeout
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.machine.ts","../src/clipboard.dom.ts"],"sourcesContent":["export { anatomy } from \"./clipboard.anatomy\"\nexport { connect } from \"./clipboard.connect\"\nexport { machine } from \"./clipboard.machine\"\nexport type { UserDefinedContext as Context } from \"./clipboard.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"trigger\", \"indicator\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./clipboard.anatomy\"\nimport type { MachineApi, Send, State } from \"./clipboard.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const isCopied = state.matches(\"copied\")\n\n  return {\n    isCopied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    triggerProps: normalize.button({\n      ...parts.trigger,\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator,\n        hidden: props.copied !== isCopied,\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./clipboard.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./clipboard.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"clipboard\",\n      initial: \"idle\",\n      context: {\n        value: \"\",\n        timeout: 3000,\n        ...ctx,\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopied\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopied\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      actions: {\n        setValue(ctx, evt) {\n          ctx.value = evt.value\n        },\n        copyToClipboard(ctx) {\n          dom.writeToClipboard(ctx)\n        },\n        invokeOnCopied(ctx) {\n          ctx.onCopyStatusChange?.({ copied: true })\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport { hasProp } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nfunction createNode(doc: Document, text: string): HTMLElement {\n  const node = doc.createElement(\"pre\")\n  Object.assign(node.style, {\n    width: \"1px\",\n    height: \"1px\",\n    position: \"fixed\",\n    top: \"5px\",\n  })\n  node.textContent = text\n  return node\n}\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => `clip-${ctx.id}`,\n  getTriggerId: (ctx: Ctx) => `clip-trigger-${ctx.id}`,\n  getIndicatorId: (ctx: Ctx) => `clip-indicator-${ctx.id}`,\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\n\nfunction copyNode(node: HTMLElement): Promise<void> {\n  const win = getWindow(node)\n\n  const selection = win.getSelection()\n\n  if (selection == null) {\n    return Promise.reject(new Error())\n  }\n\n  selection.removeAllRanges()\n\n  const doc = node.ownerDocument\n\n  const range = doc.createRange()\n  range.selectNodeContents(node)\n  selection.addRange(range)\n\n  doc.execCommand(\"copy\")\n  selection.removeAllRanges()\n\n  return Promise.resolve()\n}\n\nfunction copyText(doc: Document, text: string): Promise<void> {\n  const win = doc.defaultView || window\n\n  if (hasProp(win.navigator, \"clipboard\")) {\n    return win.navigator.clipboard.writeText(text)\n  }\n\n  if (!doc.body) {\n    return Promise.reject(new Error())\n  }\n\n  const node = createNode(doc, text)\n\n  doc.body.appendChild(node)\n  copyNode(node)\n  doc.body.removeChild(node)\n\n  return Promise.resolve()\n}\n"],"mappings":"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","names":["import_utils","import_dom_query","ctx"]}

package/dist/index.mjs

@@ -0,0 +1,148 @@
+// src/clipboard.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("clipboard").parts("trigger", "indicator");
+var parts = anatomy.build();
+
+// src/clipboard.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+function connect(state, send, normalize) {
+  const isCopied = state.matches("copied");
+  return {
+    isCopied,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    triggerProps: normalize.button({
+      ...parts.trigger,
+      "data-copied": dataAttr(isCopied),
+      onClick() {
+        send({ type: "COPY" });
+      }
+    }),
+    getIndicatorProps(props) {
+      return normalize.element({
+        ...parts.indicator,
+        hidden: props.copied !== isCopied
+      });
+    }
+  };
+}
+
+// src/clipboard.machine.ts
+import { createMachine } from "@zag-js/core";
+import { compact } from "@zag-js/utils";
+
+// src/clipboard.dom.ts
+import { createScope, getWindow } from "@zag-js/dom-query";
+import { hasProp } from "@zag-js/utils";
+function createNode(doc, text) {
+  const node = doc.createElement("pre");
+  Object.assign(node.style, {
+    width: "1px",
+    height: "1px",
+    position: "fixed",
+    top: "5px"
+  });
+  node.textContent = text;
+  return node;
+}
+var dom = createScope({
+  getRootId: (ctx) => `clip-${ctx.id}`,
+  getTriggerId: (ctx) => `clip-trigger-${ctx.id}`,
+  getIndicatorId: (ctx) => `clip-indicator-${ctx.id}`,
+  writeToClipboard: (ctx) => copyText(dom.getDoc(ctx), ctx.value)
+});
+function copyNode(node) {
+  const win = getWindow(node);
+  const selection = win.getSelection();
+  if (selection == null) {
+    return Promise.reject(new Error());
+  }
+  selection.removeAllRanges();
+  const doc = node.ownerDocument;
+  const range = doc.createRange();
+  range.selectNodeContents(node);
+  selection.addRange(range);
+  doc.execCommand("copy");
+  selection.removeAllRanges();
+  return Promise.resolve();
+}
+function copyText(doc, text) {
+  const win = doc.defaultView || window;
+  if (hasProp(win.navigator, "clipboard")) {
+    return win.navigator.clipboard.writeText(text);
+  }
+  if (!doc.body) {
+    return Promise.reject(new Error());
+  }
+  const node = createNode(doc, text);
+  doc.body.appendChild(node);
+  copyNode(node);
+  doc.body.removeChild(node);
+  return Promise.resolve();
+}
+
+// src/clipboard.machine.ts
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "clipboard",
+      initial: "idle",
+      context: {
+        value: "",
+        timeout: 3e3,
+        ...ctx
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"]
+            }
+          }
+        },
+        copied: {
+          after: {
+            COPY_TIMEOUT: "idle"
+          },
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"]
+            }
+          }
+        }
+      }
+    },
+    {
+      actions: {
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        copyToClipboard(ctx2) {
+          dom.writeToClipboard(ctx2);
+        },
+        invokeOnCopied(ctx2) {
+          ctx2.onCopyStatusChange?.({ copied: true });
+        }
+      },
+      delays: {
+        COPY_TIMEOUT: (ctx2) => ctx2.timeout
+      }
+    }
+  );
+}
+export {
+  anatomy,
+  connect,
+  machine
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.machine.ts","../src/clipboard.dom.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"trigger\", \"indicator\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./clipboard.anatomy\"\nimport type { MachineApi, Send, State } from \"./clipboard.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const isCopied = state.matches(\"copied\")\n\n  return {\n    isCopied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    triggerProps: normalize.button({\n      ...parts.trigger,\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator,\n        hidden: props.copied !== isCopied,\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./clipboard.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./clipboard.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"clipboard\",\n      initial: \"idle\",\n      context: {\n        value: \"\",\n        timeout: 3000,\n        ...ctx,\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopied\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopied\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      actions: {\n        setValue(ctx, evt) {\n          ctx.value = evt.value\n        },\n        copyToClipboard(ctx) {\n          dom.writeToClipboard(ctx)\n        },\n        invokeOnCopied(ctx) {\n          ctx.onCopyStatusChange?.({ copied: true })\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport { hasProp } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nfunction createNode(doc: Document, text: string): HTMLElement {\n  const node = doc.createElement(\"pre\")\n  Object.assign(node.style, {\n    width: \"1px\",\n    height: \"1px\",\n    position: \"fixed\",\n    top: \"5px\",\n  })\n  node.textContent = text\n  return node\n}\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => `clip-${ctx.id}`,\n  getTriggerId: (ctx: Ctx) => `clip-trigger-${ctx.id}`,\n  getIndicatorId: (ctx: Ctx) => `clip-indicator-${ctx.id}`,\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\n\nfunction copyNode(node: HTMLElement): Promise<void> {\n  const win = getWindow(node)\n\n  const selection = win.getSelection()\n\n  if (selection == null) {\n    return Promise.reject(new Error())\n  }\n\n  selection.removeAllRanges()\n\n  const doc = node.ownerDocument\n\n  const range = doc.createRange()\n  range.selectNodeContents(node)\n  selection.addRange(range)\n\n  doc.execCommand(\"copy\")\n  selection.removeAllRanges()\n\n  return Promise.resolve()\n}\n\nfunction copyText(doc: Document, text: string): Promise<void> {\n  const win = doc.defaultView || window\n\n  if (hasProp(win.navigator, \"clipboard\")) {\n    return win.navigator.clipboard.writeText(text)\n  }\n\n  if (!doc.body) {\n    return Promise.reject(new Error())\n  }\n\n  const node = createNode(doc, text)\n\n  doc.body.appendChild(node)\n  copyNode(node)\n  doc.body.removeChild(node)\n\n  return Promise.resolve()\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,WAAW,EAAE,MAAM,WAAW,WAAW;AAEvE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,SAAS,gBAAgB;AAKlB,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,WAAW,MAAM,QAAQ,QAAQ;AAEvC,SAAO;AAAA,IACL;AAAA,IACA,OAAO,MAAM,QAAQ;AAAA,IACrB,SAAS,OAAO;AACd,WAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,IACnC;AAAA,IACA,cAAc,UAAU,OAAO;AAAA,MAC7B,GAAG,MAAM;AAAA,MACT,eAAe,SAAS,QAAQ;AAAA,MAChC,UAAU;AACR,aAAK,EAAE,MAAM,OAAO,CAAC;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,IACD,kBAAkB,OAAO;AACvB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM;AAAA,QACT,QAAQ,MAAM,WAAW;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AC5BA,SAAS,qBAAqB;AAC9B,SAAS,eAAe;;;ACDxB,SAAS,aAAa,iBAAiB;AACvC,SAAS,eAAe;AAGxB,SAAS,WAAW,KAAe,MAA2B;AAC5D,QAAM,OAAO,IAAI,cAAc,KAAK;AACpC,SAAO,OAAO,KAAK,OAAO;AAAA,IACxB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,EACP,CAAC;AACD,OAAK,cAAc;AACnB,SAAO;AACT;AAEO,IAAM,MAAM,YAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,QAAQ,IAAI,EAAE;AAAA,EACvC,cAAc,CAAC,QAAa,gBAAgB,IAAI,EAAE;AAAA,EAClD,gBAAgB,CAAC,QAAa,kBAAkB,IAAI,EAAE;AAAA,EACtD,kBAAkB,CAAC,QAAa,SAAS,IAAI,OAAO,GAAG,GAAG,IAAI,KAAK;AACrE,CAAC;AAED,SAAS,SAAS,MAAkC;AAClD,QAAM,MAAM,UAAU,IAAI;AAE1B,QAAM,YAAY,IAAI,aAAa;AAEnC,MAAI,aAAa,MAAM;AACrB,WAAO,QAAQ,OAAO,IAAI,MAAM,CAAC;AAAA,EACnC;AAEA,YAAU,gBAAgB;AAE1B,QAAM,MAAM,KAAK;AAEjB,QAAM,QAAQ,IAAI,YAAY;AAC9B,QAAM,mBAAmB,IAAI;AAC7B,YAAU,SAAS,KAAK;AAExB,MAAI,YAAY,MAAM;AACtB,YAAU,gBAAgB;AAE1B,SAAO,QAAQ,QAAQ;AACzB;AAEA,SAAS,SAAS,KAAe,MAA6B;AAC5D,QAAM,MAAM,IAAI,eAAe;AAE/B,MAAI,QAAQ,IAAI,WAAW,WAAW,GAAG;AACvC,WAAO,IAAI,UAAU,UAAU,UAAU,IAAI;AAAA,EAC/C;AAEA,MAAI,CAAC,IAAI,MAAM;AACb,WAAO,QAAQ,OAAO,IAAI,MAAM,CAAC;AAAA,EACnC;AAEA,QAAM,OAAO,WAAW,KAAK,IAAI;AAEjC,MAAI,KAAK,YAAY,IAAI;AACzB,WAAS,IAAI;AACb,MAAI,KAAK,YAAY,IAAI;AAEzB,SAAO,QAAQ,QAAQ;AACzB;;;AD3DO,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,IAAI;AAAA,QACF,aAAa;AAAA,UACX,SAAS,CAAC,UAAU;AAAA,QACtB;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,MAAM;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB,gBAAgB;AAAA,YAC/C;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,OAAO;AAAA,YACL,cAAc;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,YACF,MAAM;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB,gBAAgB;AAAA,YAC/C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,SAAS;AAAA,QACP,SAASA,MAAK,KAAK;AACjB,UAAAA,KAAI,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA,gBAAgBA,MAAK;AACnB,cAAI,iBAAiBA,IAAG;AAAA,QAC1B;AAAA,QACA,eAAeA,MAAK;AAClB,UAAAA,KAAI,qBAAqB,EAAE,QAAQ,KAAK,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,cAAc,CAACA,SAAQA,KAAI;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF;","names":["ctx"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@zag-js/clipboard",
+  "version": "0.0.0-dev-20240202223441",
+  "description": "Core logic for the clipboard widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "clipboard"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/clipboard",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/anatomy": "0.0.0-dev-20240202223441",
+    "@zag-js/core": "0.0.0-dev-20240202223441",
+    "@zag-js/dom-query": "0.0.0-dev-20240202223441",
+    "@zag-js/utils": "0.0.0-dev-20240202223441",
+    "@zag-js/types": "0.0.0-dev-20240202223441"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/clipboard.anatomy.ts

@@ -0,0 +1,5 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("clipboard").parts("trigger", "indicator")
+
+export const parts = anatomy.build()

package/src/clipboard.connect.ts

@@ -0,0 +1,29 @@
+import { dataAttr } from "@zag-js/dom-query"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { parts } from "./clipboard.anatomy"
+import type { MachineApi, Send, State } from "./clipboard.types"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
+  const isCopied = state.matches("copied")
+
+  return {
+    isCopied,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "VALUE.SET", value })
+    },
+    triggerProps: normalize.button({
+      ...parts.trigger,
+      "data-copied": dataAttr(isCopied),
+      onClick() {
+        send({ type: "COPY" })
+      },
+    }),
+    getIndicatorProps(props) {
+      return normalize.element({
+        ...parts.indicator,
+        hidden: props.copied !== isCopied,
+      })
+    },
+  }
+}

package/src/clipboard.dom.ts

@@ -0,0 +1,65 @@
+import { createScope, getWindow } from "@zag-js/dom-query"
+import { hasProp } from "@zag-js/utils"
+import type { MachineContext as Ctx } from "./clipboard.types"
+
+function createNode(doc: Document, text: string): HTMLElement {
+  const node = doc.createElement("pre")
+  Object.assign(node.style, {
+    width: "1px",
+    height: "1px",
+    position: "fixed",
+    top: "5px",
+  })
+  node.textContent = text
+  return node
+}
+
+export const dom = createScope({
+  getRootId: (ctx: Ctx) => `clip-${ctx.id}`,
+  getTriggerId: (ctx: Ctx) => `clip-trigger-${ctx.id}`,
+  getIndicatorId: (ctx: Ctx) => `clip-indicator-${ctx.id}`,
+  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),
+})
+
+function copyNode(node: HTMLElement): Promise<void> {
+  const win = getWindow(node)
+
+  const selection = win.getSelection()
+
+  if (selection == null) {
+    return Promise.reject(new Error())
+  }
+
+  selection.removeAllRanges()
+
+  const doc = node.ownerDocument
+
+  const range = doc.createRange()
+  range.selectNodeContents(node)
+  selection.addRange(range)
+
+  doc.execCommand("copy")
+  selection.removeAllRanges()
+
+  return Promise.resolve()
+}
+
+function copyText(doc: Document, text: string): Promise<void> {
+  const win = doc.defaultView || window
+
+  if (hasProp(win.navigator, "clipboard")) {
+    return win.navigator.clipboard.writeText(text)
+  }
+
+  if (!doc.body) {
+    return Promise.reject(new Error())
+  }
+
+  const node = createNode(doc, text)
+
+  doc.body.appendChild(node)
+  copyNode(node)
+  doc.body.removeChild(node)
+
+  return Promise.resolve()
+}

package/src/clipboard.machine.ts

@@ -0,0 +1,61 @@
+import { createMachine } from "@zag-js/core"
+import { compact } from "@zag-js/utils"
+import { dom } from "./clipboard.dom"
+import type { MachineContext, MachineState, UserDefinedContext } from "./clipboard.types"
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "clipboard",
+      initial: "idle",
+      context: {
+        value: "",
+        timeout: 3000,
+        ...ctx,
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"],
+        },
+      },
+      states: {
+        idle: {
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"],
+            },
+          },
+        },
+        copied: {
+          after: {
+            COPY_TIMEOUT: "idle",
+          },
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopied"],
+            },
+          },
+        },
+      },
+    },
+    {
+      actions: {
+        setValue(ctx, evt) {
+          ctx.value = evt.value
+        },
+        copyToClipboard(ctx) {
+          dom.writeToClipboard(ctx)
+        },
+        invokeOnCopied(ctx) {
+          ctx.onCopyStatusChange?.({ copied: true })
+        },
+      },
+      delays: {
+        COPY_TIMEOUT: (ctx) => ctx.timeout,
+      },
+    },
+  )
+}

package/src/clipboard.types.ts

@@ -0,0 +1,68 @@
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, PropTypes, RequiredBy } from "@zag-js/types"
+
+export interface CopyStatusDetails {
+  copied: boolean
+}
+
+interface PublicContext extends CommonProperties {
+  /**
+   * The value to be copied to the clipboard
+   */
+  value: string
+  /**
+   * The function to be called when the value is copied to the clipboard
+   */
+  onCopyStatusChange?: (details: CopyStatusDetails) => void
+  /**
+   * The timeout for the copy operation
+   */
+  timeout: number
+}
+
+type PrivateContext = Context<{}>
+
+type ComputedContext = Readonly<{}>
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
+
+export interface MachineState {
+  value: "idle" | "copied"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>
+
+/* -----------------------------------------------------------------------------
+ * Component API
+ * -----------------------------------------------------------------------------*/
+
+export interface IndicatorProps {
+  copied: boolean
+}
+
+export interface MachineApi<T extends PropTypes = PropTypes> {
+  /**
+   * The value to be copied to the clipboard
+   */
+  value: string
+  /**
+   * Set the value to be copied to the clipboard
+   */
+  setValue(value: string): void
+  /**
+   * The props for the trigger button
+   */
+  triggerProps: T["button"]
+  /**
+   * The props for the indicator
+   */
+  getIndicatorProps(props: IndicatorProps): T["element"]
+  /**
+   * Whether the value has been copied to the clipboard
+   */
+  isCopied: boolean
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { anatomy } from "./clipboard.anatomy"
+export { connect } from "./clipboard.connect"
+export { machine } from "./clipboard.machine"
+export type { UserDefinedContext as Context } from "./clipboard.types"