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, h, mergeModels, normalizeClass, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
import * as LucideIcons from "@lucide/vue";
import { Search } from "@lucide/vue";
//#region src/components/compositions/elements/picker/IconPickerInline.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "mb-2 flex items-center gap-2" };
var _hoisted_2 = {
	class: "grid max-h-60 grid-cols-6 gap-1 overflow-auto",
	"data-testid": "icon-picker-inline-grid"
};
var _hoisted_3 = [
	"aria-label",
	"title",
	"data-testid",
	"onClick"
];
var _hoisted_4 = {
	key: 0,
	class: "p-3 text-center text-sm text-muted-foreground"
};
var IconPickerInline_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "IconPickerInline",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		required: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven inline icon picker composition. A trigger Button +
		* Popover with a searchable grid of lucide icons.
		*
		* Self-contained — usable directly in any Vue app:
		*
		*   <IconPickerInline v-model="iconName" label="Pick an icon" />
		*/
		const model = useModel(__props, "modelValue");
		const query = ref("");
		/**
		* Curated subset of lucide icons. Hardcoded so we don't enumerate
		* the entire ~1400-icon set in the picker UI.
		*/
		const ICON_NAMES = [
			"Activity",
			"AlertCircle",
			"Archive",
			"Bell",
			"Bookmark",
			"Calendar",
			"Camera",
			"Check",
			"Clock",
			"Cloud",
			"Code",
			"Download",
			"Edit",
			"Eye",
			"File",
			"Flag",
			"Folder",
			"Globe",
			"Heart",
			"Home",
			"Image",
			"Info",
			"Link",
			"Lock",
			"Mail",
			"MapPin",
			"MessageSquare",
			"Plus",
			"Search",
			"Settings",
			"Star",
			"Tag",
			"Trash",
			"Upload",
			"User",
			"Video",
			"X",
			"Zap"
		];
		const filtered = computed(() => {
			const q = query.value.trim().toLowerCase();
			if (!q) return ICON_NAMES;
			return ICON_NAMES.filter((name) => name.toLowerCase().includes(q));
		});
		function resolveIcon(name) {
			return LucideIcons[name];
		}
		function renderIcon(name, cls = "size-4") {
			const icon = resolveIcon(name);
			return icon ? h(icon, { class: cls }) : null;
		}
		const previewIcon = computed(() => resolveIcon(model.value ?? ""));
		function onSelect(name) {
			model.value = name;
		}
		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,
				"data-testid": "icon-picker-inline"
			}, {
				default: withCtx(() => [createVNode(unref(Popover_default), null, {
					default: withCtx(() => [createVNode(unref(PopoverTrigger_default), { "as-child": "" }, {
						default: withCtx(() => [createVNode(unref(Button_default), {
							type: "button",
							variant: "outline",
							class: "w-fit justify-start gap-2",
							disabled: __props.disabled,
							"data-element-name": __props.name ?? void 0,
							"data-testid": "icon-picker-inline-trigger"
						}, {
							default: withCtx(() => [previewIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(previewIcon.value), {
								key: 0,
								class: "size-4"
							})) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(model.value || "Pick an icon"), 1)]),
							_: 1
						}, 8, ["disabled", "data-element-name"])]),
						_: 1
					}), createVNode(unref(PopoverContent_default), { class: "w-72 p-2" }, {
						default: withCtx(() => [
							createElementVNode("div", _hoisted_1, [createVNode(unref(Search), { class: "size-4 text-muted-foreground" }), createVNode(unref(Input_default), {
								modelValue: query.value,
								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
								placeholder: "Search icons…",
								"data-testid": "icon-picker-inline-search",
								class: "h-8"
							}, null, 8, ["modelValue"])]),
							createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (iconName) => {
								return openBlock(), createElementBlock("button", {
									key: iconName,
									type: "button",
									class: normalizeClass(["flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", model.value === iconName ? "border-primary bg-primary/10" : ""]),
									"aria-label": iconName,
									title: iconName,
									"data-testid": `icon-picker-inline-item-${iconName}`,
									onClick: ($event) => onSelect(iconName)
								}, [(openBlock(), createBlock(resolveDynamicComponent(renderIcon(iconName))))], 10, _hoisted_3);
							}), 128))]),
							!filtered.value.length ? (openBlock(), createElementBlock("p", _hoisted_4, " No icons match. ")) : createCommentVNode("", true)
						]),
						_: 1
					})]),
					_: 1
				})]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/picker/IconPickerInline.vue
var IconPickerInline_exports = /* @__PURE__ */ __exportAll({ default: () => IconPickerInline_default });
var IconPickerInline_default = IconPickerInline_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { IconPickerInline_exports as n, IconPickerInline_default as t };

//# sourceMappingURL=IconPickerInline-CuR56mt3.js.map