@zag-js/clipboard 0.53.0 → 0.54.0

package/dist/index.d.mts

@@ -63,11 +63,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Copy the value to the clipboard
      */
     copy(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    controlProps: T["element"];
-    triggerProps: T["button"];
-    inputProps: T["input"];
+    getRootProps(): T["element"];
+    getLabelProps(): T["label"];
+    getControlProps(): T["element"];
+    getTriggerProps(): T["button"];
+    getInputProps(): T["input"];
     getIndicatorProps(props: IndicatorProps): T["element"];
 }
 

package/dist/index.d.ts

@@ -63,11 +63,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Copy the value to the clipboard
      */
     copy(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    controlProps: T["element"];
-    triggerProps: T["button"];
-    inputProps: T["input"];
+    getRootProps(): T["element"];
+    getLabelProps(): T["label"];
+    getControlProps(): T["element"];
+    getTriggerProps(): T["button"];
+    getInputProps(): T["input"];
     getIndicatorProps(props: IndicatorProps): T["element"];
 }
 

package/dist/index.js

@@ -1,2 +1,256 @@
-"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);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,contextProps:()=>contextProps,indicatorProps:()=>indicatorProps,machine:()=>machine,props:()=>props,splitIndicatorProps:()=>splitIndicatorProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("clipboard").parts("root","control","trigger","indicator","input","label");var parts=anatomy.build();var import_dom_query2=require("@zag-js/dom-query");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`clip-${ctx.id}`,getInputId:ctx=>ctx.ids?.input??`clip-input-${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`clip-label-${ctx.id}`,getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),writeToClipboard:ctx=>copyText(dom.getDoc(ctx),ctx.value)});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}function copyNode(node){const win=(0,import_dom_query.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(win.navigator.clipboard?.writeText!==void 0){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()}function connect(state,send,normalize){const copied=state.matches("copied");return{copied,value:state.context.value,setValue(value){send({type:"VALUE.SET",value})},copy(){send({type:"COPY"})},rootProps:normalize.element({...parts.root.attrs,"data-copied":(0,import_dom_query2.dataAttr)(copied),id:dom.getRootId(state.context)}),labelProps:normalize.label({...parts.label.attrs,htmlFor:dom.getInputId(state.context),"data-copied":(0,import_dom_query2.dataAttr)(copied),id:dom.getLabelId(state.context)}),controlProps:normalize.element({...parts.control.attrs,"data-copied":(0,import_dom_query2.dataAttr)(copied)}),inputProps:normalize.input({...parts.input.attrs,defaultValue:state.context.value,"data-copied":(0,import_dom_query2.dataAttr)(copied),readOnly:true,"data-readonly":"true",id:dom.getInputId(state.context),onFocus(event){event.currentTarget.select()},onCopy(){send({type:"INPUT.COPY"})}}),triggerProps:normalize.button({...parts.trigger.attrs,"aria-label":copied?"Copied to clipboard":"Copy to clipboard","data-copied":(0,import_dom_query2.dataAttr)(copied),onClick(){send({type:"COPY"})}}),getIndicatorProps(props2){return normalize.element({...parts.indicator.attrs,hidden:props2.copied!==copied})}}}var import_core=require("@zag-js/core");var import_utils=require("@zag-js/utils");function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"clipboard",initial:"idle",context:{value:"",timeout:3e3,...ctx},watch:{value:["syncInputElement"]},on:{"VALUE.SET":{actions:["setValue"]},COPY:{target:"copied",actions:["copyToClipboard","invokeOnCopy"]}},states:{idle:{on:{"INPUT.COPY":{target:"copied",actions:["invokeOnCopy"]}}},copied:{after:{COPY_TIMEOUT:"idle"},on:{COPY:{target:"copied",actions:["copyToClipboard","invokeOnCopy"]},"INPUT.COPY":{actions:["invokeOnCopy"]}}}}},{actions:{setValue(ctx2,evt){ctx2.value=evt.value},copyToClipboard(ctx2){dom.writeToClipboard(ctx2)},invokeOnCopy(ctx2){ctx2.onStatusChange?.({copied:true})},syncInputElement(ctx2){dom.setValue(dom.getInputEl(ctx2),ctx2.value)}},delays:{COPY_TIMEOUT:ctx2=>ctx2.timeout}})}var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["getRootNode","id","ids","value","timeout","onStatusChange"]);var contextProps=(0,import_utils2.createSplitProps)(props);var indicatorProps=(0,import_types.createProps)()(["copied"]);var splitIndicatorProps=(0,import_utils2.createSplitProps)(indicatorProps);0&&(module.exports={anatomy,connect,contextProps,indicatorProps,machine,props,splitIndicatorProps});
+"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,
+  contextProps: () => contextProps,
+  indicatorProps: () => indicatorProps,
+  machine: () => machine,
+  props: () => props,
+  splitIndicatorProps: () => splitIndicatorProps
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/clipboard.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
+var parts = anatomy.build();
+
+// src/clipboard.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+
+// src/clipboard.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getRootId: (ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,
+  getInputId: (ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  writeToClipboard: (ctx) => copyText(dom.getDoc(ctx), ctx.value)
+});
+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;
+}
+function copyNode(node) {
+  const win = (0, import_dom_query.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 (win.navigator.clipboard?.writeText !== void 0) {
+    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.connect.ts
+function connect(state, send, normalize) {
+  const copied = state.matches("copied");
+  return {
+    copied,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    copy() {
+      send({ type: "COPY" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-copied": (0, import_dom_query2.dataAttr)(copied),
+        id: dom.getRootId(state.context)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        htmlFor: dom.getInputId(state.context),
+        "data-copied": (0, import_dom_query2.dataAttr)(copied),
+        id: dom.getLabelId(state.context)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-copied": (0, import_dom_query2.dataAttr)(copied)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        defaultValue: state.context.value,
+        "data-copied": (0, import_dom_query2.dataAttr)(copied),
+        readOnly: true,
+        "data-readonly": "true",
+        id: dom.getInputId(state.context),
+        onFocus(event) {
+          event.currentTarget.select();
+        },
+        onCopy() {
+          send({ type: "INPUT.COPY" });
+        }
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+        "data-copied": (0, import_dom_query2.dataAttr)(copied),
+        onClick() {
+          send({ type: "COPY" });
+        }
+      });
+    },
+    getIndicatorProps(props2) {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        hidden: props2.copied !== copied
+      });
+    }
+  };
+}
+
+// src/clipboard.machine.ts
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      id: "clipboard",
+      initial: "idle",
+      context: {
+        value: "",
+        timeout: 3e3,
+        ...ctx
+      },
+      watch: {
+        value: ["syncInputElement"]
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        },
+        COPY: {
+          target: "copied",
+          actions: ["copyToClipboard", "invokeOnCopy"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            "INPUT.COPY": {
+              target: "copied",
+              actions: ["invokeOnCopy"]
+            }
+          }
+        },
+        copied: {
+          after: {
+            COPY_TIMEOUT: "idle"
+          },
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopy"]
+            },
+            "INPUT.COPY": {
+              actions: ["invokeOnCopy"]
+            }
+          }
+        }
+      }
+    },
+    {
+      actions: {
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        copyToClipboard(ctx2) {
+          dom.writeToClipboard(ctx2);
+        },
+        invokeOnCopy(ctx2) {
+          ctx2.onStatusChange?.({ copied: true });
+        },
+        syncInputElement(ctx2) {
+          dom.setValue(dom.getInputEl(ctx2), ctx2.value);
+        }
+      },
+      delays: {
+        COPY_TIMEOUT: (ctx2) => ctx2.timeout
+      }
+    }
+  );
+}
+
+// src/clipboard.props.ts
+var import_types = require("@zag-js/types");
+var import_utils2 = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onStatusChange"
+]);
+var contextProps = (0, import_utils2.createSplitProps)(props);
+var indicatorProps = (0, import_types.createProps)()(["copied"]);
+var splitIndicatorProps = (0, import_utils2.createSplitProps)(indicatorProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  contextProps,
+  indicatorProps,
+  machine,
+  props,
+  splitIndicatorProps
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["export { anatomy } from \"./clipboard.anatomy\"\nexport { connect } from \"./clipboard.connect\"\nexport { machine } from \"./clipboard.machine\"\nexport * from \"./clipboard.props\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  CopyStatusDetails,\n  ElementIds,\n  IndicatorProps,\n} from \"./clipboard.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\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\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const copied = state.matches(\"copied\")\n\n  return {\n    copied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(copied),\n      id: dom.getRootId(state.context),\n    }),\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getInputId(state.context),\n      \"data-copied\": dataAttr(copied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(copied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(copied),\n      readOnly: true,\n      \"data-readonly\": \"true\",\n      id: dom.getInputId(state.context),\n      onFocus(event) {\n        event.currentTarget.select()\n      },\n      onCopy() {\n        send({ type: \"INPUT.COPY\" })\n      },\n    }),\n    triggerProps: normalize.button({\n      ...parts.trigger.attrs,\n      \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(copied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== copied,\n      })\n    },\n  }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,\n  getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,\n  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\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\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 (win.navigator.clipboard?.writeText !== undefined) {\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","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      watch: {\n        value: [\"syncInputElement\"],\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n        COPY: {\n          target: \"copied\",\n          actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"invokeOnCopy\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n            },\n            \"INPUT.COPY\": {\n              actions: [\"invokeOnCopy\"],\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        invokeOnCopy(ctx) {\n          ctx.onStatusChange?.({ copied: true })\n        },\n        syncInputElement(ctx) {\n          dom.setValue(dom.getInputEl(ctx), ctx.value)\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":"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","names":["import_dom_query","props","ctx","import_utils"]}
+{"version":3,"sources":["../src/index.ts","../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["export { anatomy } from \"./clipboard.anatomy\"\nexport { connect } from \"./clipboard.connect\"\nexport { machine } from \"./clipboard.machine\"\nexport * from \"./clipboard.props\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  CopyStatusDetails,\n  ElementIds,\n  IndicatorProps,\n} from \"./clipboard.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\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\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const copied = state.matches(\"copied\")\n\n  return {\n    copied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    copy() {\n      send({ type: \"COPY\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        \"data-copied\": dataAttr(copied),\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getLabelProps() {\n      return normalize.label({\n        ...parts.label.attrs,\n        htmlFor: dom.getInputId(state.context),\n        \"data-copied\": dataAttr(copied),\n        id: dom.getLabelId(state.context),\n      })\n    },\n\n    getControlProps() {\n      return normalize.element({\n        ...parts.control.attrs,\n        \"data-copied\": dataAttr(copied),\n      })\n    },\n\n    getInputProps() {\n      return normalize.input({\n        ...parts.input.attrs,\n        defaultValue: state.context.value,\n        \"data-copied\": dataAttr(copied),\n        readOnly: true,\n        \"data-readonly\": \"true\",\n        id: dom.getInputId(state.context),\n        onFocus(event) {\n          event.currentTarget.select()\n        },\n        onCopy() {\n          send({ type: \"INPUT.COPY\" })\n        },\n      })\n    },\n\n    getTriggerProps() {\n      return normalize.button({\n        ...parts.trigger.attrs,\n        \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n        \"data-copied\": dataAttr(copied),\n        onClick() {\n          send({ type: \"COPY\" })\n        },\n      })\n    },\n\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== copied,\n      })\n    },\n  }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,\n  getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,\n  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\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\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 (win.navigator.clipboard?.writeText !== undefined) {\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","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      watch: {\n        value: [\"syncInputElement\"],\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n        COPY: {\n          target: \"copied\",\n          actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"invokeOnCopy\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n            },\n            \"INPUT.COPY\": {\n              actions: [\"invokeOnCopy\"],\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        invokeOnCopy(ctx) {\n          ctx.onStatusChange?.({ copied: true })\n        },\n        syncInputElement(ctx) {\n          dom.setValue(dom.getInputEl(ctx), ctx.value)\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":"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","names":["import_dom_query","props","ctx","import_utils"]}

