GrRadio

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrFormField, GrRadio, GrRadioGroup } from '@feugene/granularity'

// Значения числовые: перечисления в реальных формах — это обычно id, а не строка.
const planId = ref(2)

const plans = [
  { id: 1, label: 'Команда', description: 'До 10 участников, общий проект' },
  { id: 2, label: 'Бизнес', description: 'Роли, аудит-лог, приоритетная поддержка' },
  { id: 3, label: 'Enterprise', description: 'Только по договору', disabled: true },
]

const confirmed = ref(false)
const error = computed(() => (confirmed.value && planId.value === 1 ? 'Для аудит-лога нужен тариф выше' : ''))
</script>

<template>
  <div class="grid gap-4">
    <GrFormField label="Тариф" :error="error">
      <GrRadioGroup v-model="planId" name="plan" :invalid="Boolean(error)">
        <GrRadio
          v-for="plan in plans"
          :key="plan.id"
          :value="plan.id"
          :disabled="plan.disabled"
        >
          {{ plan.label }}
          <template #description>
            {{ plan.description }}
          </template>
        </GrRadio>
      </GrRadioGroup>
    </GrFormField>

    <label class="flex items-center gap-2 text-sm text-[var(--gr-muted-fg)]">
      <input v-model="confirmed" type="checkbox">
      Проверять требование аудит-лога
    </label>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      Выбран тариф <span class="font-semibold text-[var(--gr-fg)]">#{{ planId }}</span>.
      Группа — одна остановка `Tab`: внутри работают стрелки, `Home` и `End`, отключённый вариант пропускается.
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrRadio } from '@feugene/granularity'

const delivery = ref('weekly')

const selectedLabel = computed(() => {
  const labels: Record<string, string> = {
    daily: 'Daily digest',
    weekly: 'Weekly digest',
    monthly: 'Monthly report',
  }

  return labels[delivery.value] ?? delivery.value
})
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_240px]">
    <div class="grid gap-3">
      <GrRadio v-model="delivery" name="digest-frequency" value="daily">
        Daily digest
      </GrRadio>
      <GrRadio v-model="delivery" name="digest-frequency" value="weekly">
        Weekly digest
      </GrRadio>
      <GrRadio v-model="delivery" name="digest-frequency" value="monthly">
        Monthly report
      </GrRadio>
    </div>

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 text-sm text-[var(--gr-muted-fg)]">
      Current delivery cadence:
      <div class="mt-2 text-base font-semibold text-[var(--gr-fg)]">
        {{ selectedLabel }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrRadio } from '@feugene/granularity'

const density = ref('balanced')
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-3">
      <GrRadio v-model="density" value="compact" variant="button" size="sm">
        Compact
      </GrRadio>
      <GrRadio v-model="density" value="balanced" variant="button" size="sm">
        Balanced
      </GrRadio>
      <GrRadio v-model="density" value="comfortable" variant="button" size="sm">
        Comfortable
      </GrRadio>
    </div>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] bg-[var(--gr-muted)]/35 p-4 text-sm text-[var(--gr-muted-fg)]">
      Button-like radios keep the same `v-model` contract while matching toolbar and segmented-control layouts.
    </div>
  </div>
</template>