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

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

@@ -0,0 +1,88 @@
+import { ColorChannel, Color, ColorAxes } from '@zag-js/color-utils';
+import { StateMachine } from '@zag-js/core';
+import { Orientation, RequiredBy, CommonProperties, Context } from '@zag-js/types';
+
+type ChannelProps = {
+    channel: ColorChannel;
+    orientation?: Orientation;
+};
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+type ChannelInputProps = {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation;
+};
+type AreaProps = {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+};
+type SwatchProps = {
+    readOnly?: boolean;
+    value: string | Color;
+};
+type ChangeDetails = {
+    value: string;
+    valueAsColor: Color;
+};
+type PublicContext = CommonProperties & {
+    /**
+     * The direction of the color picker
+     */
+    dir: "ltr" | "rtl";
+    /**
+     * The current color value
+     */
+    value: string;
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Handler that is called when the value changes, as the user drags.
+     */
+    onChange?: (details: ChangeDetails) => void;
+    /**
+     * Handler that is called when the user stops dragging.
+     */
+    onChangeEnd?: (details: ChangeDetails) => void;
+};
+type PrivateContext = Context<{
+    /**
+     * The id of the thumb that is currently being dragged
+     */
+    activeId: string | null;
+    /**
+     * The color value as a Color object
+     */
+    valueAsColor: Color;
+    /**
+     * The channel that is currently being interacted with
+     */
+    activeChannel: Partial<ColorAxes> | null;
+    /**
+     * The orientation of the channel that is currently being interacted with
+     */
+    activeOrientation: Orientation | null;
+}>;
+type ComputedContext = Readonly<{
+    /**
+     * Whether the color picker is in RTL mode
+     */
+    isRtl: boolean;
+    /**
+     * Whether the color picker is interactive
+     */
+    isInteractive: boolean;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+export { AreaProps, ChannelInputProps, ChannelProps, ExtendedColorChannel, MachineContext, MachineState, Send, State, SwatchProps, UserDefinedContext };

package/dist/color-picker.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var color_picker_types_exports = {};
+module.exports = __toCommonJS(color_picker_types_exports);

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { connect } from './color-picker.connect.js';
+export { machine } from './color-picker.machine.js';
+export { UserDefinedContext as Context } from './color-picker.types.js';
+import '@zag-js/color-utils';
+import '@zag-js/types';
+import '@zag-js/core';