package/dist/index.mjs

@@ -1,2 +1,223 @@
-import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("clipboard").parts("root","control","trigger","indicator","input","label");var parts=anatomy.build();import{dataAttr}from"@zag-js/dom-query";import{createScope,getWindow}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`clip-${ctx.id}`,getInputId:ctx=>ctx.ids?.input??`clip-input-${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`clip-label-${ctx.id}`,getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),writeToClipboard:ctx=>copyText(dom.getDoc(ctx),ctx.value)});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}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(win.navigator.clipboard?.writeText!==void 0){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()}function connect(state,send,normalize){const copied=state.matches("copied");return{copied,value:state.context.value,setValue(value){send({type:"VALUE.SET",value})},copy(){send({type:"COPY"})},rootProps:normalize.element({...parts.root.attrs,"data-copied":dataAttr(copied),id:dom.getRootId(state.context)}),labelProps:normalize.label({...parts.label.attrs,htmlFor:dom.getInputId(state.context),"data-copied":dataAttr(copied),id:dom.getLabelId(state.context)}),controlProps:normalize.element({...parts.control.attrs,"data-copied":dataAttr(copied)}),inputProps:normalize.input({...parts.input.attrs,defaultValue:state.context.value,"data-copied":dataAttr(copied),readOnly:true,"data-readonly":"true",id:dom.getInputId(state.context),onFocus(event){event.currentTarget.select()},onCopy(){send({type:"INPUT.COPY"})}}),triggerProps:normalize.button({...parts.trigger.attrs,"aria-label":copied?"Copied to clipboard":"Copy to clipboard","data-copied":dataAttr(copied),onClick(){send({type:"COPY"})}}),getIndicatorProps(props2){return normalize.element({...parts.indicator.attrs,hidden:props2.copied!==copied})}}}import{createMachine}from"@zag-js/core";import{compact}from"@zag-js/utils";function machine(userContext){const ctx=compact(userContext);return createMachine({id:"clipboard",initial:"idle",context:{value:"",timeout:3e3,...ctx},watch:{value:["syncInputElement"]},on:{"VALUE.SET":{actions:["setValue"]},COPY:{target:"copied",actions:["copyToClipboard","invokeOnCopy"]}},states:{idle:{on:{"INPUT.COPY":{target:"copied",actions:["invokeOnCopy"]}}},copied:{after:{COPY_TIMEOUT:"idle"},on:{COPY:{target:"copied",actions:["copyToClipboard","invokeOnCopy"]},"INPUT.COPY":{actions:["invokeOnCopy"]}}}}},{actions:{setValue(ctx2,evt){ctx2.value=evt.value},copyToClipboard(ctx2){dom.writeToClipboard(ctx2)},invokeOnCopy(ctx2){ctx2.onStatusChange?.({copied:true})},syncInputElement(ctx2){dom.setValue(dom.getInputEl(ctx2),ctx2.value)}},delays:{COPY_TIMEOUT:ctx2=>ctx2.timeout}})}import{createProps}from"@zag-js/types";import{createSplitProps}from"@zag-js/utils";var props=createProps()(["getRootNode","id","ids","value","timeout","onStatusChange"]);var contextProps=createSplitProps(props);var indicatorProps=createProps()(["copied"]);var splitIndicatorProps=createSplitProps(indicatorProps);export{anatomy,connect,contextProps,indicatorProps,machine,props,splitIndicatorProps};
+// src/clipboard.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
+var parts = anatomy.build();
+
+// src/clipboard.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+
+// src/clipboard.dom.ts
+import { createScope, getWindow } from "@zag-js/dom-query";
+var dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,
+  getInputId: (ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  writeToClipboard: (ctx) => copyText(dom.getDoc(ctx), ctx.value)
+});
+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;
+}
+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 (win.navigator.clipboard?.writeText !== void 0) {
+    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.connect.ts
+function connect(state, send, normalize) {
+  const copied = state.matches("copied");
+  return {
+    copied,
+    value: state.context.value,
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    copy() {
+      send({ type: "COPY" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-copied": dataAttr(copied),
+        id: dom.getRootId(state.context)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        htmlFor: dom.getInputId(state.context),
+        "data-copied": dataAttr(copied),
+        id: dom.getLabelId(state.context)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-copied": dataAttr(copied)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        defaultValue: state.context.value,
+        "data-copied": dataAttr(copied),
+        readOnly: true,
+        "data-readonly": "true",
+        id: dom.getInputId(state.context),
+        onFocus(event) {
+          event.currentTarget.select();
+        },
+        onCopy() {
+          send({ type: "INPUT.COPY" });
+        }
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+        "data-copied": dataAttr(copied),
+        onClick() {
+          send({ type: "COPY" });
+        }
+      });
+    },
+    getIndicatorProps(props2) {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        hidden: props2.copied !== copied
+      });
+    }
+  };
+}
+
+// src/clipboard.machine.ts
+import { createMachine } from "@zag-js/core";
+import { compact } from "@zag-js/utils";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "clipboard",
+      initial: "idle",
+      context: {
+        value: "",
+        timeout: 3e3,
+        ...ctx
+      },
+      watch: {
+        value: ["syncInputElement"]
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        },
+        COPY: {
+          target: "copied",
+          actions: ["copyToClipboard", "invokeOnCopy"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            "INPUT.COPY": {
+              target: "copied",
+              actions: ["invokeOnCopy"]
+            }
+          }
+        },
+        copied: {
+          after: {
+            COPY_TIMEOUT: "idle"
+          },
+          on: {
+            COPY: {
+              target: "copied",
+              actions: ["copyToClipboard", "invokeOnCopy"]
+            },
+            "INPUT.COPY": {
+              actions: ["invokeOnCopy"]
+            }
+          }
+        }
+      }
+    },
+    {
+      actions: {
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        copyToClipboard(ctx2) {
+          dom.writeToClipboard(ctx2);
+        },
+        invokeOnCopy(ctx2) {
+          ctx2.onStatusChange?.({ copied: true });
+        },
+        syncInputElement(ctx2) {
+          dom.setValue(dom.getInputEl(ctx2), ctx2.value);
+        }
+      },
+      delays: {
+        COPY_TIMEOUT: (ctx2) => ctx2.timeout
+      }
+    }
+  );
+}
+
+// src/clipboard.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onStatusChange"
+]);
+var contextProps = createSplitProps(props);
+var indicatorProps = createProps()(["copied"]);
+var splitIndicatorProps = createSplitProps(indicatorProps);
+export {
+  anatomy,
+  connect,
+  contextProps,
+  indicatorProps,
+  machine,
+  props,
+  splitIndicatorProps
+};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\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\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const copied = state.matches(\"copied\")\n\n  return {\n    copied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(copied),\n      id: dom.getRootId(state.context),\n    }),\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getInputId(state.context),\n      \"data-copied\": dataAttr(copied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(copied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(copied),\n      readOnly: true,\n      \"data-readonly\": \"true\",\n      id: dom.getInputId(state.context),\n      onFocus(event) {\n        event.currentTarget.select()\n      },\n      onCopy() {\n        send({ type: \"INPUT.COPY\" })\n      },\n    }),\n    triggerProps: normalize.button({\n      ...parts.trigger.attrs,\n      \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(copied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== copied,\n      })\n    },\n  }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,\n  getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,\n  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\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\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 (win.navigator.clipboard?.writeText !== undefined) {\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","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      watch: {\n        value: [\"syncInputElement\"],\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n        COPY: {\n          target: \"copied\",\n          actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"invokeOnCopy\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n            },\n            \"INPUT.COPY\": {\n              actions: [\"invokeOnCopy\"],\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        invokeOnCopy(ctx) {\n          ctx.onStatusChange?.({ copied: true })\n        },\n        syncInputElement(ctx) {\n          dom.setValue(dom.getInputEl(ctx), ctx.value)\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":"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","names":["props","ctx"]}
+{"version":3,"sources":["../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\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\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const copied = state.matches(\"copied\")\n\n  return {\n    copied,\n    value: state.context.value,\n    setValue(value) {\n      send({ type: \"VALUE.SET\", value })\n    },\n    copy() {\n      send({ type: \"COPY\" })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        \"data-copied\": dataAttr(copied),\n        id: dom.getRootId(state.context),\n      })\n    },\n\n    getLabelProps() {\n      return normalize.label({\n        ...parts.label.attrs,\n        htmlFor: dom.getInputId(state.context),\n        \"data-copied\": dataAttr(copied),\n        id: dom.getLabelId(state.context),\n      })\n    },\n\n    getControlProps() {\n      return normalize.element({\n        ...parts.control.attrs,\n        \"data-copied\": dataAttr(copied),\n      })\n    },\n\n    getInputProps() {\n      return normalize.input({\n        ...parts.input.attrs,\n        defaultValue: state.context.value,\n        \"data-copied\": dataAttr(copied),\n        readOnly: true,\n        \"data-readonly\": \"true\",\n        id: dom.getInputId(state.context),\n        onFocus(event) {\n          event.currentTarget.select()\n        },\n        onCopy() {\n          send({ type: \"INPUT.COPY\" })\n        },\n      })\n    },\n\n    getTriggerProps() {\n      return normalize.button({\n        ...parts.trigger.attrs,\n        \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n        \"data-copied\": dataAttr(copied),\n        onClick() {\n          send({ type: \"COPY\" })\n        },\n      })\n    },\n\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== copied,\n      })\n    },\n  }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip-${ctx.id}`,\n  getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip-input-${ctx.id}`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip-label-${ctx.id}`,\n  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n  writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\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\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 (win.navigator.clipboard?.writeText !== undefined) {\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","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      watch: {\n        value: [\"syncInputElement\"],\n      },\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n        COPY: {\n          target: \"copied\",\n          actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"invokeOnCopy\"],\n            },\n          },\n        },\n        copied: {\n          after: {\n            COPY_TIMEOUT: \"idle\",\n          },\n          on: {\n            COPY: {\n              target: \"copied\",\n              actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n            },\n            \"INPUT.COPY\": {\n              actions: [\"invokeOnCopy\"],\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        invokeOnCopy(ctx) {\n          ctx.onStatusChange?.({ copied: true })\n        },\n        syncInputElement(ctx) {\n          dom.setValue(dom.getInputEl(ctx), ctx.value)\n        },\n      },\n      delays: {\n        COPY_TIMEOUT: (ctx) => ctx.timeout,\n      },\n    },\n  )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":"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","names":["props","ctx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/clipboard",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "Core logic for the clipboard widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,11 +28,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.53.0",
-    "@zag-js/core": "0.53.0",
-    "@zag-js/dom-query": "0.53.0",
-    "@zag-js/utils": "0.53.0",
-    "@zag-js/types": "0.53.0"
+    "@zag-js/anatomy": "0.54.0",
+    "@zag-js/core": "0.54.0",
+    "@zag-js/dom-query": "0.54.0",
+    "@zag-js/utils": "0.54.0",
+    "@zag-js/types": "0.54.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/clipboard.connect.ts

@@ -16,43 +16,59 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     copy() {
       send({ type: "COPY" })
     },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-copied": dataAttr(copied),
-      id: dom.getRootId(state.context),
-    }),
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      htmlFor: dom.getInputId(state.context),
-      "data-copied": dataAttr(copied),
-      id: dom.getLabelId(state.context),
-    }),
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      "data-copied": dataAttr(copied),
-    }),
-    inputProps: normalize.input({
-      ...parts.input.attrs,
-      defaultValue: state.context.value,
-      "data-copied": dataAttr(copied),
-      readOnly: true,
-      "data-readonly": "true",
-      id: dom.getInputId(state.context),
-      onFocus(event) {
-        event.currentTarget.select()
-      },
-      onCopy() {
-        send({ type: "INPUT.COPY" })
-      },
-    }),
-    triggerProps: normalize.button({
-      ...parts.trigger.attrs,
-      "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
-      "data-copied": dataAttr(copied),
-      onClick() {
-        send({ type: "COPY" })
-      },
-    }),
+
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-copied": dataAttr(copied),
+        id: dom.getRootId(state.context),
+      })
+    },
+
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        htmlFor: dom.getInputId(state.context),
+        "data-copied": dataAttr(copied),
+        id: dom.getLabelId(state.context),
+      })
+    },
+
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-copied": dataAttr(copied),
+      })
+    },
+
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        defaultValue: state.context.value,
+        "data-copied": dataAttr(copied),
+        readOnly: true,
+        "data-readonly": "true",
+        id: dom.getInputId(state.context),
+        onFocus(event) {
+          event.currentTarget.select()
+        },
+        onCopy() {
+          send({ type: "INPUT.COPY" })
+        },
+      })
+    },
+
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+        "data-copied": dataAttr(copied),
+        onClick() {
+          send({ type: "COPY" })
+        },
+      })
+    },
+
     getIndicatorProps(props) {
       return normalize.element({
         ...parts.indicator.attrs,

package/src/clipboard.types.ts

@@ -73,10 +73,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    */
   copy(): void
 
-  rootProps: T["element"]
-  labelProps: T["label"]
-  controlProps: T["element"]
-  triggerProps: T["button"]
-  inputProps: T["input"]
+  getRootProps(): T["element"]
+  getLabelProps(): T["label"]
+  getControlProps(): T["element"]
+  getTriggerProps(): T["button"]
+  getInputProps(): T["input"]
   getIndicatorProps(props: IndicatorProps): T["element"]
 }