RadioGroup.vue

<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const runtimeEnv = ref('cloud')
const logLevel = ref('info')
const dispatchMode = ref('queue')
const cardPick = ref('standard')
const tablePick = ref('trace')

const runtimeItems = [
  { label: 'Cloud', description: 'Managed runtime hosted by ARCP', value: 'cloud' },
  { label: 'Edge', description: 'Low-latency node nearest to your agents', value: 'edge' },
  { label: 'Self-hosted', description: 'Run the runtime in your own infrastructure', value: 'self' },
]

const logLevelItems = [
  { label: 'debug', value: 'debug' },
  { label: 'info', value: 'info' },
  { label: 'warn', value: 'warn' },
  { label: 'error', value: 'error' },
]

const dispatchItems = [
  { label: 'Queue', description: 'Jobs are enqueued and processed in order', value: 'queue' },
  { label: 'Direct', description: 'Jobs are dispatched immediately to an available agent', value: 'direct' },
  { label: 'Broadcast', description: 'Jobs are fanned out to all connected agents', value: 'broadcast' },
]

const cardItems = [
  { label: 'Standard', description: 'Up to 10 concurrent agents', value: 'standard' },
  { label: 'Pro', description: 'Up to 100 concurrent agents', value: 'pro' },
  { label: 'Enterprise', description: 'Unlimited agents + SLA', value: 'enterprise' },
]

const tableItems = [
  { label: 'Trace', description: 'Full span tree', value: 'trace' },
  { label: 'Event', description: 'Discrete runtime events', value: 'event' },
  { label: 'Metric', description: 'Aggregated counters', value: 'metric' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <div class="flex flex-col gap-6 w-full max-w-sm">
        <URadioGroup
          legend="List (default)"
          variant="list"
          :items="runtimeItems"
          v-model="runtimeEnv"
        />
        <URadioGroup
          legend="Card"
          variant="card"
          :items="cardItems"
          v-model="cardPick"
        />
        <URadioGroup
          legend="Table"
          variant="table"
          :items="tableItems"
          v-model="tablePick"
        />
      </div>
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-6">
        <URadioGroup
          v-for="c in colors"
          :key="c"
          :legend="c"
          :color="c"
          :items="['Alpha', 'Beta']"
          default-value="Alpha"
          class="capitalize min-w-28"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-4">
        <URadioGroup
          v-for="s in sizes"
          :key="s"
          :legend="s"
          :size="s"
          :items="['Agent', 'Session', 'Job']"
          default-value="Agent"
          orientation="horizontal"
        />
      </div>
    </GallerySection>

    <GallerySection title="Orientation">
      <div class="flex flex-col gap-4 w-full max-w-sm">
        <URadioGroup
          legend="Vertical (default)"
          orientation="vertical"
          :items="logLevelItems"
          v-model="logLevel"
        />
        <URadioGroup
          legend="Horizontal"
          orientation="horizontal"
          :items="logLevelItems"
          v-model="logLevel"
        />
      </div>
    </GallerySection>

    <GallerySection title="Indicator position">
      <div class="flex flex-col gap-4 w-full max-w-xs">
        <URadioGroup
          legend="Start (default)"
          indicator="start"
          :items="['Lease', 'Runtime', 'Agent']"
          default-value="Lease"
        />
        <URadioGroup
          legend="End"
          indicator="end"
          :items="['Lease', 'Runtime', 'Agent']"
          default-value="Lease"
        />
        <URadioGroup
          legend="Hidden"
          indicator="hidden"
          variant="card"
          :items="['Lease', 'Runtime', 'Agent']"
          default-value="Lease"
          orientation="horizontal"
        />
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-col gap-4 w-full max-w-xs">
        <URadioGroup
          legend="Disabled"
          disabled
          :items="dispatchItems"
          default-value="queue"
        />
        <URadioGroup
          legend="Required"
          required
          :items="['Immediate', 'Deferred', 'Scheduled']"
          default-value="Immediate"
        />
        <URadioGroup
          legend="Highlighted"
          highlight
          color="success"
          :items="['Running', 'Idle', 'Draining']"
          default-value="Running"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — dispatch mode">
      <URadioGroup
        legend="Job dispatch strategy"
        variant="card"
        color="primary"
        :items="dispatchItems"
        v-model="dispatchMode"
        class="w-full max-w-sm"
        required
      />
    </GallerySection>
  </div>
</template>