Radio card

'use client'

import clsx from 'clsx'
import type React from 'react'
import { createContext, useContext, useId } from 'react'

type Group = {
  name: string
  value?: string
  defaultValue?: string
  onChange?: (value: string) => void
  disabled: boolean
}

const GroupContext = createContext<Group | null>(null)

const columns = {
  1: '',
  2: 'sm:grid-cols-2',
  3: 'sm:grid-cols-2 lg:grid-cols-3',
}

export function RadioCardGroup({
  name,
  value,
  defaultValue,
  onChange,
  columns: count = 2,
  disabled = false,
  className,
  ...props
}: {
  name?: string
  value?: string
  defaultValue?: string
  onChange?: (value: string) => void
  columns?: keyof typeof columns
  disabled?: boolean
} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>) {
  let id = useId()

  return (
    <GroupContext.Provider value={{ name: name ?? id, value, defaultValue, onChange, disabled }}>
      <div role="radiogroup" {...props} className={clsx(className, 'grid gap-3', columns[count])} />
    </GroupContext.Provider>
  )
}

export function RadioCard({
  value,
  title,
  description,
  icon,
  disabled = false,
  className,
  children,
  ...props
}: {
  value: string
  title: React.ReactNode
  description?: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
} & Omit<React.ComponentPropsWithoutRef<'label'>, 'title'>) {
  let group = useContext(GroupContext)
  if (!group) throw new Error('RadioCard must be inside a RadioCardGroup')

  return (
    <label
      {...props}
      className={clsx(
        className,
        'group relative flex cursor-pointer items-start gap-3 rounded-xl p-4 ring-1 ring-zinc-950/10 dark:ring-white/10',
        'hover:ring-zinc-950/20 dark:hover:ring-white/20',
        'has-checked:ring-2 has-checked:ring-zinc-950 dark:has-checked:ring-white',
        'has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent-500',
        'has-disabled:cursor-not-allowed has-disabled:opacity-50'
      )}
    >
      <input
        type="radio"
        name={group.name}
        value={value}
        checked={group.value === undefined ? undefined : group.value === value}
        defaultChecked={group.value === undefined ? group.defaultValue === value : undefined}
        disabled={disabled || group.disabled}
        onChange={() => group.onChange?.(value)}
        className="sr-only"
      />
      {icon && (
        <span className="flex h-lh shrink-0 items-center text-base/6 text-zinc-400 group-has-checked:text-zinc-950 sm:text-sm/6 dark:text-zinc-500 dark:group-has-checked:text-white *:size-4 *:shrink-0">
          {icon}
        </span>
      )}
      <span className="min-w-0 flex-1">
        <span className="block text-base/6 font-medium text-zinc-950 sm:text-sm/6 dark:text-white">{title}</span>
        {description && (
          <span className="mt-0.5 block text-base/6 sm:text-sm/6 text-zinc-500 dark:text-zinc-400">{description}</span>
        )}
        {children}
      </span>
    </label>
  )
}

<script setup lang="ts">
import { inject } from 'vue'
import { RadioCardGroupKey } from './radio-card-group.vue'

withDefaults(
  defineProps<{
    value: string
    title: string
    description?: string
    disabled?: boolean
  }>(),
  { description: undefined, disabled: false }
)

const group = inject(RadioCardGroupKey)
if (!group) throw new Error('RadioCard must be inside a RadioCardGroup')
</script>

<template>
  <label
    :class="[
      'group relative flex cursor-pointer items-start gap-3 rounded-xl p-4 ring-1 ring-zinc-950/10 dark:ring-white/10',
      'hover:ring-zinc-950/20 dark:hover:ring-white/20',
      'has-checked:ring-2 has-checked:ring-zinc-950 dark:has-checked:ring-white',
      'has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent-500',
      'has-disabled:cursor-not-allowed has-disabled:opacity-50',
    ]"
  >
    <input
      type="radio"
      :name="group.name"
      :value="value"
      :checked="(group.model.value ?? group.defaultValue) === value"
      :disabled="disabled || group.disabled.value"
      class="sr-only"
      @change="group.model.value = value"
    />
    <span
      v-if="$slots.icon"
      class="flex h-lh shrink-0 items-center text-base/6 text-zinc-400 group-has-checked:text-zinc-950 sm:text-sm/6 dark:text-zinc-500 dark:group-has-checked:text-white *:size-4 *:shrink-0"
    >
      <slot name="icon" />
    </span>
    <span class="min-w-0 flex-1">
      <span class="block text-base/6 font-medium text-zinc-950 sm:text-sm/6 dark:text-white">{{ title }}</span>
      <span v-if="description" class="mt-0.5 block text-base/6 sm:text-sm/6 text-zinc-500 dark:text-zinc-400">
        {{ description }}
      </span>
      <slot />
    </span>
  </label>
</template>