import { defineComponent as u, mergeModels as p, useModel as c, computed as m, createBlock as f, openBlock as x, unref as l, withCtx as n, createVNode as i, mergeProps as v, createElementVNode as w, toDisplayString as V } from "vue";
import { ScalarListbox as b, ScalarButton as g } from "@scalar/components";
import { ScalarIconCaretDown as h } from "@scalar/icons";
const S = { class: "min-w-0 flex-1 truncate" }, y = /* @__PURE__ */ u({
  inheritAttrs: !1,
  __name: "ExamplePicker",
  props: /* @__PURE__ */ p({
    examples: { default: () => ({}) }
  }, {
    modelValue: {
      required: !0
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o) {
    const r = c(o, "modelValue"), s = m(
      () => Object.entries(o.examples).map(([e, t]) => ({
        id: e,
        label: t?.summary ?? e
      }))
    ), a = m({
      get: () => s.value.find(({ id: e }) => e === r.value),
      set: (e) => r.value = e?.id ?? ""
    });
    return (e, t) => (x(), f(l(b), {
      modelValue: a.value,
      "onUpdate:modelValue": t[0] || (t[0] = (d) => a.value = d),
      class: "w-fit min-w-32",
      options: s.value,
      placement: "bottom-start",
      teleport: ""
    }, {
      default: n(() => [
        i(l(g), v({
          class: "text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal",
          "data-testid": "example-picker",
          variant: "ghost"
        }, e.$attrs), {
          default: n(() => [
            w("div", S, V(a.value?.label ?? "Select an example"), 1),
            i(l(h), {
              class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
              weight: "bold"
            })
          ]),
          _: 1
        }, 16)
      ]),
      _: 1
    }, 8, ["modelValue", "options"]));
  }
});
export {
  y as default
};
