Sandbox

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

type CollapsibleProps = InstanceType<typeof Collapsible>['$props']

interface Props extends /* @vue-ignore */ CollapsibleProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <Collapsible
    :class="cn(
      'not-prose group mb-4 w-full overflow-hidden rounded-md border',
      props.class,
    )"
    :default-open="true"
    v-bind="$attrs"
  >
    <slot />
  </Collapsible>
</template>

<script setup lang="ts">
import type { ToolUIPart } from 'ai'
import type { HTMLAttributes } from 'vue'
import {
  CollapsibleTrigger,
} from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { ChevronDownIcon, CodeIcon } from 'lucide-vue-next'
import { getStatusBadge } from '../tool/utils'

type CollapsibleTriggerProps = InstanceType<typeof CollapsibleTrigger>['$props']

interface Props extends /* @vue-ignore */ CollapsibleTriggerProps {
  title?: string
  state: ToolUIPart['state']
  class?: HTMLAttributes['class']
}

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

<template>
  <CollapsibleTrigger
    :class="cn(
      'flex w-full items-center justify-between gap-4 p-3',
      props.class,
    )"
    v-bind="$attrs"
  >
    <div class="flex items-center gap-2">
      <CodeIcon class="size-4 text-muted-foreground" />
      <span class="font-medium text-sm">{{ title }}</span>
      <component :is="getStatusBadge(state)" />
    </div>
    <ChevronDownIcon class="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
  </CollapsibleTrigger>
</template>

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

type CollapsibleContentProps = InstanceType<typeof CollapsibleContent>['$props']

interface Props extends /* @vue-ignore */ CollapsibleContentProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <CollapsibleContent
    :class="cn(
      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
      props.class,
    )"
    v-bind="$attrs"
  >
    <slot />
  </CollapsibleContent>
</template>

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

type TabsProps = InstanceType<typeof Tabs>['$props']

interface Props extends /* @vue-ignore */ TabsProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <Tabs :class="cn('w-full gap-0', props.class)" v-bind="$attrs">
    <slot />
  </Tabs>
</template>

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

interface Props extends /* @vue-ignore */ HTMLAttributes {
  class?: HTMLAttributes['class']
}

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

<template>
  <div
    :class="cn(
      'flex w-full items-center border-border border-t border-b',
      props.class,
    )"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

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

type TabsListProps = InstanceType<typeof TabsList>['$props']

interface Props extends /* @vue-ignore */ TabsListProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <TabsList
    :class="cn('h-auto rounded-none border-0 bg-transparent p-0', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </TabsList>
</template>

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

type TabsTriggerProps = InstanceType<typeof TabsTrigger>['$props']

interface Props extends /* @vue-ignore */ TabsTriggerProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <TabsTrigger
    :class="cn(
      'rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none',
      props.class,
    )"
    :value="props.value"
    v-bind="$attrs"
  >
    <slot />
  </TabsTrigger>
</template>

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

type TabsContentProps = InstanceType<typeof TabsContent>['$props']

interface Props extends /* @vue-ignore */ TabsContentProps {
  class?: HTMLAttributes['class']
}

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

<template>
  <TabsContent :class="cn('mt-0 text-sm', props.class)" :value="props.value" v-bind="$attrs">
    <slot />
  </TabsContent>
</template>

export { default as Sandbox } from './Sandbox.vue'
export { default as SandboxContent } from './SandboxContent.vue'
export { default as SandboxHeader } from './SandboxHeader.vue'
export { default as SandboxTabContent } from './SandboxTabContent.vue'
export { default as SandboxTabs } from './SandboxTabs.vue'
export { default as SandboxTabsBar } from './SandboxTabsBar.vue'
export { default as SandboxTabsList } from './SandboxTabsList.vue'
export { default as SandboxTabsTrigger } from './SandboxTabsTrigger.vue'