@wirekyt/vue 0.0.1 → 0.0.3

package/dist/color-picker.cjs

@@ -0,0 +1,804 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+const require_providers = require("./providers-5QhcwgSd.cjs");
+const require_clean_props = require("./clean-props-MyKqus13.cjs");
+const require_factory = require("./factory-JL7MPjkk.cjs");
+const require_field = require("./field-DRz-v4rB.cjs");
+const require_presence = require("./presence-DD3l4Tgb.cjs");
+const require_use_presence = require("./use-presence-CtEY6ZT8.cjs");
+let vue = require("vue");
+let _wirekyt_dom_machines_color_picker = require("@wirekyt/dom/machines/color-picker");
+_wirekyt_dom_machines_color_picker = require_rolldown_runtime.__toESM(_wirekyt_dom_machines_color_picker, 1);
+let _wirekyt_dom = require("@wirekyt/dom");
+//#region src/components/color-picker/use-area-props-context.ts
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = require_utils.createContext("ColorPickerAreaPropsContext");
+//#endregion
+//#region src/components/color-picker/use-context.ts
+const [ColorPickerProvider, useColorPickerContext] = require_utils.createContext("ColorPickerContext");
+//#endregion
+//#region src/components/color-picker/area-background.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "area-background",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const areaProps = useColorPickerAreaPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getAreaBackgroundProps((0, vue.unref)(areaProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/area-thumb.vue
+const _sfc_main$2 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "area-thumb",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const areaProps = useColorPickerAreaPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getAreaThumbProps((0, vue.unref)(areaProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/area.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "area",
+	props: {
+		xChannel: {},
+		yChannel: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerAreaPropsProvider(props);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getAreaProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/channel-input.vue
+const _sfc_main$3 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-input",
+	props: {
+		channel: {},
+		orientation: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).input, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelInputProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/use-channel-props-context.ts
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = require_utils.createContext("ColorPickerChannelPropsContext");
+//#endregion
+//#region src/components/color-picker/channel-slider-label.vue
+const _sfc_main$5 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-slider-label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).label, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelSliderLabelProps((0, vue.unref)(channelProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/use-format-context.ts
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = require_utils.createContext("ColorPickerFormatProps");
+//#endregion
+//#region src/components/color-picker/channel-slider-thumb.vue
+const _sfc_main$6 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-slider-thumb",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const channelSliderProps = (0, vue.computed)(() => ({
+			...channelProps,
+			...formatProps
+		}));
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelSliderThumbProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/channel-slider-track.vue
+const _sfc_main$7 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-slider-track",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const channelSliderProps = (0, vue.computed)(() => ({
+			...channelProps,
+			...formatProps
+		}));
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelSliderTrackProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/channel-slider-value-text.vue
+const _sfc_main$8 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-slider-value-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const channelProps = useColorPickerChannelPropsContext();
+		const slots = (0, vue.useSlots)();
+		const localeContext = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).span, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelSliderValueTextProps((0, vue.unref)(channelProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(slots.default?.() || (0, vue.unref)(colorPicker).getChannelValueText((0, vue.unref)(channelProps).channel, (0, vue.unref)(localeContext).locale)), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/channel-slider.vue
+const _sfc_main$4 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "channel-slider",
+	props: {
+		channel: {},
+		orientation: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const formatProps = useColorPickerFormatPropsContext();
+		const channelSliderProps = (0, vue.computed)(() => ({
+			...props,
+			...formatProps
+		}));
+		ColorPickerChannelPropsProvider(props);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getChannelSliderProps(channelSliderProps.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/content.vue
+const _sfc_main$9 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "content",
+	props: {
+		immediate: { type: Boolean },
+		lazyMount: { type: Boolean },
+		present: { type: Boolean },
+		skipAnimationOnMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const presence = require_presence.usePresenceContext();
+		const mergedProps = (0, vue.computed)(() => (0, _wirekyt_dom.mergeProps)(colorPicker.value.getContentProps(), presence.value.presenceProps));
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return !(0, vue.unref)(presence).unmounted ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/context.vue
+const _sfc_main$10 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "context",
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(colorPicker))));
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/control.vue
+const _sfc_main$11 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "control",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getControlProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/eye-dropper-trigger.vue
+const _sfc_main$12 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "eye-dropper-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getEyeDropperTriggerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/format-select.vue
+const _sfc_main$13 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "format-select",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).select, (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(colorPicker).getFormatSelectProps())), {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)([
+					"rgba",
+					"hsla",
+					"hsba"
+				], (format) => {
+					return (0, vue.createVNode)((0, vue.unref)(require_factory.wire).option, {
+						key: format,
+						value: format
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(format), 1)]),
+						_: 2
+					}, 1032, ["value"]);
+				}), 64))]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/format-trigger.vue
+const _sfc_main$14 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "format-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getFormatTriggerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/hidden-input.vue
+const _sfc_main$15 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "hidden-input",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const field = require_field.useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).input, (0, vue.mergeProps)({ "aria-describedby": (0, vue.unref)(field)?.ariaDescribedby }, (0, vue.unref)(colorPicker).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/label.vue
+const _sfc_main$16 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).label, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getLabelProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/positioner.vue
+const _sfc_main$17 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "positioner",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const presence = require_presence.usePresenceContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return !(0, vue.unref)(presence).unmounted ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(colorPicker).getPositionerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/root-provider.vue
+const _sfc_main$19 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root-provider",
+	props: {
+		value: {},
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	emits: ["exitComplete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const colorPicker = (0, vue.computed)(() => props.value);
+		const presence = require_use_presence.usePresence((0, vue.computed)(() => ({
+			present: colorPicker.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		ColorPickerProvider(colorPicker);
+		require_presence.PresenceProvider(presence);
+		require_utils.RenderStrategyPropsProvider((0, vue.computed)(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)(colorPicker.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/use.ts
+const useColorPicker = (props = {}, emit) => {
+	const id = (0, vue.useId)();
+	const env = require_providers.useEnvironmentContext(require_providers.DEFAULT_ENVIRONMENT);
+	const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+	const field = require_field.useFieldContext();
+	const context = (0, vue.computed)(() => {
+		const localProps = (0, vue.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,
+			...require_clean_props.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 = require_utils.useMachine(_wirekyt_dom_machines_color_picker.machine, context);
+	return (0, vue.computed)(() => _wirekyt_dom_machines_color_picker.connect(service, require_utils.normalizeProps));
+};
+//#endregion
+//#region src/components/color-picker/root.vue
+const _sfc_main$18 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root",
+	props: /*@__PURE__*/ (0, vue.mergeDefaults)({
+		closeOnSelect: { type: Boolean },
+		defaultFormat: {},
+		defaultOpen: { type: Boolean },
+		defaultValue: {},
+		disabled: { type: Boolean },
+		format: {},
+		id: {},
+		ids: {},
+		initialFocusEl: { type: Function },
+		invalid: { type: Boolean },
+		modelValue: {},
+		name: {},
+		open: { type: Boolean },
+		openAutoFocus: { type: Boolean },
+		positioning: {},
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		inline: { type: Boolean },
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	}, {
+		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 = require_use_presence.usePresence((0, vue.computed)(() => ({
+			present: colorPicker.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		ColorPickerProvider(colorPicker);
+		require_presence.PresenceProvider(presence);
+		require_utils.RenderStrategyPropsProvider((0, vue.computed)(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getRootProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/anatomy.ts
+const colorPickerAnatomy = _wirekyt_dom_machines_color_picker.anatomy.extendWith("view");
+//#endregion
+//#region src/components/color-picker/swatch-group.vue
+const _sfc_main$21 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "swatch-group",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPickerAnatomy).build().swatchGroup.attrs, { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/use-swatch-props-context.ts
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = require_utils.createContext("ColorPickerSwatchPropsContext");
+//#endregion
+//#region src/components/color-picker/swatch-indicator.vue
+const _sfc_main$22 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "swatch-indicator",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		const swatchProps = useColorPickerSwatchPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getSwatchIndicatorProps((0, vue.unref)(swatchProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/swatch-trigger.vue
+const _sfc_main$23 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "swatch-trigger",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getSwatchTriggerProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/swatch.vue
+const _sfc_main$20 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "swatch",
+	props: {
+		value: {},
+		respectAlpha: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerSwatchPropsProvider(props);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getSwatchProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/transparency-grid.vue
+const _sfc_main$24 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "transparency-grid",
+	props: {
+		size: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getTransparencyGridProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/trigger.vue
+const _sfc_main$25 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const colorPicker = useColorPickerContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/value-swatch.vue
+const _sfc_main$26 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "value-swatch",
+	props: {
+		respectAlpha: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const swatchProps = (0, vue.computed)(() => ({
+			value: colorPicker.value.value,
+			respectAlpha: props.respectAlpha
+		}));
+		ColorPickerSwatchPropsProvider(swatchProps.value);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getSwatchProps(swatchProps.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/value-text.vue
+const _sfc_main$27 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "value-text",
+	props: {
+		format: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		const slots = (0, vue.useSlots)();
+		require_utils.useForwardExpose();
+		const valueAsString = (0, vue.computed)(() => props.format ? colorPicker.value.value.toString(props.format) : colorPicker.value.valueAsString);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).span, (0, vue.mergeProps)((0, vue.unref)(colorPicker).getValueTextProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(slots.default?.() || valueAsString.value), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/view.vue
+const _sfc_main$28 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "view",
+	props: {
+		format: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const colorPicker = useColorPickerContext();
+		ColorPickerFormatPropsProvider(props);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(colorPicker).format === __props.format ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(colorPickerAnatomy).build().view.attrs, {
+				"data-format": __props.format,
+				"as-child": __props.asChild
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["data-format", "as-child"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/color-picker.ts
+var color_picker_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Area: () => _sfc_main,
+	AreaBackground: () => _sfc_main$1,
+	AreaThumb: () => _sfc_main$2,
+	ChannelInput: () => _sfc_main$3,
+	ChannelSlider: () => _sfc_main$4,
+	ChannelSliderLabel: () => _sfc_main$5,
+	ChannelSliderThumb: () => _sfc_main$6,
+	ChannelSliderTrack: () => _sfc_main$7,
+	ChannelSliderValueText: () => _sfc_main$8,
+	Content: () => _sfc_main$9,
+	Context: () => _sfc_main$10,
+	Control: () => _sfc_main$11,
+	EyeDropperTrigger: () => _sfc_main$12,
+	FormatSelect: () => _sfc_main$13,
+	FormatTrigger: () => _sfc_main$14,
+	HiddenInput: () => _sfc_main$15,
+	Label: () => _sfc_main$16,
+	Positioner: () => _sfc_main$17,
+	Root: () => _sfc_main$18,
+	RootProvider: () => _sfc_main$19,
+	Swatch: () => _sfc_main$20,
+	SwatchGroup: () => _sfc_main$21,
+	SwatchIndicator: () => _sfc_main$22,
+	SwatchTrigger: () => _sfc_main$23,
+	TransparencyGrid: () => _sfc_main$24,
+	Trigger: () => _sfc_main$25,
+	ValueSwatch: () => _sfc_main$26,
+	ValueText: () => _sfc_main$27,
+	View: () => _sfc_main$28
+});
+//#endregion
+Object.defineProperty(exports, "ColorPicker", {
+	enumerable: true,
+	get: function() {
+		return color_picker_exports;
+	}
+});
+exports.ColorPickerArea = _sfc_main;
+exports.ColorPickerAreaBackground = _sfc_main$1;
+exports.ColorPickerAreaThumb = _sfc_main$2;
+exports.ColorPickerChannelInput = _sfc_main$3;
+exports.ColorPickerChannelSlider = _sfc_main$4;
+exports.ColorPickerChannelSliderLabel = _sfc_main$5;
+exports.ColorPickerChannelSliderThumb = _sfc_main$6;
+exports.ColorPickerChannelSliderTrack = _sfc_main$7;
+exports.ColorPickerChannelSliderValueText = _sfc_main$8;
+exports.ColorPickerContent = _sfc_main$9;
+exports.ColorPickerContext = _sfc_main$10;
+exports.ColorPickerControl = _sfc_main$11;
+exports.ColorPickerEyeDropperTrigger = _sfc_main$12;
+exports.ColorPickerFormatSelect = _sfc_main$13;
+exports.ColorPickerFormatTrigger = _sfc_main$14;
+exports.ColorPickerHiddenInput = _sfc_main$15;
+exports.ColorPickerLabel = _sfc_main$16;
+exports.ColorPickerPositioner = _sfc_main$17;
+exports.ColorPickerRoot = _sfc_main$18;
+exports.ColorPickerRootProvider = _sfc_main$19;
+exports.ColorPickerSwatch = _sfc_main$20;
+exports.ColorPickerSwatchGroup = _sfc_main$21;
+exports.ColorPickerSwatchIndicator = _sfc_main$22;
+exports.ColorPickerSwatchTrigger = _sfc_main$23;
+exports.ColorPickerTransparencyGrid = _sfc_main$24;
+exports.ColorPickerTrigger = _sfc_main$25;
+exports.ColorPickerValueSwatch = _sfc_main$26;
+exports.ColorPickerValueText = _sfc_main$27;
+exports.ColorPickerView = _sfc_main$28;
+exports.colorPickerAnatomy = colorPickerAnatomy;
+Object.defineProperty(exports, "parseColor", {
+	enumerable: true,
+	get: function() {
+		return _wirekyt_dom_machines_color_picker.parse;
+	}
+});
+exports.useColorPicker = useColorPicker;
+exports.useColorPickerContext = useColorPickerContext;