chroma-panel 0.2.0 → 1.0.0

package/dist/primitives/ChannelSlider.js

@@ -42,8 +42,8 @@ function ChannelSlider(props) {
 	});
 	const drag = usePointerDrag({
 		disabled,
-		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get())),
-		onEnd: () => store.commit()
+		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get()), "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = read(store.get());
 	const track = /* @__PURE__ */ jsxs("div", {
@@ -69,8 +69,8 @@ function ChannelSlider(props) {
 				step: step ?? 1,
 				defaultValue: initial,
 				disabled,
-				onInput: (v) => store.set(write(v, store.get())),
-				onCommit: () => store.commit()
+				onInput: (v) => store.set(write(v, store.get()), "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorArea.cjs

@@ -35,8 +35,8 @@ function ColorArea(props) {
 		onMove: ({ x, y }) => store.patch({
 			s: x * 100,
 			v: (1 - y) * 100
-		}),
-		onEnd: () => store.commit()
+		}, "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -61,8 +61,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.s),
 				disabled,
-				onInput: (s) => store.patch({ s }),
-				onCommit: () => store.commit()
+				onInput: (s) => store.patch({ s }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
 				ref: valRef,
@@ -71,8 +71,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.v),
 				disabled,
-				onInput: (v) => store.patch({ v }),
-				onCommit: () => store.commit()
+				onInput: (v) => store.patch({ v }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: require_context.cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorArea.js

@@ -33,8 +33,8 @@ function ColorArea(props) {
 		onMove: ({ x, y }) => store.patch({
 			s: x * 100,
 			v: (1 - y) * 100
-		}),
-		onEnd: () => store.commit()
+		}, "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ jsxs("div", {
@@ -59,8 +59,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.s),
 				disabled,
-				onInput: (s) => store.patch({ s }),
-				onCommit: () => store.commit()
+				onInput: (s) => store.patch({ s }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx(AxisInput, {
 				ref: valRef,
@@ -69,8 +69,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.v),
 				disabled,
-				onInput: (v) => store.patch({ v }),
-				onCommit: () => store.commit()
+				onInput: (v) => store.patch({ v }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorDisc.cjs

@@ -41,9 +41,9 @@ function ColorDisc(props) {
 			const distance = Math.min(Math.hypot(dx, dy), .5);
 			const patch = { s: distance / .5 * 100 };
 			if (distance > 1e-6) patch.h = require_convert.normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
-			store.patch(patch);
+			store.patch(patch, "pointer");
 		},
-		onEnd: () => store.commit()
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -70,8 +70,8 @@ function ColorDisc(props) {
 					max: 360,
 					defaultValue: Math.round(require_convert.normalizeHue(initial.h)),
 					disabled,
-					onInput: (h) => store.patch({ h }),
-					onCommit: () => store.commit()
+					onInput: (h) => store.patch({ h }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
 					ref: satRef,
@@ -80,8 +80,8 @@ function ColorDisc(props) {
 					max: 100,
 					defaultValue: Math.round(initial.s),
 					disabled,
-					onInput: (s) => store.patch({ s }),
-					onCommit: () => store.commit()
+					onInput: (s) => store.patch({ s }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: require_context.cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorDisc.js

@@ -39,9 +39,9 @@ function ColorDisc(props) {
 			const distance = Math.min(Math.hypot(dx, dy), .5);
 			const patch = { s: distance / .5 * 100 };
 			if (distance > 1e-6) patch.h = normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
-			store.patch(patch);
+			store.patch(patch, "pointer");
 		},
-		onEnd: () => store.commit()
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ jsx("div", {
@@ -68,8 +68,8 @@ function ColorDisc(props) {
 					max: 360,
 					defaultValue: Math.round(normalizeHue(initial.h)),
 					disabled,
-					onInput: (h) => store.patch({ h }),
-					onCommit: () => store.commit()
+					onInput: (h) => store.patch({ h }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ jsx(AxisInput, {
 					ref: satRef,
@@ -78,8 +78,8 @@ function ColorDisc(props) {
 					max: 100,
 					defaultValue: Math.round(initial.s),
 					disabled,
-					onInput: (s) => store.patch({ s }),
-					onCommit: () => store.commit()
+					onInput: (s) => store.patch({ s }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorField.cjs

@@ -30,7 +30,7 @@ function ColorField(props) {
 	const handleChange = (event) => {
 		const parsed = require_parse.parse(event.currentTarget.value);
 		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
-		if (parsed !== null) store.ingest(parsed);
+		if (parsed !== null) store.ingest(parsed, "field");
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_context.cx("cp-field", classNames.field, className),
@@ -56,7 +56,7 @@ function ColorField(props) {
 				focused.current = false;
 				e.currentTarget.value = render(store.get());
 				e.currentTarget.setAttribute("aria-invalid", "false");
-				store.commit();
+				store.commit("field");
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter") e.currentTarget.blur();

package/dist/primitives/ColorField.js

@@ -28,7 +28,7 @@ function ColorField(props) {
 	const handleChange = (event) => {
 		const parsed = parse(event.currentTarget.value);
 		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
-		if (parsed !== null) store.ingest(parsed);
+		if (parsed !== null) store.ingest(parsed, "field");
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("cp-field", classNames.field, className),
@@ -54,7 +54,7 @@ function ColorField(props) {
 				focused.current = false;
 				e.currentTarget.value = render(store.get());
 				e.currentTarget.setAttribute("aria-invalid", "false");
-				store.commit();
+				store.commit("field");
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter") e.currentTarget.blur();

package/dist/primitives/NumberField.cjs

@@ -51,12 +51,12 @@ function NumberField(props) {
 			onChange: (e) => {
 				const raw = e.currentTarget.valueAsNumber;
 				if (Number.isNaN(raw)) return;
-				store.set(fns.current.write(require_convert.clamp(raw, min, max), store.get()));
+				store.set(fns.current.write(require_convert.clamp(raw, min, max), store.get()), "field");
 			},
 			onBlur: (e) => {
 				focused.current = false;
 				e.currentTarget.value = String(Math.round(fns.current.read(store.get())));
-				store.commit();
+				store.commit("field");
 			}
 		})]
 	});

package/dist/primitives/NumberField.js

@@ -49,12 +49,12 @@ function NumberField(props) {
 			onChange: (e) => {
 				const raw = e.currentTarget.valueAsNumber;
 				if (Number.isNaN(raw)) return;
-				store.set(fns.current.write(clamp(raw, min, max), store.get()));
+				store.set(fns.current.write(clamp(raw, min, max), store.get()), "field");
 			},
 			onBlur: (e) => {
 				focused.current = false;
 				e.currentTarget.value = String(Math.round(fns.current.read(store.get())));
-				store.commit();
+				store.commit("field");
 			}
 		})]
 	});

package/dist/primitives/SwatchGrid.cjs

@@ -28,8 +28,8 @@ function SwatchGrid(props) {
 		if (target === null) return;
 		const parsed = require_parse.parse(target.getAttribute("data-cp-color") ?? "");
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "swatch");
+		store.commit("swatch");
 	};
 	const grid = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		ref: gridRef,

package/dist/primitives/SwatchGrid.js

@@ -26,8 +26,8 @@ function SwatchGrid(props) {
 		if (target === null) return;
 		const parsed = parse(target.getAttribute("data-cp-color") ?? "");
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "swatch");
+		store.commit("swatch");
 	};
 	const grid = /* @__PURE__ */ jsx("ul", {
 		ref: gridRef,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chroma-panel",
-  "version": "0.2.0",
-  "description": "Accessible React color picker component with a color wheel, RGB, HSL and HSV sliders, palettes, image sampling and an eyedropper. Zero dependencies.",
+  "version": "1.0.0",
+  "description": "Accessible React color picker with CSS Color 4, gradients, color wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies.",
   "keywords": [
     "react color picker",
     "react color picker component",
@@ -25,6 +25,10 @@
     "color-picker",
     "colour-picker",
     "image-color-picker",
+    "gradient-color-picker",
+    "oklch-color-picker",
+    "display-p3",
+    "design-tokens",
     "eyedropper",
     "zero-dependency"
   ],
@@ -77,6 +81,16 @@
         "default": "./dist/core.cjs"
       }
     },
+    "./color": {
+      "import": {
+        "types": "./dist/color.d.ts",
+        "default": "./dist/color.js"
+      },
+      "require": {
+        "types": "./dist/color.d.cts",
+        "default": "./dist/color.cjs"
+      }
+    },
     "./panel": {
       "import": {
         "types": "./dist/panel.d.ts",
@@ -157,6 +171,36 @@
         "default": "./dist/contrast.cjs"
       }
     },
+    "./gradient": {
+      "import": {
+        "types": "./dist/gradient.d.ts",
+        "default": "./dist/gradient.js"
+      },
+      "require": {
+        "types": "./dist/gradient.d.cts",
+        "default": "./dist/gradient.cjs"
+      }
+    },
+    "./modes": {
+      "import": {
+        "types": "./dist/modes.d.ts",
+        "default": "./dist/modes.js"
+      },
+      "require": {
+        "types": "./dist/modes.d.cts",
+        "default": "./dist/modes.cjs"
+      }
+    },
+    "./export": {
+      "import": {
+        "types": "./dist/export.d.ts",
+        "default": "./dist/export.js"
+      },
+      "require": {
+        "types": "./dist/export.d.cts",
+        "default": "./dist/export.cjs"
+      }
+    },
     "./image-worker": "./dist/image-worker.js",
     "./styles.css": "./dist/style.css",
     "./style.css": "./dist/style.css",