import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { n as Button_default } from "./button-B9CnnuTu.js";
import { t as Input_default } from "./input-CwDp-vE8.js";
import { n as PopoverContent_default, s as Popover_default, t as PopoverTrigger_default } from "./popover-B67tUcQt.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeStyle, openBlock, renderList, unref, useModel, watch, withCtx } from "vue";
import { Pipette } from "@lucide/vue";
//#region src/components/compositions/elements/picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var _hoisted_2 = { class: "flex flex-col gap-3" };
var _hoisted_3 = ["value", "disabled"];
var _hoisted_4 = {
	key: 0,
	class: "flex flex-wrap gap-2"
};
var _hoisted_5 = [
	"aria-label",
	"disabled",
	"onClick"
];
var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ColorPicker",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		placeholder: {},
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] },
		colorFormat: {},
		swatches: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven color picker composition. Native `<input type="color">`
		* inside a Popover plus a hex Input fallback. Optional `swatches` render
		* as preset chips. Round-trips a lowercased hex string (with leading
		* `#`).
		*
		*   <ColorPicker v-model="color" label="Brand color" />
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		const currentColor = computed(() => {
			const raw = model.value;
			if (raw && typeof raw === "string") return normalizeHex(raw);
			return "#000000";
		});
		watch(model, (next) => {
			if (typeof next === "string" && next.length > 0) {
				const normalized = normalizeHex(next);
				if (normalized !== next) model.value = normalized;
			}
		});
		function normalizeHex(value) {
			if (!value) return "#000000";
			const trimmed = value.trim().toLowerCase();
			if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) return trimmed;
			if (/^([0-9a-f]{6})$/.test(trimmed)) return `#${trimmed}`;
			return value;
		}
		function setColor(next) {
			model.value = normalizeHex(next);
		}
		function onNativeInput(event) {
			const target = event.target;
			setColor(target?.value ?? "#000000");
		}
		function onHexInput(value) {
			setColor(typeof value === "string" ? value : "");
		}
		const swatchList = computed(() => Array.isArray(props.swatches) ? props.swatches : []);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				for: __props.id,
				"help-text": __props.helpText,
				errors: __props.errors
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: "flex items-center gap-2",
					"data-element-name": __props.name ?? void 0
				}, [
					createVNode(unref(Popover_default), null, {
						default: withCtx(() => [createVNode(unref(PopoverTrigger_default), { "as-child": "" }, {
							default: withCtx(() => [createVNode(unref(Button_default), {
								type: "button",
								variant: "outline",
								size: "icon",
								disabled: __props.disabled,
								"aria-label": "Choose a color",
								"data-testid": "color-swatch-trigger"
							}, {
								default: withCtx(() => [createElementVNode("span", {
									class: "size-5 rounded-sm border",
									style: normalizeStyle({ backgroundColor: currentColor.value })
								}, null, 4)]),
								_: 1
							}, 8, ["disabled"])]),
							_: 1
						}), createVNode(unref(PopoverContent_default), { class: "w-auto p-3" }, {
							default: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("input", {
								type: "color",
								value: currentColor.value,
								disabled: __props.disabled || __props.readonly,
								class: "h-10 w-32 cursor-pointer rounded border",
								"data-testid": "color-native-input",
								onInput: onNativeInput
							}, null, 40, _hoisted_3), swatchList.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(swatchList.value, (swatch) => {
								return openBlock(), createElementBlock("button", {
									key: swatch,
									type: "button",
									class: "size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
									style: normalizeStyle({ backgroundColor: swatch }),
									"aria-label": `Use ${swatch}`,
									disabled: __props.disabled,
									"data-testid": "color-swatch",
									onClick: ($event) => setColor(swatch)
								}, null, 12, _hoisted_5);
							}), 128))])) : createCommentVNode("", true)])]),
							_: 1
						})]),
						_: 1
					}),
					createVNode(unref(Input_default), {
						"model-value": currentColor.value,
						placeholder: __props.placeholder ?? "#000000",
						disabled: __props.disabled,
						readonly: __props.readonly,
						required: __props.required,
						class: "w-32 font-mono uppercase",
						"data-testid": "color-hex-input",
						spellcheck: "false",
						"onUpdate:modelValue": onHexInput
					}, null, 8, [
						"model-value",
						"placeholder",
						"disabled",
						"readonly",
						"required"
					]),
					!swatchList.value.length ? (openBlock(), createBlock(unref(Pipette), {
						key: 0,
						class: "size-4 text-muted-foreground"
					})) : createCommentVNode("", true)
				], 8, _hoisted_1)]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/picker/ColorPicker.vue
var ColorPicker_exports = /* @__PURE__ */ __exportAll({ default: () => ColorPicker_default });
var ColorPicker_default = ColorPicker_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { ColorPicker_exports as n, ColorPicker_default as t };

//# sourceMappingURL=ColorPicker-KreVzl-q.js.map