@zag-js/color-picker 0.6.0 → 0.7.0

package/dist/{chunk-ZBNUATFY.mjs → chunk-EUTH4EDN.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2ERX54SV.mjs";
 import {
   dom
-} from "./chunk-ACSV4TXB.mjs";
+} from "./chunk-JOGAQ7RL.mjs";
 import {
   getChannelDetails
 } from "./chunk-KLLIOTK6.mjs";

package/dist/{chunk-CD6CID4K.mjs → chunk-HSUD4DN3.mjs}

@@ -16,7 +16,7 @@ import {
 } from "./chunk-2ERX54SV.mjs";
 import {
   dom
-} from "./chunk-ACSV4TXB.mjs";
+} from "./chunk-JOGAQ7RL.mjs";
 import {
   getChannelDetails
 } from "./chunk-KLLIOTK6.mjs";

package/dist/{chunk-ACSV4TXB.mjs → chunk-JOGAQ7RL.mjs}

@@ -2,13 +2,13 @@
 import { getRelativePointPercent } from "@zag-js/dom-event";
 import { createScope, queryAll } from "@zag-js/dom-query";
 var dom = createScope({
-  getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
-  getContentId: (ctx) => `color-picker:${ctx.id}:content`,
-  getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
+  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)),

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

@@ -1,6 +1,6 @@
 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 { State, Send, ColorAreaProps, ColorChannelProps, ColorChannelInputProps, ColorSwatchProps } from './color-picker.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
@@ -33,16 +33,16 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
      */
     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"];
+    getAreaProps(props: ColorAreaProps): T["element"];
+    getAreaGradientProps(props: ColorAreaProps): T["element"];
+    getAreaThumbProps(props: ColorAreaProps): T["element"];
+    getChannelSliderTrackProps(props: ColorChannelProps): T["element"];
+    getChannelSliderBackgroundProps(props: ColorChannelProps): T["element"];
+    getChannelSliderThumbProps(props: ColorChannelProps): T["element"];
+    getChannelInputProps(props: ColorChannelInputProps): T["input"];
     eyeDropperTriggerProps: T["button"];
-    getSwatchBackgroundProps(props: SwatchProps): T["element"];
-    getSwatchProps(props: SwatchProps): T["element"];
+    getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
+    getSwatchProps(props: ColorSwatchProps): T["element"];
 };
 
 export { connect };

package/dist/color-picker.connect.js

@@ -49,13 +49,13 @@ var parts = anatomy.build();
 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)({
-  getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
-  getContentId: (ctx) => `color-picker:${ctx.id}:content`,
-  getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
+  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)),

package/dist/color-picker.connect.mjs

@@ -1,12 +1,12 @@
 import {
   connect
-} from "./chunk-CD6CID4K.mjs";
+} from "./chunk-HSUD4DN3.mjs";
 import "./chunk-JNBNPPMF.mjs";
 import "./chunk-KO4TBUXB.mjs";
 import "./chunk-3XH465XT.mjs";
 import "./chunk-75JXJMB5.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-ACSV4TXB.mjs";
+import "./chunk-JOGAQ7RL.mjs";
 import "./chunk-OY3B7NXA.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {

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

@@ -27,12 +27,12 @@ declare const dom: {
         getRootNode?: (() => Node | ShadowRoot | Document) | 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;
-    getContentId: (ctx: MachineContext) => string;
     getChannelSliderThumbId: (ctx: MachineContext, channel: ColorChannel) => string;
     getContentEl: (ctx: MachineContext) => HTMLElement;
     getAreaThumbEl: (ctx: MachineContext) => HTMLElement;

package/dist/color-picker.dom.js

@@ -26,13 +26,13 @@ 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)({
-  getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
-  getContentId: (ctx) => `color-picker:${ctx.id}:content`,
-  getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
+  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)),

package/dist/color-picker.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-ACSV4TXB.mjs";
+} from "./chunk-JOGAQ7RL.mjs";
 export {
   dom
 };

package/dist/color-picker.machine.js

@@ -35,13 +35,13 @@ var import_utils = require("@zag-js/utils");
 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)({
-  getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
-  getContentId: (ctx) => `color-picker:${ctx.id}:content`,
-  getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
+  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)),

