@zag-js/color-picker 0.0.0-dev-20230414151834

package/dist/chunk-OY3B7NXA.mjs

@@ -0,0 +1,132 @@
+// src/utils/generate-format-background.ts
+var generateRGB_R = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_G = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_B = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateHSL_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "hsl(0, 0%, 50%)"
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_L = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      backgroundImage: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_B = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "#000"
+      ].join(",")
+    }
+  };
+  return result;
+};
+
+export {
+  generateRGB_R,
+  generateRGB_G,
+  generateRGB_B,
+  generateHSL_H,
+  generateHSL_S,
+  generateHSL_L,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSB_B
+};

package/dist/chunk-ZBNUATFY.mjs

@@ -0,0 +1,344 @@
+import {
+  getChannelInputValue
+} from "./chunk-2ERX54SV.mjs";
+import {
+  dom
+} from "./chunk-ACSV4TXB.mjs";
+import {
+  getChannelDetails
+} from "./chunk-KLLIOTK6.mjs";
+
+// src/color-picker.machine.ts
+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 { clampValue, getPercentValue, snapValueToStep } from "@zag-js/numeric-range";
+import { disableTextSelection } from "@zag-js/text-selection";
+import { compact } from "@zag-js/utils";
+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"]
+        }
+      },
+      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 position = ctx2.activeOrientation || "horizontal";
+          const point = position === "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 });
+          });
+        }
+      }
+    }
+  );
+}
+var setColor = (ctx, color) => {
+  ctx.value = color.toString("css");
+  ctx.valueAsColor = color;
+};
+
+export {
+  machine
+};

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

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
+declare const parts: Record<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/color-picker.anatomy.js

@@ -0,0 +1,47 @@
+"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);
+
+// src/color-picker.anatomy.ts
+var color_picker_anatomy_exports = {};
+__export(color_picker_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(color_picker_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
+  "area",
+  "areaThumb",
+  "areaGradient",
+  "channelSliderTrack",
+  "channelSliderTrackBg",
+  "channelSliderThumb",
+  "channelInput",
+  "swatch",
+  "swatchBg",
+  "content",
+  "label",
+  "eyeDropTrigger"
+]);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/color-picker.anatomy.mjs

@@ -0,0 +1,8 @@
+import {
+  anatomy,
+  parts
+} from "./chunk-75JXJMB5.mjs";
+export {
+  anatomy,
+  parts
+};

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

@@ -0,0 +1,27 @@
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { State, Send, AreaProps, ChannelProps, ChannelInputProps, SwatchProps } from './color-picker.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    isDragging: boolean;
+    value: string;
+    valueAsColor: Color;
+    channels: [ColorChannel, ColorChannel, ColorChannel];
+    setColor(value: string | Color): void;
+    setChannelValue(channel: ColorChannel, value: number): void;
+    setFormat(format: ColorFormat): void;
+    contentProps: T["element"];
+    getAreaProps(props: AreaProps): T["element"];
+    getAreaGradientProps(props: AreaProps): T["element"];
+    getAreaThumbProps(props: AreaProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelProps): T["element"];
+    getChannelSliderBackgroundProps(props: ChannelProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelProps): T["element"];
+    getChannelInputProps(props: ChannelInputProps): T["input"];
+    eyeDropperTriggerProps: T["button"];
+    getSwatchBackgroundProps(props: SwatchProps): T["element"];
+    getSwatchProps(props: SwatchProps): T["element"];
+};
+
+export { connect };