Feature request: Add a utility for dynamic style assignment based on value ranges

[CavalcanteLeo]

It would be extremely helpful to have a utility or hook that allows conditional styling based on some logic (e.g., value > 10, value === 10, value < 10), rather than manually defining styles each time.

Currently, we have to manually create logic for different value ranges and assign corresponding styles, like this:

let style;
if (value === undefined) {
  style = { /* styles for undefined */ };
} else if (value === 0) {
  style = { /* styles for no value */ };
} else if (value <= 25) {
  style = { /* styles */ };
} else if (value <= 50) {
  style = { /* styles */ };
} else {
  style = { /* styles for else */ };
}

we could do something like this:

  const eventIntelStyles = tv({
    slots: {
      styleName: 'flex rounded-lg pb-2',
    },
    variants: {
      dynamic: (value: number) => {
        if (value === 0) {
          return { styleName: 'bg-red-500' };
        }
        if (value > 0) {
          return { styleName: 'bg-gray-850' };
        }
      },
    },
  });