package/dist/color-picker.machine.mjs

@@ -1,8 +1,8 @@
 import {
   machine
-} from "./chunk-ZBNUATFY.mjs";
+} from "./chunk-EUTH4EDN.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-ACSV4TXB.mjs";
+import "./chunk-JOGAQ7RL.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {
   machine

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

@@ -2,20 +2,20 @@ 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 = {
+type ColorChannelProps = {
     channel: ColorChannel;
     orientation?: Orientation;
 };
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
-type ChannelInputProps = {
+type ColorChannelInputProps = {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
 };
-type AreaProps = {
+type ColorAreaProps = {
     xChannel: ColorChannel;
     yChannel: ColorChannel;
 };
-type SwatchProps = {
+type ColorSwatchProps = {
     readOnly?: boolean;
     value: string | Color;
 };
@@ -23,7 +23,20 @@ type ChangeDetails = {
     value: string;
     valueAsColor: Color;
 };
+type ElementIds = Partial<{
+    content: string;
+    area: string;
+    areaGradient: string;
+    areaThumb: string;
+    channelInput(id: string): string;
+    channelSliderTrack(id: ColorChannel): string;
+    channelSliderThumb(id: ColorChannel): string;
+}>;
 type PublicContext = CommonProperties & {
+    /**
+     * The ids of the elements in the color picker. Useful for composition.
+     */
+    ids?: ElementIds;
     /**
      * The direction of the color picker
      */
@@ -85,4 +98,4 @@ type MachineState = {
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 
-export { AreaProps, ChannelInputProps, ChannelProps, ExtendedColorChannel, MachineContext, MachineState, Send, State, SwatchProps, UserDefinedContext };
+export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, ExtendedColorChannel, MachineContext, MachineState, Send, State, UserDefinedContext };

package/dist/index.d.ts

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

package/dist/index.js

@@ -20,16 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  anatomy: () => anatomy,
   connect: () => connect,
   machine: () => machine
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/color-picker.connect.ts
-var import_color_utils2 = require("@zag-js/color-utils");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-
 // src/color-picker.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
@@ -48,17 +44,22 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
 ]);
 var parts = anatomy.build();
 
+// src/color-picker.connect.ts
+var import_color_utils2 = require("@zag-js/color-utils");
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
+
 // src/color-picker.dom.ts
 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)({
-  getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
-  getContentId: (ctx) => `color-picker:${ctx.id}:content`,
-  getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
+  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)),
@@ -1082,6 +1083,7 @@ var setColor = (ctx, color) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  anatomy,
   connect,
   machine
 });

package/dist/index.mjs

@@ -1,18 +1,21 @@
 import {
   connect
-} from "./chunk-CD6CID4K.mjs";
+} from "./chunk-HSUD4DN3.mjs";
 import "./chunk-JNBNPPMF.mjs";
 import "./chunk-KO4TBUXB.mjs";
 import "./chunk-3XH465XT.mjs";
-import "./chunk-75JXJMB5.mjs";
+import {
+  anatomy
+} from "./chunk-75JXJMB5.mjs";
 import {
   machine
-} from "./chunk-ZBNUATFY.mjs";
+} from "./chunk-EUTH4EDN.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-ACSV4TXB.mjs";
+import "./chunk-JOGAQ7RL.mjs";
 import "./chunk-OY3B7NXA.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {
+  anatomy,
   connect,
   machine
 };

package/dist/utils/get-slider-background.d.ts

@@ -1,8 +1,8 @@
-import { MachineContext, ChannelProps } from '../color-picker.types.js';
+import { MachineContext, ColorChannelProps } from '../color-picker.types.js';
 import '@zag-js/color-utils';
 import '@zag-js/core';
 import '@zag-js/types';
 
-declare const getSliderBgImage: (ctx: MachineContext, props: Required<ChannelProps>) => string;
+declare const getSliderBgImage: (ctx: MachineContext, props: Required<ColorChannelProps>) => string;
 
 export { getSliderBgImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,7 +27,7 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.5.0",
+    "@zag-js/core": "0.7.0",
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/dom-query": "0.1.4",
     "@zag-js/dom-event": "0.6.0",