import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
import { ScalarPopover } from "@scalar/components";
import { LibraryIcon, libraryIcons } from "@scalar/icons/library";
import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
//#region src/components/IconSelector.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex text-sm" };
var _hoisted_2 = { class: "bg-b-1 custom-scroll grid w-dvw max-w-[420px] auto-rows-[32px] grid-cols-[repeat(auto-fill,minmax(32px,1fr))] content-between justify-between rounded border p-1" };
//#endregion
//#region src/components/IconSelector.vue
var IconSelector_default = /* @__PURE__ */ defineComponent({
	__name: "IconSelector",
	props: {
		modelValue: {},
		placement: {}
	},
	emits: ["update:modelValue"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const value = computed({
			get: () => props.modelValue,
			set: (v) => emit("update:modelValue", v)
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarPopover), {
				class: "bg-b-2 rounded",
				focus: "",
				placement: __props.placement ?? "bottom"
			}, {
				popover: withCtx(({ close }) => [createVNode(unref(RadioGroup), {
					modelValue: value.value,
					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
					class: "flex flex-col"
				}, {
					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(RadioGroupLabel), { class: "text-c-2 px-1 py-1" }, {
						default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [_cache[1] || (_cache[1] = createTextVNode("Select an icon", -1))])]),
						_: 3
					})]), createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(libraryIcons), (icon) => {
						return openBlock(), createBlock(unref(RadioGroupOption), {
							key: icon.src,
							as: "li",
							class: "text-c-3 hover:text-c-2 hover:bg-b-2 ui-checked:bg-b-3 ui-active:bg-b-2 flex cursor-pointer items-center justify-center rounded p-2",
							value: icon.src,
							onClick: close
						}, {
							default: withCtx(() => [createVNode(unref(RadioGroupLabel), { class: "sr-only" }, {
								default: withCtx(() => [createTextVNode(toDisplayString(icon.src.replaceAll("-", " ")) + " Icon ", 1)]),
								_: 2
							}, 1024), createVNode(unref(LibraryIcon), {
								class: "stroke-[1.5]",
								src: icon.src
							}, null, 8, ["src"])]),
							_: 2
						}, 1032, ["value", "onClick"]);
					}), 128))])]),
					_: 2
				}, 1032, ["modelValue"])]),
				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
				_: 3
			}, 8, ["placement"]);
		};
	}
});
//#endregion
export { IconSelector_default as t };

//# sourceMappingURL=IconSelector-BDC_GQXv.js.map