@c2n/copy-button 0.0.6 → 0.0.8

package/dist/copy-button.js

@@ -1,5 +1,6 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/copy-button.scss?inline
 var copy_button_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([pin]) {\n  position: absolute;\n  top: var(--c2-copy-button__pin--offset-y,6px);\n  right: var(--c2-copy-button__pin--offset-x,6px);\n  transform: translate(var(--_c2-copy-button-scroll-x, 0px), var(--_c2-copy-button-scroll-y, 0px));\n}\n\n:host([pin=top-left]) {\n  right: auto;\n  left: var(--c2-copy-button__pin--offset-x,6px);\n}\n\n:host([pin=bottom-right]) {\n  top: auto;\n  bottom: var(--c2-copy-button__pin--offset-y,6px);\n}\n\n:host([pin=bottom-left]) {\n  top: auto;\n  bottom: var(--c2-copy-button__pin--offset-y,6px);\n  right: auto;\n  left: var(--c2-copy-button__pin--offset-x,6px);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: var(--c2-copy-button__container__disabled--opacity,0.38);\n}\n\n.c2-copy-button {\n  appearance: none;\n  box-sizing: border-box;\n  margin: 0;\n  font: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--c2-copy-button__container--gap,6px);\n  height: var(--c2-copy-button__container--height,28px);\n  min-width: var(--c2-copy-button__container--min-width,28px);\n  padding: 0 var(--c2-copy-button__container--padding-right,6px) 0 var(--c2-copy-button__container--padding-left,6px);\n  border: var(--c2-copy-button__container--border,none);\n  border-radius: var(--c2-copy-button__container--border-radius,6px);\n  background-color: var(--c2-copy-button__container--background-color);\n  color: var(--c2-copy-button__container--color,rgb(34, 34, 34));\n  font-size: var(--c2-copy-button__container--font-size,12px);\n  font-weight: var(--c2-copy-button__container--font-weight,500);\n  font-family: var(--c2-copy-button__container--font-family);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-copy-button:hover {\n  background-color: var(--c2-copy-button__container__hover--background-color,rgb(230, 230, 230));\n  color: var(--c2-copy-button__container__hover--color,var(--c2-copy-button__container--color,rgb(34, 34, 34)));\n  border: var(--c2-copy-button__container__hover--border,var(--c2-copy-button__container--border,none));\n}\n.c2-copy-button:active {\n  background-color: var(--c2-copy-button__container__active--background-color,var(--c2-copy-button__container__hover--background-color,rgb(213, 213, 213)));\n}\n.c2-copy-button:focus-visible {\n  outline: var(--c2-copy-button__container__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-copy-button__container__focus--outline-offset,2px);\n}\n.c2-copy-button:disabled {\n  cursor: default;\n}\n.c2-copy-button.is-copied {\n  color: var(--c2-copy-button__container__copied--color,rgb(0, 122, 77));\n  background-color: var(--c2-copy-button__container__copied--background-color,var(--c2-copy-button__container--background-color));\n  border: var(--c2-copy-button__container__copied--border,var(--c2-copy-button__container--border,none));\n}\n.c2-copy-button.is-failed {\n  color: rgb(211, 21, 16);\n}\n\n:host(:not([reveal=always])) .c2-copy-button {\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--c2-copy-button--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n:host(:not([reveal=always])) .c2-copy-button.is-visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(:not([reveal=always])) .c2-copy-button {\n    transition: none;\n  }\n}\n.c2-copy-button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--c2-copy-button__icon--size,16px);\n  height: var(--c2-copy-button__icon--size,16px);\n  color: var(--c2-copy-button__icon--color);\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-copy-button-icon svg,\n.c2-copy-button-icon ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  --c2-feather-icon--size: var(--c2-copy-button__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-copy-button__icon--size,16px);\n}\n\n.c2-copy-button.is-copied .c2-copy-button-icon {\n  color: var(--c2-copy-button__icon__copied--color,var(--c2-copy-button__container__copied--color,rgb(0, 122, 77)));\n}\n\n.c2-copy-button-label {\n  display: contents;\n  white-space: nowrap;\n}\n\n.c2-copy-button-status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}";

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/copy-button",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/copy-button.js",
   "exports": {
     ".": {
-      "default": "./dist/copy-button.js",
-      "types": "./types/src/copy-button.d.ts"
+      "types": "./types/src/copy-button.d.ts",
+      "default": "./dist/copy-button.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "copy-button",
@@ -50,12 +62,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/copy-button. Import once, anywhere in the program:
+//
+//     import '@c2n/copy-button/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { CopyButton } from '@c2n/copy-button'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-copy-button': C2Props<CopyButton>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/copy-button.d.ts

@@ -1,6 +1,20 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 /** Corners `pin` can anchor to. The bare `pin` attribute means `top-right`. */
 export type CopyButtonPin = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** Events fired by {@link CopyButton}, keyed for `addEventListener`. */
+export interface CopyButtonEventMap {
+    copied: CustomEvent<{
+        text: string;
+    }>;
+    'copy-error': CustomEvent<{
+        error: unknown;
+    }>;
+}
+export interface CopyButton {
+    addEventListener: TypedAddEventListener<CopyButton, CopyButtonEventMap>;
+    removeEventListener: TypedRemoveEventListener<CopyButton, CopyButtonEventMap>;
+}
 /**
  * Copies text to the clipboard.
  *

package/types/src/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/copy-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAA;AAIrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,OAAgB,iBAAiB;;;;;;;MAA4D;IAE7F,qFAAqF;IACzE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjD,sHAAsH;IAC1G,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAE/C,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,+GAA+G;IACnE,MAAM,UAAQ;IAE1D,gDAAgD;IACU,cAAc,SAAO;IAE/E,gDAAgD;IACpC,KAAK,SAAS;IAE1B,6EAA6E;IACpC,WAAW,SAAW;IAE/D;;;;;;;;OAQG;IAC0B,MAAM,EAAE,OAAO,GAAG,QAAQ,CAAU;IAEjE;;;;;OAKG;IAC0B,GAAG,EAAE,aAAa,GAAG,EAAE,GAAG,SAAS,CAAY;IAE5E,2FAA2F;IAClF,OAAO,CAAC,MAAM,CAAQ;IAE/B,wDAAwD;IAC/C,OAAO,CAAC,OAAO,CAAQ;IAEhC,mGAAmG;IAC1F,OAAO,CAAC,OAAO,CAAQ;IAEhC,OAAO,CAAC,KAAK,CAA2C;IAExD,8FAA8F;IAC9F,OAAO,CAAC,WAAW,CAA2B;IAE9C,iEAAiE;IACjE,OAAO,CAAC,QAAQ,CAA2B;IAE3C,OAAO,CAAC,WAAW,CAAI;IAEvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAA4B;IAErC,iBAAiB;IAMjB,oBAAoB;IASpB,YAAY;IAKZ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAMjD,OAAO,CAAC,sBAAsB,CAA6B;IAE3D,yGAAyG;IACzG,OAAO,KAAK,SAAS,GAIpB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,eAAe,GAO1B;IAMD,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB,CAAuD;IACjF,OAAO,CAAC,kBAAkB,CAAwD;IAElF;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa,CAA0G;IAE/H,OAAO,CAAC,cAAc,CAMlB;IAEJ,6GAA6G;IAC7G,OAAO,CAAC,YAAY;IAMpB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY,CAGnB;IAED;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAOrB;;;;;OAKG;IACH,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAMtC;IAED,+CAA+C;IAC/C,IAAI,IAAI,IAAI,MAAM,CAKjB;IAED,yGAAyG;IACnG,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;IAkB9B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAcT,MAAM;CAqBhB;AAqGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/copy-button.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,36 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/copy-button. Import once, anywhere in the program:
+//
+//     import '@c2n/copy-button/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { CopyButton, CopyButtonEventMap } from '@c2n/copy-button'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-copy-button': DefineComponent<
+      C2Props<CopyButton> & {
+        'copied-duration'?: unknown
+        'copied-label'?: unknown
+        onCopyError?: (event: CopyButtonEventMap['copy-error']) => void
+        onCopied?: (event: CopyButtonEventMap['copied']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}