@sprawlify/vue 0.0.65 → 0.0.67

package/dist/components/color-picker/index.js

@@ -0,0 +1,1127 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as useMachine, r as normalizeProps$1, t as mergeProps$1 } from "../../core-DNndr38p.js";
+import { a as useLocaleContext, c as useEnvironmentContext, i as DEFAULT_LOCALE, s as DEFAULT_ENVIRONMENT } from "../../providers-B2CNPFg1.js";
+import { r as createContext, t as useForwardExpose } from "../../use-forward-expose-4p5AGAI3.js";
+import { t as sprawlify } from "../../factory-BH3WrWd2.js";
+import { t as cleanProps } from "../../clean-props-BDv2zb5M.js";
+import { t as RenderStrategyPropsProvider } from "../../use-render-strategy-BkxoN6ll.js";
+import { i as usePresence, n as PresenceProvider, r as usePresenceContext } from "../../presence-CvUnYMZQ.js";
+import { m as useFieldContext } from "../../field-DnHnX3Tf.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, toValue, unref, useId, useSlots, withCtx } from "vue";
+import * as colorPicker from "@sprawlify/primitives/machines/color-picker";
+import { anatomy, parse as parseColor } from "@sprawlify/primitives/machines/color-picker";
+
+//#region src/components/color-picker/use-color-picker-area-props-context.ts
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext("ColorPickerAreaPropsContext");
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-context.ts
+const [ColorPickerProvider, useColorPickerContext] = createContext("ColorPickerContext");
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-background.vue?vue&type=script&setup=true&lang.ts
+var color_picker_area_background_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-area-background",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const areaProps = useColorPickerAreaPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getAreaBackgroundProps(unref(areaProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-background.vue
+var color_picker_area_background_default = color_picker_area_background_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-thumb.vue?vue&type=script&setup=true&lang.ts
+var color_picker_area_thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-area-thumb",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const areaProps = useColorPickerAreaPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getAreaThumbProps(unref(areaProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-thumb.vue
+var color_picker_area_thumb_default = color_picker_area_thumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-area.vue?vue&type=script&setup=true&lang.ts
+var color_picker_area_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-area",
+	props: {
+		xChannel: {
+			type: null,
+			required: false
+		},
+		yChannel: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerAreaPropsProvider(props);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getAreaProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-area.vue
+var color_picker_area_default = color_picker_area_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-input.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-input",
+	props: {
+		channel: {
+			type: null,
+			required: true
+		},
+		orientation: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(colorPicker).getChannelInputProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-input.vue
+var color_picker_channel_input_default = color_picker_channel_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-channel-props-context.ts
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext("ColorPickerChannelPropsContext");
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-label.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_slider_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(colorPicker).getChannelSliderLabelProps(unref(channelProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-label.vue
+var color_picker_channel_slider_label_default = color_picker_channel_slider_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-format-context.ts
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext("ColorPickerFormatProps");
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-thumb.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_slider_thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider-thumb",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const channelSliderProps = computed(() => ({
+			...channelProps,
+			...formatProps
+		}));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getChannelSliderThumbProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-thumb.vue
+var color_picker_channel_slider_thumb_default = color_picker_channel_slider_thumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-track.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_slider_track_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider-track",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const channelSliderProps = computed(() => ({
+			...channelProps,
+			...formatProps
+		}));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getChannelSliderTrackProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-track.vue
+var color_picker_channel_slider_track_default = color_picker_channel_slider_track_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-value-text.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_slider_value_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider-value-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const slots = useSlots();
+		const localeContext = useLocaleContext(DEFAULT_LOCALE);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(colorPicker).getChannelSliderValueTextProps(unref(channelProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || unref(colorPicker).getChannelValueText(unref(channelProps).channel, unref(localeContext).locale)), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-value-text.vue
+var color_picker_channel_slider_value_text_default = color_picker_channel_slider_value_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider.vue?vue&type=script&setup=true&lang.ts
+var color_picker_channel_slider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider",
+	props: {
+		channel: {
+			type: null,
+			required: true
+		},
+		orientation: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelSliderProps = computed(() => ({
+			...props,
+			...formatProps
+		}));
+		ColorPickerChannelPropsProvider(props);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getChannelSliderProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider.vue
+var color_picker_channel_slider_default = color_picker_channel_slider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-content.vue?vue&type=script&setup=true&lang.ts
+var color_picker_content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-content",
+	props: {
+		immediate: {
+			type: Boolean,
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		present: {
+			type: Boolean,
+			required: false
+		},
+		skipAnimationOnMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const presence = usePresenceContext();
+		const mergedProps = computed(() => mergeProps$1(colorPicker.value.getContentProps(), presence.value.presenceProps));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-content.vue
+var color_picker_content_default = color_picker_content_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-context.vue?vue&type=script&setup=true&lang.ts
+var color_picker_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-context",
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(colorPicker))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-context.vue
+var color_picker_context_default = color_picker_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-control.vue?vue&type=script&setup=true&lang.ts
+var color_picker_control_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-control",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getControlProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-control.vue
+var color_picker_control_default = color_picker_control_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper-trigger.vue?vue&type=script&setup=true&lang.ts
+var color_picker_eye_dropper_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-eye-dropper-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(colorPicker).getEyeDropperTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper-trigger.vue
+var color_picker_eye_dropper_trigger_default = color_picker_eye_dropper_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-select.vue?vue&type=script&setup=true&lang.ts
+var color_picker_format_select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-format-select",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).select, normalizeProps(guardReactiveProps(unref(colorPicker).getFormatSelectProps())), {
+				default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList([
+					"rgba",
+					"hsla",
+					"hsba"
+				], (format) => {
+					return createVNode(unref(sprawlify).option, {
+						key: format,
+						value: format
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(format), 1)]),
+						_: 2
+					}, 1032, ["value"]);
+				}), 64))]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-select.vue
+var color_picker_format_select_default = color_picker_format_select_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-trigger.vue?vue&type=script&setup=true&lang.ts
+var color_picker_format_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-format-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(colorPicker).getFormatTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-trigger.vue
+var color_picker_format_trigger_default = color_picker_format_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-hidden-input.vue?vue&type=script&setup=true&lang.ts
+var color_picker_hidden_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-hidden-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps({ "aria-describedby": unref(field)?.ariaDescribedby }, unref(colorPicker).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-hidden-input.vue
+var color_picker_hidden_input_default = color_picker_hidden_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-label.vue?vue&type=script&setup=true&lang.ts
+var color_picker_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(colorPicker).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-label.vue
+var color_picker_label_default = color_picker_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-positioner.vue?vue&type=script&setup=true&lang.ts
+var color_picker_positioner_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-positioner",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const presence = usePresenceContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, unref(colorPicker).getPositionerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-positioner.vue
+var color_picker_positioner_default = color_picker_positioner_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-root-provider.vue?vue&type=script&setup=true&lang.ts
+var color_picker_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["exitComplete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const colorPicker = computed(() => props.value);
+		const presence = usePresence(computed(() => ({
+			present: colorPicker.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		ColorPickerProvider(colorPicker);
+		PresenceProvider(presence);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(colorPicker.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-root-provider.vue
+var color_picker_root_provider_default = color_picker_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/use-color-picker.ts
+const useColorPicker = (props = {}, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const field = useFieldContext();
+	const context = computed(() => {
+		const localProps = toValue(props);
+		return {
+			id,
+			ids: {
+				label: field?.value.ids.label,
+				input: field?.value.ids.control
+			},
+			disabled: field?.value.disabled,
+			invalid: field?.value.invalid,
+			readOnly: field?.value.readOnly,
+			required: field?.value.required,
+			dir: locale.value.dir,
+			value: localProps.modelValue,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localProps),
+			onOpenChange(details) {
+				emit?.("openChange", details);
+				emit?.("update:open", details.open);
+				localProps.onOpenChange?.(details);
+			},
+			onValueChange(details) {
+				emit?.("valueChange", details);
+				emit?.("update:modelValue", details.value);
+				localProps.onValueChange?.(details);
+			},
+			onFocusOutside: (details) => {
+				emit?.("focusOutside", details);
+				localProps.onFocusOutside?.(details);
+			},
+			onFormatChange: (details) => {
+				emit?.("formatChange", details);
+				emit?.("update:format", details.format);
+				localProps.onFormatChange?.(details);
+			},
+			onInteractOutside: (details) => {
+				emit?.("interactOutside", details);
+				localProps.onInteractOutside?.(details);
+			},
+			onPointerDownOutside: (details) => {
+				emit?.("pointerDownOutside", details);
+				localProps.onPointerDownOutside?.(details);
+			},
+			onValueChangeEnd: (details) => {
+				emit?.("valueChangeEnd", details);
+				localProps.onValueChangeEnd?.(details);
+			}
+		};
+	});
+	const service = useMachine(colorPicker.machine, context);
+	return computed(() => colorPicker.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-root.vue?vue&type=script&setup=true&lang.ts
+var color_picker_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		closeOnSelect: {
+			type: Boolean,
+			required: false
+		},
+		defaultFormat: {
+			type: null,
+			required: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false
+		},
+		defaultValue: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		initialFocusEl: {
+			type: Function,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		openAutoFocus: {
+			type: Boolean,
+			required: false
+		},
+		positioning: {
+			type: null,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		closeOnSelect: void 0,
+		defaultOpen: void 0,
+		disabled: void 0,
+		invalid: void 0,
+		open: void 0,
+		openAutoFocus: void 0,
+		readOnly: void 0,
+		required: void 0,
+		inline: void 0
+	}),
+	emits: [
+		"exitComplete",
+		"focusOutside",
+		"formatChange",
+		"interactOutside",
+		"openChange",
+		"pointerDownOutside",
+		"valueChange",
+		"valueChangeEnd",
+		"update:modelValue",
+		"update:open",
+		"update:format"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const colorPicker = useColorPicker(props, emits);
+		const presence = usePresence(computed(() => ({
+			present: colorPicker.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		ColorPickerProvider(colorPicker);
+		PresenceProvider(presence);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-root.vue
+var color_picker_root_default = color_picker_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-anatomy.ts
+const colorPickerAnatomy = anatomy.extendWith("view");
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-group.vue?vue&type=script&setup=true&lang.ts
+var color_picker_swatch_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch-group",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPickerAnatomy).build().swatchGroup.attrs, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-group.vue
+var color_picker_swatch_group_default = color_picker_swatch_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-swatch-props-context.ts
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext("ColorPickerSwatchPropsContext");
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-indicator.vue?vue&type=script&setup=true&lang.ts
+var color_picker_swatch_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const swatchProps = useColorPickerSwatchPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getSwatchIndicatorProps(unref(swatchProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-indicator.vue
+var color_picker_swatch_indicator_default = color_picker_swatch_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-trigger.vue?vue&type=script&setup=true&lang.ts
+var color_picker_swatch_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch-trigger",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(colorPicker).getSwatchTriggerProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-trigger.vue
+var color_picker_swatch_trigger_default = color_picker_swatch_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch.vue?vue&type=script&setup=true&lang.ts
+var color_picker_swatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		respectAlpha: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerSwatchPropsProvider(props);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getSwatchProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch.vue
+var color_picker_swatch_default = color_picker_swatch_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-transparency-grid.vue?vue&type=script&setup=true&lang.ts
+var color_picker_transparency_grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-transparency-grid",
+	props: {
+		size: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getTransparencyGridProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-transparency-grid.vue
+var color_picker_transparency_grid_default = color_picker_transparency_grid_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-trigger.vue?vue&type=script&setup=true&lang.ts
+var color_picker_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(colorPicker).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-trigger.vue
+var color_picker_trigger_default = color_picker_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-swatch.vue?vue&type=script&setup=true&lang.ts
+var color_picker_value_swatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-value-swatch",
+	props: {
+		respectAlpha: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const swatchProps = computed(() => ({
+			value: colorPicker.value.value,
+			respectAlpha: props.respectAlpha
+		}));
+		ColorPickerSwatchPropsProvider(swatchProps.value);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(colorPicker).getSwatchProps(swatchProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-swatch.vue
+var color_picker_value_swatch_default = color_picker_value_swatch_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-text.vue?vue&type=script&setup=true&lang.ts
+var color_picker_value_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-value-text",
+	props: {
+		format: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const slots = useSlots();
+		useForwardExpose();
+		const valueAsString = computed(() => props.format ? colorPicker.value.value.toString(props.format) : colorPicker.value.valueAsString);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(colorPicker).getValueTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || valueAsString.value), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-text.vue
+var color_picker_value_text_default = color_picker_value_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker-view.vue?vue&type=script&setup=true&lang.ts
+var color_picker_view_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "color-picker-view",
+	props: {
+		format: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerFormatPropsProvider(props);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(colorPicker).format === __props.format ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, unref(colorPickerAnatomy).build().view.attrs, {
+				"data-format": __props.format,
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["data-format", "as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-view.vue
+var color_picker_view_default = color_picker_view_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/color-picker/color-picker.ts
+var color_picker_exports = /* @__PURE__ */ __exportAll({
+	Area: () => color_picker_area_default,
+	AreaBackground: () => color_picker_area_background_default,
+	AreaThumb: () => color_picker_area_thumb_default,
+	ChannelInput: () => color_picker_channel_input_default,
+	ChannelSlider: () => color_picker_channel_slider_default,
+	ChannelSliderLabel: () => color_picker_channel_slider_label_default,
+	ChannelSliderThumb: () => color_picker_channel_slider_thumb_default,
+	ChannelSliderTrack: () => color_picker_channel_slider_track_default,
+	ChannelSliderValueText: () => color_picker_channel_slider_value_text_default,
+	Content: () => color_picker_content_default,
+	Context: () => color_picker_context_default,
+	Control: () => color_picker_control_default,
+	EyeDropperTrigger: () => color_picker_eye_dropper_trigger_default,
+	FormatSelect: () => color_picker_format_select_default,
+	FormatTrigger: () => color_picker_format_trigger_default,
+	HiddenInput: () => color_picker_hidden_input_default,
+	Label: () => color_picker_label_default,
+	Positioner: () => color_picker_positioner_default,
+	Root: () => color_picker_root_default,
+	RootProvider: () => color_picker_root_provider_default,
+	Swatch: () => color_picker_swatch_default,
+	SwatchGroup: () => color_picker_swatch_group_default,
+	SwatchIndicator: () => color_picker_swatch_indicator_default,
+	SwatchTrigger: () => color_picker_swatch_trigger_default,
+	TransparencyGrid: () => color_picker_transparency_grid_default,
+	Trigger: () => color_picker_trigger_default,
+	ValueSwatch: () => color_picker_value_swatch_default,
+	ValueText: () => color_picker_value_text_default,
+	View: () => color_picker_view_default
+});
+
+//#endregion
+export { color_picker_exports as ColorPicker, color_picker_area_default as ColorPickerArea, color_picker_area_background_default as ColorPickerAreaBackground, color_picker_area_thumb_default as ColorPickerAreaThumb, color_picker_channel_input_default as ColorPickerChannelInput, color_picker_channel_slider_default as ColorPickerChannelSlider, color_picker_channel_slider_label_default as ColorPickerChannelSliderLabel, color_picker_channel_slider_thumb_default as ColorPickerChannelSliderThumb, color_picker_channel_slider_track_default as ColorPickerChannelSliderTrack, color_picker_channel_slider_value_text_default as ColorPickerChannelSliderValueText, color_picker_content_default as ColorPickerContent, color_picker_context_default as ColorPickerContext, color_picker_control_default as ColorPickerControl, color_picker_eye_dropper_trigger_default as ColorPickerEyeDropperTrigger, color_picker_format_select_default as ColorPickerFormatSelect, color_picker_format_trigger_default as ColorPickerFormatTrigger, color_picker_hidden_input_default as ColorPickerHiddenInput, color_picker_label_default as ColorPickerLabel, color_picker_positioner_default as ColorPickerPositioner, color_picker_root_default as ColorPickerRoot, color_picker_root_provider_default as ColorPickerRootProvider, color_picker_swatch_default as ColorPickerSwatch, color_picker_swatch_group_default as ColorPickerSwatchGroup, color_picker_swatch_indicator_default as ColorPickerSwatchIndicator, color_picker_swatch_trigger_default as ColorPickerSwatchTrigger, color_picker_transparency_grid_default as ColorPickerTransparencyGrid, color_picker_trigger_default as ColorPickerTrigger, color_picker_value_swatch_default as ColorPickerValueSwatch, color_picker_value_text_default as ColorPickerValueText, color_picker_view_default as ColorPickerView, colorPickerAnatomy, parseColor, useColorPicker, useColorPickerContext };