@zag-js/color-picker 0.10.4 → 0.11.0

package/dist/color-picker.machine.js

@@ -1,340 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const colorUtils = require('@zag-js/color-utils');
-const core = require('@zag-js/core');
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const numericRange = require('@zag-js/numeric-range');
-const textSelection = require('@zag-js/text-selection');
-const utils = require('@zag-js/utils');
-const colorPicker_dom = require('./color-picker.dom.js');
-const getChannelDetails = require('./utils/get-channel-details.js');
-const getChannelInputValue = require('./utils/get-channel-input-value.js');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "color-picker",
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        activeId: null,
-        activeChannel: null,
-        activeOrientation: null,
-        value: "#D9D9D9",
-        ...ctx,
-        valueAsColor: colorUtils.parseColor(ctx.value || "#D9D9D9")
-      },
-      computed: {
-        isRtl: (ctx2) => ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly)
-      },
-      on: {
-        "VALUE.SET": {
-          actions: ["setValue"]
-        }
-      },
-      created: ["setValueAsColor"],
-      watch: {
-        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
-      },
-      states: {
-        idle: {
-          on: {
-            "EYEDROPPER.CLICK": {
-              actions: ["openEyeDropper"]
-            },
-            "AREA.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_INPUT.FOCUS": {
-              target: "focused",
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            }
-          }
-        },
-        focused: {
-          on: {
-            "AREA.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"]
-            },
-            "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"]
-            },
-            "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"]
-            },
-            "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_LEFT": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_RIGHT": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.HOME": {
-              actions: ["setChannelToMin"]
-            },
-            "CHANNEL_SLIDER.END": {
-              actions: ["setChannelToMax"]
-            },
-            "CHANNEL_INPUT.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            },
-            "CHANNEL_INPUT.BLUR": [
-              {
-                guard: "isTextField",
-                target: "idle",
-                actions: ["setChannelColorFromInput"]
-              },
-              { target: "idle" }
-            ],
-            "CHANNEL_SLIDER.BLUR": {
-              target: "idle"
-            },
-            "AREA.BLUR": {
-              target: "idle"
-            }
-          }
-        },
-        dragging: {
-          exit: ["clearActiveChannel"],
-          activities: ["trackPointerMove", "disableTextSelection"],
-          on: {
-            "AREA.POINTER_MOVE": {
-              actions: ["setAreaColorFromPoint"]
-            },
-            "AREA.POINTER_UP": {
-              target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            },
-            "CHANNEL_SLIDER.POINTER_MOVE": {
-              actions: ["setChannelColorFromPoint"]
-            },
-            "CHANNEL_SLIDER.POINTER_UP": {
-              target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isTextField: (_ctx, evt) => !!evt.isTextField
-      },
-      activities: {
-        trackPointerMove(ctx2, _evt, { send }) {
-          return domEvent.trackPointerMove(colorPicker_dom.dom.getDoc(ctx2), {
-            onPointerMove({ point }) {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point });
-            },
-            onPointerUp() {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
-              send({ type });
-            }
-          });
-        },
-        disableTextSelection(ctx2) {
-          return textSelection.disableTextSelection({ doc: colorPicker_dom.dom.getDoc(ctx2), target: colorPicker_dom.dom.getContentEl(ctx2) });
-        }
-      },
-      actions: {
-        openEyeDropper(ctx2) {
-          const isSupported = "EyeDropper" in colorPicker_dom.dom.getWin(ctx2);
-          if (!isSupported)
-            return;
-          const win = colorPicker_dom.dom.getWin(ctx2);
-          const picker = new win.EyeDropper();
-          picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.valueAsColor.getColorSpace();
-            const color = colorUtils.parseColor(sRGBHex).toFormat(format);
-            setColor(ctx2, color);
-            ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
-          }).catch(() => void 0);
-        },
-        setActiveChannel(ctx2, evt) {
-          ctx2.activeId = evt.id;
-          if (evt.channel) {
-            ctx2.activeChannel = evt.channel;
-          }
-          if (evt.orientation) {
-            ctx2.activeOrientation = evt.orientation;
-          }
-        },
-        clearActiveChannel(ctx2) {
-          ctx2.activeChannel = null;
-          ctx2.activeId = null;
-          ctx2.activeOrientation = null;
-        },
-        setAreaColorFromPoint(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
-          const percent = colorPicker_dom.dom.getAreaValueFromPoint(ctx2, evt.point);
-          const { getColorFromPoint } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = getColorFromPoint(percent.x, percent.y);
-          if (!color)
-            return;
-          setColor(ctx2, color);
-        },
-        setChannelColorFromPoint(ctx2, evt) {
-          const channel = evt.channel || ctx2.activeId;
-          const percent = colorPicker_dom.dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
-          const orientation = ctx2.activeOrientation || "horizontal";
-          const point = orientation === "horizontal" ? percent.x : percent.y;
-          const channelValue = numericRange.getPercentValue(point, minValue, maxValue, step);
-          const value = numericRange.snapValueToStep(channelValue - step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
-          setColor(ctx2, newColor);
-        },
-        setValue(ctx2, evt) {
-          setColor(ctx2, evt.value);
-        },
-        setValueAsColor(ctx2) {
-          try {
-            const color = colorUtils.parseColor(ctx2.value);
-            if (color.isEqual(ctx2.valueAsColor))
-              return;
-            ctx2.valueAsColor = color;
-          } catch {
-          }
-        },
-        syncChannelInputs(ctx2) {
-          const inputs = colorPicker_dom.dom.getChannelInputEls(ctx2);
-          inputs.forEach((input) => {
-            const channel = input.getAttribute("data-channel");
-            if (!channel)
-              return;
-            const value = getChannelInputValue.getChannelInputValue(ctx2.valueAsColor, channel);
-            input.value = value.toString();
-          });
-        },
-        setChannelColorFromInput(ctx2, evt) {
-          const { channel, isTextField, value } = evt;
-          try {
-            const format = ctx2.valueAsColor.getColorSpace();
-            const newColor = isTextField ? colorUtils.parseColor(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
-            setColor(ctx2, newColor);
-          } catch {
-            const input = colorPicker_dom.dom.getChannelInputEl(ctx2, channel);
-            if (!input)
-              return;
-            input.value = getChannelInputValue.getChannelInputValue(ctx2.valueAsColor, channel);
-          }
-        },
-        incrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = numericRange.snapValueToStep(channelValue + evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, numericRange.clampValue(value, minValue, maxValue));
-          setColor(ctx2, newColor);
-        },
-        decrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = numericRange.snapValueToStep(channelValue - evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, numericRange.clampValue(value, minValue, maxValue));
-          setColor(ctx2, newColor);
-        },
-        incrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementX } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
-          setColor(ctx2, newColor);
-        },
-        decrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementX } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
-          setColor(ctx2, newColor);
-        },
-        incrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementY } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
-          setColor(ctx2, newColor);
-        },
-        decrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementY } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
-          setColor(ctx2, newColor);
-        },
-        setChannelToMax(ctx2, evt) {
-          const { maxValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
-          setColor(ctx2, newColor);
-        },
-        setChannelToMin(ctx2, evt) {
-          const { minValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
-          setColor(ctx2, newColor);
-        },
-        invokeOnChangeEnd(ctx2) {
-          ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
-        },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
-        },
-        focusAreaThumb(ctx2) {
-          domQuery.raf(() => {
-            colorPicker_dom.dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusChannelThumb(ctx2, evt) {
-          domQuery.raf(() => {
-            colorPicker_dom.dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
-          });
-        }
-      }
-    }
-  );
-}
-const setColor = (ctx, color) => {
-  ctx.value = color.toString("css");
-  ctx.valueAsColor = color;
-};
-
-exports.machine = machine;

