Radio Group

<script setup lang="ts">
const themes = ref([
  { value: 'light', label: 'Light', description: 'For bright environments' },
  { value: 'dark', label: 'Dark', description: 'Easier on the eyes' },
  { value: 'system', label: 'System', description: 'Follows your system preference' },
])

const selectedTheme = ref('system')
</script>

<template>
  <NRadioGroup
    v-model="selectedTheme"
    :items="themes"
  />
</template>

<script setup lang="ts">
const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
]
</script>

<template>
  <div class="space-y-8">
    <div class="space-y-2">
      <span class="text-sm text-gray-500 font-medium dark:text-gray-400">Vertical (Default)</span>
      <NRadioGroup
        :items="options"
        default-value="option1"
        orientation="vertical"
        class="space-y-2"
      />
    </div>

    <div class="space-y-2">
      <span class="text-sm text-gray-500 font-medium dark:text-gray-400">Horizontal</span>
      <NRadioGroup
        :items="options"
        default-value="option2"
        orientation="horizontal"
        class="space-x-4"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const options = ref([
  { label: 'Orange', value: 'orange', radioGroup: 'orange' },
  { label: 'Green', value: 'green', radioGroup: 'green' },
  { label: 'Blue', value: 'blue', radioGroup: 'blue' },
  { label: 'Red', value: 'red', radioGroup: 'red' },
  { label: 'Purple', value: 'purple', radioGroup: 'purple' },
  { label: 'Pink', value: 'pink', radioGroup: 'pink' },
  { label: 'Teal', value: 'teal', radioGroup: 'teal' },
  { label: 'Yellow', value: 'yellow', radioGroup: 'yellow' },
])
const value = ref('default')
</script>

<template>
  <NRadioGroup
    v-model="value"
    radio-group="yellow"
    orientation="horizontal"
    :items="options"
  />
</template>

<script setup lang="ts">
const options = ref([
  { value: 'lg', label: 'lg' },
  { value: '24px', label: '24px', size: '24px' },
  { value: '8', label: '8', size: '8' },
])

const value = ref('default')
</script>

<template>
  <NRadioGroup
    v-model="value"
    size="lg"
    orientation="horizontal"
    :items="options"
  />
</template>

<script setup lang="ts">
const options = ref([
  { value: 'react', icon: 'i-logos-react', radioGroup: 'sky' },
  { value: 'vue', icon: 'i-logos-vue', radioGroup: 'green' },
  { value: 'angular', icon: 'i-logos-angular-icon', radioGroup: 'red' },
  { value: 'svelte', icon: 'i-logos-svelte-icon', radioGroup: 'orange' },
])
const value = ref('vue')
</script>

<template>
  <NRadioGroup
    v-model="value"
    :items="options"
    orientation="horizontal"
    class="justify-around"
    size="12"
    :una="{
      radioGroupItem: 'data-[state=checked]:scale-150 transition-transform duration-1000',
    }"
  />
</template>

<script setup lang="ts">
const options = ref([
  { value: 'none', label: 'none', rounded: 'none' },
  { value: 'sm', label: 'sm', rounded: 'sm' },
  { value: 'md', label: 'md', rounded: 'md' },
  { value: '3px', label: '3px', rounded: '3px' },
  { value: 'full', label: 'full', rounded: 'full' },
])
const value = ref('default')
</script>

<template>
  <NRadioGroup
    v-model="value"
    :items="options"
    rounded="none"
  />
</template>

<script setup lang="ts">
const options = [
  {
    id: 'r1',
    value: 'default',
    label: 'Default',
    description: 'System default spacing',
    radioGroup: 'lime',
    icon: 'i-lucide-layout-template',
  },
  {
    id: 'r2',
    value: 'comfortable',
    label: 'Comfortable',
    description: 'More room to breathe',
    radioGroup: 'orange',
    icon: 'i-lucide-layout',
  },
  {
    id: 'r3',
    value: 'compact',
    label: 'Compact',
    description: 'Maximum content density',
    radioGroup: 'pink',
    icon: 'i-lucide-layout-dashboard',
  },
]
</script>

<template>
  <NRadioGroup
    default-value="comfortable"
    orientation="horizontal"
    class="flex flex-col gap-4 sm:flex-row"
  >
    <NLabel
      v-for="option in options"
      :key="option.id"
      :for="option.id"
      class="flex cursor-pointer items-start border rounded-lg p-4 transition-colors space-x-3 hover:bg-gray-50 dark:hover:bg-gray-900"
    >
      <NRadioGroupItem
        :id="option.id"
        :radio-group="option.radioGroup"
        rounded="sm"
        size="4xl"
        :value="option.value"
      >
        <template #icon>
          <NIcon :name="option.icon" size="2xl" />
        </template>
      </NRadioGroupItem>

      <div class="space-y-1">
        <span class="block font-medium">
          {{ option.label }}
        </span>
        <p class="text-sm text-gray-500 dark:text-gray-400">
          {{ option.description }}
        </p>
      </div>
    </NLabel>
  </NRadioGroup>
</template>

