import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { c as ComboboxAnchor_default, i as ComboboxInput_default, l as Combobox_default, n as ComboboxItemIndicator_default, o as ComboboxEmpty_default, r as ComboboxItem_default, s as ComboboxContent_default } from "./combobox-D0Svg8GU.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, mergeModels, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
import * as LucideIcons from "@lucide/vue";
//#region src/components/compositions/elements/picker/IconPicker.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "ml-2" };
var IconPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "IconPicker",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		placeholder: {},
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven icon picker composition. Searchable combobox over a
		* curated subset of lucide icon names. The selected value is the icon's
		* PascalCase name (e.g. `"Calendar"`); the currently-selected icon is
		* rendered as a live preview alongside the combobox input.
		*
		*   <IconPicker v-model="icon" label="Icon" />
		*/
		const model = useModel(__props, "modelValue");
		const query = ref("");
		/**
		* A small curated subset of lucide icon names. We don't enumerate the
		* whole 1.4k+ set because we render the preview component eagerly and
		* Storybook bundles every story.
		*/
		const ICON_NAMES = [
			"Activity",
			"AlertCircle",
			"Archive",
			"Bell",
			"Bookmark",
			"Briefcase",
			"Calendar",
			"Camera",
			"Check",
			"ChevronRight",
			"Clock",
			"Cloud",
			"Code",
			"Copy",
			"Database",
			"Download",
			"Edit",
			"Eye",
			"Facebook",
			"File",
			"FileText",
			"Filter",
			"Flag",
			"Folder",
			"Gift",
			"Globe",
			"Heart",
			"Home",
			"Image",
			"Inbox",
			"Info",
			"Layers",
			"Link",
			"Lock",
			"LogIn",
			"LogOut",
			"Mail",
			"MapPin",
			"Menu",
			"MessageSquare",
			"Mic",
			"Monitor",
			"Moon",
			"Music",
			"Paperclip",
			"Pause",
			"Phone",
			"PieChart",
			"Play",
			"Plus",
			"Power",
			"Printer",
			"RefreshCw",
			"Save",
			"Search",
			"Send",
			"Settings",
			"Share",
			"ShieldCheck",
			"ShoppingCart",
			"Star",
			"Sun",
			"Tag",
			"Trash",
			"Twitter",
			"Upload",
			"User",
			"Video",
			"Wifi",
			"Wrench",
			"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) {
			if (!name) return;
			return LucideIcons[name];
		}
		const previewIcon = computed(() => resolveIcon(model.value ?? ""));
		function renderIcon(name) {
			const icon = resolveIcon(name);
			return icon ? h(icon, { class: "size-4" }) : null;
		}
		function onSelect(value) {
			model.value = typeof value === "string" ? value : "";
		}
		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(() => [createVNode(unref(Combobox_default), {
					"model-value": model.value ?? "",
					disabled: __props.disabled,
					"onUpdate:modelValue": onSelect
				}, {
					default: withCtx(() => [createVNode(unref(ComboboxAnchor_default), {
						"data-element-name": __props.name ?? void 0,
						"data-readonly": __props.readonly || void 0
					}, {
						default: withCtx(() => [previewIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(previewIcon.value), {
							key: 0,
							class: "mr-2 size-4 shrink-0",
							"data-testid": "icon-preview"
						})) : createCommentVNode("", true), createVNode(unref(ComboboxInput_default), {
							modelValue: query.value,
							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
							placeholder: __props.placeholder ?? "Search icons…",
							readonly: __props.readonly,
							required: __props.required
						}, null, 8, [
							"modelValue",
							"placeholder",
							"readonly",
							"required"
						])]),
						_: 1
					}, 8, ["data-element-name", "data-readonly"]), createVNode(unref(ComboboxContent_default), null, {
						default: withCtx(() => [createVNode(unref(ComboboxEmpty_default), null, {
							default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("No icons match.", -1)])]),
							_: 1
						}), (openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (iconName) => {
							return openBlock(), createBlock(unref(ComboboxItem_default), {
								key: iconName,
								value: iconName
							}, {
								default: withCtx(() => [
									createVNode(unref(ComboboxItemIndicator_default)),
									(openBlock(), createBlock(resolveDynamicComponent(renderIcon(iconName)))),
									createElementVNode("span", _hoisted_1, toDisplayString(iconName), 1)
								]),
								_: 2
							}, 1032, ["value"]);
						}), 128))]),
						_: 1
					})]),
					_: 1
				}, 8, ["model-value", "disabled"])]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/picker/IconPicker.vue
var IconPicker_exports = /* @__PURE__ */ __exportAll({ default: () => IconPicker_default });
var IconPicker_default = IconPicker_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { IconPicker_exports as n, IconPicker_default as t };

//# sourceMappingURL=IconPicker-BHy-a2YR.js.map