[URadioGroup] Customizable color per item

Package

v4.x

Description

Currently, we can customize the global color of the URadioGroup via the props color, but it would be interesting to be able to do this customization per item.

I've created a workaround for now, but it's very verbose and duplicates the NuxtUI style, I don't know if a better solution is possible.

type UiColor = NonNullable<BadgeProps['color']>;
type UiVariant = NonNullable<RadioGroupProps['variant']>;

const RADIO_ITEM_CLASSES: Record<UiColor, { indicator: string; base: string; item: Record<UiVariant, string> }> = {
  primary: {
    indicator: 'bg-primary',
    base: 'focus-visible:outline-primary',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-primary',
      table: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]',
    },
  },
  secondary: {
    indicator: 'bg-secondary',
    base: 'focus-visible:outline-secondary',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-secondary',
      table: 'has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]',
    },
  },
  success: {
    indicator: 'bg-success',
    base: 'focus-visible:outline-success',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-success',
      table: 'has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]',
    },
  },
  info: {
    indicator: 'bg-info',
    base: 'focus-visible:outline-info',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-info',
      table: 'has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]',
    },
  },
  warning: {
    indicator: 'bg-warning',
    base: 'focus-visible:outline-warning',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-warning',
      table: 'has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]',
    },
  },
  error: {
    indicator: 'bg-error',
    base: 'focus-visible:outline-error',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-error',
      table: 'has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]',
    },
  },
  neutral: {
    indicator: 'bg-inverted',
    base: 'focus-visible:outline-inverted',
    item: {
      list: '',
      card: 'has-data-[state=checked]:border-inverted',
      table: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]',
    },
  },
};

function buildItemUi(color: BadgeProps['color']) {
  const entry = RADIO_ITEM_CLASSES[(color ?? props.color)];
  if (!entry) return undefined;
  const variant = (props.variant ?? 'list');
  return {
    indicator: entry.indicator,
    base: entry.base,
    item: entry.item[variant],
  };
}

Additional context

No response

Start at the URadioGroup component and its existing color prop, then compare the provided RADIO_ITEM_CLASSES workaround with the component's item and variant styling. Done means each radio item can supply its own color while preserving list, card, and table variants without requiring duplicated consumer-side classes.