@zag-js/clipboard 2.0.0-next.0 → 2.0.0-next.2

package/dist/clipboard.connect.js

@@ -34,12 +34,19 @@ __export(clipboard_connect_exports, {
 });
 module.exports = __toCommonJS(clipboard_connect_exports);
 var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
 var import_clipboard = require("./clipboard.anatomy.js");
 var dom = __toESM(require("./clipboard.dom.js"));
+var defaultTranslations = {
+  triggerLabel: (copied) => copied ? "Copied to clipboard" : "Copy to clipboard"
+};
 function connect(service, normalize) {
   const { state, send, context, scope, prop } = service;
   const copied = state.matches("copied");
-  const translations = prop("translations");
+  const translations = (0, import_utils.mergeWithDefault)(defaultTranslations, prop("translations"));
+  function getIndicatorState(props) {
+    return { copied: props.copied, visible: props.copied === copied };
+  }
   return {
     copied,
     value: context.get("value"),
@@ -96,10 +103,12 @@ function connect(service, normalize) {
         }
       });
     },
+    getIndicatorState,
     getIndicatorProps(props) {
+      const indicatorState = getIndicatorState(props);
       return normalize.element({
         ...import_clipboard.parts.indicator.attrs(scope.id),
-        hidden: props.copied !== copied
+        hidden: !indicatorState.visible
       });
     }
   };

package/dist/clipboard.connect.mjs

@@ -1,11 +1,18 @@
 // src/clipboard.connect.ts
 import { dataAttr } from "@zag-js/dom-query";
+import { mergeWithDefault } from "@zag-js/utils";
 import { parts } from "./clipboard.anatomy.mjs";
 import * as dom from "./clipboard.dom.mjs";
+var defaultTranslations = {
+  triggerLabel: (copied) => copied ? "Copied to clipboard" : "Copy to clipboard"
+};
 function connect(service, normalize) {
   const { state, send, context, scope, prop } = service;
   const copied = state.matches("copied");
-  const translations = prop("translations");
+  const translations = mergeWithDefault(defaultTranslations, prop("translations"));
+  function getIndicatorState(props) {
+    return { copied: props.copied, visible: props.copied === copied };
+  }
   return {
     copied,
     value: context.get("value"),
@@ -62,10 +69,12 @@ function connect(service, normalize) {
         }
       });
     },
+    getIndicatorState,
     getIndicatorProps(props) {
+      const indicatorState = getIndicatorState(props);
       return normalize.element({
         ...parts.indicator.attrs(scope.id),
-        hidden: props.copied !== copied
+        hidden: !indicatorState.visible
       });
     }
   };

package/dist/clipboard.machine.js

