Returning variant keys

[JohnGemstone]

Hello! I'm looking for a way to return the variant keys from a cva function.
I would like to reuse the variant keys for dropdown options in a cms (sanity studio), so it would be nice to be able to couple the two definitions.

e.g. standard button from shadcn/ui

// components/ui/button.tsx

export const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default:
          "bg-slate-900 text-white hover:bg-slate-700",
        destructive:
          "bg-red-500 text-white hover:bg-red-600",
        outline:
          "bg-transparent border border-slate-200 hover:bg-slate-100",
        subtle:
          "bg-slate-100 text-slate-900 hover:bg-slate-200",
        ghost:
          "bg-transparent hover:bg-slate-100",
        link: "bg-transparent underline-offset-4 hover:underline text-slate-900 hover:bg-transparent",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-2 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

Then I'd like to read the variable keys somehow:

// sanity schema

import { buttonVariants } from "@/components/ui/Button";

export const action = {
  name: "action",
  title: "Action",
  type: "object",
  fields: [
    {
      name: "label",
      title: "Label",
      type: "string",
    },
    {
      name: "url",
      title: "URL",
      type: "string",
    },
    {
      name: "variant",
      title: "Variant",
      type: "string",
      options: {
        // grab variants from cva definition
        list: buttonVariants.variants(),  // returns ["default", "destructive", "outline", "subtle", "ghost", "link"]
      }
    },
  ]
};

I'm not sure how common this use case might be but thought it would be worth sharing. (maybe I missed a solution for this)
Thanks!

[JohnGemstone]

Ok, I could simply define the variants separately...
I originally tried this but got type errors, works fine though :) thanks.

const variants =  {
        default:
          "bg-slate-900 text-white hover:bg-slate-700",
        destructive:
          "bg-red-500 text-white hover:bg-red-600",
        outline:
          "bg-transparent border border-slate-200 hover:bg-slate-100",
        subtle:
          "bg-slate-100 text-slate-900 hover:bg-slate-200",
        ghost:
          "bg-transparent hover:bg-slate-100",
        link: "bg-transparent underline-offset-4 hover:underline text-slate-900 hover:bg-transparent",
      }

export const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: variants,
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-2 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

[CanRau]

Came here for the same, defining them beforehand as you do in your last comment, tho'd still be nice to have a direct api for this 😇