@zag-js/clipboard 0.36.2 → 0.37.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -31,7 +31,8 @@ interface PublicContext extends CommonProperties {
      */
     timeout: number;
 }
-type PrivateContext = Context<{}>;
+interface PrivateContext {
+}
 type ComputedContext = Readonly<{}>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -73,4 +74,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type CopyStatusDetails, type ElementIds, type IndicatorProps, anatomy, connect, machine };
+declare const props: ("value" | "timeout" | "id" | "ids" | "onCopyStatusChange" | "getRootNode")[];
+declare const indicatorProps: "copied"[];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type CopyStatusDetails, type ElementIds, type IndicatorProps, anatomy, connect, indicatorProps, machine, props };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -31,7 +31,8 @@ interface PublicContext extends CommonProperties {
      */
     timeout: number;
 }
-type PrivateContext = Context<{}>;
+interface PrivateContext {
+}
 type ComputedContext = Readonly<{}>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -73,4 +74,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type CopyStatusDetails, type ElementIds, type IndicatorProps, anatomy, connect, machine };
+declare const props: ("value" | "timeout" | "id" | "ids" | "onCopyStatusChange" | "getRootNode")[];
+declare const indicatorProps: "copied"[];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type CopyStatusDetails, type ElementIds, type IndicatorProps, anatomy, connect, indicatorProps, machine, props };

package/dist/index.js

@@ -22,7 +22,9 @@ var src_exports = {};
 __export(src_exports, {
   anatomy: () => anatomy,
   connect: () => connect,
-  machine: () => machine
+  indicatorProps: () => indicatorProps,
+  machine: () => machine,
+  props: () => props
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -134,10 +136,10 @@ function connect(state, send, normalize) {
         send({ type: "COPY" });
       }
     }),
-    getIndicatorProps(props) {
+    getIndicatorProps(props2) {
       return normalize.element({
         ...parts.indicator.attrs,
-        hidden: props.copied !== isCopied
+        hidden: props2.copied !== isCopied
       });
     }
   };
@@ -215,10 +217,24 @@ function machine(userContext) {
     }
   );
 }
+
+// src/clipboard.props.ts
+var import_types = require("@zag-js/types");
+var props = (0, import_types.createProps)()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onCopyStatusChange"
+]);
+var indicatorProps = (0, import_types.createProps)()(["copied"]);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   anatomy,
   connect,
-  machine
+  indicatorProps,
+  machine,
+  props
 });
 //# 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"],"sourcesContent":["export { anatomy } from \"./clipboard.anatomy\"\nexport { connect } from \"./clipboard.connect\"\nexport { machine } from \"./clipboard.machine\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  CopyStatusDetails,\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 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    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(isCopied),\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(isCopied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(isCopied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(isCopied),\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\": isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== isCopied,\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\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 (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","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\", \"invokeOnCopied\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"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            \"INPUT.COPY\": {\n              actions: [\"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        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"],"mappings":"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","names":["import_dom_query","import_utils","ctx"]}
+{"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 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    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(isCopied),\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(isCopied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(isCopied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(isCopied),\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\": isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== isCopied,\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\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 (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","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\", \"invokeOnCopied\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"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            \"INPUT.COPY\": {\n              actions: [\"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        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\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onCopyStatusChange\",\n])\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\n"],"mappings":"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","names":["import_dom_query","props","import_utils","ctx"]}

package/dist/index.mjs

@@ -106,10 +106,10 @@ function connect(state, send, normalize) {
         send({ type: "COPY" });
       }
     }),
-    getIndicatorProps(props) {
+    getIndicatorProps(props2) {
       return normalize.element({
         ...parts.indicator.attrs,
-        hidden: props.copied !== isCopied
+        hidden: props2.copied !== isCopied
       });
     }
   };
@@ -187,9 +187,23 @@ function machine(userContext) {
     }
   );
 }
+
+// src/clipboard.props.ts
+import { createProps } from "@zag-js/types";
+var props = createProps()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onCopyStatusChange"
+]);
+var indicatorProps = createProps()(["copied"]);
 export {
   anatomy,
   connect,
-  machine
+  indicatorProps,
+  machine,
+  props
 };
 //# 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"],"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 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    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(isCopied),\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(isCopied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(isCopied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(isCopied),\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\": isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== isCopied,\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\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 (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","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\", \"invokeOnCopied\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"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            \"INPUT.COPY\": {\n              actions: [\"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        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"],"mappings":"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","names":["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 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    copy() {\n      send({ type: \"COPY\" })\n    },\n    rootProps: normalize.element({\n      ...parts.root.attrs,\n      \"data-copied\": dataAttr(isCopied),\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(isCopied),\n      id: dom.getLabelId(state.context),\n    }),\n    controlProps: normalize.element({\n      ...parts.control.attrs,\n      \"data-copied\": dataAttr(isCopied),\n    }),\n    inputProps: normalize.input({\n      ...parts.input.attrs,\n      defaultValue: state.context.value,\n      \"data-copied\": dataAttr(isCopied),\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\": isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n      \"data-copied\": dataAttr(isCopied),\n      onClick() {\n        send({ type: \"COPY\" })\n      },\n    }),\n    getIndicatorProps(props) {\n      return normalize.element({\n        ...parts.indicator.attrs,\n        hidden: props.copied !== isCopied,\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\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 (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","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\", \"invokeOnCopied\"],\n        },\n      },\n      states: {\n        idle: {\n          on: {\n            \"INPUT.COPY\": {\n              target: \"copied\",\n              actions: [\"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            \"INPUT.COPY\": {\n              actions: [\"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        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\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"value\",\n  \"timeout\",\n  \"onCopyStatusChange\",\n])\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\n"],"mappings":"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","names":["props","ctx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/clipboard",
-  "version": "0.36.2",
+  "version": "0.37.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.36.2",
-    "@zag-js/core": "0.36.2",
-    "@zag-js/dom-query": "0.36.2",
-    "@zag-js/utils": "0.36.2",
-    "@zag-js/types": "0.36.2"
+    "@zag-js/anatomy": "0.37.0",
+    "@zag-js/core": "0.37.0",
+    "@zag-js/dom-query": "0.37.0",
+    "@zag-js/utils": "0.37.0",
+    "@zag-js/types": "0.37.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/clipboard.props.ts

@@ -0,0 +1,13 @@
+import { createProps } from "@zag-js/types"
+import type { IndicatorProps, UserDefinedContext } from "./clipboard.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onCopyStatusChange",
+])
+
+export const indicatorProps = createProps<IndicatorProps>()(["copied"])

package/src/clipboard.types.ts

@@ -1,5 +1,5 @@
 import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, Context, PropTypes, RequiredBy } from "@zag-js/types"
+import type { CommonProperties, PropTypes, RequiredBy } from "@zag-js/types"
 
 export interface CopyStatusDetails {
   copied: boolean
@@ -30,7 +30,7 @@ interface PublicContext extends CommonProperties {
   timeout: number
 }
 
-type PrivateContext = Context<{}>
+interface PrivateContext {}
 
 type ComputedContext = Readonly<{}>
 

package/src/index.ts

@@ -1,10 +1,11 @@
 export { anatomy } from "./clipboard.anatomy"
 export { connect } from "./clipboard.connect"
 export { machine } from "./clipboard.machine"
+export * from "./clipboard.props"
 export type {
   MachineApi as Api,
   UserDefinedContext as Context,
-  ElementIds,
   CopyStatusDetails,
+  ElementIds,
   IndicatorProps,
 } from "./clipboard.types"