package/dist/color-picker.machine.mjs

@@ -1,336 +0,0 @@
-import { parseColor } from '@zag-js/color-utils';
-import { createMachine } from '@zag-js/core';
-import { trackPointerMove } from '@zag-js/dom-event';
-import { raf } from '@zag-js/dom-query';
-import { getPercentValue, snapValueToStep, clampValue } from '@zag-js/numeric-range';
-import { disableTextSelection } from '@zag-js/text-selection';
-import { compact } from '@zag-js/utils';
-import { dom } from './color-picker.dom.mjs';
-import { getChannelDetails } from './utils/get-channel-details.mjs';
-import { getChannelInputValue } from './utils/get-channel-input-value.mjs';
-
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "color-picker",
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        activeId: null,
-        activeChannel: null,
-        activeOrientation: null,
-        value: "#D9D9D9",
-        ...ctx,
-        valueAsColor: parseColor(ctx.value || "#D9D9D9")
-      },
-      computed: {
-        isRtl: (ctx2) => ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly)
-      },
-      on: {
-        "VALUE.SET": {
-          actions: ["setValue"]
-        }
-      },
-      created: ["setValueAsColor"],
-      watch: {
-        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
-      },
-      states: {
-        idle: {
-          on: {
-            "EYEDROPPER.CLICK": {
-              actions: ["openEyeDropper"]
-            },
-            "AREA.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_INPUT.FOCUS": {
-              target: "focused",
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            }
-          }
-        },
-        focused: {
-          on: {
-            "AREA.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"]
-            },
-            "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"]
-            },
-            "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"]
-            },
-            "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_LEFT": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_RIGHT": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.HOME": {
-              actions: ["setChannelToMin"]
-            },
-            "CHANNEL_SLIDER.END": {
-              actions: ["setChannelToMax"]
-            },
-            "CHANNEL_INPUT.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            },
-            "CHANNEL_INPUT.BLUR": [
-              {
-                guard: "isTextField",
-                target: "idle",
-                actions: ["setChannelColorFromInput"]
-              },
-              { target: "idle" }
-            ],
-            "CHANNEL_SLIDER.BLUR": {
-              target: "idle"
-            },
-            "AREA.BLUR": {
-              target: "idle"
-            }
-          }
-        },
-        dragging: {
-          exit: ["clearActiveChannel"],
-          activities: ["trackPointerMove", "disableTextSelection"],
-          on: {
-            "AREA.POINTER_MOVE": {
-              actions: ["setAreaColorFromPoint"]
-            },
-            "AREA.POINTER_UP": {
-              target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            },
-            "CHANNEL_SLIDER.POINTER_MOVE": {
-              actions: ["setChannelColorFromPoint"]
-            },
-            "CHANNEL_SLIDER.POINTER_UP": {
-              target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isTextField: (_ctx, evt) => !!evt.isTextField
-      },
-      activities: {
-        trackPointerMove(ctx2, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx2), {
-            onPointerMove({ point }) {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point });
-            },
-            onPointerUp() {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
-              send({ type });
-            }
-          });
-        },
-        disableTextSelection(ctx2) {
-          return disableTextSelection({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
-        }
-      },
-      actions: {
-        openEyeDropper(ctx2) {
-          const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported)
-            return;
-          const win = dom.getWin(ctx2);
-          const picker = new win.EyeDropper();
-          picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.valueAsColor.getColorSpace();
-            const color = parseColor(sRGBHex).toFormat(format);
-            setColor(ctx2, color);
-            ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
-          }).catch(() => void 0);
-        },
-        setActiveChannel(ctx2, evt) {
-          ctx2.activeId = evt.id;
-          if (evt.channel) {
-            ctx2.activeChannel = evt.channel;
-          }
-          if (evt.orientation) {
-            ctx2.activeOrientation = evt.orientation;
-          }
-        },
-        clearActiveChannel(ctx2) {
-          ctx2.activeChannel = null;
-          ctx2.activeId = null;
-          ctx2.activeOrientation = null;
-        },
-        setAreaColorFromPoint(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
-          const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = getColorFromPoint(percent.x, percent.y);
-          if (!color)
-            return;
-          setColor(ctx2, color);
-        },
-        setChannelColorFromPoint(ctx2, evt) {
-          const channel = evt.channel || ctx2.activeId;
-          const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
-          const orientation = ctx2.activeOrientation || "horizontal";
-          const point = orientation === "horizontal" ? percent.x : percent.y;
-          const channelValue = getPercentValue(point, minValue, maxValue, step);
-          const value = snapValueToStep(channelValue - step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
-          setColor(ctx2, newColor);
-        },
-        setValue(ctx2, evt) {
-          setColor(ctx2, evt.value);
-        },
-        setValueAsColor(ctx2) {
-          try {
-            const color = parseColor(ctx2.value);
-            if (color.isEqual(ctx2.valueAsColor))
-              return;
-            ctx2.valueAsColor = color;
-          } catch {
-          }
-        },
-        syncChannelInputs(ctx2) {
-          const inputs = dom.getChannelInputEls(ctx2);
-          inputs.forEach((input) => {
-            const channel = input.getAttribute("data-channel");
-            if (!channel)
-              return;
-            const value = getChannelInputValue(ctx2.valueAsColor, channel);
-            input.value = value.toString();
-          });
-        },
-        setChannelColorFromInput(ctx2, evt) {
-          const { channel, isTextField, value } = evt;
-          try {
-            const format = ctx2.valueAsColor.getColorSpace();
-            const newColor = isTextField ? parseColor(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
-            setColor(ctx2, newColor);
-          } catch {
-            const input = dom.getChannelInputEl(ctx2, channel);
-            if (!input)
-              return;
-            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
-          }
-        },
-        incrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
-          setColor(ctx2, newColor);
-        },
-        decrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
-          setColor(ctx2, newColor);
-        },
-        incrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
-          setColor(ctx2, newColor);
-        },
-        decrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
-          setColor(ctx2, newColor);
-        },
-        incrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
-          setColor(ctx2, newColor);
-        },
-        decrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
-          setColor(ctx2, newColor);
-        },
-        setChannelToMax(ctx2, evt) {
-          const { maxValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
-          setColor(ctx2, newColor);
-        },
-        setChannelToMin(ctx2, evt) {
-          const { minValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
-          setColor(ctx2, newColor);
-        },
-        invokeOnChangeEnd(ctx2) {
-          ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
-        },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
-        },
-        focusAreaThumb(ctx2) {
-          raf(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusChannelThumb(ctx2, evt) {
-          raf(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
-          });
-        }
-      }
-    }
-  );
-}
-const setColor = (ctx, color) => {
-  ctx.value = color.toString("css");
-  ctx.valueAsColor = color;
-};
-
-export { machine };