cns.ts

type VariantValue<T> = { [K in keyof T]?: keyof T[K] }
type Variant = { [k: string]: string }
type VariantConfig = { [k: string]: Variant }

const cns = <T extends VariantConfig>(base: string, variantsConfig?: T, defaultVariants: VariantValue<T> = {}) => (variantsValues: VariantValue<T> = {}): string => {
  const variants = Object.entries(variantsConfig || {}).map(([name, values]) => values?.[variantsValues[name] || defaultVariants[name]] ?? '')
  return [base, ...variants].filter(Boolean).join(' ')
}

const button = cns(
  'flex items-center justify-center',
  {
    variant: {
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      neutral: 'bg-neutral'
    },
    disabled: {
      true: 'a',
      false: 'b'
    }
  },
  {
    variant: 'primary',
    disabled: 'true'
  }
)

const classes = button({ variant: 'neutral' })

console.log(classes) // "flex items-center justify-center bg-neutral a"