@zag-js/color-picker 0.10.2 → 0.10.4

package/dist/color-picker.connect.mjs

@@ -1,14 +1,368 @@
-import {
-  connect
-} from "./chunk-5QSFKCT5.mjs";
-import "./chunk-JNBNPPMF.mjs";
-import "./chunk-KO4TBUXB.mjs";
-import "./chunk-3XH465XT.mjs";
-import "./chunk-75JXJMB5.mjs";
-import "./chunk-2ERX54SV.mjs";
-import "./chunk-SPSDVZCT.mjs";
-import "./chunk-OY3B7NXA.mjs";
-import "./chunk-KLLIOTK6.mjs";
-export {
-  connect
-};
+import { normalizeColor } from '@zag-js/color-utils';
+import { getNativeEvent, isLeftClick, isModifiedEvent, getEventPoint, getEventStep, getEventKey } from '@zag-js/dom-event';
+import { dataAttr } from '@zag-js/dom-query';
+import { parts } from './color-picker.anatomy.mjs';
+import { dom } from './color-picker.dom.mjs';
+import { getChannelDetails } from './utils/get-channel-details.mjs';
+import { getChannelDisplayColor } from './utils/get-channel-display-color.mjs';
+import { getChannelInputRange, getChannelInputValue } from './utils/get-channel-input-value.mjs';
+import { getColorAreaGradient } from './utils/get-color-area-gradient.mjs';
+import { getSliderBgImage } from './utils/get-slider-background.mjs';
+
+function connect(state, send, normalize) {
+  const valueAsColor = state.context.valueAsColor;
+  const isDisabled = state.context.disabled;
+  const isInteractive = state.context.isInteractive;
+  const isDragging = state.matches("dragging");
+  const channels = valueAsColor.getColorChannels();
+  return {
+    /**
+     * Whether the color picker is being dragged
+     */
+    isDragging,
+    /**
+     * The current color value (as a string)
+     */
+    value: state.context.value,
+    /**
+     * The current color value (as a Color object)
+     */
+    valueAsColor,
+    /**
+     * The current color channels of the color
+     */
+    channels,
+    /**
+     * Function to set the color value
+     */
+    setColor(value) {
+      send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" });
+    },
+    /**
+     * Function to set the color value of a specific channel
+     */
+    setChannelValue(channel, value) {
+      const color = valueAsColor.withChannelValue(channel, value);
+      send({ type: "VALUE.SET", value: color, src: "set-channel" });
+    },
+    /**
+     * Function to set the color format
+     */
+    setFormat(format) {
+      const value = valueAsColor.toFormat(format);
+      send({ type: "VALUE.SET", value, src: "set-format" });
+    },
+    contentProps: normalize.element({
+      ...parts.content.attrs,
+      id: dom.getContentId(state.context)
+    }),
+    getAreaProps(props) {
+      const { xChannel, yChannel } = props;
+      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      return normalize.element({
+        ...parts.area.attrs,
+        id: dom.getAreaId(state.context),
+        role: "group",
+        onPointerDown(event) {
+          if (!isInteractive)
+            return;
+          const evt = getNativeEvent(event);
+          if (!isLeftClick(evt) || isModifiedEvent(evt))
+            return;
+          const point = getEventPoint(evt);
+          const channel = { xChannel, yChannel };
+          send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
+        },
+        style: {
+          position: "relative",
+          touchAction: "none",
+          forcedColorAdjust: "none",
+          ...areaStyles
+        }
+      });
+    },
+    getAreaGradientProps(props) {
+      const { xChannel, yChannel } = props;
+      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      return normalize.element({
+        ...parts.areaGradient.attrs,
+        id: dom.getAreaGradientId(state.context),
+        style: {
+          position: "relative",
+          touchAction: "none",
+          forcedColorAdjust: "none",
+          ...areaGradientStyles
+        }
+      });
+    },
+    getAreaThumbProps(props) {
+      const { xChannel, yChannel } = props;
+      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel);
+      const { x, y } = getThumbPosition();
+      const channel = { xChannel, yChannel };
+      return normalize.element({
+        ...parts.areaThumb.attrs,
+        id: dom.getAreaThumbId(state.context),
+        tabIndex: isDisabled ? void 0 : 0,
+        "data-disabled": dataAttr(isDisabled),
+        role: "presentation",
+        style: {
+          position: "absolute",
+          left: `${x * 100}%`,
+          top: `${y * 100}%`,
+          transform: "translate(-50%, -50%)",
+          touchAction: "none",
+          forcedColorAdjust: "none",
+          background: valueAsColor.withChannelValue("alpha", 1).toString("css")
+        },
+        onBlur() {
+          send("AREA.BLUR");
+        },
+        onKeyDown(event) {
+          if (!isInteractive)
+            return;
+          const step = getEventStep(event);
+          const keyMap = {
+            ArrowUp() {
+              send({ type: "AREA.ARROW_UP", channel, step });
+            },
+            ArrowDown() {
+              send({ type: "AREA.ARROW_DOWN", channel, step });
+            },
+            ArrowLeft() {
+              send({ type: "AREA.ARROW_LEFT", channel, step });
+            },
+            ArrowRight() {
+              send({ type: "AREA.ARROW_RIGHT", channel, step });
+            },
+            PageUp() {
+              send({ type: "AREA.PAGE_UP", channel, step });
+            },
+            PageDown() {
+              send({ type: "AREA.PAGE_DOWN", channel, step });
+            }
+          };
+          const exec = keyMap[getEventKey(event, state.context)];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getChannelSliderTrackProps(props) {
+      const { orientation = "horizontal", channel } = props;
+      return normalize.element({
+        ...parts.channelSliderTrack.attrs,
+        id: dom.getChannelSliderTrackId(state.context, channel),
+        role: "group",
+        "data-channel": channel,
+        "data-orientation": orientation,
+        onPointerDown(event) {
+          if (!isInteractive)
+            return;
+          const evt = getNativeEvent(event);
+          if (!isLeftClick(evt) || isModifiedEvent(evt))
+            return;
+          const point = getEventPoint(evt);
+          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
+        },
+        style: {
+          position: "relative",
+          touchAction: "none",
+          forcedColorAdjust: "none",
+          backgroundImage: getSliderBgImage(state.context, { orientation, channel })
+        }
+      });
+    },
+    getChannelSliderBackgroundProps(props) {
+      const { orientation = "horizontal", channel } = props;
+      return normalize.element({
+        ...parts.channelSliderTrackBg.attrs,
+        "data-orientation": orientation,
+        "data-channel": channel,
+        style: {
+          position: "absolute",
+          backgroundColor: "#fff",
+          backgroundImage: [
+            "linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)",
+            "linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)",
+            "linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)",
+            "linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)"
+          ].join(","),
+          backgroundSize: "16px 16px",
+          backgroundPosition: "-2px -2px,-2px 6px,6px -10px,-10px -2px",
+          inset: 0,
+          zIndex: -1
+        }
+      });
+    },
+    getChannelSliderThumbProps(props) {
+      const { orientation = "horizontal", channel } = props;
+      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel);
+      const channelValue = valueAsColor.getChannelValue(channel);
+      const offset = (channelValue - minValue) / (maxValue - minValue);
+      const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
+      return normalize.element({
+        ...parts.channelSliderThumb.attrs,
+        id: dom.getChannelSliderThumbId(state.context, channel),
+        role: "slider",
+        "aria-label": channel,
+        tabIndex: isDisabled ? void 0 : 0,
+        "data-channel": channel,
+        "data-disabled": dataAttr(isDisabled),
+        "data-orientation": orientation,
+        "aria-disabled": dataAttr(isDisabled),
+        "aria-orientation": orientation,
+        "aria-valuemax": maxValue,
+        "aria-valuemin": minValue,
+        "aria-valuenow": channelValue,
+        style: {
+          forcedColorAdjust: "none",
+          position: "absolute",
+          background: getChannelDisplayColor(valueAsColor, channel).toString("css"),
+          ...placementStyles
+        },
+        onFocus() {
+          if (!isInteractive)
+            return;
+          send({ type: "CHANNEL_SLIDER.FOCUS", channel });
+        },
+        onBlur() {
+          if (!isInteractive)
+            return;
+          send({ type: "CHANNEL_SLIDER.BLUR", channel });
+        },
+        onKeyDown(event) {
+          if (!isInteractive)
+            return;
+          const step = getEventStep(event) * stepValue;
+          const keyMap = {
+            ArrowUp() {
+              send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
+            },
+            ArrowDown() {
+              send({ type: "CHANNEL_SLIDER.ARROW_DOWN", channel, step });
+            },
+            ArrowLeft() {
+              send({ type: "CHANNEL_SLIDER.ARROW_LEFT", channel, step });
+            },
+            ArrowRight() {
+              send({ type: "CHANNEL_SLIDER.ARROW_RIGHT", channel, step });
+            },
+            PageUp() {
+              send({ type: "CHANNEL_SLIDER.PAGE_UP", channel });
+            },
+            PageDown() {
+              send({ type: "CHANNEL_SLIDER.PAGE_DOWN", channel });
+            },
+            Home() {
+              send({ type: "CHANNEL_SLIDER.HOME", channel });
+            },
+            End() {
+              send({ type: "CHANNEL_SLIDER.END", channel });
+            }
+          };
+          const exec = keyMap[getEventKey(event, state.context)];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getChannelInputProps(props) {
+      const { channel } = props;
+      const isTextField = channel === "hex" || channel === "css";
+      const range = getChannelInputRange(valueAsColor, channel);
+      return normalize.input({
+        ...parts.channelInput.attrs,
+        type: isTextField ? "text" : "number",
+        "data-channel": channel,
+        "aria-label": channel,
+        disabled: isDisabled,
+        "data-disabled": dataAttr(isDisabled),
+        readOnly: state.context.readOnly,
+        id: dom.getChannelInputId(state.context, channel),
+        defaultValue: getChannelInputValue(valueAsColor, channel),
+        min: range?.minValue,
+        max: range?.maxValue,
+        step: range?.step,
+        onFocus() {
+          send({ type: "CHANNEL_INPUT.FOCUS", channel });
+        },
+        onChange(event) {
+          if (isTextField)
+            return;
+          const value = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+        },
+        onBlur(event) {
+          const value = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.BLUR", channel, value, isTextField });
+        },
+        onKeyDown(event) {
+          if (!isTextField)
+            return;
+          if (event.key === "Enter") {
+            const value = event.currentTarget.value;
+            send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+          }
+        },
+        style: {
+          appearance: "none",
+          WebkitAppearance: "none",
+          MozAppearance: "textfield"
+        }
+      });
+    },
+    eyeDropperTriggerProps: normalize.button({
+      ...parts.eyeDropTrigger.attrs,
+      onClick() {
+        send("EYEDROPPER.CLICK");
+      }
+    }),
+    getSwatchBackgroundProps(props) {
+      const { value } = props;
+      const alpha = normalizeColor(value).getChannelValue("alpha");
+      return normalize.element({
+        ...parts.swatchBg.attrs,
+        "data-alpha": alpha,
+        style: {
+          width: "100%",
+          height: "100%",
+          background: "#fff",
+          backgroundImage: [
+            "linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)",
+            "linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)",
+            "linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)",
+            "linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)"
+          ].join(","),
+          backgroundPosition: "-2px -2px,-2px 6px,6px -10px,-10px -2px",
+          backgroundSize: "16px 16px",
+          position: "absolute",
+          inset: "0px",
+          zIndex: -1
+        }
+      });
+    },
+    getSwatchProps(props) {
+      const { value, readOnly } = props;
+      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace());
+      return normalize.element({
+        ...parts.swatch.attrs,
+        onClick() {
+          if (readOnly)
+            return;
+          send({ type: "VALUE.SET", value: color });
+        },
+        style: {
+          position: "relative",
+          background: color.toString("css")
+        }
+      });
+    }
+  };
+}
+
+export { connect };

package/dist/color-picker.dom.d.ts

@@ -1,51 +1,46 @@
-import { ColorChannel } from '@zag-js/color-utils';
-import { Point } from '@zag-js/dom-event';
-import { MachineContext } from './color-picker.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const dom: {
+import { type ColorChannel } from "@zag-js/color-utils";
+import { type Point } from "@zag-js/dom-event";
+import type { MachineContext as Ctx } from "./color-picker.types";
+export declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => ShadowRoot | Document;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
     getDoc: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => HTMLElement | null;
     getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T | null;
     queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T_1;
 } & {
-    getContentId: (ctx: MachineContext) => string;
-    getAreaId: (ctx: MachineContext) => string;
-    getAreaGradientId: (ctx: MachineContext) => string;
-    getAreaThumbId: (ctx: MachineContext) => string;
-    getChannelSliderTrackId: (ctx: MachineContext, channel: ColorChannel) => string;
-    getChannelInputId: (ctx: MachineContext, channel: string) => string;
-    getChannelSliderThumbId: (ctx: MachineContext, channel: ColorChannel) => string;
-    getContentEl: (ctx: MachineContext) => HTMLElement;
-    getAreaThumbEl: (ctx: MachineContext) => HTMLElement;
-    getChannelSliderThumbEl: (ctx: MachineContext, channel: ColorChannel) => HTMLElement;
-    getChannelInputEl: (ctx: MachineContext, channel: string) => HTMLInputElement;
-    getAreaEl: (ctx: MachineContext) => HTMLElement;
-    getAreaValueFromPoint(ctx: MachineContext, point: Point): {
+    getContentId: (ctx: Ctx) => string;
+    getAreaId: (ctx: Ctx) => string;
+    getAreaGradientId: (ctx: Ctx) => string;
+    getAreaThumbId: (ctx: Ctx) => string;
+    getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) => string;
+    getChannelInputId: (ctx: Ctx, channel: string) => string;
+    getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) => string;
+    getContentEl: (ctx: Ctx) => HTMLElement;
+    getAreaThumbEl: (ctx: Ctx) => HTMLElement;
+    getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) => HTMLElement;
+    getChannelInputEl: (ctx: Ctx, channel: string) => HTMLInputElement;
+    getAreaEl: (ctx: Ctx) => HTMLElement;
+    getAreaValueFromPoint(ctx: Ctx, point: Point): {
         x: number;
         y: number;
     };
-    getChannelSliderTrackEl: (ctx: MachineContext, channel: ColorChannel) => HTMLElement;
-    getChannelSliderValueFromPoint(ctx: MachineContext, point: Point, channel: ColorChannel): {
+    getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => HTMLElement;
+    getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel): {
         x: number;
         y: number;
     };
-    getChannelInputEls: (ctx: MachineContext) => HTMLInputElement[];
+    getChannelInputEls: (ctx: Ctx) => HTMLInputElement[];
 };
-
-export { dom };

package/dist/color-picker.dom.js

@@ -1,31 +1,11 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/color-picker.dom.ts
-var color_picker_dom_exports = {};
-__export(color_picker_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(color_picker_dom_exports);
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+
+const dom = domQuery.createScope({
   getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
   getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
   getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
@@ -39,21 +19,19 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    const { percent } = domEvent.getRelativePoint(point, dom.getAreaEl(ctx));
     return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    const { percent } = domEvent.getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel));
     return percent;
   },
   getChannelInputEls: (ctx) => {
-    return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
+    return domQuery.queryAll(dom.getContentEl(ctx), "input[data-channel]");
   }
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/color-picker.dom.mjs

@@ -1,6 +1,33 @@
-import {
-  dom
-} from "./chunk-SPSDVZCT.mjs";
-export {
-  dom
-};
+import { getRelativePoint } from '@zag-js/dom-event';
+import { createScope, queryAll } from '@zag-js/dom-query';
+
+const dom = createScope({
+  getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
+  getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
+  getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
+  getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
+  getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
+  getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
+  getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
+  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
+  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
+  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
+  getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
+  getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
+  getAreaValueFromPoint(ctx, point) {
+    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx));
+    return percent;
+  },
+  getChannelSliderTrackEl: (ctx, channel) => {
+    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
+  },
+  getChannelSliderValueFromPoint(ctx, point, channel) {
+    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
+  },
+  getChannelInputEls: (ctx) => {
+    return queryAll(dom.getContentEl(ctx), "input[data-channel]");
+  }
+});
+
+export { dom };

package/dist/color-picker.machine.d.ts

@@ -1,8 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedContext, MachineContext, MachineState } from './color-picker.types.js';
-import '@zag-js/color-utils';
-import '@zag-js/types';
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { machine };
+import { Machine, StateMachine } from '@zag-js/core';
+import { MachineContext, MachineState, UserDefinedContext } from "./color-picker.types";
+export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;