@zag-js/clipboard 1.34.0 → 1.35.0

package/dist/clipboard.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "control" | "trigger" | "indicator" | "input" | "label">;
+declare const parts: Record<"root" | "control" | "trigger" | "indicator" | "input" | "label", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/clipboard.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "control" | "trigger" | "indicator" | "input" | "label">;
+declare const parts: Record<"root" | "control" | "trigger" | "indicator" | "input" | "label", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/clipboard.anatomy.js

@@ -0,0 +1,34 @@
+"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/clipboard.anatomy.ts
+var clipboard_anatomy_exports = {};
+__export(clipboard_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(clipboard_anatomy_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();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/clipboard.anatomy.mjs

@@ -0,0 +1,8 @@
+// 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();
+export {
+  anatomy,
+  parts
+};

package/dist/clipboard.connect.d.mts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ClipboardService, ClipboardApi } from './clipboard.types.mjs';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: ClipboardService, normalize: NormalizeProps<T>): ClipboardApi<T>;
+
+export { connect };

package/dist/clipboard.connect.d.ts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ClipboardService, ClipboardApi } from './clipboard.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: ClipboardService, normalize: NormalizeProps<T>): ClipboardApi<T>;
+
+export { connect };

package/dist/clipboard.connect.js

@@ -0,0 +1,110 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/clipboard.connect.ts
+var clipboard_connect_exports = {};
+__export(clipboard_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(clipboard_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_clipboard = require("./clipboard.anatomy.cjs");
+var dom = __toESM(require("./clipboard.dom.cjs"));
+function connect(service, normalize) {
+  const { state, send, context, scope } = service;
+  const copied = state.matches("copied");
+  return {
+    copied,
+    value: context.get("value"),
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    copy() {
+      send({ type: "COPY" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...import_clipboard.parts.root.attrs,
+        "data-copied": (0, import_dom_query.dataAttr)(copied),
+        id: dom.getRootId(scope)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...import_clipboard.parts.label.attrs,
+        htmlFor: dom.getInputId(scope),
+        "data-copied": (0, import_dom_query.dataAttr)(copied),
+        id: dom.getLabelId(scope)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...import_clipboard.parts.control.attrs,
+        "data-copied": (0, import_dom_query.dataAttr)(copied)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...import_clipboard.parts.input.attrs,
+        defaultValue: context.get("value"),
+        "data-copied": (0, import_dom_query.dataAttr)(copied),
+        readOnly: true,
+        "data-readonly": "true",
+        id: dom.getInputId(scope),
+        onFocus(event) {
+          event.currentTarget.select();
+        },
+        onCopy() {
+          send({ type: "INPUT.COPY" });
+        }
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...import_clipboard.parts.trigger.attrs,
+        type: "button",
+        "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+        "data-copied": (0, import_dom_query.dataAttr)(copied),
+        onClick() {
+          send({ type: "COPY" });
+        }
+      });
+    },
+    getIndicatorProps(props) {
+      return normalize.element({
+        ...import_clipboard.parts.indicator.attrs,
+        hidden: props.copied !== copied
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/clipboard.connect.mjs

@@ -0,0 +1,75 @@
+// src/clipboard.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+import { parts } from "./clipboard.anatomy.mjs";
+import * as dom from "./clipboard.dom.mjs";
+function connect(service, normalize) {
+  const { state, send, context, scope } = service;
+  const copied = state.matches("copied");
+  return {
+    copied,
+    value: context.get("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(scope)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        htmlFor: dom.getInputId(scope),
+        "data-copied": dataAttr(copied),
+        id: dom.getLabelId(scope)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-copied": dataAttr(copied)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        defaultValue: context.get("value"),
+        "data-copied": dataAttr(copied),
+        readOnly: true,
+        "data-readonly": "true",
+        id: dom.getInputId(scope),
+        onFocus(event) {
+          event.currentTarget.select();
+        },
+        onCopy() {
+          send({ type: "INPUT.COPY" });
+        }
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        type: "button",
+        "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,
+        hidden: props.copied !== copied
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/clipboard.dom.d.mts

@@ -0,0 +1,9 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const writeToClipboard: (ctx: Scope, value: string) => Promise<void>;
+
+export { getInputEl, getInputId, getLabelId, getRootId, writeToClipboard };

package/dist/clipboard.dom.d.ts

@@ -0,0 +1,9 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const writeToClipboard: (ctx: Scope, value: string) => Promise<void>;
+
+export { getInputEl, getInputId, getLabelId, getRootId, writeToClipboard };

package/dist/clipboard.dom.js

@@ -0,0 +1,83 @@
+"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/clipboard.dom.ts
+var clipboard_dom_exports = {};
+__export(clipboard_dom_exports, {
+  getInputEl: () => getInputEl,
+  getInputId: () => getInputId,
+  getLabelId: () => getLabelId,
+  getRootId: () => getRootId,
+  writeToClipboard: () => writeToClipboard
+});
+module.exports = __toCommonJS(clipboard_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+var writeToClipboard = (ctx, value) => copyText(ctx.getDoc(), 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();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getInputEl,
+  getInputId,
+  getLabelId,
+  getRootId,
+  writeToClipboard
+});

package/dist/clipboard.dom.mjs

@@ -0,0 +1,54 @@
+// src/clipboard.dom.ts
+import { getWindow } from "@zag-js/dom-query";
+var getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+var writeToClipboard = (ctx, value) => copyText(ctx.getDoc(), 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();
+}
+export {
+  getInputEl,
+  getInputId,
+  getLabelId,
+  getRootId,
+  writeToClipboard
+};

package/dist/clipboard.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ClipboardSchema } from './clipboard.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ClipboardSchema>;
+
+export { machine };

package/dist/clipboard.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ClipboardSchema } from './clipboard.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ClipboardSchema>;
+
+export { machine };

package/dist/clipboard.machine.js

@@ -0,0 +1,130 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/clipboard.machine.ts
+var clipboard_machine_exports = {};
+__export(clipboard_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(clipboard_machine_exports);
+var import_core = require("@zag-js/core");
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var dom = __toESM(require("./clipboard.dom.cjs"));
+var machine = (0, import_core.createMachine)({
+  props({ props }) {
+    return {
+      timeout: 3e3,
+      defaultValue: "",
+      ...props
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      }))
+    };
+  },
+  watch({ track, context, action }) {
+    track([() => context.get("value")], () => {
+      action(["syncInputElement"]);
+    });
+  },
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"]
+    },
+    COPY: {
+      target: "copied",
+      actions: ["copyToClipboard", "invokeOnCopy"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "INPUT.COPY": {
+          target: "copied",
+          actions: ["invokeOnCopy"]
+        }
+      }
+    },
+    copied: {
+      effects: ["waitForTimeout"],
+      on: {
+        "COPY.DONE": {
+          target: "idle"
+        },
+        COPY: {
+          target: "copied",
+          actions: ["copyToClipboard", "invokeOnCopy"]
+        },
+        "INPUT.COPY": {
+          actions: ["invokeOnCopy"]
+        }
+      }
+    }
+  },
+  implementations: {
+    effects: {
+      waitForTimeout({ prop, send }) {
+        return (0, import_utils.setRafTimeout)(() => {
+          send({ type: "COPY.DONE" });
+        }, prop("timeout"));
+      }
+    },
+    actions: {
+      setValue({ context, event }) {
+        context.set("value", event.value);
+      },
+      copyToClipboard({ context, scope }) {
+        dom.writeToClipboard(scope, context.get("value"));
+      },
+      invokeOnCopy({ prop }) {
+        prop("onStatusChange")?.({ copied: true });
+      },
+      syncInputElement({ context, scope }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl) return;
+        (0, import_dom_query.setElementValue)(inputEl, context.get("value"));
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});

package/dist/clipboard.machine.mjs

@@ -0,0 +1,95 @@
+// src/clipboard.machine.ts
+import { createMachine } from "@zag-js/core";
+import { setElementValue } from "@zag-js/dom-query";
+import { setRafTimeout } from "@zag-js/utils";
+import * as dom from "./clipboard.dom.mjs";
+var machine = createMachine({
+  props({ props }) {
+    return {
+      timeout: 3e3,
+      defaultValue: "",
+      ...props
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      }))
+    };
+  },
+  watch({ track, context, action }) {
+    track([() => context.get("value")], () => {
+      action(["syncInputElement"]);
+    });
+  },
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"]
+    },
+    COPY: {
+      target: "copied",
+      actions: ["copyToClipboard", "invokeOnCopy"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "INPUT.COPY": {
+          target: "copied",
+          actions: ["invokeOnCopy"]
+        }
+      }
+    },
+    copied: {
+      effects: ["waitForTimeout"],
+      on: {
+        "COPY.DONE": {
+          target: "idle"
+        },
+        COPY: {
+          target: "copied",
+          actions: ["copyToClipboard", "invokeOnCopy"]
+        },
+        "INPUT.COPY": {
+          actions: ["invokeOnCopy"]
+        }
+      }
+    }
+  },
+  implementations: {
+    effects: {
+      waitForTimeout({ prop, send }) {
+        return setRafTimeout(() => {
+          send({ type: "COPY.DONE" });
+        }, prop("timeout"));
+      }
+    },
+    actions: {
+      setValue({ context, event }) {
+        context.set("value", event.value);
+      },
+      copyToClipboard({ context, scope }) {
+        dom.writeToClipboard(scope, context.get("value"));
+      },
+      invokeOnCopy({ prop }) {
+        prop("onStatusChange")?.({ copied: true });
+      },
+      syncInputElement({ context, scope }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl) return;
+        setElementValue(inputEl, context.get("value"));
+      }
+    }
+  }
+});
+export {
+  machine
+};

package/dist/clipboard.props.d.mts

@@ -0,0 +1,10 @@
+import { ClipboardProps, IndicatorProps } from './clipboard.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof ClipboardProps)[];
+declare const contextProps: <Props extends ClipboardProps>(props: Props) => [ClipboardProps, Omit<Props, keyof ClipboardProps>];
+declare const indicatorProps: "copied"[];
+declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, "copied">];
+
+export { contextProps, indicatorProps, props, splitIndicatorProps };