@c2n/color-area 0.0.6 → 0.0.8

package/dist/color-area.js

@@ -1,5 +1,6 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 //#region src/color-area.scss?inline
 var color_area_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-color-area {\n  display: block;\n  position: relative;\n  padding: calc(var(--c2-color-area__color-handle--size,12px) - 6px);\n  width: fit-content;\n  height: fit-content;\n}\n.c2-color-area .gradient {\n  width: 100%;\n  height: 100%;\n  width: var(--c2-color-area--width,240px);\n  height: var(--c2-color-area--height,240px);\n  border-top-left-radius: var(--c2-color-area--border-top-left-radius);\n  border-top-right-radius: var(--c2-color-area--border-top-right-radius);\n  border-bottom-left-radius: var(--c2-color-area--border-bottom-left-radius);\n  border-bottom-right-radius: var(--c2-color-area--border-bottom-right-radius);\n}\n.c2-color-area .color-handle {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n  width: var(--c2-color-area__color-handle--size,12px);\n  height: var(--c2-color-area__color-handle--size,12px);\n  border-radius: 50%;\n  top: 0;\n  left: 0;\n  border: 2px solid white;\n  background: transparent;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px;\n  cursor: inherit;\n}";
 //#endregion

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/color-area",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/color-area.js",
   "exports": {
     ".": {
-      "default": "./dist/color-area.js",
-      "types": "./types/src/color-area.d.ts"
+      "types": "./types/src/color-area.d.ts",
+      "default": "./dist/color-area.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": [
     "color-area",
@@ -48,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "@ctrl/tinycolor": "4.2.0",
     "lit": "3.3.3"
   },
@@ -56,5 +68,5 @@
     "@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/color-area. Import once, anywhere in the program:
+//
+//     import '@c2n/color-area/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 { ColorArea } from '@c2n/color-area'
+
+/** 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-color-area': C2Props<ColorArea>
+    }
+  }
+}
+
+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/color-area.d.ts

@@ -1,13 +1,27 @@
 import { LitElement, type PropertyValueMap } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import { TinyColor } from '@ctrl/tinycolor';
 export interface Point {
     x: number;
     y: number;
 }
+/** Events fired by {@link ColorArea}, keyed for `addEventListener`. */
+export interface ColorAreaEventMap {
+    change: CustomEvent<{
+        saturation: number;
+        value: number;
+    }>;
+}
+export interface ColorArea {
+    addEventListener: TypedAddEventListener<ColorArea, ColorAreaEventMap>;
+    removeEventListener: TypedRemoveEventListener<ColorArea, ColorAreaEventMap>;
+}
 /**
+ * Two-dimensional saturation/value picker for a hue, with pointer and keyboard interaction.
+ *
  * @tag c2-color-area
  *
- * @event {CustomEvent} change
+ * @event {CustomEvent<{ saturation: number; value: number }>} change - Fired while the selected saturation or value changes.
  *
  * @cssproperty {pixel} [--c2-color-area--width=240px]
  * @cssproperty {pixel} [--c2-color-area--height=240px]
@@ -20,8 +34,11 @@ export interface Point {
  */
 export declare class ColorArea extends LitElement {
     static styles: import("lit").CSSResult;
+    /** Hue of the colour plane in degrees. */
     hue: number;
+    /** Selected saturation from 0 to 1. */
     saturation: number;
+    /** Selected brightness value from 0 to 1. */
     value: number;
     get tinyColor(): TinyColor;
     colorHandle?: HTMLElement;

package/types/src/color-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-area.d.ts","sourceRoot":"","sources":["../../src/color-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAEd,GAAG,SAAI;IACP,UAAU,SAAI;IACd,KAAK,SAAI;IAErC,IAAW,SAAS,IAAI,SAAS,CAEhC;IAE6B,WAAW,CAAC,EAAE,WAAW,CAAA;IACxB,WAAW,CAAC,EAAE,WAAW,CAAA;IAExD,oBAAoB,EAAE,KAAK,CAAiB;IAE5C,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,0BAA0B,CAAC,QAAQ,EAAE,KAAK;IAW1C,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,qBAAqB;IAgB7B,eAAe,GAAU,OAAO,YAAY,mBAI3C;IAED,kBAAkB,CAAC,KAAK,EAAE,YAAY;;;;IAQtC,aAAa,aAKZ;IAED,OAAO,CAAC,yBAAyB;cAed,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAM5E,mBAAmB;IAaV,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}
+{"version":3,"file":"color-area.d.ts","sourceRoot":"","sources":["../../src/color-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAGxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAEhG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC3D;AAED,MAAM,WAAW,SAAS;IACxB,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;IACrE,mBAAmB,EAAE,wBAAwB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;CAC5E;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAE1C,0CAA0C;IACd,GAAG,SAAI;IACnC,uCAAuC;IACX,UAAU,SAAI;IAC1C,6CAA6C;IACjB,KAAK,SAAI;IAErC,IAAW,SAAS,IAAI,SAAS,CAEhC;IAE6B,WAAW,CAAC,EAAE,WAAW,CAAA;IACxB,WAAW,CAAC,EAAE,WAAW,CAAA;IAExD,oBAAoB,EAAE,KAAK,CAAiB;IAE5C,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,0BAA0B,CAAC,QAAQ,EAAE,KAAK;IAW1C,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,qBAAqB;IAgB7B,eAAe,GAAU,OAAO,YAAY,mBAI3C;IAED,kBAAkB,CAAC,KAAK,EAAE,YAAY;;;;IAQtC,aAAa,aAKZ;IAED,OAAO,CAAC,yBAAyB;cAed,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAM5E,mBAAmB;IAaV,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/color-area. Import once, anywhere in the program:
+//
+//     import '@c2n/color-area/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 { ColorArea, ColorAreaEventMap } from '@c2n/color-area'
+
+/** 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-color-area': DefineComponent<
+      C2Props<ColorArea> & {
+        onChange?: (event: ColorAreaEventMap['change']) => 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 {}