@@ -42,11 +42,7 @@ var machine = (0, import_core.createMachine)({
     return {
       timeout: 3e3,
       defaultValue: "",
-      ...props,
-      translations: {
-        triggerLabel: (copied) => copied ? "Copied to clipboard" : "Copy to clipboard",
-        ...props.translations
-      }
+      ...props
     };
   },
   initialState() {

package/dist/clipboard.machine.mjs

@@ -8,11 +8,7 @@ var machine = createMachine({
     return {
       timeout: 3e3,
       defaultValue: "",
-      ...props,
-      translations: {
-        triggerLabel: (copied) => copied ? "Copied to clipboard" : "Copy to clipboard",
-        ...props.translations
-      }
+      ...props
     };
   },
   initialState() {

package/dist/clipboard.types.d.mts

@@ -1,5 +1,5 @@
 import { Service, Machine } from '@zag-js/core';
-import { RequiredBy, CommonProperties, PropTypes } from '@zag-js/types';
+import { CommonProperties, PropTypes } from '@zag-js/types';
 
 interface CopyStatusDetails {
     copied: boolean;
@@ -10,11 +10,11 @@ interface ValueChangeDetails {
 interface IntlTranslations {
     triggerLabel?: ((copied: boolean) => string) | undefined;
 }
-type ElementIds = Partial<{
-    root: string;
-    input: string;
-    label: string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    input?: string | undefined;
+    label?: string | undefined;
+}
 interface ClipboardProps extends CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -49,7 +49,8 @@ interface ClipboardProps extends CommonProperties {
 }
 interface ClipboardSchema {
     state: "idle" | "copied";
-    props: RequiredBy<ClipboardProps, "timeout" | "translations">;
+    props: ClipboardProps;
+    defaultPropKey: "timeout" | "translations";
     context: {
         value: string;
     };
@@ -62,6 +63,16 @@ type ClipboardMachine = Machine<ClipboardSchema>;
 interface IndicatorProps {
     copied: boolean;
 }
+interface IndicatorState {
+    /**
+     * The copied state this indicator represents
+     */
+    copied: boolean;
+    /**
+     * Whether the indicator matches the current copied state
+     */
+    visible: boolean;
+}
 interface ClipboardApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the value has been copied to the clipboard
@@ -84,7 +95,11 @@ interface ClipboardApi<T extends PropTypes = PropTypes> {
     getControlProps: () => T["element"];
     getTriggerProps: () => T["button"];
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the indicator
+     */
+    getIndicatorState: (props: IndicatorProps) => IndicatorState;
     getIndicatorProps: (props: IndicatorProps) => T["element"];
 }
 
-export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ValueChangeDetails };
+export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ValueChangeDetails };

package/dist/clipboard.types.d.ts

@@ -1,5 +1,5 @@
 import { Service, Machine } from '@zag-js/core';
-import { RequiredBy, CommonProperties, PropTypes } from '@zag-js/types';
+import { CommonProperties, PropTypes } from '@zag-js/types';
 
 interface CopyStatusDetails {
     copied: boolean;
@@ -10,11 +10,11 @@ interface ValueChangeDetails {
 interface IntlTranslations {
     triggerLabel?: ((copied: boolean) => string) | undefined;
 }
-type ElementIds = Partial<{
-    root: string;
-    input: string;
-    label: string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    input?: string | undefined;
+    label?: string | undefined;
+}
 interface ClipboardProps extends CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -49,7 +49,8 @@ interface ClipboardProps extends CommonProperties {
 }
 interface ClipboardSchema {
     state: "idle" | "copied";
-    props: RequiredBy<ClipboardProps, "timeout" | "translations">;
+    props: ClipboardProps;
+    defaultPropKey: "timeout" | "translations";
     context: {
         value: string;
     };
@@ -62,6 +63,16 @@ type ClipboardMachine = Machine<ClipboardSchema>;
 interface IndicatorProps {
     copied: boolean;
 }
+interface IndicatorState {
+    /**
+     * The copied state this indicator represents
+     */
+    copied: boolean;
+    /**
+     * Whether the indicator matches the current copied state
+     */
+    visible: boolean;
+}
 interface ClipboardApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the value has been copied to the clipboard
@@ -84,7 +95,11 @@ interface ClipboardApi<T extends PropTypes = PropTypes> {
     getControlProps: () => T["element"];
     getTriggerProps: () => T["button"];
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the indicator
+     */
+    getIndicatorState: (props: IndicatorProps) => IndicatorState;
     getIndicatorProps: (props: IndicatorProps) => T["element"];
 }
 
-export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ValueChangeDetails };
+export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ValueChangeDetails };

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './clipboard.anatomy.mjs';
 export { connect } from './clipboard.connect.mjs';
 export { machine } from './clipboard.machine.mjs';
 export { contextProps, indicatorProps, props, splitIndicatorProps } from './clipboard.props.mjs';
-export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.mjs';
+export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './clipboard.anatomy.js';
 export { connect } from './clipboard.connect.js';
 export { machine } from './clipboard.machine.js';
 export { contextProps, indicatorProps, props, splitIndicatorProps } from './clipboard.props.js';
-export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.js';
+export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/clipboard",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the clipboard widget implemented as a state machine",
   "keywords": [
     "js",
@@ -15,7 +15,10 @@
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
   "main": "dist/index.js",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/clipboard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/clipboard"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -27,11 +30,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0"
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2",
+    "@zag-js/core": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -64,7 +67,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }