Model Selector

<script setup lang="ts">
import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
</script>

<template>
  <Dialog v-bind="$attrs">
    <slot />
  </Dialog>
</template>

<script setup lang="ts">
import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
</script>

<template>
  <DialogTrigger v-bind="$attrs">
    <slot />
  </DialogTrigger>
</template>

<script setup lang="ts">
import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandDialog v-bind="$attrs">
    <slot />
  </CommandDialog>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <CommandInput
    :class="cn('h-auto py-3.5', props.class)"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
import { CommandList } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandList v-bind="$attrs">
    <slot />
  </CommandList>
</template>

<script setup lang="ts">
import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandEmpty v-bind="$attrs">
    <slot />
  </CommandEmpty>
</template>

<script setup lang="ts">
import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandGroup v-bind="$attrs">
    <slot />
  </CommandGroup>
</template>

<script setup lang="ts">
import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandItem v-bind="$attrs">
    <slot />
  </CommandItem>
</template>

<script setup lang="ts">
import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandShortcut v-bind="$attrs">
    <slot />
  </CommandShortcut>
</template>

<script setup lang="ts">
import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
</script>

<template>
  <CommandSeparator v-bind="$attrs" />
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props {
  provider: string
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <img
    v-bind="$attrs"
    :alt="`${props.provider} logo`"
    :class="cn('size-3 dark:invert', props.class)"
    height="12"
    :src="`https://models.dev/logos/${props.provider}.svg`"
    width="12"
  >
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <div
    :class="
      cn(
        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <span
    :class="cn('flex-1 truncate text-left', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </span>
</template>

export { default as ModelSelector } from './ModelSelector.vue'
export { default as ModelSelectorContent } from './ModelSelectorContent.vue'
export { default as ModelSelectorDialog } from './ModelSelectorDialog.vue'
export { default as ModelSelectorEmpty } from './ModelSelectorEmpty.vue'
export { default as ModelSelectorGroup } from './ModelSelectorGroup.vue'
export { default as ModelSelectorInput } from './ModelSelectorInput.vue'
export { default as ModelSelectorItem } from './ModelSelectorItem.vue'
export { default as ModelSelectorList } from './ModelSelectorList.vue'
export { default as ModelSelectorLogo } from './ModelSelectorLogo.vue'
export { default as ModelSelectorLogoGroup } from './ModelSelectorLogoGroup.vue'
export { default as ModelSelectorName } from './ModelSelectorName.vue'
export { default as ModelSelectorSeparator } from './ModelSelectorSeparator.vue'
export { default as ModelSelectorShortcut } from './ModelSelectorShortcut.vue'
export { default as ModelSelectorTrigger } from './ModelSelectorTrigger.vue'