<script lang="ts">
import type { AcceptableValue, RadioGroupRootEmits } from 'reka-ui'
import type { NRadioGroupItemProps, NRadioGroupProps } from '../../../types'
</script>

<script setup lang="ts" generic="T extends AcceptableValue">
import { reactivePick } from '@vueuse/core'
import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '../../../utils'
import RadioGroupItem from './RadioGroupItem.vue'

const props = withDefaults(defineProps<NRadioGroupProps<T>>(), {
  radioGroup: 'primary',
  size: 'md',
  square: '1em',
})

const emits = defineEmits<RadioGroupRootEmits>()

const rootProps = reactivePick(props, [
  'modelValue',
  'defaultValue',
  'disabled',
  'required',
  'loop',
])
const forwarded = useForwardPropsEmits(rootProps, emits)

function isRadioGroupItem(item: any): item is NRadioGroupItemProps {
  return typeof item === 'object' && item !== null && 'value' in item
}

function isObjectWithKey<K extends PropertyKey>(item: unknown, key: K): item is Record<K, unknown> {
  return typeof item === 'object' && item !== null && key in item
}

function getItemValue(item: NonNullable<T | NRadioGroupItemProps>): string {
  if (props.valueKey && isObjectWithKey(item, props.valueKey))
    return String(item[props.valueKey])

  if (isRadioGroupItem(item))
    return String(item.value)

  return String(item)
}

function getItemLabel(item: NonNullable<T | NRadioGroupItemProps>): string {
  if (props.labelKey && isObjectWithKey(item, props.labelKey))
    return String(item[props.labelKey])

  if (isRadioGroupItem(item) && item.label)
    return String(item.label)

  return ''
}

function getItemDescription(item: NonNullable<T | NRadioGroupItemProps>): string | undefined {
  if (props.descriptionKey && isObjectWithKey(item, props.descriptionKey))
    return String(item[props.descriptionKey])

  if (isRadioGroupItem(item) && item.description)
    return String(item.description)

  return undefined
}
</script>

<template>
  <RadioGroupRoot
    :class="cn(
      'radio-group',
      orientation === 'horizontal' ? 'radio-group-orientation-horizontal' : 'radio-group-orientation-vertical',
      una?.radioGroup,
      props.class,
    )"
    v-bind="forwarded"
  >
    <slot>
      <template v-if="items?.length">
        <RadioGroupItem
          v-for="item in items"
          :key="getItemValue(item!)"
          v-bind="{ rounded, icon, size, square, radioGroup, ...(item as NRadioGroupItemProps) }"
          :una="{ ...una, ...(isRadioGroupItem(item!) && item!.una) }"
          :value="getItemValue(item!)"
        >
          <slot
            name="label"
            :item
          >
            {{ getItemLabel(item!) }}
          </slot>

          <template #description>
            <slot
              name="description"
              :item
            >
              {{ getItemDescription(item!) }}
            </slot>
          </template>
        </RadioGroupItem>
      </template>
    </slot>
  </RadioGroupRoot>
</template>

<script setup lang="ts">
import type { NRadioGroupItemProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import {
  RadioGroupIndicator,
  RadioGroupItem,
  useForwardProps,
} from 'reka-ui'
import { cn, randomId } from '../../../utils'
import Icon from '../../elements/Icon.vue'
import Label from '../../elements/Label.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NRadioGroupItemProps>(), {
  icon: 'radio-group-indicator-icon',
  radioGroup: 'primary',
  size: 'md',
  square: '1em',
})

const id = props.id || randomId('radio-group')

const delegatedProps = reactivePick(props, [
  'as',
  'disabled',
  'id',
  'name',
  'required',
  'value',
])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <div
    :class="cn(
      'radio-group-item-root',
      una?.radioGroupItemRoot,
    )"
    :size
    :radio-group="radioGroup"
  >
    <div
      :class="cn(
        'radio-group-item-wrapper',
        una?.radioGroupItemWrapper,
      )"
    >
      <RadioGroupItem
        as-child
        v-bind="forwardedProps"
      >
        <button
          :id
          :class="
            cn(
              'radio-group-item',
              una?.radioGroupItem,
              props.class,
            )
          "
          :square
          :rounded
        >
          <RadioGroupIndicator
            :class="cn(
              'radio-group-indicator',
              una?.radioGroupIndicator,
            )"
          >
            <slot name="icon">
              <Icon
                :name="icon"
                :class="cn(
                  'radio-group-indicator-icon-base',
                  una?.radioGroupIndicatorIcon,
                )"
              />
            </slot>
          </RadioGroupIndicator>
        </button>
      </RadioGroupItem>

      <Label
        v-if="props.label || $slots.default"
        :for="props.id ?? id"
        :class="cn(
          'radio-group-item-label',
          una?.radioGroupItemLabel,
        )"
      >
        <slot>
          {{ label }}
        </slot>
      </Label>
    </div>

    <p
      v-if="description || $slots.description"
      :class="cn(
        'radio-group-item-description',
        una?.radioGroupItemDescription,
      )"
    >
      <slot name="description">
        {{ description }}
      </slot>
    </p>
  </div>
</template>